/* =========================================================================
   VÉRANE — Sistema de diseño
   Maison de mode · flagship digital · demostración
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Paleta */
  --fondo:        #F7F5F0;
  --fondo-2:      #EFECE5;
  --fondo-3:      #E6E1D5;
  --tarjeta:      #FFFFFF;
  --tinta:        #171714;
  --tinta-2:      #77746D;
  --tinta-3:      #A29D93;
  --acento:       #B69A67;
  --acento-claro: #CDB88E;
  --borde:        #DDD8CD;
  --borde-suave:  #E8E4DA;
  --champan:      #EFE6D5;

  /* Tipografía */
  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:  "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Métrica */
  --marco: clamp(18px, 4.6vw, 76px);
  --max:   1680px;
  --header-h: 84px;   /* altura de la fila de navegación */
  --cab-h: 118px;     /* altura total de la cabecera fija (cinta + fila) */
  --offset-fijo: 118px; /* anclaje de los elementos pegajosos: 0 cuando la cabecera se oculta */

  /* Movimiento */
  --e-salida: cubic-bezier(.22, 1, .36, 1);
  --e-suave:  cubic-bezier(.65, .05, .36, 1);
  --e-grande: cubic-bezier(.16, 1, .3, 1);
  --t-rapida: .35s;
  --t-media:  .6s;
  --t-larga:  1.1s;

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(23,23,20,.04), 0 8px 24px rgba(23,23,20,.05);
  --sombra-2: 0 2px 6px rgba(23,23,20,.05), 0 24px 60px rgba(23,23,20,.09);
  --sombra-3: 0 40px 120px rgba(23,23,20,.16);
}

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.sin-scroll, body.sin-scroll{ overflow: hidden; }

body{
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a{ color: inherit; text-decoration: none; }
input, select, textarea{ font: inherit; color: inherit; }
::selection{ background: var(--tinta); color: var(--fondo); }

/* Barra de desplazamiento */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--fondo-2); }
::-webkit-scrollbar-thumb{ background: #CFC9BC; border: 3px solid var(--fondo-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--acento); }

/* ---------- 2. Tipografía ---------- */
.display,
h1, h2, h3{
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.018em;
  margin: 0;
}
.d1{ font-size: clamp(3.2rem, 9.4vw, 9.6rem); }
.d2{ font-size: clamp(2.6rem, 6.6vw, 6.2rem); }
.d3{ font-size: clamp(2rem, 4.2vw, 3.9rem); }
.d4{ font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.12; }
.cursiva{ font-style: italic; }
.fina{ font-weight: 200; }

.eyebrow{
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 0;
}
.eyebrow--acento{ color: var(--acento); }

.texto{
  font-size: 15px;
  line-height: 1.8;
  color: var(--tinta-2);
  font-weight: 300;
  max-width: 58ch;
  margin: 0;
}
.texto--grande{ font-size: 17px; line-height: 1.75; }
.mono{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ---------- 3. Estructura ---------- */
.marco{
  padding-inline: var(--marco);
  max-width: var(--max);
  margin-inline: auto;
}
.seccion{ padding-block: clamp(72px, 11vw, 168px); }
.seccion--corta{ padding-block: clamp(52px, 7vw, 104px); }
.seccion--fondo{ background: var(--fondo-2); }

.encabezado-seccion{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4.5vw, 68px);
}
.encabezado-seccion .titulo-bloque{ display: grid; gap: 18px; }

.regla{ height: 1px; background: var(--borde); border: 0; margin: 0; }

/* ---------- 4. Botones y enlaces ---------- */
.btn{
  --btn-bg: var(--tinta);
  --btn-fg: #FAF8F4;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 19px 40px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color .5s var(--e-salida), transform .5s var(--e-salida), box-shadow .5s var(--e-salida);
}
.btn > span{ position: relative; z-index: 2; display: inline-block; }
.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--acento);
  transform: translateY(101%);
  transition: transform .6s var(--e-grande);
}
.btn:hover::before{ transform: translateY(0); }
.btn:hover{ box-shadow: var(--sombra-2); }
.btn:active{ transform: scale(.985); }

.btn--claro{ --btn-bg: transparent; --btn-fg: var(--tinta); border: 1px solid var(--borde); }
.btn--claro:hover{ color: #FAF8F4; border-color: var(--acento); }
.btn--blanco{ --btn-bg: #FFFFFF; --btn-fg: var(--tinta); }
.btn--blanco:hover{ color: #FFF; }
.btn--fantasma{
  --btn-bg: transparent; --btn-fg: #FFF;
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.btn--ancho{ width: 100%; }
.btn--pequeno{ padding: 14px 28px; font-size: 9.5px; }
.btn[disabled]{ opacity: .4; pointer-events: none; }

/* Enlace con subrayado que se dibuja */
.enlace{
  position: relative;
  display: inline-block;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding-bottom: 6px;
  color: var(--tinta);
}
.enlace::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform .55s var(--e-grande);
}
.enlace:hover::after{ transform: scaleX(0); transform-origin: left; }
.enlace--flecha{ display: inline-flex; align-items: center; gap: 10px; }
.enlace--flecha svg{ transition: transform .5s var(--e-salida); }
.enlace:hover svg{ transform: translateX(6px); }

/* ---------- 5. Aviso demo ---------- */
.cinta-demo{
  position: relative;
  z-index: 2;
  background: var(--tinta);
  color: #EFEADF;
  text-align: center;
  padding: 9px 16px;
  font-size: 9.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 300;
}
.cinta-demo b{ font-weight: 400; color: var(--acento-claro); }
.cinta-demo__corta{ display: none; }
@media (max-width: 720px){
  .cinta-demo{ padding: 8px 14px; font-size: 8.6px; letter-spacing: .2em; }
  .cinta-demo__larga{ display: none; }
  .cinta-demo__corta{ display: inline; }
}

/* ---------- 6. Cabecera ---------- */
.cabecera{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: transform .6s var(--e-salida), background .5s ease, box-shadow .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.cabecera__fila{
  position: static;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding-inline: var(--marco);
  max-width: var(--max);
  margin-inline: auto;
}
/* Sobre el hero */
.cabecera--transparente{ color: #FFF; }
.cabecera--transparente .cabecera__fila::after{ opacity: 0; }
/* Sólida */
.cabecera--solida{
  background: rgba(247,245,240,.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--borde-suave);
  color: var(--tinta);
}
.cabecera--oculta{ transform: translateY(-100%); }

.nav{ display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
.nav--derecha{ justify-content: flex-end; }
.nav__enlace{
  position: relative;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 6px 0;
  white-space: nowrap;
  opacity: .92;
  transition: opacity .35s ease;
}
.nav__enlace::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--e-grande);
}
.nav__enlace:hover{ opacity: 1; }
.nav__enlace:hover::after,
.nav__enlace.activo::after{ transform: scaleX(1); }

.marca{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 300;
  letter-spacing: .46em;
  text-indent: .46em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .4s ease;
}
.marca:hover{ opacity: .62; }

.acciones{ display: flex; align-items: center; gap: 4px; }
.icono-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .4s ease, opacity .35s ease;
}
.icono-btn:hover{ opacity: .62; }
.icono-btn svg{ width: 17px; height: 17px; }
.contador{
  min-width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--acento);
  color: #FFF;
  font-size: 9px;
  letter-spacing: 0;
  font-weight: 500;
  transform: scale(0);
  transition: transform .5s var(--e-grande);
}
.contador.visible{ transform: scale(1); }
.contador.latido{ animation: latido .7s var(--e-salida); }
@keyframes latido{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.5); }
  100%{ transform: scale(1); }
}

.hamburguesa{ display: none; width: 42px; height: 42px; align-items: center; justify-content: center; }
.hamburguesa i{
  display: block; width: 20px; height: 1px; background: currentColor;
  position: relative; transition: transform .45s var(--e-salida), opacity .3s ease;
}
.hamburguesa i::before, .hamburguesa i::after{
  content: ""; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor;
  transition: transform .45s var(--e-salida);
}
.hamburguesa i::before{ top: -6px; }
.hamburguesa i::after{ top: 6px; }

/* ---------- 7. Mega menú ---------- */
.mega{
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(247,245,240,.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--borde-suave);
  border-bottom: 1px solid var(--borde-suave);
  color: var(--tinta);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .45s var(--e-salida), transform .55s var(--e-salida), visibility .45s;
  z-index: -1;
}
.mega.abierto{ opacity: 1; visibility: visible; transform: translateY(0); }
.mega__interior{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) 1.25fr;
  gap: clamp(28px, 4vw, 72px);
  padding: 54px var(--marco) 62px;
  max-width: var(--max);
  margin-inline: auto;
}
.mega__col{ display: grid; gap: 14px; align-content: start; }
.mega__titulo{
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 6px;
}
.mega__enlace{
  font-size: 14px; font-weight: 300; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color .3s ease, transform .45s var(--e-salida);
}
.mega__enlace:hover{ color: var(--acento); transform: translateX(6px); }
.mega__promo{ display: grid; gap: 16px; }
.mega__figura{ position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--fondo-3); }
.mega__figura img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--e-salida); }
.mega__promo:hover img{ transform: scale(1.06); }

/* ---------- 8. Menú móvil ---------- */
.menu-movil{
  position: fixed; inset: 0; z-index: 300;
  background: var(--fondo);
  display: grid;
  grid-template-rows: auto 1fr auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .85s var(--e-grande);
  overflow-y: auto;
}
.menu-movil.abierto{ clip-path: inset(0 0 0 0); }
.menu-movil__cabecera{
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--marco); border-bottom: 1px solid var(--borde-suave);
}
.menu-movil__cuerpo{ padding: 34px var(--marco) 20px; display: grid; align-content: start; gap: 4px; }
.menu-movil__enlace{
  font-family: var(--serif);
  font-size: clamp(2.1rem, 9vw, 3.2rem);
  font-weight: 300; line-height: 1.24;
  display: flex; align-items: baseline; gap: 14px;
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--e-salida), transform .7s var(--e-salida), color .3s ease;
  border-bottom: 1px solid var(--borde-suave);
  padding: 12px 0;
}
.menu-movil__enlace span{ font-family: var(--sans); font-size: 10px; letter-spacing: .2em; color: var(--tinta-3); }
.menu-movil.abierto .menu-movil__enlace{ opacity: 1; transform: none; }
.menu-movil__pie{ padding: 24px var(--marco) 40px; display: grid; gap: 16px; border-top: 1px solid var(--borde-suave); }
.menu-movil__secundarios{ display: flex; flex-wrap: wrap; gap: 18px 26px; }
.cerrar{
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--borde); transition: background .4s ease, transform .5s var(--e-salida);
}
.cerrar:hover{ background: var(--fondo-2); transform: rotate(90deg); }

/* ---------- 9. Hero ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--fondo-3);
  color: #FFF;
}
.hero__media{ position: absolute; inset: -8% 0 -8% 0; will-change: transform; }
.hero__media img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.16);
  opacity: 0;
  animation: heroEntra 2.6s var(--e-grande) forwards .15s;
}
@keyframes heroEntra{ to{ transform: scale(1); opacity: 1; } }
.hero__velo{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18,17,15,.66) 0%, rgba(18,17,15,.24) 40%, rgba(18,17,15,.06) 68%, rgba(18,17,15,.28) 100%);
}
.hero__contenido{
  position: relative; z-index: 3;
  width: 100%;
  padding: 0 var(--marco) clamp(56px, 8vh, 104px);
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: 26px;
  justify-items: start;
}
.hero__titulo{ max-width: 16ch; text-shadow: 0 2px 40px rgba(0,0,0,.22); }
.hero__texto{ color: rgba(255,255,255,.84); max-width: 42ch; }
.hero__fila{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 8px; }

/* Máscara de aparición por línea */
.linea{ display: block; overflow: hidden; }
.linea > *{
  display: block;
  transform: translateY(115%);
  animation: subeLinea 1.35s var(--e-grande) forwards;
}
.hero .linea:nth-child(1) > *{ animation-delay: .5s; }
.hero .linea:nth-child(2) > *{ animation-delay: .62s; }
.hero .linea:nth-child(3) > *{ animation-delay: .74s; }
@keyframes subeLinea{ to{ transform: translateY(0); } }

.hero__entra{ opacity: 0; animation: apareceSuave 1.2s var(--e-salida) forwards; }
.hero__entra--1{ animation-delay: .95s; }
.hero__entra--2{ animation-delay: 1.1s; }
.hero__entra--3{ animation-delay: 1.3s; }
@keyframes apareceSuave{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }

.hero__scroll{
  position: absolute;
  right: var(--marco); bottom: clamp(56px, 8vh, 104px);
  z-index: 3;
  display: grid; justify-items: center; gap: 14px;
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hero__scroll i{ display: block; width: 1px; height: 58px; background: rgba(255,255,255,.34); position: relative; overflow: hidden; }
.hero__scroll i::after{
  content: ""; position: absolute; inset: 0; background: #FFF;
  animation: barrido 2.4s var(--e-suave) infinite;
}
@keyframes barrido{
  0%{ transform: translateY(-100%); }
  55%{ transform: translateY(0); }
  100%{ transform: translateY(100%); }
}

/* ---------- 10. Revelados al hacer scroll ---------- */
[data-revela]{
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--e-salida), transform 1.15s var(--e-grande);
  transition-delay: var(--retardo, 0ms);
}
[data-revela].visible{ opacity: 1; transform: none; }

[data-revela="mascara"]{ opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--e-grande); transition-delay: var(--retardo, 0ms); }
[data-revela="mascara"].visible{ clip-path: inset(0 0 0 0); }

[data-revela="imagen"]{ opacity: 1; transform: none; }
[data-revela="imagen"] img,
[data-revela="imagen"] .marco-img{ transform: scale(1.14); transition: transform 1.8s var(--e-grande), opacity 1.2s ease; opacity: .001; }
[data-revela="imagen"].visible img,
[data-revela="imagen"].visible .marco-img{ transform: scale(1); opacity: 1; }

.velo-revelado{
  position: absolute; inset: 0; background: var(--fondo); z-index: 4;
  transform-origin: bottom;
  transition: transform 1.35s var(--e-grande);
  transition-delay: var(--retardo, 0ms);
}
.visible > .velo-revelado{ transform: scaleY(0); }

/* Palabras que ascienden */
.palabras > span{ display: inline-block; overflow: hidden; vertical-align: bottom; }
.palabras > span > i{
  display: inline-block; font-style: inherit;
  transform: translateY(110%);
  transition: transform 1.05s var(--e-grande);
  transition-delay: calc(var(--i, 0) * 55ms + var(--retardo, 0ms));
}
.visible.palabras > span > i,
.palabras.visible > span > i{ transform: translateY(0); }

/* ---------- 11. Figuras e imágenes ---------- */
.figura{ position: relative; overflow: hidden; background: var(--fondo-3); }
.figura img{ width: 100%; height: 100%; object-fit: cover; }
.figura--zoom img{ transition: transform 1.5s var(--e-salida); }
.figura--zoom:hover img{ transform: scale(1.055); }
.rel{ position: relative; }

/* ---------- 12. Tarjeta de producto ---------- */
.rejilla{
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 40px) clamp(14px, 1.6vw, 28px);
}
.producto{ position: relative; display: grid; gap: 16px; }
.producto__media{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--fondo-2);
  isolation: isolate;
}
.producto__media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.5s var(--e-salida), opacity .85s var(--e-salida);
}
.producto__media .img2{ opacity: 0; transform: scale(1.06); }
.producto:hover .img1{ transform: scale(1.05); opacity: 0; }
.producto:hover .img2{ opacity: 1; transform: scale(1); }
.producto__media::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(23,23,20,.2), transparent 42%);
  opacity: 0; transition: opacity .6s ease;
}
.producto:hover .producto__media::after{ opacity: 1; }
.producto:hover .producto__media{ box-shadow: var(--sombra-2); }
.producto__media{ transition: box-shadow .6s var(--e-salida); }

.etiqueta{
  position: absolute; top: 14px; left: 14px; z-index: 3;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  color: var(--tinta);
  padding: 7px 13px;
  font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase;
}
.etiqueta--acento{ background: var(--tinta); color: var(--champan); }

.accion-rapida{
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 16px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  color: var(--tinta);
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--e-salida), transform .6s var(--e-grande), background .35s ease, color .35s ease;
}
.producto:hover .accion-rapida{ opacity: 1; transform: none; }
.accion-rapida:hover{ background: var(--tinta); color: var(--champan); }
.accion-rapida.ok{ background: var(--acento); color: #FFF; }

.producto__info{ display: grid; gap: 5px; }
.producto__cat{ font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-3); }
.producto__nombre{ font-size: 15px; font-weight: 400; letter-spacing: .01em; line-height: 1.35; }
.producto__nombre a{ background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .6s var(--e-grande); }
.producto:hover .producto__nombre a{ background-size: 100% 1px; }
.producto__precio{ font-size: 13.5px; color: var(--tinta-2); letter-spacing: .04em; }
.producto__colores{ display: flex; gap: 6px; margin-top: 4px; }
.punto{
  width: 11px; height: 11px; border-radius: 999px;
  border: 1px solid rgba(23,23,20,.16);
  box-shadow: inset 0 0 0 1.5px #FFF;
}

/* ---------- 13. Home: bloques editoriales ---------- */
.duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 64px);
  align-items: center;
}
.duo--invertido > *:first-child{ order: 2; }
.duo__texto{ display: grid; gap: 22px; justify-items: start; padding-block: clamp(0px, 3vw, 40px); }

.trio{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 26px); }

.tarjeta-cat{ position: relative; display: block; overflow: hidden; background: var(--fondo-3); }
.tarjeta-cat img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--e-salida); }
.tarjeta-cat::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,19,16,.58), rgba(20,19,16,.06) 55%);
  transition: opacity .6s ease; opacity: .9;
}
.tarjeta-cat:hover img{ transform: scale(1.06); }
.tarjeta-cat:hover::after{ opacity: 1; }
.tarjeta-cat__pie{
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 2.4vw, 38px);
  color: #FFF;
  display: grid; gap: 10px; justify-items: start;
}
.tarjeta-cat__pie .d4{ color: #FFF; }
.tarjeta-cat__cta{
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px;
  padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.5);
  transform: translateY(6px); opacity: .001;
  transition: transform .6s var(--e-grande), opacity .5s ease;
}
.tarjeta-cat:hover .tarjeta-cat__cta{ transform: none; opacity: 1; }

/* Campaña a sangre con paralaje */
.campana{
  position: relative;
  min-height: clamp(520px, 86vh, 900px);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #FFF;
  text-align: center;
}
.campana__media{ position: absolute; inset: -12% 0; will-change: transform; }
.campana__media img{ width: 100%; height: 100%; object-fit: cover; }
.campana::after{
  content: ""; position: absolute; inset: 0;
  /* Garantiza la legibilidad del texto blanco sobre fotografías claras */
  background: linear-gradient(rgba(18,17,14,.40), rgba(18,17,14,.54));
}
.campana__contenido{ position: relative; z-index: 2; display: grid; gap: 26px; justify-items: center; padding: var(--marco); max-width: 900px; }
.campana__contenido .texto{ color: rgba(255,255,255,.92); text-shadow: 0 1px 22px rgba(0,0,0,.3); }

/* Rótulo deslizante */
.marquesina{
  overflow: hidden;
  border-block: 1px solid var(--borde);
  padding-block: 22px;
  background: var(--fondo);
}
.marquesina__pista{ display: flex; gap: 0; width: max-content; animation: desliza 44s linear infinite; }
.marquesina:hover .marquesina__pista{ animation-play-state: paused; }
.marquesina span{
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 300;
  padding-inline: clamp(22px, 3vw, 48px);
  display: inline-flex; align-items: center; gap: clamp(22px, 3vw, 48px);
  white-space: nowrap;
  color: var(--tinta);
}
.marquesina span::after{ content: "◆"; font-size: 8px; color: var(--acento); }
@keyframes desliza{ to{ transform: translateX(-50%); } }

/* Filosofía / cifras */
.cifras{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 56px); }
.cifra{ display: grid; gap: 10px; padding-top: 26px; border-top: 1px solid var(--borde); }
.cifra strong{ font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 300; line-height: 1; }
.cifra span{ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }

/* Journal */
.journal{ display: grid; gap: 18px; }
.journal__media{ aspect-ratio: 3/2; overflow: hidden; background: var(--fondo-3); }
.journal__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--e-salida); }
.journal:hover .journal__media img{ transform: scale(1.06); }
.journal__meta{ display: flex; gap: 16px; align-items: center; }

/* ---------- 14. Catálogo ---------- */
.cabecera-pagina{
  padding-top: calc(var(--cab-h) + clamp(50px, 7vw, 104px));
  padding-bottom: clamp(28px, 3.4vw, 52px);
}
.cabecera-pagina__interior{ display: grid; gap: 22px; max-width: 880px; }
.miga{ display: flex; gap: 10px; align-items: center; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.miga a:hover{ color: var(--tinta); }

/* La caja va a sangre completa, como la cabecera, para que los filetes
   superior e inferior recorran toda la anchura de la pantalla. */
.barra-herramientas{
  position: sticky; top: var(--offset-fijo);
  transition: top .6s var(--e-salida);
  z-index: 90;
  /* Casi opaca: al quedar fija, no debe transparentar la rejilla que pasa por detrás */
  background: rgba(247,245,240,.975);
  backdrop-filter: blur(16px);
  border-block: 1px solid var(--borde-suave);
  margin-bottom: clamp(26px, 3vw, 48px);
}
/* El interior conserva el ancho y los márgenes del resto del contenido. */
.barra-herramientas__interior{
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding-block: 16px;
}
.barra-herramientas__izq, .barra-herramientas__der{ display: flex; align-items: center; gap: 14px; }
.selector{
  appearance: none;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 11px 40px 11px 18px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .35s ease, background .35s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23171714' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.selector:hover{ border-color: var(--tinta); background-color: #FFF; }
.selector:focus-visible{ outline: 1px solid var(--acento); outline-offset: 2px; }

.conteo{ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }

.filtros-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--e-grande), opacity .5s ease, margin .6s var(--e-grande);
  opacity: 0;
  overflow: hidden;
}
.filtros-panel.abierto{ grid-template-rows: 1fr; opacity: 1; margin-bottom: clamp(24px, 3vw, 44px); }
.filtros-panel__interior{ overflow: hidden; }
.filtros-rejilla{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(24px, 3vw, 52px);
  padding: clamp(26px, 3vw, 42px) 0;
  border-bottom: 1px solid var(--borde-suave);
}
.filtro-grupo{ display: grid; gap: 14px; align-content: start; }
.filtro-grupo h4{ font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--tinta-3); margin: 0; font-family: var(--sans); font-weight: 400; }
.filtro-opciones{ display: flex; flex-wrap: wrap; gap: 8px; }
.pildora{
  padding: 9px 16px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-2);
  transition: all .4s var(--e-salida);
  display: inline-flex; align-items: center; gap: 8px;
}
.pildora:hover{ border-color: var(--tinta); color: var(--tinta); transform: translateY(-1px); }
.pildora.activa{ background: var(--tinta); border-color: var(--tinta); color: var(--champan); }
.pildora__punto{ width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(23,23,20,.2); }

.rango{ display: grid; gap: 12px; }
.rango input[type="range"]{ width: 100%; accent-color: var(--tinta); }
.rango__valores{ display: flex; justify-content: space-between; font-size: 11px; color: var(--tinta-2); letter-spacing: .1em; }

.fichas-activas{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: clamp(18px, 2vw, 30px); }

.vacio{ text-align: center; padding: clamp(60px, 10vw, 130px) 0; display: grid; gap: 22px; justify-items: center; }

/* Entrada escalonada de la rejilla */
.producto.entra{ opacity: 0; transform: translateY(26px); animation: entraProducto .9s var(--e-grande) forwards; }
@keyframes entraProducto{ to{ opacity: 1; transform: none; } }

/* ---------- 15. Ficha de producto ---------- */
.ficha{
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: clamp(26px, 4vw, 82px);
  align-items: start;
  padding-top: calc(var(--cab-h) + clamp(28px, 4vw, 58px));
}
.galeria{ display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; position: relative; }
.miniaturas{ display: grid; gap: 12px; position: sticky; top: calc(var(--offset-fijo) + 24px); transition: top .6s var(--e-salida); }
.mini{
  aspect-ratio: 4/5; overflow: hidden; background: var(--fondo-2);
  border: 1px solid transparent; opacity: .58;
  transition: opacity .4s ease, border-color .4s ease, transform .5s var(--e-salida);
}
.mini img{ width: 100%; height: 100%; object-fit: cover; }
.mini:hover{ opacity: .88; transform: translateY(-2px); }
.mini.activa{ opacity: 1; border-color: var(--tinta); }

.visor{
  position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--fondo-2);
  cursor: zoom-in;
}
.visor img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--e-salida), opacity .8s ease;
}
.visor img.saliendo{ opacity: 0; }
.visor.zoom img{ transform: scale(1.7); transition: transform .9s var(--e-salida); }

.detalle{ display: grid; gap: 26px; align-content: start; position: sticky; top: calc(var(--offset-fijo) + 34px); transition: top .6s var(--e-salida); }
.detalle__cabecera{ display: grid; gap: 12px; }
.detalle__precio{ font-size: 19px; letter-spacing: .04em; font-weight: 300; }
.detalle__bloque{ display: grid; gap: 13px; }
.detalle__etiqueta{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3);
}
.detalle__etiqueta b{ color: var(--tinta); font-weight: 400; letter-spacing: .14em; }

.muestras{ display: flex; gap: 12px; flex-wrap: wrap; }
.muestra{
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--borde);
  position: relative;
  transition: transform .45s var(--e-salida), border-color .35s ease;
}
.muestra i{ position: absolute; inset: 3px; border-radius: 999px; display: block; }
.muestra:hover{ transform: scale(1.08); }
.muestra.activa{ border-color: var(--tinta); }
.muestra.activa::after{
  content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 1px solid var(--tinta);
  animation: aroEntra .5s var(--e-salida);
}
@keyframes aroEntra{ from{ transform: scale(.82); opacity: 0; } to{ transform: scale(1); opacity: 1; } }

.tallas{ display: flex; flex-wrap: wrap; gap: 8px; }
.talla{
  min-width: 58px; padding: 13px 14px;
  border: 1px solid var(--borde);
  font-size: 11px; letter-spacing: .12em; text-align: center;
  transition: all .38s var(--e-salida);
}
.talla:hover{ border-color: var(--tinta); transform: translateY(-2px); }
.talla.activa{ background: var(--tinta); color: var(--champan); border-color: var(--tinta); }
.talla.agotada{ opacity: .32; text-decoration: line-through; pointer-events: none; }

.cantidad{ display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: 999px; }
.cantidad button{ width: 44px; height: 46px; display: grid; place-items: center; transition: color .3s ease, background .3s ease; border-radius: 999px; }
.cantidad button:hover{ color: var(--acento); }
.cantidad span{ min-width: 40px; text-align: center; font-size: 13px; }

.aviso-talla{ font-size: 11.5px; color: #9A5B4C; letter-spacing: .04em; display: none; }
.aviso-talla.visible{ display: block; animation: tiembla .45s var(--e-suave); }
@keyframes tiembla{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}

.acordeon{ border-top: 1px solid var(--borde-suave); }
.acordeon__item{ border-bottom: 1px solid var(--borde-suave); }
.acordeon__btn{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; text-align: left;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  transition: color .35s ease;
}
.acordeon__btn:hover{ color: var(--acento); }
.acordeon__mas{ position: relative; width: 11px; height: 11px; flex: none; }
.acordeon__mas::before, .acordeon__mas::after{
  content: ""; position: absolute; background: currentColor; transition: transform .5s var(--e-grande), opacity .3s ease;
}
.acordeon__mas::before{ left: 0; top: 5px; width: 11px; height: 1px; }
.acordeon__mas::after{ left: 5px; top: 0; width: 1px; height: 11px; }
.acordeon__item.abierto .acordeon__mas::after{ transform: rotate(90deg); opacity: 0; }
.acordeon__cuerpo{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--e-grande); }
.acordeon__item.abierto .acordeon__cuerpo{ grid-template-rows: 1fr; }
.acordeon__cuerpo > div{ overflow: hidden; }
.acordeon__cuerpo p{ padding-bottom: 22px; margin: 0; color: var(--tinta-2); font-size: 14px; line-height: 1.8; }

.servicios{ display: grid; gap: 14px; padding-top: 6px; }
.servicio{ display: flex; gap: 13px; align-items: flex-start; font-size: 12.5px; color: var(--tinta-2); }
.servicio svg{ flex: none; margin-top: 3px; color: var(--acento); }

/* ---------- 16. Buscador ---------- */
.buscador{
  position: fixed; inset: 0; z-index: 320;
  background: rgba(247,245,240,.97);
  backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--e-salida), visibility .5s;
  overflow-y: auto;
}
.buscador.abierto{ opacity: 1; visibility: visible; }
.buscador__interior{ padding: clamp(24px, 4vw, 54px) var(--marco) 80px; max-width: var(--max); margin-inline: auto; }
.buscador__superior{ display: flex; justify-content: flex-end; margin-bottom: clamp(24px, 4vw, 48px); }
.buscador__campo{
  display: flex; align-items: center; gap: 18px;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 18px;
  transform: translateY(20px); opacity: 0;
  transition: transform .8s var(--e-grande) .1s, opacity .7s ease .1s, border-color .4s ease;
}
.buscador.abierto .buscador__campo{ transform: none; opacity: 1; }
.buscador__campo:focus-within{ border-color: var(--tinta); }
.buscador__campo input{
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.6vw, 3.4rem);
  font-weight: 300; letter-spacing: -.01em;
}
.buscador__campo input::placeholder{ color: var(--tinta-3); }
.buscador__resultados{ padding-top: clamp(30px, 4vw, 52px); }
.sugerencias{ display: flex; flex-wrap: wrap; gap: 10px; }
.buscador__bloque{ display: grid; gap: 20px; margin-bottom: 48px; opacity: 0; transform: translateY(16px); transition: opacity .7s ease .24s, transform .8s var(--e-grande) .24s; }
.buscador.abierto .buscador__bloque{ opacity: 1; transform: none; }

/* ---------- 17. Bolsa lateral ---------- */
.cortina{
  position: fixed; inset: 0; z-index: 330;
  background: rgba(23,22,19,.34);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--e-salida), visibility .55s;
}
.cortina.abierta{ opacity: 1; visibility: visible; }

.bolsa{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 340;
  width: min(468px, 100vw);
  background: var(--fondo);
  display: grid;
  grid-template-rows: auto 1fr auto;
  transform: translateX(100%);
  transition: transform .78s var(--e-grande);
  box-shadow: var(--sombra-3);
}
.bolsa.abierta{ transform: none; }
.bolsa__cabecera{
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 28px; border-bottom: 1px solid var(--borde-suave);
}
.bolsa__cuerpo{ overflow-y: auto; padding: 8px 28px 20px; }
.bolsa__pie{ border-top: 1px solid var(--borde-suave); padding: 24px 28px 30px; display: grid; gap: 16px; background: var(--fondo-2); }

.linea-bolsa{
  display: grid; grid-template-columns: 86px 1fr; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid var(--borde-suave);
  animation: entraLinea .6s var(--e-salida) backwards;
}
@keyframes entraLinea{ from{ opacity: 0; transform: translateX(24px); } }
.linea-bolsa.saliendo{ animation: saleLinea .45s var(--e-suave) forwards; }
@keyframes saleLinea{ to{ opacity: 0; transform: translateX(30px); height: 0; padding: 0; margin: 0; border: 0; } }
.linea-bolsa__media{ aspect-ratio: 4/5; overflow: hidden; background: var(--fondo-2); }
.linea-bolsa__media img{ width: 100%; height: 100%; object-fit: cover; }
.linea-bolsa__info{ display: grid; gap: 6px; align-content: start; }
.linea-bolsa__fila{ display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.linea-bolsa__nombre{ font-size: 13.5px; font-weight: 400; letter-spacing: .01em; }
.linea-bolsa__var{ font-size: 11px; color: var(--tinta-3); letter-spacing: .1em; }
.linea-bolsa__acciones{ display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.mini-cantidad{ display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: 999px; }
.mini-cantidad button{ width: 30px; height: 30px; display: grid; place-items: center; font-size: 13px; border-radius: 999px; transition: color .3s ease; }
.mini-cantidad button:hover{ color: var(--acento); }
.mini-cantidad span{ min-width: 26px; text-align: center; font-size: 12px; }
.quitar{ font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; }
.quitar:hover{ color: var(--tinta); border-color: var(--tinta); }

.resumen{ display: grid; gap: 10px; }
.resumen__fila{ display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta-2); letter-spacing: .04em; }
.resumen__fila--total{ color: var(--tinta); font-size: 16px; padding-top: 14px; border-top: 1px solid var(--borde); margin-top: 6px; }
.resumen__fila--total b{ font-weight: 400; }

.nota-demo{
  font-size: 10.5px; line-height: 1.7; color: var(--tinta-3);
  letter-spacing: .06em; text-align: center;
}

/* Barra de progreso de envío */
.envio-gratis{ display: grid; gap: 9px; padding: 16px 0 4px; }
.barra{ height: 2px; background: var(--borde); position: relative; overflow: hidden; }
.barra i{ position: absolute; inset: 0; background: var(--acento); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--e-grande); }

/* ---------- 18. Aviso flotante (toast) ---------- */
.avisos{ position: fixed; z-index: 400; right: 24px; bottom: 24px; display: grid; gap: 10px; pointer-events: none; }
.aviso{
  display: flex; align-items: center; gap: 14px;
  background: var(--tinta); color: #F3EFE6;
  padding: 15px 22px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: var(--sombra-2);
  transform: translateY(20px); opacity: 0;
  animation: entraAviso .6s var(--e-grande) forwards, saleAviso .5s var(--e-suave) forwards 3.1s;
}
@keyframes entraAviso{ to{ transform: none; opacity: 1; } }
@keyframes saleAviso{ to{ transform: translateY(14px); opacity: 0; } }
.aviso svg{ color: var(--acento-claro); }

/* Producto que vuela hacia la bolsa */
.volador{
  position: fixed; z-index: 500; pointer-events: none;
  border-radius: 2px; overflow: hidden;
  box-shadow: var(--sombra-2);
  transition: transform .95s cubic-bezier(.55,-.05,.25,1), opacity .95s ease, width .95s var(--e-suave), height .95s var(--e-suave), border-radius .95s ease;
}

/* ---------- 19. Carrito, checkout, confirmación ---------- */
.pagina{ padding-top: calc(var(--cab-h) + clamp(34px, 5vw, 76px)); }

.carrito{ display: grid; grid-template-columns: 1.5fr .82fr; gap: clamp(28px, 4vw, 78px); align-items: start; }
.tabla-carrito{ display: grid; }
.fila-carrito{
  display: grid; grid-template-columns: 128px 1fr auto; gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(20px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--borde-suave);
  align-items: start;
}
.fila-carrito:first-child{ border-top: 1px solid var(--borde-suave); }
.fila-carrito__media{ aspect-ratio: 4/5; overflow: hidden; background: var(--fondo-2); }
.fila-carrito__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-salida); }
.fila-carrito:hover .fila-carrito__media img{ transform: scale(1.05); }
.fila-carrito__info{ display: grid; gap: 8px; align-content: start; }
.fila-carrito__pie{ display: flex; align-items: center; gap: 22px; margin-top: 10px; flex-wrap: wrap; }
.fila-carrito__precio{ text-align: right; font-size: 15px; letter-spacing: .03em; white-space: nowrap; }

.panel{
  background: var(--tarjeta);
  border: 1px solid var(--borde-suave);
  padding: clamp(26px, 3vw, 40px);
  display: grid; gap: 22px;
  position: sticky; top: calc(var(--offset-fijo) + 26px);
  transition: top .6s var(--e-salida);
  box-shadow: var(--sombra-1);
}
.panel--plano{ position: static; box-shadow: none; }

.pasos{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 44px); }
.paso{ display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-3); }
.paso b{ width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--borde); display: grid; place-items: center; font-size: 9px; font-weight: 400; }
.paso.activo{ color: var(--tinta); }
.paso.activo b{ background: var(--tinta); color: var(--champan); border-color: var(--tinta); }
.paso__sep{ width: 26px; height: 1px; background: var(--borde); }

.caja-demo{
  border: 1px dashed var(--borde);
  background: var(--champan);
  padding: 20px 22px;
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 12px; line-height: 1.7; color: #6B6152;
}
.caja-demo svg{ flex: none; margin-top: 2px; color: var(--acento); }

.entrega{ display: grid; gap: 12px; }
.opcion-entrega{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--borde); padding: 18px 20px;
  transition: border-color .4s ease, background .4s ease, transform .4s var(--e-salida);
}
.opcion-entrega:hover{ border-color: var(--tinta-3); transform: translateY(-1px); }
.opcion-entrega.activa{ border-color: var(--tinta); background: #FFF; }
.opcion-entrega__izq{ display: grid; gap: 4px; text-align: left; }
.opcion-entrega__n{ font-size: 13px; }
.opcion-entrega__d{ font-size: 11.5px; color: var(--tinta-3); }
.radio{ width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--borde); position: relative; flex: none; }
.opcion-entrega.activa .radio{ border-color: var(--tinta); }
.opcion-entrega.activa .radio::after{ content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--tinta); }

/* Confirmación */
.confirmacion{ text-align: center; display: grid; gap: 30px; justify-items: center; max-width: 760px; margin-inline: auto; }
.sello{
  width: 92px; height: 92px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--acento);
  color: var(--acento);
  animation: selloEntra 1.1s var(--e-grande) both;
}
@keyframes selloEntra{ from{ transform: scale(.6) rotate(-12deg); opacity: 0; } }
.sello svg{ width: 34px; height: 34px; }
.sello svg path{ stroke-dasharray: 48; stroke-dashoffset: 48; animation: dibuja .9s var(--e-salida) forwards .5s; }
@keyframes dibuja{ to{ stroke-dashoffset: 0; } }
.pedido-num{
  font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  border: 1px solid var(--borde); padding: 14px 26px; display: inline-block;
}
.resumen-pedido{ width: 100%; text-align: left; display: grid; gap: 0; }

.estado{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--acento);
}
.estado i{ width: 6px; height: 6px; border-radius: 999px; background: var(--acento); animation: pulso 2.2s ease-in-out infinite; }
@keyframes pulso{ 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: .35; transform: scale(.8); } }

/* ---------- 20. Pie ---------- */
.pie{ background: var(--fondo-2); border-top: 1px solid var(--borde); margin-top: clamp(60px, 8vw, 130px); }
.pie__superior{
  display: grid; grid-template-columns: 1.4fr repeat(3, .8fr);
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(52px, 7vw, 104px);
}
.pie__marca{ display: grid; gap: 22px; align-content: start; }
.pie__col{ display: grid; gap: 13px; align-content: start; }
.pie__col h5{ font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 6px; font-weight: 400; font-family: var(--sans); }
.pie__col a{ font-size: 13px; color: var(--tinta-2); transition: color .3s ease, transform .4s var(--e-salida); display: inline-block; }
.pie__col a:hover{ color: var(--tinta); transform: translateX(4px); }
.boletin{ display: flex; gap: 0; border-bottom: 1px solid var(--borde); max-width: 400px; }
.boletin input{ flex: 1; border: 0; background: none; outline: none; padding: 13px 0; font-size: 13px; }
.boletin input::placeholder{ color: var(--tinta-3); }
.boletin button{ padding: 13px 4px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; transition: color .3s ease; }
.boletin button:hover{ color: var(--acento); }
.pie__inferior{
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-block: 26px; border-top: 1px solid var(--borde);
  font-size: 10.5px; letter-spacing: .14em; color: var(--tinta-3);
}
.monograma{ width: 40px; height: 40px; }

/* ---------- 21. Transición entre páginas ---------- */
#vista{ min-height: 60vh; }
.transicion{
  position: fixed; inset: 0; z-index: 450;
  background: var(--fondo);
  pointer-events: none;
  opacity: 0;
  transition: opacity .42s ease;
}
.transicion.activa{ opacity: 1; }
.vista-entra{ animation: vistaEntra .8s var(--e-salida); }
@keyframes vistaEntra{ from{ opacity: 0; transform: translateY(12px); } }

/* ---------- 22. Utilidades ---------- */
.solo-lectores{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.centrar-texto{ text-align: center; }
.justificar-centro{ justify-items: center; }
.grid{ display: grid; }
.g8{ gap: 8px; } .g12{ gap: 12px; } .g16{ gap: 16px; } .g20{ gap: 20px; } .g26{ gap: 26px; } .g34{ gap: 34px; }
.mt-s{ margin-top: 10px; } .mt-m{ margin-top: 26px; } .mt-l{ margin-top: clamp(34px, 4vw, 62px); }
.sin-margen{ margin: 0; }
.flex{ display: flex; } .centro{ align-items: center; } .entre{ justify-content: space-between; } .envolver{ flex-wrap: wrap; }

/* ---------- 23. Responsive ---------- */
@media (max-width: 1200px){
  .rejilla{ --cols: 3; }
  .pie__superior{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px){
  :root{ --header-h: 72px; }
  .nav--izquierda, .nav .solo-escritorio{ display: none; }
  .hamburguesa{ display: inline-flex; }
  .cabecera__fila{ grid-template-columns: 1fr auto 1fr; }
  .ficha{ grid-template-columns: 1fr; gap: 40px; }
  .detalle{ position: static; }
  .galeria{ grid-template-columns: 1fr; }
  .miniaturas{ position: static; grid-auto-flow: column; grid-auto-columns: 76px; justify-content: start; overflow-x: auto; padding-bottom: 4px; }
  .carrito{ grid-template-columns: 1fr; }
  .panel{ position: static; }
  .cifras{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .rejilla{ --cols: 2; }
  .duo{ grid-template-columns: 1fr; gap: 26px; }
  .duo--invertido > *:first-child{ order: 0; }
  .trio{ grid-template-columns: 1fr; }
  .trio--movil-dos{ grid-template-columns: 1fr 1fr; }
  .hero__scroll{ display: none; }
  .bolsa{ width: 100vw; }
  .avisos{ right: 14px; left: 14px; bottom: 14px; }
  .aviso{ justify-content: center; }
  .fila-carrito{ grid-template-columns: 92px 1fr; }
  .fila-carrito__precio{ grid-column: 2; text-align: left; }
  .pie__superior{ grid-template-columns: 1fr; }
  .barra-herramientas__interior{ flex-direction: column; align-items: stretch; gap: 12px; }
  .barra-herramientas__izq, .barra-herramientas__der{ justify-content: space-between; }
}
@media (max-width: 560px){
  .rejilla{ --cols: 2; gap: 14px 10px; }
  .rejilla--una-movil{ --cols: 1; }
  .producto__nombre{ font-size: 13.5px; }
  .accion-rapida{ font-size: 8.5px; padding: 13px 10px; letter-spacing: .18em; }
  .cifras{ grid-template-columns: 1fr; }
  .marca{ letter-spacing: .34em; text-indent: .34em; font-size: 17px; }
}

/* ---------- 24. Accesibilidad ---------- */
@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-revela]{ opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-revela="imagen"] img{ transform: none !important; opacity: 1 !important; }
  .palabras > span > i{ transform: none !important; }
}
:focus-visible{ outline: 1px solid var(--acento); outline-offset: 3px; }

/* =========================================================================
   25. TRATAMIENTO FOTOGRÁFICO DE LA CASA
   -------------------------------------------------------------------------
   Unifica fotografías de orígenes distintos en una sola dirección de arte:
   ligeramente desaturada, cálida y con un punto de contraste editorial.

   ¿Vas a poner tus propias fotos (por ejemplo, generadas con IA)?
   Añade la clase "sin-tratamiento" a la etiqueta <html> del index.html
   y las imágenes se mostrarán con su color original:
       <html lang="es" class="sin-tratamiento">
   ========================================================================= */
.hero__media img,
.campana__media img,
.figura img,
.producto__media img,
.tarjeta-cat img,
.journal__media img,
.mega__figura img,
.visor img,
.mini img,
.linea-bolsa__media img,
.fila-carrito__media img{
  filter: saturate(.68) contrast(1.04) sepia(.07) brightness(1.02);
  transition-property: transform, opacity, filter;
}
.producto:hover .producto__media img,
.figura--zoom:hover img,
.tarjeta-cat:hover img{ filter: saturate(.8) contrast(1.05) sepia(.05) brightness(1.03); }

html.sin-tratamiento .hero__media img,
html.sin-tratamiento .campana__media img,
html.sin-tratamiento .figura img,
html.sin-tratamiento .producto__media img,
html.sin-tratamiento .tarjeta-cat img,
html.sin-tratamiento .journal__media img,
html.sin-tratamiento .mega__figura img,
html.sin-tratamiento .visor img,
html.sin-tratamiento .mini img,
html.sin-tratamiento .linea-bolsa__media img,
html.sin-tratamiento .fila-carrito__media img{ filter: none; }