/* ============================================================
   Cervecería Cedral — base de todas las páginas: fuentes, colores de marca, enlace de salto,
   verificación de edad, header, menú móvil, pie y espacios de foto F##.
   Cada página suma su hoja después de esta: css/paginas/<página>.css (el CSS de su mockup
   aprobado, tal cual) o css/paginas/inicio.css (páginas sin mockup). Nada de aquí toca el
   contenido de <main>: header, pie y verificación de edad usan clases que ningún mockup usa.
   ============================================================ */

/* Montserrat servida desde el sitio (OFL 1.1, fonts/OFL.txt): el mismo archivo variable de
   Google (300–800). latin-ext solo se descarga si la página usa sus caracteres (el ₡). */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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}
/* respaldo con las medidas de Montserrat: el texto no salta cuando llega la fuente */
@font-face{font-family:'Montserrat Respaldo';src:local('Arial');size-adjust:112.8%;
  ascent-override:85.8%;descent-override:22.3%;line-gap-override:0%}

:root{
  /* Principales */
  --verde:#006339;      /* Abundant Green */
  --khaki:#A39264;
  --beech:#C2C18D;
  --winery:#7E212A;
  --saffron:#FFA500;
  /* Secundarios */
  --pino:#223631;       /* Pine Grove */
  --bronce:#907954;
  --cedro:#928E64;
  --cabernet:#64242E;
  --oro:#CB8E16;
  /* Neutros */
  --crema:#F7F3EA;
  --tinta:#1a1f1c;
  --linea:rgba(0,99,57,.16);
  /* Color por cerveza */
  --c-impar:#8DC63F; --c-calin:#FFA500; --c-negrita:#7E212A;
  --c-ita:#E8365D;   --c-california:#A39264; --c-light:#7FB2D9;
  /* khaki para texto: el khaki de marca oscurecido hasta contraste AA sobre hueso y blanco */
  --khaki-t:#6f6238;
  /* Colores de texto con contraste AA (auditoría del 18.09.2026): un valor, un lugar.
     --muted: el gris de texto secundario sobre papel (#EFEBE1: 4,50; antes #6B7368, 4,12). Lo
       usan todas las páginas claras; las oscuras (Cervezas, Agua) tienen el suyo.
     --copper-texto: el cobre en texto chico (#F3F0E8: 4,91; sobre la estación «rama» de El oficio,
       #F0E9DF: 4,64 — #A35A29 daba 4,30 ahí); el --copper de marca queda para
       rayas, marcas y textos grandes.
     --khaki-claro: khaki para texto sobre el verde del pie (#12211C: 4,59).
     --rule-texto: el gris de las rayas cuando hace de texto (el «—» de lo que falta elegir). */
  --muted:#656D62;
  --copper-texto:#9B5627;
  --khaki-claro:#908665;
  --rule-texto:#7A766C;
  /* alto del header (72 px; 60 px hasta 1040) y objetivo táctil mínimo en pantallas táctiles */
  --alto-top:72px;
  --toque:44px;
  --f:'Montserrat','Montserrat Respaldo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --wrap:1280px;
  /* el borde de los bloques a sangre: el mismo eje del contenedor, pero sin cortar el fondo */
  --borde:max(clamp(16px,5vw,64px),calc((100% - var(--wrap))/2));
  /* igual, pero medido contra la ventana: para lo que vive dentro de un carril más ancho
     que la pantalla (la vitrina de Cervezas), donde 100% no es el ancho visible */
  --borde-vp:max(clamp(16px,5vw,64px),calc((100vw - var(--wrap))/2));
}

body{margin:0}
/* 05.10.2026 (Diego): el lugar de la barra de desplazamiento queda siempre reservado. Donde la
   barra ocupa ancho (Windows, o macOS con las barras siempre a la vista), la página ya no se
   corre de lado cuando la barra aparece o se va: al cargar, o al abrirse la verificación de
   edad o el menú (html.sin-scroll). Con barras superpuestas no cambia nada. */
html{scrollbar-gutter:stable}
[hidden]{display:none!important}
html.sin-scroll{overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header, menú, verificación de edad y pie: su propia tipografía y su propia caja */
.salto,.gate,.top,.menu-movil,.pie{font-family:var(--f);line-height:1.55;-webkit-font-smoothing:antialiased}
.gate *,.gate *::before,.gate *::after,.top *,.top *::before,.top *::after,
.menu-movil *,.pie *,.pie *::before,.pie *::after{box-sizing:border-box}
.gate :focus-visible,.top :focus-visible,.menu-movil :focus-visible,.pie :focus-visible,
.salto:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}

/* ---------- enlace de salto ---------- */
.salto{position:absolute;left:12px;top:-60px;z-index:300;background:var(--verde);color:#fff;
  padding:10px 16px;font-size:13px;font-weight:700;text-decoration:none;border-radius:2px}
.salto:focus{top:12px}

/* ---------- header fijo y compacto: se esconde al bajar, reaparece al subir ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(247,243,234,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--linea);transition:transform .28s ease}
.top.oculto{transform:translateY(-100%)}
/* dentro del recorrido de Agua el header desaparece del todo (brief 3.4) */
.top.fuera{transform:translateY(-100%)}
/* Contenedor global (corrección 16.09.2026): los mockups se aprobaron en un marco de ~900 px;
   sin ancho máximo el texto se estira en pantallas grandes. Todo el contenido vive aquí. */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,5vw,64px);box-sizing:border-box}
.top-in,.pie-in{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,5vw,64px)}
.top-in{display:flex;align-items:center;gap:28px;height:var(--alto-top)}
.top-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.top-logo img{display:block;height:44px;width:auto}
/* Escritorio ancho (18.09.2026, Diego): a 44 px el nombre bajo el árbol no se leía a 1920 y la
   marca no se registraba en la primera pantalla. 64 px de alto, proporción intacta; entra en los
   72 de la barra (4 px de aire), así que la barra no crece. Celular y tablet quedan como estaban. */
@media (min-width:1200px){.top-logo img{height:64px}}
.top .nav{display:flex;gap:24px;margin-left:auto;font-size:13.5px;font-weight:600}
.top .nav a{text-decoration:none;color:var(--pino);padding:6px 0;border-bottom:2px solid transparent}
.top .nav a:hover,.top .nav a[aria-current]{border-color:var(--verde)}
.topcta{display:flex;gap:10px;flex:0 0 auto;align-items:center}
/* selector ES | EN (brief §6): solo en Visítenos, Comprar y sus pares en inglés.
   16.09.2026: al extremo derecho de la barra, con su propio aire y una raya fina que lo separa
   del grupo del menú y Comprar. No cambia el alto de la barra. */
.top-idioma{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;color:var(--khaki-t)}
.top .top-idioma{flex:0 0 auto;margin-left:20px;padding-left:20px;
  border-left:1px solid var(--linea)}
.top-idioma a{color:var(--khaki-t);text-decoration:none;padding:4px 2px;border-bottom:2px solid transparent}
/* 05.10.2026 (Diego): las páginas sin par en inglés (Club, El oficio, las legales) no llevan
   selector, y el menú ocupaba su lugar: al entrar a una de ellas se corría 127 px. Ahora la
   barra guarda el hueco del selector, vacío e invisible (partials/header.py), y el menú queda
   en el mismo sitio en todo el sitio. */
.top-idioma span{padding:4px 2px;border-bottom:2px solid transparent}
.top .top-idioma-hueco{visibility:hidden}
.top-idioma a:hover{color:var(--verde)}
.top-idioma a[aria-current]{color:var(--pino);border-color:var(--verde)}
.top-idioma i{font-style:normal;opacity:.45}
.top-comprar{display:inline-block;text-decoration:none;font-size:13px;font-weight:700;padding:11px 22px;
  border-radius:2px;letter-spacing:.03em;white-space:nowrap;background:var(--verde);color:#fff;
  transition:opacity .18s}
.top-comprar:hover{opacity:.88}
.burger{display:none;width:40px;height:40px;border:1px solid var(--linea);background:#fff;
  border-radius:4px;cursor:pointer;padding:0;flex-direction:column;gap:4px;
  align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.8px;background:var(--pino);transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
@media(max-width:1040px){
  :root{--alto-top:60px}
  .top-in{gap:14px}
  .top-logo img{height:38px}
  .top .nav{display:none}
  .topcta{margin-left:auto}
  .burger{display:flex}
  /* en móvil el selector vive al final del menú desplegable, no en la barra */
  .top .top-idioma{display:none}
}
@media(max-width:600px){.top-in,.pie-in{padding:0 22px}}
/* Sin JavaScript (18.09.2026): el menú móvil necesita JS para abrirse. Si no carga, no hay botón
   de menú: los enlaces de la barra se muestran debajo del logo, en filas, y el header deja de ser
   fijo (apilado, fijo, se comería la pantalla). */
@media (scripting:none) and (max-width:1040px){
  .top{position:relative}
  .top-in{height:auto;flex-wrap:wrap;row-gap:4px;padding-block:10px}
  .burger{display:none!important}
  .top .nav{display:flex;order:3;flex:1 1 100%;flex-wrap:wrap;gap:0 20px;margin-left:0}
  .top .nav a{display:inline-flex;align-items:center;min-height:var(--toque)}
  .top .top-idioma{display:flex;order:4;margin-left:0;padding-left:0;border-left:0}
  .top .top-idioma-hueco{display:none}
}

/* ---------- menú móvil a pantalla completa ---------- */
.menu-movil{position:fixed;inset:0;z-index:55;background:var(--crema);padding:84px 28px 40px;
  overflow-y:auto}
.menu-movil nav{display:flex;flex-direction:column}
.menu-movil a{display:flex;align-items:center;min-height:56px;padding:12px 0;font-size:24px;
  font-weight:700;text-decoration:none;color:var(--pino);border-bottom:1px solid var(--linea)}
.menu-movil a[aria-current]{color:var(--verde)}
.menu-movil a.mm-comprar{margin-top:28px;align-self:flex-start;min-height:0;border:0;padding:14px 26px;
  font-size:16px;background:var(--verde);color:#fff;border-radius:2px}
.menu-movil .top-idioma{margin:32px 0 0;padding:0;border:0;font-size:13px;gap:8px}
.menu-movil .top-idioma a{padding:6px 2px}
@media(min-width:1041px){.menu-movil{display:none}}

/* ---------- verificación de edad ---------- */
.gate{position:fixed;inset:0;z-index:200;background:rgba(18,33,28,.96);
  display:flex;align-items:center;justify-content:center;padding:24px}
.gate-caja{max-width:460px;text-align:center;color:#fff}
.arbol-gate{display:block;width:230px;max-width:64vw;height:auto;margin:0 auto 22px}
.gate h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.022em;line-height:1.07;color:#fff}
.gate p{margin:16px 0 0;color:rgba(255,255,255,.75);font-size:15px}
.gate-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.gate-btn{display:inline-block;text-decoration:none;font-family:var(--f);font-size:13px;font-weight:700;
  padding:13px 24px;border-radius:2px;letter-spacing:.03em;white-space:nowrap;cursor:pointer;
  transition:opacity .18s}
.gate-btn:hover{opacity:.88}
.gate-si{background:#fff;color:var(--verde);border:0}
.gate-no{background:none;border:1.5px solid rgba(255,255,255,.7);color:#fff}
.gate small{display:block;margin-top:24px;font-size:11.5px;color:rgba(255,255,255,.62)}
.gate small a{color:rgba(255,255,255,.85)}

/* ---------- pie (es navegación) ---------- */
footer.pie{background:#12211c;color:rgba(255,255,255,.7);font-size:13px;padding:72px 0 0}
.pie p{margin:0}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:40px}
.fgrid a{display:block;text-decoration:none;color:rgba(255,255,255,.68);padding:5px 0;line-height:1.5}
.fgrid a:hover{color:#fff}
.logo-pie{display:block;width:112px;height:auto;margin-bottom:22px}
.pie .fh{margin:0 0 16px;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:#fff;line-height:1.4}
.pie .fbrand .fh{margin-top:6px}
.pie ul{list-style:none;margin:0;padding:0}
.pie address{font-style:normal}
.pie address p{line-height:1.75;color:rgba(255,255,255,.74)}
.pie address p + p{margin-top:12px}
.pie address a{display:inline;padding:0;color:#fff}
/* solo en el pie inglés: las páginas legales no se traducen (docs §10b) */
.pie-solo-es{margin:18px 0 0;font-size:12.5px;font-style:italic;color:var(--khaki-claro)}
.pie-legal{border-top:1px solid rgba(255,255,255,.1);margin-top:56px!important;padding:26px 0 40px;
  font-size:12px;line-height:1.9;color:rgba(255,255,255,.74);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 32px}
/* la firma del sitio: igual que el copyright, sin subrayado hasta el hover */
.pie-credito a{color:inherit;text-decoration:none}
.pie-credito a:hover{text-decoration:underline}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fgrid{grid-template-columns:1fr}}
/* Objetivos táctiles (auditoría del 18.09.2026): 44 × 44 en pantallas táctiles o angostas. En
   escritorio no cambia nada: el ritmo tipográfico aprobado depende de esos tamaños. Lo compartido
   (botones, header, menú, pie, enlace de salto) vive aquí; lo de cada página, en su hoja, bajo la
   misma condición y con el mismo --toque. */
@media (pointer:coarse), (max-width:760px){
  .pie .fgrid a,.pie address a{min-height:var(--toque);display:flex;align-items:center}
  body .btn{min-height:var(--toque);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  .top-logo{min-height:var(--toque);min-width:var(--toque)}
  .burger{width:var(--toque);height:var(--toque)}
  .top-comprar{min-height:var(--toque);display:inline-flex;align-items:center;box-sizing:border-box}
  .menu-movil .top-idioma a{min-width:var(--toque);min-height:var(--toque);display:inline-flex;align-items:center;justify-content:center}
  .salto{min-height:var(--toque);display:inline-flex;align-items:center;box-sizing:border-box}
}

/* ---------- espacios de foto F## (brief §2): bloque del color de la sección con el código y la
   descripción en gris al 40 %; cuando la foto llega, sale como <picture class="foto"> ---------- */
.media{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  border:0;background:rgba(26,31,28,.055);padding:22px}
.media::before{content:attr(data-foto);position:absolute;top:12px;left:14px;font:800 11px/1.4 var(--f);
  letter-spacing:.14em;color:rgba(26,31,28,.4)}
.media::after{content:attr(data-desc);max-width:420px;font:600 11px/1.7 var(--f);letter-spacing:.05em;
  text-align:center;color:rgba(26,31,28,.4)}
.media.on-dark{background:rgba(255,255,255,.05)}
.media.on-dark::before,.media.on-dark::after{color:rgba(255,255,255,.4)}
/* (10.10.2026) En el dominio de producción (<html data-entorno="produccion">, lo pone la puerta en
   functions/_middleware.js) el espacio vacío no dice nada: ni el código ni la descripción ni el
   recuadro punteado, solo el fondo neutro. En pages.dev y en las previas sigue con su código. */
html[data-entorno="produccion"] .media::before,html[data-entorno="produccion"] .media::after{content:none!important}
html[data-entorno="produccion"] .media{border:0!important}
html[data-entorno="produccion"] .ph:not(:has(> .foto)){border-color:transparent!important}
html[data-entorno="produccion"] .ph:not(:has(> .foto)) > :not(.media):not(.foto){visibility:hidden}
.foto{display:block;position:relative;overflow:hidden}
.foto img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Hilo 01 · las curvas del build original en los bloques de los mockups: las mismas
   contiene sin mover nada del bloque. ---------- */
/* Tamaño fijo (corrección 16.09.2026): el fondo no se estira con la pantalla. Miden lo mismo en
   cualquier ancho y, si no caben, se recortan contra el borde de su bloque (.con-curvas recorta). */
/* Hilo 01 · las curvas (decisión final, 16.09.2026). Archivo único: img/curvas-cedral.svg?v=7e03484b
   (3000 x 2000, currentColor). No se regenera ni se recorta.
   Va como máscara y no como imagen de fondo: un SVG de fondo no hereda currentColor y saldría
   negro; con la máscara, el color lo pone el CSS. El tamaño y la repetición son los pedidos.
   Marca sutil: portada y cierre al 20 %, y solo donde el mockup ya las tenía, el cuerpo al 10 %. */
/* (09.10.2026) Regla de Diego: que la página no se vea por secciones. Las curvas aparecen y se
   desvanecen poco a poco: la máscara junta el dibujo con un degradado (mask-composite) que las
   deja en nada arriba y abajo de su bloque, en vez de cortarse contra el borde. Es la técnica de
   Cervezas (23.09) llevada a todo el sitio. Cada página cambia solo lo que necesita:
     --curvas-entra / --curvas-sale   cuánto tarda en aparecer y en irse (160 / 220 px)
     --curvas-fundido                 el degradado entero, si la forma es otra
     --curvas-tam                     el tamaño del dibujo (3000 px; 1800 px en celular)
   La posición del dibujo llega en línea desde el generador (--x, --y); el !important deja el
   degradado fijo en 0 0 en vez de moverlo con el dibujo. */
.curvas-portada,.curvas-oscuro{position:absolute;inset:0;pointer-events:none;
  background-color:var(--curvas,var(--pino));
  /* en un bloque bajo (Gracias, 404) los fundidos no pasan del 30 % y el 35 % de su alto */
  --curvas-fundido:linear-gradient(180deg,transparent 0,#000 min(var(--curvas-entra,160px),30%),
    #000 calc(100% - min(var(--curvas-sale,220px),35%)),transparent 100%);
  -webkit-mask-image:url(../img/curvas-cedral.svg?v=7e03484b),var(--curvas-fundido);
          mask-image:url(../img/curvas-cedral.svg?v=7e03484b),var(--curvas-fundido);
  -webkit-mask-size:var(--curvas-tam,3000px) auto,100% 100%;mask-size:var(--curvas-tam,3000px) auto,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-position:var(--x,0) var(--y,0),0 0!important;mask-position:var(--x,0) var(--y,0),0 0!important;
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* color por fondo real: beech sobre oscuro, pino sobre crema */
:root{--curvas:var(--pino)}
.oscuro,.dark,.hero-full,.scrolly,.light,.ch.dark{--curvas:var(--beech)}
/* opacidad: portada y cierre 20 %; el cuerpo, donde el mockup ya las traía, 10 % */
.curvas-portada{opacity:.2}
.curvas-oscuro{opacity:.1}
@media(max-width:768px){
  .curvas-portada,.curvas-oscuro{--curvas-tam:1800px}
}
/* (15.10.2026, Diego) Curvas en el pie (todas las páginas) y en Inicio #lugar: que se sientan, no
   que se lean. Un poco menos que la portada (20 %) y con fundidos largos arriba y abajo, para que
   nunca se corten contra un borde. Quietas: no hay nada que animar con reduced-motion. */
footer.pie{position:relative;isolation:isolate;overflow:hidden;--curvas:var(--beech)}
footer.pie > .curvas-pie{z-index:-1;opacity:.13;--curvas-entra:260px;--curvas-sale:200px}
#lugar > .curvas-lugar{z-index:-1;opacity:.13}
@media(max-width:768px){footer.pie > .curvas-pie{--curvas-entra:200px;--curvas-sale:160px}}
/* (23.09.2026) Aquí sobraba una llave: el navegador descartaba la regla que sigue y las curvas
   no pertenecían a su bloque (se dibujaban contra la pantalla y los bloques de abajo las
   tapaban). Arreglada, cada bloque contiene sus curvas: arriba y abajo se recortan contra su
   borde (clip-path) y a los lados van a todo el ancho de la pantalla, como se veían. */
.con-curvas{position:relative;isolation:isolate;clip-path:inset(0 -100vw)}
.con-curvas > .curvas-portada,.con-curvas > .curvas-oscuro{z-index:-1;max-width:none!important;
  left:calc(50% - 50vw);right:calc(50% - 50vw)}
body{overflow-x:clip}
/* (09.10.2026) Sin raya entre bloques: los bordes de arriba y de abajo de cada bloque de la página
   (los hijos de <main> y las secciones dentro de ellos) no se dibujan. Las rayas de adentro de
   un bloque (listas, tablas, formularios) siguen. Gana a las hojas de cada página a propósito. */
main > :is(section,div,header,article,aside,form,nav),main > * > section{
  border-top-width:0!important;border-bottom-width:0!important}
/* (09.10.2026) Fundido entre bloques de distinto fondo, en vez del corte recto. El bloque de abajo
   lleva .funde-entra y el de arriba .funde-sale; la hoja de cada página les da el color con que
   arranca o termina el degradado (--funde-entra, --funde-sale). Entre dos colores lisos cada uno
   pone su mitad hacia el color del medio, dentro de su propio relleno: el degradado no se sale de
   su bloque (varios tienen overflow:hidden) ni pasa por encima del texto. Sobre una foto, el
   degradado va entero en el bloque de la foto (--funde-entra-alto / --funde-sale-alto).
   (10.10.2026) Las curvas entran en el degradado: cada bloque se aísla (isolation) y el degradado
   va debajo de sus curvas (z-index -2; las curvas están en -1), así que en la transición se ven
   las curvas desvaneciéndose con el color en vez de una franja lisa. Los colores del medio y los
   degradados se interpolan en oklab, que no ensucia el paso de crema a verde pino con gris. */
:root{--funde:clamp(96px,8vw,112px)}
.funde-entra,.funde-sale{position:relative;isolation:isolate}
.funde-entra::before,.funde-sale::after{content:"";position:absolute;pointer-events:none;
  left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:var(--funde-z,-2)}
.funde-entra::before{top:0;height:var(--funde-entra-alto,calc(var(--funde) / 2));
  background:linear-gradient(180deg,var(--funde-entra),transparent);
  background:linear-gradient(180deg in oklab,var(--funde-entra),transparent)}
/* la mitad de arriba baja 1 px sobre el bloque siguiente, y su bloque va una capa por encima
   (z-index 1): cuando el borde cae en medio píxel, el suavizado de las dos mitades dejaba asomar
   una línea del fondo de abajo */
.funde-sale{z-index:1}
/* las curvas de un bloque con fundido terminan de aparecer (o empiezan a irse) donde termina su
   parte del degradado: así se ven entrando en él, no después */
.funde-entra > :is(.curvas-portada,.curvas-oscuro){--curvas-entra:var(--funde-entra-alto,calc(var(--funde) / 2))}
.funde-sale > :is(.curvas-portada,.curvas-oscuro){--curvas-sale:var(--funde-sale-alto,calc(var(--funde) / 2))}
.funde-sale::after{bottom:-1px;height:calc(var(--funde-sale-alto,calc(var(--funde) / 2)) + 1px);
  background:linear-gradient(180deg,transparent,var(--funde-sale) calc(100% - 1px));
  background:linear-gradient(180deg in oklab,transparent,var(--funde-sale) calc(100% - 1px))}

/* La entrada a Club Cedral desde otra página (04.10.2026, partials.ui.al_club): una línea al pie
   de un bloque, con su enlace. Toma la letra y el color del párrafo de la página donde cae; aquí
   solo van su separación de arriba y el enlace (los márgenes de los lados son los de la página:
   donde el párrafo va centrado con margin auto, la línea también). La clase va doble para ganarle a la regla de párrafo de
   cada hoja de página, que carga después. */
.al-club.al-club{margin-top:22px;margin-bottom:0;font-size:14px;line-height:1.5}
.al-club.al-club a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* iconos grabados (iconos.py) */
.ico{display:block;width:30px;height:30px;color:var(--verde);flex:0 0 auto}

/* movimiento: con reduced-motion no se anima nada (brief §2) */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------- 14.10.2026 (Diego)
   «Sea el primero en saberlo» en el pie de todas las páginas, el aviso de cookies y el enlace
   «Configurar cookies». El pie sigue siendo marco del sitio: va con su propio fondo. */
.pie-novedades{display:grid;gap:22px 48px;padding:0 0 48px;margin:0 0 48px;border-bottom:1px solid rgba(255,255,255,.12)}
@media(min-width:900px){.pie-novedades{grid-template-columns:1fr 1.15fr;align-items:start}}
.pie .nov-t{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:#fff}
.pie .nov-txt p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.74);max-width:46ch}
.nov-form{display:grid;gap:12px;min-width:0}
.nov-fila{display:flex;gap:8px;flex-wrap:wrap}
.nov-fila input{flex:1 1 220px;min-width:0;font:500 15px/1.2 var(--f);padding:13px 14px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.06);color:#fff;border-radius:2px}
.nov-fila input::placeholder{color:rgba(255,255,255,.5)}
.nov-boton{flex:0 0 auto;font:700 13px/1 var(--f);letter-spacing:.06em;padding:14px 22px;border:0;border-radius:2px;
  background:#fff;color:var(--verde);cursor:pointer}
.nov-boton:disabled{opacity:.6;cursor:default}
.nov-chk{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.nov-chk input{width:20px;height:20px;margin:1px 0 0;accent-color:#fff}
.nov-chk label{font-size:13px;line-height:1.5;color:rgba(255,255,255,.8)}
.pie .nov-priv{font-size:12px;color:rgba(255,255,255,.58)}
.pie .nov-priv a{color:rgba(255,255,255,.85)}
.pie .nov-aviso{font-size:13.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);padding:10px 12px}
.pie .nov-aviso.mal{background:rgba(155,44,31,.85)}
.pie-cookies{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
/* el aviso de cookies: abajo, sin tapar el contenido entero; los tres botones con el mismo peso */
.aviso-ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:150;max-width:560px;margin-left:auto;
  background:#12211c;color:rgba(255,255,255,.82);font-family:var(--f);font-size:13.5px;line-height:1.55;
  padding:20px 20px 18px;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.aviso-ck[hidden]{display:none}
.aviso-ck .ck-t{margin:0 0 6px;font-weight:700;font-size:15px;color:#fff}
.aviso-ck p{margin:0}
.aviso-ck a{color:#fff}
.ck-config{display:grid;gap:10px;margin-top:14px;border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
.ck-config[hidden]{display:none}
.ck-cat{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.ck-cat b{color:#fff}
.ck-cat input{width:20px;height:20px;flex:0 0 20px;accent-color:#fff;margin-top:2px}
.ck-siempre{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ck-botones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
@media(max-width:520px){.ck-botones{grid-template-columns:1fr}}
.ck-b{font:700 13px/1.25 var(--f);padding:12px 10px;border:1.5px solid rgba(255,255,255,.8);background:none;color:#fff;
  border-radius:2px;cursor:pointer}
.ck-b:hover{background:rgba(255,255,255,.08)}
.aviso-ck :focus-visible{outline:2px solid #fff;outline-offset:2px}
.aviso-ck .ck-p{max-width:60ch}

/* (16.10.2026) El botón flotante de WhatsApp: abajo a la derecha, en todas las páginas públicas.
   Respeta las zonas seguras del celular; js/sitio.js lo muestra después del aviso de edad y lo
   sube (--wa-sube) por encima de lo que esté fijo abajo (el aviso de cookies, el resumen de
   Comprar en celular), o lo aparta (.apartado) mientras la caja de chapas del Club pasa por esa
   esquina. Verde WhatsApp un poco más hondo que el de marca, para que el ícono blanco pase el
   3:1 de los gráficos (WCAG 1.4.11). Sin rebotes: solo se desliza, y nada con reduced-motion. */
.wa-flotante{position:fixed;z-index:58;right:calc(16px + env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--wa-sube,0px));width:56px;height:56px;
  border-radius:50%;background:#1C9F52;display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(18,33,28,.28),0 2px 4px rgba(18,33,28,.18);
  transition:bottom .3s ease,opacity .2s ease,transform .2s ease}
.wa-flotante[hidden]{display:none}
.wa-flotante svg{width:30px;height:30px;fill:#fff}
.wa-flotante:hover{transform:translateY(-2px)}
.wa-flotante:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #12211c}
.wa-flotante.apartado{opacity:0;pointer-events:none}
.sin-scroll .wa-flotante{display:none}
@media(min-width:901px){.wa-flotante{width:60px;height:60px;right:calc(24px + env(safe-area-inset-right,0px));
  bottom:calc(24px + env(safe-area-inset-bottom,0px) + var(--wa-sube,0px))}.wa-flotante svg{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.wa-flotante{transition:none}.wa-flotante:hover{transform:none}}