/*!
 * Pastelitos Pipo · estilos del sitio público (Prisma Develop).
 * Marca: verde #325419, dorado #F2A020, grises #F1F1F1 / #E7E7E7. Bebas Neue (títulos), Damion (acentos), Poppins (cuerpo).
 */

/* ---------- Tokens ---------- */
:root {
  --g: #325419;
  --g2: #26410f;
  --g3: #182a08;
  --o: #F2A020;
  --o2: #ffc457;
  --o3: #fde3b4;
  --cream: #fff6e4;
  --bg: #F1F1F1;
  --line: #E7E7E7;
  --ink: #1d2616;
  --mut: #525a4c;
  --card: #fff;
  --gt: var(--g); /* verde como TEXTO (en oscuro se aclara) */
  --gt2: var(--g2);
  --red: #A85A00; /* la clienta no quiere rojo: «rojo» del sitio = naranja oscuro legible */
  --ok: #1a7a40;
  --wa: #1a8f4a;
  --ig: linear-gradient(45deg, #E8892A, #C25E0E); /* naranja: sin rosa, rojo ni morado */
  --r: 22px;
  --r-sm: 14px;
  --hh: 72px;
  /* Sombras teñidas de verde (nunca negras): una sola luz, desde arriba. */
  --sh-c: 24, 42, 8;
  --sh-sm: 0 4px 12px rgba(var(--sh-c), .14);
  --sh: 0 10px 30px rgba(38, 65, 15, .10);
  --sh-lg: 0 24px 60px rgba(var(--sh-c), .22);
  --sh-deep: 0 40px 80px rgba(var(--sh-c), .38);
  --ff: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fd: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --fs: 'Damion', 'Brush Script MT', cursive;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Curvas fuertes para UI (entradas/salidas), movimiento en pantalla y hojas tipo iOS. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --t-fast: 160ms;
  --t-ui: 240ms;
  /* Escala de espacios (ritmo vertical). */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  /* Capas (orden único de z-index). */
  --z-base: 1;
  --z-raise: 2;
  --z-mbar: 20;
  --z-wa: 30;
  --z-fab: 31;
  --z-cart: 35;
  --z-cookies: 36;
  --z-mnav: 39;
  --z-head: 40;
  --z-sheet: 60;
  --z-skip: 100;
  /* Grano de papel muy sutil (SVG estático, sin coste de animación). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--hh) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font: 400 15.5px/1.6 var(--ff); color: var(--ink); background: var(--bg); overflow-x: hidden; overflow-x: clip; min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
/* Táctil: sin retardo de doble toque y sin seleccionar el texto de los controles al mantener pulsado. */
a, button, summary, label, [role="button"], .item { touch-action: manipulation; }
button, .btn, .cta, .chip, .tabs a, .mfab__btn, .mfab__link, .burger, .x, .wa-float, .foot-social a, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--gt); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
/* iOS hace zoom si el campo tiene menos de 16px. */
input, select, textarea { font-size: max(16px, 1em); }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--o); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: var(--z-skip); background: var(--o); color: var(--g3); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.site-main:focus { outline: none; }
.ico { flex: none; }
.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.wrap--narrow { max-width: 820px; }
.script { font-family: var(--fs); font-weight: 400; color: var(--o); text-transform: none; letter-spacing: 0; display: inline-block; }
.muted { color: var(--mut); font-size: 14px; }

/* ---------- Botones ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btns--center { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; text-align: center; transition: transform var(--t-ui) var(--ease-out), background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 16.5px; }
.btn--block { width: 100%; }
.btn--gold { background: var(--o); color: var(--g3); box-shadow: 0 8px 22px rgba(242, 160, 32, .35), inset 0 -2px 0 rgba(var(--sh-c), .12); }
.btn--green { background: var(--g); color: #fff; box-shadow: 0 8px 20px rgba(50, 84, 25, .25), inset 0 -2px 0 rgba(var(--sh-c), .25); }
.btn--line { background: var(--card); color: var(--gt); border-color: var(--g); }
.btn--ghost-light { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--ig { background: var(--ig); background-origin: border-box; background-repeat: no-repeat; color: #fff; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--gt); text-decoration: none; }
.link-arrow .ico { transition: transform var(--t-ui) var(--ease-out); }

/* ---------- Círculos dorados (firma de marca) ---------- */
.orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 50%; }
.orb--sun { width: 520px; height: 520px; right: -160px; top: -180px; background: radial-gradient(circle at 40% 40%, rgba(255, 196, 87, .55), rgba(242, 160, 32, .28) 45%, transparent 70%); }
.orb--ring { width: 340px; height: 340px; left: -140px; bottom: -150px; border: 2px solid rgba(242, 160, 32, .35); }
.orb--ring2 { width: 180px; height: 180px; left: 38%; top: -70px; border: 2px dashed rgba(242, 160, 32, .25); animation: girar 60s linear infinite; }
.orb--dot { width: 18px; height: 18px; right: 22%; bottom: 18%; background: var(--o); box-shadow: 0 0 0 10px rgba(242, 160, 32, .15); animation: flotar 6s ease-in-out infinite; }
.orbs--soft .orb--sun { opacity: .45; }
.orbs--soft .orb--ring { border-color: rgba(50, 84, 25, .12); }
.orbs--soft .orb--ring2 { border-color: rgba(50, 84, 25, .12); }
.orbs--foot .orb--sun { right: auto; left: -220px; top: -260px; opacity: .6; }
.orbs--mnav .orb--sun { right: -200px; top: auto; bottom: -220px; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- Aviso de datos de ejemplo (solo managers) ---------- */
.aviso-ejemplo { background: #151a21; color: #f4efe6; font-size: 13px; text-align: center; padding: 8px 16px; }
.aviso-ejemplo strong { color: var(--o); }
.aviso-ejemplo a { color: var(--o2); }
.tag-confirmar { display: inline-block; vertical-align: middle; font: 600 11px/1 var(--ff); letter-spacing: .04em; text-transform: uppercase; color: #5a4300; background: #fff4d6; border: 1px dashed #c99a2a; border-radius: 6px; padding: 4px 6px; }

/* ---------- Cabecera ---------- */
.site-head { position: sticky; top: 0; z-index: var(--z-head); background: rgba(241, 241, 241, .88); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0px); transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease; }
/* Sombra de la cabecera en un pseudo-elemento: se anima solo su opacidad. */
.site-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; background: linear-gradient(rgba(var(--sh-c), .08), transparent); opacity: 0; pointer-events: none; transition: opacity var(--t-ui) ease; }
.site-head.is-scrolled::after { opacity: 1; }
html.nav-open .site-head::after { opacity: 0; }
.admin-bar .site-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-head { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-head { top: 0; } }
.site-head.is-scrolled { background: rgba(255, 255, 255, .94); border-color: var(--line); }
.site-head__in { display: flex; align-items: center; gap: 12px; max-width: 1220px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); min-height: 68px; }
.brand { display: block; flex: none; border-radius: 10px; }
.brand__logo { width: 136px; height: auto; transition: transform var(--t-ui) var(--ease-out); }
.nav { display: none; margin: 0 auto; }
.nav ul { display: flex; gap: 4px; }
.nav a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; border-radius: 999px; transition: color var(--t-fast) ease, background-color var(--t-fast) ease; }
.nav a::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--o); opacity: 0; transform: scale(.4); transition: opacity var(--t-fast) ease, transform var(--t-ui) var(--ease-out); }
.nav a[aria-current="page"] { color: var(--gt); }
.nav a[aria-current="page"]::after { opacity: 1; transform: scale(1); }
.site-head__acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.head-cta { display: none; }
.panel-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mut); text-decoration: none; }
.panel-link--head { display: none; border: 1px dashed #b9bfb3; }
.burger { display: inline-grid; place-content: center; gap: 5px; width: 48px; height: 48px; border-radius: 14px; background: var(--g); }
.burger { transition: transform var(--t-fast) var(--ease-out); }
/* Botón claro/oscuro (sol/luna): solo con JS; 44 px de toque; muestra la luna en claro y el sol en oscuro. */
.tema-btn { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 14px; border: 1px solid #cfd3ca; background: var(--card); color: var(--gt); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease; }
.js .tema-btn { display: inline-grid; }
.tema-btn svg { display: block; width: 22px; height: 22px; }
.tema-btn .i-sun, html[data-theme="dark"] .tema-btn .i-moon { display: none; }
html[data-theme="dark"] .tema-btn .i-sun { display: block; }
.tema-btn:active { transform: scale(.94); }
.tema-btn:focus-visible { outline: 3px solid var(--o); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .tema-btn:hover { background: var(--cream); } }
html[data-theme="dark"] .tema-btn { border-color: #3b4c2b; }
.burger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform var(--t-ui) var(--ease-out), opacity var(--t-fast) ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Menú móvil a pantalla completa */
.mnav { position: fixed; left: 0; right: 0; top: var(--hh); bottom: 0; z-index: var(--z-mnav); overflow-y: auto; background: linear-gradient(160deg, var(--g) 0%, var(--g2) 60%, var(--g3) 100%); color: #fff; padding: 24px max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); overscroll-behavior: contain; opacity: 0; transform: translateY(-8px); transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.mnav.is-in { opacity: 1; transform: none; }
.mnav nav, .mnav__acts, .mnav .panel-link { position: relative; z-index: 1; }
.mnav li { opacity: 0; transform: translateX(-16px); transition: opacity var(--t-ui) var(--ease-out), transform 280ms var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
.mnav.is-in li { opacity: 1; transform: none; }
.mnav nav a { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; min-height: 56px; font: 400 44px/1.1 var(--fd); letter-spacing: .02em; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12); overflow-wrap: anywhere; transition: color var(--t-fast) ease; }
.mnav nav a:active { color: var(--o2); }
.mnav nav a small { font: 600 13px/1 var(--ff); color: var(--o); }
.mnav nav a[aria-current="page"] { color: var(--o); }
.mnav__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.mnav .panel-link { margin-top: 16px; color: rgba(255, 255, 255, .85); border: 1px dashed rgba(255, 255, 255, .35); }
html.nav-open { overflow: hidden; }

/* ---------- Migas ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13.5px; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "›"; opacity: .6; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: underline; text-decoration-color: rgba(242, 160, 32, .7); }
.crumbs--light { color: rgba(255, 255, 255, .9); }
.crumbs--light [aria-current] { color: var(--o2); font-weight: 600; }

/* ---------- Hero de portada ---------- */
/* Grano MUY sutil solo en hero y pie: capa estática, sin eventos ni animación. */
.hero::before, .site-foot::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--grain) 0 0 / 160px 160px repeat; opacity: .06; }
.hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 600px at 85% 20%, rgba(242, 160, 32, .22), transparent 60%), linear-gradient(150deg, var(--g) 0%, var(--g2) 55%, var(--g3) 100%); padding: 40px 0 90px; }
.hero__grid { position: relative; z-index: 1; display: grid; gap: 34px; align-items: center; }
.hero__script { font: 400 26px/1.1 var(--fs); color: var(--o); transform: rotate(-3deg); transform-origin: left; margin-bottom: 6px; }
.hero__t { font: 400 clamp(52px, 15vw, 118px)/.9 var(--fd); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.hero__t span { display: block; color: var(--o); font-size: .5em; line-height: 1; margin-top: 8px; }
.hero__lead { max-width: 540px; margin-top: 18px; font-size: 16.5px; color: rgba(255, 255, 255, .9); }
.hero__live { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px; border-radius: 999px; background: rgba(var(--sh-c), .35); font-variant-numeric: tabular-nums; border: 1px solid rgba(255, 255, 255, .14); font-size: 14px; font-weight: 600; }
.hero__live i, .estado i { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #E8892A; }
.hero__live i.is-on, .estado.is-on i { background: #3fd67c; }
.hero__live i.is-on::after, .estado.is-on i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3fd67c; animation: latir 2s ease-out infinite; }
@keyframes latir { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.hero__art { display: grid; place-items: center; }
.hero__plate { position: relative; width: min(82vw, 440px); aspect-ratio: 1; display: grid; place-items: center; }
.hero__sun { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd27a, var(--o) 55%, #d9850c); box-shadow: 0 0 0 14px rgba(242, 160, 32, .18), 0 0 0 30px rgba(242, 160, 32, .08), var(--sh-deep); animation: respirar 7s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.hero__img { position: relative; width: 86%; height: 86%; object-fit: cover; border-radius: 50%; border: 6px solid #fff; box-shadow: var(--sh-lg); }
.hero__emoji { position: relative; font-size: clamp(130px, 40vw, 220px); line-height: 1; filter: drop-shadow(0 22px 26px rgba(var(--sh-c), .45)); transform: rotate(-12deg); }
.hero__float { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--card); font-size: 32px; box-shadow: var(--sh-lg); animation: flotar 5s ease-in-out infinite; }
.hero__float--1 { left: -4%; top: 18%; }
.hero__float--2 { right: -2%; top: 8%; animation-delay: -1.6s; width: 54px; height: 54px; font-size: 26px; }
.hero__float--3 { right: 4%; bottom: 6%; animation-delay: -3.2s; }
.hero__badge { position: absolute; left: 4%; bottom: 6%; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--g3); color: #fff; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.1; border: 3px dashed var(--o); transform: rotate(-10deg); }
.hero__badge b { display: block; font: 400 30px/1 var(--fd); color: var(--o); letter-spacing: .04em; }
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 50px; fill: var(--bg); z-index: 1; }

/* ---------- Cinta de categorías ---------- */
.marquee { overflow: hidden; background: var(--o); color: var(--g3); padding: 12px 0; margin: 0; position: relative; z-index: 2; border-block: 3px solid var(--g); }
.marquee__track { display: flex; width: max-content; animation: cinta 32s linear infinite; }
.marquee__grp { display: flex; align-items: center; }
.marquee__grp span { font: 400 30px/1 var(--fd); letter-spacing: .04em; text-transform: uppercase; padding: 0 22px; white-space: nowrap; }
.marquee__grp i { width: 12px; height: 12px; border-radius: 50%; background: var(--g); flex: none; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.sec { position: relative; padding: var(--s-8) 0 calc(var(--s-8) + var(--s-2)); }
.sec > .wrap { position: relative; z-index: 1; }
.sec--pull { padding-top: 8px; }
.sec-head { margin-bottom: var(--s-6); }
.sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.sec-head:not(.sec-head--row) { text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gt); margin-bottom: var(--s-2); }
.kicker::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--o2), var(--o)); box-shadow: 0 0 0 4px rgba(242, 160, 32, .2); }
.kicker--gold { color: var(--o2); }
.sec-t { font: 400 clamp(44px, 10vw, 80px)/.92 var(--fd); letter-spacing: .005em; text-transform: uppercase; color: var(--gt); text-wrap: balance; }
.sec-t .script { font-size: .78em; margin-left: 6px; transform: rotate(-3deg); }
.nota { margin-top: 18px; color: var(--mut); font-size: 13.5px; text-align: center; }

/* Profundidad en bloques que eran planos: círculos dorados de la marca (decorativos, sin eventos). */
.sec--intro, .sec--prods, .sec--sedes-det { overflow: hidden; }
.sec--intro::before, .sec--prods::before, .sec--sedes-det::before, .sec--prods::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.sec--intro::before { width: 520px; height: 520px; left: -260px; top: -200px; background: radial-gradient(circle at 60% 60%, rgba(247, 193, 58, .22), transparent 65%); }
.sec--prods::before { width: 420px; height: 420px; right: -190px; top: -140px; border: 2px solid rgba(242, 160, 32, .28); }
.sec--prods::after { width: 160px; height: 160px; left: -60px; bottom: 40px; border: 2px dashed rgba(50, 84, 25, .14); }
.sec--sedes-det::before { width: 480px; height: 480px; right: -220px; bottom: -160px; background: radial-gradient(circle at 40% 40%, rgba(247, 193, 58, .2), transparent 65%); }

/* Intro + datos */
.intro { display: grid; gap: 34px; align-items: center; }
.intro__lead { margin-top: 16px; font-size: 17px; max-width: 620px; }
.intro .link-arrow { margin-top: 10px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fact { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 22px 18px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); }
.fact::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: rgba(242, 160, 32, .14); }
.fact b { font: 400 54px/1 var(--fd); color: var(--gt); min-height: 54px; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.fact:nth-child(2) { background: var(--g); color: #fff; }
.fact:nth-child(2) b { color: var(--o); }
.fact:nth-child(3) { background: var(--o); color: var(--g3); }
.fact:nth-child(3) b { color: var(--g3); }
.fact:nth-child(3)::after { background: #F7C13A; opacity: .75; }
.fact span { font-size: 14px; font-weight: 500; position: relative; z-index: 1; }
/* Tarjetas de dato que son enlaces (Instagram / WhatsApp en Sobre nosotros): toda la tarjeta es clicable. */
.fact--link { padding: 0; }
.fact__a { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 18px; border-radius: inherit; color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fact--link:hover { box-shadow: 0 10px 26px rgba(var(--sh-c), .18); }
.fact--link:active { transform: scale(.98); }
.fact__a:focus-visible { outline: 3px solid var(--g); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .fact--link { transition: transform .18s ease, box-shadow .18s ease; } .fact--link:hover { transform: translateY(-2px); } .fact--link:active { transform: scale(.98); } }

/* ---------- Tarjetas de sede ---------- */
.sec--sedes { overflow: hidden; }
/* Fondo con ondas suaves (inspirado en las publicaciones de Pipo). */
.sec--sedes, .sec--exp, .sec--faq { background: #f8f8f5 url("../img/pipo-pattern.svg") center top / 560px auto repeat; }
.sedes-grid { display: grid; gap: 16px; }
.sede-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); transition: transform 280ms var(--ease-out); }
/* Sombra de hover precalculada: solo cambia su opacidad (sin repintar box-shadow en cada frame). */
.sede-card::after, .prod-card::after, .item::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--sh-lg); opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-out); }
.sede-card__top { position: relative; height: 112px; overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(135deg, var(--g), var(--g2)); }
.sede-card__sun { position: absolute; right: -24px; top: -34px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--o2), var(--o) 60%); box-shadow: 0 0 0 12px rgba(242, 160, 32, .22); transition: transform 280ms var(--ease-out); }
.sede-card__num { position: absolute; left: 16px; bottom: 6px; font: 400 64px/1 var(--fd); color: rgba(255, 255, 255, .16); }
.sede-card.is-closed .sede-card__top { filter: grayscale(.85); }
.sede-card__top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Con foto de la sede (fachada): más alta, con filo dorado de marca. */
.sede-card__top.has-img { height: 180px; border-bottom: 4px solid var(--o); background: var(--g2); }
/* Sin foto: fondo de marca (verde + círculos dorados) con icono de local y el nombre corto de la sede. */
.sede-card__top.is-brand { height: 132px; background: radial-gradient(circle at 18% 120%, rgba(242, 160, 32, .28) 0 70px, transparent 71px), linear-gradient(135deg, var(--g), var(--g2)); }
.sede-card__ring { position: absolute; left: 42%; bottom: -46px; width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(242, 160, 32, .45); }
.sede-card__brand { position: absolute; z-index: 1; left: 18px; right: 108px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; min-width: 0; color: #fff; }
.sede-card__ico { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--o); color: var(--g2); box-shadow: 0 0 0 5px rgba(242, 160, 32, .25), 0 10px 18px rgba(var(--sh-c), .35); }
.sede-card__corto { min-width: 0; font: 400 30px/.95 var(--fd); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 2px 10px rgba(var(--sh-c), .35); }
.sede-card__top.is-brand .sede-card__num { left: auto; right: 14px; bottom: 4px; font-size: 54px; color: rgba(255, 255, 255, .2); z-index: 1; padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, .18); }
.sede-card__top.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(24, 42, 8, .65)); }
.sede-card__top.has-img .sede-card__sun { width: 90px; height: 90px; right: -20px; top: -24px; z-index: 1; }
.sede-card__top.has-img .sede-card__num { z-index: 2; color: rgba(255, 255, 255, .85); }
.sede-card__bd { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 18px 18px 20px; }
.sede-card__t { font: 400 34px/1 var(--fd); letter-spacing: .02em; color: var(--gt); }
.sede-card__meta { display: grid; gap: 6px; color: var(--mut); font-size: 14px; }
.sede-card__meta li { display: flex; gap: 8px; align-items: flex-start; }
.sede-card__meta li > span { min-width: 0; overflow-wrap: anywhere; }
.sede-card__meta .ico { margin-top: 3px; color: var(--gt); }
/* Punto de referencia de la sede («Referencia: Frente a MRW»), en su propia línea bajo la dirección. */
.sede-ref { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; font-size: .92em; line-height: 1.4; }
.sede-ref .ico { flex: none; margin-top: 2px; }
.sede-ref > span { min-width: 0; overflow-wrap: anywhere; }
.sede-card__meta .sede-ref .ico, .sede-det__dl .sede-ref .ico, .info-sede .sede-ref .ico, .ahoja__ref .ico { color: var(--gt); }
.ahoja__ref { font-size: 13px; color: var(--mut); margin-top: 0; }
.sede-ref--foot { color: rgba(255, 255, 255, .72); font-size: 13px; }
.sede-card__acts { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
.estado { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: #FFF1D6; color: var(--red); font-size: 13px; font-weight: 600; }
.estado.is-on { background: #e5f5eb; color: var(--ok); }
.estado i { width: 8px; height: 8px; background: var(--red); }
.estado.is-on i { background: #22a95a; }
.estado.is-on i::after { border-color: #22a95a; }

/* ---------- Productos destacados ---------- */
.prods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prod-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); transition: transform 280ms var(--ease-out); }
.prod-card__ph { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #fff 0 30%, transparent 31%), linear-gradient(145deg, var(--cream), var(--o3)); overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.prod-card__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 280ms var(--ease-out); }
.prod-card__emoji { font-size: clamp(56px, 16vw, 92px); filter: drop-shadow(0 12px 14px rgba(var(--sh-c), .22)); transition: transform 280ms var(--ease-out); }
.prod-card__bd { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 14px; }
.prod-card__cat { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a5a00; }
.prod-card__t { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.prod-card__d { display: none; color: var(--mut); font-size: 13.5px; line-height: 1.4; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prod-card__pr { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--gt); font-variant-numeric: tabular-nums; }
.prod-card__pr small { font-weight: 500; color: var(--mut); }

/* ---------- Cómo pedir ---------- */
.sec--pasos { background: var(--g); color: #fff; overflow: hidden; }
.sec--pasos::before { content: ""; position: absolute; width: 600px; height: 600px; left: 50%; top: -420px; margin-left: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 160, 32, .35), transparent 65%); }
.sec--pasos .sec-t { color: #fff; }
.sec--pasos .kicker { color: var(--o2); }
.pasos { display: grid; gap: 14px; counter-reset: paso; }
.paso { position: relative; padding: 24px 20px 22px; border-radius: var(--r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.paso__n { position: absolute; right: 16px; top: 4px; font: 400 76px/1 var(--fd); color: rgba(242, 160, 32, .25); }
.paso__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--o); color: var(--g3); margin-bottom: 14px; box-shadow: 0 0 0 6px rgba(242, 160, 32, .2); }
.paso__t { font: 400 30px/1 var(--fd); letter-spacing: .02em; margin-bottom: 6px; }
.paso p { color: rgba(255, 255, 255, .86); font-size: 14.5px; }
.sec--pasos .btn--green { background: var(--o); color: var(--g3); }

/* ---------- Experiencias ---------- */
.resenas-grid { display: grid; gap: 16px; }
.resena { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); }
.resena::before { content: "“"; position: absolute; right: 18px; top: -6px; font: 400 110px/1 Georgia, serif; color: rgba(242, 160, 32, .35); }
.resena__stars { display: flex; gap: 2px; color: #d3d6cf; }
.resena__stars .on { color: var(--o); }
.resena__txt { font-size: 15.5px; position: relative; }
.resena__txt p + p { margin-top: 8px; }
.resena__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.resena__who > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.resena__who strong { display: block; }
.resena__who small { color: var(--mut); font-size: 13px; }
.resena__ini { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--g); color: var(--o); font: 400 24px/1 var(--fd); flex: none; }
.vacio { max-width: 1040px; margin: 0 auto; position: relative; overflow: hidden; display: grid; gap: 28px; padding: 34px 22px; border-radius: 28px; color: #fff; background: radial-gradient(420px 420px at 100% 0, rgba(242, 160, 32, .55), transparent 65%), linear-gradient(150deg, var(--g), var(--g2)); box-shadow: var(--sh); }
.vacio::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -70px; border-radius: 50%; border: 18px solid rgba(247, 193, 58, .35); pointer-events: none; }
.vacio__kicker { font: 400 28px/1 var(--fs); color: var(--o); transform: rotate(-2deg); transform-origin: left; margin-bottom: 6px; }
.vacio__t { font: 400 clamp(46px, 10vw, 84px)/.92 var(--fd); text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.vacio__t span { color: var(--o); }
.vacio__p { margin-top: 14px; max-width: 520px; color: rgba(255, 255, 255, .88); }
/* Enlaces de texto dentro del bloque verde (antes verde sobre verde: ilegible). */
.vacio a:not(.btn) { color: var(--o2); font-weight: 700; text-decoration-color: rgba(247, 193, 58, .6); }
.vacio .btns { margin-top: 22px; }
.vacio__pasos { list-style: none; display: grid; gap: 12px; align-content: center; position: relative; z-index: 1; }
.vacio__pasos li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); font-size: 14.5px; }
.vacio__pasos b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--o); color: var(--g3); font: 400 24px/1 var(--fd); }
.exp-cta { text-align: center; margin-top: 40px; }
.exp-cta__t { font: 400 clamp(34px, 7vw, 52px)/1 var(--fd); color: var(--gt); text-transform: uppercase; }
.resena__sede { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; max-width: calc(100% - 56px); padding: 5px 12px; border-radius: 999px; background: var(--cream); color: var(--gt); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.resena__sede > span { min-width: 0; overflow-wrap: anywhere; }
/* Filtro de reseñas por sede (chips; site.js lo activa) */
.rfiltro { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 24px; }
.rfiltro__chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--g); background: var(--card); color: var(--gt); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-ui) var(--ease-out); }
.rfiltro__chip[aria-pressed="true"] { background: var(--g); color: #fff; box-shadow: 0 0 0 3px rgba(242, 160, 32, .45); }
/* «Selecciona tu sede»: una tarjeta por sede para reseñar en Google o contarlo por WhatsApp */
.rsel { max-width: 1120px; margin: 0 auto; position: relative; isolation: isolate; overflow: hidden; padding: 36px 16px 26px; border-radius: 28px; color: #fff; background: radial-gradient(420px 420px at 100% 0, rgba(242, 160, 32, .5), transparent 65%), linear-gradient(150deg, var(--g), var(--g2)); box-shadow: var(--sh); }
.rsel::after { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -70px; top: -70px; border-radius: 50%; border: 18px solid rgba(247, 193, 58, .35); pointer-events: none; }
.rsel__ring { position: absolute; z-index: -1; left: -70px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; border: 2px solid rgba(242, 160, 32, .4); pointer-events: none; }
.rsel__head { max-width: 720px; margin: 0 auto 26px; text-align: center; }
.rsel__kicker { font: 400 28px/1 var(--fs); color: var(--o); transform: rotate(-2deg); margin-bottom: 8px; }
.rsel__t { font: 400 clamp(42px, 9vw, 76px)/.92 var(--fd); text-transform: uppercase; letter-spacing: .01em; color: #fff; text-wrap: balance; }
.rsel__t .script { display: inline-block; width: 100%; font-size: .5em; line-height: 1.2; margin-top: 6px; transform: rotate(-2deg); }
.rsel__p { margin: 14px auto 0; max-width: 600px; color: rgba(255, 255, 255, .9); }
.rsedes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.rsede { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--card); color: var(--ink); box-shadow: 0 14px 30px rgba(var(--sh-c), .28); }
.rsede__top { position: relative; height: 96px; overflow: hidden; background: radial-gradient(circle at 18% 120%, rgba(242, 160, 32, .28) 0 60px, transparent 61px), linear-gradient(135deg, var(--g), var(--g2)); }
.rsede__top.has-img { height: 150px; border-bottom: 4px solid var(--o); background: var(--g2); }
.rsede__top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rsede__top.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(24, 42, 8, .5)); }
.rsede__ico { position: absolute; z-index: 1; left: 18px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--o); color: var(--g2); box-shadow: 0 0 0 5px rgba(242, 160, 32, .25), 0 10px 18px rgba(var(--sh-c), .35); }
.rsede__sun { position: absolute; z-index: 1; right: -22px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--o2), var(--o) 60%); box-shadow: 0 0 0 10px rgba(242, 160, 32, .22); transition: transform 280ms var(--ease-out); }
.rsede__top.has-img .rsede__sun { width: 80px; height: 80px; right: -18px; top: -22px; }
.rsede__bd { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 16px 18px 18px; }
.rsede__t { font: 400 34px/1 var(--fd); letter-spacing: .02em; color: var(--gt); overflow-wrap: anywhere; }
.rsede__pre { font-size: .62em; color: var(--mut); letter-spacing: .06em; }
.rsede__c { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 14px; }
.rsede__c .ico { color: var(--gt); flex: none; }
.rsede__acts { display: grid; gap: 8px; margin-top: auto; padding-top: 10px; }
.rsel__ig { margin-top: 22px; text-align: center; font-size: 14.5px; color: rgba(255, 255, 255, .9); }
.rsel__ig a { color: var(--o2); font-weight: 700; text-decoration-color: rgba(247, 193, 58, .6); }

/* ---------- Hero de páginas internas ---------- */
.phero, .sede-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(700px 500px at 90% 10%, rgba(242, 160, 32, .25), transparent 60%), linear-gradient(150deg, var(--g), var(--g2) 60%, var(--g3)); }
.phero { padding: 22px 0 96px; }
.phero__in, .sede-hero__in { position: relative; z-index: 1; }
.phero__grid { display: grid; gap: 20px; align-items: center; margin-top: 18px; }
.phero__t { font: 400 clamp(44px, 11vw, 92px)/.92 var(--fd); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.phero__t .script { display: inline-block; width: 100%; font-size: .56em; line-height: 1.15; margin-top: 6px; transform: rotate(-2deg); transform-origin: left; }
.phero__lead { margin-top: 14px; max-width: 620px; font-size: 16.5px; color: rgba(255, 255, 255, .9); }
.phero__art { display: none; position: relative; width: 260px; height: 260px; justify-self: end; place-items: center; }
.phero__sun { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd27a, var(--o) 60%, #d9850c); box-shadow: 0 0 0 14px rgba(242, 160, 32, .18), 0 0 0 30px rgba(242, 160, 32, .07); animation: respirar 7s ease-in-out infinite; }
.phero__emoji { position: relative; font-size: 120px; line-height: 1; transform: rotate(-10deg); filter: drop-shadow(0 18px 20px rgba(var(--sh-c), .4)); }
.phero .wave { height: 46px; }

/* ---------- Menú (lista de sedes) ---------- */
.sedes-grid--menu .sede-card__top { height: 130px; }
.sedes-grid--menu .sede-card__top.is-brand { height: 140px; }
.sedes-grid--menu .sede-card__top.has-img { height: 196px; }
.infobar { display: grid; gap: 10px; margin-top: 28px; }
.infobar li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r-sm); background: var(--card); box-shadow: var(--sh); font-size: 14px; color: var(--mut); }
.infobar .ico { color: var(--gt); margin-top: 2px; }
.infobar b { display: block; color: var(--ink); font-size: 14.5px; }

/* ---------- Contacto ---------- */
.canales { display: grid; gap: 14px; margin-top: -48px; position: relative; z-index: 2; }
.canal { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r); color: #fff; text-decoration: none; box-shadow: var(--sh-lg); transition: transform var(--t-ui) var(--ease-out); }
.canal--ig { background: var(--ig); }
.canal--wa { background: linear-gradient(135deg, #1a8f4a, #10632f); }
.canal__ico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .18); flex: none; }
.canal__txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.canal__txt small { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.canal__txt b { font: 400 32px/1 var(--fd); letter-spacing: .02em; overflow-wrap: anywhere; }
.canal__txt span { font-size: 14px; opacity: .92; }
.sede-det-list { display: grid; gap: 18px; }
.sede-det { display: grid; overflow: hidden; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); }
.sede-det__info { position: relative; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.sede-det__n { position: absolute; right: 18px; top: 8px; font: 400 70px/1 var(--fd); color: rgba(242, 160, 32, .3); }
.sede-det__t { font: 400 38px/1 var(--fd); color: var(--gt); letter-spacing: .02em; }
.sede-det__dl { display: grid; gap: 4px 12px; font-size: 14.5px; }
.sede-det__dl dt { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-top: 6px; }
.sede-det__dl dt .ico { color: var(--gt); }
.sede-det__dl dd { color: var(--mut); overflow-wrap: anywhere; }
.sede-det .btns { margin-top: 6px; }
.sede-det__map { min-height: 240px; background: linear-gradient(135deg, var(--g2), var(--g)); }
.mapa { position: relative; height: 100%; min-height: 240px; display: grid; place-items: center; text-align: center; color: #fff; padding: 20px; background: radial-gradient(circle at 70% 30%, rgba(242, 160, 32, .35), transparent 55%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px); }
.mapa.is-loaded { padding: 0; }
.mapa.is-loaded::after { display: none; }
.mapa iframe { width: 100%; height: 100%; min-height: 280px; border: 0; }
.mapa__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 999px; background: var(--card); color: var(--gt); font-weight: 700; box-shadow: var(--sh-lg); }
/* Con foto de la sede: foto grande + botón «Ver mapa» encima (al tocar, la foto se cambia por el mapa). */
.mapa--foto { padding: 0; min-height: 260px; overflow: hidden; background: var(--g2); }
.mapa__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapa--foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(24, 42, 8, .55)); pointer-events: none; }
.mapa--foto .mapa__btn { position: absolute; z-index: 1; left: 16px; bottom: 16px; }
/* Sin foto: fondo de marca (verde, círculos dorados) con el botón para cargar el mapa. */
.mapa--marca { overflow: hidden; align-content: center; gap: 14px; min-height: 260px; background: radial-gradient(circle at 50% 42%, rgba(242, 160, 32, .22), transparent 46%), linear-gradient(135deg, var(--g), var(--g2)); }
.mapa__orb { position: absolute; border-radius: 50%; pointer-events: none; }
.mapa__orb--a { right: -40px; top: -50px; width: 170px; height: 170px; background: radial-gradient(circle at 40% 40%, var(--o2), var(--o) 60%); box-shadow: 0 0 0 14px rgba(242, 160, 32, .2); }
.mapa__orb--b { left: -60px; bottom: -70px; width: 190px; height: 190px; border: 2px solid rgba(242, 160, 32, .45); }
.mapa__pin { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--o); color: var(--g2); box-shadow: 0 0 0 8px rgba(242, 160, 32, .22), 0 16px 30px rgba(var(--sh-c), .4); }
.mapa--marca .mapa__btn { position: relative; }
.mapa__nota { position: relative; font-size: 13px; opacity: .85; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq__it { border-radius: var(--r-sm); background: var(--card); box-shadow: var(--sh); overflow: hidden; }
.faq__it summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 16px 18px; font-weight: 600; cursor: pointer; list-style: none; }
.faq__it summary::-webkit-details-marker { display: none; }
.faq__it summary { transition: color var(--t-fast) ease; }
.faq__it summary:focus-visible { outline-offset: -3px; border-radius: var(--r-sm); }
.faq__it summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--o); }
.faq__it summary i::before, .faq__it summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 14px; height: 2px; background: var(--g3); transition: transform var(--t-ui) var(--ease-out); }
.faq__it summary i::after { transform: rotate(90deg); }
.faq__it[open] summary i::after { transform: rotate(0); }
.faq__a { padding: 0 18px 18px; color: var(--mut); }
.faq__a p + p { margin-top: 8px; }

/* Valores (Sobre nosotros) */
.sec--valores { overflow: hidden; }
.valores { display: grid; gap: 14px; }
.valor { padding: 26px 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); }
.valor__ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--g); color: var(--o); margin-bottom: 14px; }
.valor h3 { font: 400 30px/1 var(--fd); letter-spacing: .02em; color: var(--gt); margin-bottom: 6px; }
.valor p { color: var(--mut); font-size: 14.5px; }

/* Historia del nombre (Sobre nosotros) */
.hist { display: grid; gap: 14px; }
.hist__it { position: relative; padding: 26px 22px 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); }
.hist__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--g); color: var(--o-txt, #FFD66B); font: 400 26px/1 var(--fd); margin-bottom: 12px; }
.hist__it h3 { font: 400 28px/1 var(--fd); letter-spacing: .02em; color: var(--gt); margin-bottom: 6px; }
.hist__it p { color: var(--mut); font-size: 15px; }
.hist__cita { margin: 22px 0 0; padding: 28px 22px; border-radius: var(--r); background: var(--g); text-align: center; box-shadow: var(--sh); }
.hist__cita p { font: 400 clamp(30px, 6vw, 52px)/1.05 var(--fd); letter-spacing: .02em; color: #fff; }
.hist__cita .script { display: block; color: var(--o-txt, #FFD66B); font-size: .9em; margin-top: 6px; letter-spacing: 0; }
.hist__cierre { max-width: 680px; margin: 20px auto 0; text-align: center; color: var(--mut); font-size: 16px; }
@media (min-width: 820px) { .hist { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* Texto largo */
.prose { font-size: 16px; }
.prose > * + * { margin-top: 14px; }
.prose h2 { font: 400 34px/1 var(--fd); letter-spacing: .02em; color: var(--gt); margin-top: 28px; }
.prose h3 { font-size: 18px; margin-top: 22px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose ol { list-style: decimal; padding-left: 22px; }
.intro .prose { margin-top: 18px; }
.card-prose { padding: 26px 20px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); }
.lista-posts { display: grid; gap: 14px; }

/* ---------- 404 ---------- */
.e404 { position: relative; overflow: hidden; color: #fff; text-align: center; min-height: 72vh; min-height: 72svh; display: grid; align-items: center; padding: 30px 0 70px; background: radial-gradient(700px 500px at 50% 0%, rgba(242, 160, 32, .25), transparent 60%), linear-gradient(160deg, var(--g), var(--g3)); }
.e404__in { position: relative; z-index: 1; }
.e404 .crumbs ol { justify-content: center; }
.e404__num { font: 400 clamp(120px, 38vw, 260px)/.9 var(--fd); color: var(--o); display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 18px; }
.e404__num span { font-size: .55em; animation: flotar 4s ease-in-out infinite; }
.e404__t { font: 400 clamp(34px, 8vw, 60px)/1 var(--fd); text-transform: uppercase; }
.e404__lead { max-width: 520px; margin: 12px auto 0; color: rgba(255, 255, 255, .88); }
.e404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 28px; }
.e404__links a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; }

/* ---------- Pie ---------- */
.site-foot { position: relative; overflow: hidden; color: rgba(255, 255, 255, .86); background: linear-gradient(170deg, var(--g2), var(--g3)); padding: 56px 0 calc(90px + env(safe-area-inset-bottom, 0px)); }
.site-foot > .wrap { position: relative; z-index: 1; }
.site-foot a { color: #fff; }
.foot-cta { text-align: center; padding-bottom: 48px; margin-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.foot-cta__kicker { font: 400 30px/1 var(--fs); color: var(--o); transform: rotate(-3deg); }
.foot-cta__t { font: 400 clamp(48px, 12vw, 104px)/.92 var(--fd); color: #fff; text-transform: uppercase; margin-top: 6px; text-wrap: balance; }
.foot-cta__t span { color: var(--o); }
.foot-cta .btns { justify-content: center; margin-bottom: 56px; }
.foot-grid { display: grid; gap: 32px; }
.foot-logo { width: 170px; }
.foot-brand p { margin-top: 14px; max-width: 360px; font-size: 14.5px; }
.foot-social { display: flex; gap: 10px; margin-top: 16px; }
.foot-social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-ui) var(--ease-out); }
.foot-h { font: 400 26px/1 var(--fd); letter-spacing: .04em; color: var(--o); margin-bottom: 12px; }
.foot-col ul { display: grid; gap: 2px; font-size: 14.5px; }
.foot-col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.foot-nap li { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.foot-nap .ico { color: var(--o); }
.foot-sedes li { display: grid; padding: 4px 0; overflow-wrap: anywhere; }
.foot-sedes li a { min-height: 32px; }
.foot-sedes li span { font-size: 13px; color: rgba(255, 255, 255, .72); }
.foot-bottom { display: grid; gap: 14px; justify-items: center; text-align: center; margin-top: 44px; padding: 22px 0 6px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.foot-copy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; }
.foot-copy strong { color: #fff; font-weight: 600; }
.foot-copy span { padding: 3px 10px; border-radius: 999px; background: rgba(242, 160, 32, .16); color: var(--o2); font-weight: 600; font-size: 12.5px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.foot-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: #fff; text-decoration: none; font-weight: 600; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out); }
.foot-bottom .credit { color: rgba(255, 255, 255, .78); }
.foot-bottom .credit a { color: var(--o2); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(247, 193, 58, .5); }
.credit a { color: var(--o2); font-weight: 600; }
.site-foot--sede { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

/* Botón fijo de WhatsApp (móvil) */
.wa-float { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-wa); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 12px 28px rgba(26, 143, 74, .45); transition: transform var(--t-ui) var(--ease-out); }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: latir 2.4s ease-out infinite; }
html.nav-open .wa-float { display: none; }

/* ---------- Menú de sede ---------- */
.sede-hero { padding: 22px 0 34px; }
.estado--pill { margin-top: 18px; background: var(--card); }
.sede-hero .estado--pill { align-self: center; text-align: center; }
.sede-hero__t { font: 400 clamp(44px, 11vw, 86px)/.92 var(--fd); text-transform: uppercase; margin-top: 12px; text-wrap: balance; }
.sede-hero__t .script { display: inline-block; width: 100%; font-size: .62em; line-height: 1.15; margin-top: 4px; transform: rotate(-2deg); transform-origin: left; }
.sede-hero__dir { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; color: rgba(255, 255, 255, .9); }
.sede-hero__dir .ico { margin-top: 3px; color: var(--o); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) var(--ease-out); }
.menu-wrap { padding-top: 0; padding-bottom: 40px; }
.warn { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: #fff4d6; color: #5a4300; font-size: 14px; font-weight: 500; border: 1px solid #f3dc9b; }
.warn a { color: #5a4300; font-weight: 700; }
.warn--in { margin: 12px 0 0; }
.mbar { position: sticky; top: var(--hh); z-index: var(--z-mbar); display: flex; align-items: stretch; gap: 10px; margin: 14px -16px 0; padding: 10px 16px 0; background: rgba(241, 241, 241, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.admin-bar .mbar { top: calc(var(--hh) + 32px); }
@media (max-width: 782px) { .admin-bar .mbar { top: calc(var(--hh) + 46px); } }
@media (max-width: 600px) { .admin-bar .mbar { top: var(--hh); } }
.mbar__search { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--gt); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) var(--ease-out); }
.mbar__search[aria-expanded="true"] { background: var(--g); color: #fff; border-color: var(--g); }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 600; font-size: 14.5px; color: var(--mut); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a { transition: color var(--t-fast) ease, border-color var(--t-fast) ease; }
.tabs a:focus-visible { outline-offset: -3px; }
.tabs a.on { color: var(--gt); border-color: var(--o); }
.msearch { padding: 12px 0 0; }
.msearch input { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.mlist { display: grid; gap: 0; margin: 0 -16px; }
.mcat { padding: 26px 16px 8px; font: 400 36px/1 var(--fd); letter-spacing: .02em; color: var(--gt); scroll-margin-top: calc(var(--hh) + 70px); }
.mcat::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--o); margin-top: 6px; }
.item { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 14px; padding: 16px 16px 26px; background: var(--card); border-bottom: 1px solid var(--line); cursor: pointer; transition: transform var(--t-ui) var(--ease-out); }
.item__txt { min-width: 0; }
.item__t { font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.item__open { text-align: left; font-weight: inherit; min-height: 24px; color: inherit; }
.item__d { color: var(--mut); font-size: 13.5px; line-height: 1.45; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item__pr { margin-top: 8px; font-weight: 700; color: var(--gt); font-variant-numeric: tabular-nums; }
.item__pr .agotado { color: var(--red); }
/* Días de venta («Solo domingos»): etiqueta pequeña en la tarjeta, la hoja del producto y «Tu pedido». */
.dias-tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #fdf1db; color: #7a4f00; font-size: 12px; font-weight: 600; line-height: 1.5; }
.dias-tag[hidden] { display: none; }
.line .dias-tag { display: table; margin-top: 2px; font-size: 11px; }
.item__ph { position: relative; width: 108px; height: 108px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, var(--cream), var(--o3)); }
.item__ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.item__emoji { font-size: 50px; }
.item.out { opacity: .6; }
.item.is-filtered, .mcat.is-filtered { display: none; }
.qc { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card); box-shadow: var(--sh-sm); }
.qc:empty { display: none; }
.qc button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--g); color: #fff; font-size: 20px; font-weight: 700; line-height: 1; transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) ease; }
.qc button.m { background: var(--line); color: var(--gt); }
.qc b { min-width: 24px; text-align: center; color: var(--gt); font-variant-numeric: tabular-nums; }
.empty { padding: 30px 16px; text-align: center; color: var(--mut); }
.info-sede { margin-top: 36px; padding: 24px 20px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh); }
.info-sede__t { font: 400 30px/1 var(--fd); color: var(--gt); letter-spacing: .02em; margin-bottom: 12px; }
.info-sede dl, .info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 14.5px; }
.info-sede dt, .info dt { font-weight: 700; }
.info-sede dd, .info dd { color: var(--mut); overflow-wrap: anywhere; }
.info-sede .nota { text-align: left; }

/* Barra del carrito */
.cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cart); padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: linear-gradient(transparent, rgba(241, 241, 241, .96) 30%); animation: subir 300ms var(--ease-drawer); }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
.cart .cta { max-width: 560px; margin: 0 auto; box-shadow: 0 12px 28px rgba(var(--sh-c), .28); }
.cart .cta > span:last-child, .tot > span:last-child, .line > span:last-child { white-space: nowrap; }
.cart .n { background: rgba(24, 42, 8, .14); border-radius: 8px; padding: 2px 9px; margin-right: 8px; }
.cta { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 14px 20px; border-radius: 16px; background: var(--g); color: #fff; font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; text-decoration: none; transition: filter var(--t-fast) ease, transform var(--t-fast) var(--ease-out); }
.cta > span { min-width: 0; }
.cta--gold { background: var(--o); color: var(--g3); }
.cta--ig { background: var(--ig); background-origin: border-box; justify-content: center; }
.cta--wa { background: var(--wa); justify-content: center; }
.cta--line { background: var(--card); color: var(--gt); border: 2px solid var(--g); justify-content: center; }
.cta[disabled] { opacity: .45; cursor: not-allowed; }

/* Hoja inferior */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; background: rgba(12, 20, 6, .55); opacity: 0; transition: opacity var(--t-ui) var(--ease-out); }
.sheet.is-in { opacity: 1; }
.sheet__panel { width: 100%; max-width: 600px; max-height: 92vh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; background: var(--bg); border-radius: 24px 24px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(30px); transition: transform 300ms var(--ease-drawer); }
.sheet__panel:focus { outline: none; }
.sheet.is-in .sheet__panel { transform: none; }
html.sheet-open { overflow: hidden; }
.phead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 16px; }
.phead > span { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--line); font-size: 22px; line-height: 1; transition: transform var(--t-fast) var(--ease-out); }
.pbig { height: 220px; display: grid; place-items: center; font-size: 100px; background: radial-gradient(circle at 50% 55%, #fff 0 26%, transparent 27%), linear-gradient(145deg, var(--cream), var(--o3)); overflow: hidden; }
.pbig img { width: 100%; height: 100%; object-fit: cover; }
.pbody { padding: 16px; }
.pbody h2 { font: 400 34px/1 var(--fd); letter-spacing: .02em; color: var(--gt); }
.pbody .d { color: var(--mut); margin-top: 6px; }
.pbody .pr { margin-top: 10px; font-weight: 700; font-size: 18px; color: var(--gt); font-variant-numeric: tabular-nums; }
.qty { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.qty button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 22px; font-weight: 700; color: var(--gt); transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) ease; }
.qty b { min-width: 28px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.pad { padding: 0 16px; }
.lines { margin: 12px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); }
.line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; font-variant-numeric: tabular-nums; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.line:last-child { border-bottom: 0; }
.line .q { display: flex; align-items: center; gap: 4px; }
.line .q button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-weight: 700; color: var(--gt); transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) ease; }
.line > span:nth-child(2) { overflow-wrap: anywhere; }
.line .q b { min-width: 18px; text-align: center; }
.tot { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; padding: 4px 18px 6px; font-weight: 700; font-size: 17px; }
.f { padding: 8px 16px; }
.f > label, .f .lb { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.in { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid #cfd3ca; background: var(--card); transition: border-color var(--t-fast) ease; }
.in:focus { border-color: var(--g); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.opts { display: grid; gap: 8px; }
.opts.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border-radius: 12px; border: 1px solid #cfd3ca; background: var(--card); font-size: 14.5px; cursor: pointer; }
.opt input { accent-color: var(--g); width: 20px; height: 20px; flex: none; }
.opt:has(input:checked) { border-color: var(--g); box-shadow: 0 0 0 1px var(--g); background: #f4f9ef; }
.opt.dis { opacity: .55; cursor: not-allowed; }
.opt small { display: block; color: var(--mut); font-size: 12px; }
.loc { display: flex; gap: 8px; margin-top: 8px; }
.loc .in { flex: 1; }
.loc button { flex: none; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--g); background: var(--card); color: var(--gt); font-weight: 600; font-size: 13.5px; }
.err { color: var(--red); font-size: 13px; margin-top: 4px; font-weight: 500; }
.err--pad { padding: 0 16px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ok { margin: 10px 16px 0; padding: 12px 14px; border-radius: 12px; background: #e5f5eb; color: #135c2f; font-weight: 600; font-size: 14px; }
.msg { margin: 10px 16px 0; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px dashed #cfd3ca; white-space: pre-wrap; font-size: 13px; color: var(--mut); }
.send { display: grid; gap: 8px; padding: 12px 16px 0; }
.send-note--left { text-align: left !important; padding: 0 0 6px !important; }
.send-note { padding: 8px 16px 0; font-size: 12.5px; color: var(--mut); text-align: center; }
.info { padding: 16px; }
.info dl { background: var(--card); padding: 16px; border-radius: var(--r-sm); }
body.has-cart .site-foot--sede { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Aparición suave (solo con JS y sin reduced-motion) ---------- */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.reveal-on [data-reveal].vis { opacity: 1; transform: none; }
.js .hero__txt > * { animation: entrar .7s var(--ease-out) both; }
.js .hero__txt > *:nth-child(2) { animation-delay: .08s; }
.js .hero__txt > *:nth-child(3) { animation-delay: .16s; }
.js .hero__txt > *:nth-child(4) { animation-delay: .24s; }
.js .hero__txt > *:nth-child(5) { animation-delay: .32s; }
.js .hero__plate { animation: entrarZoom .9s var(--ease-out) .15s both; }
@keyframes entrar { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes entrarZoom { from { opacity: 0; transform: scale(.85) rotate(-6deg); } to { opacity: 1; transform: none; } }
.hero__script { animation-name: entrarScript !important; }
@keyframes entrarScript { from { opacity: 0; transform: translateY(22px) rotate(-3deg); } to { opacity: 1; transform: rotate(-3deg); } }

/* ---------- Responsive ---------- */
@media (min-width: 560px) {
  .wrap { padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); }
  .site-head__in { padding: 10px max(24px, env(safe-area-inset-right, 0px)) 10px max(24px, env(safe-area-inset-left, 0px)); }
  .sedes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .prod-card__d { display: -webkit-box; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resenas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsede { flex: 0 1 calc((100% - 16px) / 2); }
  .infobar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head-cta { display: inline-flex; }
  .mbar { margin: 14px -24px 0; padding: 10px 24px 0; }
  .mlist { margin: 0 -24px; }
  .mcat, .item { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 768px) {
  .vacio { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 40px; padding: 52px 48px; }
  .sec { padding: var(--s-9) 0 calc(var(--s-9) + var(--s-3)); }
  .sec-head { margin-bottom: 40px; }
  .sec--pull { padding-top: 16px; }
  .hero { padding: 64px 0 120px; }
  .phero { padding: 26px 0 110px; }
  .phero__grid { grid-template-columns: 1fr auto; gap: 40px; }
  .phero__art { display: grid; }
  .canales { grid-template-columns: 1fr 1fr; margin-top: -64px; }
  .sede-det-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
  .sede-det { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sede-det:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto; }
  .sede-det__info { padding: 30px; }
  .valores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; }
  .foot-bottom { grid-template-columns: 1fr auto 1fr; justify-items: start; text-align: left; align-items: center; }
  .foot-bottom .foot-links { justify-self: center; }
  .foot-bottom .credit { justify-self: end; }
  .card-prose { padding: 40px 44px; }
  .wave { height: 80px; }
  .phero .wave { height: 70px; }
  .site-foot { padding-bottom: 40px; }
  .sede-hero { padding: 28px 0 46px; }
}
@media (min-width: 1024px) {
  .nav { display: block; }
  .burger { display: none; }
  .mnav { display: none !important; }
  .panel-link--head { display: inline-flex; }
  .brand__logo { width: 168px; }
  .site-head__in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-head__in .nav { margin: 0; justify-self: center; }
  .site-head__acts { margin-left: 0; justify-self: end; }
  .hero { min-height: calc(92vh - var(--hh)); min-height: calc(92svh - var(--hh)); display: flex; align-items: center; }
  .hero__grid { grid-template-columns: 1.15fr 1fr; gap: 56px; width: 100%; }
  .hero__plate { width: min(42vw, 520px); }
  .hero__float { width: 84px; height: 84px; font-size: 42px; }
  .hero__badge { width: 112px; height: 112px; font-size: 12px; }
  .hero__badge b { font-size: 38px; }
  .hero__script { font-size: 34px; }
  .intro { grid-template-columns: 1.1fr 1fr; gap: 64px; }
  .sedes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .prods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .resenas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .rsel { padding: 60px 48px 40px; }
  .rsel__head { margin-bottom: 36px; }
  .rsedes { gap: 20px; }
  .rsede { flex-basis: calc((100% - 40px) / 3); }
  .infobar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wa-float { display: none; }
  .site-foot--sede { padding-bottom: 40px; }
  .phero__art { width: 300px; height: 300px; }
  .phero__emoji { font-size: 140px; }
  /* Menú de sede en tarjetas, pedido fijo abajo a la derecha y ventanas centradas (como el prototipo) */
  .mbar { margin: 18px 0 0; padding: 10px 0 0; border-radius: 0; }
  .mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
  .mcat { grid-column: 1 / -1; padding: 30px 0 4px; font-size: 44px; }
  .item { grid-template-columns: minmax(0, 1fr) 128px; padding: 18px 18px 28px; border: 1px solid var(--line); border-radius: var(--r); }
  .item__ph { width: 128px; height: 128px; }
  .cart { left: auto; right: 28px; bottom: 28px; width: 400px; padding: 0; background: none; }
  .cart .cta { max-width: none; }
  .sheet { align-items: center; padding: 24px; }
  .sheet__panel { border-radius: 24px; max-height: 88vh; max-height: 88dvh; transform: translateY(16px) scale(.98); }
  .info-sede { padding: 30px 34px; }
}
@media (min-width: 1300px) {
  .mlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav a { padding: 0 16px; }
}

/* ---------- Hover solo con puntero fino (en táctil el :hover se queda pegado tras el toque) ----------
   Solo se animan transform/opacity; colores y fondos cambian con transiciones cortas. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn--gold:hover { background: var(--o2); }
  .btn--green:hover { background: var(--g2); }
  .btn--line:hover { background: var(--g); color: #fff; }
  .btn--ghost-light:hover { background: #fff; color: var(--g); border-color: #fff; }
  .btn--wa:hover { background: #167a3f; }
  .link-arrow:hover .ico { transform: translateX(4px); }
  .brand:hover .brand__logo { transform: rotate(-3deg) scale(1.04); }
  .nav a:hover { color: var(--gt); background: rgba(50, 84, 25, .06); }
  .nav a:hover::after { opacity: 1; transform: scale(1); }
  .panel-link:hover { color: var(--gt); background: rgba(50, 84, 25, .07); }
  .sede-card:hover { transform: translateY(-4px); }
  .sede-card:hover::after { opacity: 1; }
  .sede-card:hover .sede-card__sun { transform: scale(1.08) translate(-6px, 6px); }
  .rsede:hover .rsede__sun { transform: scale(1.08) translate(-6px, 6px); }
  .rfiltro__chip:hover { background: var(--g); color: #fff; }
  .prod-card:hover { transform: translateY(-4px) rotate(-.4deg); }
  .prod-card:hover::after { opacity: 1; }
  .prod-card:hover .prod-card__ph img { transform: scale(1.05); }
  .prod-card:hover .prod-card__emoji { transform: rotate(-10deg) scale(1.08); }
  .sec--pasos .btn--green:hover { background: var(--o2); }
  .canal:hover { transform: translateY(-4px); }
  .foot-social a:hover { background: var(--o); color: var(--g3); transform: translateY(-3px); }
  .foot-col a:hover { color: var(--o2); text-decoration: underline; }
  .foot-links a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
  .wa-float:hover { transform: scale(1.06); }
  .chip:hover { background: #fff; color: var(--g); }
  .item__open:hover { color: var(--gt); text-decoration: underline; text-decoration-color: var(--o); }
  .cta:hover { filter: brightness(1.06); }
  .mfab__btn:hover { transform: translateY(-2px); }
  .faq__it summary:hover { color: var(--gt); }
  .qc button:hover, .qty button:hover, .line .q button:hover { filter: brightness(1.08); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .item:hover { transform: translateY(-3px); }
  .item:hover::after { opacity: 1; }
}

/* ---------- Pulsación (todas las entradas; va después del hover para ganarle) ---------- */
.btn:active, .cta:active:not([disabled]), .chip:active, .canal:active, .mfab__btn:active, .mfab__link:active, .wa-float:active,
.foot-social a:active, .burger:active, .x:active, .mbar__search:active, .loc button:active, .mapa__btn:active, .foot-links a:active {
  transform: scale(.98); transition-duration: 100ms;
}
.qc button:active, .qty button:active, .line .q button:active { transform: scale(.92); transition-duration: 100ms; }
.item:active { transform: scale(.99); transition-duration: 120ms; }
.wa-float:active { transform: scale(.94); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none; }
  .reveal-on [data-reveal] { opacity: 1; transform: none; }
  .mnav, .mnav li, .sheet__panel { transform: none !important; }
}

/* ---------- Fotos de referencia (stock) en hero, "Qué es Pipo" y Sobre nosotros ---------- */
.hero__mini { position: absolute; left: -4%; bottom: 4%; z-index: 2; width: 34%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 5px solid var(--o); box-shadow: var(--sh-lg); }
.intro__side { display: grid; gap: 22px; min-width: 0; }
.duo { position: relative; margin: 0 0 14px; aspect-ratio: 5 / 4; }
.duo__ring { position: absolute; right: -14px; top: -14px; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--o); opacity: .9; z-index: 0; }
.duo__a, .duo__b { position: absolute; object-fit: cover; box-shadow: var(--sh-lg); }
.duo__a { left: 0; top: 0; width: 78%; height: 82%; border-radius: 28px 28px 120px 28px; z-index: 1; }
.duo__b { right: 0; bottom: 0; width: 52%; aspect-ratio: 1; height: auto; border-radius: 50%; border: 6px solid #fff; z-index: 2; }
@media (max-width: 480px) { .duo__ring { right: -6px; top: -8px; } .hero__mini { left: 0; } }

/* Intro: texto + collage arriba, datos en una franja debajo (equilibrado). */
.intro__lead { font-size: 18px; }
.facts-wrap { margin-top: 38px; }
.facts--row { grid-template-columns: 1fr 1fr; }
.facts--row .fact { padding: 20px 18px; }
@media (min-width: 900px) {
  .facts--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .facts--row .fact { padding: 24px 22px; min-height: 170px; }
}

/* ---------- Burbuja flotante «Pide ahora» / «Ver menú» (solo escritorio ≥1024; en celular la sustituye la barra inferior) ----------
   Abre un panel con Instagram y WhatsApp (en ese orden) y las sedes con referencia, estado en vivo y enlace. Sin rojo. */
.mfab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-fab); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; pointer-events: none; }
.mfab > * { pointer-events: auto; }
.mfab__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 8px; border-radius: 999px; background: var(--g); color: #fff; border: 3px solid var(--o); box-shadow: 0 12px 28px rgba(24, 42, 8, .35); font: 400 23px/1 var(--fd); letter-spacing: .04em; cursor: pointer; transition: transform var(--t-ui) var(--ease-out), background-color var(--t-fast) ease; }
.mfab__btn[aria-expanded="true"] { background: var(--g2); }
.mfab__ico { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--o); color: var(--g3); transition: transform var(--t-ui) var(--ease-out); }
.mfab__btn[aria-expanded="true"] .mfab__ico { transform: rotate(-12deg); }
.mfab__txt { padding-top: 2px; }
.mfab__btn:focus-visible, .mfab__link:focus-visible, .mfab__canal:focus-visible { outline: 3px solid var(--g); outline-offset: 3px; }
.mfab__panel { width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); overflow-y: auto; overscroll-behavior: contain; padding: 18px; border-radius: var(--r); background: var(--card); color: var(--ink); border: 2px solid var(--o); box-shadow: var(--sh-lg); visibility: hidden; opacity: 0; transform: translateY(12px) scale(.97); transform-origin: right bottom; transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms; }
.mfab.is-open .mfab__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mfab__t { margin: 0 0 12px; font: 400 28px/1 var(--fd); letter-spacing: .03em; color: var(--gt); }
.mfab__canales { display: grid; gap: 10px; }
.mfab__canal { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-radius: var(--r-sm); color: #fff; text-decoration: none; font: 700 16px/1.2 var(--ff); transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) ease; }
.mfab__canal span { display: grid; gap: 2px; }
.mfab__canal small { font-weight: 500; font-size: 13px; opacity: .95; }
.mfab__canal--ig { background: linear-gradient(45deg, #B4560C, #9A4F00); }
.mfab__canal--wa { background: #157a3e; }
.mfab__sub { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.mfab__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mfab__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--cream); color: var(--ink); border: 1px solid var(--line); text-decoration: none; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; }
.mfab__link[aria-current="page"] { border-color: var(--o); background: var(--o3); }
.mfab__info { display: grid; gap: 3px; min-width: 0; }
.mfab__nom { font: 700 14.5px/1.25 var(--ff); color: var(--gt); overflow-wrap: anywhere; }
.mfab__ref { font-size: 12.5px; line-height: 1.35; color: var(--mut); overflow-wrap: anywhere; }
.mfab__est { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--mut); }
.mfab__est.is-on { color: var(--ok); }
.mfab__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #8a9184; }
.mfab__est.is-on .mfab__dot { background: #22a95a; }
.mfab__ir { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--gt); white-space: nowrap; }
html.nav-open .mfab { display: none; }
@media (hover: hover) {
  .mfab__canal:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .mfab__link:hover { background: var(--o3); border-color: var(--o); }
}
@media (min-width: 1024px) {
  .mfab { right: 28px; bottom: 28px; }
  .mfab--sede { bottom: 100px; }
  .mfab .mfab__panel { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
  .mfab--sede .mfab__panel { max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px); }
}
@media (prefers-reduced-motion: reduce) {
  .mfab__panel { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
}

/* Lo que más piden: 4 en una fila en escritorio (antes 3 + 1 suelto). */
@media (min-width: 1024px) {
  .sec--prods .prods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}


/* Cinta de categorías curva: va dentro del hero, en el mismo SVG que la ola, y el texto sigue la curva. */
.hero { padding-bottom: 150px; }
.hero > .ribbon { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; display: block; width: 100%; height: clamp(150px, 14vw, 215px); pointer-events: none; }
.ribbon__t { font: 400 31px/1 var(--fd); letter-spacing: .05em; fill: var(--g3); }
@media (min-width: 1024px) { .hero { padding-bottom: 190px; } }

/* Móvil: ninguna sección debe poder desplazarse de lado (decoraciones que sobresalen quedan recortadas, sin crear scroll). */
html { overflow-x: clip; }
.sec, .hero, .phero, .site-foot, main { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
.wrap, .intro > *, .sedes-grid > *, .prods-grid > *, .facts > *, .canales > *, .sede-det > * { min-width: 0; }

/* ---------- Tasa BCV del día (franja del inicio, chip del menú y línea ≈ Bs del pedido) ---------- */
.sec--tasa { padding: 0 0 var(--s-6); }
.tasa { position: relative; overflow: hidden; display: grid; gap: var(--s-3) var(--s-5); align-items: center; padding: var(--s-5) var(--s-4); border-radius: var(--r); background: linear-gradient(140deg, var(--g), var(--g2) 70%, var(--g3)); color: #fff; box-shadow: var(--sh); }
.tasa > * { position: relative; z-index: 1; min-width: 0; }
.tasa__sun { position: absolute; z-index: 0; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--o2), var(--o)); box-shadow: 0 0 0 14px rgba(242, 160, 32, .28), 0 0 0 30px rgba(242, 160, 32, .12); pointer-events: none; }
.tasa .kicker { margin-bottom: var(--s-1); }
.tasa__t { margin: 0; font: 400 clamp(34px, 8vw, 52px)/.95 var(--fd); letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.tasa__t [data-tasa-cuando] { color: var(--o2); }
.tasa__fecha { margin: var(--s-1) 0 0; font-size: 14px; color: rgba(255, 255, 255, .88); }
.tasa__val { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tasa__bs { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 18px 2px; border-radius: 18px; background: var(--card); color: var(--gt2); font: 400 clamp(26px, 6vw, 34px)/1 var(--fd); }
.tasa__bs b { font-weight: 400; font-size: clamp(48px, 13vw, 76px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--gt); }
.tasa__por { font-weight: 700; font-size: 14px; color: var(--o2); text-transform: uppercase; letter-spacing: .1em; }
.tasa__nota { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .82); border-top: 1px dashed rgba(255, 255, 255, .28); padding-top: var(--s-3); }
.tasa.is-old .tasa__fecha { display: inline-block; padding: 4px 10px; border-radius: 10px; background: var(--o3); color: #5a3a00; font-weight: 600; }
@media (min-width: 820px) {
  .tasa { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-6) var(--s-7); }
  .tasa__nota { grid-column: 1 / -1; }
  .tasa__val { justify-content: flex-end; }
}
.tasa-chip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 4px 10px; width: fit-content; max-width: 100%; margin: 16px auto 0; justify-self: center; padding: 11px 22px; min-height: 48px; border-radius: 999px; background: var(--cream); border: 1px solid var(--o3); color: var(--gt2); font-size: 16.5px; line-height: 1.3; }
.tasa-chip b { font-size: 19.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tasa-chip small { font-size: 13px; color: var(--mut); }
.tasa-chip__dot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--o2), var(--o)); box-shadow: 0 0 0 3px rgba(242, 160, 32, .25); flex: none; }
.tasa-chip.is-old { background: var(--card); border-style: dashed; }
.tot.tot--bs { padding-top: 0; margin-top: -2px; font-weight: 500; font-size: 12.5px; color: var(--mut); align-items: baseline; }
.tot.tot--bs > span:first-child { min-width: 0; }
.tot.tot--bs > span:last-child { font-size: 13.5px; font-weight: 600; }
.tot.tot--bs small { font-size: 11px; opacity: .85; margin-left: 2px; }

/* Tasa BCV: «por 1 REF» dentro de la caja blanca, debajo del valor (antes quedaba sobre el círculo dorado y no se leía). */
.tasa__val { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: fit-content; max-width: 100%; padding: 10px 24px 12px; border-radius: 22px; background: var(--card); box-shadow: 0 10px 24px rgba(38, 65, 15, .22); }
.tasa__bs { padding: 0; background: none; border-radius: 0; }
.tasa__por { color: var(--gt); font-size: 13px; letter-spacing: .16em; }
@media (min-width: 820px) { .tasa__val { justify-self: end; } }
.foot-copy b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* Barra inferior del footer: más aire bajo la línea y sin tapar el crédito con la burbuja «Menús». */
.foot-bottom > :first-child { margin-top: 26px; }
.site-foot { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.foot-bottom .credit { margin-bottom: 4px; }
@media (min-width: 1024px) {
  .foot-bottom { grid-template-columns: 1fr auto; grid-template-areas: "links links" "copy credit"; row-gap: 22px; justify-items: stretch; }
  .foot-bottom > :first-child { margin-top: 0; }
  .foot-bottom { padding-top: 0; }
  .foot-bottom .foot-links { grid-area: links; justify-self: center; margin-top: 28px; }
  .foot-bottom .foot-copy { grid-area: copy; justify-content: flex-start; }
  .foot-bottom .credit { grid-area: credit; justify-self: end; margin-right: 190px; }
}

/* Barra inferior del footer (versión simple y centrada): enlaces, copyright + tasa, crédito. Nada a la derecha, así no choca con la burbuja «Menús». */
.foot-bottom, .foot-bottom > :first-child { margin-top: 0; }
.foot-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; padding-top: 30px; padding-bottom: 6px; text-align: center; border-top: 1px solid rgba(255, 255, 255, .12); }
.foot-bottom .foot-links { order: 1; margin: 0; gap: 2px 4px; justify-content: center; }
.foot-bottom .foot-links a { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; font-weight: 500; font-size: 14.5px; color: rgba(255, 255, 255, .86); background: none; }
.foot-bottom .foot-links a + a::before { content: ""; width: 4px; height: 4px; margin-right: 18px; border-radius: 50%; background: var(--o); opacity: .8; }
@media (hover: hover) and (pointer: fine) { .foot-bottom .foot-links a:hover { color: #fff; background: rgba(255, 255, 255, .08); border: 0; } }
.foot-bottom .foot-copy { order: 2; justify-content: center; font-size: 14px; }
.foot-bottom .credit { order: 3; margin: 0; font-size: 13.5px; opacity: .9; }
@media (min-width: 1024px) {
  .foot-bottom { display: flex; grid-template-columns: none; grid-template-areas: none; justify-items: center; }
  .foot-bottom .foot-links, .foot-bottom .foot-copy, .foot-bottom .credit { grid-area: auto; justify-self: center; margin: 0; }
}

/* «Mi panel» de la cabecera: píldora verde rellena (resalta, y no choca con el dorado de «Pedir ahora»). */
.panel-link--head { padding: 0 18px; gap: 8px; border: 0; background: var(--g); color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(50, 84, 25, .28), inset 0 1px 0 rgba(255, 255, 255, .18); transition: background-color .2s, transform .2s; }
.panel-link--head:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .panel-link--head:hover { background: var(--g2); color: #fff; } }

/* ---------- Contraste del dorado sobre fondos verdes ----------
   En todo fondo verde el texto dorado usa un dorado más claro (--o-txt) con una sombra suave,
   y el halo dorado decorativo se aleja del texto para que no lo "ensucie". */
:root { --o-txt: #FFD66B; }
.hero__script, .hero__t span, .hero__t .script,
.kicker--gold, .sec--pasos .kicker, .sec--pasos .sec-t .script,
.vacio__kicker, .vacio__t span, .rsel__kicker, .rsel__t span, .rsel__t .script,
.foot-cta__kicker, .foot-cta__t span, .foot-h, .foot-nap .ico,
.tasa__t [data-tasa-cuando], .tasa .kicker, .tasa__por,
.mnav nav a small, .mnav nav a[aria-current="page"], .mnav nav a:active,
.aviso-ejemplo strong, .fact:nth-child(2) b, .sede-hero__dir .ico, .e404__num { color: var(--o-txt); }
.hero__script, .hero__t span, .hero__t .script, .kicker--gold, .vacio__kicker, .rsel__kicker,
.foot-cta__kicker, .foot-cta__t span, .foot-h, .tasa__t [data-tasa-cuando], .tasa .kicker { text-shadow: 0 1px 2px rgba(0, 0, 0, .38), 0 0 14px rgba(20, 40, 8, .35); }
/* Textos pequeños dorados: algo más de cuerpo para que se lean. */
.hero__script { font-size: 28px; }
.kicker--gold, .tasa .kicker { font-weight: 700; }
/* El halo dorado del hero ya no cae detrás del texto en móvil. */
.hero { background: radial-gradient(700px 480px at 100% 0%, rgba(242, 160, 32, .16), transparent 62%), linear-gradient(150deg, var(--g) 0%, var(--g2) 55%, var(--g3) 100%); }
.hero .orb--sun { opacity: .45; right: -260px; top: -300px; }
.hero .orb--ring2 { opacity: .5; }
@media (min-width: 1024px) {
  .hero { background: radial-gradient(900px 600px at 85% 20%, rgba(242, 160, 32, .2), transparent 60%), linear-gradient(150deg, var(--g) 0%, var(--g2) 55%, var(--g3) 100%); }
  .hero .orb--sun { opacity: .8; right: -160px; top: -180px; }
}

/* ---------- Ajustes responsive (auditoría 320–1920 px, horizontal 667×375 y zonas táctiles) ---------- */
/* Zonas táctiles de 44px sin cambiar el tamaño visible (el área extra va en un pseudo-elemento). */
.crumbs a, .qc button, .line .q button { position: relative; }
.crumbs a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; margin-top: -22px; }
.qc button::after, .line .q button::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.foot-col a, .foot-nap li, .foot-sedes li a { min-height: 44px; }

/* Textos largos (@usuario, «Transferencia», nombres de producto) que no deben salirse de su caja. */
.fact span { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.prod-card__t, .prod-card__cat { overflow-wrap: anywhere; }
.foot-grid > *, .foot-nap li > *, .foot-sedes li > * { min-width: 0; }
.foot-nap a, .foot-nap span { overflow-wrap: anywhere; }
.prose { overflow-wrap: break-word; }
.prose iframe, .prose video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prose pre { overflow-x: auto; }
.prose > table, .prose > .wp-block-table { display: block; max-width: 100%; overflow-x: auto; }
/* Tasa BCV con muchos dígitos (hasta 99.999,9999): «Bs» puede pasar arriba en vez de desbordar la caja. */
.tasa__bs { flex-wrap: wrap; justify-content: center; }
@media (max-width: 374px) {
  .tasa__val { padding-inline: 16px; }
  .tasa__bs b { font-size: 44px; }
}
@media (max-width: 359px) {
  .facts--row .fact { padding: 18px 14px; }
  .fact b { font-size: 46px; }
}
/* Menú móvil: WhatsApp e Instagram uno debajo del otro cuando no caben lado a lado. */
@media (max-width: 379px) { .mnav__acts { grid-template-columns: 1fr; } }
/* Contacto en 320–399: el @usuario y el número caben sin partirse a mitad. */
@media (max-width: 399px) {
  .canal { gap: 12px; padding: 16px; }
  .canal__ico { width: 48px; height: 48px; }
  .canal__txt b { font-size: 27px; }
}

/* Pie en tableta: 2 columnas (4 columnas a 768 px apretaban el @usuario y las direcciones). */
@media (min-width: 768px) and (max-width: 1023px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; } }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); } }
/* Móvil/tableta: el final del pie queda por encima de WhatsApp (16–76 px) y la burbuja «Menús» (88–144 px). */
@media (max-width: 1023px) {
  .site-foot { padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px)); }
  body.has-cart .site-foot--sede { padding-bottom: calc(164px + env(safe-area-inset-bottom, 0px)); }
  /* Mientras se muestra el aviso de cookies (primera visita), la burbuja no asoma por debajo de él. */
  body:has(> .ckbar) .mfab { visibility: hidden; }
}

/* Cabecera 1024–1279: 5 enlaces + «Ingresar/Mi panel» + «Pedir ahora» no cabían en 1fr auto 1fr (desbordaba y partía el botón). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav a { padding: 0 11px; }
  .head-cta { white-space: nowrap; }
  .panel-link--head { width: 44px; padding: 0; justify-content: center; }
  .panel-link--head span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Cinta curva del inicio en pantallas muy anchas: con el tope de 215px el SVG (slice) recortaba la cresta y quedaba plana. */
@media (min-width: 1536px) {
  .hero > .ribbon { height: min(13.9vw, 300px); }
  .hero { padding-bottom: 220px; }
}

/* Horizontal (667×375): menos alto para el plato del hero, el menú móvil y la foto de la hoja del producto. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .hero__plate { width: min(82vw, 440px, 72svh); }
}
@media (max-height: 500px) {
  .mnav { padding-top: 12px; }
  .mnav nav a { min-height: 48px; font-size: 34px; }
  .pbig { height: 140px; font-size: 72px; }
}
/* Menú de sede en horizontal: el pedido a la izquierda y la burbuja en la misma fila (antes se apilaban y tapaban media pantalla). */
@media (max-height: 500px) and (min-width: 560px) and (max-width: 1023px) {
  .cart .cta { margin: 0; max-width: calc(100% - 172px); }
  .mfab--sede { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--z-cart) + 1); }
}

/* Delivery: botón claro de «Compartir mi ubicación» (GPS → Google Maps) y punto de referencia aparte. */
.loc2 { display: grid; gap: 8px; margin-top: 10px; }
.loc2__gps { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 2px solid var(--g); border-radius: 14px; background: var(--card); color: var(--gt); text-align: left; cursor: pointer; touch-action: manipulation; transition: background-color .2s, transform .15s; }
.loc2__gps:active { transform: scale(.98); }
.loc2__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--g); color: #fff; font-size: 20px; }
.loc2__txt { display: grid; gap: 2px; min-width: 0; }
.loc2__txt b { font-size: 15px; font-weight: 700; }
.loc2__txt small { font-size: 12.5px; color: var(--mut); line-height: 1.3; }
.loc2__gps.is-ok { border-color: #1e8a49; background: #eef8f1; }
.loc2__gps.is-ok .loc2__ico { background: #1e8a49; }
.loc2__st { margin: 0; font-size: 13px; color: var(--mut); }
.loc2__st.is-ok { color: #1e7a42; font-weight: 600; }
.loc2__st.is-ok a { color: var(--gt); text-decoration: underline; }
.loc2__st.is-err { color: var(--red, #A85A00); }
.loc2__lb { margin-top: 6px; font-weight: 600; font-size: 13.5px; }
.loc2__lb span { font-weight: 400; color: var(--mut); }
@media (hover: hover) and (pointer: fine) { .loc2__gps:hover { background: #f4f8ef; } }
.loc2__retry { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; background: var(--card); color: var(--gt); font: 600 13px/1 var(--ff); cursor: pointer; touch-action: manipulation; }
.loc2__st.is-err { line-height: 1.45; }

/* ---------- Fondos verdes lisos (pedido de Andre): sin halos ni círculos dorados detrás del texto ---------- */
.hero, .phero, .sede-hero, .e404, .site-foot, .mnav, .tasa, .vacio, .rsel, .sec--pasos { background: linear-gradient(160deg, var(--g) 0%, var(--g2) 100%); }
@media (min-width: 1024px) { .hero { background: linear-gradient(160deg, var(--g) 0%, var(--g2) 100%); } }
.orbs--hero, .orbs--phero, .orbs--foot, .orbs--mnav { display: none; }
.sec--pasos::before, .vacio::after, .tasa__sun, .rsel__ring { display: none; }
.hero::before, .site-foot::before { opacity: .04; }

/* Menú móvil: el blur de la cabecera (backdrop-filter) convertía la cabecera en el contenedor del menú fijo
   y el menú se abría recortado dentro de ella. Con el menú abierto se quita el blur y el menú ocupa la pantalla. */
html.nav-open .site-head { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
.mnav { height: calc(100vh - var(--hh)); height: calc(100dvh - var(--hh)); overscroll-behavior: contain; }

/* Menú móvil: botón «Cerrar» visible arriba, la cabecera (con la X del botón) por encima, y letra más pequeña. */
html.nav-open .site-head { z-index: calc(var(--z-mnav) + 1); }
.mnav__close { position: sticky; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px auto; float: right; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(0, 0, 0, .18); color: #fff; font: 600 14px/1 var(--ff); cursor: pointer; touch-action: manipulation; }
.mnav__close span[aria-hidden] { font-size: 16px; }
.mnav__close:active { transform: scale(.97); }
.mnav nav { clear: both; }
.mnav nav a { font-size: 30px; min-height: 52px; padding: 10px 0; }
.mnav nav a small { font-size: 12px; }
@media (max-height: 620px) { .mnav nav a { font-size: 26px; min-height: 46px; } }

/* Verde más claro en los bloques verdes (en el celular el tono oscuro de abajo ocupaba casi toda la pantalla). */
.hero, .phero, .sede-hero, .e404, .site-foot, .mnav, .tasa, .vacio, .rsel, .sec--pasos { background: linear-gradient(170deg, #4a7a28 0%, #3a6620 50%, #325419 100%); }
@media (min-width: 1024px) { .hero { background: linear-gradient(160deg, #4a7a28 0%, #3a6620 50%, #325419 100%); } }
.hero::before, .site-foot::before { opacity: .025; }

/* «Cómo pedir» en 3 pasos (menú en línea oculto al público) y página «Menú en línea muy pronto». */
@media (min-width: 1024px) { .pasos.pasos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mpronto .vacio { position: relative; }
.mpronto .vacio > * { position: relative; z-index: 1; }
.mpronto__btns .btn { flex: 1 1 220px; justify-content: center; }
.mpronto + .sec--sedes .sede-det { max-width: 1040px; margin: 0 auto; }
@media (min-width: 900px) { .mpronto + .sec--sedes .sede-det { grid-template-columns: 1.1fr 1fr; grid-template-rows: auto; } }
/* Tasa BCV no vigente: solo la ve el equipo, con aviso. */
.tasa-equipo { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #7a4300; background: #fff4e0; border-radius: 8px; padding: 4px 8px; }

/* ---------- Productos SIN foto (Ajustes → Pipo · Lanzamiento: fotos de referencia apagadas) ----------
   Tarjetas de texto sin imagen ni emoji; conviven en la misma lista con las que sí tienen foto propia. */
/* Menú de sede: texto a todo el ancho y el +/− a la derecha, centrado en vertical (botones de 44px). */
.item--txt { grid-template-columns: minmax(0, 1fr) auto; gap: 0; align-items: center; padding-bottom: 16px; }
.item__act { display: flex; align-items: center; justify-content: flex-end; }
.item--txt .qc { position: static; transform: none; margin-left: 12px; }
.item--txt .qc button { width: 44px; height: 44px; font-size: 22px; }
.item--txt .qc button::after { inset: 0; }
@media (min-width: 1024px) {
  .item--txt { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 18px; }
}
/* Hoja del producto sin foto: sin cabecera de imagen; el nombre abre con un acento dorado. */
.phead + .pbody { padding-top: 20px; }
.phead + .pbody h2::before { content: ""; display: block; width: 36px; height: 4px; margin-bottom: 12px; border-radius: 4px; background: var(--o); }
/* Destacados de Inicio sin foto: tarjeta verde de marca, nombre y precio en Bebas, círculo dorado. */
.prod-card--txt { color: #fff; background: linear-gradient(155deg, #4a7a28 0%, var(--g) 60%, var(--g2) 100%); }
.prod-card__deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.prod-card__deco::before { content: ""; position: absolute; right: -26px; top: -26px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd27a, var(--o) 60%, #d9850c); opacity: .95; }
.prod-card__deco::after { content: ""; position: absolute; right: 30px; top: 46px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--o); opacity: .8; }
.prod-card--txt .prod-card__bd { position: relative; z-index: 1; gap: 6px; padding: 18px 16px 16px; }
.prod-card--txt .prod-card__cat { color: #ffd27a; padding-right: 52px; }
.prod-card--txt .prod-card__t { font: 400 clamp(24px, 6.4vw, 30px)/1 var(--fd); letter-spacing: .02em; color: #fff; padding-right: 30px; }
.prod-card--txt .prod-card__d { display: -webkit-box; color: rgba(255, 255, 255, .86); font-size: 13px; }
.prod-card--txt .prod-card__pr { padding-top: 10px; font: 400 26px/1 var(--fd); letter-spacing: .03em; color: var(--o); }
.prod-card--txt .prod-card__pr small { font: 500 12px/1 var(--ff); letter-spacing: 0; color: rgba(255, 255, 255, .8); }
.prod-card--txt .dias-tag { align-self: flex-start; }
/* Sin fotos de ambiente de referencia: el texto de «Qué es Pipo» / Sobre nosotros ocupa todo el ancho. */
.intro--solo .intro__lead { max-width: 760px; }
@media (min-width: 1024px) {
  .intro--solo { grid-template-columns: minmax(0, 1fr); }
}

/* Regla: nunca letra amarilla sobre fondo blanco/claro. En fondos claros el acento cursivo usa naranja oscuro legible;
   en fondos verdes sigue el dorado claro (--o-txt). */
.script { color: #C25E0E; }
.hero .script, .phero .script, .sede-hero .script, .site-foot .script, .sec--pasos .script, .tasa .script,
.vacio .script, .rsel .script, .mnav .script, .e404 .script, .foot-cta .script { color: var(--o-txt); }
.tasa .tasa__val .tasa__por { color: var(--gt) !important; text-shadow: none !important; }

/* ---------- Heros sin íconos ni ilustraciones, todo centrado (pedido de Andre) ---------- */
.hero__art, .phero__art, .hero__float, .hero__mini, .sede-hero__dir .ico, .sede-hero__dir svg { display: none !important; }
.hero__grid, .phero__grid { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
@media (min-width: 1024px) { .hero__grid, .phero__grid { grid-template-columns: 1fr !important; } }
.hero__txt, .phero__txt { max-width: 860px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; }
.hero__lead, .phero__lead { margin-left: auto; margin-right: auto; }
.hero__script { transform-origin: center; }
.hero .btns, .phero .btns, .sede-hero .btns, .sede-hero .chips { justify-content: center; }
.hero__live { align-self: center; }
.sede-hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sede-hero__dir { justify-content: center; }
.phero .crumbs ol, .sede-hero .crumbs ol, .crumbs--light ol { justify-content: center; }
.e404__num span { display: none; }

/* Página de sede con el menú oculto (template-parts/menu-pronto.php) */
.sede-det__t--sub { margin-top: 30px; }
.otras-sedes { display: grid; gap: 10px; max-width: 1040px; margin: 0 auto; }
@media (min-width: 700px) { .otras-sedes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .otras-sedes { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Ilustraciones zulianas (arte de línea del menú impreso de la marca) ----------
   Decoración sutil en dorado-oliva sobre bloques verdes; siempre en el flujo (nunca encima de texto). */
:root { --ilus: #C2A043; --cinta: #B35A10; }
.ilus { display: block; height: auto; color: var(--ilus); opacity: .62; pointer-events: none; -webkit-user-select: none; user-select: none; }
.foot-ilus { display: flex; justify-content: center; margin-top: 40px; }
.foot-ilus .ilus { width: min(300px, 70%); }
.ilus--pasos { width: min(170px, 46%); margin: 34px auto 0; }
.vacio__col { display: grid; gap: 18px; align-content: center; position: relative; z-index: 1; }
.ilus--vacio { width: 132px; justify-self: center; }
.tasa__ilus { display: none; }
.ilus--rsel { width: 140px; margin: 22px auto 0; }
@media (max-width: 379px) { .ilus--pasos, .ilus--vacio, .ilus--rsel { display: none; } }
@media (min-width: 820px) {
  .tasa { grid-template-columns: minmax(0, 1fr) auto auto; }
  .tasa__ilus { display: block; width: 128px; align-self: end; margin-bottom: -6px; }
}
@media (min-width: 1024px) {
  .foot-ilus .ilus { width: 360px; }
  .ilus--vacio { width: 160px; }
  .ilus--pasos { width: 190px; }
  .tasa__ilus { width: 150px; }
}

/* Cinta naranja «— Somos tradición zuliana —» sobre el pie (texto blanco sobre naranja oscuro: contraste 4,8:1). */
.cinta { overflow: hidden; background: var(--cinta); color: #fff; border-top: 3px solid var(--o); }
.cinta__in span { padding-right: 28px; }
.cinta__in { display: flex; width: max-content; margin: 0; padding: 7px 0 6px; font: italic 700 13px/1.2 var(--ff); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .cinta__in { animation: cinta 60s linear infinite; }
  @keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}

/* ---------- Barra inferior tipo app (solo celular, < 1024 px) ---------- */
.abar, .ahoja { display: none; }
@media (max-width: 1023px) {
  .abar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-cart) - 1); padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); background: rgba(24, 42, 8, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 -8px 24px rgba(var(--sh-c), .22); }
  .abar__list { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .abar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 56px; padding: 6px 4px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; font: 600 13px/1.1 var(--ff); text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) ease; }
  .abar__btn svg { flex: none; }
  .abar__btn--sedes { border: 1px solid rgba(255, 255, 255, .22); }
  .abar__btn--sedes svg { color: var(--o2); }
  .abar__btn--sedes[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }
  .abar__btn--ig { background: var(--ig); background-origin: border-box; }
  .abar__btn--wa { background: var(--wa); }
  .abar__btn:active { transform: scale(.96); filter: brightness(.95); }
  .abar__btn:focus-visible { outline: 3px solid var(--o); outline-offset: 2px; }
  /* Con la barra activa: fuera el WhatsApp flotante, la burbuja «Menús» y el «Pedir ahora» del header. */
  .wa-float, .mfab, .head-cta { display: none !important; }
  /* Menú de sede con productos en el carrito: la barra «Ver pedido» la sustituye (sin solaparse). */
  body.has-cart .abar { display: none; }
  html.nav-open .abar { display: none; }
  /* Que la barra no tape el final del contenido. */
  .site-foot { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  body.has-cart .site-foot--sede { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
  /* Aviso de cookies por encima de la barra (sin taparla). */
  .ckbar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Hoja «Sedes» */
  .ahoja { display: flex; position: fixed; inset: 0; z-index: var(--z-sheet); align-items: flex-end; justify-content: center; }
  .ahoja[hidden] { display: none; }
  .ahoja__fondo { position: absolute; inset: 0; background: rgba(12, 20, 6, .55); opacity: 0; transition: opacity var(--t-ui) var(--ease-out); }
  .ahoja__panel { position: relative; width: 100%; max-width: 600px; max-height: 85vh; max-height: 85dvh; overflow: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink); border-radius: 24px 24px 0 0; padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); transform: translateY(24px); opacity: 0; transition: transform 300ms var(--ease-drawer), opacity var(--t-ui) var(--ease-out); }
  .ahoja__panel:focus { outline: none; }
  .ahoja.is-in .ahoja__fondo, .ahoja.is-in .ahoja__panel { opacity: 1; }
  .ahoja.is-in .ahoja__panel { transform: none; }
  html.ahoja-open { overflow: hidden; }
  .ahoja__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -16px 8px; padding: 14px 16px 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .ahoja__t { margin: 0; font: 400 28px/1 var(--fd); letter-spacing: .02em; text-transform: uppercase; color: var(--gt); }
  .ahoja__x { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--gt2); font-size: 18px; cursor: pointer; touch-action: manipulation; }
  .ahoja__x:focus-visible, .ahoja__sede:focus-visible { outline: 3px solid var(--o); outline-offset: 2px; }
  .ahoja__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .ahoja__sede { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .ahoja__sede > svg { flex: none; color: var(--gt); }
  .ahoja__sede[aria-current="page"] { border-color: var(--g); box-shadow: inset 4px 0 0 var(--g); }
  .ahoja__sede:active { background: #f4f8ef; }
  .ahoja__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .ahoja__nom { font-weight: 700; font-size: 15.5px; color: var(--gt2); }
  .ahoja__ciudad { font-size: 13px; color: var(--mut); }
  .ahoja__hor { display: block; font-size: 12.5px; line-height: 1.35; color: var(--mut); }
  .ahoja__est { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mut); }
  .ahoja__est i { width: 9px; height: 9px; border-radius: 50%; background: #9aa192; flex: none; }
  .ahoja__est.is-on { color: var(--ok); }
  .ahoja__est.is-on i { background: var(--ok); box-shadow: 0 0 0 3px rgba(26, 122, 64, .18); }
  .ahoja__vacio { margin: 8px 0; color: var(--mut); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .ahoja__fondo, .ahoja__panel, .abar__btn { transition: none; }
  .ahoja__panel { transform: none; }
}
@media (max-width: 1023px) and (hover: hover) and (pointer: fine) {
  .abar__btn:hover { filter: brightness(1.08); }
  .ahoja__sede:hover { background: #f4f8ef; }
}

/* ---------- Inicio: «N de N sedes abiertas ahora» como píldora visible ---------- */
.hero__live { gap: 12px; margin-top: 24px; padding: 11px 18px 11px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .38); color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.2; box-shadow: 0 8px 22px rgba(var(--sh-c), .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero__live b { font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.hero__live i { width: 12px; height: 12px; background: var(--o); box-shadow: 0 0 0 3px rgba(242, 160, 32, .28); }
.hero__live i.is-on { background: #3fd67c; box-shadow: 0 0 0 3px rgba(63, 214, 124, .28); }
.hero__live i.is-on::after { inset: -5px; animation-duration: 2.4s; }
@media (prefers-reduced-motion: reduce) { .hero__live i.is-on::after { animation: none; opacity: 0; } }

/* Franja de la tasa BCV en celular: todo centrado (en PC sigue en dos columnas). */
@media (max-width: 819px) {
  .tasa { justify-items: center; text-align: center; }
  .tasa__txt, .tasa__nota { text-align: center; }
  .tasa .kicker { justify-content: center; }
  .tasa__val { justify-self: center; margin-left: auto; margin-right: auto; }
  .tasa__fecha { margin-left: auto; margin-right: auto; }
}

/* Hero: la frase en cursiva ya no se monta sobre el H1 (en celular quedaba pegada al título). */
.hero__script { display: block; margin: 0 0 18px; line-height: 1.25; transform: rotate(-2deg); }
@media (max-width: 600px) { .hero__script { font-size: 22px; margin-bottom: 20px; } .hero__t { line-height: 1; } }

/* Celular: más aire arriba del hero para que «Somos tradición…» nunca quede pegada/bajo la cabecera. */
@media (max-width: 767px) { .hero { padding-top: 64px; } .hero__script { margin-top: 4px; } }

/* Celular: aún más aire arriba y la frase en cursiva sin tocar los bordes (más pequeña, sin giro y con margen lateral). */
@media (max-width: 767px) {
  .hero { padding-top: 75px; }
  .hero__script { font-size: 20px; transform: none; max-width: calc(100% - 32px); margin-left: auto; margin-right: auto; text-wrap: balance; }
}
@media (max-width: 380px) { .hero__script { font-size: 18px; } }

/* ---------- Ilustraciones zulianas como FONDO: no ocupan espacio ni agrandan los bloques ----------
   Van en posición absoluta detrás del contenido (z-index negativo dentro de un contexto propio). */
.site-foot, .sec--pasos .wrap, .rsel, .vacio, .vacio__col { isolation: isolate; }
.ilus--pasos, .ilus--vacio, .ilus--rsel, .foot-ilus { position: absolute !important; z-index: -1; margin: 0 !important; pointer-events: none; }
.ilus--pasos { right: 0; bottom: -10px; width: clamp(100px, 15vw, 180px) !important; opacity: .32; }
.ilus--vacio { right: 6px; bottom: 6px; width: clamp(90px, 13vw, 150px) !important; opacity: .28; }
.ilus--rsel  { right: 18px; bottom: 14px; width: clamp(90px, 12vw, 140px) !important; opacity: .28; }
.foot-ilus { left: 0; right: 0; bottom: 70px; display: flex !important; justify-content: flex-end; padding: 0 4%; }
.foot-ilus .ilus { width: clamp(130px, 20vw, 280px) !important; opacity: .24; }
.tasa .tasa__ilus { position: absolute !important; z-index: 0; left: 50%; bottom: 0; transform: translateX(-50%); width: clamp(110px, 14vw, 170px) !important; margin: 0 !important; opacity: .22; pointer-events: none; }
.foot-ilus { justify-content: flex-start; }   /* puente del footer a la izquierda */

/* Claro y oscuro: el tema va en html[data-theme] (script del <head> + botón de la cabecera); el bloque «Modo oscuro» está al final.
   OJO: la raíz declara color-scheme: dark en AMBOS temas, a propósito. Chrome (Android) con «oscurecer sitios web» solo aplica su
   oscurecimiento forzado si la raíz es clara; si ya es oscura lo omite, y esa inversión automática volvía el naranja/dorado ROJO.
   Como los valores por defecto del navegador pasan a ser oscuros, el tema claro los pisa de forma explícita (abajo). */
:root { color-scheme: dark; }
html { background: var(--bg); scrollbar-color: #b9bfb3 var(--bg); }
html[data-theme="dark"] { scrollbar-color: #3b4c2b var(--bg); }
select, textarea, input:where(:not([type]), [type="text"], [type="search"], [type="tel"], [type="email"], [type="url"], [type="number"], [type="password"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) { background-color: var(--card); }
select option, select optgroup { background-color: var(--card); color: var(--ink); }
::placeholder { color: #7a8170; opacity: 1; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--g); }
html:not([data-theme="dark"]) input, html:not([data-theme="dark"]) select, html:not([data-theme="dark"]) textarea { color-scheme: light; }   /* selectores de fecha/hora y listas claros en el tema claro (solo en el campo: no afecta al oscurecimiento forzado, que mira la raíz) */

/* Pie: horario y pedidos en línea de cada sede */
.foot-hor { display: block; line-height: 1.4; }

/* Precio en REF que se cobra en Bs a tasa BCV (nota bajo el monto en Bs) */
.item__ref-nota { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: #5b6150; }
.pbody .pr .item__ref-nota { font-size: 13px; }
/* Jugo natural: elegir sabor en la hoja del producto */
.pbody .sabor-f { padding: 0; margin-top: 14px; }

/* ==========================================================================
   MODO OSCURO (html[data-theme="dark"])
   Fondos verde-neutros muy oscuros, tarjetas un punto más claras, texto marfil, acentos dorados.
   Reglas de la clienta: nada de rojo ni rosa (errores/cerrado/agotado = naranja/ámbar) y nunca letra dorada sobre fondo claro
   (en oscuro no queda ninguna superficie clara: las cremas se oscurecen). Los bloques verdes de marca se mantienen, algo más hondos.
   Las fotos no se filtran.
   ========================================================================== */
html[data-theme="dark"] {
  --bg: #0f1608;
  --card: #1b2612;
  --cream: #222e15;
  --o3: #3a2d12;
  --line: #2d3b21;
  --ink: #EDEFE8;
  --mut: #B6BDAE;
  --gt: #C9E5A0;       /* «verde» como texto: títulos, enlaces, precios */
  --gt2: #E3F1CB;
  --red: #FFB547;      /* «rojo» del sitio = ámbar claro legible sobre oscuro */
  --ok: #62D68F;
  --ilus: #C2A043;
  --sh-c: 0, 0, 0;
  --sh: 0 0 0 1px rgba(255, 255, 255, .05), 0 10px 28px rgba(0, 0, 0, .38);
  --sh-sm: 0 4px 12px rgba(0, 0, 0, .4);
  --sh-lg: 0 24px 60px rgba(0, 0, 0, .5);
  --sh-deep: 0 40px 80px rgba(0, 0, 0, .55);
  --grain: none;
}
html[data-theme="dark"] { background: var(--bg); }
html[data-theme="dark"] ::selection { background: rgba(242, 160, 32, .35); color: #fff; }
html[data-theme="dark"] ::placeholder { color: #9aa391; }
/* Cabecera, barras fijas y menú */
html[data-theme="dark"] .site-head { background: rgba(15, 22, 8, .86); }
html[data-theme="dark"] .site-head.is-scrolled { background: rgba(20, 29, 12, .95); border-color: var(--line); }
html[data-theme="dark"] .site-head::after { background: linear-gradient(rgba(0, 0, 0, .35), transparent); }
html[data-theme="dark"] .mbar { background: rgba(15, 22, 8, .96); }
html[data-theme="dark"] .cart { background: linear-gradient(transparent, rgba(15, 22, 8, .96) 30%); }
html[data-theme="dark"] .panel-link--head { border-color: rgba(255, 255, 255, .3); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .nav a:hover, html[data-theme="dark"] .panel-link:hover { background: rgba(255, 255, 255, .07); }
  html[data-theme="dark"] .panel-link--head:hover { background: var(--g2); }
}
html[data-theme="dark"] .btn--green { background: #3f6b21; }
html[data-theme="dark"] .burger { background: #3f6b21; }
/* Bloques verdes de marca: un verde más hondo para que no deslumbren sobre el fondo oscuro */
html[data-theme="dark"] .hero, html[data-theme="dark"] .phero, html[data-theme="dark"] .sede-hero, html[data-theme="dark"] .e404, html[data-theme="dark"] .tasa, html[data-theme="dark"] .vacio, html[data-theme="dark"] .rsel, html[data-theme="dark"] .sec--pasos { background: linear-gradient(170deg, #35601d 0%, #2b4a16 50%, #243d12 100%); }
@media (min-width: 1024px) { html[data-theme="dark"] .hero { background: linear-gradient(160deg, #35601d 0%, #2b4a16 50%, #243d12 100%); } }
html[data-theme="dark"] .site-foot, html[data-theme="dark"] .mnav { background: linear-gradient(170deg, #1f3311 0%, #141f0a 100%); }
html[data-theme="dark"] .prod-card--txt { background: linear-gradient(155deg, #35601d 0%, #2b4a16 60%, #243d12 100%); }
html[data-theme="dark"] .abar { background: rgba(10, 16, 5, .96); }
html[data-theme="dark"] .hero__live { background: rgba(0, 0, 0, .22); }
html[data-theme="dark"] .ribbon__bg { fill: var(--bg); }
html[data-theme="dark"] .wave { fill: var(--bg); }
html[data-theme="dark"] .sede-card__top, html[data-theme="dark"] .rsede__top { box-shadow: none; }
/* Fondos con textura y secciones neutras */
html[data-theme="dark"] .sec--sedes, html[data-theme="dark"] .sec--exp, html[data-theme="dark"] .sec--faq { background: #121b0a; }
html[data-theme="dark"] .sec--intro::before, html[data-theme="dark"] .sec--sedes-det::before { opacity: .55; }
html[data-theme="dark"] .orbs--soft .orb--ring, html[data-theme="dark"] .orbs--soft .orb--ring2 { border-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .sec--prods::after { border-color: rgba(255, 255, 255, .1); }
/* Títulos y acentos sobre fondo oscuro: dorado, no naranja oscuro */
html[data-theme="dark"] .script, html[data-theme="dark"] .sec-t .script, html[data-theme="dark"] .hrow h2 .script { color: var(--o); }
html[data-theme="dark"] .kicker { color: var(--o-txt); }
html[data-theme="dark"] .kicker::before { box-shadow: 0 0 0 4px rgba(242, 160, 32, .25); }
html[data-theme="dark"] .prod-card__cat { color: var(--o-txt); }
html[data-theme="dark"] .sec-t, html[data-theme="dark"] .sede-card__t, html[data-theme="dark"] .rsede__t, html[data-theme="dark"] .sede-det__t, html[data-theme="dark"] .mcat, html[data-theme="dark"] .valor h3, html[data-theme="dark"] .hist__it h3, html[data-theme="dark"] .prose h2, html[data-theme="dark"] .info-sede__t, html[data-theme="dark"] .pbody h2, html[data-theme="dark"] .exp-cta__t, html[data-theme="dark"] .mfab__t, html[data-theme="dark"] .ahoja__t { color: var(--gt); }
html[data-theme="dark"] .fact b { color: var(--o-txt); }
html[data-theme="dark"] .fact:nth-child(3) b { color: var(--g3); }
html[data-theme="dark"] .nav a[aria-current="page"] { color: var(--o-txt); }
html[data-theme="dark"] .tabs a.on { color: var(--o-txt); }
/* Superficies que eran blancas o cremas */
html[data-theme="dark"] .btn--line, html[data-theme="dark"] .cta--line, html[data-theme="dark"] .rfiltro__chip, html[data-theme="dark"] .loc button, html[data-theme="dark"] .loc2__gps, html[data-theme="dark"] .loc2__retry { border-color: #6f9c43; }
html[data-theme="dark"] .rfiltro__chip[aria-pressed="true"] { border-color: var(--g); }
html[data-theme="dark"] .btn--line:hover { background: #3f6b21; }
html[data-theme="dark"] .resena__stars { color: #4c5842; }
html[data-theme="dark"] .resena__stars .on { color: var(--o); }
html[data-theme="dark"] .resena__sede { color: var(--gt); }
html[data-theme="dark"] .resena::before { color: rgba(242, 160, 32, .3); }
html[data-theme="dark"] .sede-det__n { color: rgba(242, 160, 32, .28); }
html[data-theme="dark"] .prod-card__ph, html[data-theme="dark"] .pbig { background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .07) 0 30%, transparent 31%), linear-gradient(145deg, var(--cream), var(--o3)); }
html[data-theme="dark"] .pbig { background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .07) 0 26%, transparent 27%), linear-gradient(145deg, var(--cream), var(--o3)); }
html[data-theme="dark"] .duo__b, html[data-theme="dark"] .hero__img { border-color: var(--card); }
html[data-theme="dark"] .item__ref-nota { color: var(--mut); }
html[data-theme="dark"] .qc { box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .qc button.m { background: #2d3b21; color: var(--gt); }
html[data-theme="dark"] .item { border-bottom-color: var(--line); }
html[data-theme="dark"] .sheet { background: rgba(4, 8, 2, .68); }
html[data-theme="dark"] .ahoja__fondo { background: rgba(4, 8, 2, .68); }
html[data-theme="dark"] .in, html[data-theme="dark"] .opt, html[data-theme="dark"] .msg, html[data-theme="dark"] .msearch input { border-color: #3b4c2b; }
html[data-theme="dark"] .in:focus { border-color: #7fae4e; }
html[data-theme="dark"] .in::placeholder, html[data-theme="dark"] .msearch input::placeholder { color: #8a9482; }
html[data-theme="dark"] .opt:has(input:checked) { border-color: #7fae4e; box-shadow: 0 0 0 1px #7fae4e; background: #1f3012; }
html[data-theme="dark"] .opt input, html[data-theme="dark"] .chk input, html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { accent-color: #7fae4e; }
html[data-theme="dark"] .line .q button { background: #243019; }
html[data-theme="dark"] .ok { background: #14301f; color: #8fe3b0; }
html[data-theme="dark"] .loc2__gps.is-ok { border-color: #3fae6a; background: #14301f; }
html[data-theme="dark"] .loc2__gps.is-ok .loc2__ico { background: #2e9157; }
html[data-theme="dark"] .loc2__st.is-ok { color: #6fdc9b; }
html[data-theme="dark"] .loc2__ico { background: #3f6b21; }
@media (hover: hover) and (pointer: fine) { html[data-theme="dark"] .loc2__gps:hover, html[data-theme="dark"] .ahoja__sede:hover { background: #222f16; } }
html[data-theme="dark"] .ahoja__sede:active { background: #222f16; }
html[data-theme="dark"] .ahoja__sede[aria-current="page"] { border-color: #7fae4e; box-shadow: inset 4px 0 0 #7fae4e; }
html[data-theme="dark"] .ahoja__x { background: var(--card); }
html[data-theme="dark"] .mfab__panel { border-color: var(--o); }
html[data-theme="dark"] .mfab__link:hover { background: var(--o3); }
html[data-theme="dark"] .mfab__dot, html[data-theme="dark"] .ahoja__est i { background: #7d8774; }
html[data-theme="dark"] .mfab__est.is-on .mfab__dot { background: #3fd67c; }
html[data-theme="dark"] .mfab__btn:focus-visible, html[data-theme="dark"] .mfab__link:focus-visible, html[data-theme="dark"] .mfab__canal:focus-visible, html[data-theme="dark"] .fact__a:focus-visible { outline-color: var(--o); }
html[data-theme="dark"] .mapa__btn { color: var(--gt2); }
html[data-theme="dark"] .tasa-chip { border-color: #4a3a18; }
html[data-theme="dark"] .tasa-chip.is-old { background: var(--card); }
html[data-theme="dark"] .tasa__val { background: var(--card); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .tasa__bs b { color: var(--gt2); }
html[data-theme="dark"] .tasa .tasa__val .tasa__por { color: var(--o-txt) !important; }
/* Estados: ámbar y verde, nunca rojo */
html[data-theme="dark"] .estado { background: #3a2a0e; color: #FFC163; }
html[data-theme="dark"] .estado.is-on { background: #14301f; color: var(--ok); }
html[data-theme="dark"] .estado--pill { background: #3a2a0e; }
html[data-theme="dark"] .estado--pill.is-on { background: #14301f; }
html[data-theme="dark"] .estado i { background: #FFB547; }
html[data-theme="dark"] .estado.is-on i { background: #3fd67c; }
html[data-theme="dark"] .estado.is-on i::after { border-color: #3fd67c; }
html[data-theme="dark"] .item__pr .agotado, html[data-theme="dark"] .err, html[data-theme="dark"] .loc2__st.is-err { color: #FFB547; }
/* Avisos pálidos → ámbar oscuro con texto claro */
html[data-theme="dark"] .tag-confirmar { color: #FFD9A0; background: #3a2a0e; border-color: #8a6a1c; }
html[data-theme="dark"] .warn { background: #33270d; color: #FFE0A8; border-color: #6b5218; }
html[data-theme="dark"] .warn a { color: #FFE0A8; }
html[data-theme="dark"] .dias-tag { background: #3a2d12; color: #FFD9A0; }
html[data-theme="dark"] .tasa.is-old .tasa__fecha { background: #3a2d12; color: #FFD9A0; }
html[data-theme="dark"] .tasa-equipo { background: #3a2d12; color: #FFD9A0; }
/* Ilustraciones zulianas: ya van sobre verde; algo más suaves */
html[data-theme="dark"] .ilus { opacity: .5; }