/* ============================================================
   Cervezas — el CSS del mockup aprobado mockups/cervezas.html (brief §0), sin las reglas de su
   barra de demostración. Desde el 18.09.2026 el estante y California Light siguen el mockup B
   (mockup-cervezas-B.html, aprobado por Diego): sin plano de color ni dibujo de botella; la foto
   4:5 a sangre por la izquierda y, para California Light, foto horizontal a sangre con el texto
   encima. Lo que pide el build va aparte, al final.
   ============================================================ */
  :root{
    --ground:#0F1512; --ink:#F2F5F4; --muted:#9AA8A2; --line:rgba(242,245,244,.14);
    --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  html{color-scheme:dark}
  body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
  .wrap{padding-inline:clamp(16px,5vw,64px)}


  .head{padding-block:56px 36px}
  .head h1{font-weight:300;font-size:clamp(30px,5vw,58px);margin:0;line-height:1.05;letter-spacing:-.01em}
  .head h1 b{font-weight:800}
  .head p{color:var(--muted);max-width:52ch;line-height:1.55;margin:14px 0 0;font-size:clamp(14px,1.6vw,17px)}

  /* ---- pinned horizontal shelf ---- */
  .shelf{position:relative;height:540vh}
  .stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
  .rail{position:absolute;left:0;right:0;top:18px;display:flex;gap:clamp(10px,2.4vw,30px);justify-content:center;
        font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);z-index:3;padding-inline:16px;flex-wrap:wrap}
  .rail span{transition:color .3s;border-bottom:1px solid transparent;padding-bottom:4px}
  .rail span.on{color:var(--ink);border-color:var(--c,var(--ink))}
  .track{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform}
  /* mockup B: la foto a sangre por la izquierda (sin margen), el texto centrado contra ella */
  /* El marco toma la proporción de la foto (4:5) y no la recorta. Cerca del 50 % del ancho; como
     el estante vive en una pantalla (100vh), en una pantalla baja manda el alto: así no se corta
     ni la chapa ni el piso de la botella. 80 px: el riel arriba y aire abajo (128 hasta el 18.09.2026).
     Las dos columnas son fijas (--art y minmax(0,1fr)): no dependen de lo que haya en el marco, así
     que el texto no se corre cuando llega la foto (18.09.2026). */
  /* La separación foto–texto sale de una base (la curva del mockup, 30–64 px) por un factor: se
     redujo un 30 % el 18.09.2026, para que foto y texto se lean como una pieza, y escala igual en
     todos los anchos (44,8 px a 1920 y 1440, 40,3 a 1280). */
  .panel{--art:min(50vw,calc((100vh - 80px)*.8));
         --sep-base:clamp(30px,4.5vw,64px);--sep:calc(var(--sep-base)*.7);
         width:100vw;height:100%;flex:0 0 auto;position:relative;display:grid;
         grid-template-columns:var(--art) minmax(0,1fr);align-items:center;gap:var(--sep);
         padding:0 var(--borde-vp) 0 0;box-sizing:border-box;overflow:hidden}
  @supports (height:100dvh){.panel{--art:min(50vw,calc((100dvh - 80px)*.8))}}
  .art{position:relative;aspect-ratio:4/5;width:100%;min-width:0;overflow:hidden;will-change:opacity}
  .copy{max-width:36rem}
  /* el color de la cerveza sobrevive aquí y en el subrayado del riel; en ningún otro lado */
  .linea{width:54px;height:3px;background:var(--c);margin:0 0 18px}
  .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#A8B0AA;margin:0 0 16px}
  .copy h2{font-weight:800;font-size:clamp(46px,5.4vw,78px);margin:0 0 14px;line-height:.94;letter-spacing:-.02em}
  .copy h3{font-weight:300;font-size:clamp(21px,2.1vw,29px);margin:0 0 26px;line-height:1.25;color:#EDEFEC}
  .copy p{font-size:16.5px;line-height:1.62;color:#A8B0AA;margin:0 0 15px;max-width:46ch}
  .copy p b{font-weight:600;color:#fff}
  .facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font-size:15px;line-height:1.75;color:#A8B0AA;
         font-variant-numeric:tabular-nums}
  .facts b{color:#fff;font-weight:600}
  .btns{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
  .btn{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
       padding:15px 26px;border:1.5px solid rgba(255,255,255,.55);color:#fff;text-decoration:none}
  .btn.solid{background:#fff;color:#141a16;border-color:#fff}
  /* 18.09.2026: el texto ya no aparece por su cuenta (desvanecido con retrasos escalonados al
     centrarse el estante). Foto y texto son una pieza: js/vitrina.js les da la misma opacidad,
     con la misma curva. Sin JS, el texto se ve. */
  .copy{will-change:opacity}

  .after{padding-block:64px 80px;border-top:1px solid var(--line)}
  .after p{color:var(--muted);max-width:60ch;line-height:1.6;font-size:14px;margin:0 0 20px}
  .after h3{font-weight:300;font-size:clamp(24px,3vw,36px);margin:0 0 16px}
  .after h3 b{font-weight:800}

  /* Escritorio con poca altura (hasta 820 px, p. ej. 1024 × 768 o 1280 × 720): el estante vive en
     una pantalla y, con la ficha abierta, el texto más largo (Impar) se salía 7 px por abajo. Se
     compacta el texto, no la foto. */
  @media (min-width:761px) and (max-height:820px){
    .linea{margin-bottom:14px}
    .eyebrow{margin-bottom:12px}
    .copy h2{font-size:clamp(40px,4.6vw,64px);margin-bottom:10px}
    .copy h3{font-size:clamp(19px,1.9vw,25px);margin-bottom:18px}
    .copy p{font-size:15.5px;line-height:1.55;margin-bottom:11px}
    .facts{margin-top:14px;font-size:14px;line-height:1.6}
    .btns{margin-top:18px}
    .btn{padding:13px 22px}
  }

  /* El vacío a la derecha del texto (18.09.2026, criterio de Diego): no más que el margen del sitio
     + 15 % (≤ 368 px a 1920, ≤ 92 a 1440, ≤ 74 a 1280). El sobrante se reparte: la foto sube hasta
     el alto de pantalla − 80 (queda a 4 px del riel; antes − 128) y los párrafos llenan la columna.
     Su letra sale del ancho de la columna (100cqi / 35,4), así cada línea la ocupa entera sin pasar
     de 75 caracteres (medido: máx. 74). 16,5–20 px (15,5 en pantallas bajas). La ficha conserva su letra. Lo mide
     auditoria/estante.py. */
  @media (min-width:761px){
    .copy{max-width:none;container-type:inline-size}
    .copy p:not(.ficha){font-size:clamp(16.5px,calc(100cqi / 35.4),20px);max-width:56ch}
  }
  @media (min-width:761px) and (max-height:820px){
    .copy p:not(.ficha){font-size:clamp(15.5px,calc(100cqi / 35.4),20px)}
  }

  /* Móvil (18.09.2026, aprobado): la repisa se apila. Los cinco estantes uno debajo del otro, sin
     vitrina fija: en una pantalla de alto fijo el texto no entraba y los botones quedaban cortados
     (hasta 173 px en un iPhone SE). La vitrina horizontal queda solo en escritorio; js/vitrina.js
     no mueve nada con esta media query. Sin recorte de párrafos: ya no hay alto que respetar. */
  /* Sin vitrina fija: en móvil y sin JavaScript (18.09.2026: sin JS la repisa no se movía y solo
     se veía Calín). Sin JS en escritorio cada estante conserva foto y texto lado a lado. */
  @media (max-width:760px), (scripting:none){
    .shelf{height:auto}
    .stage{position:static;height:auto;overflow:visible}
    .rail{display:none}
    .track{position:static;display:block;height:auto;transform:none!important}
    .panel{width:auto;height:auto;overflow:visible;padding-block:48px}
    .panel + .panel{border-top:1px solid var(--line)}
    .art{transform:none!important}
  }
  @media (max-width:760px){
    .panel{grid-template-columns:minmax(0,1fr);align-items:start;gap:22px;padding:44px var(--borde-vp)}
    .art{width:100%}
    .linea{margin-bottom:12px}
    .eyebrow{margin-bottom:10px}
    .copy h2{font-size:clamp(30px,10vw,44px);margin-bottom:6px}
    .copy h3{font-size:18px;margin-bottom:14px}
    .copy p{font-size:15px;margin-bottom:10px}
    /* los dos botones en una sola fila, también a 375 px */
    .btns{gap:8px;margin-top:18px;justify-content:stretch}
    .btn{min-width:0;white-space:nowrap;text-align:center;font-size:10.5px;letter-spacing:.12em;padding:13px 10px}
  }

  /* ---- California Light: fuera de la repisa (mockup B). Horizontal, a sangre completa, la foto
     de fondo, un velo y el texto encima, abajo a la izquierda ---- */
  .light{position:relative;display:flex;align-items:flex-end;min-height:clamp(460px,64vh,760px);
         overflow:hidden;background:#101512;color:#fff}
  .light-art{position:absolute;inset:0}
  /* el velo cubre toda la columna del texto con al menos .66 de opacidad: con cualquier foto,
     incluso blanca, el texto blanco da AA (verificado el 18.09.2026) */
  .velo{position:absolute;inset:0;pointer-events:none;
        background:linear-gradient(90deg,rgba(10,14,11,.88) 0%,rgba(10,14,11,.78) 40%,rgba(10,14,11,.66) 56%,rgba(10,14,11,.05) 86%)}
  .light-copy{position:relative;width:100%;box-sizing:border-box;padding:clamp(40px,6vw,80px) var(--borde-vp)}
  .light-copy > *{max-width:660px}
  .light .badge{display:inline-block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:800;
                color:#141a16;background:#C2C18D;padding:6px 12px;margin:0 0 18px}
  .light .eyebrow{color:rgba(255,255,255,.8)}
  .light h2{font-weight:800;font-size:clamp(42px,5vw,70px);line-height:.94;letter-spacing:-.02em;margin:0 0 14px}
  .light .claim{font-weight:300;font-size:clamp(21px,2.1vw,29px);line-height:1.25;margin:0 0 26px;color:#EDEFEC;max-width:none}
  .light p{color:rgba(255,255,255,.84);line-height:1.62;font-size:16.5px;margin:0 0 15px;max-width:46ch}
  .light p b{color:#fff;font-weight:600}
  .light .lead{color:#fff}
  .light .kpi{display:flex;flex-wrap:wrap;gap:8px 24px;margin:4px 0 18px;font-size:12px;letter-spacing:.14em;
              text-transform:uppercase;color:rgba(255,255,255,.84);max-width:none}
  .light .kpi span{padding-left:14px;position:relative}
  .light .kpi span::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:#fff}
  .light .data{font-size:14px}
  .light .hecha{margin-bottom:0}
  .light .ft{font-size:13px;margin:22px 0 0}
  @media (max-width:900px){
    /* 18.09.2026: en móvil la foto ocupa solo la parte de arriba (52vh, donde no hay texto) y
       funde a oscuro; el texto va debajo, sobre fondo sólido. Detrás de todo el bloque, una foto
       horizontal dejaba ver una franja central de ~14 % de su ancho; así se ve cerca de la mitad.
       Mismo recurso que los capítulos de Nuestra historia en móvil (su .veil de arriba abajo). */
    .light{display:block;min-height:0}
    .light-art{position:relative;inset:auto;height:52vh;height:52svh}
    .velo{inset:0 0 auto 0;height:52vh;height:52svh;
          /* (09.10.2026) también arriba: la foto aparece desde el oscuro de la vitrina, sin borde */
          background:linear-gradient(180deg,#101512 0%,rgba(16,21,18,.6) 7%,rgba(16,21,18,0) 20%,rgba(16,21,18,0) 55%,rgba(16,21,18,.7) 82%,#101512 100%)}
    .light-copy{padding:8px var(--borde-vp) 44px}
    .light h2{font-size:44px}
  }

/* ================================================================
   Adaptación al build (brief §0), lo único que no viene del mockup.
   ================================================================ */

/* El mockup se aprobó dentro del marco de artifact de claude.ai, cuyo reset pone el cuerpo a
   14 px (y las imágenes a max-width:100%): todo lo que el mockup mide en ch o hereda, se mide así. */
body{font-size:14px}
img{max-width:100%}
/* (d) Fotos F##: la foto llena su marco (4:5 en el estante, a sangre en California Light) con
   cover; mientras no llega, el espacio F## con su código y descripción en el mismo marco. */
.art > .foto,.art > .media,.light-art > .foto,.light-art > .media{position:absolute;inset:0}
.art > .foto img,.light-art > .foto img{object-fit:cover}
.light-art > .media{background:none;padding:24px;align-items:flex-start;justify-content:flex-end;text-align:right}
.light-art > .media::after{text-align:right}
/* 18.09.2026: sin el plano de color, el escenario necesita su propio fondo; si no, en el primer
   estante se asomaban las curvas del encabezado detrás de la foto */
.stage{background:var(--ground)}
/* «Ficha técnica» (textos §3, [ Ficha técnica ▾ ]): <details> nativo (18.09.2026), que abre sin
   JavaScript y lleva su estado abierto/cerrado a los lectores de pantalla; Enter y espacio por
   teclado. El ▾ gira al abrir. La fila de botones es una grilla: el <details> no ocupa lugar
   propio (display:contents), su «summary» queda al lado de «Agregar a mi caja» y la ficha abre
   debajo, a todo el ancho. Un navegador sin display:contents en <details> pone el botón en su
   propia línea: se ve distinto, pero abre igual. */
.btns{display:grid;grid-template-columns:auto auto;justify-content:start}
.ficha-d{display:contents}
.ficha-d::details-content{grid-column:1/-1}
.ficha-d > .ficha,.ficha-d > .ft{grid-column:1/-1}
summary.btn{list-style:none;cursor:pointer;font-family:inherit}
summary.btn::-webkit-details-marker{display:none}
.desplegar .flecha{display:inline-block;margin-left:.6em;letter-spacing:0;transition:transform .25s ease}
.ficha-d[open] .flecha{transform:rotate(180deg)}
.btn.desplegar:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:760px){.btns{justify-content:stretch}}
.copy .ficha{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--muted);max-width:46ch}
/* los enlaces del cierre (textos §3: Comprar · Servir Cedral en mi negocio · Cómo las hacemos) */
.after a{color:var(--ink)}

/* (curvas IGN, 16.09.2026) Aquí el fondo es oscuro: el trazo va en beech para verse. */
.head{--curvas:var(--beech)}

/* ---- (23.09.2026) Fundidos: que la página no se vea por secciones ----
   1 · Las curvas del encabezado siguen dentro de la vitrina: una capa en el escenario, detrás de
   los estantes (las fotos las tapan, se ven en el fondo), a pleno arriba y desvanecida al 40 %
   del alto. js/vitrina.js la alinea con las del encabezado (--cy), para que la línea continúe. */
.stage{isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.2;
  background-color:var(--beech);
  -webkit-mask-image:url(../../img/curvas-cedral.svg?v=7e03484b),linear-gradient(180deg,#000 0%,transparent 40%);
          mask-image:url(../../img/curvas-cedral.svg?v=7e03484b),linear-gradient(180deg,#000 0%,transparent 40%);
  -webkit-mask-size:3000px auto,100% 100%;mask-size:3000px auto,100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-position:var(--cx,0) var(--cy,0),0 0;mask-position:var(--cx,0) var(--cy,0),0 0;
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media (max-width:760px),(scripting:none){.stage::before{content:none}}
/* 2 · California Light baja a oscuro y el cierre sube desde ahí: sin la raya de arriba, y sus
   curvas aparecen poco a poco en vez de empezar contra el borde. */
@media (min-width:901px){
  .velo{background:linear-gradient(180deg,rgba(15,21,18,0) 62%,var(--ground) 100%),
    linear-gradient(90deg,rgba(10,14,11,.88) 0%,rgba(10,14,11,.78) 40%,rgba(10,14,11,.66) 56%,rgba(10,14,11,.05) 86%)}
}
.after{border-top:0;--curvas:var(--beech)}
/* (09.10.2026) La máscara combinada ahora es de todo el sitio (cedral.css); aquí queda solo la forma
   propia de cada capa. El cierre entra desde nada hasta el 45 % y llega a pleno hasta el pie; el
   encabezado no se desvanece abajo porque sus curvas siguen en la vitrina (.stage::before). */
.after > .curvas-portada{--curvas-fundido:linear-gradient(180deg,transparent 0%,#000 45%)}
.head > .curvas-portada{--curvas-fundido:linear-gradient(#000,#000)}
@media (max-width:768px){
  .stage::before{-webkit-mask-size:1800px auto,100% 100%;mask-size:1800px auto,100% 100%}
}