/* ===========================================================================
   raizal-marco.css — cabecera (<header class="hdr">) y pie (<footer class="pie">) de
   Café Raizal. Una sola hoja para la home nueva y para las páginas que pasen al
   camino C (nav y pie escritos en el HTML, no inyectados por nav.js/footer.js).

   Reglas de la casa (PLAN-RAIZAL-ARQUITECTURA.md §C, 11/09/2026):
   · Lleva SUS tokens (:root) y SUS primitivas (.w, .btn, .logo, .icono, .badge, .mono),
     acotadas a .hdr y .pie para no restyle-ar nada de la página que la incluya
     (10 plantillas viejas usan class="btn" con otro significado).
   · No lleva resets globales: los que necesita van acotados (.hdr a, .pie ul…).
   · Se sirve con huella de contenido: /css/raizal-marco.<md5 corto>.css (immutable un año).
     Cambiar esta hoja = nombre nuevo + subir el <link> en las páginas que la cargan.
   · La barra promo la sigue inyectando nav.js (fija, top:0): la cabecera baja lo que
     mida (--announcement-h, que calcula fixBarOffsets). La página que la use tiene que
     dejar ese hueco a su primer bloque:
       padding-top:calc(var(--navh) + var(--announcement-h,0px) + …)
   · Fuentes: Playfair Display (menú), Inter (cuerpo) y JetBrains Mono (metadata): la página
     tiene que cargarlas en su <link> de Google Fonts.
   ========================================================================= */
:root{
  --negro:#000;
  --rojo:#CF0011;
  --rojo-osc:#9B0008;
  --dorado:#C8A96E;
  --dorado-claro:#E2C99A;
  --blanco:#FFF;
  --sec:rgba(255,255,255,.65);
  --ter:rgba(255,255,255,.5);
  --borde:rgba(255,255,255,.1);
  --borde-fuerte:rgba(255,255,255,.22);
  --f-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-cuerpo:  clamp(0.9rem,  0.833rem + 0.296vw, 1rem);
  --t-mono-s:  clamp(0.68rem, 0.633rem + 0.207vw, 0.8rem);
  --cont:1200px;
  --pad:clamp(1.25rem,5vw,3rem);
  --navh:58px;
  --r:8px;
}
@media (min-width:768px){ :root{ --navh:72px; } }

/* --- resets ACOTADOS (nada global: la página que incluya esto tiene los suyos) ------
   Con :where() el ámbito NO suma especificidad: «:where(.pie) p» pesa lo mismo que «p»,
   así que .pie__m{margin-top} sigue ganando igual que en la home (medido el 11/09: con
   «.pie p» a secas el margen del párrafo del pie se iba a 0). */
:where(.hdr,.pie),:where(.hdr,.pie) *,:where(.hdr,.pie) *::before,:where(.hdr,.pie) *::after{ box-sizing:border-box; }
.hdr,.pie{ font-family:var(--f-body); font-size:var(--t-cuerpo); font-weight:300; line-height:1.7; color:var(--blanco); }
:where(.hdr,.pie) a{ color:inherit; text-decoration:none; }
:where(.hdr,.pie) img,:where(.hdr,.pie) svg{ display:block; max-width:100%; }
:where(.pie) h3,:where(.pie) p,:where(.pie) ul{ margin:0; }
:where(.pie) ul{ list-style:none; padding:0; }
:where(.hdr,.pie) [hidden]{ display:none !important; }
:where(.hdr,.pie) :focus-visible{ outline:2px solid var(--dorado); outline-offset:3px; border-radius:2px; }

/* --- primitivas (copiadas de la home, acotadas) ------------------------------------ */
.hdr .w,.pie .w{ width:100%; max-width:var(--cont); margin-inline:auto; padding-inline:var(--pad); }
.hdr .mono,.pie .mono{ font-family:var(--f-mono); font-size:var(--t-mono-s); letter-spacing:.16em; text-transform:uppercase; }
.hdr .btn,.pie .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  min-height:52px; padding:.85rem clamp(1.25rem,3.5vw,2.1rem);
  font-family:var(--f-mono); font-size:var(--t-mono-s); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-align:center;
  border:1px solid transparent; border-radius:var(--r);
  transition:background .35s ease,border-color .35s ease,color .35s ease,transform .35s ease;
}
.hdr .btn--rojo,.pie .btn--rojo{ background:var(--rojo); color:#fff; }
.hdr .btn--rojo:hover,.pie .btn--rojo:hover{ background:var(--rojo-osc); }
.pie__g>*{ min-width:0; }

/* ===== 0 · NAV =========================================================== */
.hdr__chk{ position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; z-index:-1; }
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120; height:var(--navh);
  display:flex; align-items:center;
  background:rgba(0,0,0,.55); border-bottom:1px solid var(--borde);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
}
.nav__in{ display:flex; align-items:center; gap:.5rem; }
.hdr .logo,.pie .logo{ display:flex; align-items:center; min-height:44px; min-width:44px; color:#fff; flex:0 0 auto; }
.hdr .logo img,.pie .logo img{ height:30px; width:auto; }
@media (min-width:768px){ .hdr .logo img,.pie .logo img{ height:38px; } }
.nav__links{ display:none; }
.nav__sp{ margin-left:auto; }
.nav__act{ display:flex; align-items:center; gap:.35rem; }
.hdr .icono,.pie .icono{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; color:#fff; transition:color .3s ease;
  background:none; border:0; padding:0; cursor:pointer;
}
.hdr .icono:hover,.pie .icono:hover{ color:var(--dorado); }
.hdr .icono svg,.pie .icono svg{ width:20px; height:20px; }
.hdr .badge{
  position:absolute; top:5px; right:4px; min-width:17px; height:17px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--rojo); color:#fff; border-radius:999px;
  font-family:var(--f-mono); font-size:10px; line-height:1; font-weight:500;
}
.nav .btn{ min-height:44px; padding:.5rem 1rem; font-size:var(--t-mono-s); letter-spacing:.14em; }
.burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 10px; cursor:pointer; }
.burger span{ display:block; height:1px; background:#fff; transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s ease; }
.hdr__chk:checked ~ .nav .burger span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.hdr__chk:checked ~ .nav .burger span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }
@media (min-width:1100px){
  .burger{ display:none; }
  .nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.6vw,2.2rem); margin-left:clamp(1.5rem,4vw,3.5rem); }
  .nav__links a{
    font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
    color:rgba(255,255,255,.72); padding:.35rem 0; position:relative; transition:color .3s ease;
  }
  .nav__links a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--rojo); transform:scaleX(0); transform-origin:0 50%; transition:transform .4s cubic-bezier(.16,1,.3,1);
  }
  .nav__links a:hover{ color:#fff; }
  .nav__links a:hover::after{ transform:scaleX(1); }
}
/* panel de menú (solo CSS) */
.menu{
  position:fixed; inset:0; z-index:110; background:#000;
  padding:calc(var(--navh) + clamp(2rem,7vw,3.5rem)) 0 clamp(2rem,7vw,3rem);
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease,visibility .4s ease;
  overflow-y:auto;
}
.hdr__chk:checked ~ .menu{ opacity:1; visibility:visible; pointer-events:auto; }
.menu__a{ display:block; font-family:var(--f-display); font-size:clamp(2rem,9vw,2.75rem); line-height:1; padding:.55em 0; border-bottom:1px solid var(--borde); }
.menu__a:first-child{ border-top:1px solid var(--borde); }
.menu__pie{ margin-top:clamp(2rem,7vw,3rem); color:var(--sec); }
.menu__pie a{ display:block; min-height:44px; display:flex; align-items:center; }
@media (min-width:1100px){ .menu{ display:none; } }

/* --- la barra promo la inyecta nav.js: fija, top:0, 32 px en escritorio y
       44 px en móvil. Mi cabecera baja lo que ella mida (--announcement-h, que
       calcula fixBarOffsets) y el hero y las láminas dejan ese hueco. --------- */
html body{ padding-top:0 !important; }   /* nav.js mete 102px a ≤768px para SU nav, no para el mío */
/* Hueco reservado ANTES de que corra nav.js (si no, el hero bajaba 37 px tras el primer
   pintado: CLS 0,014 a 1440). Medido: 44 px a ≤768 y 37 px por encima. fixBarOffsets lo
   sobreescribe con el alto real, y el script del <head> lo pone a 0 si la cerraste. */
:root{ --announcement-h:37px; }
@media (max-width:768px){ :root{ --announcement-h:44px; } }
/* El aspa de la barra promo hace bar.style.display='none', pero nav.js:48 declara
   .announcement-bar{display:flex !important} y ganaba: la barra seguia ocupando 44 px con
   el nav (logo, cesta, COMPRAR, menu) escondido debajo. Un id + atributo gana al !important. */
#promo-bar[style*="display: none"],#promo-bar[style*="display:none"]{ display:none !important; }
.nav{ top:var(--announcement-h,0px); }
.menu{ top:var(--announcement-h,0px); }
/* nav.js pone la barra promo a nowrap+overflow:hidden y a 360 px el texto se corta por
   los DOS lados. Aquí se deja envolver; fixBarOffsets recalcula --announcement-h sola. */
@media (max-width:768px){
  .announcement-bar{ height:auto !important; min-height:44px !important; padding:8px 46px 8px 14px !important; }
  .announcement-bar .announcement-text{ white-space:normal !important; font-size:11px !important; letter-spacing:.5px !important; line-height:1.5 !important; }
  /* el enlace de dentro viene como inline-flex y parte por trozos: aquí fluye como texto.
     r2-5: era el único objetivo táctil por debajo de 44 px (298×28 a 360). El relleno
     vertical con margen negativo agranda la caja pulsable sin mover la barra ni impedir
     que el texto envuelva (inline-block no envolvería y se saldría a 360). */
  .announcement-bar .announcement-text a{ display:inline !important; padding-block:9px; margin-block:-9px; }
}
@media (min-width:481px) and (max-width:768px){
  /* el texto entero de la barra ES el enlace (nav.js:251) y ahi cabe en una linea: se le da
     el alto completo de la barra sin cambiarla de tamano (el margen negativo se come su padding) */
  .announcement-bar .announcement-text a{ padding-block:14px; margin-block:-8px; }
}

/* ===== 10 · PIE ========================================================== */
.pie{ border-top:1px solid var(--borde); padding-block:clamp(3.5rem,9vw,5.5rem) clamp(2rem,5vw,3rem); }
.pie__g{ display:grid; gap:clamp(2.5rem,6vw,3rem); }
@media (min-width:768px){ .pie__g{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); } }
.pie__m{ color:var(--sec); max-width:34ch; margin-top:1.25rem; font-size:.9rem; }
.pie h3{ font-family:var(--f-mono); font-size:var(--t-mono-s); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--dorado); margin:0 0 .5rem; }
.pie li a,.pie__c a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--sec); transition:color .3s ease; }
.pie li a:hover,.pie__c a:hover{ color:#fff; }
.pie__c address{ font-style:normal; color:var(--sec); font-size:.9rem; margin-top:.5rem; }
.pie__b{ margin-top:clamp(3rem,7vw,4rem); padding-top:1.5rem; border-top:1px solid var(--borde); display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:center; justify-content:space-between; }
.pie__legal{ display:flex; flex-wrap:wrap; gap:0 1.25rem; }
.pie__legal a,.pie__b span{ font-family:var(--f-mono); font-size:var(--t-mono-s); letter-spacing:.14em; text-transform:uppercase; color:var(--ter); }
.pie__legal a{ display:inline-flex; align-items:center; min-height:44px; }
.pie__legal a:hover{ color:#fff; }
.redes{ display:flex; gap:.25rem; }

/* --- pie: boletín (manejador y endpoint portados de js/footer.js:298-330) -- */
.pie__nl{ margin-top:clamp(2.5rem,6vw,3.5rem); padding-top:clamp(1.75rem,4vw,2.25rem); border-top:1px solid var(--borde); display:grid; gap:1rem; }
@media (min-width:900px){ .pie__nl{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(2rem,5vw,4rem); } }
.pie__nl-t{ font-family:var(--f-display); font-size:clamp(1.25rem,1.1rem + .7vw,1.65rem); line-height:1.25; }
.pie__nl-s{ margin-top:.6rem; color:var(--sec); font-size:.88rem; max-width:44ch; }
.nl-form{ display:flex; flex-wrap:wrap; gap:.6rem; }
.nl-form input{
  flex:1 1 12rem; min-width:0; min-height:52px; padding:.75rem 1rem; color:#fff;
  background:#0A0A0A; border:1px solid var(--borde-fuerte); border-radius:var(--r);
  font-family:var(--f-body); font-size:.95rem;
}
.nl-form input::placeholder{ color:var(--ter); }
.pie .nl-form button{ flex:0 0 auto; cursor:pointer; border:0; }   /* .pie: para ganar a «.pie .btn» (border:1px) */
.pie__nl-msg{ margin-top:.75rem; font-family:var(--f-mono); font-size:var(--t-mono-s); letter-spacing:.12em; text-transform:uppercase; color:var(--rojo); min-height:1em; }
.pie__nl-msg.ok{ color:var(--dorado); }
.pie__pref{ background:none; border:0; padding:0; cursor:pointer; font-family:var(--f-mono); font-size:var(--t-mono-s); letter-spacing:.14em; text-transform:uppercase; color:var(--ter); display:inline-flex; align-items:center; min-height:44px; }
.pie__pref:hover{ color:#fff; }