/*
 * XCAPS 404 · Versión B · diseño AutomatizaTech (design-taste-frontend + frontend-design).
 * Lectura: tienda streetwear para Maracaibo, lenguaje oscuro de la marca (X de brocha, glitch del 404),
 * piezas de producto con forma de anuncio. Diales: variedad 8, movimiento 6, densidad 4.
 * Un solo acento (rojo de la X), radios de 14 px en tarjetas y píldora en botones.
 */
:root {
  --negro: #0b0b0c;
  --asfalto: #131315;
  --carbon: #1c1c1f;
  --linea: #2c2c30;
  --gris: #8e9096;          /* 6.1:1 sobre --negro */
  --gris-claro: #c9cacd;
  --blanco: #f4f4f2;
  --rojo: #c3141b;          /* botones: texto blanco 6.1:1 */
  --rojo-vivo: #e6311e;     /* solo en titulares grandes y el 404 */
  --wa: #0f7a3e;            /* verde WhatsApp oscurecido: texto blanco 5.4:1 */
  --radio: 14px;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --tec: 'Chakra Petch', ui-monospace, monospace;
  --cuerpo: 'Archivo', system-ui, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--negro); color: var(--blanco); font: 400 16px/1.55 var(--cuerpo); -webkit-font-smoothing: antialiased; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(195, 20, 27, .10), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.sin-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--rojo-vivo); outline-offset: 3px; border-radius: 8px; }

.titulo { font: 900 clamp(44px, 6.4vw, 88px)/.88 var(--display); text-transform: uppercase; letter-spacing: -.005em; }

/* ---------- Barra ---------- */
.nav {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; height: 68px;
  padding: 0 clamp(16px, 4vw, 48px); background: rgba(11, 11, 12, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.nav__marca { display: flex; align-items: center; flex-shrink: 0; }
.nav__x { width: 38px; margin-right: -10px; transform: rotate(-6deg); }
.nav__caps { width: 80px; }
.nav__404 { width: 40px; margin-left: 4px; }
.nav__menu { display: flex; gap: 4px; margin-left: auto; }
.nav__menu a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 10px 12px; border-radius: 8px; font: 600 15px/1 var(--cuerpo); color: var(--gris-claro); }
.nav__menu a .ph { font-size: 18px; color: var(--rojo-vivo); }
@media (max-width: 1180px) { .nav__menu a { padding: 10px 8px; gap: 6px; font-size: 14px; } .nav__menu a .ph { font-size: 17px; } }
.nav__menu a:hover { color: var(--blanco); background: var(--carbon); }
.nav__acciones { display: flex; align-items: center; gap: 8px; }
.nav__icono, .nav__hamburguesa { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: none; color: var(--blanco); font-size: 22px; }
.nav__icono:hover, .nav__hamburguesa:hover { background: var(--carbon); }
.nav__hamburguesa { display: none; }
.nav__bolsa { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--blanco); color: var(--negro); font: 700 14px/1 var(--cuerpo); }
.nav__bolsa i { font-size: 20px; }
.ph { line-height: 1; }
.boton i, .anuncio__pie i { font-size: 1.2em; }

/* ---------- Menú del celular: acordeón bajo la barra ---------- */
.menu-movil {
  position: fixed; left: 0; right: 0; top: var(--tope, 60px); z-index: 29; max-height: calc(100dvh - var(--tope, 60px)); overflow: auto; overscroll-behavior: contain;
  padding: 8px clamp(16px, 4vw, 48px) calc(24px + env(safe-area-inset-bottom)); background: var(--asfalto); border-bottom: 1px solid var(--linea);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); animation: baja .28s cubic-bezier(.2,.8,.2,1);
}
.menu-movil[hidden] { display: none; }
@keyframes baja { from { opacity: 0; transform: translateY(-10px); } }
body.menu-abierto { overflow: hidden; }
.acordeon { border-bottom: 1px solid var(--linea); }
.acordeon summary { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; font: 800 24px/1 var(--display); text-transform: uppercase; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary > .ph:first-child { color: var(--rojo-vivo); font-size: 22px; }
.acordeon__flecha { margin-left: auto; color: var(--gris); font-size: 18px; transition: transform .25s; }
.acordeon[open] .acordeon__flecha { transform: rotate(180deg); }
.acordeon ul { list-style: none; margin: 0; padding: 0 0 12px 34px; }
.acordeon li a { display: flex; align-items: center; min-height: 44px; color: var(--gris-claro); font-weight: 600; }
.acordeon li a:hover { color: var(--blanco); }
.menu-movil__accesos { display: grid; gap: 4px; padding-top: 16px; }
.menu-movil__accesos a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--carbon); font-weight: 600; }
.menu-movil__accesos i { font-size: 20px; color: var(--rojo-vivo); }

/* ---------- Pantalla de carga: el logo se arma y se va solo (CSS puro) ---------- */
.cargador {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--negro); pointer-events: none;
  animation: cargador-fuera .45s ease 1.5s forwards;
}
@keyframes cargador-fuera { to { opacity: 0; visibility: hidden; } }
.cargador__logo { display: flex; align-items: center; }
.cargador__x { width: 92px; margin-right: -22px; animation: trazo .7s cubic-bezier(.2,.8,.2,1) both; }
.cargador__caps { width: 190px; animation: entra-der .6s cubic-bezier(.2,.8,.2,1) .25s both; }
.cargador__404 { width: 92px; margin-left: 8px; animation: falla .5s steps(2) .6s both; }
.cargador__barra { position: relative; width: 180px; height: 3px; border-radius: 2px; background: var(--linea); overflow: hidden; }
.cargador__barra::after { content: ''; position: absolute; inset: 0; background: var(--rojo); transform-origin: left; animation: llena 1.3s cubic-bezier(.4,0,.2,1) both; }
@keyframes trazo { from { opacity: 0; transform: rotate(-40deg) scale(.4); clip-path: inset(0 100% 0 0); } to { transform: rotate(-6deg); clip-path: inset(0 0 0 0); } }
@keyframes entra-der { from { opacity: 0; transform: translateX(-24px); filter: blur(6px); } }
@keyframes falla { 0% { opacity: 0; transform: translateX(8px); } 50% { opacity: 1; transform: translateX(-5px); filter: hue-rotate(40deg); } 100% { opacity: 1; } }
@keyframes llena { from { transform: scaleX(0); } }

.saltar { position: absolute; left: 16px; top: -60px; z-index: 110; padding: 12px 18px; border-radius: 999px; background: var(--blanco); color: var(--negro); font-weight: 700; }
.saltar:focus { top: 12px; }
.insignia { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--rojo); color: #fff; font: 700 12px/22px var(--cuerpo); text-align: center; }
.pulso { animation: pulso .45s ease; }
@keyframes pulso { 40% { transform: scale(1.1); } }

/* ---------- Portada que alterna: cuatro láminas apiladas en la misma celda ---------- */
.heroe { touch-action: pan-y; position: relative; display: grid; min-height: min(88dvh, 820px); overflow: hidden; isolation: isolate; background: var(--negro); }
.heroe__vista {
  grid-area: 1 / 1; position: relative; display: grid; align-items: end; isolation: isolate; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .9s cubic-bezier(.2,.8,.2,1), visibility 0s linear .9s;
}
.heroe__vista.activa, .heroe:not(.heroe--js) .heroe__vista[data-lamina="0"] { opacity: 1; visibility: visible; transition: opacity .9s cubic-bezier(.2,.8,.2,1); }
.heroe__vista::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,11,12,.94) 0%, rgba(11,11,12,.7) 34%, rgba(11,11,12,0) 66%), linear-gradient(0deg, rgba(11,11,12,.92) 0%, transparent 36%);
}
.heroe__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.heroe__vista.activa .heroe__media { animation: acerca 1.6s cubic-bezier(.2,.8,.2,1) both; }
.heroe__vista--foto { --foco: 70%; }
.heroe__vista--hombre { --foco: 64%; } /* en modelo-hombre-zulia la cara está al 62 % del ancho: así queda centrada en el celular */
.heroe__vista.activa .heroe__media--kb { object-position: var(--foco) 30%; animation: kenburns 9s ease-out both; }
@keyframes acerca { from { scale: 1.08; opacity: .4; } }
@keyframes kenburns { from { scale: 1.12; translate: 2% 0; } to { scale: 1.02; translate: 0 0; } }
.heroe__txt { padding: 0 clamp(16px, 5vw, 72px) clamp(96px, 13vh, 132px); max-width: 780px; }
.heroe__vista.activa .heroe__txt > * { animation: sube .8s cubic-bezier(.2,.8,.2,1) both; }
.heroe__vista.activa .heroe__txt > :nth-child(2) { animation-delay: .08s; }
.heroe__vista.activa .heroe__txt > :nth-child(3) { animation-delay: .16s; }
.heroe__vista.activa .heroe__txt > :nth-child(4) { animation-delay: .24s; }
@keyframes sube { from { opacity: 0; transform: translateY(22px); } }
.heroe__marca { margin: 0 0 14px; font: 700 12px/1 var(--tec); letter-spacing: .16em; text-transform: uppercase; color: var(--rojo-vivo); }
/* Sobre las fotos, la línea roja puede caer encima de la piel (a 320 px, sobre el cuello): sombra para que se lea */
.heroe__vista--foto .heroe__marca { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.8); }
.heroe h1, .heroe__h { font: 900 clamp(60px, 9.4vw, 140px)/.84 var(--display); text-transform: uppercase; }
.heroe__h span { color: var(--rojo-vivo); }
.heroe__vista--dos { background: radial-gradient(circle at 74% 46%, #4a0b0e 0%, #1c0b0c 38%, var(--negro) 72%); grid-template-columns: minmax(0, 1fr) minmax(0, 54%); align-items: center; }
.heroe__vista--dos::before { background: none; }
.heroe__vista--dos .heroe__txt { align-self: center; max-width: none; padding-right: clamp(16px, 2vw, 32px); padding-bottom: 56px; }
.heroe__vista--dos h1, .heroe__vista--dos .heroe__h { font-size: clamp(48px, 6.4vw, 100px); }
.heroe__tarjeta { position: relative; overflow: hidden; grid-column: 2; grid-row: 1; align-self: center; width: calc(100% - clamp(16px, 4vw, 56px)); aspect-ratio: 16 / 9; border-radius: 20px; border: 1px solid rgba(255,255,255,.14); background: #1c0b0c; box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); margin-bottom: 56px; }
.heroe__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Marca real sobre el video: abajo, con degradado; el tercio superior (las gorras) queda libre */
.heroe__sello { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 22px clamp(12px, 1.6vw, 20px) clamp(10px, 1.4vw, 16px); background: linear-gradient(0deg, rgba(8,8,9,.88) 0%, rgba(8,8,9,.55) 55%, rgba(8,8,9,0) 100%); pointer-events: none; }
.heroe__logo { display: flex; align-items: center; flex-shrink: 0; }
.heroe__logo-x { width: clamp(24px, 2.4vw, 34px); margin-right: -8px; transform: rotate(-6deg); }
.heroe__logo-caps { width: clamp(52px, 5.4vw, 76px); }
.heroe__logo-404 { width: clamp(26px, 2.7vw, 38px); margin-left: 3px; }
.heroe__sello-txt { font: 700 clamp(10px, 1vw, 12px)/1.3 var(--tec); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.heroe__vista--mix { background: radial-gradient(circle at 74% 46%, #4a0b0e 0%, #1c0b0c 38%, var(--negro) 72%); }
.heroe__vista--mix::before { background: linear-gradient(0deg, rgba(11,11,12,.85) 0%, transparent 34%); }

/* Lámina 3: gorra, perfume y franela juntos, flotando sobre la X de la marca */
.mix { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 52%; pointer-events: none; }
.mix img { position: absolute; }
.mix__x { left: 24%; top: 10%; width: 64%; opacity: .2; transform: rotate(-12deg); }
.mix__perfume { right: 6%; top: 12%; width: 36%; border-radius: var(--radio); box-shadow: 0 40px 60px -20px rgba(0,0,0,.8); transform: rotate(5deg); }
.mix__franela { left: 4%; top: 30%; width: 40%; filter: drop-shadow(0 30px 30px rgba(0,0,0,.6)); transform: rotate(-4deg); }
.mix__gorra { left: 34%; top: 44%; width: 38%; filter: drop-shadow(0 30px 30px rgba(0,0,0,.65)); transform: rotate(-10deg); }
.heroe__vista--mix.activa .mix img:not(.mix__x) { animation: flota 6s ease-in-out infinite alternate; }
.heroe__vista--mix.activa .mix__franela { animation-delay: -2s; }
.heroe__vista--mix.activa .mix__gorra { animation-delay: -4s; }
@keyframes flota { to { translate: 0 -14px; } }
/* Pausa: detiene el movimiento propio de la portada (no la entrada del texto, para que una lámina nueva no quede en blanco) */
.heroe--pausada .heroe__media--kb, .heroe--pausada .mix img { animation-play-state: paused !important; }

/* Controles del carrusel: anterior, puntos, siguiente */
.heroe__control { position: absolute; z-index: 5; right: clamp(16px, 4vw, 48px); bottom: clamp(24px, 5vh, 44px); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(19,19,21,.6); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.heroe:not(.heroe--js) .heroe__control { display: none; }
.heroe__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--blanco); font-size: 20px; }
.heroe__btn:hover { background: rgba(255,255,255,.1); }
.heroe__btn--pausa { font-size: 16px; color: rgba(255,255,255,.65); }
.heroe__btn--pausa:hover, .heroe__btn--pausa[aria-pressed="true"] { color: var(--blanco); }
.heroe__puntos { display: flex; gap: 2px; }
.heroe__puntos button { position: relative; width: 28px; height: 44px; border: 0; background: none; }
.heroe__puntos button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.35); transform: translate(-50%, -50%); transition: width .3s, background .3s; }
.heroe__puntos button[aria-current="true"]::after { width: 22px; background: var(--rojo-vivo); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 999px;
  border: 2px solid transparent; background: var(--rojo); color: #fff; font: 700 16px/1 var(--cuerpo); white-space: nowrap;
  box-shadow: 0 12px 30px -12px rgba(195,20,27,.8); transition: transform .15s ease, background .2s;
}
.boton:hover { background: #d81920; }
.boton:active { transform: scale(.98); }
.boton:disabled { background: var(--linea); color: var(--gris); box-shadow: none; cursor: not-allowed; }
.boton--linea { background: rgba(11,11,12,.4); border-color: rgba(255,255,255,.35); box-shadow: none; }
.boton--linea:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.boton--wa { background: var(--wa); box-shadow: none; }
.boton--wa:hover { background: #12904a; }
.boton--ancho { width: 100%; }

/* ---------- Cinta (una sola en la página) ---------- */
.cinta { overflow: hidden; background: var(--rojo); }
.cinta__pista { display: flex; width: max-content; animation: desliza 30s linear infinite; }
.cinta span { font: 700 13px/1 var(--tec); letter-spacing: .1em; text-transform: uppercase; padding: 12px 26px; white-space: nowrap; }
.cinta span::after { content: '✕'; margin-left: 26px; opacity: .55; }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ---------- Drop: piezas tipo anuncio ---------- */
.drop { max-width: 1320px; margin: 0 auto; padding: 96px clamp(16px, 4vw, 48px) 0; }
.drop__fila { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; margin-top: 32px; }
.anuncio {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; padding: 24px; overflow: hidden; isolation: isolate;
  border-radius: var(--radio); border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tono) 55%, #0b0b0c) 0%, #0f0f11 72%);
}
.anuncio__x { position: absolute; z-index: -1; top: -8%; right: -16%; width: 80%; opacity: .16; transform: rotate(12deg); }
.anuncio__img { position: absolute; left: 50%; top: 34%; width: 74%; transform: translate(-50%, -50%) rotate(-8deg); filter: drop-shadow(0 30px 30px rgba(0,0,0,.55)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.anuncio:hover .anuncio__img { transform: translate(-50%, -54%) rotate(-3deg) scale(1.05); }
.anuncio__gancho { margin: 0; font: 900 clamp(34px, 3.4vw, 52px)/.9 var(--display); text-transform: uppercase; }
.anuncio__nombre { margin: 10px 0 0; color: var(--gris-claro); font-size: 15px; }
.anuncio__pie { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 0; }
.anuncio__pie b { font: 800 34px/1 var(--display); }
.anuncio__pie span { padding: 12px 20px; border-radius: 999px; background: var(--blanco); color: var(--negro); font-weight: 700; font-size: 14px; transition: background .2s; }
.anuncio:hover .anuncio__pie span { background: #fff; }
.anuncio__pie span { display: inline-flex; align-items: center; gap: 6px; }
/* Sin recorte (perfumes): la foto del anuncio ocupa la parte de arriba y se funde con el texto */
.anuncio--foto .anuncio__img { left: 0; top: 0; width: 100%; height: 74%; object-fit: cover; transform: none; filter: none; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.anuncio--foto:hover .anuncio__img { transform: scale(1.04); }
.anuncio--foto .anuncio__x { display: none; }

/* ---------- Encuentra tu fit: las cuatro familias de gorras con foto real ---------- */
.fits { max-width: 1320px; margin: 0 auto; padding: 96px clamp(16px, 4vw, 48px) 0; }
.fits__fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.fit { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(255,255,255,.08); isolation: isolate; }
.fit img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.fit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.2) 46%, transparent 70%); }
.fit:hover img { transform: scale(1.06); }
.fit__txt { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 4px; color: var(--gris-claro); font-size: 14px; }
.fit__txt b { color: var(--blanco); font: 900 30px/.95 var(--display); text-transform: uppercase; }
.fit__txt b::after { content: ''; display: block; width: 28px; height: 3px; margin-top: 8px; background: var(--rojo-vivo); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.fit:hover .fit__txt b::after { width: 56px; }

/* ---------- Tienda ---------- */
.tienda { max-width: 1320px; margin: 0 auto; padding: 112px clamp(16px, 4vw, 48px) 32px; scroll-margin-top: 72px; }
.tienda__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tienda__cuenta { margin: 0; font: 600 13px/1 var(--tec); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.pestanas { display: flex; gap: 8px; margin: 28px 0 12px; overflow-x: auto; scrollbar-width: none; }
.pestanas button { flex-shrink: 0; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--linea); background: var(--carbon); color: var(--gris-claro); font-weight: 600; font-size: 15px; }
.pestanas button[aria-selected="true"] { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.chips[hidden] { display: none; }
.chips button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px dashed #3a3a40; background: none; color: var(--gris); font-size: 14px; }
.chips button[aria-pressed="true"] { border-style: solid; border-color: var(--gris-claro); color: var(--blanco); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.rejilla__vacia { color: var(--gris); }
.tarjeta__abrir { display: block; }
.tarjeta__media {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tono) 32%, #18181b) 0%, #111113 74%);
  display: grid; place-items: center;
}
.tarjeta__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tarjeta__img.es-recorte { width: 80%; height: auto; object-fit: contain; filter: drop-shadow(0 24px 24px rgba(0,0,0,.5)); transform: rotate(-6deg); }
.tarjeta__abrir:hover .tarjeta__img.es-recorte { transform: rotate(-2deg) translateY(-8px) scale(1.04); }
.tarjeta__abrir:hover .tarjeta__img:not(.es-recorte) { transform: scale(1.04); }
.tarjeta__info { padding: 14px 4px 0; }
.tarjeta__sub { margin: 0; font: 700 11px/1 var(--tec); letter-spacing: .12em; text-transform: uppercase; color: var(--rojo-vivo); }
.tarjeta__nombre { margin-top: 6px; font: 800 26px/1 var(--display); text-transform: uppercase; }
.tarjeta__gancho { margin: 6px 0 0; color: var(--gris); font-size: 14px; }
.tarjeta__precio { margin: 8px 0 0; font: 800 28px/1 var(--display); }
.chapa { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 999px; background: var(--blanco); color: var(--negro); font: 700 11px/1 var(--tec); letter-spacing: .06em; text-transform: uppercase; }
.chip360 { position: absolute; bottom: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(11,11,12,.6); font: 700 11px/1 var(--tec); letter-spacing: .06em; }
.chip360 i { font-size: 14px; }
.chip-ejemplo { position: absolute; bottom: 12px; left: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(233,182,92,.16); border: 1px solid rgba(233,182,92,.45); color: #f0c77a; font: 700 10px/1 var(--tec); letter-spacing: .06em; text-transform: uppercase; }
.tarjeta--agotada .tarjeta__img { filter: grayscale(1) brightness(.5); }
.tarjeta--agotada .tarjeta__nombre, .tarjeta--agotada .tarjeta__precio { color: var(--gris); }
.sello-agotado {
  position: absolute; display: grid; place-items: center; padding: 10px 18px; transform: rotate(-9deg);
  border: 3px solid var(--rojo-vivo); border-radius: 10px; color: var(--rojo-vivo); background: rgba(11,11,12,.75);
  font: 700 13px/1 var(--tec); letter-spacing: .2em; text-transform: uppercase;
}
.sello-agotado b { font: 900 56px/.9 var(--display); letter-spacing: 0; }
.sinfoto { display: grid; place-items: center; gap: 4px; color: var(--gris); }
.sinfoto__inicial { font: 900 80px/1 var(--display); color: #2a2a2f; }

/* ---------- Gírala (360) ---------- */
.gira { max-width: 1320px; margin: 96px auto 0; padding: 0 clamp(16px, 4vw, 48px); display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; scroll-margin-top: 80px; }
.gira p { color: var(--gris-claro); max-width: 42ch; margin: 18px 0 26px; font-size: 17px; }
.gira .nota { font-size: 13px; color: var(--gris); margin: 16px 0 0; }
.demo360 { position: relative; border-radius: 20px; padding: 10px; background: conic-gradient(from 210deg, var(--rojo), transparent 30%, transparent 70%, var(--rojo)); }
.demo360__escenario { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #e9e9e9; }
.demo360__portada { width: 100%; height: 100%; object-fit: cover; }
.demo360__boton {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(195,20,27,.9); color: #fff; font: 800 26px/1 var(--display);
  box-shadow: 0 0 0 10px rgba(195,20,27,.25); animation: late 2.4s ease-in-out infinite;
}
@keyframes late { 50% { box-shadow: 0 0 0 18px rgba(195,20,27,.08); } }
.demo360.activo .demo360__boton { left: auto; right: 22px; top: 22px; transform: none; width: 44px; height: 44px; font-size: 16px; animation: none; box-shadow: none; }

/* ---------- Visor (giro y zoom) ---------- */
.giro { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; }
.giro__marco { width: 100%; height: 100%; display: grid; place-items: center; cursor: grab; }
.giro__marco--arrastre { cursor: grabbing; }
.giro--zoom .giro__marco { cursor: move; touch-action: none; }
/* Dos capas: el cuadro actual y el siguiente encima con opacidad = avance; el zoom mueve las dos juntas */
.giro__capas { position: relative; width: 100%; height: 100%; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.giro__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.giro__img--sig { opacity: 0; }
.giro__marco--arrastre .giro__capas { transition: none; }
.giro__carga { position: absolute; left: 20%; right: 20%; bottom: 16px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.15); overflow: hidden; }
.giro__carga span { display: block; height: 100%; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.giro--listo .giro__carga { opacity: 0; transition: opacity .4s .3s; }
.giro__ctrl { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.giro__ctrl button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(11,11,12,.78); color: #fff; font-size: 20px; line-height: 1; }
.giro__modo { position: absolute; left: 12px; bottom: 12px; display: flex; padding: 3px; border-radius: 999px; background: rgba(11,11,12,.78); }
.giro__modo button { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #fff; font: 700 13px/1 var(--cuerpo); white-space: nowrap; cursor: pointer; }
.giro__modo button i { font-size: 20px; }
.giro__modo button[aria-pressed="true"] { background: var(--rojo); }
.giro__pista { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(11,11,12,.7); color: #fff; font: 700 12px/1 var(--tec); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; animation: pista-ir 3.2s ease both; }
.giro__pista[hidden] { display: none; }
.giro__pista i { font-size: 18px; }
@keyframes pista-ir { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .giro__pista { animation: none; } }
/* En celular el selector va arriba para que las lupas y el producto respiren. */
@media (max-width: 600px) {
  .giro__modo { bottom: auto; top: 12px; }
  .giro__modo button { padding: 0 12px; font-size: 12px; gap: 5px; }
  .giro__pista { bottom: 66px; }
}

/* ---------- Cómo se lleva (bento) ---------- */
.look { max-width: 1320px; margin: 0 auto; padding: 112px clamp(16px, 4vw, 48px) 0; }
/* Escritorio: una fila — mujer (retrato) | pared (ancha, define el alto) | hombre (retrato) */
.look__bento { display: grid; grid-template-columns: 1fr 2.4fr 1fr; gap: 16px; margin-top: 32px; }
.look figure { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; }
.look figure[hidden] { display: none; }
.look img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.look figure:hover img { transform: scale(1.04); }
.look__b { aspect-ratio: 1.7 / 1; }
/* Encuadre: la mujer con gorra y cara; la pared completa; el hombre con la cara y la caja a la izquierda */
.look__a img { object-position: 45% 50%; }
.look__c img { object-position: 30% 50%; }
.look figcaption { position: absolute; left: 14px; bottom: 14px; }
.look__c figcaption { top: 14px; bottom: auto; } /* abajo taparía la caja del perfume */
@media (min-width: 961px) and (max-width: 1180px) { .look figcaption { left: 8px; bottom: 8px; } .look__c figcaption { top: 8px; bottom: auto; } .look figcaption a { padding: 6px 11px; font-size: 12px; } }
.look figcaption a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: rgba(11,11,12,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 600; font-size: 14px; }

/* ---------- Perfume ---------- */
.perfume { position: relative; max-width: 1320px; margin: 112px auto 0; min-height: 560px; border-radius: 20px; overflow: hidden; display: grid; align-items: center; isolation: isolate; }
.perfume__media { position: absolute; inset: 0; z-index: -1; }
.perfume__video { width: 100%; height: 100%; object-fit: cover; }
.perfume__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,12,.92), rgba(11,11,12,.55) 45%, transparent 75%); }
.perfume__txt { padding: 48px clamp(24px, 5vw, 64px); max-width: 560px; }
.perfume__txt p { color: var(--gris-claro); margin: 18px 0 26px; font-size: 17px; }

/* ---------- Cómo comprar ---------- */
.como { max-width: 1320px; margin: 0 auto; padding: 112px clamp(16px, 4vw, 48px) 80px; scroll-margin-top: 72px; }
.pasos { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pasos li { border-top: 3px solid var(--rojo); padding-top: 18px; }
.pasos li > i { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: rgba(195,20,27,.14); color: var(--rojo-vivo); font-size: 26px; }

/* ---------- Instagram: sus últimas 6 publicaciones ---------- */
.ig { max-width: 1320px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px) 96px; }
.ig__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ig__bio { margin: 14px 0 0; color: var(--gris-claro); font-size: 17px; }
.boton--ig { background: var(--blanco); color: var(--negro); box-shadow: none; }
.boton--ig:hover { background: #fff; }
.ig__grilla { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ig__grilla a { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--carbon); }
.ig__grilla img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ig__ver { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,11,12,.55); color: #fff; font-size: 34px; opacity: 0; transition: opacity .25s; }
.ig__grilla a:hover img, .ig__grilla a:focus-visible img { transform: scale(1.06); }
.ig__grilla a:hover .ig__ver, .ig__grilla a:focus-visible .ig__ver { opacity: 1; }
.revela-js .ig__grilla li:nth-child(2) a { transition-delay: .05s; }
.revela-js .ig__grilla li:nth-child(3) a { transition-delay: .1s; }
.revela-js .ig__grilla li:nth-child(4) a { transition-delay: .15s; }
.revela-js .ig__grilla li:nth-child(5) a { transition-delay: .2s; }
.revela-js .ig__grilla li:nth-child(6) a { transition-delay: .25s; }
.pasos h3 { font: 900 40px/1 var(--display); text-transform: uppercase; }
.pasos p { margin: 8px 0 0; color: var(--gris-claro); max-width: 34ch; }

.pie { border-top: 1px solid var(--linea); padding: 40px clamp(16px, 4vw, 48px) 110px; text-align: center; color: var(--gris); font-size: 14px; }
.pie__marca { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 12px; }
.pie p { margin: 6px 0; }
.pie__enlaces { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.pie__enlaces a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pie__enlaces i { font-size: 18px; }
.pie__hecho a { text-decoration: underline; text-underline-offset: 3px; }
.pie a:hover { color: var(--blanco); }

/* ---------- Ficha ---------- */
.ficha { width: min(1120px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--linea); border-radius: 20px; background: var(--asfalto); color: var(--blanco); overflow: auto; }
.ficha[open] { display: grid; grid-template-columns: 1.1fr 1fr; animation: ficha-entra .35s cubic-bezier(.2,.8,.2,1); }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(24px); } }
.ficha::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(4px); }
.ficha__cerrar { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: var(--negro); font-size: 20px; }
.ficha__galeria { position: relative; padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: #0f0f11; }
.ficha__escenario { position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--carbon); }
.ficha__sinfoto { width: 100%; height: 100%; }
.ficha__nota360 { position: absolute; top: 32px; left: 32px; right: 32px; z-index: 2; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.7); font-size: 12px; text-align: center; pointer-events: none; }
.ficha__nota360[hidden] { display: none; }
.ficha__miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha__miniaturas button { width: 68px; height: 68px; padding: 0; border-radius: 10px; border: 2px solid transparent; overflow: hidden; background: var(--carbon); }
.ficha__miniaturas button[aria-selected="true"] { border-color: var(--rojo-vivo); }
.ficha__miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.mini360 { display: grid; place-items: center; align-content: center; gap: 2px; background: var(--rojo) !important; color: #fff; font: 800 16px/1 var(--display); }
.mini360 i { font-size: 22px; }
.mini-anuncio { display: grid; place-items: center; align-content: center; gap: 2px; background: var(--negro) !important; border-color: var(--rojo-vivo) !important; color: #fff; font: 800 11px/1 var(--tec); letter-spacing: .06em; text-transform: uppercase; }
.mini-anuncio i { font-size: 26px; color: var(--rojo-vivo); }
.ficha__escenario[data-modo="anuncio"] { background: #000; }
.anuncio-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.anuncio-sonido, .anuncio-play { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(11,11,12,.65); color: #fff; font-size: 22px; cursor: pointer; }
.anuncio-sonido { right: 12px; bottom: 12px; }
.anuncio-sonido[aria-pressed="true"] { background: var(--rojo-vivo); border-color: var(--rojo-vivo); }
.anuncio-play { inset: 0; margin: auto; width: 64px; height: 64px; font-size: 30px; background: var(--rojo-vivo); border-color: transparent; }
.anuncio-play[hidden] { display: none; }
.chip-anuncio { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--rojo-vivo); color: #fff; font: 700 11px/1 var(--tec); letter-spacing: .06em; text-transform: uppercase; }
.chip-anuncio i { font-size: 14px; }
/* En tarjetas chicas (2 columnas) el chip queda solo con el ícono y pasa abajo a la izquierda para no montarse sobre la chapa «Nueva» (arriba) ni sobre el 360° (abajo a la derecha). */
@media (max-width: 600px) {
  .tarjeta__media .chip-anuncio { top: auto; right: auto; bottom: 10px; left: 10px; width: 32px; height: 32px; padding: 0; justify-content: center; }
  .tarjeta__media .chip-anuncio i { font-size: 20px; }
  .tarjeta__media .chip-anuncio__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.ficha__info { padding: 36px 32px 28px; display: flex; flex-direction: column; }
.ficha__sub { margin: 0; font: 700 12px/1 var(--tec); letter-spacing: .12em; text-transform: uppercase; color: var(--rojo-vivo); }
.ficha h2 { font: 900 clamp(38px, 4vw, 52px)/.92 var(--display); text-transform: uppercase; margin: 10px 44px 0 0; }
.ficha__gancho { margin: 14px 0 0; font-size: 19px; font-weight: 600; }
.ficha__precio { margin: 10px 0 0; font: 900 44px/1 var(--display); }
.ficha__texto { margin: 12px 0 0; color: var(--gris-claro); }
.ficha__color { margin: 8px 0 0; color: var(--gris); font-size: 14px; }
.ficha__ejemplo { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(233,182,92,.1); color: #f0c77a; font-size: 13px; }
.ficha__ejemplo[hidden] { display: none; }
.ficha__ver360 { align-self: flex-start; margin-top: 16px; min-height: 44px; padding: 0 20px; font-size: 14px; }
.ficha__ver360[hidden] { display: none; }
.ficha__ver360[aria-pressed="true"] { background: var(--blanco); color: var(--negro); }
.tallas { border: 0; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tallas legend { font: 700 12px/1 var(--tec); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.tallas label { position: relative; }
.tallas input { position: absolute; inset: 0; opacity: 0; }
.tallas span { display: grid; place-items: center; min-width: 60px; min-height: 44px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 10px; font-weight: 600; cursor: pointer; }
.tallas input:checked + span { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.tallas input:focus-visible + span { outline: 2px solid var(--rojo-vivo); outline-offset: 2px; }
.tallas input:disabled + span { opacity: .35; cursor: not-allowed; }
.cantidad { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.cantidad > span { font: 700 12px/1 var(--tec); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.paso { display: flex; align-items: center; gap: 6px; }
.paso button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--linea); background: var(--carbon); font-size: 20px; }
.paso output { min-width: 26px; text-align: center; font-weight: 700; font-size: 18px; }
.ficha__aviso { min-height: 22px; margin: 0 0 6px; color: #ff8a7a; font-size: 14px; }
.ficha__acordeones { margin-top: 22px; border-top: 1px solid var(--linea); }
.ficha__acordeones .acordeon summary { min-height: 52px; font: 700 13px/1 var(--tec); letter-spacing: .12em; }
.ficha__acordeones .acordeon > p { margin: 0 0 16px; color: var(--gris-claro); font-size: 15px; }
.detalles { margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.detalles dt { font: 700 11px/1 var(--tec); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.detalles dd { margin: 4px 0 0; }
.ficha__envio { margin: 20px 0 0; color: var(--gris); font-size: 13px; }

/* ---------- Carrito ---------- */
.carrito { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
.carrito[aria-hidden="false"] { visibility: visible; }
.carrito__fondo { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; }
.carrito[aria-hidden="false"] .carrito__fondo { opacity: 1; }
.carrito__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 100%); background: var(--asfalto); border-left: 1px solid var(--linea); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.carrito[aria-hidden="false"] .carrito__panel { transform: none; }
.carrito__cab { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--linea); }
.carrito__cab h2 { font: 900 36px/1 var(--display); text-transform: uppercase; }
.carrito__x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: none; font-size: 18px; }
.carrito__lista { list-style: none; margin: 0; padding: 4px 20px; overflow: auto; flex: 1; }
.linea { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.linea__media { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: radial-gradient(circle, #26262b, #141416); display: grid; place-items: center; }
.linea__img { width: 100%; height: 100%; object-fit: cover; }
.linea__img.es-recorte { width: 88%; height: auto; object-fit: contain; }
.linea__nombre { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.3; }
.linea__talla { margin: 2px 0 8px; color: var(--gris); font-size: 13px; }
.linea__alerta { margin: 0 0 8px; color: #ff8a7a; font-size: 13px; font-weight: 600; }
.linea--sin .linea__nombre { text-decoration: line-through; color: var(--gris); }
.linea__ctrl { display: flex; align-items: center; gap: 8px; }
.linea__ctrl button[data-paso] { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--linea); background: var(--carbon); }
.linea__quitar { margin-left: 6px; border: 0; background: none; color: var(--gris); text-decoration: underline; font-size: 13px; padding: 8px 4px; }
.linea__sub { font: 800 22px/1 var(--display); }
.carrito__vacio { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--gris); text-align: center; padding: 24px; }
.carrito__vacio[hidden], .carrito__form[hidden] { display: none; }
.carrito__form { padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); display: grid; gap: 6px; background: var(--carbon); }
.carrito__form label { font: 700 11px/1 var(--tec); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-claro); margin-top: 8px; }
.carrito__form input, .carrito__form select { min-height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid #4a4a50; background: var(--negro); font-size: 16px; }
.carrito__form input[aria-invalid="true"] { border-color: var(--rojo-vivo); }
.carrito__error { min-height: 18px; margin: 0; color: #ff8a7a; font-size: 13px; }
.carrito__total { display: flex; justify-content: space-between; align-items: baseline; }
.carrito__total span { font: 700 12px/1 var(--tec); letter-spacing: .1em; text-transform: uppercase; color: var(--gris-claro); }
.carrito__total strong { font: 900 38px/1 var(--display); }
.carrito__nota { margin: 0 0 8px; font-size: 13px; color: var(--gris); }

/* ---------- Vista del dueño (simulación del Sheet) ---------- */
.hoja-boton { display: inline-flex; align-items: center; gap: 6px; position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 26; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #2f6b3a; background: #0f1f13; color: #c8f0d2; font: 700 13px/1 var(--cuerpo); }
.hoja-boton small { font-weight: 400; opacity: .7; margin-left: 4px; }
.hoja { position: fixed; left: 16px; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 45; max-width: 920px; max-height: min(70dvh, 620px); display: flex; flex-direction: column; background: #fbfbf9; color: #1d1d1f; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); opacity: 0; visibility: hidden; transform: translateY(16px); transition: .25s ease; }
.hoja[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none; }
.hoja__cab { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; background: #e8f3ec; }
.hoja__kicker { margin: 0 0 2px; font: 600 11px/1 var(--tec); letter-spacing: .08em; text-transform: uppercase; color: #2f6b3a; }
.hoja__cab h2 { font: 700 17px/1.2 var(--cuerpo); }
.hoja__x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #cfe3d5; background: #fff; color: #1d1d1f; }
.hoja__tabs { display: flex; gap: 2px; padding: 8px 12px 0; background: #f1f1ee; border-bottom: 1px solid #ddd; }
.hoja__tabs button { border: 1px solid transparent; border-bottom: 0; background: none; padding: 8px 14px; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 13px; color: #555; min-height: 38px; }
.hoja__tabs button[aria-selected="true"] { background: #fff; border-color: #ddd; color: #1a6b33; }
.hoja__n { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: #1a6b33; color: #fff; font-size: 11px; }
.hoja__cuerpo { overflow: auto; flex: 1; background: #fff; }
.hoja__tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.hoja__tabla th, .hoja__tabla td { border: 1px solid #e3e3e0; padding: 6px 10px; text-align: left; white-space: nowrap; }
.hoja__tabla th { position: sticky; top: 0; background: #f6f6f3; color: #555; font-weight: 600; }
.hoja__tabla .mono { font-family: var(--tec); }
.hoja__tabla select { font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid #ccc; background: #fff; color: #1d1d1f; }
.fila--agotado td { background: #fff1f0; }
.fila--oculto td { background: #f2f2f2; color: #999; }
.hoja__vacia { padding: 20px 16px; color: #666; margin: 0; }
.hoja__pie { margin: 0; padding: 10px 16px; font-size: 13px; color: #555; background: #f6f6f3; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hoja__pie button { border: 0; background: none; color: #1a6b33; text-decoration: underline; font-size: 13px; padding: 6px 0; }

.aviso { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--blanco); color: var(--negro); padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 14px; max-width: calc(100% - 32px); box-shadow: 0 12px 30px rgba(0,0,0,.5); transition: .25s ease; }
.aviso--ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Revelado (solo si el JS lo activa) ---------- */
.revela-js [data-revela]:not(.visto) { opacity: 0; transform: translateY(28px); }
.revela-js [data-revela] { transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.revela-js .drop__fila [data-revela]:nth-child(2) { transition-delay: .08s; }
.revela-js .drop__fila [data-revela]:nth-child(3) { transition-delay: .16s; }
/* El recorte deja margen arriba: con interlineado .88 las tildes de las mayúsculas (Í, Ó) sobresalen de la caja */
.revela-js .titulo:not(.visto) { clip-path: inset(-.35em -.1em 100% -.1em); transform: translateY(20px); }
.revela-js .titulo { transition: clip-path .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); clip-path: inset(-.35em -.1em -.2em -.1em); }

/* ---------- Pantallas chicas ---------- */
/* Láminas 1 (anuncio) y 3 (pareja): video a sangre como fondo de toda la portada; el texto va encima con una capa oscura */
.heroe__vista--fondo { background: var(--negro); }
.heroe__vista--fondo .heroe__fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.heroe__vista--fondo::before { background: linear-gradient(90deg, rgba(11,11,12,.95) 0%, rgba(11,11,12,.88) 36%, rgba(11,11,12,.5) 58%, rgba(11,11,12,0) 78%), linear-gradient(0deg, rgba(11,11,12,.9) 0%, transparent 34%); }
.heroe__vista--fondo .heroe__marca { color: #ffa092; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.8); } /* el rojo de marca no llega a AA sobre el video; este es el mismo tono, más claro */
@media (max-width: 960px) {
  .nav__menu { display: none; }
  .nav__acciones { margin-left: auto; }
  .nav__hamburguesa { display: grid; }
  .fits__fila { grid-template-columns: repeat(4, 64%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
  .fit { scroll-snap-align: start; }
  .ig__grilla { grid-template-columns: repeat(3, 1fr); }
  .heroe__vista--mix .heroe__txt { max-width: 60%; }
  /* Tablet y celular: el video arriba (16:9, los dos modelos completos) y el texto debajo. */
  .heroe__vista--dos { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; padding-top: 20px; }
  .heroe__tarjeta { grid-column: 1; grid-row: 1; width: calc(100% - 2 * clamp(16px, 5vw, 72px)); margin: 0 auto; }
  .heroe__vista--dos .heroe__txt { grid-row: 2; align-self: start; padding-top: 28px; padding-bottom: 104px; }
  .heroe__vista--dos h1, .heroe__vista--dos .heroe__h { font-size: clamp(52px, 12vw, 96px); }
  .drop__fila { grid-template-columns: repeat(3, 82%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
  .anuncio { scroll-snap-align: start; min-height: 460px; }
  .gira { grid-template-columns: 1fr; gap: 28px; }
  /* Tablet y celular: mujer y hombre lado a lado (retrato), la pared abajo a todo el ancho y los rótulos debajo de la foto, sin taparla */
  .look__bento { grid-template-columns: 1fr 1fr; gap: 12px; }
  .look__a { grid-area: 1 / 1; }
  .look__c { grid-area: 1 / 2; }
  .look__b { grid-area: 2 / 1 / 3 / 3; aspect-ratio: auto; }
  .look figure { overflow: visible; border-radius: 0; }
  .look img { position: static; height: auto; aspect-ratio: 3 / 4; border-radius: var(--radio); }
  .look__b img { aspect-ratio: 16 / 9; }
  .look figure:hover img { transform: none; }
  .look figcaption, .look__c figcaption { position: static; margin-top: 10px; }
  .look figcaption a { padding: 8px 14px; font-size: 13px; }
  .perfume { margin: 96px 16px 0; min-height: 520px; align-items: end; }
  .perfume__media::after { background: linear-gradient(0deg, rgba(11,11,12,.95), rgba(11,11,12,.4) 60%, transparent); }
  .pasos { grid-template-columns: 1fr; }
  .ficha[open] { grid-template-columns: 1fr; }
  .ficha { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .ficha__info { padding: 22px 20px calc(28px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .nav { height: 60px; }
  .nav__bolsa-txt { display: none; }
  .nav__bolsa { padding: 0 12px; }
  .nav__icono { display: none; }
  .nav__marca { margin-right: auto; }
  .heroe { min-height: 88dvh; }
  .heroe__media { object-position: 36% 0%; }
  .heroe__tarjeta { width: calc(100% - 32px); border-radius: 16px; }
  .heroe__sello { gap: 8px; padding-top: 16px; }
  .heroe__sello-txt { letter-spacing: .08em; }
  .heroe__vista--dos .heroe__txt { padding-top: 22px; }
  .heroe__vista--dos h1, .heroe__vista--dos .heroe__h { font-size: clamp(52px, 15vw, 72px); }
  .heroe__vista.activa .heroe__media--kb { object-position: var(--foco) 0%; }
  .heroe__vista::before { background: linear-gradient(0deg, rgba(11,11,12,.97) 0%, rgba(11,11,12,.78) 44%, rgba(11,11,12,0) 74%); }
  .heroe__txt { padding-bottom: 104px; }
  .heroe h1, .heroe__h { font-size: clamp(52px, 15vw, 72px); }
  .heroe__bajada { font-size: 17px; margin: 16px 0 22px; }
  .heroe__acciones .boton { flex: 1; padding: 0 16px; }
  .heroe__control { left: 16px; right: auto; bottom: 20px; }
  /* Los productos van arriba en una franja propia y el texto queda abajo, sin taparse */
  .mix { width: 100%; top: 0; bottom: auto; height: 70vw; }
  .heroe__vista--mix .heroe__txt { max-width: none; padding-top: 70vw; }
  .mix__x { left: 18%; top: 0; width: 64%; }
  .mix__perfume { width: 40%; top: 8%; right: 5%; }
  .mix__franela { width: 40%; top: 16%; left: 4%; }
  .mix__gorra { width: 36%; top: 30%; left: 32%; }
  .fits__fila { grid-template-columns: repeat(4, 74%); }
  .ig__grilla { gap: 6px; }
  .ig__grilla a { border-radius: 8px; }
  .ig__cab .boton { width: 100%; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tarjeta__nombre { font-size: 21px; }
  .tarjeta__gancho { display: none; }
  .sello-agotado { padding: 6px 10px; font-size: 10px; }
  .sello-agotado b { font-size: 38px; }
  /* En el celular la vista del dueño queda como un botón redondo abajo a la derecha */
  .hoja-boton { left: auto; right: 12px; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; }
  .hoja-boton i { font-size: 22px; }
  .hoja { left: 8px; right: 8px; }
}
/* Celulares muy angostos (<360): la foto va en una franja arriba y el texto debajo, para no tapar la cara */
@media (max-width: 359px) {
  .heroe__vista--foto { background: var(--negro); }
  .heroe__vista--foto::before { display: none; }
  .heroe__vista--foto .heroe__media { bottom: auto; height: 82vw; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .heroe__vista--foto .heroe__txt { padding-top: 78vw; }
}
/* ---------- Banda de cierre (video a todo el ancho, antes del pie) ---------- */
/* Los tres productos del video van de borde a borde entre el 26 % y el 81 % del alto: el título usa la franja oscura de arriba y
   la bajada con el botón el piso de abajo, así nada los tapa. La banda mide 16:9 para que el cuadro se vea entero. */
.cierre { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-areas: "video"; grid-template-rows: minmax(0, 1fr); aspect-ratio: 16 / 9; background: var(--negro); }
.cierre__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cierre::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.7) 14%, rgba(11,11,12,0) 27%, rgba(11,11,12,0) 78%, rgba(11,11,12,.7) 88%, rgba(11,11,12,.94) 100%); }
.cierre__txt { display: contents; }
.cierre__t { grid-area: video; align-self: start; justify-self: center; margin-top: clamp(24px, 3.6vw, 64px); padding: 0 clamp(16px, 5vw, 72px); text-align: center; font: 900 clamp(40px, 5.2vw, 96px)/.92 var(--display); text-transform: uppercase; color: var(--blanco); text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.cierre__t span { color: var(--rojo-vivo); }
.cierre__pie { grid-area: video; align-self: end; justify-self: center; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); margin-bottom: clamp(18px, 2.6vw, 48px); padding: 0 clamp(16px, 5vw, 72px); }
.cierre__bajada { margin: 0; max-width: 40ch; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.45; color: rgba(244,244,242,.94); text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.cierre__pie .boton { flex-shrink: 0; }
/* La pausa va abajo a la derecha, a la altura del botón; la bajada y el botón quedan centrados y no la alcanzan desde 961 px */
.cierre__pausa { grid-area: video; align-self: end; justify-self: end; z-index: 2; margin: 0 clamp(16px, 3vw, 48px) clamp(22px, 2.9vw, 51px) 0; background: rgba(19,19,21,.6); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); font-size: 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cierre__pausa:hover, .cierre__pausa[aria-pressed="true"] { color: #fff; background: rgba(19,19,21,.85); }
/* Tablet y celular: el video se ve entero (16:9) y el texto va fuera, arriba y abajo, sin capa encima de los productos */
@media (max-width: 960px) {
  .cierre { aspect-ratio: auto; grid-template-areas: "titulo" "video" "pie"; grid-template-rows: auto auto auto; padding: clamp(48px, 9vw, 72px) 0 clamp(56px, 10vw, 80px); }
  .cierre::before { display: none; }
  .cierre__video { position: relative; inset: auto; z-index: 0; grid-area: video; height: auto; aspect-ratio: 16 / 9; }
  .cierre__t { grid-area: titulo; margin: 0 0 clamp(20px, 4vw, 32px); font-size: clamp(44px, 9vw, 80px); }
  .cierre__pie { grid-area: pie; align-self: start; flex-direction: column; margin: clamp(22px, 4vw, 32px) 0 0; text-align: center; }
  .cierre__pausa { grid-area: video; align-self: end; margin: 0 12px 12px 0; }
}
@media (max-width: 600px) {
  .cierre__t span { display: block; }
  .cierre .boton { width: 100%; justify-content: center; }
  .cierre__pie { align-self: stretch; }
}
/* ---------- Láminas con video: el texto no tapa los productos (pedido de Luis, 31-oct) ----------
   Anuncio: los 6 primeros segundos son primeros planos y del 7 al 10 las gorras y el perfume van en fila entre el 30 % y el 78 %
   del alto: a la izquierda las gorras parten recién al 37 % y a la derecha el perfume al 27 %. Etiqueta, titular y bajada van
   arriba a la izquierda, en el humo; los botones abajo a la izquierda, en la misma línea que el control del carrusel (Luis,
   31-oct: «el botón abajo y a la izquierda, donde está vista del dueño»).
   Pareja: gorras y caras ocupan la mitad de arriba; todo el texto va abajo, sobre las poleras. Las láminas con foto no cambian. */
.heroe__vista--fondo .heroe__fondo { object-position: 50% 50%; }
.heroe__vista--fondo h1, .heroe__vista--fondo .heroe__h { font-size: clamp(44px, 4.4vw, 76px); line-height: .9; }
.heroe__vista--fondo h1 br, .heroe__vista--fondo .heroe__h br { display: none; } /* en una línea; en el celular vuelve el salto */
.heroe__vista--fondo h1, .heroe__vista--fondo .heroe__h { text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.heroe__vista--fondo .heroe__acciones { width: fit-content; } /* sin esto la fila llega al control del carrusel */
/* Arriba la capa es más densa: en los primeros planos pasan gorras claras detrás del título */
.heroe__vista--anuncio::before { background: radial-gradient(ellipse 62% 58% at 0% 0%, rgba(11,11,12,.66) 0%, rgba(11,11,12,.38) 50%, rgba(11,11,12,0) 100%), linear-gradient(180deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.8) 18%, rgba(11,11,12,.45) 30%, rgba(11,11,12,0) 38%), linear-gradient(0deg, rgba(11,11,12,.6) 0%, rgba(11,11,12,0) 14%); }
.heroe__vista--anuncio .heroe__txt { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; max-width: none; padding-top: clamp(20px, 3vh, 32px); padding-bottom: calc(clamp(24px, 5vh, 44px) + 2px); }
.heroe__vista--anuncio .heroe__acciones { margin-top: auto; } /* abajo, centrado con el control (56 px de alto; los botones, 52) */
.heroe__vista--anuncio .heroe__bajada { margin: 12px 0 0; max-width: 36ch; } /* angosta: el bloque no pasa del centro, donde parten los primeros planos */
.heroe__vista--pareja::before { background: linear-gradient(0deg, rgba(11,11,12,.95) 0%, rgba(11,11,12,.84) 34%, rgba(11,11,12,.5) 43%, rgba(11,11,12,0) 53%); } /* las caras empiezan sobre el 54 % desde abajo */
.heroe__vista--pareja .heroe__txt { max-width: none; padding-bottom: calc(clamp(24px, 5vh, 44px) + 2px); } /* el botón queda en la línea del control */
.heroe__vista--pareja .heroe__bajada { margin: 14px 0 20px; }
@media (max-width: 960px) {
  .heroe__vista--fondo h1, .heroe__vista--fondo .heroe__h { font-size: clamp(48px, 12vw, 80px); line-height: .88; }
  .heroe__vista--fondo h1 br, .heroe__vista--fondo .heroe__h br { display: inline; }
  .heroe__vista--anuncio .heroe__fondo { object-position: 56% 50%; }
  .heroe__vista--pareja .heroe__fondo { object-position: 52% 50%; } /* en vertical entran el borde del chico y la cara de ella */
  .heroe__vista--anuncio::before { background: linear-gradient(180deg, rgba(11,11,12,.94) 0%, rgba(11,11,12,.86) 22%, rgba(11,11,12,.5) 32%, rgba(11,11,12,0) 40%), linear-gradient(0deg, rgba(11,11,12,.75) 0%, rgba(11,11,12,0) 16%); }
  /* La cinta de abajo ya dice «delivery gratis» y «pedidos por WhatsApp»: sin la bajada, los productos quedan libres entre el título y los botones */
  .heroe__vista--anuncio .heroe__bajada { display: none; }
  .heroe__vista--pareja::before { background: linear-gradient(0deg, rgba(11,11,12,.97) 0%, rgba(11,11,12,.9) 42%, rgba(11,11,12,.62) 49%, rgba(11,11,12,0) 56%); } /* la etiqueta queda justo bajo las caras */
}
@media (max-width: 600px) {
  .heroe__vista--fondo .heroe__acciones { width: 100%; }
  .heroe__vista--anuncio .heroe__txt { padding-bottom: 84px; } /* el control va abajo a la izquierda: los botones, encima */
  .heroe__vista--pareja .heroe__txt { padding-bottom: 96px; }
}
@media (max-width: 600px) {
  /* El botón redondo «Vista del dueño» (48 px, a 12 px del borde) no debe tapar la pausa: el control se compacta y termina antes. */
  .heroe__control { gap: 2px; padding: 4px; }
  .heroe__control .heroe__btn { width: 40px; height: 40px; }
  .heroe__puntos button { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cargador { display: none; }
}
/* Celulares bajos (360×640): la etiqueta de la pareja caía a la altura del mentón (contraste 2,6); sin la bajada el bloque baja
   a la zona oscura y la etiqueta pasa el 4,5 sin oscurecer las caras */
@media (max-width: 600px) and (max-height: 700px) {
  .heroe__vista--pareja .heroe__bajada { display: none; }
  .heroe__vista--pareja .heroe__acciones { margin-top: 20px; }
}
/* Vista del dueño: en la tienda va dentro de «Así compras», no flotando sobre la portada (Luis, 31-oct). La versión A sigue flotante. */
.como__dueno { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 28px 0 0; color: rgba(244,244,242,.78); font-size: 15px; }
.como .hoja-boton { position: static; width: auto; height: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13px; }
.como .hoja-boton i { font-size: inherit; }

/* Precio por confirmar (precio null en el catálogo): texto chico en lugar de la cifra grande; con número todo vuelve a la cifra. */
.tarjeta__precio--pendiente, .anuncio__pie b.anuncio__pendiente { font: 700 14px/1.2 var(--tec); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-claro); }
.ficha__precio--pendiente { font: 700 20px/1.2 var(--tec); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-claro); }
.carrito__total strong.carrito__total--texto { font: 800 18px/1.2 var(--tec); letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.linea__sub { text-align: right; }
.linea__sub.linea__sub--pendiente { font: 700 12px/1.2 var(--tec); letter-spacing: .06em; text-transform: uppercase; color: var(--gris-claro); max-width: 6.5em; }