/* ══════════════════════════════════════════════════
   MR Boutique — Ropa Pink Fashion
   Concepto 01 · EDITORIAL MARFIL
   Estructura de header y mega-menú derivada de sie7e.ec
   (barra promo + header alto + nav en negrita + mega-menú
   full-width al hover + buscador visible + iconos).
   Mobile-first. Sin frameworks.
   ══════════════════════════════════════════════════ */

:root{
  /* Paleta tomada del logo: rose gold metálico sobre mármol */
  --marble:#FAF6F4;
  --blush:#F6E7E1;
  --blush-deep:#EFDAD2;
  --rose:#C08877;
  --rose-light:#E5BEB0;
  /* rose-dark y topo llevan TEXTO: oscurecidos para cumplir AA 4.5:1 */
  --rose-dark:#8B4F41;
  --carbon:#2B1B20;
  --topo:#7E5F65;
  --line:rgba(43,27,32,.13);
  --wa:#25D366;
  --wa-dark:#1da851;

  --serif:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Montserrat",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --gut:20px;
  --sec:clamp(52px,8vw,92px);
  --maxw:1320px;
  /* El logo es un lockup apilado (MR + script + BOUTIQUE), no un wordmark de
     una línea: para que "BOUTIQUE" sea legible necesita altura real. De ahí
     que el header sea más alto que el de una tienda con logo horizontal. */
  --hdr-h:96px;      /* móvil */
  --logo-h:72px;
  --promo-h:30px;
}

*,*::before,*::after{box-sizing:border-box}

/* VA PRIMERO Y ES OBLIGATORIO: cualquier regla que declare `display` (flex, grid,
   block) pisa al atributo [hidden], que solo trae el display:none por defecto del
   navegador. Sin esto los paneles de pedido y favoritos se ven SIEMPRE y su fondo
   se traga todos los clics. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + var(--promo-h) + 8px)}
body{
  margin:0;background:var(--marble);color:var(--carbon);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:.005em;line-height:1.18}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0}
input{font:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Centinela para saber si la página ya se desplazó (no se usa el evento scroll:
   IntersectionObserver es más fiable y no corre en cada frame). */
#topSentinel{position:absolute;top:0;left:0;width:1px;height:70px;pointer-events:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--carbon);color:var(--marble);padding:12px 18px;z-index:300}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--rose-dark);outline-offset:3px}

/* ═══════════ BARRA PROMO ═══════════ */
.promo-bar{
  background:var(--carbon);color:#F3E7E2;
  height:var(--promo-h);display:flex;align-items:center;justify-content:center;
  padding:0 12px;overflow:hidden;
}
.promo-bar p{
  font-size:10.5px;letter-spacing:.14em;font-weight:400;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}

/* ═══════════ HEADER ═══════════ */
/* El header lleva el MISMO mármol del logo (recortado de nav-banner.png, el
   archivo donde el logo ya venía integrado). Así el logo no se ve como un
   recuadro pegado: comparte piedra con el fondo. */
.hdr{
  position:sticky;top:0;z-index:200;
  background:url("img/marble-band.jpg") center/cover no-repeat, var(--marble);
  border-bottom:1px solid rgba(43,27,32,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.hdr-in{
  max-width:var(--maxw);margin:0 auto;height:var(--hdr-h);
  padding:0 var(--gut);
  display:flex;align-items:center;gap:12px;
  transition:height .25s ease;
}
/* Al hacer scroll el header se compacta, pero el logo NUNCA vuelve al tamaño
   ilegible: se queda en 76px, no en los 56px de antes. */
.hdr.stuck{--hdr-h:96px;--logo-h:76px}

/* Logo: PNG transparente (fondo mármol removido del original de 636px).
   Sin borde, sin radio, sin caja: se apoya directo sobre el mármol del header. */
.brand{flex-shrink:0;display:block;margin-right:auto}
.brand img{height:var(--logo-h);width:auto;display:block;transition:height .25s ease}

/* Hamburguesa (solo móvil) */
.burger{
  width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  cursor:pointer;padding:0 10px;margin-left:-10px;
}
.burger span{display:block;height:1.5px;background:var(--carbon);transition:transform .3s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Nav principal: 15px peso 600, contundente (SIE7E usa 16/700) */
.nav{display:none;align-items:center;gap:6px;height:100%}
.nav-item{position:relative;height:100%;display:flex;align-items:center}
.nav-link{
  display:flex;align-items:center;height:100%;padding:0 14px;
  font-size:14.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--carbon);cursor:pointer;position:relative;
}
.nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:16px;height:2px;
  background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.nav-item:hover .nav-link::after,.nav-item.open .nav-link::after,.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-link.hot{color:var(--rose-dark)}

/* Herramientas de la derecha */
.hdr-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.search{display:none;align-items:center;gap:6px;border-bottom:1px solid var(--line);padding:5px 2px}
.search input{
  border:0;background:none;width:150px;font-size:14px;color:var(--carbon);
}
.search input::placeholder{color:var(--topo)}
.search input:focus{outline:none}
.search:focus-within{border-bottom-color:var(--rose-dark)}
.search button{cursor:pointer;display:flex;padding:2px}
.search svg{width:19px;height:19px;fill:var(--carbon)}

.icon-btn{position:relative;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:var(--carbon);stroke-width:1.6}
.icon-btn.on svg{fill:var(--rose);stroke:var(--rose-dark)}
.icon-btn:hover{background:var(--blush)}
.fav-count{
  position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;
  background:var(--rose-dark);color:#fff;border-radius:9px;
  font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;
}

.wa-btn{
  display:none;align-items:center;gap:8px;
  background:var(--wa);color:#fff;border-radius:2px;
  padding:11px 18px;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  transition:background .25s ease;
}
.wa-btn svg{width:18px;height:18px;fill:#fff}
.wa-btn:hover{background:var(--wa-dark)}

/* ═══════════ MEGA MENÚ ═══════════ */
.mega-host{position:absolute;left:0;right:0;top:100%}
.mega{
  display:none;
  /* mismo mármol del header, muy atenuado para que los enlaces se lean */
  background:linear-gradient(rgba(250,246,244,.93),rgba(250,246,244,.97)), url("img/marble-band.jpg") center/cover;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 26px 40px -28px rgba(43,27,32,.4);
}
.mega.open{display:block;animation:megaIn .22s ease}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega-in{
  max-width:var(--maxw);margin:0 auto;padding:30px var(--gut) 38px;
  display:grid;grid-template-columns:280px 1fr;gap:40px;
}
.mega-promo{position:relative;display:block;overflow:hidden}
.mega-promo img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s ease}
.mega-promo:hover img{transform:scale(1.05)}
.mega-promo span{
  position:absolute;left:0;right:0;bottom:0;padding:16px;
  background:linear-gradient(transparent,rgba(43,27,32,.5) 45%,rgba(43,27,32,.88));color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px 34px;align-content:start}
.mega-col h4{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--carbon);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.mega-col a{
  display:block;padding:7px 0;font-size:14.5px;color:var(--topo);
  transition:color .2s ease,padding-left .2s ease;
}
.mega-col a:hover{color:var(--rose-dark);padding-left:5px}
.mega-col a.hot{color:var(--rose-dark);font-weight:600}

/* ═══════════ MENÚ MÓVIL ═══════════ */
.menu-movil{
  position:fixed;inset:calc(var(--hdr-h) + var(--promo-h)) 0 0 0;z-index:190;
  background:var(--marble);overflow-y:auto;padding:8px var(--gut) 40px;
}
.search-movil{display:flex;width:100%;margin:6px 0 10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.search-movil input{width:100%}
@media (min-width:1080px){.search-movil{display:none}}
.menu-movil details{border-bottom:1px solid var(--line)}
.menu-movil summary{
  list-style:none;cursor:pointer;padding:16px 2px;
  font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;
}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil summary::after{content:"+";font-size:20px;font-weight:300;color:var(--rose-dark)}
.menu-movil details[open] summary::after{content:"–"}
.menu-movil .sub{padding:0 0 14px 2px}
.menu-movil .sub a{display:block;padding:9px 0;color:var(--topo);font-size:15px}
.menu-movil .directo{
  display:block;padding:16px 2px;border-bottom:1px solid var(--line);
  font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}

/* ═══════════ BOTONES ═══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:2px;padding:14px 28px;min-height:48px;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-dark{background:var(--carbon);color:var(--marble);border:1px solid var(--carbon)}
.btn-dark:hover{background:var(--rose-dark);border-color:var(--rose-dark)}
.btn-ghost{background:transparent;color:var(--carbon);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--rose);color:var(--rose-dark)}
.btn.center{display:flex;width:max-content;margin:34px auto 0}

.kicker{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rose-dark);font-weight:600;margin-bottom:14px;
}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;background:var(--blush);overflow:hidden}
.slides{position:relative}
.slide{display:none;grid-template-columns:1fr;align-items:center}
.slide.is-on{display:grid;animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.slide-txt{padding:40px var(--gut) 34px;max-width:var(--maxw);margin:0 auto;width:100%}
.slide h1{font-size:clamp(2.5rem,10vw,4.6rem);font-weight:300}
.slide h1 em{font-style:italic;color:var(--rose-dark)}
.slide-lead{margin-top:18px;color:var(--topo);max-width:40ch;font-size:16.5px}
.slide-txt .btn{margin-top:26px}
.slide-fig{position:relative}
.slide-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center}

.arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;background:rgba(250,246,244,.9);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(43,27,32,.5);transition:background .2s ease;
}
.arrow:hover{background:#fff}
.arrow svg{width:20px;height:20px;fill:none;stroke:var(--carbon);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.arrow.prev{left:10px}
.arrow.next{right:10px}
.dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:5}
.dots button{
  width:8px;height:8px;border-radius:50%;background:rgba(43,27,32,.25);cursor:pointer;
  transition:background .2s ease,width .2s ease;
}
.dots button[aria-selected="true"]{background:var(--rose-dark);width:22px;border-radius:4px}

/* El bloque viejo de mosaicos se BORRÓ (2026-08-13), no se comentó: convertía
   la SECCIÓN entera en una rejilla de 2 columnas, así que el título y la fila de
   mosaicos se repartían el ancho y los mosaicos salían de 294 px en vez de los
   ~400 pedidos. Además fijaba `aspect-ratio` propios que peleaban con los
   nuevos. Dejar una regla paralela viva es invitar a que el bug vuelva.
   La versión que manda está en «CATEGORÍAS EN MOSAICO», al final del archivo. */

/* ═══════════ SECCIONES ═══════════ */
.section{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut) 0}
.sec-head{max-width:58ch;margin-bottom:26px}
.sec-head h2{font-size:clamp(2rem,6.4vw,3.1rem);font-weight:300}
.sec-lead{margin-top:14px;color:var(--topo)}

.cat-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:28px;
}
.filters{display:flex;flex-wrap:wrap;gap:6px 22px}
.filters button{
  padding:6px 0;cursor:pointer;position:relative;
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--topo);
}
.filters button::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--rose-dark);transition:width .3s ease}
.filters button[aria-pressed="true"]{color:var(--carbon)}
.filters button[aria-pressed="true"]::after,.filters button:hover::after{width:100%}
.count{font-size:12.5px;color:var(--topo);letter-spacing:.05em}

/* ═══════════ TARJETAS ═══════════ */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 14px}
.grid-empty{color:var(--topo);padding:18px 0}
.card{display:flex;flex-direction:column;height:100%}
.card-media{position:relative;overflow:hidden;background:var(--blush-deep)}
.card-media img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1s cubic-bezier(.2,.6,.2,1)}
.card:hover .card-media img{transform:scale(1.045)}
.badge{
  position:absolute;top:10px;left:10px;background:rgba(250,246,244,.95);color:var(--rose-dark);
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border-radius:2px;
}
.fav{
  position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;
  background:rgba(250,246,244,.9);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.fav svg{width:19px;height:19px;fill:none;stroke:var(--carbon);stroke-width:1.6}
.fav[aria-pressed="true"] svg{fill:var(--rose);stroke:var(--rose-dark)}
.fav:hover{background:#fff;transform:scale(1.08)}
.card-body{display:flex;flex-direction:column;flex:1;padding-top:14px}
.card .cat{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-dark)}
.card h3{margin-top:7px;font-size:1.28rem;font-weight:400;line-height:1.22}
.card .price{margin-top:5px;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--carbon)}
.card .code{font-size:12px;color:var(--topo);letter-spacing:.06em}
.card-spacer{flex:1 1 auto;min-height:0}
.tallas{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tallas button{
  border:1px solid var(--line);border-radius:2px;min-width:38px;min-height:34px;padding:4px 9px;cursor:pointer;
  font-size:12px;font-weight:500;letter-spacing:.05em;color:var(--topo);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.tallas button:hover{border-color:var(--rose)}
.tallas button[aria-pressed="true"]{border-color:var(--carbon);color:var(--carbon);background:var(--blush)}
.card-cta{
  margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 14px;text-align:center;
  border:1px solid var(--carbon);border-radius:2px;
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease;
}
.card-cta svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}
.card-cta:hover{background:var(--carbon);color:var(--marble)}

.card.wide{grid-column:1 / -1;display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
.card.wide .card-media img{aspect-ratio:4/5}
.card.wide h3{font-size:1.8rem;margin-top:0}
.card.wide .desc{margin-top:10px;color:var(--topo);max-width:44ch}

/* ═══════════ EDITORIAL ═══════════ */
.editorial{margin-top:var(--sec);background:var(--blush);display:grid}
.editorial img{width:100%;aspect-ratio:4/5;object-fit:cover}
.editorial-txt{padding:36px var(--gut) 42px}
.editorial-txt h2{font-size:clamp(1.9rem,6vw,2.8rem);font-weight:300}
.editorial-txt p{margin-top:14px;color:var(--topo);max-width:42ch}
.editorial-txt .btn{margin-top:24px}

/* ═══════════ PASOS ═══════════ */
.pasos-list{display:grid;gap:28px}
.pasos-list li{border-top:1px solid var(--line);padding-top:18px}
.pasos-list .num{display:block;font-family:var(--serif);font-size:2.6rem;font-weight:300;color:var(--rose-light);line-height:1}
.pasos-list h3{margin-top:8px;font-size:1.4rem;font-weight:400}
.pasos-list p{margin-top:8px;color:var(--topo);max-width:38ch}

/* ═══════════ TIENDA ═══════════ */
.tienda{display:grid;gap:28px}
.tienda-fig{margin:0}
.tienda-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tienda-txt h2{font-size:clamp(1.9rem,6vw,2.8rem);font-weight:300}
.tienda-txt p{margin-top:16px;color:var(--topo);max-width:46ch}
.checks{margin:22px 0 26px;display:grid;gap:10px}
.checks li{position:relative;padding-left:24px;font-size:15px}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--rose)}

/* ═══════════ INSTAGRAM ═══════════ */
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ig-grid img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ═══════════ FOOTER ═══════════ */
.foot{margin-top:var(--sec);border-top:1px solid var(--line);background:var(--blush)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:44px var(--gut) 30px;display:grid;gap:30px}
.foot-brand img{height:104px;width:auto;display:block}
.foot-brand p{margin-top:14px;color:var(--topo);font-size:14.5px;max-width:34ch}
.foot-col h3{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px}
.foot-col a,.foot-col p{display:block;color:var(--topo);font-size:14.5px;margin-bottom:8px}
.foot-col a:hover{color:var(--rose-dark)}
.foot-legal{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 104px;font-size:12px;color:var(--topo);letter-spacing:.05em}

/* ═══════════ GARANTÍAS ═══════════ */
.garantias{
  max-width:var(--maxw);margin:var(--sec) auto 0;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.gar{
  background:var(--blush);border:1px solid var(--line);padding:16px 14px;
  display:flex;flex-direction:column;gap:2px;
}
.gar svg{width:24px;height:24px;fill:none;stroke:var(--rose-dark);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.gar b{font-size:14px;font-weight:600;letter-spacing:.01em}
.gar span{font-size:12.5px;color:var(--topo)}

/* ═══════════ MARCAS ═══════════ */
.marcas{max-width:var(--maxw);margin:var(--sec) auto 0;padding:0 var(--gut);text-align:center}
.marcas-lista{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 34px;
}
/* Los logos van en gris y toman color al pasar el mouse: así conviven marcas de
   estilos muy distintos sin que ninguna grite más que el logo de la tienda. */
.marca{display:inline-flex;align-items:center}
/* Por defecto se ve el NOMBRE y el logo está oculto. El logo solo aparece cuando
   carga de verdad (`onload`). Al revés (mostrar la imagen y caer al texto con
   `onerror`) la sección quedaba VACÍA mientras faltaran los archivos, porque en
   algunos navegadores el error nunca llega a dispararse. */
.marca img{
  display:none;height:30px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .25s ease,opacity .25s ease;
}
.marca:hover img{filter:none;opacity:1}
.marca b{
  font-family:var(--sans);font-size:clamp(1.1rem,4.2vw,1.6rem);
  font-weight:600;letter-spacing:.16em;color:var(--carbon);
}
.marca.con-logo img{display:block}
.marca.con-logo b{display:none}
.marcas-mas{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--topo)}
@media (min-width:760px){ .marca img{height:36px;max-width:180px} }
.marcas-nota{margin-top:12px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--topo)}

/* ═══════════ ATAJO DE WHATSAPP EN LA TARJETA ═══════════ */
.wa-mini{
  position:absolute;top:52px;right:8px;width:36px;height:36px;border-radius:50%;
  background:rgba(250,246,244,.92);display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease;
}
.wa-mini svg{width:19px;height:19px;fill:var(--wa)}
.wa-mini:hover{background:#fff;transform:scale(1.08)}

/* el botón de la tarjeta ahora agrega al pedido */
.card-cta{cursor:pointer;width:100%}
.card-cta .ico-bolsa{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.card-cta.puesto{background:var(--blush);border-color:var(--rose);color:var(--rose-dark)}
.card-cta.puesto:hover{background:var(--rose-dark);color:var(--marble);border-color:var(--rose-dark)}
.tallas.pide-talla button{border-color:var(--rose-dark);animation:latir .5s ease 2}
@keyframes latir{0%,100%{transform:none}50%{transform:scale(1.06)}}

/* contador de los iconos del header */
.cuenta{
  position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;
  background:var(--rose-dark);color:#fff;border-radius:9px;
  font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.icon-btn .bolsa{stroke-width:1.5}

/* ═══════════ PANELES (mi pedido / mis favoritos) ═══════════ */
/* z-index 300: por encima del header (200) y del botón flotante (150). Con 180
   el encabezado quedaba ENCIMA del panel y tapaba justo la franja donde está la
   X de cerrar. */
.panel{position:fixed;inset:0;z-index:300;display:flex;justify-content:flex-end}
.panel-fondo{position:absolute;inset:0;background:rgba(43,27,32,.45)}
.panel-caja{
  position:relative;width:100%;max-width:430px;background:var(--marble);
  display:flex;flex-direction:column;max-height:100dvh;
  box-shadow:-18px 0 40px -22px rgba(43,27,32,.6);animation:entraPanel .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes entraPanel{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
/* sticky: la lista de abajo hace scroll dentro del panel; sin esto la X se va
   hacia arriba y el cliente se queda sin salida visible. */
.panel-cab{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px var(--gut);border-bottom:1px solid var(--line);background:var(--blush);
}
.panel-cab h2{font-size:1.4rem;font-weight:400}
/* borde + fondo propios: sin ellos la X se leía como un adorno, no como botón. */
.panel-x{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--line);background:var(--marble);
  transition:background .18s,border-color .18s;
}
.panel-x svg{width:20px;height:20px;fill:none;stroke:var(--carbon);stroke-width:2;stroke-linecap:round}
.panel-x:hover{background:var(--carbon);border-color:var(--carbon)}
.panel-x:hover svg{stroke:var(--marble)}
.panel-cuerpo{flex:1;overflow-y:auto;padding:6px var(--gut)}
.panel-pie{border-top:1px solid var(--line);padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom,0px));background:var(--blush)}

.panel-vacio{padding:52px 8px;text-align:center}
.pv-t{font-family:var(--serif);font-size:1.4rem}
.pv-s{margin-top:10px;color:var(--topo);font-size:14.5px;max-width:32ch;margin-inline:auto}

.linea{display:grid;grid-template-columns:66px 1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.linea img{width:66px;aspect-ratio:3/4;object-fit:cover;background:var(--blush-deep)}
.linea-n{font-family:var(--serif);font-size:1.05rem;line-height:1.25}
.linea-d{font-size:12px;color:var(--topo);margin-top:3px;letter-spacing:.04em}
.linea-p{margin-top:6px;font-size:14.5px;font-weight:600}
.linea-acc{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cant{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:2px}
.cant button{width:32px;height:32px;cursor:pointer;border:0;background:none;font-size:15px;color:var(--carbon)}
.cant button:hover{background:var(--blush)}
.cant span{min-width:24px;text-align:center;font-size:14px;font-weight:600}
.quitar{border:0;background:none;cursor:pointer;font-size:12px;color:var(--topo);text-decoration:underline;padding:6px 2px}
.quitar:hover{color:var(--rose-dark)}
.mini{
  border:1px solid var(--carbon);background:none;cursor:pointer;border-radius:2px;
  padding:9px 12px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.mini:hover{background:var(--carbon);color:var(--marble)}

.total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.total span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--topo)}
.total b{font-family:var(--serif);font-size:1.7rem;font-weight:500}
.pie-nota{font-size:12.5px;color:var(--topo);margin-bottom:14px}
.btn-wa{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;
  background:var(--wa);color:#fff;border-radius:2px;
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background .25s ease;
}
.btn-wa svg{width:19px;height:19px;fill:#fff}
.btn-wa:hover{background:var(--wa-dark)}

/* ═══════════ AVISO CORTO ═══════════ */
.aviso-corto{
  position:fixed;left:50%;bottom:88px;transform:translate(-50%,12px);z-index:200;
  background:var(--carbon);color:var(--marble);padding:12px 20px;border-radius:2px;
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
  box-shadow:0 12px 28px -14px rgba(43,27,32,.7);max-width:90vw;text-align:center;
}
.aviso-corto.visible{opacity:1;transform:translate(-50%,0)}

/* ═══════════ BOTÓN FLOTANTE ═══════════ */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:150;
  width:56px;height:56px;border-radius:50%;background:var(--wa);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.75);transition:transform .25s ease,background .25s ease;
}
.wa-float svg{width:29px;height:29px;fill:#fff}
.wa-float:hover{transform:translateY(-3px);background:var(--wa-dark)}

/* ══════════════ TABLET ══════════════ */
@media (min-width:760px){
  :root{--hdr-h:112px;--logo-h:86px}
  .grid{grid-template-columns:repeat(3,1fr);gap:42px 20px}
  .card.wide{grid-template-columns:1fr 1fr;gap:30px}
  .card.wide .card-media img{aspect-ratio:3/4}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .tiles .tile:first-child{grid-column:span 2}
  .tiles .tile:first-child img{aspect-ratio:3/4}
  .pasos-list{grid-template-columns:repeat(3,1fr);gap:24px}
  .ig-grid{grid-template-columns:repeat(4,1fr)}
  .tienda{grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .editorial{grid-template-columns:1fr 1fr;align-items:center}
  .editorial img{aspect-ratio:3/4;height:100%}
  .editorial-txt{padding:44px}
  .foot-in{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .garantias{grid-template-columns:repeat(4,1fr)}
  .search{display:flex}
  .promo-bar p{font-size:11.5px;letter-spacing:.18em}
}

/* ══════════════ DESKTOP ══════════════ */
@media (min-width:1080px){
  :root{--hdr-h:124px;--logo-h:100px}
  .burger{display:none}
  .menu-movil{display:none !important}
  .nav{display:flex}
  .wa-btn{display:inline-flex}
  .search input{width:180px}

  .slide{grid-template-columns:1.02fr .98fr;min-height:552px}
  .slide-txt{padding:0 0 0 max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
  .slide h1{font-size:clamp(3rem,4.6vw,4.6rem)}
  .slide-fig img{aspect-ratio:auto;height:552px}
  .arrow.prev{left:18px}
  .arrow.next{right:18px}
  .tiles{grid-template-columns:repeat(5,1fr)}
  .tiles .tile:first-child{grid-column:span 1}
  .tiles .tile:first-child img{aspect-ratio:3/4}
}

/* ══════════════ ACCESIBILIDAD ══════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

/* ═══════════ PORTADA + CABECERA CENTRADA (referencia: on.moda) ═══════════ */

/* Bloque de marca: se va con el scroll. La fila del menú (.hdr-in) queda
   pegada arriba, así el logo no come pantalla mientras la clienta navega. */
.hdr-marca{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:22px var(--gut) 16px;
}
/* .brand trae `margin-right:auto` de cuando el logo iba a la izquierda del
   header. Dentro del bloque centrado ese auto lo empujaba contra el borde:
   el logo salia pegado a la izquierda aunque el contenedor centrara. */
.hdr-marca .brand{margin-right:0;margin-inline:auto}
.hdr-marca .brand img{height:86px;width:auto;display:block}
.eslogan{
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--topo);
  margin:0;padding-left:.34em;
}
/* El logo chico vive en la fila del menú y solo aparece al compactar: si no,
   al bajar la página la marca desaparecía por completo. */
.brand-mini{display:none;flex:0 0 auto}
.brand-mini img{height:40px;width:auto;display:block}
.hdr.stuck .hdr-marca{display:none}
.hdr.stuck .brand-mini{display:block}

.portada{position:relative;background:var(--blush)}
.portada img{display:block;width:100%;height:auto}
.portada-cta{
  position:absolute;left:50%;bottom:clamp(18px,4vw,42px);transform:translateX(-50%);
  white-space:nowrap;
}

/* Cuadros oscuros: reemplazan la franja rosada de garantías. */
.tiras{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  padding:14px var(--gut);max-width:var(--maxw);margin-inline:auto;
}
.tira{
  display:flex;align-items:center;justify-content:center;gap:11px;
  background:var(--carbon);color:var(--marble);
  padding:17px 14px;border-radius:2px;text-align:left;
}
.tira svg{width:23px;height:23px;flex:0 0 23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tira b{font-size:12.5px;font-weight:500;letter-spacing:.02em;line-height:1.3}

/* ═══════════ PRECIO EN OFERTA ═══════════ */
.price s{color:var(--topo);font-weight:400;margin-right:7px;opacity:.75}
.price b{font-weight:700}
.badge-off{background:var(--carbon);color:#fff;font-weight:700;letter-spacing:.06em}
.card-media .badge + .badge{top:auto;bottom:12px}

/* ═══════════ WHATSAPP EN EL PIE ═══════════ */
.foot-wa{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.foot-wa svg{width:19px;height:19px;flex:0 0 19px;fill:currentColor}
.foot-wa span{display:flex;flex-direction:column;line-height:1.3}
.foot-wa b{font-weight:600}
.foot-wa em{font-style:normal;font-size:12px;opacity:.66}

@media (max-width:900px){
  .tiras{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .hdr-marca{padding:16px var(--gut) 12px}
  .hdr-marca .brand img{height:63px}
  .eslogan{font-size:9px;letter-spacing:.28em}
  .tira{flex-direction:column;text-align:center;gap:8px;padding:15px 9px}
  .tira b{font-size:11.5px}
  .portada-cta{bottom:16px}
}

/* ═══════════════════════════════════════════════════════════
   MENÚ COPIADO DE ON.MODA
   Medidas tomadas en vivo con getComputedStyle, no a ojo:
     enlace     14px · peso 500 · SIN mayúsculas · color #080404
                relleno 7px 20px · sin espaciado de letras
     franja     34px de alto útil (+10px arriba y abajo = 54px)
     separador  borde izquierdo de 2px #7A7A7A al 35% del alto
     fondo      PLANO. On.moda es blanco liso; el nuestro llevaba
                una textura de mármol y por eso no se veía uniforme.
   ═══════════════════════════════════════════════════════════ */

/* Fondo uniforme en TODO el encabezado: se retira la textura. */
.hdr{ background:#FFFFFF; }
.mega{ background:#FFFFFF; }

/* Fila 1: logo centrado, herramientas a la derecha sin descentrar el logo.
   Van en position:absolute a propósito — si fueran parte del flujo, empujarían
   el logo hacia la izquierda y volvería el problema de ayer. */
/* Sin color propio: hereda el blanco del header. Tenerlo en --marble
   dejaba el bloque del logo beige y la franja del menu blanca, o sea
   dos tonos donde se pidio UNO. */
.hdr-marca{ position:relative; padding:20px var(--gut) 14px; background:transparent; }
.hdr-marca .hdr-tools{
  position:absolute; right:var(--gut); top:50%; transform:translateY(-50%);
}
.hdr-marca .burger{ position:absolute; left:var(--gut); top:50%; transform:translateY(-50%); }

/* Fila 2: la franja del menú */
.hdr-in{
  height:auto; min-height:54px; padding:10px var(--gut);
  justify-content:center; gap:0;
  border-top:1px solid rgba(43,27,32,.12);
}
.nav{ gap:0; height:auto; }
.nav-item{ height:auto; }

.nav-link{
  height:auto; padding:7px 20px;
  font-size:14px; font-weight:500; letter-spacing:normal;
  text-transform:none; color:#080404;
}
/* Se retira el subrayado rosa: on.moda no lo tiene y el pedido fue copia exacta. */
.nav-link::after{ content:none; }
.nav-link:hover{ opacity:.6; }
.nav-link.hot{ color:#080404; }

/* El "|" entre secciones. Va en el item, no en el enlace, para que quede
   centrado en el hueco y no pegado al texto. */
.nav-item + .nav-item::before{
  content:""; align-self:center;
  height:35%; min-height:13px;
  border-left:2px solid #7A7A7A;
}

/* Al compactar, la fila de marca se va y el logo chico entra en la franja. */
.hdr.stuck .hdr-in{ justify-content:flex-start; gap:14px; border-top:0; }
.hdr.stuck .nav{ margin-inline:auto; }

@media (max-width:900px){
  .hdr-in{ display:none; }              /* en móvil manda la hamburguesa */
  .hdr.stuck .hdr-marca{ display:flex; } /* y la marca no se esconde */
  .hdr.stuck .brand-mini{ display:none; }
}

/* ═══════════ FILA ÚNICA: SECCIONES + HERRAMIENTAS ═══════════
   Rejilla de 3 columnas en vez de flex. Con flex, el menú se corre a la
   izquierda en cuanto las herramientas ocupan ancho; con [1fr auto 1fr] el
   menú queda centrado respecto a la PÁGINA, no respecto al hueco que sobra. */
.hdr-in{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  column-gap:16px; min-height:60px; padding:9px var(--gut);
  max-width:var(--maxw); margin-inline:auto;
}
.hdr-in .nav{ grid-column:2; justify-content:center; }
.hdr-in .hdr-tools{ grid-column:3; justify-self:end; gap:6px; }
.hdr-in .brand-mini{ grid-column:1; justify-self:start; }

/* El buscador se achica para que todo entre en una sola línea sin apretar. */
.hdr-in .search input{ width:112px; }
.hdr-in .wa-btn{ padding:10px 15px; font-size:11.5px; letter-spacing:.07em; }
.hdr-in .icon-btn{ width:38px; height:38px; }

/* Bajo 1180px el nav ya no cabe centrado junto a todo: se apoya a la derecha
   del logo chico y las herramientas quedan al final, sin encimarse. */
@media (max-width:1180px){
  .hdr-in{ grid-template-columns:auto 1fr auto; column-gap:10px; }
  .hdr-in .nav{ justify-content:flex-start; }
  .hdr-in .nav-link{ padding:7px 13px; }
  .hdr-in .search input{ width:88px; }
}

/* El botón partía en dos líneas ("PEDIR POR / WHATSAPP") al meterlo en la fila
   del menú: menos ancho disponible y el texto se quiebra. */
.hdr-in .wa-btn{ white-space:nowrap; }
.hdr-in .search{ padding-bottom:4px; }

/* El botón de la portada va al tercio IZQUIERDO, que es donde la imagen deja
   calle vacía. Centrado abajo caía sobre las piernas de las modelos. */
.portada{ position:relative; }
.portada-cta{
  left:clamp(20px,7vw,110px); transform:none;
  bottom:clamp(24px,9vw,90px);
}
@media (max-width:760px){
  /* en celular la calle libre queda abajo, no al costado */
  .portada-cta{ left:50%; transform:translateX(-50%); bottom:18px; }
}

/* ═══════════════════════════════════════════════════════════
   TARJETA DE PRODUCTO — estilo del ejemplo que mandó la clienta
   Corazón en círculo blanco arriba a la derecha · bolsita en
   cuadro de color abajo a la izquierda · lupa abajo a la derecha.
   ═══════════════════════════════════════════════════════════ */

/* Corazón más grande y en blanco pleno, como el ejemplo. */
.fav{
  top:12px; right:12px; width:46px; height:46px;
  background:#fff; box-shadow:0 2px 10px rgba(43,27,32,.16);
}
.fav svg{ width:23px; height:23px; stroke-width:1.5; }

/* Bolsita: cuadro sólido pegado a la esquina inferior izquierda, sin radio,
   igual que el carrito del ejemplo. */
.btn-bolsa{
  position:absolute; left:0; bottom:0; z-index:2;
  width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  background:var(--rose-dark); color:#fff; cursor:pointer;
  transition:background .2s ease;
}
.btn-bolsa svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.btn-bolsa:hover{ background:var(--carbon); }

/* Lupa: discreta, en la esquina opuesta a la bolsita. */
.btn-lupa{
  position:absolute; right:12px; bottom:12px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); color:var(--carbon); cursor:pointer;
  box-shadow:0 2px 10px rgba(43,27,32,.14); transition:background .2s ease,transform .2s ease;
}
.btn-lupa svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.btn-lupa:hover{ background:#fff; transform:scale(1.08); }

/* La foto ahora se puede tocar para ampliar: que el cursor lo diga. */
.card-media img{ cursor:zoom-in; }

/* El WhatsApp de la tarjeta se apila DEBAJO del corazón, no arriba a la
   izquierda: ahí vive la etiqueta (NUEVO / OFERTA) y se la tapaba —salía
   "VO" en vez de "NUEVO". Abajo a la izquierda ahora está la bolsita. */
.wa-mini{ bottom:auto; left:auto; top:66px; right:12px; }

/* ═══════════ VISOR DE FOTO EN GRANDE ═══════════ */
.visor{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.visor-fondo{ position:absolute; inset:0; background:rgba(24,14,17,.92); }
.visor-caja{
  position:relative; margin:0; max-width:min(92vw,760px); max-height:88dvh;
  display:flex; flex-direction:column; gap:12px; animation:visorIn .22s ease;
}
@keyframes visorIn{ from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none} }
.visor-caja img{
  max-width:100%; max-height:76dvh; width:auto; object-fit:contain;
  background:var(--blush-deep); border-radius:2px;
}
.visor-caja figcaption{ text-align:center; color:var(--marble); }
.visor-caja figcaption b{ display:block; font-size:16px; font-weight:500; }
.visor-caja figcaption span{ font-size:14px; opacity:.75; }
.visor-x{
  position:absolute; top:16px; right:16px; z-index:2;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff;
}
.visor-x svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.visor-x:hover{ background:rgba(255,255,255,.26); }

/* ═══════════ MENÚ MÓVIL ═══════════
   Arrancaba en una altura escrita a mano (--hdr-h) que dejó de coincidir con el
   encabezado real al partirlo en dos filas: el cajón quedaba metido debajo y el
   buscador —su primer elemento— no se veía. Ahora la mide el JS. */
.menu-movil{ inset:var(--hdr-real, calc(var(--hdr-h) + var(--promo-h))) 0 0 0; }

/* La fila del menú NO va en celular: ahí manda la hamburguesa. Esta regla tiene
   que ir DESPUÉS de la que la declara `display:grid`, o pierde y se cuela. */
@media (max-width:900px){
  .hdr-in{ display:none; }
  .btn-bolsa{ width:52px; height:52px; }
  .btn-bolsa svg{ width:23px; height:23px; }
  .fav{ width:42px; height:42px; top:10px; right:10px; }
  .btn-lupa{ width:36px; height:36px; right:10px; bottom:10px; }
  .wa-mini{ top:58px; right:10px; }
  .visor{ padding:12px; }
}

/* ═══════════ VISOR: ACERCAR DE VERDAD ═══════════
   La primera versión solo centraba la foto y se veía igual de chica. */
.visor-lienzo{
  position:relative; overflow:hidden; touch-action:none;
  display:flex; align-items:center; justify-content:center;
  max-height:70dvh; border-radius:2px; background:var(--blush-deep);
  cursor:zoom-in;
}
.visor.acercado .visor-lienzo{ cursor:grab; }
.visor.acercado .visor-lienzo:active{ cursor:grabbing; }
.visor-img{
  max-width:100%; max-height:70dvh; width:auto; display:block;
  transform-origin:center center; transition:transform .12s ease-out;
  user-select:none; -webkit-user-drag:none;
}
.visor-zoom{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--marble);
}
.visor-zoom button{
  min-width:38px; height:38px; padding:0 12px; cursor:pointer; border-radius:2px;
  background:rgba(255,255,255,.14); color:#fff; font-size:17px; line-height:1;
}
.visor-zoom .z-reset{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; }
.visor-zoom button:hover{ background:rgba(255,255,255,.28); }
.z-nivel{ min-width:52px; text-align:center; font-size:13px; opacity:.8; }
.visor-ayuda{ text-align:center; font-size:12px; color:rgba(250,246,244,.6); }
@media (max-width:760px){
  .visor-ayuda{ font-size:11px; }
  .visor-ayuda::after{ content:" · o pellizca con dos dedos"; }
}

/* ═══════════════════════════════════════════════════════════
   CATEGORÍAS EN MOSAICO — grandes, con efecto al pasar el mouse
   Referencia on.moda: mosaico 316×470 (vertical 2:3). Los de antes
   eran una banda baja donde la ropa no se veía.
   El nombre va en Montserrat, NO en tipografía manuscrita: la clienta
   rechazó ese estilo por "chirringa". El efecto se logra con el zoom
   y el velo, que es lo que se pidió.
   ═══════════════════════════════════════════════════════════ */
/* CUATRO columnas, no cinco: con cinco cada mosaico quedaba en 246 px de ancho
   y on.moda los tiene en 316. La quinta categoría pasa a una banda ancha, que
   además le da jerarquía en vez de dejarla huérfana en una fila sola. */
.tiles-fila{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.tiles-fila .tile:nth-child(5){
  grid-column:1 / -1; aspect-ratio:16/4.5;
}
.tiles-fila .tile:nth-child(5) .tile-txt{ padding:22px; }
.tile{
  position:relative; overflow:hidden; display:block;
  aspect-ratio:2/3; background:var(--blush-deep);
}
.tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
/* Velo permanente y suave para que el nombre se lea sobre cualquier foto. */
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,16,20,.62) 0%, rgba(28,16,20,.12) 42%, transparent 68%);
  transition:background .45s ease;
}
.tile-txt{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px 18px; display:flex; flex-direction:column; gap:5px;
  color:#fff; text-align:center;
}
.tile-txt b{
  font-size:clamp(1.05rem,1.5vw,1.35rem); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.15;
}
/* "Ver todos" aparece al pasar el mouse: es la señal de que lleva a otro lado. */
.tile-txt em{
  font-style:normal; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.tile:hover img{ transform:scale(1.07); }
.tile:hover::after{
  background:linear-gradient(to top, rgba(28,16,20,.78) 0%, rgba(28,16,20,.34) 55%, rgba(28,16,20,.12) 100%);
}
.tile:hover .tile-txt em,
.tile:focus-visible .tile-txt em{ opacity:.92; transform:none; }

.ver-todo{ margin-top:34px; }
.volver{ margin-top:30px; }

/* Portada de la página de categoría */
.cat-portada{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(38px,6vw,66px) var(--gut) clamp(10px,2vw,20px);
  text-align:center;
}
.cat-portada h1{ font-size:clamp(2rem,5vw,3.1rem); margin-top:6px; }
.cat-portada .count{ margin-top:10px; color:var(--topo); font-size:14px; letter-spacing:.06em; }

@media (max-width:900px){
  .tiles-fila{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .tile-txt{ padding:15px 12px; }
  .tile-txt em{ opacity:.85; transform:none; }   /* en celular no hay "pasar el mouse" */
}