/* =====================================================================
   BASE.CSS — Señor Frog's · lo COMÚN de todas las páginas del sitio
   =====================================================================
   Extraído literal de la home aprobada (_fuente/plantilla.html) el
   2026-07-27, sin cambios de diseño: tokens de marca, tipografías,
   header + drawer, reglas de texto, footer, efectos base y la NORMA
   MÓVIL.  Cada página añade DESPUÉS su propio CSS.
   ⚠️ Las rutas de las fuentes son absolutas (/assets/…) para que
   funcionen igual en la raíz y en cualquier subcarpeta.
   ===================================================================== */


/* ═════════════════ TOKENS · FUENTES · BASE · HEADER · DRAWER ═════════════════ */
/* ============ FUENTES DE MARCA (brandbook: Oswald títulos · Museo Sans Rounded textos) ============ */
@font-face{
  font-family:"Boris Black";
  src:url("../v2/wp-content/uploads/2025/03/BorisBlackBloxx.ttf") format("truetype");
  font-display:swap;
}
@font-face{font-family:"Oswald";src:url("../fonts-marca/Oswald-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Oswald";src:url("../fonts-marca/Oswald-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Oswald";src:url("../fonts-marca/Oswald-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Museo Sans Rounded";src:url("../fonts-marca/MMuseoSansRounded3.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Museo Sans Rounded";src:url("../fonts-marca/MMuseoSansRounded5.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Museo Sans Rounded";src:url("../fonts-marca/MMuseoSansRounded7.ttf") format("truetype");font-weight:700;font-display:swap}

/* ============ BASE ============ */
:root{
  /* Paleta oficial brandbook Señor Frog's */
  --rojo:#BD0829;      /* Pantone 186 C */
  --rojo-osc:#8d0620;
  --rojo-hover:#d81b3d;  /* rojo hover de botones (tokenizado, mismo valor exacto) */
  --amarillo:#F7BE39;  /* Pantone 136 C */
  --azul:#043768;      /* Pantone 2955 C */
  --turquesa:#1FABBA;  /* Pantone 7467 C */
  --naranja:#DD5035;   /* Pantone 7417 C */
  --verde:#4CA658;     /* Pantone 7738 C */
  --negro:#043768;   /* azul marino brandbook — NUNCA negro */
  --crema:#fff8ec;
  /* auditoría 2026-07-21: tokens que faltaban (había 3 sombras y 2 hovers de amarillo sueltos) */
  --amarillo-osc:#c48f1c;    /* sombra base de botones amarillos */
  --amarillo-hover:#ffcb4d;
  --radio-btn:40px;          /* píldora estándar */
  --radio-btn-cuadrado:14px; /* botones de barra (motores) */
  --sombra-navy-rgb:3,35,71;  /* navy de sombras/overlays (tokenizado, mismo valor exacto) */
  --sombra-txt:3px 3px 0 rgba(var(--sombra-navy-rgb),.6);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* 2026-08-01 · overflow-x del body: `hidden` puede convertir al body en
   contenedor de scroll en Safari y romper CUALQUIER sticky de la página.
   `clip` recorta igual el desborde horizontal pero sin crear scroll — y los
   navegadores viejos que no lo entienden se quedan con el hidden anterior. */
body{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;background:#fff;color:var(--negro);overflow-x:hidden;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.titulo{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;background:var(--rojo);color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;padding:14px 34px;border-radius:var(--radio-btn);text-decoration:none;font-size:16px;border:none;cursor:pointer;transition:transform .15s ease, background .15s ease;box-shadow:0 4px 0 var(--rojo-osc)}
.btn:hover{transform:translateY(-2px);background:var(--rojo-hover)}
/* 2026-07-28 · el CTA de reserva pasó de <a> a <button> (abre el modal):
   Safari le pone su propio aspecto y no hereda la línea base. */
button.btn{-webkit-appearance:none;appearance:none;line-height:1.2;text-align:center}
.btn-amarillo{background:var(--amarillo);color:var(--negro);box-shadow:0 4px 0 #c79422}
.btn-amarillo:hover{background:#f9cb5e}
/* 2026-07-29 · botón secundario de línea (about-us, food-service): mismo alto y
   misma tipografía que .btn, pero sin peso visual — nunca compite con el CTA. */
.btn-linea{background:transparent; color:var(--azul); border:2px solid var(--azul); box-shadow:none; padding:12px 32px}
.btn-linea:hover{background:var(--azul); color:#fff}
.sec-titulo{font-size:clamp(28px,4.5vw,52px);color:var(--rojo);text-align:center;text-shadow:2px 2px 0 rgba(var(--sombra-navy-rgb),.12);margin-bottom:8px}
/* 2026-07-29 · #444 era un gris neutro ajeno a la paleta; #4a5b6d es el gris
   azulado de la casa (el mismo de los extractos del blog). ⛔ nunca negro. */
.sec-sub{ text-align:center;font-size:17px;color:#4a5b6d;max-width:640px;margin:0 auto 40px}

/* ============ HEADER: píldora flotante clara + EN/ES + hamburguesa ============ */
/* 2026-07-23 · Carlos: el margen del pill al borde es 18px. Al hacer scroll el header se
   embona arriba (header.scrolled → padding:0) y ahí se pega al borde a propósito. */
header{position:fixed;top:0;left:0;right:0;z-index:2200;padding:14px 18px 0;pointer-events:none;transition:padding .45s cubic-bezier(.3,.9,.3,1)}
header.scrolled{padding:0}
.nav{display:flex;align-items:center;justify-content:space-between;padding:9px 10px 9px 20px;width:100%;margin:0 auto;background:rgba(189,8,41,.94);backdrop-filter:blur(10px);border-radius:60px;box-shadow:0 10px 32px rgba(189,8,41,.4);pointer-events:auto;transition:box-shadow .35s, background .35s, border-radius .45s cubic-bezier(.3,.9,.3,1), padding .45s cubic-bezier(.3,.9,.3,1)}
header.scrolled .nav{background:rgba(141,6,32,.97);box-shadow:0 12px 36px rgba(var(--sombra-navy-rgb),.35);border-radius:0 0 22px 22px;padding:6px 10px 6px 20px}
header.scrolled .nav-logo img{height:34px}
.nav-logo img{transition:height .45s cubic-bezier(.3,.9,.3,1)}
/* ⚠️ 2026-07-29 (auditoría forense): el logo mide 89×34 y en móvil se queda por
   debajo de los 44px de alto tocables. El ::after amplía el área sin mover nada. */
.nav-logo{position:relative; display:inline-flex; align-items:center}
.nav-logo::after{content:""; position:absolute; left:0; right:0; top:50%;
                 height:44px; transform:translateY(-50%)}
/* 2026-07-23 · Carlos: el logo del pill al mismo tamaño que cuando embona (eran 40px) */
.nav-logo img{height:34px;width:auto}
.nav-der{display:flex;gap:8px;align-items:center}
/* 2026-07-23 · Carlos: botones de idioma −20% (eran 36px/12px) */
/* ⚠️ 2026-07-29 (auditoría forense): la letra iba a 10px — ilegible y por debajo
   de la norma. Sube a 12px; el círculo de 29px NO se toca (decisión de Carlos). */
.lang-btn{display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;font-family:"Oswald",sans-serif;font-size:12px;font-weight:600;letter-spacing:.5px;text-decoration:none;transition:transform .15s, background .15s, color .15s}
.lang-btn:hover{transform:scale(1.1)}
.lang-btn.activo{background:var(--amarillo);color:var(--negro)}
.lang-btn.inactivo{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45)}
.lang-btn.inactivo:hover{border-color:var(--amarillo);color:var(--amarillo)}
/* 2026-07-23 · Carlos: menú hamburguesa −15% (eran barras 28x3, gap 6, padding 8/10) */
.hamburguesa{background:none;border:none;cursor:pointer;padding:7px 8.5px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:44px}   /* auditoría forense: medía 41 de ancho */
.hamburguesa span{display:block;width:24px;height:2.5px;background:#fff;border-radius:2px;transition:transform .25s, opacity .2s}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Entrada animada del header (CSS puro, no depende de JS) */
@keyframes navCae{0%{transform:translateY(-140px) rotate(-3deg)}55%{transform:translateY(10px) rotate(.8deg)}75%{transform:translateY(-5px)}100%{transform:translateY(0)}}
@keyframes piezaPop{0%{transform:scale(0) rotate(18deg)}70%{transform:scale(1.18) rotate(-4deg)}100%{transform:scale(1) rotate(0)}}
.nav{animation:navCae .85s cubic-bezier(.3,1.2,.4,1) .2s backwards}
.nav-logo img{animation:piezaPop .55s cubic-bezier(.34,1.56,.64,1) .75s backwards}
.lang-btn.activo{animation:piezaPop .45s cubic-bezier(.34,1.56,.64,1) .95s backwards}
.lang-btn.inactivo{animation:piezaPop .45s cubic-bezier(.34,1.56,.64,1) 1.05s backwards}
.hamburguesa{animation:piezaPop .45s cubic-bezier(.34,1.56,.64,1) 1.15s backwards}

/* Drawer de navegación */
/* 2026-08-01 · el panel se desplaza hasta el final: `overscroll-behavior`
   para que el gesto no se escape a la página de detrás, y aire abajo que
   respeta la barra del navegador (safe-area) — sin él, los últimos enlaces
   quedaban debajo de la barra de Safari y no se podían tocar. */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,88vw);background:#043768;z-index:2100;transform:translateX(100%);transition:transform .35s cubic-bezier(.22,.9,.3,1);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:96px 34px calc(44px + env(safe-area-inset-bottom,0px))}
.drawer.abierto{transform:translateX(0)}
.drawer-fondo{position:fixed;inset:0;background:rgba(var(--sombra-navy-rgb),.55);z-index:2050;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-fondo.abierto{opacity:1;pointer-events:auto}
.drawer-nav{display:flex;flex-direction:column}
.d-link{display:flex;align-items:center;justify-content:space-between;color:#fff;text-decoration:none;font-family:"Oswald",sans-serif;font-weight:500;font-size:19px;text-transform:uppercase;letter-spacing:1.5px;padding:15px 0;border-bottom:1px solid #0d4a85;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;text-align:left;width:100%;transition:color .15s}
.d-link:hover{color:var(--amarillo)}
.d-flecha{font-size:14px;transition:transform .25s;color:var(--amarillo)}
.d-acordeon[aria-expanded="true"] .d-flecha{transform:rotate(180deg)}
.d-sub{max-height:0;overflow:hidden;transition:max-height .35s ease}
/* 2026-08-01 · Carlos: "el menú en móvil se traban algunas opciones".
   Eran los 900px de tope: el submenú lleva 18 enlaces y, con los nombres
   largos que caen a dos líneas, pasa de ahí — y `overflow:hidden` cortaba
   las últimas. El JS le pone ahora la altura exacta al abrir (scrollHeight);
   este valor queda de red por si el JS no carga. */
.d-sub.abierto{max-height:2200px}
.d-sub a{display:block;color:#bbb;text-decoration:none;font-family:"Museo Sans Rounded",sans-serif;font-weight:300;font-size:14px;padding:10px 0 10px 18px;border-bottom:1px solid #032b52;transition:color .15s}
.d-sub a:hover{color:var(--amarillo)}
.d-sub .d-mapa{color:var(--amarillo);font-weight:700}


/* ═════════════════ SKIP-LINK ═════════════════
   Vive FUERA de la pantalla hasta que el teclado le da el foco. Sin esta
   regla el enlace se ve como texto suelto encima del header.            */
.skip-link{position:absolute;left:-9999px;top:0;z-index:5000;background:var(--amarillo);color:var(--azul);font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:12px 20px;border-radius:0 0 12px 0;text-decoration:none;box-shadow:0 6px 18px rgba(var(--sombra-navy-rgb),.3)}
.skip-link:focus{left:0}

/* ═════════════════ TEXTO: JUSTIFICADO Y SIN VIUDAS ═════════════════ */
/* ============ TEXTO: JUSTIFICADO Y SIN PALABRAS VIUDAS ============
   Regla de Carlos (2026-07-22): NUNCA puede quedar una palabra sola en la última línea.
   Capa 1 — CSS: `text-wrap:pretty` hace que el navegador reparta la última línea.
   Capa 2 — JS (ver `sinViudas`): une las dos últimas palabras con un espacio duro, que es
   lo único que lo garantiza al 100% en cualquier ancho de pantalla. */
.welcome-text,.nachos-sub,.cmb-portada p,.cmb-m-desc,.rv-desc,.blog-sl__desc,.press p,
.combo-slide .combo-includes .ci-txt,.loc-m-sub{
  text-wrap:pretty;hyphens:none}
/* copys de bloque: justificados a ambos lados */
.nachos-sub{text-align:justify}
/* los centrados se justifican pero dejan la última línea centrada (si no, se descuadra) */
.welcome-text,.cmb-portada p,.cmb-m-desc{text-align:justify;text-align-last:center}


/* ═════════════════ FOOTER ═════════════════ */
/* ============ FOOTER ============ */
footer{background:#DA1931;color:#fff;padding:0}
.foot-red{padding:46px 20px 38px}
.foot-plate{position:relative;max-width:1300px;margin:0 auto;border:1px solid rgba(255,255,255,.5);padding:54px 34px 34px}
.foot-anderson{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:#DA1931;padding:2px 26px;line-height:0}
.foot-anderson img{height:58px;width:auto;display:block;filter:brightness(0) invert(1)}
.foot-brands{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px}
.foot-brands>a{display:contents}
.foot-brands img{flex:0 0 auto;max-height:32px;max-width:50px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;transition:opacity .2s,transform .2s}
.foot-brands a:hover img,.foot-brands img:hover{opacity:1;transform:translateY(-2px)}
.foot-legal{background:#c11429;color:rgba(255,255,255,.82);padding:15px 24px}
.foot-legal-inner{max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.foot-copy{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.foot-legal-inner a{color:rgba(255,255,255,.82);text-decoration:none;margin:0 8px}
.foot-legal-inner a:hover{color:#fff}
.foot-legal .foot-social{display:flex;gap:10px}
.foot-legal .foot-social a{width:30px;height:30px;border-radius:50%;border:1.4px solid rgba(255,255,255,.4);display:grid;place-items:center;color:#fff;transition:.2s}
.foot-legal .foot-social a:hover{background:#fff;color:#DA1931;border-color:#fff}
.foot-legal .foot-social svg{width:14px;height:14px}
@media(max-width:960px){.foot-brands{flex-wrap:wrap;justify-content:center;gap:16px 20px}.foot-brands img{max-height:26px;max-width:42px}}
@media(max-width:700px){.foot-plate{padding:46px 18px 26px}.foot-anderson img{height:46px}.foot-legal-inner{flex-direction:column;text-align:center}}


/* ═════════════════ EFECTOS BASE (reveal + keyframes) ═════════════════ */
/* ============ EFECTOS ============ */
/* Reveal al hacer scroll */
.reveal{opacity:0;transform:translateY(46px);transition:opacity .8s cubic-bezier(.22,.9,.3,1),transform .8s cubic-bezier(.22,.9,.3,1)}
.reveal.visible{opacity:1;transform:none}

/* Hero: zoom lento del video + entrada del título */

@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes subir{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}


/* ═════════════════ BANDA ROJA «WELCOME» (rana + título) ═════════════════ */
/* ============ WELCOME ============ */
/* z-index 4: la banda roja pasa POR DELANTE de la lata de Nachos, que emerge desde detrás */
.welcome{position:relative;z-index:4;color:#fff;padding:60px 0;overflow:hidden;
  background:
    radial-gradient(900px 520px at 82% -12%, rgba(255,255,255,.08), transparent 62%),
    radial-gradient(760px 480px at 12% 118%, rgba(var(--sombra-navy-rgb),.22), transparent 60%),
    var(--rojo)}
/* textura de marca real (doodles en contorno) sobre el rojo */
.welcome::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/welcome-pattern.png") center 0/880px auto repeat;
  opacity:.15;mix-blend-mode:multiply}
/* La rana y el título van PEGADOS, como un solo logotipo, y el conjunto se centra. */
.welcome-inner{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 24px;text-align:center;
  clip-path:inset(0 0 0 0)}
.welcome-head{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,22px)}
.welcome-head .welcome-title{margin-bottom:0;text-align:left}
.welcome-rana{width:clamp(76px,9vw,132px);height:auto;display:block;flex:none;
  filter:drop-shadow(0 12px 22px rgba(2,10,40,.35));will-change:transform}
.welcome-title{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(30px,4.8vw,62px);line-height:1.03;letter-spacing:.5px;margin-bottom:28px;text-shadow:2px 2px 0 rgba(var(--sombra-navy-rgb),.18)}
.welcome-title .line{display:block;clip-path:inset(-0.22em 0 0 0);will-change:clip-path,transform}  /* -0.22em: la tilde de la Ñ se cortaba */
.welcome-text{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;font-size:clamp(15px,1.55vw,19px);line-height:1.55;max-width:660px;margin:20px auto 0;color:rgba(255,255,255,.92)}

/* ═════════════════ NORMA MÓVIL (aprobada por Carlos) + inputs iOS ═════════════════ */
/* 📱 NORMA MÓVIL — 2026-07-23 · Carlos aprobó el contenedor rojo (#welcome) como
   la referencia: "tamaño, márgenes, distancia, interlineado y margen de borde
   están perfectos". Medido sobre él a 390px:
        aire lateral 24px (342 de 390) · texto 15px · interlineado 1.55 · justificado
   Este bloque va AL FINAL del CSS a propósito: gana por orden de cascada, y todo
   vive dentro de @media (max-width:900px) → ESCRITORIO NO SE TOCA.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  :root{ --m-aire:24px; --m-fs:15px; --m-lh:1.55; }

  /* ── AIRE LATERAL: el contenedor común pasa de 20px a los 24px de la norma ── */
  .wrap{ padding-inline:var(--m-aire); }

  /* ── El aire lo pone UN SOLO contenedor. Estos sumaban el suyo encima y dejaban
       el texto a 36-60px del borde en vez de a 24. ── */
  #nachos{ padding-inline:0; }               /* 18 + 24 = 42 → ahora 24 */
  .yardas-txt{ margin-inline:0; padding-inline:0; max-width:100%; }  /* tenía max-width:92% → quedaba a 40px */
  /* ⛔ 2026-08-01 · aquí vivía `#yardas{overflow-x:clip}` (el DUPLICADO: también
     estaba en locacion.css). En Safari iOS un ancestro con overflow recortado
     hace que el sticky de dentro se pegue AL ANCESTRO, no a la pantalla: el
     brindis nunca se enganchaba en el iPhone. El sobrante del texto rotado lo
     recorta ahora .yardas__pega{overflow:hidden}, que está POR DEBAJO del
     sticky y no le afecta. */
  .loc-m{ padding-inline:0; }                /* el .wrap ya da los 24 (eran 48) */
  /* 2026-08-01 · acotado a la HOME. El bloque de blog de la LOCACIÓN usa el
     mismo id="blog" y se estaba comiendo estos 12px: por eso su fondo azul
     no llegaba a los bordes y quedaba una franja blanca a cada lado. Aquí el
     contenedor es rojo y flotante (lo pidió Carlos el 2026-07-23); allí va a
     sangre. Mismo id, dos componentes distintos. */
  #blog:not(.lblog){ margin-inline:12px; }
  .blog-sl__inner{ padding-inline:12px; }    /* 12 del float + 12 = 24px al contenido (la norma) */

  /* ── NACHOS ── heredaba el margin-left:-35px de escritorio (regla de la línea 225)
       y se salía 17px por la izquierda: el párrafo aparecía cortado ("scover a
       Mexican food…"). Se neutraliza y se le da el aire de la norma. */
  .nachos-text{ margin-left:0; margin-right:0; width:100%; max-width:100%;
                box-sizing:border-box; padding-inline:var(--m-aire); }
  .nachos-sub{ max-width:100%; font-size:var(--m-fs); line-height:var(--m-lh);
               text-align:justify; }

  /* 2026-08-01 · Carlos: el título de bienvenida iba a la IZQUIERDA y en
     locaciones de nombre largo (Fort Lauderdale) rompía en 4 líneas. En móvil
     va centrado; la talla la ajusta el JS para que cada línea del cartel
     quepa entera (mismo patrón que el cartel de nachos). */
  .welcome-head .welcome-title{text-align:center}

  /* ── ÚLTIMA LÍNEA CENTRADA ── Carlos, 2026-07-23: "aunque los párrafos estén justificados
       la última línea va en medio, como en el párrafo rojo". El rojo (.welcome-text) ya lo
       hacía en la línea 172; estos párrafos se habían quedado fuera de esa regla. */
  /* 2026-07-23 · Carlos: .rv-desc sale de aquí (2 líneas → centrado, el justificado la estiraba) */
  .nachos-sub,.blog-sl__desc,.press p,.press .sec-sub{
    text-align:justify; text-align-last:center; text-wrap:pretty; }

  /* ── YARDAS ── el claim iba a 13px con interlineado 16px, muy por debajo ── */
  .yardas-title,.yardas-sub{ box-sizing:border-box; padding-inline:var(--m-aire); }
  /* 2026-07-23 · Carlos: más interlineado para la 2a linea del titulo (el line-height .86 del
     título las dejaba encimadas: separación de -11px). */
  .yt-2{margin-top:.42em}
  .yardas-sub{ font-size:var(--m-fs); line-height:var(--m-lh); }


  /* ── COMBOS ── los encabezados iban pegados al borde (0px de aire) y el
       carrusel arrancaba desalineado respecto al título. */
  .cmb-m-desc{ font-size:var(--m-fs); line-height:var(--m-lh);
               padding-inline:var(--m-aire); max-width:none; }
  .cmb-m-track{ padding-inline:var(--m-aire); }

  /* ── BLOG ── la bajada no seguía la norma (el h2 va oculto a propósito para
       lectores de pantalla: el título visual es la imagen frogs-news.png) ── */
  .blog-sl__desc{ font-size:var(--m-fs); line-height:var(--m-lh); }

  /* ── PRESS ── la bajada iba a 17px sin interlineado definido ── */
  .press .sec-sub{ display:none }   /* 2026-07-23 · Carlos: fuera la descripción de Press en móvil */
}

/* ── 📱 CAMPOS DEL FORMULARIO EN iOS (2026-07-23 · Carlos: "estos inputs se sobresalen") ──
   Safari/iOS da a input[type=date] y a los select un ANCHO INTRÍNSECO propio que ignora
   width:100%. En Chrome se ven bien; en el iPhone la fecha se salía de la tarjeta blanca y
   además su texto salía centrado en vez de a la izquierda. Esto los obliga a comportarse. */
.resv-bar input,.resv-bar select,.resv-bar button,.resv-field input,.resv-field select{
  -webkit-appearance:none; appearance:none;
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.resv-bar input[type="date"]{ text-align:left; }
.resv-bar input[type="date"]::-webkit-date-and-time-value{ text-align:left; margin:0; }
.resv-bar input[type="date"]::-webkit-datetime-edit{ padding:0; }
.resv-bar input[type="date"]::-webkit-calendar-picker-indicator{ margin-inline-start:auto; }
.resv-field{ min-width:0; 
}          /* un hijo flex/grid no se encoge por debajo de su contenido sin esto */

/* ═════════════════ 📱 TOCABLES DEL HEADER Y EL PIE ═════════════════
   Auditoría 2026-07-23, ya aprobada en la home. Va al FINAL para ganar
   por cascada (ley C).
   ⚠️ Los .lang-btn quedan en 35px por decisión expresa de Carlos
   ("botones de idioma −20%"): es diseño aprobado, no un defecto.      */
@media (max-width:900px){
  /* ⚠️ 2026-07-29 (auditoría forense): medía 35×35, por debajo de los 44px de la
     ley. Se ve igual y ahora se puede pulsar sin apuntar. */
  /* letra a 13px = la norma de botones en móvil; el círculo de 35px se queda */
  .lang-btn{width:35px;height:35px;font-size:13px; position:relative}
  .lang-btn::after{content:""; position:absolute; inset:-4.5px}
  .hamburguesa{min-height:44px}
  .d-sub a{min-height:46px;display:flex;align-items:center}
  .d-link{min-height:46px;display:flex;align-items:center}
  /* 2026-07-28 · auditoría móvil: 'Privacy' y 'Terms' medían 41px de alto,
     3px por debajo de la norma. min-height los deja en 44 exactos. */
  .foot-legal-inner a{padding:12px 0;display:inline-flex;align-items:center;min-height:44px}
  .foot-legal .foot-social a{width:44px;height:44px}
  .foot-legal small{font-size:12px}
}

/* ═════════════════ 🍽️ MODAL DE RESERVA (widget OpenTable) ═════════════════
   Carlos 2026-07-28: todo "Book your table" abre este modal y la locación se
   elige DENTRO del widget. Vive en el pie → existe en todas las páginas.
   ⛔ Nada de negro: el velo es navy de marca (ley A).                        */
.rsv{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,32px)}
.rsv[hidden]{display:none}
.rsv-fondo{position:absolute;inset:0;background:rgba(3,35,71,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .26s ease}
.rsv.visible .rsv-fondo{opacity:1}

.rsv-panel{position:relative;z-index:1;width:min(940px,100%);max-height:88svh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;border-radius:24px;padding:clamp(24px,3vw,38px) clamp(18px,3vw,38px) clamp(22px,3vw,34px);
  /* ⛔ 2026-07-28 · Carlos: "no quiero ningún card con esto, esas líneas no deben
     estar en ninguna página" → fuera el filete de color en el borde superior.
     Llevaba: border-top:5px solid var(--amarillo) */
  box-shadow:0 30px 70px rgba(3,35,71,.45);
  transform:translateY(18px) scale(.98);opacity:0;
  transition:transform .3s cubic-bezier(.22,.9,.3,1),opacity .26s ease}
.rsv.visible .rsv-panel{transform:none;opacity:1}

.rsv-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(3,35,71,.18);background:#fff;color:var(--azul);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
.rsv-x:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.rsv-x:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}
.rsv-x svg{width:20px;height:20px;pointer-events:none}

/* 2026-07-28 · Carlos: "el título está mal, debe estar al centro".
   ⚠️ El margen derecho de 44px era para no pasar por debajo del botón de
   cerrar; centrado hace falta el MISMO aire a los dos lados o el texto
   queda desplazado a la izquierda. */
.rsv-titulo{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--azul);font-size:clamp(24px,3.2vw,38px);
  margin:0 44px 6px;line-height:1.05;text-align:center}
.rsv-bajada{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:rgba(3,35,71,.72);font-size:15px;margin:0 0 14px;text-align:center}

/* 2026-07-28 · Carlos: "tiene mucho espacio abajo".
   El iframe de OpenTable reserva MUCHO más alto del que usa (deja sitio por si
   se abre un desplegable). Se acota con una variable y el contenedor recorta
   lo que sobra. ⚠️ Si un desplegable se viera cortado, SUBIR --rsv-alto: es
   una perilla, no un número escondido. */
/* ── el formulario: barra de marca, sin iframe (ver modal-reserva.php) ── */
.rsv-form{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1fr auto;gap:10px;align-items:end;
  margin:4px 0 0}
.rsv-campo{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;text-align:left}
.rsv-campo>span{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;
  font-size:11px;font-weight:600;color:var(--azul)}
.rsv-campo select,.rsv-campo input{
  font-family:"Museo Sans Rounded",sans-serif;font-size:15px;color:var(--azul);
  padding:0 12px;height:48px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  border:1.5px solid rgba(3,35,71,.18);border-radius:12px;background:#fff;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23043768' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:17px;
  padding-right:32px}
.rsv-campo input[type="date"]{background-image:none;padding-right:12px}
.rsv-campo select:focus,.rsv-campo input:focus{outline:none;border-color:var(--rojo)}
.rsv-campo select:focus-visible,.rsv-campo input:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}

.rsv-go{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  font-size:15px;color:#fff;background:var(--rojo);border:none;border-radius:12px;
  height:48px;padding:0 26px;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 0 var(--rojo-osc);transition:transform .15s,background .15s}
.rsv-go:hover{background:var(--rojo-hover);transform:translateY(-2px)}
.rsv-go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--rojo-osc)}
.rsv-go:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

.rsv-aviso{font-family:"Museo Sans Rounded",sans-serif;font-size:13.5px;color:var(--rojo);
  margin:12px 0 0;text-align:center}
.rsv-aviso[hidden]{display:none}
.rsv-pie{font-family:"Museo Sans Rounded",sans-serif;font-size:12.5px;
  color:rgba(3,35,71,.55);margin:14px 0 0;text-align:center}

/* ── PASO 2 · SOLO el resultado, como en el sitio original ──────────────
   Carlos (2026-07-28): "no me gustan los resultados así, debe ser así… o sea
   como el resultado del overlay pero SIN lo otro que tenemos nosotros arriba".
   Al buscar desaparece TODO lo nuestro (título, bajada, motor, pie) y el
   overlay se queda sólo con el widget de OpenTable y la X. Igual que hoy.
   ⚠️ Y el panel se AJUSTA al ancho del contenido de OpenTable (~760px): con
   1180px quedaban dos bandas grises a los lados — era eso lo que se veía mal. */
.rsv-resultado[hidden]{display:none}
.rsv-marco{height:min(88svh,900px);overflow:hidden;background:#fff}
.rsv-marco iframe{width:100%;height:100%;border:0;display:block}

.rsv.en-resultado{padding:clamp(10px,2.4vh,26px)}
.rsv.en-resultado .rsv-panel{width:min(780px,100%);max-height:94svh;padding:0;overflow:hidden;
  border-radius:20px}
/* fuera todo lo nuestro: el overlay es del widget */
.rsv.en-resultado .rsv-titulo,
.rsv.en-resultado .rsv-bajada,
.rsv.en-resultado .rsv-form,
.rsv.en-resultado .rsv-aviso,
.rsv.en-resultado .rsv-pie,
.rsv.en-resultado .rsv-volver{display:none}
/* la X flota sobre el widget, con su propio fondo para que siempre se lea */
.rsv.en-resultado .rsv-x{top:10px;right:10px;background:rgba(255,255,255,.94);
  box-shadow:0 4px 14px rgba(3,35,71,.22);z-index:5}

@media (max-width:900px){
  .rsv.en-resultado{padding:0}
  .rsv.en-resultado .rsv-panel{max-height:100svh;border-radius:0}
  .rsv-marco{height:100svh}
}

body.rsv-abierto{overflow:hidden}

@media (max-width:900px){
  .rsv{padding:0;align-items:flex-end}
  .rsv-panel{width:100%;max-height:92svh;border-radius:24px 24px 0 0;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .rsv-bajada{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)}
  /* una columna: los 4 campos y el botón, cada uno a ancho completo */
  .rsv-form{grid-template-columns:1fr;gap:12px}
  .rsv-go{width:100%;font-size:13px;height:50px}
  .rsv-campo select,.rsv-campo input{height:50px}
}
@media (prefers-reduced-motion:reduce){
  .rsv-fondo,.rsv-panel{transition:none}
}

/* ═════ COMBO FROG'S en el menú (2026-07-28) ═════
   Sólo se pinta en las unidades que venden online (ver url_experiencias()).
   Va en amarillo y con el icono de "abre fuera", porque sale a la tienda. */
.d-link--combo{color:var(--amarillo);gap:10px}
.d-link--combo:hover{color:#fff}
.d-ext{width:15px;height:15px;flex:0 0 auto;opacity:.75}

/* ⚠️ 2026-07-29 (auditoría forense) · Los enlaces legales del pie medían 41px de
   alto en móvil: por debajo de los 44 de la ley. Sólo se toca el móvil. */
@media (max-width:900px){
  .foot-copy a{min-height:44px; display:inline-flex; align-items:center; padding-inline:2px}
}