/*
Theme Name: BROPI
Theme URI: https://bropi.com
Author: BROPI
Author URI: https://bropi.com
Description: Tema dinámico para BROPI — Protein Bar & Functional Goodies. Al activarlo crea todas las páginas, los menús y la carta completa. Incluye carta filtrable, armador de pedidos por WhatsApp, promociones con vigencia, testimonios, preguntas frecuentes, registro de Bropi Squad, cuenta regresiva de apertura y panel de control propio.
Version: 2.1.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bropi
Tags: one-page, restaurant, food, custom-colors, custom-menu, custom-logo, translation-ready, block-styles
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --crema:#FAF5EC; --arena:#EFE6D6; --terra:#E05B3A; --terra-osc:#B94427;
  --tinta:#191512; --tinta-suave:#4a423a; --gris:#8a7f72; --salvia:#6E7F5E;
  --linea:#DBD1C0; --linea-oscura:rgba(250,245,236,.14);

  --logo:"Fredoka","Baloo 2",sans-serif;
  --display:"Oswald","Arial Narrow",sans-serif;
  --texto:"Manrope","Helvetica Neue",Arial,sans-serif;

  --ancho:1180px; --estrecho:760px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sombra:0 18px 50px rgba(25,21,18,.10);
  --sombra-fuerte:0 26px 70px rgba(25,21,18,.22);
  --trans:.3s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--alto-cabecera,68px) + var(--alto-indice,0px) + 16px)}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--texto);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
svg{max-width:100%}
a{color:var(--terra-osc);text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--terra)}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:4px}
button{font-family:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.06;
  letter-spacing:.4px;text-transform:uppercase;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.1rem,2vw,1.45rem)}
h4{font-size:1rem;letter-spacing:.8px}
p{margin:0 0 1.1em}

.env{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
.env.estrecho{max-width:var(--estrecho)}
.seccion{padding:clamp(64px,9vw,120px) 0;position:relative}
.seccion--tinta{background:var(--tinta);color:var(--crema)}
.seccion--tinta h2,.seccion--tinta h3,.seccion--tinta h4{color:var(--crema)}
.seccion--arena{background:var(--arena)}
.centrado{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-9999px;background:var(--terra);color:#fff;padding:12px 20px;z-index:1000}
.saltar:focus{left:12px;top:12px}

.rotulo{font-family:var(--display);font-size:.74rem;font-weight:500;letter-spacing:3.2px;
  text-transform:uppercase;color:var(--terra);display:block;margin-bottom:12px}
.entradilla{font-size:clamp(1rem,1.7vw,1.18rem);color:var(--tinta-suave);max-width:62ch}
.seccion--tinta .entradilla,.seccion--tinta p{color:#CDC3B4}
.cabecera-seccion{margin-bottom:clamp(34px,4.5vw,56px);max-width:66ch}
.cabecera-seccion--centrada{margin-left:auto;margin-right:auto;text-align:center}
.cabecera-pagina{margin:0 0 clamp(34px,4.5vw,56px);max-width:70ch}
.cabecera-pagina--estrecha{max-width:var(--estrecho)}
.enlace-simple{font-family:var(--display);letter-spacing:1.4px;text-transform:uppercase;font-size:.85rem;
  border-bottom:2px solid var(--terra);padding-bottom:2px}

/* ============================================================
   3. WORDMARK
   ============================================================ */
.wordmark{font-family:var(--logo);font-weight:600;letter-spacing:-.02em;color:var(--tinta);
  line-height:1;display:inline-flex;align-items:baseline;white-space:nowrap}
.wordmark--negativo{color:var(--crema)}
.wordmark__i{position:relative;display:inline-block}
.wordmark__i svg{position:absolute;left:50%;transform:translateX(-46%);bottom:.72em;width:.24em;height:.38em;fill:var(--terra)}
.wordmark__punto{color:var(--terra)}
.logo-imagen{max-height:52px;width:auto}

/* ============================================================
   4. BOTONES
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:.92rem;
  font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:15px 28px;
  border-radius:var(--r-pill);border:2px solid transparent;cursor:pointer;text-align:center;
  transition:transform var(--trans),background var(--trans),color var(--trans),border-color var(--trans)}
.btn:hover{transform:translateY(-2px)}
.btn--principal{background:var(--terra);color:#fff}
.btn--principal:hover{background:var(--terra-osc);color:#fff}
.btn--linea{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--crema)}
.seccion--tinta .btn--linea,.hero .btn--linea{color:var(--crema);border-color:rgba(250,245,236,.4)}
.seccion--tinta .btn--linea:hover,.hero .btn--linea:hover{background:var(--crema);color:var(--tinta)}
.btn--pequeno{padding:11px 20px;font-size:.8rem}
.btn__punto{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ============================================================
   5. BARRA DE ANUNCIO
   ============================================================ */
.barra-anuncio{background:var(--terra);color:#fff;position:relative;z-index:950}
.barra-anuncio__fila{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 24px;min-height:44px}
.barra-anuncio p{margin:0;font-family:var(--display);font-size:.82rem;letter-spacing:1.4px;
  text-transform:uppercase;text-align:center}
.barra-anuncio a{color:#fff;border-bottom:1px solid rgba(255,255,255,.55)}
.barra-anuncio__cerrar{background:none;border:0;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;padding:0 4px;opacity:.8}
.barra-anuncio__cerrar:hover{opacity:1}
.barra-anuncio[hidden]{display:none}

/* ============================================================
   6. CABECERA
   ============================================================ */
/* La cabecera es SÓLIDA por defecto en todas las páginas: así el menú siempre
   se lee. Solo se vuelve transparente cuando el JavaScript confirma que está
   sobre el hero oscuro, y entonces invierte los colores de golpe. */
.cabecera{position:sticky;top:0;z-index:900;padding:12px 0;
  background:rgba(250,245,236,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:background var(--trans),padding var(--trans),box-shadow var(--trans),border-color var(--trans)}
.cabecera.fija{box-shadow:0 6px 24px rgba(25,21,18,.07);border-bottom-color:var(--linea)}

.cabecera--sobre-oscuro{background:transparent;backdrop-filter:none;box-shadow:none;border-bottom-color:transparent}

.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cabecera__marca{display:inline-flex;align-items:center}

/* Colores por tono. Nunca dependen del fondo que haya detrás por casualidad. */
.cabecera .wordmark{color:var(--tinta)}
.cabecera .nav__lista a{color:var(--tinta)}
.cabecera .menu-boton{color:var(--tinta)}
.cabecera--sobre-oscuro .wordmark{color:var(--crema)}
.cabecera--sobre-oscuro .nav__lista a{color:var(--crema)}
.cabecera--sobre-oscuro .menu-boton{color:var(--crema)}

.nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav__lista{display:flex;align-items:center;gap:clamp(12px,1.8vw,24px);list-style:none;margin:0;padding:0}
.nav__lista a{font-family:var(--display);font-size:clamp(.74rem,.95vw,.84rem);font-weight:500;letter-spacing:1.3px;
  text-transform:uppercase;position:relative;padding:4px 0;display:inline-flex;align-items:baseline;gap:6px;
  white-space:nowrap}
.nav__numero{font-size:.6rem;letter-spacing:.5px;color:var(--terra);opacity:.75;transition:opacity var(--trans)}
.nav__gancho{display:none}
.nav__lista a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--terra);transition:width var(--trans)}
.nav__lista a:hover::after,.nav__lista .current-menu-item > a::after{width:100%}
.nav__lista a:hover{color:var(--terra)}
.nav__lista a:hover .nav__numero{opacity:1}
.nav__lista .current-menu-item > a{color:var(--terra)}
.nav__lista .sub-menu{display:none}
.nav__cabecera,.nav__pie{display:none}

.menu-boton{display:none;background:none;border:0;padding:6px 4px;cursor:pointer;color:var(--tinta);
  align-items:center;gap:9px;font-family:var(--display);font-size:.74rem;letter-spacing:1.8px;text-transform:uppercase}
.menu-boton__lineas{display:block;width:26px}
.menu-boton__lineas span{display:block;width:100%;height:2px;background:currentColor;margin:5px 0;transition:var(--trans)}
.menu-boton[aria-expanded="true"] .menu-boton__lineas span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-boton[aria-expanded="true"] .menu-boton__lineas span:nth-child(2){opacity:0}
.menu-boton[aria-expanded="true"] .menu-boton__lineas span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Índice de la portada ---------- */
.indice{position:sticky;top:var(--alto-cabecera,68px);z-index:880;background:var(--tinta);
  border-bottom:1px solid var(--linea-oscura);transition:top var(--trans)}
.indice__progreso{height:3px;background:rgba(250,245,236,.10)}
.indice__progreso span{display:block;height:100%;width:0;background:var(--terra);transition:width .15s linear}
.indice__fila{display:flex;align-items:center;gap:20px;padding:0 24px}
.indice__titulo{font-family:var(--display);font-size:.66rem;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--gris);white-space:nowrap;flex:none;padding:12px 0}
.indice__lista{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.indice__lista::-webkit-scrollbar{display:none}
.indice__lista a{display:block;font-family:var(--display);font-size:.76rem;letter-spacing:1.5px;
  text-transform:uppercase;color:#B7AB9A;padding:13px 14px;white-space:nowrap;border-bottom:2px solid transparent;transition:var(--trans)}
.indice__lista a:hover{color:var(--crema)}
.indice__lista a.activo{color:var(--terra);border-bottom-color:var(--terra)}
.indice__final a{color:var(--terra);font-weight:600}
.indice__final a::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--terra);margin-right:8px;vertical-align:middle}

/* ============================================================
   7. PORTADA
   ============================================================ */
.hero{background:var(--tinta);color:var(--crema);padding-bottom:clamp(50px,7vw,80px);
  position:relative;overflow:hidden;
  margin-top:calc(-1 * var(--alto-cabecera,68px));
  padding-top:calc(var(--alto-cabecera,68px) + clamp(52px,8vw,104px))}
.hero__patron{position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(var(--terra) 1.4px,transparent 1.4px);background-size:26px 26px;pointer-events:none}
.hero__reja{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center;position:relative;z-index:2}
.hero h1{color:var(--crema);margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--terra);display:block}
.hero__entrada{font-size:clamp(1.02rem,1.8vw,1.22rem);color:#D6CCBD;max-width:52ch;margin-bottom:30px}
.hero__estado{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-family:var(--display);
  font-size:.78rem;letter-spacing:2.6px;text-transform:uppercase;color:var(--terra)}
.hero__acciones{display:flex;flex-wrap:wrap;gap:13px}
.hero__acciones.centrado{justify-content:center}
.hero__arte{display:flex;justify-content:center;position:relative;z-index:2}
.hero__arte img{width:min(260px,72%);filter:drop-shadow(0 30px 45px rgba(0,0,0,.45))}
.flota{animation:flota 6s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.pulso{width:9px;height:9px;border-radius:50%;background:var(--terra);position:relative;flex:none}
.pulso::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--terra);
  opacity:.55;animation:pulso 2.4s ease-out infinite}
@keyframes pulso{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.local-abierto .hero__estado,.local-abierto .pie__estado{color:var(--salvia)}
.local-abierto .pulso{background:var(--salvia)}
.local-abierto .pulso::after{border-color:var(--salvia)}

.cuenta{margin:0 0 30px;padding:20px 22px;border:1px solid var(--linea-oscura);border-radius:var(--r-md);
  background:rgba(250,245,236,.05);display:inline-block}
.cuenta__titulo{font-family:var(--display);font-size:.74rem;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--terra);margin:0 0 10px}
.cuenta__reja{display:flex;gap:22px}
.cuenta__reja strong{display:block;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:600;color:var(--crema);line-height:1}
.cuenta__reja span{font-family:var(--display);font-size:.68rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--gris)}

.cinta{border-top:1px solid var(--linea-oscura);margin-top:clamp(38px,6vw,60px);padding-top:32px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:2}
.cinta strong{display:block;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:600;color:var(--terra);line-height:1}
.cinta span{font-family:var(--display);font-size:.7rem;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gris);margin-top:8px;display:block;line-height:1.5}

/* ============================================================
   8. LÍNEAS DE PRODUCTO
   ============================================================ */
.lineas{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.linea{background:var(--arena);border-radius:var(--r-md);padding:28px 24px;display:flex;flex-direction:column;
  transition:transform var(--trans),box-shadow var(--trans)}
.linea:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.linea--ancla{background:var(--tinta);color:var(--crema)}
.linea--ancla h3{color:var(--crema)}
.linea--ancla .linea__claim{color:#CDC3B4}
.linea__arte{height:96px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:18px}
.linea__arte img{height:100%;width:auto}
.linea__claim{font-size:.94rem;color:var(--tinta-suave);flex:1;margin-bottom:14px}
.linea__precio{font-family:var(--display);font-size:1.4rem;font-weight:600;color:var(--terra);margin:0 0 10px}
.linea__enlace{font-family:var(--display);font-size:.76rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--terra);border-bottom:1px solid currentColor;align-self:flex-start}
.lineas__nota{margin-top:26px;font-family:var(--display);font-size:.78rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--terra);text-align:center}
.etiqueta{align-self:flex-start;font-family:var(--display);font-size:.64rem;letter-spacing:1.8px;
  text-transform:uppercase;background:var(--terra);color:#fff;padding:5px 11px;border-radius:var(--r-pill);margin-bottom:12px}

/* ============================================================
   9. COLUMNAS Y DATOS
   ============================================================ */
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.dos-columnas--invertida > *:first-child{order:2}
.dos-columnas--retrato{grid-template-columns:.85fr 1.15fr}
.tres-columnas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.datos-fuertes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
.datos-fuertes strong{display:block;font-family:var(--display);font-size:1.9rem;font-weight:600;color:var(--terra);line-height:1}
.datos-fuertes span{font-size:.82rem;color:var(--tinta-suave);display:block;margin-top:4px;line-height:1.4}
.imagen-flotante{margin:0 auto;filter:drop-shadow(0 24px 40px rgba(25,21,18,.16))}
.sello-pi{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-size:.74rem;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--terra-osc)}
.sello-pi__svg{width:44px;height:44px;flex:none}
.sello-grande svg{width:170px;height:170px}
.ejemplo-macros{background:var(--crema);border-radius:var(--r-md);padding:22px;text-align:center;border:1px solid var(--linea)}

/* ============================================================
   10. CARTA
   ============================================================ */
.carta__barra{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin-bottom:34px;padding-bottom:18px;border-bottom:1px solid var(--linea)}
.carta__lineas{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--display);font-size:.8rem;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;
  padding:10px 18px;border-radius:var(--r-pill);border:1.5px solid var(--linea);background:transparent;
  color:var(--tinta-suave);cursor:pointer;transition:var(--trans)}
.chip:hover{border-color:var(--tinta);color:var(--tinta)}
.chip--activo{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}
.carta__herramientas{display:flex;gap:10px;flex-wrap:wrap}
.carta__buscar input,.carta__orden select{font-family:var(--texto);font-size:.9rem;padding:10px 15px;
  border:1.5px solid var(--linea);border-radius:var(--r-pill);background:var(--crema);color:var(--tinta);min-width:200px}
.carta__orden select{min-width:auto}
.carta__seccion{margin-bottom:52px}
.carta__seccion[hidden]{display:none}
.carta__cabecera{margin-bottom:18px}
.carta__cabecera h3{margin:0 0 4px;color:var(--terra-osc)}
.carta__claim{font-size:.92rem;color:var(--gris);margin:0}
.carta__vacio{text-align:center;color:var(--gris);padding:30px 0}

.platos{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px;list-style:none;margin:0;padding:0}
.plato{padding:20px 0;border-bottom:1px solid var(--linea)}
.plato[hidden]{display:none}
.plato--agotado{opacity:.5}
.plato__linea1{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.plato__nombre{font-family:var(--display);font-size:1.06rem;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plato__precio{font-family:var(--display);font-size:1.06rem;font-weight:600;color:var(--terra);white-space:nowrap}
.plato__desc{font-size:.92rem;color:var(--tinta-suave);margin:5px 0 0}
.plato__macros{margin-top:8px}
.plato__pedir{display:inline-block;margin-top:10px;font-family:var(--display);font-size:.7rem;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--terra);border:1px solid var(--terra);
  padding:5px 12px;border-radius:var(--r-pill)}
.plato__pedir:hover{background:var(--terra);color:#fff}
.macros{font-family:var(--display);font-size:.76rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--salvia)}
.macros b{color:var(--terra-osc);font-weight:600}
.macros i{font-style:normal;opacity:.5;margin:0 2px}
.rombo{color:var(--terra);font-size:.7em}
.etiqueta-mini{font-family:var(--display);font-size:.6rem;letter-spacing:1.4px;text-transform:uppercase;
  background:var(--terra);color:#fff;padding:3px 8px;border-radius:var(--r-pill)}
.etiqueta-mini--gris{background:var(--gris)}

.carta__toppings{margin-bottom:44px}
.toppings{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.toppings__grupo{background:var(--crema);border:1px solid var(--linea);border-radius:var(--r-md);padding:20px 22px}
.seccion--arena .toppings__grupo{background:var(--crema)}
.toppings__grupo h4{display:flex;justify-content:space-between;color:var(--terra-osc);margin-bottom:8px}
.toppings__grupo p{font-size:.9rem;color:var(--tinta-suave);margin:0}
.carta__pie{border-top:1px solid var(--linea);padding-top:24px}
.carta__pie .nota{font-size:.88rem;color:var(--gris);margin:14px 0 6px}
.aviso{font-size:.82rem;color:var(--gris);border-left:3px solid var(--terra);padding-left:16px;max-width:72ch}

/* ============================================================
   11. ARMADOR DE PEDIDO
   ============================================================ */
.armador{display:grid;grid-template-columns:1.4fr .6fr;gap:28px;align-items:start}
.armador__grupo{border:0;padding:0;margin:0 0 26px}
.armador__grupo legend{font-family:var(--display);font-size:.8rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--terra);padding:0;margin-bottom:12px}
.armador__opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.opcion{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1.5px solid var(--linea);
  border-radius:var(--r-sm);cursor:pointer;background:var(--crema);transition:var(--trans);font-size:.9rem}
.seccion--arena .opcion{background:var(--crema)}
.opcion:hover{border-color:var(--terra)}
.opcion input{accent-color:var(--terra);flex:none;margin:0}
.opcion__nombre{flex:1}
.opcion__precio{font-family:var(--display);font-size:.85rem;color:var(--terra-osc);white-space:nowrap}
.opcion:has(input:checked){border-color:var(--terra);background:rgba(224,91,58,.07)}

.armador__resumen{position:sticky;top:96px;background:var(--tinta);color:var(--crema);
  border-radius:var(--r-md);padding:26px 24px}
.armador__resumen h3{color:var(--crema);margin-bottom:14px}
.armador__lista{list-style:none;margin:0 0 18px;padding:0;font-size:.9rem;color:#CDC3B4;max-height:230px;overflow:auto}
.armador__lista li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--linea-oscura)}
.armador__placeholder{color:var(--gris);border:0!important}
.armador__totales{border-top:1px solid var(--linea-oscura);padding-top:14px;margin-bottom:18px}
.armador__totales div{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.armador__totales span{font-family:var(--display);font-size:.72rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--gris)}
.armador__totales strong{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--terra)}
.armador__enviar{width:100%;justify-content:center}
.armador__nota{font-size:.78rem;color:var(--gris);margin:12px 0 0}

/* ============================================================
   12. MARCA, PILARES, SQUAD
   ============================================================ */
.silaba{background:rgba(250,245,236,.05);border:1px solid var(--linea-oscura);border-radius:var(--r-md);padding:28px 26px}
.silaba__letra{font-family:var(--logo);font-size:2.8rem;font-weight:600;color:var(--terra);line-height:1;display:block;margin-bottom:14px}
.silaba__claves{font-family:var(--display);font-size:.72rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--terra);margin:14px 0 0}
.verbo{background:var(--terra);color:#fff;border-radius:var(--r-md);padding:28px 26px}
.verbo__entrada{font-family:var(--logo);font-size:2rem;font-weight:600;margin:0 0 12px}
.verbo__entrada i{font-family:var(--texto);font-size:.9rem;font-style:italic;opacity:.8}
.verbo ol{margin:0;padding-left:20px}
.verbo li{margin-bottom:7px}
.verbo__frase{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:1px;
  margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.28)}

.pilares{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;list-style:none;margin:0;padding:0}
.pilar{background:var(--arena);border-radius:var(--r-md);padding:24px 14px;text-align:center}
.seccion--tinta .pilar{background:rgba(250,245,236,.06);border:1px solid var(--linea-oscura)}
.pilar__icono svg{width:38px;height:38px;margin:0 auto 12px;display:block}
.pilar__letra{font-family:var(--display);font-size:1.9rem;font-weight:700;color:var(--terra);line-height:1;display:block}
.pilar__palabra{font-family:var(--display);font-size:.7rem;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--tinta-suave);margin-top:6px;display:block}
.seccion--tinta .pilar__palabra{color:var(--crema)}

.ventajas{list-style:none;margin:24px 0;padding:0}
.ventajas li{position:relative;padding-left:26px;margin-bottom:12px;font-size:.98rem}
.ventajas li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--terra)}
.responsabilidades{list-style:none;margin:22px 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.responsabilidades li{font-family:var(--display);font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;
  border:1px solid rgba(250,245,236,.28);border-radius:var(--r-pill);padding:8px 15px}
.interior--nosotros .responsabilidades li{border-color:var(--linea);color:var(--tinta-suave)}

.tarjeta-sellos{background:var(--crema);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:28px;box-shadow:var(--sombra)}
.tarjeta-sellos__cabecera{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.tarjeta-sellos__titulo{font-family:var(--display);font-size:1.15rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.tarjeta-sellos__lema{font-family:var(--display);font-size:.7rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--terra);margin:0 0 18px}
.tarjeta-sellos__reja{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:16px}
.sello{aspect-ratio:1;border-radius:50%;border:2px dashed var(--linea);display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-size:.9rem;color:var(--linea)}
.sello--marcado{border-style:solid;border-color:var(--terra);background:var(--terra);color:#fff}
.sello--premio{border-style:solid;border-color:var(--tinta);background:var(--tinta);color:var(--crema);
  font-size:.62rem;letter-spacing:1px;text-align:center;padding:6px}
.tarjeta-sellos__pie{font-size:.82rem;color:var(--gris);margin:0}
.tarjeta-sellos--grande{padding:34px}

/* ============================================================
   13. PROMOS, TESTIMONIOS, FAQ
   ============================================================ */
.promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.promo{background:var(--arena);border-radius:var(--r-md);padding:28px 26px;border-top:4px solid var(--terra)}
.promo__texto{font-size:.95rem;color:var(--tinta-suave)}
.promo__vigencia{font-family:var(--display);font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--gris);margin:0}
.promo__enlace{font-family:var(--display);font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;border-bottom:1px solid currentColor}

.testimonios{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.testimonio{background:var(--arena);border-radius:var(--r-md);padding:28px 26px;margin:0}
.testimonio blockquote{margin:0 0 16px;font-size:1.02rem;color:var(--tinta);position:relative;padding-top:22px}
.testimonio blockquote::before{content:"\201C";position:absolute;top:-6px;left:0;font-family:var(--display);
  font-size:3rem;color:var(--terra);line-height:1}
.testimonio figcaption strong{display:block;font-family:var(--display);letter-spacing:.8px;text-transform:uppercase;font-size:.85rem}
.testimonio figcaption span{font-size:.82rem;color:var(--gris)}

.faq{max-width:820px;margin:0 auto}
.faq__item{border-bottom:1px solid var(--linea)}
.faq__item h3{margin:0}
.faq__boton{width:100%;background:none;border:0;padding:22px 44px 22px 0;text-align:left;cursor:pointer;
  font-family:var(--display);font-size:clamp(.98rem,1.6vw,1.16rem);font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--tinta);position:relative}
.faq__boton::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:1.6rem;color:var(--terra);transition:transform var(--trans);line-height:1}
.faq__boton[aria-expanded="true"]::after{transform:translateY(-50%) rotate(45deg)}
.faq__panel{padding:0 0 22px;color:var(--tinta-suave);font-size:.98rem;max-width:70ch}
.faq__panel[hidden]{display:none}
.cierre-faq{text-align:center;margin-top:44px;padding-top:34px;border-top:1px solid var(--linea)}

/* ============================================================
   14. FORMULARIOS
   ============================================================ */
.formulario-caja{background:var(--arena);border-radius:var(--r-md);padding:32px 30px;margin-top:28px}
.interior--squad .formulario-caja{background:var(--tinta);color:var(--crema)}
.interior--squad .formulario-caja h2{color:var(--crema)}
.formulario__fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:block;margin-bottom:14px}
.campo span{display:block;font-family:var(--display);font-size:.72rem;letter-spacing:1.7px;
  text-transform:uppercase;color:var(--terra);margin-bottom:6px}
.campo input,.campo textarea{width:100%;font-family:var(--texto);font-size:1rem;padding:13px 16px;
  border:1.5px solid var(--linea);border-radius:var(--r-sm);background:var(--crema);color:var(--tinta)}
.campo input:focus,.campo textarea:focus{border-color:var(--terra);outline:none}
.trampa{position:absolute;left:-9999px}
.formulario__respuesta{margin:14px 0 0;font-size:.92rem;min-height:1.4em}
.formulario__respuesta.ok{color:var(--salvia)}
.formulario__respuesta.error{color:var(--terra)}
.formulario__legal{font-size:.78rem;color:var(--gris);margin:10px 0 0}
.interior--squad .formulario__legal{color:var(--gris)}
.busqueda{display:flex;gap:10px;margin:20px 0}

.datos-contacto{list-style:none;margin:26px 0;padding:0}
.datos-contacto li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--linea)}
.datos-contacto span{font-family:var(--display);font-size:.72rem;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--terra);width:104px;flex:none}

.horario{list-style:none;margin:22px 0;padding:0}
.horario__dia{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:1px solid var(--linea);font-size:.94rem}
.seccion--tinta .horario__dia,.pie .horario__dia{border-color:var(--linea-oscura)}
.horario__dia--hoy{color:var(--terra)}
.horario__dia--hoy strong{color:var(--terra)}
.horario__dia i{font-style:normal;font-family:var(--display);font-size:.66rem;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--terra);margin-left:7px}
.delivery{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px;font-size:.9rem}
.delivery span{font-family:var(--display);font-size:.72rem;letter-spacing:1.7px;text-transform:uppercase;color:var(--gris)}
.delivery a{border-bottom:1px solid currentColor}

.mapa{border-radius:var(--r-md);overflow:hidden;min-height:320px;background:rgba(250,245,236,.06)}
.mapa iframe{width:100%;min-height:380px;border:0;display:block}
.mapa--vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:44px 30px;border:1px dashed var(--linea-oscura)}
.mapa__sello{width:110px;height:110px;margin-bottom:18px}
.mapa--vacio p{color:#CDC3B4;max-width:36ch}

/* ============================================================
   15. RETRATO
   ============================================================ */
.retrato{margin:0;position:relative}
.retrato img{border-radius:var(--r-lg);width:100%;object-fit:cover;box-shadow:var(--sombra-fuerte)}
.retrato figcaption{position:absolute;left:20px;bottom:20px;right:20px;background:rgba(25,21,18,.82);
  backdrop-filter:blur(6px);border-radius:var(--r-md);padding:14px 18px;color:var(--crema)}
.retrato__nombre{display:block;font-family:var(--display);font-size:1.1rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.7px}
.retrato__rol{display:block;font-family:var(--display);font-size:.68rem;letter-spacing:1.9px;
  text-transform:uppercase;color:var(--terra);margin-top:2px}

/* ============================================================
   16. INTERIORES Y ENTRADAS
   ============================================================ */
.interior{padding:clamp(56px,8vw,96px) 0}
.interior--centrado{display:flex;align-items:center;min-height:60vh}
.interior__contenido{max-width:var(--estrecho)}
.interior__contenido h2,.interior__contenido h3{margin-top:1.8em}
.interior__contenido ul,.interior__contenido ol{padding-left:22px}
.interior__contenido li{margin-bottom:8px}
.interior__contenido blockquote{border-left:3px solid var(--terra);margin:1.6em 0;padding-left:22px;
  font-style:italic;color:var(--tinta-suave)}
.interior__contenido img{border-radius:var(--r-md);margin:1.6em 0}
.entradas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.entrada{background:var(--arena);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.entrada__imagen img{width:100%;aspect-ratio:4/3;object-fit:cover}
.entrada__cuerpo{padding:26px 24px;display:flex;flex-direction:column;flex:1}
.entrada__fecha{font-family:var(--display);font-size:.7rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--terra);margin:0 0 8px}
.entrada__titulo{font-size:1.2rem;margin-bottom:10px}
.entrada__titulo a{color:var(--tinta)}
.entrada__titulo a:hover{color:var(--terra-osc)}
.entrada__extracto{font-size:.94rem;color:var(--tinta-suave);flex:1}
.entrada__portada img{border-radius:var(--r-lg);margin-bottom:34px}
.navegacion-entradas{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:24px;
  border-top:1px solid var(--linea);font-family:var(--display);font-size:.82rem;letter-spacing:1.4px;text-transform:uppercase}
.cierre-entrada{margin-top:44px;padding:32px;background:var(--arena);border-radius:var(--r-md);text-align:center}
.paginacion{margin-top:40px;font-family:var(--display);letter-spacing:1.4px;text-transform:uppercase}
.paginacion .page-numbers{padding:8px 14px;border:1px solid var(--linea);border-radius:var(--r-pill);margin-right:6px;display:inline-block}
.paginacion .current{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
.paleta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.muestra__color{display:block;height:90px;border-radius:var(--r-sm);border:1px solid var(--linea)}
.muestra__nombre{display:block;font-family:var(--display);font-size:.78rem;letter-spacing:1.4px;
  text-transform:uppercase;margin-top:9px}
.muestra__hex{font-size:.78rem;color:var(--gris)}

/* ============================================================
   17. PIE Y BARRA MÓVIL
   ============================================================ */
.pie{background:var(--tinta);color:#A99C8B;padding:clamp(50px,7vw,76px) 0 26px}
.pie__reja{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;padding-bottom:38px;
  border-bottom:1px solid var(--linea-oscura)}
.pie h3{color:var(--crema);font-size:.82rem;letter-spacing:2.2px;margin-bottom:14px}
.pie a{color:#CDC3B4}
.pie a:hover{color:var(--terra)}
.pie__lema{font-family:var(--display);font-size:.74rem;letter-spacing:3.2px;text-transform:uppercase;
  color:var(--terra);margin:10px 0 14px}
.pie__estado{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:.72rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--terra)}
.pie__menu{list-style:none;margin:0;padding:0}
.pie__menu li{margin-bottom:9px}
.pie__redes{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.pie__redes a{font-family:var(--display);font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;
  border:1px solid var(--linea-oscura);border-radius:var(--r-pill);padding:8px 15px;color:var(--crema)}
.pie__redes a:hover{background:var(--crema);color:var(--tinta)}
.pie__legal{padding-top:22px;font-size:.8rem}
.pie__aviso{font-size:.76rem;color:var(--gris);max-width:80ch}

.barra-movil{display:none;position:fixed;left:0;right:0;bottom:0;z-index:940;background:var(--tinta);
  border-top:1px solid var(--linea-oscura);padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1.4fr 1fr;gap:8px;align-items:center}
.barra-movil a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--crema);
  font-family:var(--display);font-size:.66rem;letter-spacing:1.3px;text-transform:uppercase;padding:8px 4px;text-align:center}
.barra-movil__icono{width:20px;height:20px}
.barra-movil__principal{background:var(--terra);border-radius:var(--r-pill);padding:13px 10px!important;color:#fff!important}

/* ============================================================
   18. ANIMACIÓN DE ENTRADA
   ============================================================ */
.revelar{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.revelar.visible{opacity:1;transform:none}

/* ============================================================
   19. RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .lineas{grid-template-columns:repeat(2,1fr)}
  .tres-columnas{grid-template-columns:1fr}
  .armador{grid-template-columns:1fr}
  .armador__resumen{position:static}
  .platos{grid-template-columns:1fr;gap:0}
  .pie__reja{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:1080px){
  .menu-boton{display:flex}
  .nav{position:fixed;inset:0;background:var(--tinta);flex-direction:column;justify-content:flex-start;
    gap:0;transform:translateX(100%);transition:transform var(--trans);padding:26px 26px calc(30px + env(safe-area-inset-bottom));
    overflow-y:auto;align-items:stretch}
  .nav.abierto{transform:translateX(0)}
  /* Con el menú abierto la cabecera siempre es oscura: el aspa se lee sobre el panel. */
  .cabecera:has(.nav.abierto){background:var(--tinta);backdrop-filter:none;border-bottom-color:transparent}
  .cabecera:has(.nav.abierto) .wordmark,
  .cabecera:has(.nav.abierto) .menu-boton{color:var(--crema)}
  body.sin-scroll .cabecera{background:var(--tinta);backdrop-filter:none}
  body.sin-scroll .cabecera .wordmark,
  body.sin-scroll .cabecera .menu-boton{color:var(--crema)}

  .nav__cabecera{display:block;padding-bottom:26px;margin-bottom:8px;border-bottom:1px solid var(--linea-oscura)}
  .nav__cabecera p{font-family:var(--display);font-size:.72rem;letter-spacing:2.4px;text-transform:uppercase;
    color:var(--terra);margin:10px 0 0}

  .nav__lista{flex-direction:column;gap:0;align-items:stretch;width:100%}
  .nav__lista li{border-bottom:1px solid var(--linea-oscura)}
  .nav__lista a,.cabecera .nav__lista a,.cabecera--sobre-oscuro .nav__lista a{color:var(--crema);font-size:1.4rem;
    display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:0 12px;padding:17px 0;align-items:baseline}
  .nav__lista a::after{display:none}
  .nav__numero{grid-row:1/3;align-self:center;font-size:.78rem;color:var(--terra);opacity:1}
  .nav__texto{grid-column:2}
  .nav__gancho{display:block;grid-column:2;font-family:var(--texto);font-size:.8rem;letter-spacing:0;
    text-transform:none;color:var(--gris);margin-top:3px}
  .nav__lista .current-menu-item > a .nav__texto{color:var(--terra)}

  .nav__acciones{margin-top:26px}
  .nav__acciones .btn{width:100%;justify-content:center;font-size:.9rem;padding:16px 24px}
  .nav__pie{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--linea-oscura)}
  .nav__pie a{font-family:var(--display);font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--crema);border:1px solid var(--linea-oscura);border-radius:var(--r-pill);padding:8px 15px}
  body.sin-scroll{overflow:hidden}
}

@media (max-width:880px){
  .hero__reja,.dos-columnas,.dos-columnas--retrato{grid-template-columns:1fr;gap:34px}
  .dos-columnas--invertida > *:first-child{order:0}
  .hero__arte{order:-1}
  .hero__arte img{width:min(190px,52%)}
  .cinta{grid-template-columns:repeat(2,1fr);gap:22px}
  .toppings{grid-template-columns:1fr}
  .pilares{grid-template-columns:repeat(5,1fr);gap:7px}
  .pilar{padding:16px 6px}
  .pilar__icono svg{width:28px;height:28px}

  .indice__titulo{display:none}
  .indice__fila{padding:0 14px}
  .indice__lista a{padding:12px 11px;font-size:.72rem}
  .barra-movil{display:grid}
  body{padding-bottom:74px}
  .cuenta__reja{gap:16px}
}
@media (max-width:620px){
  body{font-size:16px}
  .lineas{grid-template-columns:1fr}
  .pilares{grid-template-columns:repeat(2,1fr);gap:10px}
  .pilar__icono svg{width:34px;height:34px}
  .formulario__fila{grid-template-columns:1fr}
  .datos-fuertes{grid-template-columns:1fr;gap:12px}
  .datos-contacto li{flex-direction:column;gap:2px}
  .datos-contacto span{width:auto}
  .carta__herramientas{width:100%}
  .carta__buscar input{min-width:0;width:100%}
  .carta__buscar{flex:1}
  .retrato figcaption{left:12px;right:12px;bottom:12px;padding:12px 14px}
  .pie__reja{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .revelar{opacity:1;transform:none}
}

/* ============================================================
   20. IMPRESIÓN
   ============================================================ */
@media print{
  .cabecera,.barra-anuncio,.barra-movil,.pie,.armador,.hero__arte{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .seccion{padding:12pt 0}
  .platos{grid-template-columns:1fr 1fr}
}