/* ==========================================================================
   SHALOM ACCESORIOS — Sistema de diseño
   Joyas en acero y baño de oro · Tovar, Mérida
   Paleta: blanco · crema · beige · oro tenue
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --blanco:       #FFFFFF;
  --crema:        #FAF7F2;
  --crema-hondo:  #F3EDE4;
  --beige:        #E8DDCD;
  --arena:        #CDBCA4;
  --oro:          #B08D57;
  --oro-claro:    #D4B98C;
  --tinta:        #14110F;
  --grafito:      #3B3532;
  --humo:         #8B8178;
  --linea:        rgba(20, 17, 15, .09);
  --linea-fuerte: rgba(20, 17, 15, .16);
  --velo:         rgba(20, 17, 15, .38);

  /* Tipografía */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --texto:   "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala fluida */
  --t-xs:  clamp(.68rem, .64rem + .18vw, .76rem);
  --t-sm:  clamp(.78rem, .74rem + .2vw,  .88rem);
  --t-md:  clamp(.92rem, .88rem + .22vw, 1.02rem);
  --t-lg:  clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --t-xl:  clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
  --t-2xl: clamp(2.6rem, 1.6rem + 4.6vw, 6rem);

  /* Ritmo */
  --gutter:  clamp(1.25rem, 4vw, 4.5rem);
  --seccion: clamp(4.5rem, 9vw, 9.5rem);
  --ancho:   1560px;

  /* Movimiento */
  --curva:      cubic-bezier(.22, .61, .36, 1);
  --curva-suave: cubic-bezier(.65, .05, .36, 1);
  --lento:  .9s;
  --medio:  .55s;
  --rapido: .28s;

  /* Elevación */
  --sombra-sutil: 0 1px 2px rgba(20,17,15,.04), 0 8px 24px rgba(20,17,15,.05);
  --sombra-media: 0 2px 6px rgba(20,17,15,.05), 0 24px 60px rgba(20,17,15,.09);

  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--texto);
  font-size: var(--t-md);
  font-weight: 300;
  line-height: 1.7;
  color: var(--grafito);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.sin-scroll { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }

ul, ol { list-style: none; }

::selection { background: var(--beige); color: var(--tinta); }

:focus-visible { outline: 1px solid var(--oro); outline-offset: 4px; }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--crema); }
::-webkit-scrollbar-thumb { background: var(--arena); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--oro); }

/* --------------------------------------------------------------------------
   3. UTILIDADES
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion { padding-block: var(--seccion); }
.seccion--crema { background: var(--crema); }
.seccion--tinta { background: var(--tinta); color: var(--crema); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Tipografía de marca ------------------------------------------------------ */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--oro);
  display: flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::before {
  content: "";
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--centro { justify-content: center; }
.eyebrow--centro::after {
  content: "";
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-xl);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--tinta);
}
.titulo em { font-style: italic; color: var(--oro); }

.seccion--tinta .titulo { color: var(--crema); }

.entradilla {
  max-width: 46ch;
  color: var(--humo);
  font-size: var(--t-md);
}

.encabezado-seccion {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.encabezado-seccion--centro { align-items: center; text-align: center; }
.encabezado-seccion--fila {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Botones ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--tinta);
  --btn-fg: var(--crema);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.05rem 2.4rem;
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  overflow: hidden;
  transition: color var(--medio) var(--curva), border-color var(--medio) var(--curva);
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oro);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--medio) var(--curva-suave);
  z-index: -1;
}
.btn:hover::after { transform: scaleY(1); }
.btn:hover { color: var(--blanco); border-color: var(--oro); }

.btn--contorno { --btn-bg: transparent; --btn-fg: var(--tinta); border-color: var(--linea-fuerte); }
.btn--contorno:hover { color: var(--blanco); }

.btn--claro { --btn-bg: transparent; --btn-fg: var(--crema); border-color: rgba(255,255,255,.42); }

.btn--completo { width: 100%; }

/* Enlace con subrayado animado */
.enlace-linea {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-bottom: .45rem;
}
.enlace-linea::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--linea-fuerte);
  transform-origin: right;
  transition: transform var(--medio) var(--curva);
}
.enlace-linea:hover::after { transform: scaleX(0); }
.enlace-linea span { transition: transform var(--medio) var(--curva); }
.enlace-linea:hover span:last-child { transform: translateX(5px); }

/* Reveal al hacer scroll --------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--curva), transform 1s var(--curva);
  transition-delay: var(--retraso, 0ms);
}
[data-reveal].visible { opacity: 1; transform: none; }

/* Reveal tipo cortina. Se usa un pseudo-elemento y NO clip-path sobre el propio
   elemento: Chromium descuenta el clip-path al calcular la intersección y el
   IntersectionObserver nunca llegaría a dispararse. */
[data-reveal="mascara"] {
  position: relative;
  opacity: 1;
  transform: none;
}
[data-reveal="mascara"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--cortina, var(--crema));
  transform-origin: bottom;
  transition: transform 1.15s var(--curva-suave);
  pointer-events: none;
}
[data-reveal="mascara"].visible::after { transform: scaleY(0); }

/* --------------------------------------------------------------------------
   4. CORTINA DE ENTRADA
   La marca ocupa la pantalla completa, luego el telón se abre hacia arriba
   revelando el hero. Dura poco más de un segundo.
   -------------------------------------------------------------------------- */
.cortina {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--tinta);
  transform-origin: top center;
  transition: transform 1s cubic-bezier(.76,0,.24,1), visibility 1s;
}
.cortina.abierta {
  transform: translateY(-100%);
  visibility: hidden;
  animation: none;
}

/* Red de seguridad: si el JavaScript fallara, la cortina se abre sola
   a los 6 segundos y la tienda queda accesible igual. */
.cortina { animation: cortinaSola .9s cubic-bezier(.76,0,.24,1) 6s forwards; }
@keyframes cortinaSola { to { transform: translateY(-100%); visibility: hidden } }
.cortina__centro { display: grid; justify-items: center; }

.cortina__logo {
  max-height: clamp(54px, 11vw, 96px);
  width: auto;
  max-width: min(340px, 70vw);
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateY(14px);
  animation: entrarMarca 1.1s var(--curva) .1s forwards;
}
.cortina__marca {
  font-family: var(--display);
  font-size: clamp(2.2rem, 8vw, 4.4rem);
  font-weight: 300;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--crema);
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  animation: entrarMarca 1.1s var(--curva) .1s forwards;
}
.cortina__lema {
  font-size: clamp(.62rem, 1.6vw, .78rem);
  letter-spacing: .46em;
  text-indent: .46em;
  text-transform: uppercase;
  color: rgba(247,243,236,.44);
  margin: .9rem 0 0;
  opacity: 0;
  animation: entrarMarca 1.1s var(--curva) .34s forwards;
}
.cortina__barra {
  width: min(180px, 46vw);
  height: 1px;
  margin-top: 2.4rem;
  background: rgba(247,243,236,.16);
  overflow: hidden;
}
.cortina__barra i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--oro);
  transform-origin: left center;
  transform: scaleX(0);
  animation: llenar 1.15s cubic-bezier(.5,0,.2,1) .15s forwards;
}
@keyframes entrarMarca { to { opacity: 1; transform: none } }
@keyframes llenar { to { transform: scaleX(1) } }

/* La marca del header entra después de que se abre el telón */
.marca { opacity: 1; }
body.entrando .marca,
body.entrando .anuncio,
body.entrando .acciones,
body.entrando .nav--izquierda { opacity: 0; }
body.revelado .marca,
body.revelado .anuncio,
body.revelado .acciones,
body.revelado .nav--izquierda {
  opacity: 1;
  transition: opacity .7s var(--curva) .15s;
}

/* El titular del hero entra escalonado tras el telón */
body.entrando .hero__texto > * { opacity: 0; transform: translateY(18px); }
body.revelado .hero__slide.activo .hero__texto > * {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--curva), transform .8s var(--curva);
}
body.revelado .hero__slide.activo .hero__texto > *:nth-child(1) { transition-delay: .18s }
body.revelado .hero__slide.activo .hero__texto > *:nth-child(2) { transition-delay: .30s }
body.revelado .hero__slide.activo .hero__texto > *:nth-child(3) { transition-delay: .42s }
body.revelado .hero__slide.activo .hero__texto > *:nth-child(4) { transition-delay: .54s }
body.revelado .hero__slide.activo .hero__texto > *:nth-child(5) { transition-delay: .66s }
body.revelado .hero__slide.activo .hero__texto > *:nth-child(6) { transition-delay: .78s }

@media (prefers-reduced-motion: reduce) {
  .cortina, .cortina__logo, .cortina__marca, .cortina__lema, .cortina__barra i { animation: none; transition: none }
  .cortina.abierta { display: none }
  body.entrando .marca, body.entrando .anuncio, body.entrando .acciones,
  body.entrando .nav--izquierda, body.entrando .hero__texto > * { opacity: 1; transform: none }
}

/* --------------------------------------------------------------------------
   5. BARRA DE ANUNCIOS + HEADER
   -------------------------------------------------------------------------- */
.anuncio {
  background: var(--grafito);
  color: var(--crema);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  height: 38px;
  transition: height var(--medio) var(--curva), opacity var(--medio) var(--curva);
}
.anuncio__pista {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  height: 38px;
  padding-inline: var(--gutter);
}
.anuncio__pista span { opacity: .82; white-space: nowrap; }

/* Al fijarse el header, la barra de anuncios se repliega */
.header--fijo .anuncio { height: 0; opacity: 0; }

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: transform var(--medio) var(--curva),
              background-color var(--medio) var(--curva),
              box-shadow var(--medio) var(--curva);
}
.header__interior {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  height: var(--header-h);
}

.header--sobre-hero { color: var(--blanco); }
.header--fijo {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  color: var(--tinta);
  box-shadow: 0 1px 0 var(--linea);
}
.header--oculto { transform: translateY(-100%); }

.marca {
  justify-self: center;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-indent: .3em;
  white-space: nowrap;
}
.marca small {
  display: block;
  font-family: var(--texto);
  font-size: .5rem;
  letter-spacing: .48em;
  text-indent: .48em;
  opacity: .6;
  margin-top: .1rem;
}

/* Logo subido desde el admin: sustituye al texto de la marca */
.marca--imagen { text-indent: 0; letter-spacing: 0; display: block; line-height: 0; }
.marca__logo {
  height: clamp(30px, 4.4vw, 46px);
  width: auto;
  max-width: min(220px, 42vw);
  object-fit: contain;
  /* Sobre el hero el header es transparente y el fondo oscuro: el logo se aclara.
     Al fijarse el header (fondo claro) vuelve a su color original. */
  filter: brightness(0) invert(1);
  transition: filter .4s var(--suave);
}
.header:not(.header--sobre-hero) .marca__logo { filter: none; }

.nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav--derecha { justify-self: end; }

.nav__enlace {
  position: relative;
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-block: .5rem;
  white-space: nowrap;
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio) var(--curva);
}
.nav__enlace:hover::after { transform: scaleX(1); }

/* Menú desplegable de categorías */
.nav__item { position: relative; }
.mega {
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  translate: -50% 0;
  min-width: 240px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-media);
  padding: 1.4rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), visibility var(--medio);
  color: var(--grafito);
}
.nav__item:hover .mega,
.nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega a {
  display: block;
  padding: .5rem 1.7rem;
  font-size: var(--t-sm);
  letter-spacing: .05em;
  transition: color var(--rapido) var(--curva), padding-left var(--rapido) var(--curva);
}
.mega a:hover { color: var(--oro); padding-left: 2.1rem; }

.acciones { display: flex; align-items: center; gap: 1.15rem; }
.icono-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  transition: opacity var(--rapido) var(--curva);
}
.icono-btn:hover { opacity: .6; }
.icono-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.icono-btn__conteo {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 17px; height: 17px;
  display: grid; place-items: center;
  padding-inline: 4px;
  font-size: .58rem;
  letter-spacing: 0;
  color: var(--blanco);
  background: var(--oro);
  border-radius: 50px;
  transform: scale(0);
  transition: transform var(--medio) var(--curva);
}
.icono-btn__conteo.activo { transform: scale(1); }

.hamburguesa { display: none; }
.hamburguesa span {
  display: block;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform var(--medio) var(--curva), opacity var(--rapido);
}
.hamburguesa span + span { margin-top: 6px; }

/* --------------------------------------------------------------------------
   6. HERO — carrusel principal (video o imagen)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--tinta);
}

.hero__pista { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s var(--curva-suave), visibility 1.5s;
}
.hero__slide.activo { opacity: 1; visibility: visible; }

.hero__media { position: absolute; inset: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Si hay que recortar, se prioriza la parte de arriba del video (donde
   suele ir un logo o texto) — el recorte de sobra se lo lleva la parte
   de abajo en vez de repartirse parejo entre ambas. */
.hero__media video { object-position: center 20%; }
.hero__media img { transform: scale(1.08); }
.hero__slide.activo .hero__media img { animation: kenburns 9s var(--curva) forwards; }
@keyframes kenburns { to { transform: scale(1) } }

/* El video no se recorta de forma permanente (eso ya se quitó), pero al
   activarse SÍ hace una entrada breve: llega un poco oscuro y alejado,
   y se asienta a su tamaño y brillo real — un efecto cinematográfico
   de una sola vez, sin dejar ningún zoom fijo después. */
.hero__slide.activo .hero__media video {
  animation: heroVideoEntrada 1.8s var(--curva) forwards;
}
@keyframes heroVideoEntrada {
  from { filter: brightness(.82) saturate(.92); }
  to   { filter: brightness(1)   saturate(1); }
}

.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,17,15,.5) 0%, rgba(20,17,15,.14) 34%, rgba(20,17,15,.62) 100%);
}

.hero__contenido {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--blanco);
}
.hero__texto { max-width: 40ch; }
.hero__slide[data-alineacion="centro"] .hero__contenido { justify-content: center; text-align: center; }
.hero__slide[data-alineacion="centro"] .hero__texto { max-width: 52ch; }
.hero__slide[data-alineacion="centro"] .eyebrow { justify-content: center; }
.hero__slide[data-alineacion="centro"] .eyebrow::after {
  content: ""; width: clamp(28px,4vw,56px); height: 1px; background: currentColor; opacity: .55;
}
.hero__slide[data-alineacion="derecha"] .hero__contenido { justify-content: flex-end; text-align: right; }
.hero__slide[data-alineacion="derecha"] .eyebrow { flex-direction: row-reverse; }

.hero .eyebrow { color: var(--oro-claro); }

.hero__titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-2xl);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-block: 1.4rem 1.3rem;
}
.hero__titulo em { font-style: italic; color: var(--oro-claro); }

.hero__sub {
  font-size: var(--t-md);
  font-weight: 300;
  color: rgba(255,255,255,.82);
  max-width: 42ch;
  margin-bottom: 2.4rem;
}
.hero__slide[data-alineacion="centro"] .hero__sub { margin-inline: auto; }
.hero__slide[data-alineacion="derecha"] .hero__sub { margin-left: auto; }

/* Animación de entrada del texto del slide activo */
.hero__slide .eyebrow,
.hero__slide .hero__titulo,
.hero__slide .hero__sub,
.hero__slide .hero__cta {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s var(--curva), transform 1.1s var(--curva);
}
.hero__slide.activo .eyebrow      { opacity: 1; transform: none; transition-delay: .35s; }
.hero__slide.activo .hero__titulo { opacity: 1; transform: none; transition-delay: .48s; }
.hero__slide.activo .hero__sub    { opacity: 1; transform: none; transition-delay: .61s; }
.hero__slide.activo .hero__cta    { opacity: 1; transform: none; transition-delay: .74s; }

/* Controles del hero */
.hero__ui {
  position: absolute;
  left: 0; right: 0; bottom: clamp(1.6rem, 4vh, 3rem);
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 2rem;
  color: var(--blanco);
}
.hero__indices { display: flex; align-items: center; gap: 1.1rem; justify-self: start; }
.hero__punto {
  position: relative;
  width: 46px; height: 2px;
  background: rgba(255,255,255,.28);
  overflow: hidden;
}
.hero__punto i {
  position: absolute;
  inset: 0;
  background: var(--blanco);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__punto.activo i { animation: progreso var(--duracion, 7s) linear forwards; }
.hero__punto.completo i { transform: scaleX(1); }
@keyframes progreso { to { transform: scaleX(1) } }

.hero__flechas { display: flex; gap: .5rem; justify-self: end; }
.hero__flecha {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: var(--blanco);
  transition: background var(--medio) var(--curva), border-color var(--medio) var(--curva);
}
.hero__flecha:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
.hero__flecha svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.3; }

.hero__scroll {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hero__scroll i { display: block; width: 1px; height: 46px; background: rgba(255,255,255,.34); overflow: hidden; position: relative; }
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--blanco);
  animation: bajar 2.2s var(--curva) infinite;
}
@keyframes bajar { 0% { transform: translateY(-100%) } 60%, 100% { transform: translateY(100%) } }

.hero__sonido {
  position: absolute;
  top: calc(var(--header-h) + 38px + 1.2rem); right: var(--gutter);
  z-index: 5;
  width: 42px; height: 42px;
  display: none;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: var(--blanco);
}
.hero__sonido.disponible { display: grid; }
.hero__sonido svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3; }

/* --------------------------------------------------------------------------
   7. FRANJA DE MARCA (marquee)
   -------------------------------------------------------------------------- */
.marquee {
  border-block: 1px solid var(--linea);
  background: var(--crema);
  padding-block: 1.15rem;
  overflow: hidden;
}
.marquee__pista {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: desplazar 42s linear infinite;
}
.marquee:hover .marquee__pista { animation-play-state: paused; }
.marquee__pista span {
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
  font-family: var(--display);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-style: italic;
  font-weight: 300;
  color: var(--humo);
  white-space: nowrap;
}
.marquee__pista span::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--oro);
  border-radius: 50%;
  flex: none;
}
@keyframes desplazar { to { transform: translateX(-50%) } }

/* --------------------------------------------------------------------------
   8. CATEGORÍAS — grid editorial asimétrico
   -------------------------------------------------------------------------- */
.categorias__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 240px);
  gap: clamp(.9rem, 1.6vw, 1.6rem);
}

/* Todas las tarjetas ocupan 2 filas: las alturas encajan siempre, sin huecos */
.cat {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--crema-hondo);
  grid-row: span 2;
}
.cat--alta   { grid-column: span 4; }
.cat--ancha  { grid-column: span 8; }
.cat--tercio { grid-column: span 4; }
.cat--media  { grid-column: span 6; }

.cat__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--curva-suave), filter 1.4s var(--curva);
}
.cat:hover .cat__img { transform: scale(1.06); filter: brightness(.86); }

.cat__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(20,17,15,.66) 100%);
}

.cat__info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.3rem, 2.4vw, 2.3rem);
  color: var(--blanco);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.cat__nombre {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  font-weight: 300;
  line-height: 1.1;
}
.cat__conteo {
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-top: .3rem;
}
.cat__flecha {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), background var(--medio);
}
.cat:hover .cat__flecha { opacity: 1; transform: none; background: rgba(255,255,255,.16); }
.cat__flecha svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.2; }

/* Etiqueta "con video" */
.chip-video {
  position: absolute;
  top: 1rem; left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .7rem;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blanco);
  background: rgba(20,17,15,.5);
  backdrop-filter: blur(6px);
}
.chip-video::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--oro-claro);
  animation: latir 1.8s infinite;
}

/* --------------------------------------------------------------------------
   9. BANNERS POR CATEGORÍA — carrusel con pestañas
   -------------------------------------------------------------------------- */
.escena {
  background: var(--tinta);
  color: var(--crema);
  overflow: hidden;
  --cortina: var(--tinta);
}
.escena .titulo { color: var(--crema); }

.escena__tabs {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  padding-bottom: .3rem;
}
.escena__tabs::-webkit-scrollbar { display: none; }

.escena__tab {
  position: relative;
  flex: none;
  padding: .75rem 1.5rem;
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250,247,242,.5);
  border: 1px solid transparent;
  transition: color var(--medio) var(--curva), border-color var(--medio) var(--curva);
  white-space: nowrap;
}
.escena__tab:hover { color: rgba(250,247,242,.85); }
.escena__tab.activo { color: var(--tinta); background: var(--crema); border-color: var(--crema); }

/* La altura la fija JavaScript según la proporción real de cada foto (ver
   ajustarAltura() en main.js) — así nunca se recorta ni desalinea a los
   puntos etiquetados. Este valor es solo el arranque, antes de que el
   script mida la primera foto. */
.escena__marco {
  position: relative;
  overflow: hidden;
  background: #0d0b0a;
  height: var(--escena-alto, 460px);
  min-height: 280px;
  transition: height .45s var(--curva);
}

.escena__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s var(--curva-suave), visibility 1.1s;
}
.escena__slide.activo { opacity: 1; visibility: visible; }

/* `contain`, no `cover`: la foto se ve completa, sin recortes — vertical
   (una modelo de pies a cabeza) u horizontal. Es lo que mantiene los
   puntos etiquetados siempre en el sitio correcto. */
.escena__slide img,
.escena__slide video { width: 100%; height: 100%; object-fit: contain; }

/* El texto y el botón ya NO van encima de la foto: viven debajo, en su
   propio bloque, para que la foto tenga todo el protagonismo y en móvil
   no exista riesgo de taparle los puntos etiquetados. */
.escena__pie { position: relative; margin-top: clamp(1.5rem, 3vw, 2.4rem); min-height: 1px; }
.escena__caption {
  display: none;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 60ch;
}
.escena__caption.activo { display: flex; }
.escena__titulo {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.1;
  color: var(--blanco);
}
.escena__sub { color: rgba(255,255,255,.75); max-width: 40ch; font-size: var(--t-sm); }
.escena__cta { margin-top: .7rem; align-self: flex-start; }

/* Foto vertical detectada (JS mide cada foto): en vez de dejarla centrada
   en un marco panorámico —lo que deja franjas negras a los lados— se pone
   a un lado, en su ancho angosto real, y el texto se acomoda al lado. */
.escena--vertical .escena__cuerpo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.escena--vertical .escena__marco { margin-inline: 0; }
.escena--vertical .escena__pie { margin-top: 0; }

@media (max-width: 900px) {
  .escena--vertical .escena__cuerpo { grid-template-columns: 1fr; }
  .escena--vertical .escena__marco { margin-inline: auto; }
}

.escena__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.escena__puntos { display: flex; gap: .55rem; }
.escena__punto {
  width: 30px; height: 2px;
  background: rgba(250,247,242,.24);
  transition: background var(--medio) var(--curva), width var(--medio) var(--curva);
}
.escena__punto.activo { background: var(--oro-claro); width: 52px; }

.escena__contador {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: rgba(250,247,242,.55);
}
.escena__contador b { color: var(--crema); font-weight: 400; }

.escena__vacio {
  display: grid;
  place-items: center;
  height: 100%;
  color: rgba(250,247,242,.4);
  font-size: var(--t-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 2rem;
}

/* --------------------------------------------------------------------------
   9b. GALERÍA DE SUBCOLECCIONES
   Puerta de entrada al llegar a una colección: agrupa antes de mostrar
   todas las piezas de golpe. 2 columnas en móvil, 3–4 en escritorio.
   -------------------------------------------------------------------------- */
.subcolecciones__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
}
@media (min-width: 640px) {
  .subcolecciones__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
}
@media (min-width: 1100px) {
  .subcolecciones__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Toda la tarjeta es el enlace: sin botón "ver más" que estorbe el tap */
.subcol { display: block; }
.subcol__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--crema-hondo);
  margin-bottom: .9rem;
}
.subcol__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--curva-suave);
}
.subcol:hover .subcol__media img { transform: scale(1.05); }
.subcol__marca {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 300;
  color: var(--arena);
}
.subcol__nombre {
  font-size: var(--t-md);
  font-weight: 400;
  color: var(--tinta);
  transition: color var(--rapido) var(--curva);
}
.subcol:hover .subcol__nombre { color: var(--oro); }
.subcol__conteo {
  font-size: .78rem;
  color: var(--humo);
  margin-top: .2rem;
}

/* --------------------------------------------------------------------------
   10. PRODUCTOS
   -------------------------------------------------------------------------- */
.productos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.6rem) clamp(.9rem, 1.8vw, 1.8rem);
}

.prod {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Marco: envuelve la foto y el botón «Agregar». Existe para que el botón
   pueda salirse del enlace y, en móvil, colocarse debajo de la foto sin
   tapar la marca de agua. */
.prod__marco {
  position: relative;
  margin-bottom: 1.15rem;
}

.prod__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--crema-hondo);
}
.prod__img {
  width: 100%; height: 100%;
  /* `contain` en lugar de `cover`: la foto se ve completa y la marca de agua
     de la esquina inferior derecha nunca queda recortada. */
  object-fit: contain;
  transition: transform 1.2s var(--curva-suave), opacity var(--medio) var(--curva);
}
.prod__img--alt { position: absolute; inset: 0; opacity: 0; }
.prod:hover .prod__img--alt { opacity: 1; }
.prod:hover .prod__img { transform: scale(1.05); }

.prod__etiquetas {
  position: absolute;
  top: .9rem; left: .9rem;
  display: flex; flex-direction: column; gap: .4rem;
  z-index: 2;
}
.etiqueta {
  padding: .32rem .72rem;
  font-size: .57rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--blanco);
  color: var(--tinta);
}
.etiqueta--oro { background: var(--oro); color: var(--blanco); }
.etiqueta--agotado { background: var(--tinta); color: var(--crema); }

.prod__accion {
  position: absolute;
  left: .9rem; right: .9rem; bottom: .9rem;
  z-index: 2;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.prod:hover .prod__accion { opacity: 1; transform: none; }
.prod__accion .btn { padding: .85rem 1.2rem; background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }

.prod__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1 1 auto;
}

.prod__cat {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--humo);
  min-height: .9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Altura fija de dos líneas: los nombres largos ya no descuadran la fila. */
.prod__nombre {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--tinta);
  min-height: 2.5em;
}
.prod__nombre a {
  transition: color var(--rapido) var(--curva);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod__nombre a:hover { color: var(--oro); }

.prod__precios {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.1rem;
  /* `auto` empuja los precios al fondo: todas las tarjetas de una fila
     alinean su bloque de precios aunque el nombre ocupe menos líneas. */
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--linea);
}
.precio-bloque { display: flex; flex-direction: column; gap: .1rem; }
.precio-bloque__label {
  font-size: .55rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--humo);
}
.precio-bloque__valor { font-size: var(--t-md); font-weight: 400; color: var(--tinta); }
.precio-bloque--mayor .precio-bloque__valor { color: var(--oro); }
.precio-bloque__nota { font-size: .58rem; color: var(--humo); letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   11. FRANJA DE CONFIANZA
   -------------------------------------------------------------------------- */
.valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.valor {
  background: var(--blanco);
  padding: clamp(1.8rem, 3.4vw, 2.9rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: background var(--medio) var(--curva);
}
.valor:hover { background: var(--crema); }
.valor svg { width: 26px; height: 26px; stroke: var(--oro); fill: none; stroke-width: 1.1; }
.valor h3 {
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 400;
  color: var(--tinta);
}
.valor p { font-size: var(--t-sm); color: var(--humo); }

/* --------------------------------------------------------------------------
   12. TESTIMONIOS — capturas de WhatsApp enmarcadas
   -------------------------------------------------------------------------- */
.testimonios__pista {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.6rem;
  scrollbar-width: thin;
}
.testimonio {
  flex: none;
  width: clamp(252px, 27vw, 330px);
  scroll-snap-align: center;
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: .85rem;
  box-shadow: var(--sombra-sutil);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.testimonio:hover { transform: translateY(-7px); box-shadow: var(--sombra-media); }
.testimonio__marco {
  position: relative;
  overflow: hidden;
  background: var(--crema-hondo);
  aspect-ratio: 9 / 16;
}
.testimonio__marco img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.testimonio__pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  padding: .95rem .3rem .3rem;
}
.testimonio__quien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: .6rem;
}
.testimonio__quien b { color: var(--tinta); font-weight: 400; font-size: var(--t-sm); }
.verificado {
  display: inline-flex; align-items: center; gap: .34rem; color: var(--oro);
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
}
.verificado svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Instagram: un botón con el @usuario a la vista, no solo un ícono —
   la idea es que se note y de ganas de tocarlo. */
.testimonio__instagram {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .8rem;
  border: 1px solid var(--oro);
  border-radius: 999px;
  font-size: .76rem;
  letter-spacing: .01em;
  color: var(--oro);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.testimonio__instagram:hover { background: var(--oro); color: var(--blanco); }

/* Piezas etiquetadas — protagonismo real de "shop the look": fila completa,
   foto más grande, nombre legible y precio en dorado, no una pastilla chica. */
.testimonio__piezas {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .8rem .3rem 0;
}
.testimonio__piezas-etiqueta {
  margin: 0;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--arena);
}
.testimonio__pieza {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .75rem;
  background: var(--crema);
  border-left: 2px solid var(--oro);
  transition: background var(--rapido) var(--curva);
}
.testimonio__pieza:hover { background: var(--beige); }
.testimonio__pieza img { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; flex: 0 0 46px; }
.testimonio__pieza-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.testimonio__pieza strong {
  font-size: .86rem;
  font-weight: 400;
  color: var(--tinta);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testimonio__pieza em { font-style: normal; font-size: .82rem; font-weight: 500; color: var(--oro); }
.testimonio__pieza-flecha {
  flex: 0 0 auto;
  color: var(--arena);
  transition: color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.testimonio__pieza:hover .testimonio__pieza-flecha { color: var(--oro); transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   13. UBICACIÓN Y HORARIOS
   -------------------------------------------------------------------------- */
.tienda {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  gap: clamp(2rem, 5vw, 5rem);
}
.tienda__media { position: relative; overflow: hidden; min-height: 400px; background: var(--crema-hondo); }
.tienda__media img { width: 100%; height: 100%; object-fit: cover; }

.tienda__panel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.7rem; }
.tienda__panel .btn { align-self: flex-start; }

.estado {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  align-self: flex-start;
  padding: .42rem .95rem;
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--linea-fuerte);
}
.estado::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--humo);
}
.estado--abierto { color: #2f6b45; border-color: rgba(47,107,69,.28); }
.estado--abierto::before { background: #3f8a5b; box-shadow: 0 0 0 3px rgba(63,138,91,.16); }

.horarios { width: 100%; border-top: 1px solid var(--linea); }
.horarios li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .78rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-sm);
}
.horarios li span:first-child { text-transform: capitalize; color: var(--tinta); }
.horarios li span:last-child { color: var(--humo); font-variant-numeric: tabular-nums; }
.horarios li.hoy span { color: var(--oro); }

.datos-tienda { display: flex; flex-direction: column; gap: .9rem; font-size: var(--t-sm); }
.datos-tienda div { display: flex; gap: .85rem; align-items: flex-start; }
.datos-tienda svg { width: 17px; height: 17px; flex: none; margin-top: .3rem; stroke: var(--oro); fill: none; stroke-width: 1.2; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--grafito); color: rgba(250,247,242,.68); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(250,247,242,.12);
}
.footer__marca {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--crema);
  margin-bottom: 1.1rem;
}
.footer p { font-size: var(--t-sm); max-width: 34ch; }

.footer h4 {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--crema);
  margin-bottom: 1.3rem;
}
.footer li + li { margin-top: .62rem; }
.footer li a { font-size: var(--t-sm); transition: color var(--rapido) var(--curva), padding-left var(--rapido) var(--curva); }
.footer li a:hover { color: var(--oro-claro); padding-left: 5px; }

.redes { display: flex; gap: .6rem; margin-top: 1.6rem; }
.redes a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(250,247,242,.18);
  border-radius: 50%;
  transition: background var(--medio) var(--curva), border-color var(--medio) var(--curva), color var(--medio);
}
.redes a:hover { background: var(--oro); border-color: var(--oro); color: var(--blanco); }
.redes svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.9rem;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: rgba(250,247,242,.42);
}

/* --------------------------------------------------------------------------
   15. BUSCADOR OVERLAY
   -------------------------------------------------------------------------- */
.buscador {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(250,247,242,.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--medio) var(--curva), visibility var(--medio);
  display: flex;
  flex-direction: column;
}
.buscador.abierto { opacity: 1; visibility: visible; }

.buscador__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  flex: none;
}
.buscador__cuerpo { flex: 1; overflow-y: auto; padding-bottom: 4rem; }

.buscador__campo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--linea-fuerte);
  padding-block: clamp(1.5rem, 4vw, 2.6rem);
}
.buscador__campo svg { width: 22px; height: 22px; stroke: var(--humo); fill: none; stroke-width: 1.2; flex: none; }
.buscador__campo input {
  flex: 1;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.5vw, 3rem);
  font-weight: 300;
  color: var(--tinta);
}
.buscador__campo input::placeholder { color: var(--arena); }

.buscador__sugerencias { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.8rem; }
.buscador__sugerencias span {
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--humo);
  margin-right: .6rem;
  align-self: center;
}
.tag {
  padding: .5rem 1.1rem;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  border: 1px solid var(--linea-fuerte);
  transition: background var(--medio) var(--curva), color var(--medio), border-color var(--medio);
}
.tag:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

.buscador__resultados { margin-top: 2.4rem; display: grid; gap: .2rem; }
.resultado {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .9rem;
  border-bottom: 1px solid var(--linea);
  transition: background var(--rapido) var(--curva), padding-left var(--rapido) var(--curva);
}
.resultado:hover { background: var(--blanco); padding-left: 1.3rem; }
.resultado img { width: 62px; height: 78px; object-fit: cover; flex: none; background: var(--crema-hondo); }
.resultado__txt { flex: 1; min-width: 0; }
.resultado__nombre { font-family: var(--display); font-size: 1.15rem; color: var(--tinta); }
.resultado__cat { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--humo); }
.resultado__precio { font-size: var(--t-sm); color: var(--oro); white-space: nowrap; }

.buscador__vacio { padding: 3rem 0; text-align: center; color: var(--humo); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   16. CARRITO LATERAL
   -------------------------------------------------------------------------- */
.telon {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--velo);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--medio) var(--curva), visibility var(--medio);
}
.telon.abierto { opacity: 1; visibility: visible; }

.carrito {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 195;
  width: min(430px, 100vw);
  background: var(--blanco);
  transform: translateX(100%);
  transition: transform .62s var(--curva-suave);
  display: flex;
  flex-direction: column;
}
.carrito.abierto { transform: none; }

.carrito__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.7rem;
  border-bottom: 1px solid var(--linea);
  flex: none;
}
.carrito__titulo {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--tinta);
}
.carrito__cuerpo { flex: 1; overflow-y: auto; padding: 1.2rem 1.7rem; }
.carrito__pie { flex: none; padding: 1.4rem 1.7rem 1.8rem; border-top: 1px solid var(--linea); background: var(--crema); }

.linea-item { display: flex; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--linea); }
.linea-item img { width: 74px; height: 92px; object-fit: cover; flex: none; background: var(--crema-hondo); }
.linea-item__txt { flex: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.linea-item__nombre { font-family: var(--display); font-size: 1.05rem; color: var(--tinta); line-height: 1.25; }
.linea-item__meta { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--humo); }
.linea-item__fila { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: .6rem; }
.linea-item__precio { font-size: var(--t-sm); color: var(--oro); }

.cantidad { display: flex; align-items: center; border: 1px solid var(--linea-fuerte); }
.cantidad button { width: 28px; height: 28px; display: grid; place-items: center; font-size: .9rem; color: var(--humo); transition: color var(--rapido); }
.cantidad button:hover { color: var(--tinta); }
.cantidad span { min-width: 26px; text-align: center; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.quitar { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--humo); text-decoration: underline; text-underline-offset: 3px; }
.quitar:hover { color: var(--tinta); }

.carrito__vacio { display: grid; place-items: center; gap: 1.2rem; height: 100%; text-align: center; color: var(--humo); }
.carrito__vacio svg { width: 42px; height: 42px; stroke: var(--arena); fill: none; stroke-width: .9; }

.total-fila { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
.total-fila span { font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--humo); }
.total-fila b { font-family: var(--display); font-size: 1.7rem; font-weight: 400; color: var(--tinta); }
.carrito__nota { font-size: var(--t-xs); color: var(--humo); text-align: center; margin-top: .9rem; line-height: 1.6; }

/* Selector mayor / detal */
.conmutador {
  display: flex;
  border: 1px solid var(--linea-fuerte);
  margin-bottom: 1.2rem;
}
.conmutador button {
  flex: 1;
  padding: .7rem;
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--humo);
  transition: background var(--medio) var(--curva), color var(--medio);
}
.conmutador button.activo { background: var(--tinta); color: var(--crema); }

/* Aviso que explica por qué el precio al mayor todavía no se aplica */
.conmutador-aviso {
  margin: -.7rem 0 1.1rem;
  padding: .7rem .85rem;
  font-size: .74rem;
  line-height: 1.45;
  color: #7a5a12;
  background: #fdf4e0;
  border-left: 2px solid var(--oro);
}
.conmutador-aviso strong { font-weight: 500; }
.conmutador-aviso[hidden] { display: none !important; }

/* Faltante por línea + botón para completar el mínimo */
.linea-item__falta {
  align-self: flex-start;
  margin-top: .2rem;
  font-size: .68rem;
  line-height: 1.35;
  color: #9a7415;
}
.linea-item__completar {
  align-self: flex-start;
  margin-top: .15rem;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro);
  border-bottom: 1px solid currentColor;
}
.linea-item__mayor {
  align-self: flex-start;
  margin-top: .2rem;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1f7a4d;
}
.linea-item__fila { flex-wrap: wrap; }
.quitar { align-self: flex-start; }

/* --------------------------------------------------------------------------
   17. WHATSAPP FLOTANTE
   -------------------------------------------------------------------------- */
.wa-flotante {
  position: fixed;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1.5rem .85rem .95rem;
  background: var(--tinta);
  color: var(--crema);
  border-radius: 60px;
  box-shadow: var(--sombra-media);
  transform: translateY(130%);
  transition: transform .6s var(--curva-suave), background var(--medio) var(--curva);
}
.wa-flotante.visible { transform: none; }
.wa-flotante:hover { background: var(--oro); }
.wa-flotante svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
.wa-flotante span { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .tienda { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cat--ancha { grid-column: span 12; }
  .cat--alta, .cat--tercio { grid-column: span 6; }
  .cat--media { grid-column: span 6; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }

  .nav--izquierda { display: none; }
  .hamburguesa { display: block; }

  .header__interior { grid-template-columns: auto 1fr auto; }
  .marca { justify-self: center; }

  .nav__enlace--desktop { display: none; }

  .hero { min-height: 560px; }
  .hero__ui { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; }
  .hero__scroll { display: none; }

  /* En pantallas estrechas solo cabe un mensaje en la barra de anuncios */
  .anuncio__pista span:nth-child(n+2) { display: none; }

  .escena__marco { min-height: 260px; }

  .productos__grid { grid-template-columns: repeat(2, 1fr); }

  /* En táctil no hay «hover»: el botón vive siempre visible DEBAJO de la
     foto, para no tapar la marca de agua de la esquina inferior derecha. */
  .prod__accion {
    position: static;
    opacity: 1;
    transform: none;
    margin-top: .55rem;
  }
  .prod__accion .btn {
    padding: .6rem .9rem;
    font-size: .62rem;
    background: var(--tinta);
    color: var(--crema);
    border-color: var(--tinta);
  }

  .cat--alta, .cat--tercio, .cat--media, .cat--ancha { grid-column: span 12; aspect-ratio: 4 / 3; }

  .footer__grid { grid-template-columns: 1fr; }

  .wa-flotante span { display: none; }
  .wa-flotante { padding: 1rem; }
}

@media (max-width: 480px) {
  .productos__grid { gap: 1.6rem .8rem; }
  .prod__nombre { font-size: 1.05rem; }
  .anuncio__pista { gap: 1.6rem; }
}

/* --------------------------------------------------------------------------
   19. MENÚ MÓVIL
   -------------------------------------------------------------------------- */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: var(--crema);
  transform: translateX(-100%);
  transition: transform .62s var(--curva-suave);
  overflow-y: auto;
  padding: calc(var(--header-h) + .6rem) var(--gutter) 3rem;
}
.menu-movil.abierto { transform: none; }

/* Botón de cerrar: fijo arriba a la derecha, siempre alcanzable con el pulgar */
.menu-movil__cerrar {
  position: absolute;
  top: calc(var(--header-h) - 1.2rem);
  right: var(--gutter);
  z-index: 3;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(13,11,10,.08);
}
.menu-movil__cerrar:hover { background: var(--tinta); color: var(--crema); }
.menu-movil__encabezado {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--tinta);
  padding-bottom: .9rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--linea-fuerte);
}

.menu-movil__lista li { border-bottom: 1px solid var(--linea); }
.menu-movil__lista > li > a,
.menu-movil__lista > li > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.15rem 0;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--tinta);
}
.menu-movil__sub { max-height: 0; overflow: hidden; transition: max-height var(--medio) var(--curva); }
.menu-movil__sub.abierto { max-height: 700px; }
.menu-movil__sub a { display: block; padding: .6rem 0 .6rem 1rem; font-size: var(--t-sm); color: var(--humo); }
.menu-movil__sub li { border: 0; }
.menu-movil__pie { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }

/* «Todo el catálogo» y «Nuestra tienda»: no son colecciones, así que no
   deben verse igual de grandes que ellas — se bajan de peso visual para
   que la lista de categorías sea lo que realmente destaque. */
.menu-movil__lista li.menu-movil__extra { border-bottom: 0; }
.menu-movil__lista li.menu-movil__extra:first-of-type { border-top: 1px solid var(--linea); margin-top: .4rem; }
.menu-movil__lista li.menu-movil__extra > a {
  padding: .85rem 0;
  font-family: var(--texto);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
}

/* --------------------------------------------------------------------------
   20. ACCESIBILIDAD / MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__slide.activo .hero__media img { animation: none; transform: scale(1); }
  .hero__slide.activo .hero__media video { animation: none; transform: scale(1); filter: none; }
  .marquee__pista { animation: none; }
}

@media print {
  .header, .anuncio, .wa-flotante, .carrito, .buscador, .preloader, .hero__ui { display: none !important; }
}

/* --------------------------------------------------------------------------
   COLECCIONES DIVIDIDAS EN HOMBRE / MUJER
   La tarjeta se parte en dos mitades. Cada una rota las fotos de las
   subcategorías de su segmento. En móvil las mitades están siempre visibles.
   -------------------------------------------------------------------------- */
.cat--doble { display: block; }

.cat__img--base {
  transition: opacity var(--medio) var(--curva);
}
.cat--doble:hover .cat__img--base,
.cat--doble:focus-within .cat__img--base { opacity: 0; }

.mitad {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  display: grid;
  align-content: center;
  justify-items: center;
  opacity: 0;
  transition: opacity var(--medio) var(--curva), transform var(--lento) var(--curva);
  z-index: 2;
}
.mitad--hombre { left: 0;  transform: translateX(-14%); }
.mitad--mujer  { right: 0; transform: translateX(14%); }

.cat--doble:hover .mitad,
.cat--doble:focus-within .mitad { opacity: 1; transform: translateX(0); }

/* Línea divisoria fina entre las dos mitades */
.cat--doble::after {
  content: "";
  position: absolute;
  left: 50%; top: 12%; bottom: 12%;
  width: 1px;
  background: rgba(255,255,255,.35);
  transform: scaleY(0);
  transition: transform var(--lento) var(--curva) .1s;
  z-index: 4;
  pointer-events: none;
}
.cat--doble:hover::after,
.cat--doble:focus-within::after { transform: scaleY(1); }

.mitad__fondo { position: absolute; inset: 0; }
.mitad__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--curva), transform 4s linear;
}
.mitad__img.activa { opacity: 1; transform: scale(1); }

.mitad__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,17,15,.15), rgba(20,17,15,.62));
}
.mitad:hover .mitad__velo { background: linear-gradient(180deg, rgba(20,17,15,.05), rgba(20,17,15,.52)); }

.mitad__texto {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 1rem;
  text-align: center;
}
.mitad__etiqueta {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 2rem);
  font-weight: 300;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--crema);
  position: relative;
  padding-bottom: .55rem;
}
.mitad__etiqueta::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--oro-claro);
  transform: translateX(-50%);
  transition: width var(--medio) var(--curva);
}
.mitad:hover .mitad__etiqueta::after { width: 62%; }

.mitad__sub {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250,247,242,.62);
  min-height: 1.2em;
  transition: opacity .5s var(--curva);
}
.mitad__sub.cambiando { opacity: 0; }

/* La franja inferior con el nombre de la colección sigue mandando */
.cat__info--doble { z-index: 5; }
.cat--doble:hover .cat__info--doble,
.cat--doble:focus-within .cat__info--doble {
  background: linear-gradient(0deg, rgba(20,17,15,.88), rgba(20,17,15,0));
}

/* En pantallas táctiles no hay hover: las mitades se muestran siempre */
@media (hover: none), (max-width: 860px) {
  .cat--doble .cat__img--base { opacity: 0; }
  .cat--doble .mitad { opacity: 1; transform: none; }
  .cat--doble::after { transform: scaleY(1); }
  .mitad__etiqueta { font-size: clamp(.95rem, 4vw, 1.35rem); }
  .mitad__sub { display: none; }
}

/* --------------------------------------------------------------------------
   PIEZAS ETIQUETADAS EN UN BANNER
   Fichas junto al botón de acción, cada una lleva a su producto.
   -------------------------------------------------------------------------- */
.hero__piezas {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  /* El texto del hero está limitado a 40ch; las fichas necesitan más aire */
  width: min(72ch, 78vw);
}
[data-alineacion="derecha"] .hero__piezas { margin-left: auto; }
[data-alineacion="centro"]  .hero__piezas { margin-inline: auto; }

.hero__piezas-titulo {
  font-size: var(--t-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(250,247,242,.5);
  margin-bottom: .85rem;
}

.hero__piezas-lista {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}
[data-alineacion="centro"] .hero__piezas-lista  { justify-content: center; }
[data-alineacion="derecha"] .hero__piezas-lista { justify-content: flex-end; }

.pieza {
  display: flex;
  align-items: center;
  gap: .65rem;
  max-width: 15rem;
  padding: .4rem .85rem .4rem .4rem;
  background: rgba(250,247,242,.10);
  border: 1px solid rgba(250,247,242,.20);
  backdrop-filter: blur(10px);
  transition: background var(--medio) var(--curva), border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.pieza:hover {
  background: rgba(250,247,242,.94);
  border-color: transparent;
  transform: translateY(-2px);
}

.pieza img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex: 0 0 40px;
}

.pieza span { min-width: 0; }

.pieza span { display: grid; gap: .1rem; line-height: 1.3; }

.pieza strong {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--crema);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--medio) var(--curva);
}
.pieza em {
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--oro-claro);
  transition: color var(--medio) var(--curva);
}
.pieza:hover strong { color: var(--tinta); }
.pieza:hover em     { color: var(--oro); }

@media (max-width: 640px) {
  .hero__piezas-lista { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: none; }
  .hero__piezas-lista::-webkit-scrollbar { display: none; }
  .pieza { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   AJUSTE FINO DEL HERO EN PANTALLAS BAJAS
   En portátiles de 768–860 px de alto el titular gigante deja el hero
   sin aire. Se reduce en proporción a la altura disponible.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-height: 900px) {
  .hero__titulo { font-size: clamp(2.4rem, 1rem + 5.4vh, 4.4rem); }
  .hero__piezas { margin-top: 1.2rem; }
  .pieza img { width: 34px; height: 34px; flex-basis: 34px; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .hero__titulo { font-size: clamp(2rem, .8rem + 5vh, 3.4rem); }
  .hero__sub { display: none; }
}

/* --------------------------------------------------------------------------
   ESTADOS VACÍOS
   Mientras el admin no ha subido fotos, nada se ve roto: en su lugar
   aparece un fondo de marca con la inicial de la colección.
   -------------------------------------------------------------------------- */
.cat--sin-foto { background: var(--crema-hondo); }

.cat__marca {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 300;
  line-height: 1;
  color: var(--arena);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(160deg, var(--crema-hondo), var(--beige));
  user-select: none;
  transition: transform var(--lento) var(--curva), color var(--medio) var(--curva);
}
.cat:hover .cat__marca { transform: scale(1.04); color: var(--oro-claro); }

/* El velo oscuro sobra cuando no hay foto: taparía la inicial */
.cat--sin-foto .cat__velo {
  background: linear-gradient(0deg, rgba(20,17,15,.62), rgba(20,17,15,0) 46%);
}

/* Hero sin banners cargados: degradado de marca en vez de imagen rota */
.hero__slide--vacio .hero__media {
  background:
    radial-gradient(100% 80% at 50% 30%, rgba(176,141,87,.20), transparent 62%),
    linear-gradient(165deg, #262019, var(--tinta) 62%);
}

/* Sección de la tienda sin foto todavía */
.tienda__media--vacia {
  display: grid;
  place-items: center;
  min-height: clamp(260px, 34vw, 420px);
  background:
    radial-gradient(110% 85% at 32% 22%, rgba(255,255,255,.85), transparent 62%),
    linear-gradient(160deg, var(--crema-hondo), var(--beige));
}
.tienda__media--vacia span {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--arena);
}

/* ==========================================================================
   PÁGINAS INTERIORES: colección, ficha de producto, catálogo, 404
   ========================================================================== */

/* En las interiores el header es sólido desde el principio y conserva la
   barra de anuncios: hay que reservarle la altura completa. */
:root { --anuncio-h: 38px; }

body.pagina-interior { padding-top: calc(var(--header-h) + var(--anuncio-h)); }

.header--solido {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  color: var(--tinta);
  box-shadow: 0 1px 0 var(--linea);
}
/* A diferencia de --fijo, aquí la barra de anuncios no se colapsa */
.header--solido .anuncio { height: var(--anuncio-h); opacity: 1; }

.seccion--corta { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* --------------------------------------------------------------------------
   Portada de colección
   -------------------------------------------------------------------------- */
.portada {
  position: relative;
  min-height: clamp(230px, 30vw, 380px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--tinta);
}
.portada--baja { min-height: clamp(180px, 22vw, 260px); }

.portada__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portada--sin-foto {
  background:
    radial-gradient(100% 90% at 28% 20%, rgba(176,141,87,.22), transparent 62%),
    linear-gradient(160deg, #262019, var(--tinta) 64%);
}
.portada__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,17,15,.82), rgba(20,17,15,.28));
}
.portada__contenido {
  position: relative;
  z-index: 2;
  padding-block: clamp(1.8rem, 4vw, 3.2rem);
}
.portada__titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-xl);
  line-height: 1.05;
  color: var(--crema);
  margin-top: .8rem;
}
.portada__conteo {
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(250,247,242,.55);
  margin-top: .7rem;
}

/* --------------------------------------------------------------------------
   Migas de pan
   -------------------------------------------------------------------------- */
.migas {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
}
.portada .migas { color: rgba(250,247,242,.6); }
.migas a { transition: color var(--rapido) var(--curva); }
.migas a:hover { color: var(--oro); }
.migas span[aria-hidden] { opacity: .45; }
.ficha .migas { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }

/* --------------------------------------------------------------------------
   Barra de filtros
   -------------------------------------------------------------------------- */
.filtros {
  position: sticky;
  /* Justo debajo del header sólido, que conserva la barra de anuncios */
  top: calc(var(--header-h) + var(--anuncio-h));
  z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.filtros__interior {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.8rem);
  flex-wrap: wrap;
  padding-block: .85rem;
}
.filtros__grupo { display: flex; gap: .5rem; align-items: center; }

/* El grupo de segmento (Hombre / Mujer) se separa del resto con una línea */
.filtros__grupo--segmento {
  padding-right: clamp(.8rem, 2vw, 1.4rem);
  border-right: 1px solid var(--linea);
}
.filtros__grupo--segmento .pastilla {
  border-color: transparent;
  background: var(--crema-hondo);
}
.filtros__grupo--segmento .pastilla:hover { background: var(--beige); color: var(--tinta); }
.filtros__grupo--segmento .pastilla.activa { background: var(--oro); color: var(--blanco); }
.filtros__grupo--scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filtros__grupo--scroll::-webkit-scrollbar { display: none; }
.filtros__orden { margin-left: auto; }
.filtros__orden select {
  padding: .5rem 2rem .5rem .8rem;
  border: 1px solid var(--linea-fuerte);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--humo) 50%),
                    linear-gradient(135deg, var(--humo) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.pastilla {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.05rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grafito);
  white-space: nowrap;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.pastilla:hover { border-color: var(--oro); color: var(--oro); }
.pastilla.activa { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.pastilla i { font-style: normal; opacity: .5; font-size: .9em; }
.pastilla.activa i { opacity: .7; }

/* Buscador en línea del catálogo */
.busca-linea {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 260px;
  max-width: 420px;
  padding: .35rem .35rem .35rem .9rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
}
.busca-linea:focus-within { border-color: var(--oro); }
.busca-linea svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: var(--humo); stroke-width: 1.4; }
.busca-linea input { flex: 1; min-width: 0; font-size: var(--t-sm); }
.busca-linea input:focus { outline: none; }
.busca-linea .btn { padding: .5rem 1.1rem; border-radius: 999px; font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   Ficha de producto
   -------------------------------------------------------------------------- */
.ficha__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.ficha__principal {
  position: relative;
  background: var(--crema-hondo);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.ficha__principal img,
.ficha__principal video {
  width: 100%;
  height: 100%;
  /* Completa, sin recortes: así se ve la marca de agua del pie derecho. */
  object-fit: contain;
  background: var(--crema-hondo);
}
.ficha__principal video { background: var(--tinta); }

/* Pista de zoom sobre la foto */
.ficha__lupa {
  position: absolute;
  /* A la izquierda a propósito: la marca de agua va abajo a la derecha. */
  left: .8rem; bottom: .8rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  border: 1px solid var(--linea);
  cursor: zoom-in;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.ficha__lupa:hover { background: var(--tinta); color: var(--crema); }

/* --------------------------------------------------------------------------
   VISOR DE ZOOM (pantalla completa)
   -------------------------------------------------------------------------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  place-items: center;
  background: #0d0b0a;
  opacity: 0;
  transition: opacity var(--medio) var(--curva);
}
.visor.abierto { display: grid; opacity: 1; }
.visor__lienzo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: zoom-in;
  touch-action: none;
}
.visor__lienzo.acercado { cursor: zoom-out; }
.visor__img {
  max-width: 92vw;
  max-height: 88vh;
  transform: scale(1);
  transform-origin: center center;
  transition: transform var(--medio) var(--curva);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.visor__lienzo.acercado .visor__img { transition: transform 60ms linear; }
.visor__cerrar {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--crema);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(250,247,242,.25);
  border-radius: 50%;
}
.visor__cerrar:hover { background: rgba(255,255,255,.2); }
.visor__pie {
  position: absolute;
  left: 0; right: 0; bottom: 1.1rem;
  padding-inline: 1rem;
  text-align: center;
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,247,242,.55);
  pointer-events: none;
}
.visor__tiras {
  position: absolute;
  left: 0; right: 0; bottom: 3.1rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding: 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.visor__tiras::-webkit-scrollbar { display: none; }
.visor__tiras button {
  flex: none;
  width: 52px; height: 62px;
  overflow: hidden;
  opacity: .45;
  border: 1px solid rgba(250,247,242,.25);
  transition: opacity var(--rapido) var(--curva);
}
.visor__tiras button.activa { opacity: 1; border-color: var(--oro); }
.visor__tiras img { width: 100%; height: 100%; object-fit: cover; }

/* Con la foto acercada se apartan miniaturas y pista para no estorbar */
.visor__lienzo.acercado ~ .visor__tiras,
.visor__lienzo.acercado ~ .visor__pie { opacity: 0; pointer-events: none; }
.visor__tiras, .visor__pie { transition: opacity var(--rapido) var(--curva); }
.visor__cerrar { background: rgba(13,11,10,.55); backdrop-filter: blur(4px); }

.ficha__tiras {
  display: flex;
  gap: .6rem;
  margin-top: .7rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ficha__tiras::-webkit-scrollbar { display: none; }
.tira {
  position: relative;
  flex: 0 0 74px;
  width: 74px;
  aspect-ratio: 4 / 5;
  border: 1px solid transparent;
  outline-offset: -1px;
  background: var(--crema-hondo);
  overflow: hidden;
  transition: border-color var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
  opacity: .62;
}
.tira img { width: 100%; height: 100%; object-fit: cover; }
.tira:hover { opacity: 1; }
.tira.activa { opacity: 1; border-color: var(--oro); }
.tira__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20,17,15,.42);
  color: var(--crema);
  font-size: .8rem;
}

.ficha__titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-lg);
  line-height: 1.1;
  color: var(--tinta);
  margin-top: .9rem;
}
.ficha__agotado {
  margin-top: 1rem;
  padding: .6rem .9rem;
  background: var(--crema-hondo);
  border-left: 2px solid var(--oro);
  font-size: var(--t-sm);
  color: var(--grafito);
}

.ficha__precios {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding-block: clamp(1.2rem, 2.5vw, 1.8rem);
  border-block: 1px solid var(--linea);
}
.precio-bloque--grande .precio-bloque__valor {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1;
}

.ficha__descripcion {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--humo);
  font-size: var(--t-md);
  max-width: 52ch;
}

.ficha__acciones {
  display: flex;
  gap: .7rem;
  align-items: stretch;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.ficha__acciones .btn { flex: 1; }

/* OJO: este selector va limitado a la ficha del producto. Sin limitar,
   pisaba el `.cantidad` compacto del carrito y la fila se desbordaba
   dejando el precio cortado contra el borde derecho. */
.ficha__acciones .cantidad {
  display: flex;
  align-items: center;
  border: 1px solid var(--linea-fuerte);
  flex: 0 0 auto;
}
.ficha__acciones .cantidad button {
  width: 42px;
  height: 100%;
  min-height: 46px;
  font-size: 1.1rem;
  color: var(--grafito);
  transition: background var(--rapido) var(--curva);
}
.ficha__acciones .cantidad button:hover { background: var(--crema); }
.cantidad input {
  width: 48px;
  text-align: center;
  font-size: var(--t-sm);
  border-inline: 1px solid var(--linea);
  -moz-appearance: textfield;
  appearance: textfield;
}
.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ficha__nota {
  margin-top: .8rem;
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--oro);
}
.ficha__nota strong { font-weight: 500; }
.ficha__nota--ok { color: #1f7a4d; }

.ficha__garantias {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--linea);
  display: grid;
  gap: .7rem;
}
.ficha__garantias li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--t-sm);
  color: var(--humo);
}
.ficha__garantias li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--oro);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Campaña dentro de la colección
   -------------------------------------------------------------------------- */
.campana {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Se adapta a la proporción real de la foto — vertical (una modelo de
   pies a cabeza) u horizontal — en vez de forzar un recorte panorámico.
   Un tope de altura evita que una foto muy alta domine toda la página. */
.campana__media { overflow: hidden; background: #1B1714; max-height: 760px; }
.campana__media img,
.campana__media video { width: 100%; height: auto; max-height: 760px; object-fit: contain; margin-inline: auto; }
.campana__texto .entradilla { margin-block: 1.2rem 2rem; color: rgba(250,247,242,.66); }

/* --------------------------------------------------------------------------
   Estado vacío y paginación
   -------------------------------------------------------------------------- */
.vacio {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  max-width: 620px;
  margin-inline: auto;
}
.vacio__marca {
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 300;
  line-height: 1;
  color: var(--beige);
  margin-bottom: 1.2rem;
}
.vacio .titulo { margin-bottom: 1rem; }
.vacio__acciones {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.paginacion {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   Responsive de las interiores
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ficha__rejilla,
  .campana { grid-template-columns: 1fr; }
  .campana__texto { order: -1; }
}

@media (max-width: 640px) {
  .filtros { position: static; }
  .filtros__interior { gap: .7rem; padding-block: .7rem; }
  .filtros__orden { margin-left: 0; width: 100%; }
  .filtros__orden select { width: 100%; }
  .busca-linea { max-width: none; }
  .ficha__principal { aspect-ratio: 1 / 1; }
  .ficha__precios { gap: 1.5rem; }
  .ficha__acciones { flex-wrap: wrap; }
  .ficha__acciones .btn { flex: 1 1 100%; }
  /* Solo en la ficha del producto: en el carrito el selector debe seguir
     siendo compacto para que quepa el precio a su lado. */
  .ficha__acciones .cantidad { width: 100%; justify-content: space-between; }
  .ficha__acciones .cantidad input { flex: 1; }
}

/* --------------------------------------------------------------------------
   BOTÓN VOLVER ARRIBA
   Va abajo a la izquierda para no chocar con el de WhatsApp.
   -------------------------------------------------------------------------- */
.subir {
  position: fixed;
  left: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 150;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  color: var(--tinta);
  box-shadow: var(--sombra-sutil);
  opacity: 0;
  visibility: hidden;
  transform: translateY(130%);
  transition: transform .6s var(--curva-suave), opacity .4s var(--curva),
              visibility .4s, background var(--medio) var(--curva), color var(--medio) var(--curva);
}
.subir.visible { opacity: 1; visibility: visible; transform: none; }
.subir:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.subir svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .subir { width: 42px; height: 42px; }
  /* El botón de WhatsApp se encoge a un círculo en móvil: se reparten el espacio */
  .wa-flotante span { display: none; }
  .wa-flotante { padding: .85rem; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .subir { transition: opacity .2s linear, visibility .2s; transform: none; }
}

/* ==========================================================================
   PIEZAS ETIQUETADAS SOBRE LA FOTO  (estilo "compra el look")
   Un punto por pieza, colocado en porcentaje desde el admin. Al pasar el
   cursor —o tocar, en móvil— se abre una ficha con nombre, precio y compra.
   ========================================================================== */

.campana__media { position: relative; }

.punto-pieza {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
}

/* --------------------------- El punto --------------------------- */
.punto-pieza__marca {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.punto-pieza__marca span {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(20,17,15,.5), 0 2px 10px rgba(0,0,0,.4);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
/* Latido suave para que se noten sin ser molestos */
.punto-pieza__marca::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85);
  animation: latido-punto 2.6s var(--curva) infinite;
}
@keyframes latido-punto {
  0%        { transform: scale(1);   opacity: .85 }
  70%, 100% { transform: scale(2.6); opacity: 0 }
}
.punto-pieza__marca:hover span,
.punto-pieza:focus-within .punto-pieza__marca span { transform: scale(1.3); }
.punto-pieza.abierto .punto-pieza__marca span {
  background: var(--oro);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 12px rgba(0,0,0,.45);
}
.punto-pieza.abierto .punto-pieza__marca::before { animation: none; opacity: 0; }

/* --------------------------- La ficha --------------------------- */
/* position:fixed y la coloca JS (getBoundingClientRect en tiempo real):
   así nunca queda recortada por el overflow:hidden del carrusel, y su
   z-index gana siempre al header fijo (100), así que el botón «Agregar»
   nunca pierde el clic contra la barra de arriba. */
.punto-pieza__ficha {
  position: fixed;
  z-index: 150;
  width: 232px;
  padding: .55rem;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(20,17,15,.26);
  display: grid;
  gap: .5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--medio) var(--curva), visibility var(--medio);
}
.punto-pieza.abierto .punto-pieza__ficha,
.punto-pieza__ficha.visible {
  opacity: 1;
  visibility: visible;
}

.punto-pieza__enlace { display: flex; gap: .6rem; align-items: center; }
.punto-pieza__enlace img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: cover;
}
.punto-pieza__txt { display: grid; gap: .1rem; min-width: 0; }
.punto-pieza__txt em {
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}
.punto-pieza__txt strong {
  font-weight: 400;
  font-size: var(--t-sm);
  color: var(--tinta);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.punto-pieza__txt b {
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--oro);
}

.punto-pieza__btn {
  width: 100%;
  padding: .55rem;
  background: var(--tinta);
  color: var(--crema);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background var(--rapido) var(--curva);
}
.punto-pieza__btn:hover { background: var(--oro); }

.punto-pieza__agotado {
  display: block;
  text-align: center;
  padding: .5rem;
  background: var(--crema-hondo);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}

/* Pista discreta sobre la foto: aparece, se desvanece sola pasados unos
   segundos (sin depender de que la clienta llegue a tocar un punto), y es
   deliberadamente sutil — es una ayuda, no un anuncio. */
.campana__pista {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 2;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(20,17,15,.32);
  backdrop-filter: blur(6px);
  color: rgba(250,247,242,.78);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--medio) var(--curva);
  animation: pistaDesvanecer 1s var(--curva) 4.5s forwards;
}
.campana__media.tocado .campana__pista { opacity: 0; }
@keyframes pistaDesvanecer { to { opacity: 0; visibility: hidden; } }

/* Variante «en flujo»: cuando la pista comparte el mismo bloque de texto
   que un botón (como en las campañas de portada) no debe salirse de ese
   bloque a posicionarse por su cuenta — ahí sí puede terminar encima del
   botón. En flujo, sencillamente ocupa su lugar en la fila, antes que él. */
.campana__pista--en-flujo {
  position: static;
  transform: none;
  display: inline-flex;
  left: auto; bottom: auto;
}

/* Fichas sin punto, dentro del bloque de texto de la campaña */
.campana__fichas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.6rem;
}

/* En la campaña comprable la foto manda: se le da más aire */
.campana--comprable { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

@media (max-width: 900px) {
  .campana--comprable { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .punto-pieza__ficha { width: 190px; }
  .punto-pieza__enlace img { width: 46px; height: 46px; flex-basis: 46px; }
  .campana__pista { font-size: .6rem; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .punto-pieza__marca::before { animation: none; opacity: 0 }
}

/* ---------- El atributo hidden manda siempre ----------
   Sin esto, cualquier regla con `display` (por ejemplo .campo{display:block})
   pisa al navegador y los paneles ocultos se veían igual. */
[hidden]{display:none !important}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.checkout__cuerpo { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }

/* --------------------------- Pasos --------------------------- */
.paso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--linea);
}
.paso:last-child { border-bottom: 0; padding-bottom: 0; }

.paso__numero {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--oro);
}
.paso__titulo {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--tinta);
  margin-bottom: .3rem;
}
.paso__ayuda {
  font-size: var(--t-sm);
  color: var(--humo);
  margin-bottom: 1.1rem;
  max-width: 52ch;
}

/* --------------------------- Opciones --------------------------- */
.opciones { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
.opciones--dos { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.opcion {
  position: relative;
  display: block;
  cursor: pointer;
}
.opcion input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.opcion__cuerpo {
  display: grid;
  gap: .25rem;
  padding: .95rem 1.1rem .95rem 2.9rem;
  border: 1px solid var(--linea-fuerte);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
/* La marca redonda */
.opcion__cuerpo::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  width: 16px;
  height: 16px;
  border: 1px solid var(--arena);
  border-radius: 50%;
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.opcion:hover .opcion__cuerpo { border-color: var(--arena); background: var(--crema); }
.opcion input:checked + .opcion__cuerpo {
  border-color: var(--tinta);
  background: var(--crema);
}
.opcion input:checked + .opcion__cuerpo::before {
  border-color: var(--tinta);
  box-shadow: inset 0 0 0 4px var(--blanco), inset 0 0 0 16px var(--tinta);
}
.opcion input:focus-visible + .opcion__cuerpo { outline: 1px solid var(--oro); outline-offset: 3px; }

.opcion__cuerpo strong {
  font-weight: 400;
  font-size: var(--t-md);
  color: var(--tinta);
}
.opcion__cuerpo em {
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--humo);
  line-height: 1.45;
}

/* Bolívares y Binance llevan un sello discreto */
.opcion--destacada .opcion__cuerpo strong::after {
  content: "Preferido";
  margin-left: .6rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--beige);
  color: var(--oro);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* --------------------------- Campos --------------------------- */
.campo-publico { display: block; margin-bottom: 1.1rem; }
.campo-publico > span {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grafito);
  margin-bottom: .5rem;
}
.campo-publico > span i { font-style: normal; color: var(--humo); text-transform: none; letter-spacing: .04em; }
.campo-publico input,
.campo-publico textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--linea-fuerte);
  background: var(--blanco);
  font-size: var(--t-md);
  color: var(--tinta);
  transition: border-color var(--rapido) var(--curva);
}
.campo-publico input:focus,
.campo-publico textarea:focus { outline: none; border-color: var(--oro); }
.campo-publico textarea { resize: vertical; }
.campo-publico small {
  display: block;
  margin-top: .45rem;
  font-size: var(--t-xs);
  color: var(--humo);
  line-height: 1.5;
}
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1.1rem; }

/* --------------------------- Resumen --------------------------- */
.checkout__resumen {
  position: sticky;
  top: calc(var(--header-h) + var(--anuncio-h) + 1.5rem);
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  background: var(--crema);
  border: 1px solid var(--linea);
}

.resumen__linea {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea);
}
.resumen__linea img { width: 46px; height: 46px; object-fit: cover; }
.resumen__txt { display: grid; gap: .12rem; min-width: 0; }
.resumen__txt strong {
  font-weight: 400;
  font-size: var(--t-sm);
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resumen__txt em { font-style: normal; font-size: var(--t-xs); color: var(--humo); }
.resumen__linea > b { font-weight: 500; font-size: var(--t-sm); }

.resumen__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--linea-fuerte);
}
.resumen__total span {
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--humo);
}
.resumen__total b {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--tinta);
}

.resumen__nota {
  font-size: var(--t-xs);
  color: var(--humo);
  line-height: 1.6;
  margin-top: .9rem;
}
.resumen__nota--aviso {
  padding: .6rem .8rem;
  background: var(--blanco);
  border-left: 2px solid var(--oro);
  color: var(--grafito);
}

/* --------------------------- Alertas --------------------------- */
.alerta {
  padding: .95rem 1.15rem;
  margin-bottom: 2rem;
  border-left: 2px solid;
  font-size: var(--t-sm);
}
.alerta--error { background: #FBECEA; border-color: #9A3B32; color: #7C2F27; }

/* --------------------------- Confirmación --------------------------- */
.gracias { text-align: center; max-width: 620px; margin-inline: auto; }
.gracias .vacio__marca { color: var(--oro); }
.gracias__resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin: 2.5rem 0;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.gracias__resumen div { background: var(--blanco); padding: 1.1rem .8rem; display: grid; gap: .35rem; }
.gracias__resumen span {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}
.gracias__resumen b { font-family: var(--display); font-size: 1.35rem; font-weight: 400; }
.gracias__nota { margin-top: 2rem; font-size: var(--t-sm); color: var(--humo); }

/* --------------------------- Responsive --------------------------- */
@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__resumen { position: static; }
}

@media (max-width: 480px) {
  .paso { grid-template-columns: 1fr; gap: .8rem; }
  .paso__numero { width: 30px; height: 30px; }
  .opciones--dos { grid-template-columns: 1fr; }
}