/* =============================================================
   MIJA · JOYERÍA
   Sistema de interfaz — "Resiliencia, la raíz del sol"
   -------------------------------------------------------------
   Proporción cromática obligatoria
   Raíz 52% · Arena 26% · Agave 18% · Oro 4%
   El oro es un acento, no un fondo.
   ============================================================= */

/* -------------------------------------------------------------
   00 · TIPOGRAFÍA PROPIA
   -------------------------------------------------------------
   Las dos familias viajan con el sitio, no desde Google.
   Son fuentes variables: un archivo cubre todos los pesos.
   Menos peticiones, sin terceros, y nada que bloquee el pintado.
   ------------------------------------------------------------- */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/cormorant-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/cormorant-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url('../fonts/montserrat-normal.woff2') format('woff2');
}

/* -------------------------------------------------------------
   01 · TOKENS
   ------------------------------------------------------------- */
:root{
  /* Color */
  /* El oro del manual. Acento: filetes, números, detalles, y
     todo lo que va sobre superficie oscura. */
  --oro:#C9A24D;
  --oro-claro:#D9B978;   /* sobre Agave */
  --oro-hondo:#A8823A;   /* estados de paso */
  /* Dos profundidades más para lo que sí lleva texto. Sin ellas
     el oro del manual da 2.2:1 sobre Raíz y no se puede leer.
     Mismo tono, más hondo: sigue siendo oro. */
  --oro-texto:#7E6026;   /* texto chico sobre Raíz (5.38:1) y Arena (4.51:1) */
  --oro-boton:#8A6A2A;   /* relleno del botón primario, texto blanco (5.02:1) */
  --oro-boton-hondo:#6E5320;
  --arena:#E8E1D6;
  --arena-hondo:#DCD3C4;
  --raiz:#F7F5F2;
  --agave:#37534B;
  --agave-hondo:#2A4139;
  --tinta:#37534B;
  /* Secundario armonizado con el Agave nuevo. El manual traía
     #5B5A54, un gris cálido que venía del Agave anterior. */
  --tinta-suave:#5A6660;
  --linea:rgba(55,83,75,.14);
  --linea-fuerte:rgba(55,83,75,.28);
  --linea-oro:rgba(201,162,77,.42);
  --linea-clara:rgba(247,245,242,.18);

  /* Tipografía */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display:clamp(3.1rem, 11.5vw, 10rem);
  --fs-h1:clamp(2.5rem, 7vw, 5.8rem);
  --fs-h2:clamp(1.95rem, 4.6vw, 3.7rem);
  --fs-h3:clamp(1.45rem, 2.7vw, 2.2rem);
  --fs-lead:clamp(1.22rem, 2.1vw, 1.72rem);
  --fs-body:clamp(.94rem, .55vw + .78rem, 1.04rem);
  --fs-small:.83rem;
  --fs-label:.655rem;

  --ls-label:.34em;
  --ls-boton:.28em;

  /* Ritmo espacial */
  --mx:clamp(1.4rem, 6vw, 7rem);
  --seccion:clamp(5.5rem, 12vw, 12rem);
  --seccion-corta:clamp(3.5rem, 7vw, 7rem);
  /* Cuánto baja una imagen dentro del bloque siguiente. Primero
     tiene que descontar el aire del bloque, que va debajo de ella;
     lo que sobre es lo que de verdad cruza. */
  --cruce:calc(var(--seccion) + clamp(2.5rem, 5vw, 6rem));
  --ancho:1240px;
  --ancho-texto:64ch;
  --nav-h:76px;

  /* Movimiento — lento, nunca nervioso */
  --e-salida:cubic-bezier(.22,1,.36,1);
  --e-suave:cubic-bezier(.4,0,.2,1);
  --e-velo:cubic-bezier(.76,0,.24,1);
  --t-1:.45s;
  --t-2:.9s;
  --t-3:1.5s;

  --z-grano:900;
  --z-nav:700;
  --z-menu:800;
  --z-bolsa:850;
  --z-velo:1000;
  --z-umbral:1100;
}

/* -------------------------------------------------------------
   02 · BASE
   ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scrollbar-width:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body{
  background:var(--raiz);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.75;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
body.esta-bloqueado{overflow:hidden}

::selection{background:var(--oro-boton);color:#fff}

/* La barra de desplazamiento no existe. El hilo de oro del margen
   izquierdo es quien dice dónde vamos. */
::-webkit-scrollbar{width:0;height:0;display:none}

img,video,svg{display:block;max-width:100%}
/* <picture> es sólo el envoltorio de <img>: no debe crear una caja
   propia distinta. Sí necesita ser caja (no display:contents) para
   que el telón de revelado tenga sobre qué recortar. */
picture{display:block;width:100%;height:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.06;
  letter-spacing:.005em;
  color:var(--tinta);
  text-wrap:balance;   /* el corte de renglón nunca deja una palabra huérfana */
}
p{max-width:var(--ancho-texto);color:var(--tinta-suave);text-wrap:pretty}
strong{font-weight:500;color:var(--tinta)}
em{font-style:italic}

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

/* -------------------------------------------------------------
   03 · MICROTIPOGRAFÍA
   ------------------------------------------------------------- */
.serif{font-family:var(--serif)}
.italica{font-family:var(--serif);font-style:italic;font-weight:300}

.etiqueta{
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--oro-texto);
  line-height:1.6;
}
/* Sobre Agave el oro claro sí alcanza (4.46:1) */
.superficie-agave .etiqueta,
.pie .etiqueta,
.portada .etiqueta{color:var(--oro-claro)}
.etiqueta--tinta{color:var(--agave)}
.etiqueta--suave{color:var(--tinta-suave)}

.display{font-family:var(--serif);font-size:var(--fs-display);line-height:.92;font-weight:300}
.t1{font-size:var(--fs-h1)}
.t2{font-size:var(--fs-h2)}
.t3{font-size:var(--fs-h3);line-height:1.2}

.lead{
  font-family:var(--serif);
  font-weight:300;
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--tinta);
  max-width:36ch;
}
.pequeno{font-size:var(--fs-small);line-height:1.7}
.numero{font-family:var(--serif);font-style:italic;color:var(--oro-texto)}

/* Cifras tabulares para precios */
.precio{font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* Referencia orientativa: siempre secundaria. El precio de cobro
   es el otro, y así debe leerse la jerarquía. */
.precio-ref{
  display:block;
  font-size:.72rem;letter-spacing:.06em;
  color:var(--tinta-suave);opacity:.85;
  font-variant-numeric:tabular-nums;
  margin-top:.25rem;max-width:none;
}
.precio-ref[hidden]{display:none}
.precio-ref--bolsa{text-align:right;margin-top:-.2rem;margin-bottom:.6rem}
.pieza-tarjeta__precio .precio-ref{text-align:right}

/* -------------------------------------------------------------
   04 · LAYOUT
   ------------------------------------------------------------- */
.envoltura{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--mx)}
.envoltura--ancha{max-width:1520px}
.angosta{max-width:720px}
.seccion{padding-block:var(--seccion);position:relative}
.seccion--corta{padding-block:var(--seccion-corta)}

.superficie-arena{background:var(--arena)}
/* El verde es ahora un espacio con luz dentro (ver «EL HAZ»,
   más abajo). Recorta porque las capas de luz se salen por los
   bordes a propósito, para poder moverse sin descubrirlos.
   El oro sube de tono aquí: el haz aclara el fondo y, con el oro de
   antes, la etiqueta se quedaba en 3.9 de contraste. Así vuelve a
   pasar AA con el haz encendido. */
.superficie-agave{
  background:var(--agave);color:var(--raiz);
  position:relative;overflow:hidden;
  --oro-claro:#E6CD96;
}
/* El contenido va POR ENCIMA de la luz, nunca debajo: así la
   atmósfera tiñe el fondo y jamás las letras. */
.superficie-agave > *{position:relative;z-index:1}
.superficie-agave h1,.superficie-agave h2,.superficie-agave h3,.superficie-agave h4{color:var(--raiz)}
.superficie-agave p{color:rgba(247,245,242,.82)}
.superficie-agave .lead{color:var(--raiz)}
.superficie-agave .etiqueta--tinta{color:var(--oro-claro)}
.superficie-agave hr,.superficie-agave .filete{background:var(--linea-clara)}

.rejilla{display:grid;gap:clamp(1.6rem,3.2vw,3rem)}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.division{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.division--texto{grid-template-columns:1fr 1fr}
.division--arriba{align-items:start}

@media(max-width:900px){
  .r3,.r4{grid-template-columns:repeat(2,1fr)}
  .division,.division--texto{grid-template-columns:1fr;gap:2.4rem}
}
@media(max-width:560px){
  .r2,.r3,.r4{grid-template-columns:1fr}
}

/* -------------------------------------------------------------
   05 · FILETES Y PUNTUACIÓN SILENCIOSA
   ------------------------------------------------------------- */
.filete{height:1px;background:var(--linea);border:0;width:100%}
.filete-oro{height:1px;background:var(--oro);border:0;width:56px}

.encabezado-fila{
  display:flex;align-items:center;gap:1.6rem;
  margin-bottom:clamp(2rem,4vw,3.4rem);
}
.encabezado-fila .filete{flex:1}

/* Filete con el módulo maestro al centro */
.divisor-modulo{
  display:flex;align-items:center;gap:1.4rem;
  color:var(--oro);
}
.divisor-modulo::before,.divisor-modulo::after{
  content:"";flex:1;height:1px;background:var(--linea-oro)
}
.divisor-modulo svg{width:auto;height:30px;flex:none}

/* -------------------------------------------------------------
   06 · BOTONES — tres jerarquías, esquinas rectas, sin sombra
   ------------------------------------------------------------- */
.boton{
  --bg:transparent; --fg:var(--tinta); --bd:var(--agave);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.9rem;
  padding:1.05rem 2.2rem;
  font-family:var(--sans);font-weight:400;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-boton);
  text-transform:uppercase;
  color:var(--fg);
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:0;
  overflow:hidden;
  cursor:pointer;
  transition:color var(--t-1) var(--e-suave), border-color var(--t-1) var(--e-suave);
  isolation:isolate;
}
.boton > span{position:relative;z-index:2}
.boton::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--agave);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .7s var(--e-salida);
}
.boton:hover::before{transform:scaleY(1)}
.boton:hover{color:var(--raiz)}

/* Primario — el oro */
.boton--oro{--bg:var(--oro-boton);--fg:#fff;--bd:var(--oro-boton)}
.boton--oro::before{background:var(--oro-boton-hondo)}
.boton--oro:hover{color:#fff;border-color:var(--oro-boton-hondo)}

/* Terciario — navegación de página */
.boton--agave{--bg:var(--agave);--fg:var(--raiz);--bd:var(--agave)}
.boton--agave::before{background:var(--oro)}
.boton--agave:hover{color:#fff;border-color:var(--oro)}

.boton--claro{--bd:var(--linea-clara);--fg:var(--raiz)}
.boton--claro::before{background:var(--raiz)}
.boton--claro:hover{color:var(--agave);border-color:var(--raiz)}

.boton--bloque{width:100%}
.boton[disabled]{opacity:.4;pointer-events:none}

/* Enlace con filete que crece */
.enlace{
  position:relative;display:inline-block;
  font-size:var(--fs-label);letter-spacing:var(--ls-boton);
  text-transform:uppercase;color:var(--tinta);
  padding-bottom:.55rem;
}
.enlace::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--oro);transform:scaleX(0);transform-origin:right;
  transition:transform .8s var(--e-salida);
}
.enlace:hover::after{transform:scaleX(1);transform-origin:left}
.superficie-agave .enlace{color:var(--raiz)}

/* -------------------------------------------------------------
   07 · GRANO Y LUZ AMBIENTE
   La luz es la primera decisión. Nunca el color.
   ------------------------------------------------------------- */
.grano{
  position:fixed;inset:-4%;z-index:var(--z-grano);
  pointer-events:none;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  animation:grano-deriva 8s steps(6) infinite;
}
@keyframes grano-deriva{
  0%{transform:translate(0,0)}   20%{transform:translate(-1.5%,1%)}
  40%{transform:translate(1%,-1.5%)} 60%{transform:translate(-1%,-1%)}
  80%{transform:translate(1.5%,1.5%)} 100%{transform:translate(0,0)}
}

/* Luz que respira con el scroll — el sol que atraviesa el día */
.luz-ambiente{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(78% 54% at 50% calc(-8% + var(--sol,0) * 122%),
      rgba(201,162,77,.085), rgba(201,162,77,0) 70%);
  transition:opacity 1s linear;
}

/* -------------------------------------------------------------
   08 · LA RAÍZ — hilo que crece con el scroll
   ------------------------------------------------------------- */
.raiz-hilo{
  position:fixed;left:calc(var(--mx) * .42);top:0;bottom:0;
  width:1px;z-index:var(--z-nav);pointer-events:none;
  display:none;
}
@media(min-width:1180px){.raiz-hilo{display:block}}
.raiz-hilo::before{
  content:"";position:absolute;inset:0;background:var(--linea);opacity:.5
}
.raiz-hilo__llena{
  position:absolute;left:0;top:0;width:1px;height:100%;
  transform-origin:50% 0;
  transform:scaleY(var(--avance,0));
  background:linear-gradient(180deg,rgba(201,162,77,0) 0%,var(--oro) 12%,var(--oro) 100%);
}
.raiz-hilo__brote{
  position:absolute;left:50%;top:0;
  width:5px;height:5px;margin-left:-2.5px;margin-top:-2.5px;
  transform:translateY(calc(var(--avance,0) * 100vh));
  border-radius:50%;background:var(--oro);
  box-shadow:0 0 0 4px rgba(201,162,77,.14);
}

/* -------------------------------------------------------------
   09 · CURSOR — un anillo de oro que se vuelve hoja
   ------------------------------------------------------------- */
/* Un punto de tinta que se calienta a oro cuando algo se puede tocar.
   Sin mix-blend-mode: la mezcla obligaba a recomponer la pantalla
   entera en cada cuadro y hacía que el anillo desapareciera sobre
   los tonos medios. El color se decide, no se calcula. */
.cursor{
  position:fixed;top:0;left:0;z-index:1200;pointer-events:none;
  width:20px;height:20px;margin:-10px 0 0 -10px;
  color:var(--tinta);
  opacity:0;
  transition:opacity .3s var(--e-suave), color .4s var(--e-suave);
  will-change:transform;
}
.cursor__anillo{
  position:absolute;inset:0;
  border:1px solid currentColor;border-radius:50%;opacity:.4;
  transition:transform .45s var(--e-salida), opacity .3s var(--e-suave);
}
.cursor__punto{
  position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  background:currentColor;border-radius:50%;opacity:.9;
  transition:transform .45s var(--e-salida), opacity .3s;
}
/* El ojo aparece sobre lo que se puede mirar. Antes había ahí un
   rótulo —«VER LA PIEZA»—; una palabra en el puntero pesa mucho y
   además había que traducirla. El ojo lo dice en cualquier idioma. */
.cursor__ojo{
  position:absolute;left:50%;top:50%;
  width:34px;margin:-11px 0 0 -17px;
  color:currentColor;opacity:0;
  transform:scale(.72);transform-origin:center;
  transition:opacity .35s var(--e-suave), transform .55s var(--e-salida);
}
.cursor__ojo svg{display:block;width:100%;height:auto;overflow:visible}
html.tiene-cursor .cursor{opacity:1}
html.tiene-cursor a,html.tiene-cursor button,html.tiene-cursor [data-cursor]{cursor:none}
html.tiene-cursor body{cursor:none}
/* Sobre agave, pie y portada la tinta no se ve: se aclara */
html.cursor-claro .cursor{color:var(--arena)}
.cursor.esta-activo,.cursor.tiene-ojo{color:var(--oro-boton)}
html.cursor-claro .cursor.esta-activo,
html.cursor-claro .cursor.tiene-ojo{color:var(--oro-claro)}
.cursor.esta-activo .cursor__anillo{transform:scale(1.5);opacity:.75}
.cursor.esta-activo .cursor__punto{transform:scale(.35);opacity:.45}
/* El anillo se abre y se deshace al mismo tiempo que el ojo llega:
   no conviven, se relevan. */
.cursor.tiene-ojo .cursor__anillo{transform:scale(2.4);opacity:0}
.cursor.tiene-ojo .cursor__punto{transform:scale(0);opacity:0}
.cursor.tiene-ojo .cursor__ojo{opacity:1;transform:scale(1)}
.cursor.esta-oculto{opacity:0!important}
@media(hover:none),(pointer:coarse){.cursor{display:none!important}}

/* -------------------------------------------------------------
   10 · EL UMBRAL — pantalla de entrada
   El agave se dibuja. Después, la hoja se abre.
   ------------------------------------------------------------- */
.umbral{
  position:fixed;inset:0;z-index:var(--z-umbral);
  background:var(--raiz);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.2rem;
}
/* El isotipo se llena de abajo hacia arriba: de la tierra al oro */
.umbral__marca{
  width:clamp(56px,5.4vw,82px);height:auto;color:var(--oro);
  clip-path:inset(100% 0 0 0);
  animation:brotar 1.75s cubic-bezier(.22,1,.36,1) .12s forwards;
}
@keyframes brotar{to{clip-path:inset(0 0 0 0)}}

.umbral__pie{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  opacity:0;animation:aparecer .9s var(--e-salida) 1.1s forwards;
}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.umbral__linea{
  width:110px;height:1px;background:var(--linea);position:relative;overflow:hidden;
}
.umbral__linea::after{
  content:"";position:absolute;inset:0;background:var(--oro);
  transform:scaleX(var(--carga,0));transform-origin:left;
  transition:transform .5s var(--e-suave);
}
.umbral.se-va{
  opacity:0;pointer-events:none;
  transition:opacity .9s var(--e-suave) .25s;
}
html.umbral-listo .umbral{display:none}

/* -------------------------------------------------------------
   11 · EL VELO — transición entre páginas (iris de hoja)
   ------------------------------------------------------------- */
.velo{
  position:fixed;inset:0;z-index:var(--z-velo);
  background:var(--agave);
  pointer-events:none;
  -webkit-clip-path:url(#mija-hoja-recorte);
  clip-path:url(#mija-hoja-recorte);
  display:flex;align-items:center;justify-content:center;
}
.velo__marca{
  width:40px;height:auto;color:var(--oro);opacity:0;
  transition:opacity .5s var(--e-suave);
}
.velo.esta-cerrando .velo__marca{opacity:1;transition-delay:.16s}
#mija-hoja-camino{
  transform-origin:.5px .5px;
  transform:scale(0);
  transition:transform .6s var(--e-velo);
}
.velo.esta-cerrando #mija-hoja-camino{transform:scale(4.2)}
.svg-defs{position:fixed;width:0;height:0;overflow:hidden;pointer-events:none}

/* -------------------------------------------------------------
   12 · NAVEGACIÓN
   ------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-inline:var(--mx);
  transition:background .7s var(--e-suave), border-color .7s var(--e-suave), transform .7s var(--e-salida);
  border-bottom:1px solid transparent;
  color:var(--tinta);
}
.nav.sobre-media{color:var(--raiz)}
.nav.esta-fija{
  background:rgba(247,245,242,.86);
  backdrop-filter:blur(9px) saturate(1.06);
  -webkit-backdrop-filter:blur(9px) saturate(1.06);
  border-bottom-color:var(--linea);
  color:var(--tinta);
}
.nav.esta-escondida{transform:translateY(-100%)}

.nav__grupo{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.nav__grupo--fin{justify-content:flex-end}
.nav__marca{
  justify-self:center;display:block;line-height:0;color:currentColor;
}
.nav__logo{
  width:clamp(76px,6.6vw,98px);height:auto;
  transition:opacity .5s var(--e-suave);
}
.nav__marca:hover .nav__logo{opacity:.72}
.nav__enlace{
  font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:currentColor;
  position:relative;padding-block:.35rem;
  opacity:.86;transition:opacity .4s var(--e-suave);
}
.nav__enlace::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .7s var(--e-salida);
}
.nav__enlace:hover{opacity:1}
.nav__enlace:hover::after,.nav__enlace[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
@media(max-width:860px){.nav__enlace--oculto{display:none}}

.nav__icono{
  width:34px;height:34px;display:grid;place-items:center;color:currentColor;
  transition:opacity .4s var(--e-suave);opacity:.86;
}
.nav__icono:hover{opacity:1}
.nav__icono svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.1}

/* Un solo enlace: lleva al otro idioma. No hace falta un menú. */
.nav__idioma{
  font-size:var(--fs-label);letter-spacing:.2em;
  color:currentColor;opacity:.6;
  padding:.4rem .1rem;position:relative;
  transition:opacity .4s var(--e-suave);
}
.nav__idioma::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .7s var(--e-salida);
}
.nav__idioma:hover{opacity:1}
.nav__idioma:hover::after{transform:scaleX(1);transform-origin:left}

.nav__bolsa{position:relative;display:flex;align-items:center;gap:.5rem}
.nav__cuenta{
  min-width:16px;font-size:.6rem;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--oro);
  opacity:0;transform:translateY(2px);
  transition:opacity .4s var(--e-suave),transform .4s var(--e-salida);
}
.nav__cuenta.tiene-piezas{opacity:1;transform:none}

/* Botón menú — tres trazos que son tres hojas */
.menu-boton{display:flex;align-items:center;gap:.7rem;color:currentColor}
.menu-boton__trazos{width:20px;display:grid;gap:4px}
.menu-boton__trazos i{display:block;height:1px;background:currentColor;transition:transform .6s var(--e-salida),opacity .4s}
.menu-boton__trazos i:nth-child(2){width:70%;justify-self:end}
.menu-boton:hover .menu-boton__trazos i:nth-child(2){width:100%}
.menu-boton__texto{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;display:grid}
.menu-boton__texto > span{grid-area:1/1;transition:opacity .45s var(--e-suave), transform .55s var(--e-salida)}
.menu-boton__cerrar{opacity:0;transform:translateY(4px)}
@media(max-width:640px){.menu-boton__texto{display:none}}

/* Abierto: las mismas tres barras, en el mismo lugar, se cruzan.
   El trazo del centro se retira; los otros dos giran apenas. */
html.menu-abierto .menu-boton__trazos i:nth-child(1){transform:translateY(5px) rotate(45deg)}
html.menu-abierto .menu-boton__trazos i:nth-child(2){opacity:0;transform:scaleX(.2)}
html.menu-abierto .menu-boton__trazos i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
html.menu-abierto .menu-boton__abrir{opacity:0;transform:translateY(-4px)}
html.menu-abierto .menu-boton__cerrar{opacity:1;transform:none}

/* Con el menú abierto —y mientras se cierra— la barra queda por
   encima, sin fondo propio: el botón que abrió es el mismo que
   cierra, y se le ve volver a ser tres líneas. */
html:is(.menu-abierto,.menu-cerrando) .nav{
  z-index:calc(var(--z-menu) + 1);
  background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:var(--tinta);transform:none;
}
.nav__enlace--oculto,.nav__marca{transition:opacity .4s var(--e-suave), color .5s var(--e-suave)}
html:is(.menu-abierto,.menu-cerrando) .nav__enlace--oculto{opacity:0;pointer-events:none}
/* El logotipo caería justo sobre el corte entre texto y fotografía:
   se retira mientras el menú está abierto. A la derecha, sobre la
   foto, idioma y bolsa pasan a claro. */
@media(min-width:901px){
  html:is(.menu-abierto,.menu-cerrando) .nav__marca{opacity:0;pointer-events:none}
  html:is(.menu-abierto,.menu-cerrando) .nav__grupo--fin{color:var(--raiz)}
}

/* -------------------------------------------------------------
   13 · MENÚ COMPLETO
   ------------------------------------------------------------- */
.menu{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:var(--raiz);
  display:grid;grid-template-columns:1.05fr .95fr;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .78s var(--e-velo);
  pointer-events:none;
}
.menu.esta-abierto{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu__izq{
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 2rem) var(--mx) 3rem;
  overflow-y:auto;
}
/* Dos márgenes automáticos reparten el espacio libre a partes
   iguales: arriba de la lista y entre la lista y el pie. El blanco
   del medio queda en la mitad de lo que era. */
.menu__lista{display:flex;flex-direction:column;gap:.15rem;margin-top:auto;margin-bottom:1.5rem}
.menu__item{overflow:hidden}
.menu__enlace{
  display:grid;grid-template-columns:3.2ch 1fr;align-items:baseline;
  font-family:var(--serif);font-weight:300;
  /* El tamaño original. El tope por alto (7vh) sólo actúa en
     pantallas bajas, para que las siete entradas quepan. */
  font-size:clamp(2rem,min(5.4vw,7vh),4.1rem);line-height:1.16;
  color:var(--tinta);
  transform:translateY(105%);
  transition:transform .95s var(--e-salida), color .5s var(--e-suave);
  transition-delay:calc(var(--i,0) * 55ms);
  text-wrap:balance;
}
.menu.esta-abierto .menu__enlace{transform:translateY(0)}
.menu__enlace:hover{color:var(--oro)}
.menu__enlace .num{
  font-size:.72rem;font-family:var(--sans);font-weight:300;
  color:var(--oro-texto);letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  align-self:start;padding-top:.9em;
}
/* Atelier y Seguir: dos columnas que arrancan a la misma altura */
.menu__pie{
  margin-top:auto;padding-top:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.6rem clamp(1.6rem,4vw,4rem);align-items:start;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--e-suave) .45s, transform .7s var(--e-salida) .45s;
}
.menu.esta-abierto .menu__pie{opacity:1;transform:none}
/* El correo es una sola palabra larga: se le permite partirse
   antes que empujar la columna fuera de la pantalla. */
.menu__pie a{overflow-wrap:anywhere}
@media(max-width:480px){.menu__pie{grid-template-columns:1fr}}

.menu__der{
  position:relative;overflow:hidden;background:var(--arena);
}
.menu__media{
  position:absolute;inset:0;opacity:0;
  transition:opacity .9s var(--e-suave);
}
.menu__media.esta-visible{opacity:1}
.menu__media video{display:block;width:100%;height:100%;object-fit:cover}
.menu__pie-media{
  position:absolute;left:0;right:0;bottom:0;padding:2rem;
  background:linear-gradient(0deg,rgba(55,83,75,.5),transparent);
  color:var(--raiz);
}
@media(max-width:900px){
  .menu{grid-template-columns:1fr}
  .menu__der{display:none}
}

/* -------------------------------------------------------------
   14 · LA BOLSA — "Tu selección"
   ------------------------------------------------------------- */
.bolsa-fondo{
  position:fixed;inset:0;z-index:var(--z-bolsa);
  background:rgba(55,83,75,.32);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .7s var(--e-suave);
}
.bolsa-fondo.esta-abierto{opacity:1;pointer-events:auto}

.bolsa{
  position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--z-bolsa) + 1);
  width:min(460px,100vw);
  background:var(--raiz);
  display:flex;flex-direction:column;
  transform:translateX(101%);
  transition:transform .62s var(--e-velo);
  border-left:1px solid var(--linea);
}
.bolsa.esta-abierta{transform:none}
.bolsa__cabeza{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.8rem var(--bx,2rem) 1.4rem;
  border-bottom:1px solid var(--linea);
}
.bolsa__titulo{font-family:var(--serif);font-size:1.5rem}
.bolsa__cerrar{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--tinta-suave)}
.bolsa__cerrar:hover{color:var(--oro)}
.bolsa__cuerpo{flex:1;overflow-y:auto;padding:0 var(--bx,2rem);scrollbar-width:none}
.bolsa__vacia{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.4rem;text-align:center;padding-block:3rem;
}
.bolsa__vacia svg{width:34px;color:var(--oro);opacity:.55}

.linea-bolsa{
  display:grid;grid-template-columns:74px 1fr;gap:1.2rem;
  padding-block:1.5rem;border-bottom:1px solid var(--linea);
  animation:linea-entra .7s var(--e-salida) both;
}
@keyframes linea-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.linea-bolsa__img{aspect-ratio:3/4;background:var(--arena);overflow:hidden}
.linea-bolsa__img img{width:100%;height:100%;object-fit:cover}
.linea-bolsa__nombre{font-family:var(--serif);font-size:1.12rem;line-height:1.25}
.linea-bolsa__var{font-size:.72rem;color:var(--tinta-suave);letter-spacing:.08em;margin-top:.25rem}
.linea-bolsa__fila{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem;gap:1rem}
.contador{display:flex;align-items:center;border:1px solid var(--linea);}
.contador button{width:28px;height:28px;display:grid;place-items:center;font-size:.9rem;color:var(--tinta-suave);transition:color .3s}
.contador button:hover{color:var(--oro)}
.contador span{min-width:26px;text-align:center;font-size:.78rem;font-variant-numeric:tabular-nums}
.linea-bolsa__quitar{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);transition:color .3s}
.linea-bolsa__quitar:hover{color:var(--oro-hondo)}

.bolsa__pie{padding:1.6rem var(--bx,2rem) 2rem;border-top:1px solid var(--linea);background:var(--raiz)}
.bolsa__total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.bolsa__total span:first-child{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--tinta-suave)}
.bolsa__total span:last-child{font-family:var(--serif);font-size:1.5rem}
.bolsa__nota{font-size:.7rem;color:var(--tinta-suave);line-height:1.6;margin-bottom:1.3rem;max-width:none}
.bolsa__sello{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:1.1rem;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-suave);
}
.bolsa__sello svg{width:13px;stroke:currentColor;fill:none;stroke-width:1.2}

/* -------------------------------------------------------------
   15 · REVELACIONES — el movimiento nunca grita
   ------------------------------------------------------------- */
[data-revelar]{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--e-suave), transform .8s var(--e-salida);
  transition-delay:calc(var(--i,0) * 55ms);
}
[data-revelar].esta-dentro{opacity:1;transform:none}

/* El telón se corta sobre los hijos, nunca sobre el elemento
   observado: un clip-path deja su rectángulo en cero y el
   IntersectionObserver ya no lo vería nunca entrar. */
[data-revelar="mascara"]{opacity:1;transform:none}
[data-revelar="mascara"] > *{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.02s var(--e-velo);
  transition-delay:calc(var(--i,0) * 70ms);
}
[data-revelar="mascara"] > * + *{
  transition-delay:calc(var(--i,0) * 70ms + 90ms);
}
[data-revelar="mascara"].esta-dentro > *{clip-path:inset(0 0 0 0)}

[data-revelar="crecer"]{
  opacity:1;transform:none;
  transform:scaleX(0);transform-origin:left;
  transition:transform .95s var(--e-velo);
  transition-delay:calc(var(--i,0) * 55ms);
}
[data-revelar="crecer"].esta-dentro{transform:scaleX(1)}

/* Líneas de texto que suben desde su propio corte */
.lineas{display:block}
/* El corte de cada renglón terminaba en la línea base y se comía
   los trazos que bajan (g, p, y). El relleno les da aire; el margen
   negativo lo devuelve para que el interlineado no cambie. */
.lineas__linea{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lineas__linea > span{
  display:block;
  transform:translateY(118%);
  transition:transform .82s var(--e-salida);
  transition-delay:calc(var(--i,0) * 52ms);
}
.lineas.esta-dentro .lineas__linea > span{transform:translateY(0)}
.lineas.sin-animacion .lineas__linea > span{transition:none}

/* Imagen que se asienta */
.media-parallax{overflow:hidden}
.media-parallax img,.media-parallax video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12) translateY(var(--par,0px));
  transition:transform .1s linear;
  will-change:transform;
}

/* Carrusel: los cuadros apilados en el mismo marco. El que llega se
   funde encima y el que se va sigue entero debajo hasta quedar
   cubierto — así nunca se asoma el fondo entre los dos. Al llegar,
   además, se asienta: de un poco más cerca a su sitio. */
.carrusel{position:relative;width:100%;height:100%}
.carrusel__cuadro{
  position:absolute;inset:0;display:block;
  opacity:0;transform:scale(1.045);
  transition:opacity 1s var(--e-suave), transform 2.4s var(--e-salida);
}
.carrusel__cuadro.esta-activo{opacity:1;transform:none;z-index:2}
.carrusel__cuadro.es-previo{opacity:1;transform:none;z-index:1;transition:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-revelar]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-revelar="mascara"] > *{clip-path:none!important}
  .lineas__linea > span{transform:none!important}
  .grano{display:none}
  .media-parallax img,.media-parallax video{transform:none}
}

/* -------------------------------------------------------------
   14b · EL HAZ — luz cálida entrando de canto en los bloques verdes
   -------------------------------------------------------------
   Una banda de luz cruza el bloque oscuro en diagonal, y se mueve
   mientras lo atraviesas (el movimiento está en «EL SCROLL COMO
   RELOJ», más abajo).

   El punto de entrada cae fuera del encuadre: se ve el recorrido de
   la luz, nunca su origen. Una luz cuyo foco se ve deja de ser
   atmósfera y pasa a ser un objeto.

   El color es blanco cálido, nunca oro: el oro es lo que la luz
   revela en las superficies, no la luz misma.

   La intensidad —del orden del 7% en el núcleo— no es libre: es la
   que deja el texto claro sobre verde por encima de 4.5 de
   contraste con el haz encima. Subirla no cambia el ambiente:
   cambia la legibilidad.
   ------------------------------------------------------------- */
/* La caída de luz del sistema original no va aquí. Existe para que
   un haz se vea sobre papel casi blanco, donde no hay margen para
   brillar más y sólo queda oscurecer el entorno. Sobre el verde ese
   problema no existe: el haz se ve por sí solo, y una sombra extra
   sólo restaría contraste al texto.

   El haz se apaga antes de llegar al borde de abajo. Si llegara,
   el pie —que es del mismo verde y no lleva luz— se vería como otro
   bloque distinto justo debajo. Así el bloque verde y el pie siguen
   siendo un solo campo. */
.superficie-agave::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  /* Sobresale de la caja para poder moverse sin descubrir sus
     bordes; el bloque recorta lo que sobra. */
  inset:-20% -12%;
  background:linear-gradient(205deg,
    transparent 22%,
    rgb(255 224 199 / .013) 33%,
    rgb(255 224 199 / .042) 43%,
    rgb(255 224 199 / .068) 50%,
    rgb(255 224 199 / .042) 57%,
    rgb(255 224 199 / .013) 67%,
    transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 10%, #000 32%, #000 56%, rgb(0 0 0 / .38) 72%, transparent 82%);
  mask-image:linear-gradient(to bottom,
    transparent 10%, #000 32%, #000 56%, rgb(0 0 0 / .38) 72%, transparent 82%);
}

/* -------------------------------------------------------------
   15a · LO QUE CRUZA EL BORDE
   -------------------------------------------------------------
   Dos bloques dejan de leerse como dos en cuanto un mismo objeto
   pertenece a los dos. La imagen se sale por abajo de su bloque y
   termina dentro del siguiente: el ojo ya no puede poner la frontera
   en ningún sitio, porque hay algo que la atraviesa.

   El margen negativo encoge lo que la imagen aporta a su fila, así
   que el bloque se cierra antes y la imagen sobra hacia abajo. El
   z-index es lo que la deja por encima: sin él, el fondo del bloque
   siguiente —que se pinta después— la taparía.

   Sólo en pantallas anchas. Al apilarse en el teléfono, la columna
   de la imagen queda justo encima del texto que sigue y caería sobre
   él en vez de sobre un fondo.
   ------------------------------------------------------------- */
/* La imagen que acompaña a un texto: nace en el primer renglón y
   termina en el último. No lleva proporción propia en escritorio —
   la altura se la da el texto de al lado, así que los dos bloques
   empiezan y acaban en la misma línea.

   Apilada en el teléfono no hay texto al lado del que tomar la
   altura, y sus cuadros van en posición absoluta: sin proporción
   la figura quedaría en cero. De ahí el cuadrado. */
.acompana{aspect-ratio:1/1}
@media(min-width:901px){
  .acompana{aspect-ratio:auto;align-self:stretch}
}

@media(min-width:901px){
  .cruza{
    position:relative;z-index:1;
    /* Anclada abajo a propósito: si se quedara centrada, la mitad
       del margen negativo se iría hacia arriba y cada imagen
       cruzaría una cantidad distinta según lo largo que fuera el
       texto de al lado. Anclada, lo que baja es exacto. */
    align-self:end;
    margin-bottom:calc(var(--cruce) * -1);
  }
}

/* -------------------------------------------------------------
   15b · EL SCROLL COMO RELOJ
   -------------------------------------------------------------
   Arriba, cada cosa se dispara una vez al entrar y termina sola: la
   página va por su cuenta. Aquí el reloj de la animación deja de ser
   el tiempo y pasa a ser la posición — bajas y avanza, te detienes y
   se detiene, subes y vuelve atrás. Eso es lo que se siente como que
   la página responde a la mano.

   Y el recorrido no acaba al asentarse: lo que dejas atrás se aleja
   un poco mientras se va. Entrar es la mitad del efecto; salir es la
   otra, y es la que casi nadie hace.

   Todo ocurre en «transform» y «opacity», las dos cosas que el
   navegador mueve sin volver a dibujar. Sin librería y sin un solo
   oyente de scroll nuevo.

   Si el navegador no entiende estas líneas de tiempo, no pasa nada:
   se queda el sistema de arriba, que sigue intacto abajo del
   @supports y es el que sostiene la página.
   ------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){

    /* El reposo va del 26% al 82%: dentro de esa franja la pieza se
       queda quieta y se lee. Fuera, llega o se va. */
    @keyframes cruzar{
      0%   {opacity:0;   transform:translateY(34px)}
      26%  {opacity:1;   transform:translateY(0)}
      82%  {opacity:1;   transform:translateY(0)}
      100% {opacity:.32; transform:translateY(-26px)}
    }
    @keyframes cruzar-linea{
      0%   {opacity:1;   transform:translateY(118%)}
      26%  {opacity:1;   transform:translateY(0)}
      82%  {opacity:1;   transform:translateY(0)}
      100% {opacity:.32; transform:translateY(-22%)}
    }

    /* Quedan fuera:
       · la portada, que ya entra sola al cargar;
       · las máscaras y el «crecer», que animan recorte y escala —
         recortar cuesta volver a dibujar, y a sesenta veces por
         segundo eso sí se nota;
       · el índice de Firma, que está pegado al borde superior: al
         no moverse respecto a la ventana su progreso se congelaría
         y se quedaría a medio camino para siempre. */
    main .seccion [data-revelar]:not([data-revelar="mascara"]):not([data-revelar="crecer"]):not(.formas__indice *):not(.firma__cabeza *):not(.firma__entrada){
      transition:none;
      animation:cruzar linear both;
      animation-timeline:view();
      /* El escalonado ya no puede ser un retardo —con una línea de
         tiempo de scroll el tiempo no existe—: se corre la entrada
         un poco más adentro del recorrido. */
      animation-range:cover calc(var(--i,0) * 2.4%) cover 100%;
    }

    /* El sol cruza el bloque verde mientras lo atraviesas: el haz
       se mueve, la caída se queda. Sólo «transform», que el
       navegador compone sin volver a pintar. Con movimiento
       reducido la luz no desaparece — se queda quieta. */
    @keyframes cruza-el-sol{
      from{transform:translate3d(-7%,-2.5%,0)}
      to  {transform:translate3d(7%,2.5%,0)}
    }
    .superficie-agave::after{
      animation:cruza-el-sol linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }

    /* PRUEBA · las piezas como un rodillo de créditos --------
       Las tarjetas no se limitan a salir por arriba: se levantan
       más rápido que el scroll y se disuelven al llegar al borde.
       El tramo es su propia salida, así que cada una empieza
       cuando le toca y el desfase entre las dos columnas sale solo
       de dónde está cada una.

       El desvanecido no es parejo: la primera mitad casi no se
       nota —la pieza todavía se está viendo— y la segunda se la
       lleva entera. */
    @keyframes rodar-creditos{
      0%  {opacity:1;   transform:translateY(0)}
      45% {opacity:.85; transform:translateY(-26px)}
      100%{opacity:0;   transform:translateY(-92px)}
    }
    .rejilla-piezas .pieza-tarjeta{
      animation:rodar-creditos linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
      /* La tarjeta presta su recorrido a las capas de dentro: ver
         la nota de abajo. */
      view-timeline-name:--pieza;
    }

    /* La foto recorre contra el scroll durante todo el trayecto:
       entra empujada hacia abajo dentro de su marco y sale tirada
       hacia arriba. Sube más que la página, así que se lee como si
       se escapara — el rodillo de créditos.

       El recorrido va en la capa y la escala en la foto que lleva
       dentro. Si compartieran elemento se estorbarían: las dos son
       «transform», y una animación siempre le gana a una transición,
       así que el aumento al pasar el ratón no llegaría a verse.

       Las dos columnas no recorren lo mismo. Con el mismo número
       subirían clavadas la una a la otra y se vería la cuadrícula;
       desiguales, la sección respira. */
    /* La capa no puede medir su propio recorrido: vive dentro del
       marco, y un marco que recorta cuenta como contenedor de
       scroll. Preguntado desde ahí dentro, el recorrido sale
       siempre igual y la foto se queda quieta. Así que la tarjeta
       —que sí ve la página entera— publica el suyo con nombre y la
       capa se cuelga de él. */
    .rejilla-piezas .tarjeta-capa{
      --contra:38px;
      animation:contra-el-scroll linear both;
      animation-timeline:--pieza;
      animation-range:cover 0% cover 100%;
    }
    .rejilla-piezas .pieza-tarjeta:nth-child(even) .tarjeta-capa{--contra:24px}
    @keyframes contra-el-scroll{
      from{transform:translateY(var(--contra))}
      to  {transform:translateY(calc(var(--contra) * -1))}
    }

    /* La cabecera de una página no se queda clavada mientras te
       vas: se disuelve hacia arriba conforme la dejas. Y como el
       reloj es el scroll y no el tiempo, si subes vuelve a aparecer.

       El tramo es su salida, y los dos primeros quintos no hacen
       nada: el texto termina de leerse antes de empezar a irse.

       Va sobre la envoltura, no sobre la sección: la sección lleva
       un aire enorme arriba —para dejar pasar la barra— y medir el
       recorrido sobre ese aire lo dejaría casi todo fuera de vista. */
    @keyframes se-disuelve-la-cabecera{
      0%  {opacity:1; transform:translateY(0)}
      38% {opacity:1; transform:translateY(0)}
      100%{opacity:0; transform:translateY(-52px)}
    }
    .cabecera-pagina .envoltura{
      animation:se-disuelve-la-cabecera linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }

    /* El título se retira cuando llega la primera pieza.

       Acompaña mientras se lee la entrada y se aparta en cuanto la
       primera foto sube a su altura: nunca llega a taparla, y
       tampoco se queda al final enmarcando la última fila a medio
       pasar —que era lo que se leía como un error.

       El tramo se cuenta desde que la retícula asoma por abajo y se
       mide en alto de ventana: lo que importa no es cuánto scroll
       lleva la página, sino a qué distancia del techo viene la
       foto.

       Los dos números tienen su razón. Empieza con la foto a 430 px
       del techo porque nada más cargar ya está a 450 en el teléfono
       —si empezara antes, el título saldría medio apagado de
       entrada—. Y termina a 250, que queda por encima del borde del
       título en cuanto la barra se esconde: para entonces ya no
       está, y la foto nunca llega a pasarle por debajo. */
    @keyframes se-despide-el-titulo{
      from{opacity:1}
      to  {opacity:0}
    }
    .firma__cabeza,
    .firma__entrada{
      animation:se-despide-el-titulo linear both;
      animation-timeline:--piezas;
      animation-range:cover calc(100vh - 430px) cover calc(100vh - 250px);
    }
    /* La entrada se va con el título, no por su cuenta. Son la misma
       presentación: si una se apagara al salir por arriba y el otro
       al llegar la pieza, se verían como dos cosas sueltas. */

    /* La imagen que cruza también se va. Hasta aquí sólo tenía
       entrada —el telón que la descubre— y después se quedaba
       clavada mientras el bloque nuevo subía por debajo. Ahora se
       levanta mientras sale y lo despeja.

       El tramo es «exit»: de cuando su borde de arriba toca el
       techo de la ventana a cuando lo cruza el de abajo. Es decir,
       exactamente mientras se está yendo — y da igual lo alta que
       sea la imagen, porque el tramo se mide sobre ella misma.

       El recorrido va sobre la figura, no sobre la foto: la foto
       ya lleva su propio parallax dentro del marco. Son dos capas
       de movimiento, una dentro de la otra. */
    @keyframes se-lleva-la-imagen{
      0%  {transform:translateY(0);                          opacity:1}
      30% {transform:translateY(calc(var(--alza) * -.16));   opacity:1}
      100%{transform:translateY(calc(var(--alza) * -1));     opacity:var(--alza-op,.72)}
    }
    .cruza{
      --alza:58px;
      --alza-tramo:100%;
      animation:se-lleva-la-imagen linear both;
      animation-timeline:view();
      animation-range:exit 0% exit var(--alza-tramo);
    }

    /* La última cruza sobre el verde del cierre, y ahí la página se
       acaba: sólo quedan 246 px de scroll después de que empieza a
       salir, de los 549 que mide. Con el recorrido normal se
       quedaba a un cuarto del camino y la foto terminaba apoyada
       sobre el verde, justo donde empieza el pie.

       Así que sube más y en menos tramo: termina de levantarse
       mucho antes de que la página se quede sin scroll, y el campo
       verde del final queda limpio. */
    /* Sólo donde cruza. Apilada en el teléfono la foto no invade
       nada, y ese alzón dejaría un hueco de más antes del verde. */
    @media(min-width:901px){
      .cruza--ultima{
        --alza:122px;
        --alza-tramo:35%;
        --alza-op:.66;
      }
    }

    main .seccion [data-lineas]:not(.formas__indice *):not(.firma__cabeza *) .lineas__linea > span{
      transition:none;
      animation:cruzar-linea linear both;
      animation-timeline:view();
      animation-range:cover calc(var(--i,0) * 2.4%) cover 100%;
    }
  }
}

/* -------------------------------------------------------------
   16 · PORTADA
   ------------------------------------------------------------- */
.portada{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  padding:var(--nav-h) var(--mx) clamp(2.6rem,5vw,4.5rem);
  overflow:hidden;
  color:var(--raiz);
  isolation:isolate;
}
.portada__media{
  position:absolute;inset:0;z-index:-2;
  -webkit-clip-path:url(#mija-hoja-portada);
  clip-path:url(#mija-hoja-portada);
}
#mija-hoja-portada-camino{
  transform-origin:.5px .5px;
  transform:scale(.34);
  transition:transform 2.6s cubic-bezier(.16,1,.3,1);
}
html.portada-abierta #mija-hoja-portada-camino{transform:scale(4.4)}
.portada__media video,.portada__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  animation:respirar 22s ease-in-out infinite alternate;
}
@keyframes respirar{from{transform:scale(1.06)}to{transform:scale(1.15)}}
.portada__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(41,62,56,.42) 0%, rgba(41,62,56,.05) 34%, rgba(41,62,56,.62) 100%),
    radial-gradient(70% 55% at 50% 42%, rgba(201,162,77,.10), transparent 70%);
}
.portada__contenido{position:relative;width:100%;max-width:var(--ancho);margin-inline:auto}
/* Blanca, como el título: en oro claro se perdía sobre el vídeo */
.portada .portada__etiqueta{color:var(--raiz)}
.portada__titulo{
  font-family:var(--serif);font-weight:300;
  font-size:var(--fs-display);line-height:.94;color:var(--raiz);
  margin-block:1.4rem .2rem;
}
.portada__titulo em{
  font-style:italic;
  font-size:.6em;color:var(--oro-claro);
  padding-left:.06em;
}
.portada__titulo .lineas__linea{padding-bottom:.06em}
.portada__pie{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:2rem;margin-top:clamp(2rem,4vw,3.4rem);
}
.portada__grupo{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(1.6rem,4vw,3.4rem);
}
.portada__frase{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  color:rgba(247,245,242,.86);max-width:26ch;line-height:1.5;
}
.portada__descenso{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(247,245,242,.62);
}
.portada__descenso i{
  display:block;width:1px;height:52px;background:rgba(247,245,242,.3);
  position:relative;overflow:hidden;
}
.portada__descenso i::after{
  content:"";position:absolute;inset:0;background:var(--oro-claro);
  transform:translateY(-100%);
  animation:gotear 2.6s var(--e-suave) infinite;
}
@keyframes gotear{
  0%{transform:translateY(-100%)}
  55%{transform:translateY(0)}
  100%{transform:translateY(100%)}
}

/* -------------------------------------------------------------
   17 · MANIFIESTO — declaración grande
   ------------------------------------------------------------- */
.manifiesto{text-align:left;max-width:22ch}
.declaracion{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,4.2vw,3.4rem);
  line-height:1.24;color:var(--tinta);max-width:21ch;
  text-wrap:balance;
}
.declaracion em{font-style:italic;color:var(--oro-texto)}

/* Centrada (Origen, en la portada). La caja también va al centro de
   su columna: con su ancho máximo de 21ch, si sólo se centrara el
   texto quedaría centrado dentro de una caja pegada a la izquierda. */
.declaracion--centrada{text-align:center;margin-inline:auto}

/* -------------------------------------------------------------
   18 · LAS CUATRO FORMAS
   ------------------------------------------------------------- */
/* Invertida: las piezas a la izquierda, el índice a la derecha.
   El orden también está cambiado en el documento, no con «order»,
   para que el recorrido con teclado siga al de la vista. */
.formas{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,6vw,6rem);align-items:start}
@media(max-width:1000px){
  .formas{grid-template-columns:1fr;gap:2.5rem}
  /* Apiladas, el título tiene que volver a ir primero: es lo que
     presenta a las piezas. Aquí sí con «order», porque apilado no
     hay dos columnas que confundan el recorrido. */
  .formas__indice{order:-1}
}

.formas__indice{position:sticky;top:calc(var(--nav-h) + 6vh);align-self:start}
@media(max-width:1000px){.formas__indice{position:static}}
.formas__lista{margin-top:2.4rem;display:flex;flex-direction:column}
.formas__enlace{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;
  padding-block:1.05rem;border-top:1px solid var(--linea);
  transition:color .6s var(--e-suave);
  color:var(--tinta-suave);
}
.formas__enlace:last-child{border-bottom:1px solid var(--linea)}
.formas__enlace .num{
  font-family:var(--serif);font-style:italic;font-size:.95rem;
  font-variant-numeric:tabular-nums;color:var(--oro-texto);
  opacity:.65;transition:opacity .5s var(--e-suave);min-width:2.2ch;
}
.formas__enlace .nom{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.2;transition:transform .7s var(--e-salida)}
.formas__enlace .sub{
  display:block;font-family:var(--sans);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);
  margin-top:.35rem;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .6s var(--e-suave),max-height .6s var(--e-salida);
}
.formas__enlace.esta-activo{color:var(--tinta)}
.formas__enlace.esta-activo .num{opacity:1}
.formas__enlace.esta-activo .nom{transform:translateX(-8px)}
.formas__enlace.esta-activo .sub{opacity:1;max-height:3rem}
.formas__enlace:hover .nom{transform:translateX(-8px)}

.formas__panel{
  display:grid;grid-template-columns:1fr;align-items:center;
  padding-block:clamp(1.6rem,4vw,3.2rem);
}
.formas__panel .pieza-tarjeta__media{max-height:min(70vh,700px)}
.pieza-tarjeta{position:relative;display:block;overflow:hidden}
.pieza-tarjeta__media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--arena);
}
.pieza-tarjeta__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.6s var(--e-salida), filter 1.2s var(--e-suave);
}
.pieza-tarjeta:hover .pieza-tarjeta__media img{transform:scale(1.085)}

/* Dos fotos en la misma caja ----------------------------------
   El retrato —la pieza puesta— encima; la pieza sola sobre el
   blanco del estudio, debajo. Al pasar el ratón el retrato se
   retira y deja ver la pieza. Es un fundido, no un cambio: las dos
   están ahí desde el principio, una sobre otra. */
/* La capa es más alta que el marco: ese sobrante por arriba y por
   abajo es lo que le permite recorrer sin descubrir el fondo. */
/* El alto se escribe entero en vez de dejarlo salir de los dos
   bordes: con «top» y «bottom» negativos el navegador se quedaba
   con el alto del marco y descubría una franja abajo al recorrer. */
.tarjeta-capa{position:absolute;left:0;right:0;top:-9%;height:118%;display:block}
.tarjeta-capa--retrato{
  z-index:1;
  transition:opacity 1s var(--e-suave);
}
.pieza-tarjeta:hover .tarjeta-capa--retrato,
.pieza-tarjeta:focus-visible .tarjeta-capa--retrato{opacity:0}

/* El destello: una hoja de oro que cruza la foto una sola vez, en
   diagonal. Muy tenue a propósito — tiene que leerse como un
   reflejo sobre el metal, no como un barrido de interfaz. Se sale
   de la caja por los lados para entrar y salir sin que se vea el
   borde de la banda. */
.pieza-tarjeta__media::after{
  content:"";position:absolute;inset:-12% -30%;pointer-events:none;z-index:2;
  background:linear-gradient(104deg,
    rgb(201 162 77 / 0)    38%,
    rgb(232 205 140 / .12) 46%,
    rgb(255 246 222 / .26) 50%,
    rgb(232 205 140 / .12) 54%,
    rgb(201 162 77 / 0)    62%);
  opacity:0;transform:translateX(-58%);
}
.pieza-tarjeta:hover .pieza-tarjeta__media::after,
.pieza-tarjeta:focus-visible .pieza-tarjeta__media::after{
  animation:destello-oro 1.15s var(--e-suave) .1s;
}
@keyframes destello-oro{
  0%  {opacity:0; transform:translateX(-58%)}
  16% {opacity:1}
  84% {opacity:1}
  100%{opacity:0; transform:translateX(58%)}
}
.pieza-tarjeta__pie{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.4rem;
  padding-top:1.3rem;border-top:1px solid var(--linea);margin-top:1.3rem;
}
.pieza-tarjeta__nombre{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15}
.pieza-tarjeta__idea{font-family:var(--serif);font-style:italic;color:var(--tinta-suave);font-size:1.02rem;margin-top:.2rem}
.pieza-tarjeta__precio{font-family:var(--serif);font-size:1.15rem;white-space:nowrap}
.pieza-tarjeta__ver{
  position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(.9);
  padding:.9rem 1.6rem;background:rgba(247,245,242,.94);
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  opacity:0;transition:opacity .6s var(--e-suave),transform .8s var(--e-salida);
  pointer-events:none;
}
.pieza-tarjeta:hover .pieza-tarjeta__ver{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Firma: el título se queda -----------------------------------
   «Resiliencia, la raíz del sol» no se va con el scroll: se queda
   arriba mientras las piezas suben y desaparecen por debajo.

   Se pega en el borde mismo de la ventana, no debajo de la barra,
   y es su propio relleno el que deja el hueco de la barra. Así,
   cuando la barra se esconde al bajar, no se abre una franja por
   la que se verían pasar las piezas.

   El fondo es opaco a propósito: es lo que hace que las piezas
   desaparezcan al llegar, en vez de cruzarse con las letras. Y el
   z-index es lo que lo pone por encima de ellas — las tarjetas van
   después en el documento y, sin él, pasarían por delante. */
.firma__cabeza{
  position:sticky;top:0;z-index:2;
  padding-top:calc(var(--nav-h) + clamp(1.4rem,3vw,2.6rem));
  padding-bottom:clamp(.4rem,1vw,.9rem);
  /* Un solo compás para las tres cosas que se mueven —el bloque, el
     borde de su fondo y el degradado—, para que se lea como un solo
     gesto y no como tres.

     La curva no es la de salida que usa el resto del sitio: aquélla
     arranca de golpe, y aquí lo que se mueve son 148 px de bloque
     grande, que así se sienten como un tirón. Ésta entra y sale
     despacio: el título se desliza en vez de saltar. */
  --t-cabeza:1s;
  transition:transform var(--t-cabeza) var(--e-suave);
}
/* El fondo no lo pinta la cabeza: lo pinta una capa suya, suelta del
   flujo. Es lo que permite que el bloque blanco encoja sin que la
   página cambie de alto.

   La versión anterior lo hacía encogiendo la caja de verdad, y eso
   montaba un bucle: al cambiar el alto se movía la página, al moverse
   disparaba el scroll, el scroll escondía o sacaba la barra y eso
   volvía a cambiar el alto. De ahí el rebote. Ahora, entre un estado
   y otro, el alto del documento es exactamente el mismo. */
.firma__cabeza::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--raiz);
  transition:bottom var(--t-cabeza) var(--e-suave);
}
/* En cuanto la barra se esconde, el título ocupa su hueco y «la raíz
   del sol» se retira: entre las dos cosas son casi 150 px más de
   pieza a la vista. Vuelve todo solo cuando la barra reaparece.
   La barra va antes que el contenido en el documento, así que su
   estado se puede leer desde aquí; y el mismo tiempo y la misma curva
   que usa ella, para que suban juntos.

   Sube más de lo que mide la barra: se lleva también el alto del
   lema, que ya no se ve. Es desplazamiento, no cambio de alto — si
   el bloque encogiera de verdad, la retícula entera daría un salto
   cada vez que la barra se esconde. */
.firma__cabeza{
  --lema-alto:calc(clamp(1.3rem,3vw,2.1rem) * 1.78);
  --alto-lema:calc(var(--lema-alto) + 1.2rem);
}
.nav.esta-escondida ~ main .firma__cabeza{
  transform:translateY(calc((var(--nav-h) + var(--alto-lema)) * -1));
}
/* El fondo sube su borde de abajo lo que medía el lema, y el
   degradado lo sigue. Ninguna de las dos cosas está en el flujo. */
.nav.esta-escondida ~ main .firma__cabeza::before{bottom:var(--lema-alto)}
.nav.esta-escondida ~ main .firma__cabeza::after{
  transform:translateY(calc(var(--lema-alto) * -1));
}

/* El lema se va antes de que el bloque termine de subir, para que no
   se le vea cruzar por debajo del título.

   Y al irse saca su alto de la caja: si sólo se volviera invisible,
   dejaría un palmo de fondo en blanco entre el título y las piezas.
   Su alto se lo devuelve la cabeza por abajo, así que el bloque
   pintado encoge pero el hueco que ocupa en la página es el mismo —
   la retícula no se entera y no da ningún salto. */
/* El lema se va antes de que el bloque termine de subir, y al
   revés espera a que el bloque haya bajado para volver a aparecer.
   Si entrara a la vez, se le vería llegar mientras todo se mueve. */
.firma__cabeza .italica{transition:opacity .5s var(--e-suave) .34s}
.nav.esta-escondida ~ main .firma__cabeza .italica{
  opacity:0;
  transition-duration:.4s;
  transition-delay:0s;
}
/* El borde de abajo no es una línea: las piezas se deshacen antes
   de llegar a las letras. */
.firma__cabeza::after{
  content:"";position:absolute;left:0;right:0;top:100%;
  height:clamp(1.2rem,2.4vw,2.1rem);pointer-events:none;
  transition:transform var(--t-cabeza) var(--e-suave);
  background:linear-gradient(to bottom,
    rgb(247 245 242 / 1) 0%,
    rgb(247 245 242 / .82) 38%,
    rgb(247 245 242 / .38) 68%,
    rgb(247 245 242 / 0) 100%);
}
/* La retícula publica su recorrido y la pila lo pone al alcance
   del título, que no es hijo suyo sino hermano. Es lo que le
   permite saber dónde viene la primera pieza. */
.rejilla-piezas{view-timeline-name:--piezas}
.firma__pila{timeline-scope:--piezas}
.firma__entrada{margin-top:clamp(1.6rem,3.4vw,2.8rem)}
.firma__piezas{margin-top:clamp(2rem,4.4vw,4rem)}

/* Retícula de piezas (colección) */
.rejilla-piezas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,4.5rem) clamp(1.6rem,3.4vw,3.2rem)}
@media(max-width:700px){.rejilla-piezas{grid-template-columns:1fr}}
/* Sin escalonar: las cuatro piezas se miran de frente. */

/* Lo que el sitio oculta con [hidden] se oculta aunque su clase
   declare display (botones, tarjetas, bloques de espera). */
[hidden]{display:none!important}

/* Estado de una pieza: Próximamente · precio · Agotado.
   Mientras no es precio, se escribe como etiqueta, no como cifra. */
[data-estado-handle]:not(.precio){
  font-family:var(--sans);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--oro-texto);
}
[data-estado-handle][data-estado="agotado"]{color:var(--tinta-suave)}

/* -------------------------------------------------------------
   SELECCIÓN — catálogo de venta cotidiana
   ------------------------------------------------------------- */
/* La vitrina ----------------------------------------------------
   Una sección por tipo de pieza; en cada una, un riel horizontal que
   sangra hasta el borde derecho de la pantalla: la tarjeta cortada
   dice, sin palabras, que hay más. El riel se recorre con el
   trackpad, el dedo, arrastrando o con las flechas — la rueda del
   ratón sigue bajando la página. */

/* El riel sale de la envoltura hasta el borde; «clip» recorta ese
   sobrante sin crear un contenedor de scroll (el índice sigue
   pegándose a la ventana). */
.vitrina-seccion{overflow-x:clip}

.vitrina__muestra{
  text-align:center;margin:0 auto 1.6rem;
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--oro-texto);
}

/* El índice: cuatro botones sueltos, en arena clara. Sin caja
   común — cada uno respira por su cuenta. Se quedan a la mano al
   bajar; el de la sección en la que se está se llena de Agave. */
.vitrina__indice{
  position:sticky;top:calc(var(--nav-h) + .8rem);z-index:5;
  display:flex;justify-content:center;gap:.6rem;
  width:fit-content;max-width:100%;margin:0 auto clamp(1.6rem,4vw,3rem);
  padding:.2rem;
  overflow-x:auto;scrollbar-width:none;
  transition:top .7s var(--e-salida);
}
.vitrina__indice::-webkit-scrollbar{display:none}
/* Cuando la barra se retira, el índice sube a ocupar su lugar */
.nav.esta-escondida ~ main .vitrina__indice{top:.8rem}
.vitrina__indice a{
  flex:0 0 auto;white-space:nowrap;
  padding:.8rem 1.35rem;border-radius:999px;
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--tinta);
  /* Arena clara, un poco translúcida: sobre las fotos, al bajar,
     se sigue leyendo sin tapar */
  background:rgba(232,225,214,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .5s var(--e-suave),color .5s var(--e-suave);
}
.vitrina__indice a:hover{background:rgba(220,211,196,.92)}
.vitrina__indice a[aria-current]{background:var(--agave);color:var(--raiz)}
@media(max-width:700px){
  .vitrina__indice{justify-content:flex-start;margin-inline:calc(var(--mx) * -1);padding-inline:var(--mx);max-width:none;width:auto}
  .vitrina__indice a{padding:.7rem 1.1rem}
}

/* Cada sección */
.vitrina__seccion{
  padding-block:clamp(2.2rem,5vw,4.4rem);
  scroll-margin-top:calc(var(--nav-h) + 5.5rem);
}
.vitrina__seccion + .vitrina__seccion{border-top:1px solid var(--linea)}
.vitrina__cabeza{
  display:grid;grid-template-columns:1fr auto;align-items:end;
  column-gap:clamp(1rem,2vw,1.6rem);row-gap:.4rem;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
}
.vitrina__titulo{
  font-family:var(--serif);font-weight:300;line-height:1;margin:0;
  font-size:clamp(2.3rem,5.2vw,4.4rem);color:var(--tinta);
}
.vitrina__flechas{grid-column:2;align-self:end;display:flex;gap:.55rem}
.vitrina__flecha{
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--linea-fuerte);color:var(--tinta);
  display:grid;place-items:center;
  transition:background .5s var(--e-suave),border-color .5s var(--e-suave),color .5s var(--e-suave),opacity .5s;
}
.vitrina__flecha svg{width:18px;height:18px}
.vitrina__flecha:hover{background:var(--agave);border-color:var(--agave);color:var(--raiz)}
.vitrina__flecha:disabled{opacity:.28;pointer-events:none}
/* Si todo cabe, sobran las flechas y la barra */
.vitrina__seccion.sin-riel .vitrina__flechas,
.vitrina__seccion.sin-riel .vitrina__avance{visibility:hidden}
@media(max-width:700px){.vitrina__flechas{display:none}}

/* El riel */
.vitrina__riel{
  margin-right:calc(50% - var(--vw, 100vw) / 2);
  padding-right:var(--mx);
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:0;
  scrollbar-width:none;
  cursor:grab;
}
.vitrina__riel::-webkit-scrollbar{display:none}
.vitrina__riel:focus-visible{outline:1px solid var(--oro);outline-offset:6px}
.vitrina__riel.esta-arrastrando{cursor:grabbing;scroll-snap-type:none;user-select:none}
.vitrina__riel.esta-arrastrando a{pointer-events:none}
html.tiene-cursor .vitrina__riel{cursor:none}
.vitrina__pista{display:flex;gap:clamp(1rem,2vw,1.8rem);list-style:none;margin:0;padding:0}
/* min-width:0 — sin él, el texto más ancho del pie ensancha la tarjeta */
.vitrina__item{flex:0 0 clamp(250px,24vw,380px);min-width:0;scroll-snap-align:start}
@media(max-width:700px){.vitrina__item{flex-basis:74vw}}
.vitrina__item img{-webkit-user-drag:none;user-select:none}

/* La barra de avance: un filete, y en oro el tramo que se está viendo */
.vitrina__avance{position:relative;height:1px;margin-top:clamp(1.4rem,2.6vw,2rem);background:var(--linea);overflow:hidden}
.vitrina__avance i{position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--oro);transition:transform .25s linear}

/* La tarjeta: la de Firma, más compacta */
.vitrina__tarjeta{overflow:visible}
.vitrina__enlace{display:block}
.vitrina__tarjeta .pieza-tarjeta__pie{margin-top:1rem;padding-top:1rem;flex-direction:column;align-items:stretch;gap:.75rem}
.vitrina__linea{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:14px}
.vitrina__tarjeta .pieza-tarjeta__nombre{font-size:clamp(1.3rem,1.9vw,1.7rem)}
/* El precio en cifra; «Próximamente» conserva su tamaño de etiqueta */
.vitrina__tarjeta .pieza-tarjeta__precio{margin-left:auto}
.vitrina__tarjeta .pieza-tarjeta__precio.precio{font-size:1rem}
/* Elegido un acabado con los puntos, se ve la pieza y no el retrato */
.vitrina__tarjeta.muestra-acabado .tarjeta-capa--retrato{opacity:0}

/* Los puntos de acabado */
.vitrina__acabados{display:flex;gap:.6rem}
.punto{
  position:relative;width:14px;height:14px;border-radius:50%;padding:0;
  border:1px solid rgba(55,83,75,.28);
  transition:box-shadow .4s var(--e-suave);
}
/* El punto mide 14 px; el dedo necesita 24 */
.punto::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.punto--oro{background:linear-gradient(135deg,#EFD9A2 0%,#C9A24D 55%,#9C7A33 100%)}
/* Rodio: blanco frío y brillante. Plata: más gris y un poco cálida,
   para que los dos no se confundan uno junto al otro. */
.punto--rodio{background:linear-gradient(135deg,#FFFFFF 0%,#E4E8EC 50%,#B7BEC5 100%)}
.punto--plata{background:linear-gradient(135deg,#EDECE8 0%,#BDBBB5 52%,#86847E 100%)}
.punto[aria-pressed="true"]{box-shadow:0 0 0 2px var(--raiz),0 0 0 3px var(--tinta)}
.punto:focus-visible{outline:1px solid var(--oro);outline-offset:4px}

/* El hueco de la muestra */
.vitrina__item--hueco .pieza-tarjeta__boceto span{max-width:16ch}

/* Entrada: el riel llega desde la derecha, una tarjeta tras otra */
.vitrina__seccion .vitrina__item{opacity:0;transform:translateX(56px)}
.vitrina__seccion.esta-dentro .vitrina__item{
  opacity:1;transform:none;
  transition:opacity .9s var(--e-suave),transform 1.2s var(--e-salida);
  transition-delay:calc(var(--i,0) * 90ms);
}
@media(prefers-reduced-motion:reduce){
  .vitrina__seccion .vitrina__item{opacity:1;transform:none}
}

/* Anclada (pantallas anchas): cada sección se detiene bajo el
   índice y bajar mueve el riel de lado (mija-shop.js · vitrinaViva).
   La sección mide el alto de lo que se ve más el recorrido; lo que
   se ve se queda pegado mientras dura. */
@media(min-width:701px){
  .vitrina.es-fija .vitrina__seccion{padding-block:0}
  .vitrina.es-fija .vitrina__fijo{
    position:sticky;top:calc(var(--nav-h) + 4.8rem);
    padding-block:clamp(1.2rem,3.2vh,2.6rem);
    transition:top .7s var(--e-salida);
  }
  .nav.esta-escondida ~ main .vitrina.es-fija .vitrina__fijo{top:4.8rem}
  /* El riel ya no se desplaza por dentro: lo mueve el scroll de la
     página. «clip» evita que el foco lo desplace a escondidas. */
  .vitrina.es-fija .vitrina__riel{
    overflow:clip;scroll-snap-type:none;
    /* Sangra por los dos lados: las piezas entran por la orilla
       derecha de la pantalla y salen por la izquierda. El relleno
       devuelve la primera y la última al borde del contenido.
       --vw es el ancho útil sin la barra de scroll (mija-shop.js). */
    margin-inline:calc(50% - var(--vw, 100vw) / 2);
    padding-inline:calc(var(--vw, 100vw) / 2 - 50%);
  }
  .vitrina.es-fija .vitrina__pista{will-change:transform}
  /* Las tarjetas caben en el alto de la ventana: título, foto y pie
     siempre enteros mientras la sección está detenida */
  .vitrina.es-fija .vitrina__item{
    flex-basis:clamp(210px, min(24vw, calc((100svh - var(--nav-h) - 21rem) * .8)), 380px);
  }
}

.seleccion-vacia{
  max-width:34rem;margin-inline:auto;text-align:center;
  display:grid;justify-items:center;gap:.9rem;padding-block:clamp(1rem,5vw,3rem);
}
.seleccion-vacia svg{height:64px;width:auto;color:var(--oro);opacity:.7}

/* Pieza sin fotografía todavía */
.pieza-tarjeta__boceto{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.4rem;
  background:
    repeating-linear-gradient(135deg, rgba(201,162,77,.045) 0 12px, transparent 12px 24px),
    var(--arena);
  color:var(--oro);text-align:center;padding:2rem;
}
.pieza-tarjeta__boceto svg{width:auto;height:74px;opacity:.7}
.pieza-tarjeta__boceto span{
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--tinta-suave)
}

/* -------------------------------------------------------------
   19 · CITA GRANDE
   ------------------------------------------------------------- */
.cita{max-width:920px;margin-inline:auto;text-align:center}
.cita__texto{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.6rem,4.2vw,3rem);line-height:1.34;
  text-wrap:balance;
}
.cita__autor{margin-top:1.8rem;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--oro-texto)}

/* -------------------------------------------------------------
   19b · EL CIERRE — la última sección del inicio.
   Aquí el relato deja de contar y empieza a invitar.
   ------------------------------------------------------------- */
.cierre{text-align:center;max-width:960px;margin-inline:auto}
.cierre__pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.2rem,3vw,2.4rem);
}

/* -------------------------------------------------------------
   20 · PILARES
   ------------------------------------------------------------- */
.pilar{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.2rem,4vw,3.5rem);
  align-items:baseline;
  padding-block:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--linea-clara);
  transition:padding-left .8s var(--e-salida);
}
.pilar:hover{padding-left:1.2rem}
.pilar:last-child{border-bottom:1px solid var(--linea-clara)}
.pilar__n{font-family:var(--serif);font-style:italic;color:var(--oro-claro);font-size:1rem;min-width:2.4ch}
.pilar__t{
  font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.9rem);
  letter-spacing:.05em;text-transform:uppercase;font-weight:300;
}
.pilar__d{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.5vw,1.25rem);
  color:rgba(247,245,242,.62);max-width:34ch;text-align:right;
}
@media(max-width:760px){
  .pilar{grid-template-columns:auto 1fr;gap:1rem 1.4rem}
  .pilar__d{grid-column:2;text-align:left;margin-top:.4rem}
}

/* -------------------------------------------------------------
   21 · TALLER / PROCESO
   ------------------------------------------------------------- */
.proceso{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.6rem)}
@media(max-width:820px){.proceso{grid-template-columns:1fr}}
.proceso__paso{border-top:1px solid var(--linea);padding-top:1.4rem}
.proceso__n{font-family:var(--serif);font-style:italic;color:var(--oro-texto);font-size:1.05rem}
.proceso__t{font-family:var(--serif);font-size:1.5rem;margin:.5rem 0 .7rem;line-height:1.2}

.marco-vertical{
  aspect-ratio:9/14;overflow:hidden;background:var(--agave);position:relative;
}
.marco-vertical video,.marco-vertical img{width:100%;height:100%;object-fit:cover}
.marco-vertical__sello{
  position:absolute;top:1rem;left:1rem;
  font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(247,245,242,.8);
}

/* Control de sonido / reproducción discreto */
.control-media{
  position:absolute;right:1rem;bottom:1rem;
  width:38px;height:38px;border:1px solid rgba(247,245,242,.4);
  display:grid;place-items:center;color:var(--raiz);
  border-radius:50%;
  transition:background .5s var(--e-suave),border-color .5s;
}
.control-media:hover{background:rgba(247,245,242,.14);border-color:var(--raiz)}
.control-media svg{width:13px;stroke:currentColor;fill:none;stroke-width:1.3}

/* -------------------------------------------------------------
   22 · PÁGINA DE PIEZA
   ------------------------------------------------------------- */
.pieza{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  padding-top:calc(var(--nav-h) + clamp(2rem,5vw,4.5rem));
}
@media(max-width:960px){.pieza{grid-template-columns:1fr;gap:2.4rem}}

.pieza__galeria{display:flex;flex-direction:column;gap:clamp(.8rem,1.4vw,1.2rem)}
.pieza__foto{background:var(--arena);overflow:hidden;position:relative}
.pieza__foto img,.pieza__foto video{width:100%;height:auto;display:block}
.pieza__foto--principal{aspect-ratio:4/5}
.pieza__foto--principal img{width:100%;height:100%;object-fit:cover}

.pieza__panel{
  position:sticky;top:calc(var(--nav-h) + 4vh);align-self:start;
  padding-bottom:2rem;
}
@media(max-width:960px){.pieza__panel{position:static}}
.pieza__nombre{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.05;margin:.9rem 0 .5rem}
.pieza__idea{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--oro-texto)}
.pieza__precio{
  font-family:var(--serif);font-size:1.55rem;margin-top:1.6rem;
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
}
/* La referencia baja a su propio renglón: el precio de cobro
   no debe partirse para hacerle sitio. */
.pieza__precio .precio-ref{flex-basis:100%;margin-top:.2rem}
.pieza__precio small{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.pieza__poema{
  font-family:var(--serif);font-size:1.12rem;line-height:1.7;
  color:var(--tinta-suave);margin-block:1.8rem;max-width:42ch;
  text-wrap:pretty;
}
.pieza__poema br{content:"";display:block;margin-bottom:.35rem}

.opciones{margin-block:1.8rem}
/* Acabado y talla: dos grupos, cada uno con su rótulo */
.opciones__grupo + .opciones__grupo{margin-top:1.5rem}
.opciones__aviso{color:var(--oro-texto)}
/* El acabado elegido pasa al frente de la galería (mija-shop.js) */
.pieza__foto[data-al-frente]{order:-1}
.opciones__titulo{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.9rem;
}
.opciones__lista{display:flex;flex-wrap:wrap;gap:.55rem}
.opcion{
  min-width:46px;padding:.6rem .85rem;
  border:1px solid var(--linea-fuerte);
  font-size:.74rem;letter-spacing:.1em;
  transition:border-color .5s var(--e-suave),background .5s var(--e-suave),color .5s;
  font-variant-numeric:tabular-nums;
}
.opcion:hover{border-color:var(--agave)}
.opcion[aria-pressed="true"]{background:var(--agave);border-color:var(--agave);color:var(--raiz)}
.opcion[data-agotado]{opacity:.34;pointer-events:none;text-decoration:line-through}

/* Guía de tallas — ventana sobre la ficha del anillo. Es un <dialog>
   nativo: el navegador encierra el foco, cierra con Esc y devuelve el
   foco al botón. Mismo velo verde que la bolsa, mismo «Cerrar». */
.guia{
  width:min(36rem,calc(100vw - 2rem));max-width:none;
  max-height:calc(100dvh - 2rem);
  margin:auto;padding:0;border:1px solid var(--linea);
  background:var(--raiz);color:var(--tinta);
  overflow:auto;overscroll-behavior:contain;
}
.guia::backdrop{
  background:rgba(55,83,75,.32);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
/* Sólo opacidad en la ventana: un transform en ella movería al
   cursor de la casa, que entra ahí mientras está abierta. La subida
   va en la caja de adentro. */
.guia[open],.guia[open]::backdrop{animation:guia-aparece .5s var(--e-suave) both}
.guia[open] .guia__caja{animation:guia-sube .8s var(--e-salida) both}
@keyframes guia-aparece{from{opacity:0}}
@keyframes guia-sube{from{transform:translateY(16px)}}
html.tiene-cursor .guia,html.tiene-cursor .guia::backdrop{cursor:none}

.guia__caja{padding:clamp(1.6rem,4.5vw,2.8rem)}
.guia__cabeza{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1.3rem;border-bottom:1px solid var(--linea);
}
.guia__titulo{
  font-family:var(--serif);font-weight:300;line-height:1.1;margin:0;
  font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--tinta);
}
.guia__cerrar{
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--tinta-suave);transition:color .4s var(--e-suave);
}
.guia__cerrar:hover{color:var(--oro)}

.guia__tabla{width:100%;border-collapse:collapse;margin-top:1.8rem;font-variant-numeric:tabular-nums}
.guia__tabla th{padding:0 .5rem 1.1rem;vertical-align:bottom;text-align:center;font-weight:400}
.guia__tabla th:first-child,.guia__tabla td:first-child{text-align:left;padding-left:0}
.guia__icono{display:block;width:34px;height:34px;margin:0 auto .8rem;color:var(--oro)}
.guia__col{
  display:block;font-family:var(--sans);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--oro-texto);
}
.guia__unidad{display:block;margin-top:.35rem;font-size:.72rem;letter-spacing:.08em;color:var(--tinta-suave)}
.guia__tabla td{
  padding:.95rem .5rem;border-top:1px solid var(--linea);
  text-align:center;font-size:.95rem;color:var(--tinta);
  transition:background .4s var(--e-suave);
}
/* La talla, en la serif: es lo que se busca con la vista */
.guia__tabla td:first-child{font-family:var(--serif);font-size:1.45rem;line-height:1}
.guia__tabla tbody tr:last-child td{border-bottom:1px solid var(--linea)}
.guia__tabla tbody tr:hover td{background:rgba(232,225,214,.55)}
.guia__nota{margin:1.6rem 0 1rem;font-size:.86rem;line-height:1.7;color:var(--tinta-suave);max-width:44ch}

.acordeon{border-top:1px solid var(--linea);margin-top:2.4rem}
.acordeon__item{border-bottom:1px solid var(--linea)}
.acordeon__boton{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.15rem;text-align:left;
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--tinta);
}
.acordeon__signo{position:relative;width:11px;height:11px;flex:none}
.acordeon__signo::before,.acordeon__signo::after{
  content:"";position:absolute;background:var(--oro-texto);
  transition:transform .6s var(--e-salida);
}
.acordeon__signo::before{left:0;top:5px;width:11px;height:1px}
.acordeon__signo::after{left:5px;top:0;width:1px;height:11px}
.acordeon__item.esta-abierto .acordeon__signo::after{transform:scaleY(0)}
.acordeon__panel{
  overflow:hidden;max-height:0;
  transition:max-height .8s var(--e-velo);
}
.acordeon__interior{padding-bottom:1.5rem;font-size:.92rem;line-height:1.8;color:var(--tinta-suave)}
.acordeon__interior p + p{margin-top:.9rem}
.acordeon__interior li{padding-left:1.1rem;position:relative;margin-bottom:.4rem}
.acordeon__interior li::before{content:"";position:absolute;left:0;top:.75em;width:4px;height:1px;background:var(--oro)}

/* Sin existencia — se avisa, no se disculpa */
.espera{
  border:1px solid var(--linea-fuerte);
  padding:1.3rem 1.4rem;
  animation:linea-entra .7s var(--e-salida) both;
}
.espera__t{
  font-family:var(--serif);font-size:1.2rem;
  color:var(--tinta);margin-bottom:.35rem;max-width:none;
}

/* La tarjeta de una pieza agotada baja la voz, no desaparece */
.pieza-tarjeta[data-estado="agotado"] .pieza-tarjeta__media img,
.pieza-tarjeta[data-estado="agotado"] .pieza-tarjeta__media picture{
  filter:saturate(.55) opacity(.82);
}
.pieza-tarjeta[data-estado="agotado"] .pieza-tarjeta__ver{content:none}
.pieza-tarjeta[data-estado="agotado"] .pieza-tarjeta__precio{color:var(--tinta-suave)}

.garantias{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;margin-top:1.8rem}
.garantia{display:flex;align-items:center;gap:.6rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.garantia svg{width:15px;stroke:var(--oro-texto);fill:none;stroke-width:1.15;flex:none}

/* -------------------------------------------------------------
   23 · FORMULARIOS
   ------------------------------------------------------------- */
/* La casilla de aceptación (Contacto). La casilla nativa queda
   encima, invisible pero entera: se marca con clic, con el dedo o con
   la barra espaciadora, y el lector de pantalla la anuncia tal cual.
   Lo que se ve es un cuadro de un pixel que se llena de Agave. */
.aceptar{
  position:relative;display:grid;grid-template-columns:18px 1fr;gap:.9rem;align-items:start;
  margin:.2rem 0 1.8rem;font-size:.86rem;line-height:1.6;color:var(--tinta-suave);cursor:pointer;
}
.aceptar input{position:absolute;left:0;top:.15rem;width:18px;height:18px;margin:0;opacity:0;cursor:pointer}
.aceptar__caja{
  width:18px;height:18px;margin-top:.15rem;border:1px solid var(--linea-fuerte);
  display:grid;place-items:center;transition:background .4s var(--e-suave),border-color .4s var(--e-suave);
}
.aceptar__caja::after{
  content:"";width:9px;height:5px;margin-top:-2px;
  border-left:1.5px solid var(--raiz);border-bottom:1.5px solid var(--raiz);
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .3s var(--e-suave),transform .45s var(--e-salida);
}
.aceptar input:checked + .aceptar__caja{background:var(--agave);border-color:var(--agave)}
.aceptar input:checked + .aceptar__caja::after{opacity:1;transform:rotate(-45deg) scale(1)}
.aceptar input:focus-visible + .aceptar__caja{outline:1px solid var(--oro);outline-offset:3px}
.aceptar:hover .aceptar__caja{border-color:var(--agave)}
.aceptar--bolsa{margin:1.1rem 0 1rem;font-size:.8rem}
/* Los enlaces se reconocen como tales: subrayado fino en oro */
.aceptar__texto .enlace,.consentimiento .enlace{
  color:var(--tinta);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--oro);text-underline-offset:3px;
}
.aceptar__texto .enlace::after,.consentimiento .enlace::after{display:none}

/* «Al suscribirte, aceptas…»: bajo el correo, discreta */
.consentimiento{font-size:.78rem;line-height:1.6;color:var(--tinta-suave);margin:0}
.pie .consentimiento{grid-column:1/-1;text-align:center;margin-top:.9rem;color:rgba(247,245,242,.62)}
.pie .consentimiento .enlace{color:var(--oro-claro)}

/* La ventana de gracias: la misma caja que la guía de tallas, al centro */
.guia.gracias{width:min(28rem,calc(100vw - 2rem))}
.gracias__caja{display:grid;justify-items:center;text-align:center;gap:1.1rem;padding-block:clamp(2.2rem,5vw,3.2rem)}
.gracias__hoja{width:auto;height:46px;color:var(--oro)}
.gracias__texto{margin:0;max-width:30ch;color:var(--tinta-suave);font-size:.95rem;line-height:1.7}
.gracias__caja .boton{margin-top:.6rem}

.campo{position:relative;margin-bottom:1.8rem}
.campo input,.campo textarea,.campo select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--linea-fuerte);
  padding:.9rem 0 .7rem;font-size:.95rem;font-weight:300;
  transition:border-color .6s var(--e-suave);
}
.campo textarea{resize:vertical;min-height:110px}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-bottom-color:var(--oro)}
.campo label{
  position:absolute;left:0;top:.9rem;pointer-events:none;
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--tinta-suave);
  transition:transform .5s var(--e-salida),color .5s var(--e-suave);
  transform-origin:left;
}
.campo input:focus + label,.campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label,.campo textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.55rem) scale(.86);color:var(--oro)
}
/* Campos sobre superficie oscura — el pie también es Agave */
:is(.superficie-agave, .pie) .campo input,
:is(.superficie-agave, .pie) .campo textarea{
  border-bottom-color:rgba(247,245,242,.28);
  color:var(--raiz);
}
:is(.superficie-agave, .pie) .campo input:focus,
:is(.superficie-agave, .pie) .campo textarea:focus{border-bottom-color:var(--oro-claro)}
:is(.superficie-agave, .pie) .campo label{color:rgba(247,245,242,.62)}
:is(.superficie-agave, .pie) .campo input:focus + label,
:is(.superficie-agave, .pie) .campo input:not(:placeholder-shown) + label,
:is(.superficie-agave, .pie) .campo textarea:focus + label,
:is(.superficie-agave, .pie) .campo textarea:not(:placeholder-shown) + label{color:var(--oro-claro)}

.linea-envio{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:end;
}
@media(max-width:520px){.linea-envio{grid-template-columns:1fr}}

.aviso{
  margin-top:1.2rem;padding:1rem 1.2rem;border-left:1px solid var(--oro);
  background:rgba(201,162,77,.06);font-size:.84rem;line-height:1.7;
}
.aviso--error{border-left-color:#A9553F;background:rgba(169,85,63,.06)}

/* -------------------------------------------------------------
   24 · RASTREO DE ENVÍO
   ------------------------------------------------------------- */
.rastreo{border:1px solid var(--linea);padding:clamp(1.6rem,3.4vw,2.6rem)}
.rastreo__pasos{margin-top:2rem;display:flex;flex-direction:column}
.paso-envio{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding-block:1.1rem;position:relative}
.paso-envio::before{
  content:"";position:absolute;left:5px;top:1.9rem;bottom:-.4rem;width:1px;background:var(--linea)
}
.paso-envio:last-child::before{display:none}
.paso-envio__punto{
  width:11px;height:11px;border-radius:50%;border:1px solid var(--linea-fuerte);
  margin-top:.5rem;background:var(--raiz);position:relative;z-index:1;
}
.paso-envio.esta-hecho .paso-envio__punto{background:var(--oro);border-color:var(--oro)}
.paso-envio__t{font-family:var(--serif);font-size:1.12rem}
.paso-envio__f{font-size:.72rem;letter-spacing:.1em;color:var(--tinta-suave);margin-top:.15rem}

/* -------------------------------------------------------------
   25 · PIE DE PÁGINA
   ------------------------------------------------------------- */
.pie{background:var(--agave);color:var(--raiz);padding-top:clamp(.6rem,1.4vw,1.2rem)}
/* El pie es un espejo sobre un solo eje: Firma MIJA y Selección
   MIJA se miran a los lados de la marca; debajo, los lanzamientos;
   al final, la franja legal en tres partes iguales. */
.pie__superior{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"firma centro seleccion";
  align-items:center;gap:clamp(1.5rem,5vw,5rem);
  padding-bottom:clamp(2.4rem,4vw,3.2rem);
}
.pie__superior > :first-child{grid-area:firma;justify-self:end}
.pie__superior > :last-child{grid-area:seleccion;justify-self:start}
.pie__centro{grid-area:centro;display:flex;flex-direction:column;align-items:center;text-align:center}
.pie__centro .pie__marca{margin-bottom:1rem}
.pie__centro .pie__frase{margin-inline:auto}

.pie__linea{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.2;letter-spacing:.01em;
  color:var(--raiz);position:relative;padding-block:.3rem;
  transition:color .5s var(--e-suave);
}
/* El subrayado nace desde el centro hacia afuera, en espejo */
.pie__linea::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--oro-claro);transform:scaleX(0);
  transition:transform .8s var(--e-salida);
}
.pie__superior > :first-child::after{transform-origin:right}
.pie__superior > :last-child::after{transform-origin:left}
.pie__linea:hover{color:var(--oro-claro)}
.pie__linea:hover::after{transform:scaleX(1)}

/* El primer filete del pie es una raíz: nace bajo la marca, con un
   nudo de oro, y se abre en espejo hacia los dos lados hasta
   desvanecerse. Se dibuja desde el centro cuando entra en vista. */
.pie__raiz{display:block;width:100%;height:auto;overflow:visible}
.pie__raiz[data-revelar]{opacity:1;transform:none}
.pie__raiz path{
  stroke-width:1.4;
  /* Con pathLength=1, el hueco del patrón cubre todo el trazo al
     inicio; el desfase lo deja fuera para que el remate redondo no
     asome como un punto. */
  stroke-dasharray:1 1.2;stroke-dashoffset:1.1;
  transition:stroke-dashoffset 2.2s var(--e-salida);
}
.pie__raiz .pie__raiz-tronco{transition-duration:.7s}
.pie__raiz .pie__raiz-rama{transition-delay:.45s}
.pie__raiz .pie__raiz-pelo{stroke-width:1;transition-duration:1.2s;transition-delay:1.6s}
.pie__raiz.esta-dentro path{stroke-dashoffset:0}
.pie__raiz-nudo{fill:var(--oro-claro);opacity:0;transition:opacity .6s var(--e-suave) .35s}
.pie__raiz.esta-dentro .pie__raiz-nudo{opacity:1}
/* En móvil el dibujo se escala a un tercio: el trazo se engrosa
   para seguir leyéndose como una línea de un píxel. */
@media(max-width:760px){
  .pie__raiz path{stroke-width:3}
  .pie__raiz .pie__raiz-pelo{stroke-width:2.2}
  .pie__raiz-nudo{r:5.5}
}

/* La misma raíz, reflejada, abre el pie: ocupa el hueco que quedaba
   entre el último botón de la página y la marca, y deja la marca
   naciendo de ella. */
.pie__raiz.pie__raiz--alta{
  transform:scaleY(-1);
  margin-bottom:clamp(2.4rem,4.6vw,3.8rem);
}

.pie__boletin{
  padding-block:clamp(1.2rem,2.5vw,2rem) clamp(2rem,3.5vw,2.8rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.pie__boletin form{
  width:min(100%,32rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1.4rem;align-items:end;
  text-align:left;
}
.pie__boletin .campo{margin-bottom:0}
.pie__boletin [data-boletin-aviso]{grid-column:1/-1;text-align:center;margin-top:.6rem}

.pie__inferior > :first-child{text-align:left}
.pie__inferior > :nth-child(2){text-align:center}
.pie__inferior > :last-child{text-align:right}

@media(max-width:760px){
  .pie__superior{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"centro centro" "firma seleccion";
    row-gap:1.8rem;
  }
  .pie__superior > :first-child,
  .pie__superior > :last-child{justify-self:center}
  /* Con .pie delante: la regla general de la franja legal está más
     abajo en la hoja y, con el mismo peso, ganaba en móvil. */
  .pie .pie__inferior{grid-template-columns:1fr;gap:.5rem}
  .pie .pie__inferior > *{text-align:center}
}
@media(max-width:460px){
  .pie__boletin form{grid-template-columns:1fr}
  .pie__boletin .boton{width:100%}
}
.pie__marca{width:40px;height:auto;color:var(--oro);margin-bottom:1.1rem}
.pie__frase{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:rgba(247,245,242,.8);max-width:22ch;line-height:1.45}
.pie h4{
  font-family:var(--sans);font-weight:400;font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--oro-claro);
  margin-bottom:1.3rem;line-height:2;
}
.pie h4 a{color:inherit;transition:color .5s var(--e-suave)}
.pie h4 a:hover{color:var(--raiz)}
.pie__lista li{margin-bottom:.55rem}
.pie__lista a{font-size:.86rem;color:rgba(247,245,242,.74);transition:color .5s var(--e-suave)}
.pie__lista a:hover{color:var(--raiz)}
.pie__inferior{
  border-top:1px solid var(--linea-clara);
  padding-block:1.2rem 1.5rem;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.8rem 1.5rem;align-items:center;
  font-size:.68rem;letter-spacing:.12em;color:rgba(247,245,242,.5);
}
.pie__inferior a:hover{color:var(--raiz)}

/* -------------------------------------------------------------
   26 · MIGAS Y ENCABEZADOS DE PÁGINA
   ------------------------------------------------------------- */
.cabecera-pagina{
  padding-top:calc(var(--nav-h) + clamp(4rem,9vw,8rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.migas{display:flex;gap:.7rem;align-items:center;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.migas a:hover{color:var(--oro)}
.migas span{opacity:.4}

/* -------------------------------------------------------------
   26b · PÁGINA PERDIDA
   ------------------------------------------------------------- */
.perdida{
  min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + 2rem);
}
.perdida__marca{color:var(--oro);opacity:.5}
.perdida__marca svg{width:auto;height:clamp(64px,9vw,104px);margin-inline:auto}
.perdida .lead{margin-inline:auto}
.perdida__salidas{
  display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;
  align-items:center;justify-content:center;
}

/* -------------------------------------------------------------
   27 · UTILIDADES
   ------------------------------------------------------------- */
.mt1{margin-top:.6rem}.mt2{margin-top:1.2rem}.mt3{margin-top:2rem}.mt4{margin-top:3.2rem}.mt5{margin-top:4.6rem}
.mb1{margin-bottom:.6rem}.mb2{margin-bottom:1.2rem}.mb3{margin-bottom:2rem}.mb4{margin-bottom:3.2rem}
.centro{text-align:center;margin-inline:auto}
/* Los párrafos llevan un ancho máximo de lectura (64ch). Dentro de
   un bloque centrado eso los dejaba pegados a la izquierda con el
   texto centrado dentro de su propia caja — se notaba sobre todo en
   las etiquetas, que con su letra pequeña miden muy poco. La caja
   también tiene que ir al centro. */
.centro p{margin-inline:auto}
/* Texto justificado: sólo el bloque de prosa de Sobre MIJA. La última
   línea de cada párrafo queda a la izquierda, como en un libro. */
.justificado p{text-align:justify;text-align-last:start}
/* En la columna angosta del teléfono, una palabra larga
   («contemporáneas») abría huecos enormes en su renglón. Partir
   palabras con guion, como hace cualquier libro, los cierra. */
@media(max-width:600px){
  .justificado p{-webkit-hyphens:auto;hyphens:auto}
}
.oculto-visual{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.salta-al-contenido{
  position:absolute;left:var(--mx);top:-100px;z-index:2000;
  background:var(--agave);color:var(--raiz);padding:.9rem 1.4rem;
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  transition:top .4s var(--e-salida);
}
.salta-al-contenido:focus{top:1rem}
.sin-margen{max-width:none}

/* -------------------------------------------------------------
   TEXTOS LEGALES — Términos y Aviso de Privacidad
   -------------------------------------------------------------
   Se leen de corrido, sin apariciones: un texto legal se lee, no se
   descubre. Columna angosta, interlineado amplio, títulos en la
   serif de la casa y tablas con filetes, como la guía de tallas. */

/* Lo que sólo va en una lengua (la nota de idioma, en la inglesa) */
[data-solo-idioma]{display:none}
html[lang="en"] [data-solo-idioma="en"]{display:block}

.legal__indice{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.legal__indice a{
  padding:.75rem 1.2rem;border-radius:999px;
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--tinta);background:rgba(232,225,214,.78);
  transition:background .5s var(--e-suave),color .5s var(--e-suave);
}
.legal__indice a:hover{background:var(--agave);color:var(--raiz)}

.legal__idioma{
  margin:0 0 2.4rem;padding:1.1rem 1.3rem;border:1px solid var(--linea);
  font-size:.86rem;line-height:1.7;color:var(--tinta-suave);
}

.legal{color:var(--tinta);font-size:.98rem;line-height:1.8}
.legal h2,.legal h3{scroll-margin-top:calc(var(--nav-h) + 2rem)}
.legal h2{
  font-family:var(--serif);font-weight:300;line-height:1.15;
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  margin:clamp(3.6rem,7vw,5.4rem) 0 .6rem;padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--linea);
}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{
  font-family:var(--serif);font-weight:400;line-height:1.3;
  font-size:clamp(1.2rem,1.9vw,1.4rem);
  margin:2.4rem 0 .7rem;
}
.legal p{margin:0 0 1rem;max-width:none;color:var(--tinta)}
.legal__fecha{
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--oro-texto)!important;margin-bottom:2rem!important;
}
.legal strong{font-weight:500}
.legal a{
  color:var(--tinta);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--oro);text-underline-offset:3px;overflow-wrap:anywhere;
}
.legal a:hover{color:var(--oro-texto)}

/* Listas con la raya fina de la casa; las numeradas, con su cifra en oro */
.legal ul,.legal ol{margin:0 0 1.2rem;padding:0;list-style:none}
.legal li{position:relative;padding-left:1.6rem;margin-bottom:.5rem}
.legal ul > li::before{
  content:"";position:absolute;left:.1rem;top:.9em;width:.7rem;height:1px;background:var(--oro);
}
.legal ol{counter-reset:paso}
.legal ol > li{counter-increment:paso}
.legal ol > li::before{
  content:counter(paso) ".";position:absolute;left:0;top:0;
  font-variant-numeric:tabular-nums;color:var(--oro-texto);font-size:.9em;
}

.legal__tabla{margin:1.2rem 0 1.6rem;overflow-x:auto}
.legal__tabla table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.55}
.legal__tabla th{
  text-align:left;font-weight:400;padding:0 1rem .8rem 0;
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--oro-texto);
}
.legal__tabla td{padding:.85rem 1rem .85rem 0;border-top:1px solid var(--linea);vertical-align:top}
.legal__tabla tbody tr:last-child td{border-bottom:1px solid var(--linea)}