/* ============================================================
   Cervezas — el CSS del mockup aprobado mockups/cervezas.html, tal cual (brief §0). Solo se
   quitaron las reglas de su barra de demostración (.intro, .brand, .note, .hint). 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(--ink)}
  .track{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform}
  .panel{width:100vw;height:100%;flex:0 0 auto;position:relative;display:grid;
         grid-template-columns:1fr 1fr;align-items:center;gap:clamp(16px,4vw,56px);
         padding:0 clamp(16px,6vw,96px);box-sizing:border-box;overflow:hidden}
  .plane{position:absolute;left:8%;right:52%;top:16%;bottom:12%;border-radius:2px;
         background:var(--plane);opacity:.9;transform-origin:center;will-change:transform}
  .plane::after{content:"";position:absolute;inset:0;background:
      radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.18),transparent 60%),
      linear-gradient(180deg,transparent 60%,rgba(0,0,0,.22))}
  .chip{position:absolute;left:10%;top:18%;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
        color:rgba(15,21,18,.75);border:1px dashed rgba(15,21,18,.45);padding:5px 8px;border-radius:3px;z-index:2}
  .art{position:relative;display:flex;justify-content:center;align-items:flex-end;height:78vh;will-change:transform}
  .art svg{height:100%;width:auto;max-width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
  .copy{max-width:36rem}
  .eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
  .copy h2{font-weight:800;font-size:clamp(34px,5.4vw,72px);margin:0;line-height:.95;letter-spacing:-.02em}
  .copy h3{font-weight:300;font-size:clamp(17px,2vw,26px);margin:10px 0 0;line-height:1.25}
  .copy p{font-size:clamp(13px,1.35vw,16px);line-height:1.55;color:#D7DED9;margin:16px 0 0;max-width:46ch}
  .copy p b{font-weight:600;color:var(--ink)}
  .facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:12px;letter-spacing:.06em;color:var(--muted);
         font-variant-numeric:tabular-nums}
  .facts b{color:var(--ink);font-weight:600}
  .btns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
  .btn{font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;border:1px solid var(--ink);
       border-radius:2px;color:var(--ink);text-decoration:none}
  .btn.solid{background:var(--ink);color:var(--ground)}
  .copy>*{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease}
  .panel.on .copy>*{opacity:1;transform:none}
  .panel.on .copy>*:nth-child(2){transition-delay:.06s}.panel.on .copy>*:nth-child(3){transition-delay:.12s}
  .panel.on .copy>*:nth-child(4){transition-delay:.18s}.panel.on .copy>*:nth-child(5){transition-delay:.24s}
  .panel.on .copy>*:nth-child(6){transition-delay:.3s}

  .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}

  @media (max-width:760px){
    .panel{grid-template-columns:1fr;grid-template-rows:46% 1fr;gap:0;padding-top:52px;padding-bottom:20px}
    .art{height:100%}
    .plane{left:14%;right:14%;top:8%;bottom:52%}
    .chip{top:10%;left:16%}
    .copy h2{font-size:clamp(30px,10vw,44px)}
    .copy p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .facts{display:none}
    .rail{gap:10px;font-size:9px}
  }

  /* ---- California Light: bloque propio, a sangre, fuera del sistema ---- */
  .light{--lg:#EEF3EA; --li:#0F1512; --lm:#5B6B62; background:var(--lg);color:var(--li);
         display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh}
  .light-art{position:relative;min-height:60svh;background:linear-gradient(160deg,#DCE8D6,#F6F8F2);overflow:hidden}
  .light-art .f{position:absolute;inset:auto 24px 24px 24px;font-size:12px;line-height:1.5;color:var(--lm);
                 border:1px dashed rgba(15,21,18,.25);padding:10px 12px;border-radius:2px;max-width:46ch}
  .light-copy{padding:clamp(40px,7vw,96px) clamp(24px,6vw,88px);display:flex;flex-direction:column;justify-content:center}
  .light .badge{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
                 padding:6px 10px;border:1px solid var(--li);border-radius:2px;margin:0 0 22px}
  .light h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.02em;margin:0 0 22px;font-weight:700}
  .light p{max-width:58ch;line-height:1.6;margin:0 0 16px;font-size:clamp(15px,1.25vw,17px)}
  .light .lead{font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:var(--li)}
  .light .kpi{display:flex;flex-wrap:wrap;gap:10px 26px;margin:6px 0 22px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--lm)}
  .light .kpi span{padding-left:14px;position:relative}
  .light .kpi span::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--li)}
  .light .data{font-size:13px;letter-spacing:.08em;color:var(--lm)}
  .light .hecha b{font-weight:600}
  .light .btns{margin-top:10px}
  .light .btn{border-color:var(--li);color:var(--li)}
  .light .btn.solid{background:var(--li);color:var(--lg)}
  .light .ft{font-size:12px;color:var(--lm);margin:26px 0 0}
  @media (max-width:900px){
    .light{grid-template-columns:1fr}
    .light-art{min-height:46svh}
    .light-copy{padding:36px 20px 48px}
  }
  @media (prefers-reduced-motion:reduce){.copy>*{transition:none}}

/* ================================================================
   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 de vitrina ocupa el lugar del dibujo; la de California Light, su
   bloque. Mientras no llegan, el dibujo y la etiqueta del mockup (con el código). */
.art > .foto{height:100%;width:100%}
.art > .foto img{object-fit:contain}
.light-art > .media,.light-art > .foto{position:absolute;inset:0}
.light-art > .media{background:none;padding:24px;align-items:flex-end;justify-content:flex-start;text-align:left}
.light-art > .media::after{text-align:left}
/* «Ficha técnica» (textos §3): el botón despliega la ficha en el estante */
button.btn{background:none;font-family:inherit;cursor:pointer}
.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)}