/* ============================================================
   BIOWELL BAR · IDENTIDAD PROPIA
   ------------------------------------------------------------
   La fuente es el "Manual de marca BioWellBar by Diego Sívori"
   (v1.0, 2026). Esta hoja se carga SOLO en bar.html, después del
   sistema de Biowellness, y va sin @layer para ganarle: el bar
   reusa la estructura del sitio (nav, secciones, botones, pie,
   banner de cookies) pero con su propia paleta y su tipografía.

   QUÉ SALE DEL MANUAL Y QUÉ NO
   · Paleta: los cinco colores, sin agregar ninguno (pág. 22).
     Además, el papel crema claro y el blanco, que el manual lista
     como fondos permitidos (pág. 18), y la superficie #26383B de
     sus propias tarjetas sobre Charcoal.
   · Tipografía: Poppins en todo, de 300 a 700 (pág. 24-25).
   · Logo: el archivo original del manual, nunca retipeado
     (img/bar/logo-*.png). El isotipo solo, únicamente en los usos
     que el manual autoriza: favicon y patrón de fondo a baja
     opacidad (pág. 14).

   DONDE ESTA HOJA SE APARTA DEL MANUAL, Y POR QUÉ
   · Las etiquetas (kickers) no van en Terracotta. Terracotta
     sobre Charcoal da 3,45:1 y sobre el papel 4,45:1: las dos
     reprueban WCAG AA en texto chico. Van en Tostado sobre oscuro
     (7,81:1) y en Cacao sobre claro (9,76:1). Terracotta queda
     para lo que no es texto chico: cuadrados, líneas, títulos.
   · El contraste Charcoal/Crema medido es 10,45:1, no el 12,1
     que dice la pág. 23. Sigue sobrado.
   · Los enlaces dentro de un párrafo llevan subrayado. El manual
     prohíbe subrayar para DESTACAR (pág. 25); un enlace sin otra
     marca que el color no se distingue para quien no ve colores.
   · El botón de WhatsApp no es verde: el manual no admite colores
     nuevos. Va en Crema con el glifo de WhatsApp, que es lo que lo
     identifica.
   ============================================================ */

:root{
  /* ---- Paleta del manual ---- */
  --bb-charcoal:#121C1E;  /* fondo principal · 45 % */
  --bb-crema:   #E2C4A2;  /* superficie y texto · 25 % */
  --bb-terra:   #A55C33;  /* acento de marca · 15 % */
  --bb-tostado: #D3A66F;  /* acento secundario · 10 % */
  --bb-cacao:   #5A3219;  /* profundidad y contraste · 5 % */
  --bb-papel:   #F7F0E8;  /* fondo claro (pág. 18) */
  --bb-tarjeta: #26383B;  /* tarjetas sobre Charcoal, las del manual */

  /* ---- Los tokens del sistema, remapeados ----
     Así nav, botones, pie, avisos y banner de cookies toman la
     identidad del bar sin reescribir un solo componente. */
  --ink:   var(--bb-charcoal);
  --ink-2: var(--bb-tarjeta);
  --ink-3: rgba(226,196,162,.16);
  --habana:var(--bb-charcoal);
  --bone:  var(--bb-papel);
  --bone-2:#FFFFFF;
  --stone: rgba(18,28,30,.13);

  --tx-d:     var(--bb-charcoal);
  --tx-d-mut: var(--bb-cacao);     /* 9,76:1 sobre el papel */
  --tx-l:     var(--bb-crema);     /* 10,45:1 sobre Charcoal */
  --tx-l-mut: var(--bb-tostado);   /* 7,81:1 sobre Charcoal · 5,52:1 sobre tarjeta */

  --accent:        var(--bb-terra);
  --accent-strong: var(--bb-tostado);
  --accent-tx:     var(--bb-cacao);

  --metal:   linear-gradient(90deg, var(--bb-cacao) 0%, var(--bb-terra) 55%, var(--bb-tostado) 100%);
  --metal-v: linear-gradient(180deg,var(--bb-cacao) 0%, var(--bb-terra) 55%, var(--bb-tostado) 100%);
  --metal-45:linear-gradient(135deg,var(--bb-cacao) 0%, var(--bb-terra) 55%, var(--bb-tostado) 100%);
  --metal-btn:var(--bb-crema);
  --spectrum:  var(--metal);
  --spectrum-v:var(--metal-v);
  --shadow-btn:0 8px 24px -12px rgba(226,196,162,.5);

  /* Foco del teclado y los íconos de aviso usan --oxy. */
  --oxy:var(--bb-tostado);

  --ff-display:"Poppins", Arial, Helvetica, sans-serif;
  --ff-body:   "Poppins", Arial, Helvetica, sans-serif;
  --ff-mono:   "Poppins", Arial, Helvetica, sans-serif;
  --fw-display:700;
  --fw-tech:   700;
  --fs-hero:clamp(2.5rem, 6.2vw, 4.9rem);
  --fs-h2:  clamp(1.9rem, 4vw,   3rem);
}
/* Sobre claro, el foco en Tostado no llega a 3:1. */
.on-light{--oxy:var(--bb-cacao)}

::selection{background:var(--bb-terra);color:#fff}

/* ---------- Tipografía ----------
   Título: Bold 700, interlineado 1.1, tracking 0 (pág. 25). */
.display{letter-spacing:0;line-height:1.1}
.sec-head h2{margin-top:.9rem}
.sec-head p{max-width:62ch} /* el manual pide 70 caracteres como máximo */
.eyebrow{font-weight:700;letter-spacing:.2em;font-size:.72rem}
.on-dark .eyebrow{color:var(--bb-tostado)}
.on-light .eyebrow{color:var(--bb-cacao)}
.eyebrow::before{background:var(--bb-terra)}
.bb-acento{color:var(--bb-tostado)}
.on-light .bb-acento{color:var(--bb-terra)} /* título grande: 4,45:1 alcanza como texto grande */
.bb-enl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:600}
.on-dark .bb-enl{color:var(--bb-crema)}

/* ---------- Nav ---------- */
header.nav.scrolled{background:rgba(18,28,30,.9)}
.bb-logo{display:block;line-height:0}
/* 200 px de ancho: el mínimo digital del manual es 160, y más chico la
   firma manuscrita deja de leerse (pág. 17). */
.bb-logo img{width:200px;height:auto}
.nav-links a:not(.btn){font-weight:500}
@media (max-width:1100px){
  .nav-links{background:rgba(18,28,30,.98)}
}
@media (max-width:640px){
  .bb-logo img{width:168px}
}

/* ---------- Botones ---------- */
.btn{font-weight:600}
.btn-primary:hover{box-shadow:0 12px 30px -12px rgba(226,196,162,.6)}
.btn-ghost{border-color:rgba(226,196,162,.35);color:var(--bb-crema)}
.btn-ghost:hover{border-color:var(--bb-crema)}
.btn-whatsapp{background:var(--bb-crema);color:var(--bb-charcoal);box-shadow:var(--shadow-btn)}
.btn-whatsapp:hover{background:var(--bb-tostado);color:var(--bb-charcoal);box-shadow:0 12px 30px -12px rgba(211,166,111,.6)}
.on-light .btn-whatsapp{background:var(--bb-charcoal);color:var(--bb-crema);box-shadow:none}
.on-light .btn-whatsapp:hover{background:var(--bb-cacao);color:var(--bb-crema)}

/* ---------- Hero ---------- */
.hero .aurora{
  background:
    radial-gradient(60% 55% at 82% 16%,rgba(165,92,51,.22),transparent 62%),
    radial-gradient(50% 50% at 92% 58%,rgba(211,166,111,.12),transparent 62%),
    radial-gradient(60% 60% at 8% 92%,rgba(90,50,25,.35),transparent 60%);
}
.hero .grid-fade{display:none}
/* El patrón de marca: el isotipo repetido "a baja opacidad, como
   textura. Nunca protagonista" (pág. 14). */
.bb-patron{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background:url("/img/bar/isotipo.svg") 0 0/96px auto repeat;
  -webkit-mask-image:linear-gradient(110deg,transparent 35%,#000 85%);
          mask-image:linear-gradient(110deg,transparent 35%,#000 85%);
}
.hero h1{max-width:15ch}
.hero p.lead{color:var(--bb-crema);font-weight:500;max-width:46ch}
.bb-propuesta{margin-top:1rem;max-width:56ch;color:var(--bb-tostado);font-size:1.02rem}

/* ---------- La foto (render del salón) ---------- */
.bar-foto{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--ink-3);background:var(--bb-tarjeta);
}
.bar-foto .img-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bar-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.3rem 1.5rem;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-crema);
}
.bar-foto:has(.img-cover)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(18,28,30,.8),rgba(18,28,30,.12) 45%,transparent 70%);
}
@media (max-width:640px){ .bar-foto{aspect-ratio:4/3} }

/* ---------- Columnas genéricas ---------- */
.bar-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start;margin-top:clamp(1.8rem,4vw,2.6rem)}
@media (max-width:840px){ .bar-cols{grid-template-columns:1fr} }
.bb-h3{font-size:1.35rem;font-weight:600;line-height:1.2}

/* ---------- El cuadrado ----------
   La unidad del isotipo, usada como viñeta y como color de cada
   pilar. Cacao sobre Charcoal casi no se ve: lleva un filo. */
.sq{display:inline-block;width:.8em;height:.8em;flex:none;background:var(--c,var(--bb-terra))}
.sq--rend{--c:var(--bb-terra)}
.sq--recu{--c:var(--bb-tostado)}
.sq--long{--c:var(--bb-crema)}
.sq--bien{--c:var(--bb-cacao);box-shadow:inset 0 0 0 1px rgba(226,196,162,.35)}

/* ---------- Propósito: cómo lo resolvemos ---------- */
.bb-checks{list-style:none;display:grid;gap:.9rem;margin-top:1.2rem}
.bb-checks li{display:flex;gap:.9rem;align-items:baseline;font-size:1.02rem}
.bb-checks .sq{width:.62em;height:.62em;transform:translateY(-.05em)}

.bb-criterios{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin-top:clamp(1.4rem,3vw,2rem);
}
.bb-criterio{background:#fff;border:1px solid var(--stone);border-radius:var(--r-lg);padding:1.4rem 1.3rem}
.bb-criterio .n{font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--bb-terra)}
.bb-criterio h4{font-size:1.1rem;font-weight:600;margin:.45rem 0 .35rem}
.bb-criterio p{font-size:.93rem;color:var(--bb-cacao)}
@media (max-width:760px){ .bb-criterios{grid-template-columns:1fr} }

/* ---------- Los cuatro pilares ---------- */
.bb-pilares{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  margin-top:clamp(2rem,4vw,2.8rem);
}
.bb-pilar{
  background:var(--bb-tarjeta);border-radius:var(--r-lg);padding:1.6rem 1.4rem 1.7rem;
  display:flex;flex-direction:column;
}
.bb-pilar .sq{width:34px;height:34px}
.bb-pilar h3{
  margin-top:1.3rem;font-size:1.02rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bb-crema);
}
/* Cursiva solo en la bajada, que es una línea: el manual la prohíbe
   en texto largo, no en una frase corta (pág. 25). */
.bb-pilar .bajada{font-style:italic;font-weight:500;color:var(--bb-crema);margin-top:.5rem;line-height:1.4}
.bb-pilar p:last-child{font-size:.92rem;color:var(--bb-tostado);margin-top:1rem}
@media (max-width:1000px){ .bb-pilares{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .bb-pilares{grid-template-columns:1fr} }

/* ---------- Para quién ---------- */
.bb-perfiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
.bb-perfil{
  background:#fff;border:1px solid var(--stone);border-radius:var(--r-lg);
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;
}
.bb-perfil h3{font-size:1.15rem;font-weight:600}
.bb-perfil p{font-size:.94rem;color:var(--bb-cacao)}
.bb-perfil blockquote{
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--stone);
  font-weight:500;font-size:.98rem;color:var(--bb-charcoal);
}
.bb-entra{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-cacao)}
.bb-entra span{display:inline-flex;align-items:center;gap:.45rem}
.bb-entra .sq--long{box-shadow:inset 0 0 0 1px rgba(90,50,25,.35)}
@media (max-width:900px){ .bb-perfiles{grid-template-columns:1fr} }

/* ---------- La carta ---------- */
.bb-cartas{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
.bb-carta{background:var(--bb-tarjeta);border-radius:var(--r-lg);padding:1.8rem 1.6rem}
.bb-carta .n{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--bb-tostado)}
.bb-carta h3{font-size:1.4rem;font-weight:700;margin-top:.5rem;color:var(--bb-crema)}
.bb-carta .bajada{color:var(--bb-tostado);margin-top:.3rem;font-size:.95rem}
.bb-carta ul{list-style:none;margin-top:1.2rem;border-top:1px solid var(--ink-3)}
.bb-carta li{
  display:flex;gap:.8rem;align-items:baseline;padding:.75rem 0;
  border-bottom:1px solid var(--ink-3);font-weight:500;color:var(--bb-crema);
}
.bb-carta li .sq{width:.55em;height:.55em}
.bb-carta li small{display:block;font-weight:400;color:var(--bb-tostado);font-size:.85rem}
@media (max-width:760px){ .bb-cartas{grid-template-columns:1fr} }

.bb-llevar{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);
  margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:clamp(2rem,4vw,2.6rem);
  border-top:1px solid var(--ink-3);
}
.bb-llevar p{color:var(--bb-tostado)}
.bb-etiqueta{
  border:1px dashed rgba(226,196,162,.4);border-radius:var(--r-md);
  padding:1.3rem 1.3rem 1.1rem;
}
.bb-etiqueta .k{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bb-tostado)}
.bb-etiqueta ul{list-style:none;margin-top:.8rem;display:grid;gap:.65rem}
.bb-etiqueta li{display:flex;gap:.8rem;align-items:baseline;color:var(--bb-crema);font-size:.95rem}
.bb-etiqueta li .sq{width:.55em;height:.55em}
@media (max-width:840px){ .bb-llevar{grid-template-columns:1fr} }

/* ---------- El market ---------- */
.bb-momentos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(2rem,4vw,2.6rem)}
.bb-momento{background:#fff;border:1px solid var(--stone);border-radius:var(--r-lg);padding:1.5rem 1.4rem}
.bb-momento h3{display:flex;align-items:center;gap:.7rem;font-size:1.15rem;font-weight:600}
.bb-momento h3 .sq{width:.7em;height:.7em}
.bb-momento p{margin-top:.6rem;color:var(--bb-cacao);font-size:.95rem}
@media (max-width:700px){ .bb-momentos{grid-template-columns:1fr} }
.bb-gondola{margin-top:clamp(2rem,4vw,2.6rem)}
.bb-gondola .k{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bb-cacao)}
.bb-gondola ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.bb-gondola li{
  font-size:.9rem;font-weight:500;padding:.45rem .95rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--stone);color:var(--bb-charcoal);
}
.bb-bucle{
  margin-top:clamp(2rem,4vw,2.6rem);font-weight:600;font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:1.4;color:var(--bb-charcoal);max-width:40ch;
}

/* ---------- Lo que nos diferencia ---------- */
.bb-dif{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--ink-3);border:1px solid var(--ink-3);border-radius:var(--r-lg);overflow:hidden;
  margin-top:clamp(2rem,4vw,2.8rem);
}
.bb-dif > div{background:var(--bb-charcoal);padding:1.6rem 1.4rem}
.bb-dif h3{font-size:1.02rem;font-weight:600;color:var(--bb-crema);display:flex;gap:.7rem;align-items:baseline}
.bb-dif h3 .sq{width:.6em;height:.6em}
.bb-dif p{margin-top:.6rem;font-size:.92rem;color:var(--bb-tostado)}
@media (max-width:1000px){ .bb-dif{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .bb-dif{grid-template-columns:1fr} }

/* ---------- Diego ---------- */
.bb-diego{margin-top:clamp(3rem,7vw,5rem)}
.bb-diego p{color:var(--bb-tostado)}
.bb-diego p b{color:var(--bb-crema)}
.member .role{color:var(--bb-tostado)}
.avatar{background:var(--bb-tarjeta)}
.avatar .ini{color:var(--bb-crema)}
.bar-cita{
  position:relative;margin-top:clamp(2.2rem,5vw,3.2rem);
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1.6rem,3vw,2.4rem);
  background:var(--bb-tarjeta);border-radius:var(--r-lg);overflow:hidden;
}
.bar-cita::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--bb-terra)}
.bar-cita p{
  font-weight:600;font-size:clamp(1.25rem,2.8vw,1.7rem);line-height:1.35;
  color:var(--bb-crema);max-width:34ch;
}
.bar-cita cite{
  display:block;margin-top:1.1rem;font-style:normal;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bb-tostado);
}

/* ---------- Manifiesto ----------
   Crema pleno con texto Charcoal: "la inversa, para piezas claras"
   (pág. 23). Es el texto que el manual destina a la sección
   "nosotros" de la web, completo. */
.bb-manifiesto{background:var(--bb-crema);color:var(--bb-charcoal);--oxy:var(--bb-cacao)}
.bb-manifiesto .eyebrow{color:var(--bb-cacao)}
.bb-manifiesto .eyebrow::before{background:var(--bb-cacao)}
.bb-manif-txt{max-width:60ch;margin-top:1.4rem}
.bb-manif-txt p{font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.6;color:var(--bb-charcoal)}
.bb-manif-txt > * + *{margin-top:1.2rem}
.bb-manif-txt .fuerte{font-weight:700;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.3}
.bb-manif-txt .cierre{font-weight:700}
.bb-manif-txt .cierre span{display:block;font-weight:400}

/* ---------- Dónde ---------- */
.contact-card{background:var(--bb-tarjeta);border-color:transparent}
.contact-card .k{color:var(--bb-tostado)}
.contact-card .v{color:var(--bb-crema)}
.bb-donde p{color:var(--bb-tostado)}

/* ---------- Pie ---------- */
.bb-logo-pie img{width:240px;height:auto}
.foot-tag{font-weight:600;margin-top:1rem}
.foot-tag span{display:block;font-weight:400;color:var(--bb-tostado);font-size:.95rem;margin-top:.2rem}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem}

/* ---------- Banner de cookies ---------- */
.cookies{background:rgba(18,28,30,.98)}
.cookies-no{background:var(--bb-tarjeta);border-color:var(--bb-tarjeta)}
.cookies-no:hover{background:var(--bb-cacao)}