/* ═══════════════════════════════════════════════════════════════════
   BASE · reset, tipografía, layout, header y footer
   Lee todo de tokens.css. Ningún color literal vive acá.
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
/* Sin esto, cualquier ancla del menú deja el título de la sección
   tapado por el header fijo. */
html{-webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--hdr) + var(--cinta-h) + 16px)}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:var(--fb);font-size:var(--t-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.sin-scroll{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

:focus-visible{outline:2px solid var(--oliva-cl);outline-offset:3px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--oliva);color:var(--crema);padding:12px 20px}
.saltar:focus{left:0}

/* ── Tipografía ─────────────────────────────────────────────────────
   Los títulos de sección van en versalitas con tracking abierto, que
   es la firma tipográfica de Skinome. Sin el letter-spacing, Space
   Grotesk en mayúsculas se apelmaza. */
.d1,.d2,.d3{font-family:var(--fs);font-weight:500;line-height:1.04;
  letter-spacing:var(--tr-tight);text-wrap:balance}
.d1{font-size:var(--t-h1)}
.d2{font-size:var(--t-h2)}
.d3{font-size:var(--t-h3);line-height:1.2}

.caps{font-family:var(--fs);font-weight:500;font-size:var(--t-h2);
  line-height:1.1;text-transform:uppercase;letter-spacing:.04em}

.kicker{font-family:var(--fs);font-size:var(--t-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--tr-caps);
  color:var(--tinta-3)}

.lead{font-size:var(--t-lead);line-height:1.55;color:var(--tinta-2);
  max-width:56ch;text-wrap:pretty}

.precio{font-family:var(--fb);font-variant-numeric:tabular-nums;
  font-weight:500;letter-spacing:0}

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.sect{padding-block:var(--sect)}
.sect--fondo2{background:var(--fondo-2)}
.sect--oscura{background:var(--oliva);color:var(--crema)}
.sect--oscura .lead{color:var(--crema-2)}
.sect--oscura .kicker{color:var(--crema-2)}

/* Apilado en móvil: con flex en fila, el enlace de la derecha se parte
   en dos renglones («Ver la / línea») y queda desalineado del título. */
.cab{display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;margin-bottom:clamp(24px,3vw,44px)}
.cab p{margin-top:10px}
@media(min-width:640px){
  .cab{flex-direction:row;align-items:end;justify-content:space-between;gap:24px}
}

/* ── Botones ────────────────────────────────────────────────────────
   El CTA es fondo Oliva Profundo con texto Crema. Es regla de
   brand/04 verificada por contraste, no una preferencia. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  gap:10px;min-height:50px;padding:0 30px;border-radius:var(--radio);
  font-family:var(--fs);font-size:var(--t-sm);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--tr-caps);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  cursor:pointer}
.btn--cta{background:var(--oliva);color:var(--crema)}
.btn--cta:hover{background:var(--oliva-h)}
.btn--linea{border:1px solid var(--tinta);color:var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--fondo)}
.btn--clara{background:var(--crema);color:var(--oliva)}
.btn--clara:hover{background:#fff}
.btn--fantasma{border:1px solid var(--crema-2);color:var(--crema)}
.btn--fantasma:hover{background:var(--crema);color:var(--oliva)}
.btn--sm{min-height:40px;padding:0 20px}

/* ── Header ─────────────────────────────────────────────────────────
   Arranca transparente sobre el hero y se vuelve sólido al scrollear.
   La variable --hdr existe porque el hero necesita saber cuánto mide
   para centrarse en el espacio que queda. */
:root{--hdr:64px}
@media(min-width:1024px){ :root{--hdr:76px} }

/* La cinta y el header van juntos dentro de .top. Al scrollear, el
   bloque entero sube exactamente el alto de la cinta: la cinta sale de
   pantalla y el header queda pegado arriba, sin salto ni superposición.
   Es más simple que animar `top`, y no reflowea. */
.top{position:fixed;inset:0 0 auto;z-index:80;
  transition:transform .35s var(--e-drawer)}
.top.compacta{transform:translateY(calc(-1 * var(--cinta-h)))}
.top.oculta{transform:translateY(-100%)}

/* El relleno del header es un TELÓN QUE BAJA, no un fundido: una capa
   absoluta que crece de height:0 al alto del header en .25s. Es
   exactamente lo que hace Skinome, y se percibe distinto que una
   opacidad — se lee como que la barra se despliega desde el borde.
   El color del texto viaja en una variable para cambiar al mismo
   tiempo y con la misma curva. */
.hdr{position:relative;height:var(--hdr);
  --hdr-txt:var(--crema);      /* estado transparente, sobre la foto */
  --hdr-bg-h:0px;              /* alto del telón                     */
  --hdr-bg-color:var(--fondo); /* color del telón ya desplegado      */
  --hdr-bg-borde:var(--borde); /* su borde inferior                  */
  --cont-bg:var(--crema);      /* la burbuja del contador            */
  --cont-fg:var(--oliva);
  color:var(--hdr-txt);
  transition:color .25s ease}

.hdr__bg{position:absolute;top:0;left:0;width:100%;
  height:var(--hdr-bg-h);
  background:var(--hdr-bg-color);border-bottom:1px solid var(--hdr-bg-borde);
  transition:height .25s ease,background-color .25s ease;
  pointer-events:none;z-index:0}

/* Velo superior. Sin él, los links claros sobre una foto clara quedan
   justo en el límite de lo legible — el hero de Verde Oliva es un
   olivar a contraluz, no un fondo oscuro. Se apaga al bajar el telón. */
.hdr::before{content:'';position:absolute;inset:0 0 auto;height:220%;
  background:linear-gradient(180deg,rgba(24,22,20,.38) 0%,rgba(24,22,20,0) 100%);
  pointer-events:none;transition:opacity .25s ease;z-index:0}

/* Páginas sin hero: el header arranca relleno. Un header transparente
   con texto crema sobre el beige del catálogo es texto invisible. */
.hdr--fijo,.hdr:hover,.hdr:focus-within,.hdr.solida{
  --hdr-txt:var(--tinta);--hdr-bg-h:var(--hdr);
  --cont-bg:var(--oliva);--cont-fg:var(--crema)}
.hdr--fijo::before,.hdr:hover::before,
.hdr:focus-within::before,.hdr.solida::before{opacity:0}

/* Telón oscuro: cuando el bloque que quedó detrás del header (ver
   scrollHeader() en header.js) es oliva —.sect--oscura, el footer,
   cualquier otro que reutilice ese mismo fondo—, el telón ya desplegado
   se pinta oliva en vez de crema, con el mismo par texto/logo claro que
   usa el header transparente sobre el hero. Tres clases de selector
   (vs. las dos de la regla de arriba) le ganan la especificidad sin
   depender del orden en la hoja. */
.hdr.solida.hdr--oscuro,.hdr--fijo.hdr--oscuro{
  --hdr-txt:var(--crema);--hdr-bg-color:var(--oliva);
  --hdr-bg-borde:var(--oliva-h);
  --cont-bg:var(--crema);--cont-fg:var(--oliva)}
.hdr.solida.hdr--oscuro .hdr__logo-img--claro,
.hdr--fijo.hdr--oscuro .hdr__logo-img--claro{opacity:1}
.hdr.solida.hdr--oscuro .hdr__logo-img--oscura,
.hdr--fijo.hdr--oscuro .hdr__logo-img--oscura{opacity:0}
/* El halo de :hover en los íconos asume fondo claro (ver comentario
   más abajo); sobre telón oliva un negro al 6% casi no se ve. */
.hdr--oscuro .icono-btn:hover{background:rgba(255,255,255,.14)}

.hdr__in{position:relative;z-index:1;
  display:flex;align-items:center;gap:20px;height:100%}
/* El isotipo cruza entre dos PNG (crema / oliva) con la misma curva y
   el mismo gatillo que --hdr-txt: un logo rasterizado no puede
   heredar currentColor como el texto. .25s ease, igual que el telón,
   para que el cambio se note lo menos posible. */
.hdr__logo{position:relative;display:inline-flex;align-items:center;
  min-height:44px;width:26px}
.hdr__logo-img{position:absolute;left:0;top:50%;translate:0 -50%;
  width:26px;height:auto;transition:opacity .25s ease}
.hdr__logo-img--claro{opacity:1}
.hdr__logo-img--oscura{opacity:0}
.hdr--fijo .hdr__logo-img--claro,.hdr:hover .hdr__logo-img--claro,
.hdr:focus-within .hdr__logo-img--claro,.hdr.solida .hdr__logo-img--claro{opacity:0}
.hdr--fijo .hdr__logo-img--oscura,.hdr:hover .hdr__logo-img--oscura,
.hdr:focus-within .hdr__logo-img--oscura,.hdr.solida .hdr__logo-img--oscura{opacity:1}
.hdr__nav{display:none;flex:1;justify-content:center;gap:28px}
@media(min-width:1024px){.hdr__nav{display:flex}}
.hdr__acc{display:flex;align-items:center;gap:6px;margin-left:auto}


.icono-btn{display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;transition:background .2s ease}
/* Un solo halo: dentro del header, tener el mouse encima de un ícono
   implica tener el mouse encima del header, así que el telón ya bajó —
   claro la mayor parte del tiempo, salvo con .hdr--oscuro (ver arriba),
   que pisa este halo con uno claro-sobre-oliva. */
.icono-btn:hover{background:rgba(0,0,0,.06)}
.icono-btn svg{width:20px;height:20px;fill:currentColor}

.icono-btn{position:relative}
/* Posicionado contra el botón, no contra el header: antes dependía de
   la posición estática del <span>, que es frágil y se corre en cuanto
   cambia el layout de la barra. */
.contador{position:absolute;top:2px;right:2px;
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--cont-bg);color:var(--cont-fg);
  font-family:var(--fs);font-size:10px;font-weight:600;line-height:17px;
  text-align:center;transition:background .25s ease,color .25s ease}

/* ── Footer ─────────────────────────────────────────────────────── */
.ft{background:var(--oliva);color:var(--crema);padding-block:var(--sect) 40px}
.ft a:hover{color:#fff}
.ft__news{max-width:520px;margin-inline:auto;text-align:center;
  padding-bottom:clamp(48px,6vw,80px);
  border-bottom:1px solid rgba(247,244,236,.18)}
.ft__campo{display:flex;gap:8px;margin-top:24px}
.ft__campo input{flex:1;min-height:50px;padding:0 16px;
  background:transparent;border:1px solid var(--crema-2);
  border-radius:var(--radio);color:var(--crema)}
.ft__campo input::placeholder{color:rgba(247,244,236,.5)}
.ft__campo input:focus{outline:none;border-color:var(--crema)}
.ft__cols{display:grid;gap:36px;padding-top:clamp(48px,6vw,80px);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ft__cols h3{font-family:var(--fs);font-size:var(--t-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--tr-caps);
  color:var(--crema-2);margin-bottom:16px}
.ft__cols li + li{margin-top:10px}
.ft__cols a{font-size:var(--t-sm)}
.ft__pie{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:center;margin-top:clamp(40px,5vw,64px);padding-top:24px;
  border-top:1px solid rgba(247,244,236,.18);
  font-size:var(--t-sm);color:var(--crema-2)}