/* ============================================================
   BYKAMEN · ficha de producto
   Misma paleta y tipografía que la home: negro, blanco, gris
   y naranja #E58500. Plantilla única para cerveza, sidra y vermut.
   ============================================================ */

:root{
  --ink-0:#0B0B0A;
  --ink-1:#141413;
  --ink-2:#1E1E1C;
  --fg:#F6F5F3;
  --fg-dim:#9C9995;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.27);
  --accent:#E58500;
  --accent-soft:rgba(229,133,0,.13);
  --field:rgba(255,255,255,.04);
  --track:rgba(255,255,255,.07);

  --l-cerveza:#E58500;
  --l-sidra:#F2B25C;
  --l-vermut:#B35A05;

  /* Tokens de BANDA — la banda es oscura en los dos temas, así que estos
     valores NO se redefinen abajo. Todo lo que viva sobre fondo negro
     (cierre, pie, pie de foto) tiene que usar estos, no los del tema. */
  --band-bg:#0B0B0A;
  --band-fg:#F6F5F3;
  --band-dim:#96938F;
  --band-accent:#E58500;
  --band-line:rgba(255,255,255,.13);
  --band-line-2:rgba(255,255,255,.28);
  --band-field:rgba(255,255,255,.05);
  /* Fondo SÓLIDO para los <select>. Equivale visualmente a --band-field
     sobre la banda, pero opaco: un desplegable translúcido lo pinta el
     sistema en blanco y las opciones salen blanco sobre blanco. */
  --band-opt-bg:#171716;
  /* tintas de línea para uso sobre banda oscura */
  --band-cerveza:#E58500;
  --band-sidra:#F2B25C;
  --band-vermut:#B35A05;

  --f-display:"Bahnschrift SemiCondensed","Bahnschrift","Arial Narrow","Liberation Sans Narrow",Impact,sans-serif;
  --f-body:"Palatino Linotype",Palatino,"Book Antiqua","Iowan Old Style","URW Palladio L",Georgia,serif;
  --f-util:"Bahnschrift SemiCondensed","Arial Narrow",system-ui,sans-serif;

  --fs-h1:clamp(2.4rem,6.4vw,5.6rem);
  --fs-h2:clamp(1.7rem,3.4vw,2.9rem);
  --fs-h3:clamp(1.12rem,1.7vw,1.45rem);
  --fs-body:clamp(1rem,1.06vw,1.12rem);
  --fs-sm:.875rem;
  --fs-label:.69rem;

  --pad:clamp(1.25rem,5vw,5.5rem);
  --gut:clamp(1.5rem,3.4vw,3.25rem);
  --maxw:1360px;
  --measure:63ch;
}

@media (prefers-color-scheme:light){
  :root{
    --ink-0:#FCFCFB; --ink-1:#F3F3F1; --ink-2:#E8E8E5;
    --fg:#121211; --fg-dim:#65625E;
    --line:rgba(18,18,17,.14); --line-strong:rgba(18,18,17,.28);
    --accent:#A85E00; --accent-soft:rgba(168,94,0,.1);
    --field:rgba(18,18,17,.035); --track:rgba(18,18,17,.08);
    --l-cerveza:#B05A00; --l-sidra:#9E6A00; --l-vermut:#8A3600;
  }
}
:root[data-theme="light"]{
  --ink-0:#FCFCFB; --ink-1:#F3F3F1; --ink-2:#E8E8E5;
  --fg:#121211; --fg-dim:#65625E;
  --line:rgba(18,18,17,.14); --line-strong:rgba(18,18,17,.28);
  --accent:#A85E00; --accent-soft:rgba(168,94,0,.1);
  --field:rgba(18,18,17,.035); --track:rgba(18,18,17,.08);
  --l-cerveza:#B05A00; --l-sidra:#9E6A00; --l-vermut:#8A3600;
}
:root[data-theme="dark"]{
  --ink-0:#0B0B0A; --ink-1:#141413; --ink-2:#1E1E1C;
  --fg:#F6F5F3; --fg-dim:#9C9995;
  --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.27);
  --accent:#E58500; --accent-soft:rgba(229,133,0,.13);
  --field:rgba(255,255,255,.04); --track:rgba(255,255,255,.07);
  --l-cerveza:#E58500; --l-sidra:#F2B25C; --l-vermut:#B35A05;
}

*,*::before,*::after{box-sizing:border-box}

.pg{
  /* La línea que se está mostrando. Cambiar a --l-sidra o --l-vermut
     y la página entera se recolorea. Es la misma plantilla.
     --band-tint es la misma tinta para lo que va sobre fondo negro. */
  --tint:var(--l-cerveza);
  --band-tint:var(--band-cerveza);
  background:var(--ink-0);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.pg h1,.pg h2,.pg h3,.pg h4{
  font-family:var(--f-display);font-weight:600;line-height:.94;
  letter-spacing:-.005em;text-wrap:balance;margin:0;
}
.pg p{margin:0}
.pg a{color:inherit;text-decoration:none}
.pg svg{display:block;max-width:100%}
.pg :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.lbl{
  font-family:var(--f-util);font-size:var(--fs-label);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-dim);line-height:1.4;
}
.lbl-rule{display:flex;align-items:center;gap:.7rem}
.lbl-rule::before{content:"";width:26px;height:1px;background:var(--tint);flex:0 0 auto}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.btn{
  display:inline-block;
  font-family:var(--f-util);font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;
  padding:.95rem 1.85rem;border:1px solid currentColor;
  background:none;color:inherit;cursor:pointer;
  transition:background .28s,color .28s,border-color .28s;
}
.btn-fill{background:var(--tint);border-color:var(--tint);color:var(--ink-0)}
.btn-fill:hover{filter:brightness(1.14)}
.btn-ghost{border-color:var(--line-strong);color:var(--fg)}
.btn-ghost:hover{background:var(--field);border-color:var(--fg)}

/* ============================================================
   VERIFICACIÓN DE EDAD
   ============================================================ */
.gate{
  position:fixed;inset:0;z-index:100;
  background:var(--band-bg);color:var(--band-fg);
  display:grid;place-items:center;padding:var(--pad);text-align:center;
}
.gate[hidden]{display:none}
.gate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 85% at 50% 42%,rgba(229,133,0,.10),transparent 60%);
}
.gate-in{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(1.6rem,3.5vw,2.6rem)}
.gate-q{font-family:var(--f-display);font-size:clamp(1.8rem,4.4vw,3.4rem);line-height:1}
.gate-note{font-size:var(--fs-sm);color:var(--band-dim);max-width:38ch}
.gate-btns{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}
.gate .btn-solid{background:var(--band-accent);border-color:var(--band-accent);color:#0B0B0A}
.gate .btn-solid:hover{background:#FF9A1B;border-color:#FF9A1B}
.gate .btn-out{border-color:var(--band-line);color:var(--band-fg)}
.gate .btn-out:hover{background:rgba(255,255,255,.07)}
.gate-exit{max-width:44ch}
.gate-exit p{color:var(--band-dim);font-size:.95rem}
.gate-exit code{
  font-family:var(--f-util);font-size:.78rem;letter-spacing:.06em;
  color:var(--band-accent);border:1px solid var(--band-line);padding:.3rem .55rem;
}

/* ---- lockup ---- */
.lock{display:grid;justify-items:center;gap:.55rem}
.lock-mark{width:var(--mw,34px);height:auto;color:var(--band-accent)}
.lock-word{
  font-family:var(--f-display);font-size:var(--lw,1.02rem);
  letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;
  color:var(--band-fg);line-height:1;
}
.lock-sub{
  font-family:var(--f-util);font-size:var(--ls,.5rem);
  letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;
  color:var(--band-dim);line-height:1;
}
.gate .lock{--mw:clamp(54px,7.5vw,80px);--lw:clamp(1.9rem,5.4vw,3.6rem);--ls:clamp(.52rem,.95vw,.7rem);gap:.9rem}

/* ============================================================
   CABECERA — sólida desde el principio en páginas internas
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--band-bg) 92%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--band-line);
  color:var(--band-fg);
}
.hdr-in{
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);
  height:clamp(64px,7vw,88px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--gut);
}
.nav{display:flex;gap:clamp(1rem,2.1vw,2.1rem);align-items:center}
.nav-r{justify-content:flex-end}
.nav a{
  font-family:var(--f-util);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--band-fg);padding:.4rem 0;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--band-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--band-accent)}
.nav a.is-cta{color:var(--band-accent)}
.hdr .lock{--mw:30px;--lw:.98rem}

/* ============================================================
   CABECERA DE PRODUCTO
   ============================================================ */
.crumb{
  border-bottom:1px solid var(--line);
}
.crumb-in{
  max-width:var(--maxw);margin-inline:auto;padding:.9rem var(--pad);
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
}
.crumb a:hover{color:var(--tint)}
.crumb span[aria-hidden]{opacity:.45}

.hero{padding-block:clamp(2.6rem,6vw,5.5rem)}
.hero-in{display:grid;gap:clamp(2.2rem,5vw,4rem);align-items:center}
@media (min-width:900px){.hero-in{grid-template-columns:1.25fr .75fr}}

.hero-copy{display:grid;gap:1.5rem;align-content:start}
.hero-copy h1{font-size:var(--fs-h1);letter-spacing:-.015em}
.hero-lede{color:var(--fg-dim);max-width:46ch;font-size:1.06rem}
.hero-btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.3rem}

/* fichas de dato clave */
.keys{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:0;border-top:1px solid var(--line);margin-top:.8rem;
}
.key{
  padding:1.1rem 1rem 1.1rem 0;border-bottom:1px solid var(--line);
  display:grid;gap:.35rem;
}
.key dt{font-family:var(--f-util);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)}
.key dd{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1;letter-spacing:.01em;
}
.key dd small{font-size:.5em;color:var(--fg-dim);margin-left:.25em;letter-spacing:.08em}

.hero-vessel{
  display:grid;place-items:center;color:var(--tint);
  position:relative;
}
.hero-vessel::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 55%,color-mix(in srgb,var(--tint) 16%,transparent),transparent 70%);
}
.hero-vessel svg{position:relative;height:clamp(220px,32vw,400px);width:auto}

/* ============================================================
   SECCIONES
   ============================================================ */
.sec{padding-block:clamp(3.6rem,8vw,7rem)}
.sec-alt{background:var(--ink-1)}
.sec-head{display:grid;gap:1.05rem;max-width:var(--measure);margin-bottom:clamp(2.2rem,4.5vw,3.6rem)}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head p{color:var(--fg-dim)}

/* ============================================================
   PERFIL DE CATA — barras horizontales, una sola serie
   Todas del mismo color a propósito: la longitud ya codifica
   la magnitud, teñir por valor la duplicaría sin añadir nada.
   ============================================================ */
.profile{display:grid;gap:clamp(2.4rem,5vw,4rem)}
@media (min-width:920px){.profile{grid-template-columns:1fr 1fr;align-items:start}}

.bars{display:grid;gap:0;border-top:1px solid var(--line)}
.bar{
  display:grid;
  grid-template-columns:minmax(6.5rem,auto) 1fr auto;
  gap:1rem;align-items:center;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
  transition:background .25s ease;
}
.bar:hover{background:var(--field)}
.bar-name{font-family:var(--f-util);font-size:.86rem;letter-spacing:.06em}

.bar-track{
  position:relative;height:10px;background:var(--track);
  /* divisiones sólidas de la escala 0–5, hairline y discretas */
  background-image:repeating-linear-gradient(
    to right,
    transparent 0 calc(20% - 1px),
    var(--line) calc(20% - 1px) 20%
  );
}
.bar-fill{
  position:absolute;inset:0 auto 0 0;
  width:calc(var(--v) / 5 * 100%);
  background:var(--tint);
  border-radius:0 4px 4px 0;
}
.bar-val{
  font-family:var(--f-util);font-size:.8rem;letter-spacing:.06em;
  color:var(--fg-dim);font-variant-numeric:tabular-nums;
  min-width:8.5rem;text-align:right;
}
.bar-val b{color:var(--fg);font-weight:400}
.bars-foot{
  display:flex;justify-content:space-between;
  font-family:var(--f-util);font-size:var(--fs-label);letter-spacing:.2em;
  color:var(--fg-dim);padding-top:.9rem;
}

/* notas de cata */
.notes{display:grid;gap:0;border-top:1px solid var(--line)}
.note{
  padding:1.3rem 0;border-bottom:1px solid var(--line);
  display:grid;gap:.5rem;
}
.note h3{font-size:var(--fs-h3);color:var(--tint)}
.note p{font-size:.97rem;color:var(--fg-dim);max-width:44ch}

/* ============================================================
   MARIDAJE
   ============================================================ */
/* Columnas fijas por tramo, NO auto-fit: son 6 fichas + 1 foto, así que
   hay que controlar el número de columnas para que la rejilla cierre
   sin huecos. Con auto-fit salían 5 columnas y una ficha huérfana. */
.pairs{
  display:grid;grid-template-columns:1fr;
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:540px){.pairs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:820px){.pairs{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1180px){.pairs{grid-template-columns:repeat(4,1fr)}}
.pair{
  background:var(--ink-0);
  padding:clamp(1.3rem,2.4vw,1.9rem);
  display:grid;gap:.6rem;align-content:start;
  transition:background .3s ease;
}
.sec-alt .pair{background:var(--ink-1)}
.pair:hover{background:var(--accent-soft)}
.pair h3{font-size:1.12rem;letter-spacing:.01em}
.pair p{font-size:.92rem;color:var(--fg-dim)}
.pair .lbl{color:var(--tint)}

/* ---- Hueco de fotografía dentro de la rejilla ----
   Cierra la fila que quedaba vacía. Ocupa el ancho completo salvo a
   4 columnas, donde ocupa 2 y completa exactamente la segunda fila.

   En producción se sustituye el <canvas> por la foto:
     <img src="/img/maridaje-cerveza.webp" alt="…" loading="lazy">
   con las mismas reglas de velo y grano. */
.pair-photo{
  grid-column:1 / -1;
  position:relative;isolation:isolate;overflow:hidden;
  margin:0;background:var(--ink-0);
  min-height:clamp(190px,24vw,280px);
  padding:clamp(1.3rem,2.4vw,1.9rem);
  display:grid;align-content:end;
}
@media (min-width:1180px){.pair-photo{grid-column:span 2}}

.pair-photo canvas,
.pair-photo img{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;
  filter:blur(3px) saturate(1.04);
  transform:scale(1.05);
}
/* velo */
.pair-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,11,10,.26) 0%,
    rgba(11,11,10,.50) 52%,
    rgba(11,11,10,.90) 100%);
}
/* grano */
.pair-photo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* El pie va siempre sobre foto oscura, así que usa los tokens de banda
   y no los del tema: no debe cambiar con el tema claro. */
.pair-photo figcaption{position:relative;z-index:3;display:grid;gap:.45rem}
.pair-photo figcaption .lbl{color:var(--band-accent)}
.pair-photo figcaption p{font-size:.93rem;color:var(--band-dim);max-width:36ch}

/* ============================================================
   SERVICIO EN BARRA
   ============================================================ */
.serve{display:grid;gap:clamp(2.2rem,4.5vw,3.5rem)}
@media (min-width:960px){.serve{grid-template-columns:.9fr 1.1fr;align-items:start}}
.serve-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:0 var(--gut);border-top:1px solid var(--line);
}
.serve-list li{
  padding:1.2rem 0;border-bottom:1px solid var(--line);
  display:grid;gap:.4rem;align-content:start;
}
.serve-list .lbl{color:var(--fg-dim)}
.serve-list b{
  font-family:var(--f-display);font-weight:600;
  font-size:1.35rem;line-height:1.05;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.serve-list span{font-size:.88rem;color:var(--fg-dim)}
.warn{
  border-left:2px solid var(--tint);padding-left:1rem;
  font-size:.95rem;color:var(--fg-dim);max-width:42ch;
}

/* ============================================================
   OPINIONES
   MISMO tratamiento que la home: una cita grande centrada + hilera
   de clientes. Es el bloque canónico de prueba social del sitio;
   no inventar variantes por página.
   Banda oscura en los dos temas → tokens de banda.
   Medida en rem, no en ch: con la display condensada el ch sale
   muy estrecho y la cita se parte en demasiadas líneas.
   ============================================================ */
.proof{
  background:var(--band-bg);color:var(--band-fg);
  padding-block:clamp(4rem,8vw,7rem);
}
.quote{
  max-width:min(48rem,88vw);margin-inline:auto;text-align:center;
  display:grid;gap:1.8rem;justify-items:center;
}
.quote blockquote{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.85rem,4.8vw,3.75rem);line-height:1.04;
  letter-spacing:.005em;text-wrap:balance;
}
.quote blockquote span{color:var(--band-tint)}
.quote cite{
  font-style:normal;font-family:var(--f-util);font-size:var(--fs-label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--band-dim);
}
.logos{
  margin-top:clamp(2.8rem,6vw,4.5rem);
  padding-top:2.2rem;border-top:1px solid var(--band-line);
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.4rem);
  align-items:center;justify-content:center;
}
.logos span{
  font-family:var(--f-display);font-size:clamp(.95rem,1.6vw,1.3rem);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--band-dim);opacity:.7;
}

/* ============================================================
   FICHA TÉCNICA
   ============================================================ */
.spec-wrap{overflow-x:auto;border-top:1px solid var(--line-strong)}
.spec{width:100%;border-collapse:collapse;min-width:480px}
.spec th,.spec td{
  text-align:left;padding:.95rem 1rem .95rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--f-util);font-size:.86rem;
  font-variant-numeric:tabular-nums;
}
.spec th{
  font-weight:400;color:var(--fg-dim);width:38%;
  text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-label);
}
.spec td{color:var(--fg)}
.spec td em{font-style:normal;color:var(--fg-dim)}

.dl{
  margin-top:1.6rem;display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--f-util);font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tint);border-bottom:1px solid currentColor;padding-bottom:.3rem;
}
.dl svg{width:14px}

/* ============================================================
   FORMATOS
   ============================================================ */
.fmts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.fmt{
  background:var(--ink-0);padding:clamp(1.4rem,2.6vw,2.1rem);
  display:grid;gap:1.1rem;align-content:start;
}
.sec-alt .fmt{background:var(--ink-1)}
.fmt h3{font-size:1.3rem}
.fmt .lbl{color:var(--tint)}
.fmt dl{margin:0;display:grid;gap:.45rem;border-top:1px solid var(--line);padding-top:.9rem}
.fmt div{display:flex;justify-content:space-between;gap:1rem;font-family:var(--f-util);font-size:.79rem}
.fmt dt{color:var(--fg-dim);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem}
.fmt dd{margin:0;font-variant-numeric:tabular-nums}

/* ============================================================
   LAS OTRAS DOS LÍNEAS
   ============================================================ */
.others{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:760px){.others{grid-template-columns:1fr 1fr}}
.other{
  --tint:var(--accent);
  position:relative;overflow:hidden;
  background:var(--ink-0);
  padding:clamp(1.9rem,3.4vw,3rem);
  display:grid;gap:1rem;align-content:start;
  transition:background .4s ease;
}
.other--sidra{--tint:var(--l-sidra)}
.other--vermut{--tint:var(--l-vermut)}
.other::before{
  content:"";position:absolute;inset:auto 0 0 0;height:0;z-index:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--tint) 18%,transparent));
  transition:height .55s cubic-bezier(.22,.8,.28,1);
}
.other:hover::before{height:100%}
.other > *{position:relative;z-index:1}
.other .lbl{color:var(--tint)}
.other h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.other p{font-size:.95rem;color:var(--fg-dim);max-width:34ch}
.other-link{
  display:inline-flex;align-items:center;gap:.6rem;color:var(--tint);
  font-family:var(--f-util);font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
}
.other-link svg{width:26px;transition:transform .35s ease}
.other:hover .other-link svg{transform:translateX(7px)}

/* ============================================================
   CIERRE
   ============================================================ */
.cta{background:var(--band-bg);color:var(--band-fg);padding-block:clamp(4.2rem,8vw,7rem)}
/* OJO: aquí NO va max-width. Esta clase comparte elemento con .wrap y le
   pisaba el ancho, así que el bloque salía centrado y estrecho en lugar de
   alineado con el resto de la página. El ancho lo dan las columnas. */
.cta-in{display:grid;gap:clamp(2.4rem,5vw,4.5rem);align-items:start}
@media (min-width:960px){.cta-in{grid-template-columns:.92fr 1.08fr}}

.cta-side{display:grid;gap:1.3rem;justify-items:start;align-content:start}
.cta h2{font-size:var(--fs-h2)}
.cta-side > p{color:var(--band-dim)}
.cta-note{
  font-family:var(--f-util);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--band-dim);
  border-left:2px solid var(--band-accent);padding-left:.9rem;
  margin-top:.2rem;
}
/* Vía alternativa al formulario. Un comprador de hostelería que quiere
   hablar ya no debería tener que rellenar nada. */
.cta-alt{
  margin:.5rem 0 0;width:100%;max-width:24rem;
  display:grid;gap:.75rem;
  border-top:1px solid var(--band-line);padding-top:1.3rem;
}
.cta-alt dt{font-family:var(--f-util);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--band-dim)}
.cta-alt dd{margin:.1rem 0 0;font-family:var(--f-util);font-size:1rem;letter-spacing:.04em}

/* ---- Formulario sobre banda oscura ----
   Usa SOLO tokens de banda: esta sección es negra en los dos temas, así
   que con tokens de tema el formulario desaparecería en modo claro. */
.cform{display:grid;gap:1.15rem;width:100%}
.crow{display:grid;gap:1.15rem}
@media (min-width:560px){.crow-2{grid-template-columns:1fr 1fr}}

/* Contexto: deja claro que se pregunta por ESTA línea y no por el catálogo */
.cform-ctx{
  display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  border:1px solid var(--band-line);padding:.8rem 1rem;
  font-family:var(--f-util);font-size:var(--fs-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--band-dim);
}
.cform-ctx b{color:var(--band-tint);font-weight:400;letter-spacing:.2em}

.cfld{display:grid;gap:.45rem}
.cfld label{
  font-family:var(--f-util);font-size:var(--fs-label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--band-dim);
}
.cfld input,.cfld select,.cfld textarea{
  font-family:var(--f-util);font-size:.96rem;letter-spacing:.02em;
  color:var(--band-fg);background:var(--band-field);
  border:0;border-bottom:1px solid var(--band-line-2);
  border-radius:0;padding:.78rem .1rem;width:100%;
  transition:border-color .28s,background .28s;
}
.cfld textarea{min-height:92px;resize:vertical;line-height:1.55}
.cfld input:focus,.cfld textarea:focus{
  outline:none;border-bottom-color:var(--band-accent);
  background:rgba(229,133,0,.13);
}

/* Los <select> van aparte: fondo opaco y <option> pintadas a mano.
   El desplegable abierto lo dibuja el sistema, no la hoja de estilos. */
.cfld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--band-opt-bg);
}
.cfld select:focus{outline:none;border-bottom-color:var(--band-accent)}
.cfld select option{background:var(--band-opt-bg);color:var(--band-fg)}
.cfld-sel{position:relative}
.cfld-sel::after{
  content:"";position:absolute;right:.6rem;bottom:1.2rem;
  width:7px;height:7px;
  border-right:1px solid var(--band-dim);border-bottom:1px solid var(--band-dim);
  transform:rotate(45deg);pointer-events:none;
}
.cconsent{
  display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  font-size:.85rem;color:var(--band-dim);line-height:1.55;
}
.cconsent input{margin-top:.25rem;width:auto;accent-color:var(--band-accent)}
.cconsent a{border-bottom:1px solid var(--band-line-2)}
.cform-foot{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;margin-top:.3rem}
.cform-foot .lbl{color:var(--band-dim);max-width:22ch;letter-spacing:.12em}
.cta .btn-fill{background:var(--band-accent);border-color:var(--band-accent);color:#0B0B0A}
.cform-msg{
  font-family:var(--f-util);font-size:.84rem;letter-spacing:.06em;
  color:var(--band-accent);
  border-left:2px solid var(--band-accent);padding-left:.9rem;
}
.cform-msg[hidden]{display:none}

/* ============================================================
   PIE
   ============================================================ */
.ftr{background:var(--band-bg);color:var(--band-fg);border-top:1px solid var(--band-line);padding-top:clamp(3rem,5.5vw,4.5rem)}
.ftr-top{display:grid;gap:clamp(2.2rem,4.5vw,3.5rem);padding-bottom:clamp(2.4rem,4.5vw,3.5rem)}
@media (min-width:820px){.ftr-top{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.ftr-brand{display:grid;gap:1.1rem;justify-items:start}
.ftr-brand .lock{justify-items:start;--mw:30px;--lw:.98rem;--ls:.48rem}
.ftr-brand p{font-size:.9rem;color:var(--band-dim);max-width:30ch}
.ftr-col{display:grid;gap:.85rem;align-content:start}
.ftr-col .lbl{color:var(--band-fg)}
.ftr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ftr-col a{font-family:var(--f-util);font-size:.88rem;letter-spacing:.05em;opacity:.8;transition:opacity .25s,color .25s}
.ftr-col a:hover{opacity:1;color:var(--band-accent)}
.ftr-legal{
  border-top:1px solid var(--band-line);padding-block:1.5rem;
  display:flex;justify-content:space-between;gap:var(--gut);flex-wrap:wrap;align-items:center;
}
.ftr-legal .lbl{color:var(--band-dim)}
.ftr-legal nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.ftr-resp{
  border:1px solid var(--band-line);color:var(--band-dim);padding:.5rem .9rem;
  font-family:var(--f-util);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
}

/* ---- conmutador de tema y selector de línea (solo demo) ---- */
.demo{
  position:fixed;right:1rem;bottom:1rem;z-index:70;
  display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end;
}
.demo button{
  font-family:var(--f-util);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink-1);color:var(--fg-dim);
  border:1px solid var(--line-strong);padding:.55rem .8rem;cursor:pointer;
}
.demo button:hover{color:var(--accent);border-color:var(--accent)}
.demo button[aria-pressed="true"]{color:var(--ink-0);background:var(--fg);border-color:var(--fg)}

/* ---- revelado ---- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .75s cubic-bezier(.22,.8,.28,1),transform .75s cubic-bezier(.22,.8,.28,1)}
.rv.is-in{opacity:1;transform:none}
/* las barras crecen desde cero al entrar en pantalla */
.bars .bar-fill{transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.22,.8,.28,1)}
.bars.is-in .bar-fill{transform:scaleX(1)}
.bars .bar:nth-child(2) .bar-fill{transition-delay:.07s}
.bars .bar:nth-child(3) .bar-fill{transition-delay:.14s}
.bars .bar:nth-child(4) .bar-fill{transition-delay:.21s}
.bars .bar:nth-child(5) .bar-fill{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  .pg *,.pg *::before,.pg *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1;transform:none}
  .bars .bar-fill{transform:scaleX(1)}
}

/* --- overrides Bykamen (produccion) --- */
.gate{display:none !important}
.demo{display:none !important}
body.linea-cerveza .pg{--tint:var(--l-cerveza);--band-tint:var(--band-cerveza)}
body.linea-sidra .pg{--tint:var(--l-sidra);--band-tint:var(--band-sidra)}
body.linea-vermut .pg{--tint:var(--l-vermut);--band-tint:var(--band-vermut)}