/* ==========================================================================
   EL HACENDADO CAFÉ — sistema de diseño
   Paleta derivada del packaging: negro mate, oro, plata, crema.
   ========================================================================== */

/* ---------- Cormorant Garamond (display) ---------- */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/cormorant-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/cormorant-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/cormorant-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/cormorant-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Manrope (texto) ---------- */
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Fallbacks con métricas ajustadas ----------
   Mientras el woff2 carga, el navegador usa estas caras locales con las
   métricas re-escaladas para que coincidan con la fuente real: el texto no
   cambia de tamaño al terminar la carga y el CLS se queda en cero.
   Los valores salieron de medir el ancho real de cadenas de la página. */
@font-face{
  font-family:"Cormorant fallback";
  src:local("Times New Roman"),local("Times"),local("Liberation Serif");
  size-adjust:94.4%;
  ascent-override:97.5%;
  descent-override:30.7%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Manrope fallback";
  src:local("Segoe UI"),local("Helvetica Neue"),local("Arial"),local("Liberation Sans");
  size-adjust:102.7%;
  ascent-override:104.2%;
  descent-override:29.2%;
  line-gap-override:0%;
}



/* ---------- Cara sin swap para el texto que se escribe ----------
   Los bloques .write son serif grande y a veces caen sobre el pliegue. Cuando
   la fuente real sustituía a la de respaldo, el párrafo re-repartía sus líneas
   y ese salto contaba como CLS (0.073 medido en Distribuidor; ningún ajuste de
   size-adjust lo evita, porque los anchos por carácter no coinciden).
   Es el MISMO woff2 ya precargado, sólo cambia la estrategia: font-display
   block no pinta hasta tener la fuente, así que no hay reparto intermedio. Si
   la descarga falla, pasado el periodo de bloqueo el navegador usa el
   respaldo y el texto aparece igual. */
@font-face{
  font-family:"Cormorant Write";
  font-style:normal; font-weight:300 700; font-display:block;
  src:url("../fonts/cormorant-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Write";
  font-style:normal; font-weight:300 700; font-display:block;
  src:url("../fonts/cormorant-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Cormorant Write";
  font-style:italic; font-weight:300 700; font-display:block;
  src:url("../fonts/cormorant-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Write";
  font-style:italic; font-weight:300 700; font-display:block;
  src:url("../fonts/cormorant-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 1. Tokens ---------- */
:root{
  /* color */
  --ink:        #0B0908;
  --ink-2:      #12100E;
  --ink-3:      #1C1815;
  --cream:      #F5F0E8;
  --cream-2:    #EBE3D6;
  --gold:       #C09553;
  --gold-hi:    #E7CD9B;
  --gold-lo:    #8E6B39;
  --silver:     #B4B8BB;
  --silver-hi:  #DFE2E4;
  --clay:       #4A3527;

  --on-dark:      #F3EEE6;
  --on-dark-dim:  rgba(243,238,230,.58);
  --on-dark-line: rgba(243,238,230,.14);
  --on-light:      #191512;
  --on-light-dim:  rgba(25,21,18,.66);
  --on-light-line: rgba(25,21,18,.14);

  /* tipografía */
  --serif: "Cormorant Garamond", "Cormorant fallback", "Times New Roman", serif;
  --sans:  "Manrope", "Manrope fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-display: clamp(3.4rem, 12vw, 11rem);
  --fs-h1:      clamp(2.9rem, 8.5vw, 7.5rem);
  --fs-h2:      clamp(2.3rem, 5.6vw, 4.8rem);
  --fs-h3:      clamp(1.6rem, 2.6vw, 2.5rem);
  --fs-lead:    clamp(1.15rem, 1.7vw, 1.6rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.1rem);
  --fs-label:   .72rem;

  /* ritmo espacial — "espacios amplios" */
  --gutter:  clamp(1.4rem, 5vw, 6.5rem);
  --sec:     clamp(6rem, 13vw, 15rem);
  --sec-sm:  clamp(4rem, 8vw, 9rem);
  --maxw:    82rem;
  --maxw-wide: 100rem;
  --maxw-text: 44rem;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.65;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------- 3. Utilidades de layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide{ max-width:var(--maxw-wide); }
.wrap--text{ max-width:var(--maxw-text); }
.section{ padding-block:var(--sec); position:relative; }
.section--sm{ padding-block:var(--sec-sm); }.section--light,
.section--cream2{ background:var(--cream); color:var(--on-light); }
.section--cream2{ background:var(--cream-2); color:var(--on-light); }
/* El dorado de marca (#C09553) sobre crema da 2.41:1 y las etiquetas son de
   11.5px, así que necesitan 4.5:1. Se remapea el token completo en secciones
   claras para que herede a labels, links, chips y numeración de una vez.
   El valor está calculado contra --cream-2, que es el más oscuro de los dos
   fondos claros; así sirve para ambos. */
.section--light,.section--cream2{ --gold:#7A5A2C; }
.section--ink2{ background:var(--ink-2); }
.stack{ display:grid; gap:clamp(1.4rem,2.4vw,2.4rem); }
.stack--lg{ gap:clamp(2.4rem,5vw,4.5rem); }
.center{ text-align:center; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 4. Tipografía ---------- */
.display,.h1,.h2,.h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.display{ font-size:var(--fs-display); }
.h1{ font-size:var(--fs-h1); }
.h2{ font-size:var(--fs-h2); line-height:1.0; }
.h3{ font-size:var(--fs-h3); line-height:1.12; letter-spacing:-.01em; }
.italic{ font-style:italic; }
.lead{ font-size:var(--fs-lead); line-height:1.55; font-weight:300; }
.dim{ color:var(--on-dark-dim); }
.section--light .dim,.section--cream2 .dim{ color:var(--on-light-dim); }
.gold{ color:var(--gold); }
.serif{ font-family:var(--serif); }

.label{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
}
.label--muted{ color:var(--on-dark-dim); }.section--light .label--muted,
.section--cream2 .label--muted{ color:var(--on-light-dim); }
.label-row{ display:flex; align-items:center; gap:1rem; }
.label-row::before{
  content:""; width:clamp(1.6rem,4vw,3.4rem); height:1px;
  background:currentColor; opacity:.5; flex:none;
}

/* ---------- Marca ----------
   El logo es un escudo circular: "EL HACENDADO" en el arco, "CAFÉ" abajo y la
   figura del hacendado al centro. A la altura del header (46 px) el texto del
   anillo es ilegible, así que el escudo funciona como símbolo y el nombre va
   en texto al lado. Por eso el <img> lleva alt="" y el nombre accesible está
   en el aria-label del enlace: si no, el lector de pantalla lo diría dos veces. */
.wordmark{
  display:inline-flex; align-items:center; gap:.68rem; line-height:1;
}
.wordmark__seal{
  width:46px; height:46px; flex:none;
  transition:transform .55s var(--ease-out), opacity .4s;
}
.wordmark:hover .wordmark__seal{ transform:rotate(-8deg) scale(1.04); }
.wordmark__txt{ display:inline-grid; gap:.2em; justify-items:start; }
.wordmark__name{
  font-family:var(--serif); font-weight:500;
  font-size:1.06rem; letter-spacing:.15em; text-transform:uppercase;
  white-space:nowrap;
}
.wordmark__word{
  font-family:var(--sans); font-weight:600;
  font-size:.56rem; letter-spacing:.52em; text-transform:uppercase;
  color:var(--gold); text-indent:.52em;
}
/* El header se encoge al hacer scroll; el escudo lo acompaña. */
.header.is-stuck .wordmark__seal{ width:38px; height:38px; }
@media (max-width:600px){
  .wordmark__seal,.header.is-stuck .wordmark__seal{ width:38px; height:38px; }
  .wordmark__name{ font-size:.94rem; letter-spacing:.12em; }
  .wordmark{ gap:.55rem; }
}
/* Nota: existe logo-ink-96/192.webp (el mismo escudo en tinta) para cuando el
   logo tenga que ir sobre fondo claro. Hoy el header y el footer son oscuros,
   así que no se usa. */

/* ---------- 5. Botones / links ---------- */
.btn{
  --btn-fg:var(--ink); --btn-bg:var(--gold);
  display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 1.9em;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bg); border-radius:100px;
  cursor:pointer; transition:transform .5s var(--ease-out), background .35s, color .35s, border-color .35s;
}
.btn:hover{ transform:translateY(-2px); background:var(--gold-hi); border-color:var(--gold-hi); }
.btn__arrow{ transition:transform .45s var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--on-dark); border-color:var(--on-dark-line); }
.btn--ghost:hover{ background:transparent; color:var(--gold); border-color:var(--gold); }
/* En secciones claras el botón sólido se invierte: el dorado oscurecido con
   texto tinta sólo daba 3.06:1. Relleno tinta con texto crema da 16:1. */
.section--light .btn,.section--cream2 .btn{ --btn-bg:var(--ink); --btn-fg:var(--cream); }
.section--light .btn:hover,.section--cream2 .btn:hover{
  background:var(--gold); border-color:var(--gold); color:var(--cream);
}
.section--light .btn--ghost,.section--cream2 .btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--on-light); border-color:var(--on-light-line);
}
.section--light .btn--ghost:hover,.section--cream2 .btn--ghost:hover{
  background:transparent; color:var(--gold); border-color:var(--gold);
}

.link-u{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:.35em; border-bottom:1px solid currentColor;
  color:var(--gold); transition:gap .4s var(--ease-out), color .3s;
}
.link-u:hover{ gap:1em; color:var(--gold-hi); }

/* ---------- 6. Header ---------- */
.header{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(1rem,2vw,1.6rem) var(--gutter);
  color:var(--on-dark);
  border-bottom:1px solid transparent;
  transition:transform .55s var(--ease), background .5s var(--ease),
             backdrop-filter .5s, border-color .5s, padding .5s var(--ease);
}
.header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,9,8,.72), rgba(11,9,8,0));
  opacity:1; transition:opacity .5s;
}
.header.is-stuck{
  background:rgba(11,9,8,.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--on-dark-line);
  padding-block:clamp(.7rem,1.2vw,1rem);
}
.header.is-stuck::before{ opacity:0; }
.header.is-hidden{ transform:translateY(-100%); }

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.4rem); }
.nav__link{
  position:relative; font-size:.74rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; padding-block:.35em;
  color:var(--on-dark-dim); transition:color .35s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.nav__link:hover,.nav__link[aria-current="page"]{ color:var(--on-dark); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.header__cta{ padding:.8em 1.4em; font-size:.7rem; }

.burger{
  display:none; width:2.75rem; height:2.75rem; padding:0;
  background:none; border:1px solid var(--on-dark-line); border-radius:100px;
  cursor:pointer; position:relative; color:inherit;
}
.burger span{
  position:absolute; left:50%; width:1.05rem; height:1px; background:currentColor;
  transform:translateX(-50%); transition:.45s var(--ease);
}
.burger span:nth-child(1){ top:1.15rem; }
.burger span:nth-child(2){ bottom:1.15rem; }
.is-menu-open .burger span:nth-child(1){ top:50%; transform:translate(-50%,-50%) rotate(45deg); }
.is-menu-open .burger span:nth-child(2){ bottom:50%; transform:translate(-50%,50%) rotate(-45deg); }

/* menú móvil */
.menu{
  position:fixed; inset:0; z-index:99;
  display:grid; align-content:center; gap:.2rem;
  padding:6rem var(--gutter) 3rem;
  background:var(--ink);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.is-menu-open .menu{ opacity:1; visibility:visible; }
.menu__link{
  font-family:var(--serif); font-size:clamp(1.9rem,8vw,3rem); line-height:1.16;
  border-bottom:1px solid var(--on-dark-line); padding-block:.45em;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
.is-menu-open .menu__link{ opacity:1; transform:none; transition-delay:calc(.06s * var(--i,0) + .1s); }
.menu__link:hover{ color:var(--gold); }
.menu__meta{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1.6rem; }

/* ---------- 7. Hero con scrub horizontal ---------- */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:end;
  overflow:hidden; background:var(--ink);
  isolation:isolate;
  /* el drag horizontal hace scrub; el scroll vertical sigue funcionando */
  touch-action:pan-y;
}
.hero.is-failed .hero__poster,.hero.is-poster-only .hero__poster{ opacity:1; }
.hero.is-failed .scrub,.hero.is-poster-only .scrub{ display:none; }
/* En touch el video no se ha descargado todavía: el riel se ve atenuado para
   que se lea como "todavía no activo" y no como un control roto. */
.hero.is-touch-idle .scrub__rail{ opacity:.45; }
.hero.is-touch-idle .scrub__knob{ box-shadow:none; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__video,.hero__poster{
  width:100%; height:100%; object-fit:cover;
}
.hero__poster{ position:absolute; inset:0; transition:opacity .9s var(--ease); }
.hero.is-ready .hero__poster{ opacity:0; }
.hero__video{ opacity:0; transition:opacity 1.1s var(--ease); }
.hero.is-ready .hero__video{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(11,9,8,.92) 0%, rgba(11,9,8,.45) 38%, rgba(11,9,8,.12) 66%, rgba(11,9,8,.55) 100%),
    radial-gradient(120% 85% at 50% 100%, rgba(11,9,8,.6), transparent 60%);
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.hero__inner{
  position:relative;
  padding:clamp(7rem,14vh,11rem) var(--gutter) clamp(2rem,5vh,3.5rem);
  width:100%; max-width:var(--maxw-wide); margin-inline:auto;
  display:grid; gap:clamp(1.6rem,4vh,3rem);
}
.hero__eyebrow{ display:flex; flex-wrap:wrap; gap:.9rem 1.6rem; align-items:center; }
/* el video pasa por planos claros: sombra para que el texto nunca se pierda */
.hero__eyebrow,.hero__claim,.scrub__hint{ text-shadow:0 1px 12px rgba(11,9,8,.85), 0 0 3px rgba(11,9,8,.6); }
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.2rem,13vw,12.5rem);
  line-height:.86; letter-spacing:-.03em; margin:0;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero__title em{ font-style:italic; font-weight:300; color:var(--gold-hi); }
.hero__title .ln{ display:block; }
.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(1.5rem,4vw,4rem);
}
.hero__claim{ max-width:34rem; font-size:clamp(1rem,1.35vw,1.22rem); font-weight:300; color:rgba(243,238,230,.8); }

/* riel de scrub */
.scrub{ display:grid; gap:.85rem; width:min(100%,26rem); }
.scrub__hint{
  display:flex; align-items:center; gap:.7rem;
  font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.scrub__hint svg{ flex:none; color:var(--gold); }
.scrub__rail{
  position:relative; height:2px; background:rgba(243,238,230,.18); border-radius:2px;
  cursor:ew-resize; touch-action:pan-y;
}
.scrub__fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi)); border-radius:2px;
}
.scrub__knob{
  position:absolute; top:50%; left:0; width:.66rem; height:.66rem;
  margin-left:-.33rem; border-radius:50%; background:var(--gold-hi);
  transform:translateY(-50%); box-shadow:0 0 0 6px rgba(192,149,83,.16);
}
.hero__playhead{
  position:absolute; top:0; bottom:0; left:0; width:1px; z-index:0;
  background:linear-gradient(to bottom, transparent, rgba(231,205,155,.5) 30%, rgba(231,205,155,.5) 70%, transparent);
  opacity:0; transition:opacity .5s; pointer-events:none;
}
.hero.is-pointing .hero__playhead{ opacity:.6; }
.hero__scrolldown{
  position:absolute; right:var(--gutter); bottom:clamp(2rem,5vh,3.5rem); z-index:2;
  writing-mode:vertical-rl; font-size:.64rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--on-dark-dim);
  display:flex; align-items:center; gap:1rem;
}
.hero__scrolldown::after{
  content:""; width:1px; height:3.5rem; background:linear-gradient(var(--gold),transparent);
  animation:drop 2.6s var(--ease) infinite;
}
@keyframes drop{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media (max-width:900px){ .hero__scrolldown{ display:none; } }

/* hero interior (páginas secundarias) */
.phero{
  position:relative; padding:clamp(9rem,20vh,14rem) 0 clamp(3.5rem,8vh,7rem);
  background:var(--ink-2); overflow:hidden;
}
.phero::after{
  content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--on-dark-line);
}
.phero__bg{
  position:absolute; inset:0; z-index:0; opacity:.22;
  object-fit:cover; width:100%; height:100%;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);
}
.phero .wrap{ position:relative; z-index:1; }
.phero__title{ margin-block:.4em .35em; }

/* ---------- 8. Marquee ---------- */
.marquee{
  --dur:42s;
  display:flex; overflow:hidden; user-select:none;
  padding-block:clamp(1.1rem,2vw,1.6rem);
  border-block:1px solid var(--on-dark-line);
  background:var(--ink-2);
}
.marquee__track{
  display:flex; flex:none; gap:2.5rem; padding-right:2.5rem;
  animation:slide var(--dur) linear infinite;
}
.marquee span{
  display:flex; align-items:center; gap:2.5rem; flex:none; white-space:nowrap;
  font-size:.76rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.marquee span::after{ content:"\2726"; color:var(--gold); font-size:.6rem; letter-spacing:0; }
@keyframes slide{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------- 9. Texto que se escribe con el scroll ---------- */
.write{
  font-family:"Cormorant Write", var(--serif); letter-spacing:-.015em; text-wrap:pretty;
  /* piso de opacidad de las palabras sin escribir todavía. No es estético:
     es el mínimo con el que el texto en tránsito sigue dando 3:1 de contraste
     (umbral AA de texto grande) sobre cada fondo. */
  --write-floor:.46;
}
.section--light .write,.section--cream2 .write{ --write-floor:.54; }
.write .w{
  display:inline-block;
  opacity:clamp(var(--write-floor), calc((var(--p, 0) - var(--i, 0)) * 7), 1);
  transition:opacity .18s linear;
}
.write em{ font-style:italic; color:var(--gold-hi); }
/* Sobre crema el dorado no alcanza contraste mientras la palabra se escribe,
   así que ahí la énfasis es solo cursiva. */
.section--light .write em,.section--cream2 .write em{ color:inherit; }
.write strong{ font-weight:500; color:var(--on-dark); }.section--light .write strong,
.section--cream2 .write strong{ color:var(--on-light); }
.write--xl{ font-size:clamp(2rem,5.2vw,4.4rem); line-height:1.08; }
.write--lg{ font-size:clamp(1.5rem,3vw,2.6rem); line-height:1.24; }
.write--md{ font-size:clamp(1.5rem,2vw,1.8rem); line-height:1.36; }
@media (prefers-reduced-motion:reduce){ .write .w{ opacity:1 !important; } }

/* reveals genéricos */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }
/* El clip va en los hijos, nunca en el elemento observado: un clip-path que
   deja el rect en cero hace que Blink reporte isIntersecting=false y el
   IntersectionObserver (y el lazy-load de las imágenes) nunca dispara. */
[data-reveal="mask"]{ transform:none; opacity:1; }
[data-reveal="mask"] > *{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s var(--ease-out);
}
[data-reveal="mask"].is-in > *{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-reveal="mask"] > *{ clip-path:none !important; }
}

/* ---------- 10. Producto ---------- */
.prod{
  display:grid; gap:clamp(2.5rem,6vw,6rem); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.prod--flip .prod__media{ order:2; }
.prod__media{
  position:relative; display:grid; place-items:center;
  padding:clamp(1.5rem,4vw,3.5rem);
  min-height:clamp(20rem,42vw,34rem);
}
.prod__media::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--halo,rgba(192,149,83,.22)), transparent 62%);
  filter:blur(6px);
  /* Es sólo un halo. Al ser absoluto cubre toda la caja y, sin esto, se comía
     los clics de los botones de la galería que viven dentro de .prod__media. */
  pointer-events:none;
}
.prod__img{
  position:relative; width:min(100%,25rem); height:auto;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.42));
}
.prod__body{ display:grid; gap:clamp(1.1rem,2vw,1.8rem); align-content:center; }
.prod__title{ font-family:var(--serif); font-size:var(--fs-h2); line-height:1; letter-spacing:-.02em; }
.prod__title small{
  display:block; font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem;
}
.prod--silver .prod__title small{ color:var(--silver); }
.prod--silver{ --halo:rgba(180,184,187,.2); }

/* ---------- Presentaciones y precio ----------
   Una fila por presentación: tamaño, molienda y precio de menudeo. El precio
   de distribuidor no se publica, va bajo solicitud en la página de mayoreo. */
.vars{ display:grid; gap:.5rem; }
.var{
  display:grid; grid-template-columns:auto 1fr auto; gap:.4rem 1rem; align-items:baseline;
  padding:.9rem 1.1rem;
  border:1px solid var(--on-dark-line); border-radius:2px;
  background:linear-gradient(180deg, rgba(243,238,230,.035), transparent);
}
.section--light .var,.section--cream2 .var{
  border-color:var(--on-light-line); background:rgba(255,255,255,.5);
}
.var__size{
  font-family:var(--serif); font-size:1.24rem; font-weight:500; line-height:1;
  white-space:nowrap;
}
.var__grind{ font-size:.84rem; color:var(--on-dark-dim); }
/* En el renglón con selector la etiqueta es el rótulo del control, no texto
   descriptivo: va en versalitas para que se lea como tal. */
.var--pick .var__grind{
  font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.section--light .var__grind,.section--cream2 .var__grind{ color:var(--on-light-dim); }
.var__price{
  font-family:var(--serif); font-size:1.34rem; line-height:1;
  color:var(--gold); white-space:nowrap;
}
.vars__note{ margin-top:.9rem; font-size:.82rem; color:var(--on-dark-dim); }
.section--light .vars__note,.section--cream2 .vars__note{ color:var(--on-light-dim); }
@media (max-width:520px){
  .var{ grid-template-columns:1fr auto; }
  .var__grind{ grid-column:1 / -1; order:3; }
}

/* ---------- Lista de canales como chips grandes ---------- */
.chips-lg{
  display:flex; flex-wrap:wrap; gap:.6rem; list-style:none;
}
.chips-lg li{
  padding:.7em 1.2em; font-size:.92rem;
  border:1px solid var(--on-dark-line); border-radius:100px;
  transition:border-color .4s, background .4s;
}
.chips-lg li:hover{ border-color:rgba(192,149,83,.5); }
.section--light .chips-lg li,.section--cream2 .chips-lg li{
  border-color:var(--on-light-line); background:rgba(255,255,255,.5);
}

/* ---------- Tarjeta grande y lista con marca ---------- */
.card--lg{ gap:1.2rem; padding:clamp(1.8rem,3vw,2.8rem); }
.ticks{ display:grid; gap:.55rem; list-style:none; }
.ticks li{
  position:relative; padding-left:1.5rem; font-size:.94rem;
  color:var(--on-dark-dim);
}
.section--light .ticks li,.section--cream2 .ticks li{ color:var(--on-light-dim); }
.ticks li::before{
  content:""; position:absolute; left:.15rem; top:.52em;
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--gold);
}

.specs{ display:grid; gap:0; border-top:1px solid var(--on-dark-line); }
.section--light .specs,.section--cream2 .specs{ border-color:var(--on-light-line); }
.specs__row{
  display:grid; grid-template-columns:minmax(7rem,10rem) 1fr; gap:1rem;
  padding-block:.9rem; border-bottom:1px solid var(--on-dark-line);
  font-size:.92rem;
}
.section--light .specs__row,.section--cream2 .specs__row{ border-color:var(--on-light-line); }
.specs__row dt{
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-dim); padding-top:.25em;
}
.section--light .specs__row dt,.section--cream2 .specs__row dt{ color:var(--on-light-dim); }
.specs__row dd{ margin:0; }

.notes{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  padding:.5em 1em; border:1px solid var(--on-dark-line); border-radius:100px;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.section--light .chip,.section--cream2 .chip{ border-color:var(--on-light-line); }
.chip--gold{ border-color:rgba(192,149,83,.45); color:var(--gold); }

.roast{ display:flex; align-items:center; gap:.4rem; }
.roast i{
  width:.7rem; height:.7rem; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:var(--gold); opacity:.26;
}
.roast i.on{ opacity:1; }
.prod--silver .roast i{ background:var(--silver); }


/* ---------- Galería de empaque (frente / reverso) ----------
   Mejora progresiva: sin JS las dos vistas se apilan y se ven ambas, que es
   contenido perfectamente válido. initGallery() agrega .is-live y entonces
   pasan a compartir celda y aparecen los botones. Así, si el JS falla, no se
   pierde ninguna foto. */
.gal{ display:grid; gap:clamp(1rem,2vw,1.6rem); justify-items:center; width:100%; }
.gal__stage{ display:grid; width:100%; justify-items:center; gap:clamp(1rem,2vw,1.6rem); }

.gal.is-live .gal__stage{ gap:0; }
.gal.is-live .gal__img{
  grid-area:1/1;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.gal.is-live .gal__img.is-on{ opacity:1; visibility:visible; }

/* por encima del halo de .prod__media, en pintado y en clics */
.gal__pick{ position:relative; z-index:1; display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; }
.gal__btn{
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.85em 1.5em; cursor:pointer;
  color:var(--on-light-dim); background:none;
  border:1px solid var(--on-light-line); border-radius:100px;
  transition:color .35s, border-color .35s, background .35s;
}
.gal__btn:hover{ color:var(--on-light); border-color:rgba(192,149,83,.5); }
.gal__btn[aria-pressed="false"]{ border-style:dashed; }
.gal__btn[aria-pressed="true"]{
  color:var(--cream); background:var(--gold); border-color:var(--gold);
}
.gal__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* sobre fondo tinta (por si la galería se usa en una sección oscura) */
.section:not(.section--light):not(.section--cream2) .gal__btn{
  color:var(--on-dark-dim); border-color:var(--on-dark-line);
}
.section:not(.section--light):not(.section--cream2) .gal__btn[aria-pressed="true"]{
  color:var(--ink); background:var(--gold); border-color:var(--gold);
}

/* ---------- 11. Grids editoriales ---------- */
.grid{ display:grid; gap:clamp(1.5rem,3vw,2.6rem); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.split{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,6vw,7rem); align-items:start;
}
.sticky{ position:sticky; top:clamp(6rem,14vh,9rem); }

.card{
  display:grid; gap:1rem; align-content:start;
  padding:clamp(1.6rem,2.6vw,2.4rem);
  border:1px solid var(--on-dark-line); border-radius:2px;
  background:linear-gradient(180deg, rgba(243,238,230,.035), transparent);
  transition:border-color .5s, transform .7s var(--ease-out), background .5s;
}
.card:hover{ border-color:rgba(192,149,83,.42); transform:translateY(-4px); }
.section--light .card,.section--cream2 .card{
  border-color:var(--on-light-line); background:rgba(255,255,255,.42);
}
.card__n{
  font-family:var(--serif); font-size:1.5rem; line-height:1; color:var(--gold);
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
.card h3{ font-family:var(--serif); font-size:1.5rem; line-height:1.14; letter-spacing:-.01em; }

.stat{ display:grid; gap:.5rem; }
.stat__num{
  font-family:var(--serif); font-size:clamp(2.8rem,6vw,5rem); line-height:.9;
  letter-spacing:-.03em; color:var(--gold-hi);
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}.section--light .stat__num,
.section--cream2 .stat__num{ color:var(--gold-lo); }
.stat__lbl{
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-dim); max-width:14rem;
}.section--light .stat__lbl,
.section--cream2 .stat__lbl{ color:var(--on-light-dim); }

/* pasos numerados */
.steps{ counter-reset:s; display:grid; gap:0; }
.step{
  counter-increment:s; display:grid;
  grid-template-columns:clamp(3.5rem,7vw,7rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem); align-items:start;
  padding-block:clamp(2rem,4vw,3.4rem);
  border-top:1px solid var(--on-dark-line);
}.section--light .step,
.section--cream2 .step{ border-color:var(--on-light-line); }
.step:last-child{ border-bottom:1px solid var(--on-dark-line); }.section--light .step:last-child,
.section--cream2 .step:last-child{ border-color:var(--on-light-line); }
.step::before{
  content:"0" counter(s);
  font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.6rem); line-height:1;
  color:var(--gold); opacity:.85;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
.step__body{ display:grid; gap:.8rem; max-width:38rem; }
.step h3{ font-family:var(--serif); font-size:var(--fs-h3); line-height:1.1; }

/* figura editorial */
.figure{ display:grid; gap:1rem; }
.figure figcaption{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-dim);
}
.section--light .figure figcaption,
.section--cream2 .figure figcaption{ color:var(--on-light-dim); }
.ratio{ position:relative; overflow:hidden; border-radius:2px; background:var(--ink-3); }
.ratio > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ratio--43{ aspect-ratio:4/3; }
.ratio--11{ aspect-ratio:1/1; }
.ratio--169{ aspect-ratio:16/9; }
.ratio--34{ aspect-ratio:3/4; }
.zoom img,.zoom video{ transition:transform 1.4s var(--ease-out); }
.zoom:hover img,.zoom:hover video{ transform:scale(1.05); }

/* banda full-bleed con video */
.band{
  position:relative; overflow:hidden;
  padding-block:clamp(6rem,15vw,13rem);
  isolation:isolate; text-align:center;
}
.band__bg{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
}
.band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(11,9,8,.9), rgba(11,9,8,.72) 70%),
    linear-gradient(rgba(11,9,8,.8),rgba(11,9,8,.92));
}

/* La foto del almacén se sostiene en sus haces de luz; el velo estándar de
   .band los apagaba por completo. Aquí se aclara y se recorta el degradado
   hacia el centro, donde va el texto. */
.band--luz::after{
  background:radial-gradient(120% 90% at 50% 50%, rgba(11,9,8,.82) 0%, rgba(11,9,8,.5) 55%, rgba(11,9,8,.35) 100%);
}
.band--luz .band__bg{ opacity:.95; }

/* ---------- Banda con textura de marca ----------
   A diferencia de .band, que va sobre fotografía, aquí el fondo es el patrón
   de la marca: se repite y se oscurece para que el texto encima aguante. */
.band--tex{ background:var(--ink); }
.band--tex .band__bg{
  object-fit:cover; opacity:.5;
}
.band--tex::after{
  background:linear-gradient(180deg, rgba(11,9,8,.62), rgba(11,9,8,.86));
}


/* tabla comparativa */
.table-wrap{ overflow-x:auto; }
.ctable{ width:100%; border-collapse:collapse; min-width:34rem; text-align:left; }
.ctable th,.ctable td{
  padding:1.1rem 1.2rem; border-bottom:1px solid var(--on-dark-line); vertical-align:top;
}.section--light .ctable th,
.section--cream2 .ctable th,
.section--light .ctable td,
.section--cream2 .ctable td{ border-color:var(--on-light-line); }
.ctable thead th{
  font-family:var(--serif); font-size:1.25rem; font-weight:500; letter-spacing:-.01em;
}
.ctable tbody th{
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-dim); width:12rem;
}.section--light .ctable tbody th,
.section--cream2 .ctable tbody th{ color:var(--on-light-dim); }

/* ---------- 12. Formularios ---------- */
.form{ display:grid; gap:clamp(1.2rem,2vw,1.6rem); }
.form__fields{ display:grid; gap:clamp(1.2rem,2vw,1.6rem); }
.field{ display:grid; gap:.55rem; }
.field > span{
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-dim);
}.section--light .field > span,
.section--cream2 .field > span{ color:var(--on-light-dim); }
.field input,.field textarea,.field select{
  width:100%; padding:.95em 1.1em;
  background:rgba(243,238,230,.04);
  border:1px solid var(--on-dark-line); border-radius:2px;
  transition:border-color .35s, background .35s;
}.section--light .field input,
.section--cream2 .field input,
.section--light .field textarea,
.section--cream2 .field textarea,
.section--light .field select,
.section--cream2 .field select{
  background:rgba(255,255,255,.6); border-color:var(--on-light-line);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold); background:rgba(243,238,230,.07);
}.section--light .field input:focus,
.section--cream2 .field input:focus,
.section--light .field textarea:focus,
.section--cream2 .field textarea:focus,
.section--light .field select:focus,
.section--cream2 .field select:focus{
  background:#fff;
}
.field textarea{ resize:vertical; min-height:7.5rem; }
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C09553' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1em center;
  padding-right:2.6em;
}
.field--error input,.field--error textarea,.field--error select{ border-color:#B4553F; }
.field__err{ font-size:.74rem; color:#D97A62; display:none; }
.field--error .field__err{ display:block; }
.form__note{ font-size:.8rem; color:var(--on-dark-dim); }.section--light .form__note,
.section--cream2 .form__note{ color:var(--on-light-dim); }
.form__ok{
  display:none; gap:.6rem; padding:1.1rem 1.3rem; border-radius:2px;
  border:1px solid rgba(192,149,83,.45); background:rgba(192,149,83,.1);
  font-size:.92rem;
}
.form.is-sent .form__ok{ display:grid; }
.form.is-sent .form__fields,.form.is-sent .form__submit{ display:none; }
.checkbox{
  display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:start;
  font-size:.86rem; color:var(--on-dark-dim); cursor:pointer;
}.section--light .checkbox,
.section--cream2 .checkbox{ color:var(--on-light-dim); }
.checkbox input{ width:1.05rem; height:1.05rem; margin-top:.28rem; accent-color:var(--gold); }
.checkbox a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }



/* ---------- Índice de presentaciones ----------
   Fila de formatos bajo el hero de Productos: cada uno enlaza a su ficha.
   Las imágenes tienen proporciones distintas (bolsa vertical, kit apaisado),
   así que la altura la fija el contenedor y cada una se ajusta por dentro con
   object-fit:contain: así ninguna se deforma ni desalinea la fila. */
/* El header es fijo: sin este margen, saltar a una sección la deja debajo de él. */
section[id]{ scroll-margin-top:clamp(5rem,9vw,7rem); }

.fmts{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem,2.2vw,2rem);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:860px){ .fmts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.fmt__link{
  display:grid; gap:.35rem; justify-items:center; text-align:center;
  padding:clamp(1rem,2vw,1.6rem) clamp(.6rem,1.4vw,1.2rem);
  border:1px solid var(--on-dark-line); border-radius:2px;
  background:linear-gradient(180deg, rgba(243,238,230,.035), transparent);
  text-decoration:none; color:inherit;
  transition:border-color .5s, transform .7s var(--ease-out), background .5s;
}
.fmt__link:hover{
  border-color:rgba(192,149,83,.42); transform:translateY(-4px);
  background:linear-gradient(180deg, rgba(243,238,230,.06), transparent);
}
.fmt__link:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.fmt__img{
  width:auto; height:clamp(9rem,15vw,13rem);
  max-width:100%; object-fit:contain;
  margin-bottom:.7rem;
  transition:transform .7s var(--ease-out);
}
.fmt__link:hover .fmt__img{ transform:scale(1.05); }

.fmt__name{ font-family:var(--serif); font-size:1.06rem; line-height:1.2; }
.fmt__meta{ font-size:.78rem; color:var(--on-dark-dim); }
.fmt__price{
  font-family:var(--serif); font-size:1.16rem; color:var(--gold); margin-top:.2rem;
}
.section--light .fmt__link,.section--cream2 .fmt__link{
  border-color:var(--on-light-line); background:rgba(255,255,255,.42);
}
.section--light .fmt__meta,.section--cream2 .fmt__meta{ color:var(--on-light-dim); }

/* ---------- 12 bis. Iconografía de marca ----------
   Line art dorado sobre transparencia. Los archivos vienen recortados al
   contenido, así que cada uno tiene su propia proporción: se fija la altura y
   el ancho se deja en auto para no deformarlos. */
.ico{
  display:block; width:auto; height:var(--ico-h, 44px);
  opacity:.92;
}
/* El line art es dorado claro, pensado para fondo tinta. Sobre crema se
   oscurece un poco con un filtro para que no se lave. */
.section--light .ico,.section--cream2 .ico{ filter:brightness(.72) saturate(1.15); }

/* icono arriba de cada cifra en la fila de datos */
.stat .ico{ --ico-h:52px; margin-bottom:.9rem; }

/* icono junto al número en las tarjetas */
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.card__head .ico{ --ico-h:40px; }
.card__head .card__n{ margin:0; }

/* ---------- Selector de molienda ----------
   Radios reales: llegan gratis el soporte de teclado, el grupo con nombre y la
   semántica para lector de pantalla. El input se oculta visualmente pero sigue
   siendo el elemento enfocable, así que el foco se dibuja en el <span>. */
.grind{
  border:0; padding:0; margin:0; display:flex; gap:.35rem; grid-column:1/-1;
}
.grind__opt{ position:relative; display:block; cursor:pointer; }
.grind__opt input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; margin:0; cursor:pointer;
}
.grind__opt span{
  display:block; padding:.85em 1.5em;
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-dim);
  border:1px solid var(--on-dark-line); border-radius:100px;
  transition:color .35s, border-color .35s, background .35s;
}
.grind__opt:hover span{ color:var(--on-dark); border-color:rgba(192,149,83,.5); }
.grind__opt input:not(:checked) + span{ border-style:dashed; }
.grind__opt input:checked + span{
  color:var(--ink); background:var(--gold); border-color:var(--gold);
}
.grind__opt input:focus-visible + span{
  outline:2px solid var(--gold-hi); outline-offset:2px;
}
.section--light .grind__opt span,.section--cream2 .grind__opt span{
  color:var(--on-light-dim); border-color:var(--on-light-line);
}
.section--light .grind__opt:hover span,.section--cream2 .grind__opt:hover span{
  color:var(--on-light);
}
.section--light .grind__opt input:checked + span,
.section--cream2 .grind__opt input:checked + span{
  color:var(--cream); background:var(--gold); border-color:var(--gold);
}
/* El .var es una rejilla de 3 columnas; el selector ocupa su propio renglón. */
.var--pick{ row-gap:.85rem; }

/* ---------- 13. Contacto ---------- */
.cdata{ display:grid; gap:0; border-top:1px solid var(--on-dark-line); }
.cdata__row{ padding-block:1.3rem; border-bottom:1px solid var(--on-dark-line); display:grid; gap:.35rem; }
.cdata__row dt{
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.cdata__row dd{ margin:0; font-size:1.05rem; }
.cdata__row a:hover{ color:var(--gold); }

/* ---------- 14. Legales ---------- */
.legal{ display:grid; gap:clamp(1.4rem,2.6vw,2rem); max-width:48rem; }
.legal h2{
  font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.12;
  letter-spacing:-.01em; margin-top:clamp(1rem,2vw,1.6rem);
}
.legal h3{ font-size:1.05rem; font-weight:700; }
.legal p,.legal li{ color:var(--on-dark-dim); }
.legal ul{ display:grid; gap:.7rem; padding-left:1.3rem; list-style:disc; }
.legal ol{ display:grid; gap:.7rem; padding-left:1.3rem; list-style:decimal; }
.legal a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.note{
  padding:1.1rem 1.3rem; border-left:2px solid var(--gold);
  background:rgba(192,149,83,.07); font-size:.9rem; color:var(--on-dark-dim);
}
.note strong{ color:var(--gold); }

/* ---------- 14 bis. Componentes de tema oscuro usados sobre crema ----------
   .note, .cdata y .legal nacieron para fondos tinta y traen el color de texto
   claro fijo. Al colocarlos en una sección crema el cuerpo quedaba casi
   invisible (pasó con el aviso de conservación del grano en Productos).
   Estos overrides los dejan seguros en cualquiera de los dos fondos. */
.section--light .note,.section--cream2 .note{
  color:var(--on-light-dim);
  background:rgba(133,99,48,.08);
  border-left-color:var(--gold);
}
.section--light .note strong,.section--cream2 .note strong{ color:var(--on-light); }
.section--light .cdata,.section--cream2 .cdata,
.section--light .cdata__row,.section--cream2 .cdata__row{ border-color:var(--on-light-line); }
.section--light .cdata__row dt,.section--cream2 .cdata__row dt{ color:var(--on-light-dim); }
.section--light .legal p,.section--light .legal li,
.section--cream2 .legal p,.section--cream2 .legal li{ color:var(--on-light-dim); }

/* ---------- 15. Footer ---------- */
.footer{
  padding-block:clamp(4rem,8vw,7rem) clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--on-dark-line); background:var(--ink);
}
.footer__top{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(2.4rem,5vw,4.5rem); padding-bottom:clamp(3rem,6vw,5rem);
}
.footer__mark{ display:grid; gap:1.4rem; align-content:start; max-width:24rem; }
.footer__mark .wordmark{ align-items:center; gap:1rem; }
.footer__mark .wordmark__seal{ width:76px; height:76px; }
.footer__mark .wordmark__name{ font-size:1.35rem; }
.footer__mark .wordmark__word{ font-size:.62rem; }
@media (max-width:600px){
  .footer__mark .wordmark__seal{ width:62px; height:62px; }
  .footer__mark .wordmark__name{ font-size:1.15rem; }
}
.footer__col{ display:grid; gap:1rem; align-content:start; }
.footer__col h2,.footer__col .footer__h{
  font-family:var(--sans);
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.6; color:var(--gold); margin-bottom:.3rem;
}
.footer__col a,.footer__col li{ font-size:.94rem; color:var(--on-dark-dim); }
.footer__col a{ transition:color .3s; }
.footer__col a:hover{ color:var(--on-dark); }
.footer__bar{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
  padding-top:clamp(1.6rem,3vw,2.2rem); border-top:1px solid var(--on-dark-line);
  font-size:.76rem; color:var(--on-dark-dim);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; }
.footer__legal a:hover{ color:var(--gold); }
/* Crédito de autoría. Va al final de la barra y en pantallas anchas se separa
   de los enlaces legales para que no se lean como un mismo grupo. */
.footer__by{ color:var(--on-dark-dim); }
.footer__by a{ color:var(--on-dark-dim); border-bottom:1px solid transparent; transition:color .35s, border-color .35s; }
.footer__by a:hover{ color:var(--gold); border-bottom-color:var(--gold); }
@media (min-width:900px){
  .footer__bar{ justify-content:flex-start; }
  .footer__bar > :first-child{ margin-right:auto; }
}
.pending{
  display:inline-block; padding:.2em .55em; border-radius:2px;
  background:rgba(192,149,83,.14); color:var(--gold);
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  vertical-align:middle;
}

/* ---------- 16. Responsive ---------- */
@media (max-width:1080px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__mark{ grid-column:1/-1; }
}
@media (max-width:960px){
  .nav{ display:none; }
  .burger{ display:block; }
  .grid--4,.grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split{ grid-template-columns:1fr; }
  .sticky{ position:static; }
  .prod{ grid-template-columns:1fr; }
  .prod--flip .prod__media{ order:0; }
  .hero__foot{ align-items:flex-start; }
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:.8rem; }
  .specs__row{ grid-template-columns:1fr; gap:.25rem; }
  .footer__top{ grid-template-columns:1fr; }
  .header__cta{ display:none; }
}