/* ============================================================
   PAN Y CANELA – Estilos principales
   ============================================================ */

/* ---- Variables ---- */
:root {
  --blue:       #0e2c6e;
  --blue-mid:   #1a3f8f;
  --blue-light: #2756c4;
  --gold:       #c89b3c;
  --gold-light: #e8b84b;
  --cream:      #faf7f0;
  --warm-white: #fff9f2;
  --dark:       #111827;
  --text:       #374151;
  --text-light: #6b7280;
  --border:     #e5e7eb;
  --radius:     12px;
  --radius-lg:  20px;
  --shadow:     0 4px 24px rgba(14,44,110,.10);
  --shadow-md:  0 8px 40px rgba(14,44,110,.15);
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Poppins', sans-serif; color: var(--text); background: var(--warm-white); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* Interacción táctil: elimina el delay de 300ms y muestra feedback al pulsar */
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Foco visible para navegación por teclado */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---- Utilities ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.section-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.section-eyebrow.center, .section-title.center, .section-sub.center { text-align: center; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--dark); line-height: 1.2; margin-bottom: 1rem; }
.section-title.center::after {
  content: ''; display: block; width: 52px; height: 3px; border-radius: 2px;
  background: var(--gold); margin: .85rem auto 0;
}
.section-sub { font-size: 1.05rem; color: var(--text-light); max-width: 600px; margin: 0 auto 3rem; }

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gold); color: #fff; font-weight: 600;
  padding: .85rem 2rem; border-radius: 50px;
  transition: var(--transition); box-shadow: 0 4px 20px rgba(200,155,60,.4);
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,155,60,.5); }
.btn-primary:active, .btn-outline:active, .btn-nav:active { transform: scale(.96); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: #fff; font-weight: 600;
  padding: .85rem 2rem; border-radius: 50px; border: 2px solid rgba(255,255,255,.5);
  transition: var(--transition);
}
.btn-outline:hover { background: rgba(255,255,255,.15); border-color: #fff; }

.btn-nav {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gold); color: #fff; font-size: .85rem; font-weight: 600;
  padding: .55rem 1.2rem; border-radius: 50px;
  transition: var(--transition);
}
.btn-nav:hover { background: var(--gold-light); transform: translateY(-1px); }

/* Compensar la barra de navegación fija en los saltos de ancla */
section[id] { scroll-margin-top: 80px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  padding: 1.2rem 0;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.navbar.scrolled {
  background: rgba(14,44,110,.97);
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
  padding: .8rem 0;
  backdrop-filter: blur(12px);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; gap: 2rem;
}
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 800; color: #fff;
  white-space: nowrap;
}
.logo-pan   { color: #fff; }
.logo-amp   { color: rgba(255,255,255,.6); }
.logo-canela { color: var(--gold-light); }

.nav-links { display: flex; align-items: center; gap: 2rem; margin-left: auto; }
.nav-links a {
  font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.85);
  position: relative; transition: color var(--transition);
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--gold-light);
  transition: width var(--transition);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; }

.burger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; margin-left: auto;
  min-width: 44px; min-height: 44px; /* touch target accesible */
}
.burger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: var(--transition); }

/* ============================================================
   HERO
   ============================================================ */
/* La portada tenía altura FIJA (100svh) con overflow:hidden, y su contenido
   mide unos 640px. En una ventana de portátil sin maximizar (600-665px de
   alto) el contenido no cabía: se salía por arriba, se metía debajo de la
   barra fija y los botones se cortaban por abajo.
   Ahora la altura es un mínimo, no un tope: si el contenido necesita más
   sitio, la portada crece. Y se reserva arriba el hueco de la barra. */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  padding-top: 5.5rem;          /* la barra fija ocupa unos 78px */
  padding-bottom: 2rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  animation: heroFade .8s ease forwards;
}
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(4,12,30,.82) 0%,
    rgba(6,18,45,.70) 35%,
    rgba(6,18,45,.72) 65%,
    rgba(4,12,30,.88) 100%);
}
.hero-content {
  position: relative; z-index: 1; text-align: center;
  padding: 0 1.5rem; max-width: 800px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-light);
  margin-bottom: 1.25rem;
  padding: .5rem 1.2rem; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.5rem, 10vw, 7rem);
  font-weight: 800; line-height: 1; margin-bottom: 1.5rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.8), 0 6px 30px rgba(0,0,0,.5);
  filter: drop-shadow(0 0 20px rgba(0,0,0,.4));
}
.hero-pan    { color: #fff; display: block; }
.hero-y      { font-size: .5em; color: rgba(255,255,255,.85); }
.hero-canela { color: var(--gold-light); display: block; }
.hero-sub {
  font-size: 1.15rem; color: rgba(255,255,255,.92); margin-bottom: 2.5rem; line-height: 1.7;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.6); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.3); }
}

/* ============================================================
   NOVEDADES STRIP  (justo después del hero)
   ============================================================ */
.novedades {
  background: var(--blue);
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.novedades::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}
.nov-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2rem;
}
.nov-label {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 700; color: #fff;
}
.nov-label::before {
  content: '';
  display: inline-block; width: 6px; height: 28px;
  background: var(--gold-light); border-radius: 3px;
}
.nov-more {
  font-size: .85rem; font-weight: 600; color: var(--gold-light);
  display: flex; align-items: center; gap: .3rem;
  transition: gap var(--transition);
}
.nov-more:hover { gap: .6rem; }

.nov-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem;
}

/* CTA social dentro de novedades */
.nov-social { text-align: center; margin-top: 2.5rem; }
.nov-social p { color: rgba(255,255,255,.7); font-size: .95rem; margin-bottom: 1.25rem; }
.nov-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 1.5rem;
  transition: var(--transition);
  position: relative; overflow: hidden;
}
.nov-card::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--gold-light);
  opacity: 0;
  transition: opacity var(--transition);
}
.nov-card:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.nov-card:hover::after { opacity: 1; }
.nov-card-top {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem;
}
.nov-badge {
  min-width: 48px; height: 48px;
  background: rgba(255,255,255,.1); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 4px;
}
.nov-badge .nd { font-size: .58rem; font-weight: 700; color: var(--gold-light); text-transform: uppercase; }
.nov-badge .nm { font-size: .65rem; font-weight: 600; color: #fff; text-align: center; line-height: 1.1; text-transform: uppercase; }
.nov-card h3 { font-size: .97rem; font-weight: 600; color: #fff; margin: 0; }
.nov-card p  { font-size: .83rem; color: rgba(255,255,255,.65); line-height: 1.55; margin-top: .4rem; }
.nov-empty { color: rgba(255,255,255,.5); font-size: .9rem; text-align: center; padding: 2rem 0; }

@media (max-width: 768px) {
  .nov-grid { grid-template-columns: 1fr; }
  .nov-label { font-size: 1.3rem; }
}

/* ============================================================
   BANNER PROMOCIONAL FLOTANTE
   ============================================================ */
.promo-banner {
  position: fixed;
  bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 950;
  width: calc(100% - 3rem); max-width: 720px;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  animation: bannerSlide .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bannerSlide {
  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.promo-banner.hiding {
  animation: bannerHide .35s cubic-bezier(.55,0,1,.45) forwards;
}
@keyframes bannerHide {
  to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}
/* Fondo con foto */
.promo-banner-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.promo-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(4,12,30,.88) 0%, rgba(14,44,110,.78) 55%, rgba(4,12,30,.88) 100%);
}
.promo-banner-overlay.no-foto {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #0c1f4a 0%, #1e3a8a 50%, #7c2d12 100%);
}
/* Contenido */
.promo-banner-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem 1rem 1.5rem; flex-wrap: wrap;
}
.promo-banner-texts { flex: 1; min-width: 0; }
.promo-banner-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 700;
  color: #fff; line-height: 1.25; margin: 0 0 .2rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.promo-banner-text {
  font-size: .83rem; color: rgba(255,255,255,.82);
  line-height: 1.45; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.promo-banner-cta {
  flex-shrink: 0;
  display: inline-block; padding: .55rem 1.4rem;
  background: var(--gold); color: #fff;
  font-weight: 700; font-size: .85rem; letter-spacing: .03em;
  border-radius: 50px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 3px 12px rgba(232,184,75,.4);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.promo-banner-cta:hover { background: var(--gold-light); transform: translateY(-1px); }
.promo-banner-close {
  flex-shrink: 0;
  background: rgba(255,255,255,.12); border: none; cursor: pointer;
  color: rgba(255,255,255,.7); font-size: 1.1rem; line-height: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.promo-banner-close:hover { background: rgba(255,255,255,.25); color: #fff; }
/* Franja de color dorado en el borde izquierdo */
.promo-banner::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--gold); z-index: 3;
}
@media (max-width: 600px) {
  .promo-banner { bottom: 1rem; width: calc(100% - 2rem); border-radius: 14px; }
  .promo-banner-text { display: none; }
  .promo-banner-inner { padding: .85rem 1rem; }
}

/* ============================================================
   HIGHLIGHTS
   ============================================================ */
.highlights {
  background: var(--blue);
  padding: 4rem 0;
}
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius);
  overflow: hidden;
}
.highlight-card {
  background: rgba(255,255,255,.05);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: background var(--transition);
}
.highlight-card:hover { background: rgba(255,255,255,.10); }
.hl-icon { display: flex; justify-content: center; margin-bottom: 1.1rem; color: var(--gold-light); }
.hl-icon svg { width: 38px; height: 38px; }
.highlight-card h3 { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: .5rem; }
.highlight-card p { font-size: .9rem; color: rgba(255,255,255,.65); line-height: 1.5; }

/* ============================================================
   NOSOTROS
   ============================================================ */
.nosotros { padding: 6rem 0; background: var(--cream); }
.nosotros-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.nosotros-imgs { position: relative; }
.nos-img-main {
  width: 100%; height: 420px; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.nos-img-side {
  position: absolute; bottom: -2rem; right: -2rem;
  width: 200px; height: 200px; object-fit: cover;
  border-radius: var(--radius); border: 4px solid #fff;
  box-shadow: var(--shadow-md);
}
.nosotros-text h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--dark); margin-bottom: 1.5rem; }
.nosotros-text p { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; }
.nos-stats { display: flex; gap: 2.5rem; margin-top: 2.5rem; }
.stat strong { display: block; font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--blue); }
.stat span { font-size: .85rem; color: var(--text-light); }

/* ============================================================
   CARTA
   ============================================================ */
.carta { padding: 6rem 0; background: var(--warm-white); }

/* Layout sidebar + contenido */
.carta-layout { display: flex; gap: 0; align-items: flex-start; }

.carta-sidebar {
  width: 210px; flex-shrink: 0;
  position: sticky; top: 100px;
  border-right: 2px solid var(--border);
  padding-right: 0;
  max-height: calc(100vh - 140px); overflow-y: auto;
}
.sec-nav-btn {
  display: block; width: 100%; text-align: left;
  padding: .7rem 1.25rem; background: transparent;
  border: none; border-left: 3px solid transparent;
  cursor: pointer; font-family: 'Poppins', sans-serif;
  font-size: .88rem; font-weight: 500; color: var(--text-light);
  transition: var(--transition); border-radius: 0 8px 8px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sec-nav-btn:hover { color: var(--blue); background: rgba(14,44,110,.05); border-left-color: var(--border); }
.sec-nav-btn.active { color: var(--blue); font-weight: 600; background: rgba(14,44,110,.07); border-left-color: var(--gold); }

.carta-main { flex: 1; min-width: 0; padding-left: 2.5rem; }

/* Título de sección dentro del contenido */
.carta-section-titulo {
  font-family: 'Playfair Display', serif; font-size: 1.55rem; font-weight: 700;
  color: var(--dark); margin-bottom: 1.5rem; padding-bottom: .65rem;
  border-bottom: 2px solid var(--gold); display: flex; align-items: center; gap: .6rem;
}
.carta-section-count {
  font-family: 'Poppins', sans-serif; font-size: .78rem; font-weight: 500;
  color: var(--text-light); margin-left: auto;
}

/* Paneles */
.tab-panel { display: none; animation: fadeIn .3s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.mi-badge {
  display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; background: var(--gold); color: #fff;
  padding: .2rem .6rem; border-radius: 4px; margin-bottom: .5rem;
}
.mi-info h4 { font-size: .95rem; font-weight: 600; color: var(--dark); margin-bottom: .25rem; }
.mi-info p { font-size: .82rem; color: var(--text-light); line-height: 1.4; }

/* Menu list (rendered from JSON) */
/* Lista estilo carta de restaurante */
.menu-list { list-style: none; display: flex; flex-direction: column; }
.menu-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px dashed rgba(0,0,0,.09);
  transition: background .15s;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: rgba(14,44,110,.02); border-radius: 6px; }
.menu-item-foto {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.menu-item-foto img { width: 100%; height: 100%; object-fit: cover; }
.menu-item-info { flex: 1; min-width: 0; }
.menu-item-header { display: flex; align-items: baseline; gap: .5rem; }
.menu-item-name { font-weight: 600; color: var(--dark); font-size: .95rem; }
/* Línea punteada entre nombre y precio */
.menu-item-dots {
  flex: 1; border-bottom: 1.5px dotted rgba(0,0,0,.2);
  margin: 0 .4rem; align-self: flex-end; margin-bottom: .22em; min-width: 12px;
}
.menu-item-price { font-weight: 700; color: var(--blue-dark); font-size: .95rem; white-space: nowrap; flex-shrink: 0; }
.menu-item-desc { font-size: .8rem; color: var(--text-light); line-height: 1.4; margin: .2rem 0 0; font-style: italic; }
.menu-badge {
  display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .12rem .5rem; border-radius: 4px;
  vertical-align: middle; flex-shrink: 0;
}
.badge-firma    { background: var(--gold); color: #fff; }
.badge-especial { background: var(--blue); color: #fff; }
.badge-nuevo    { background: #16a34a; color: #fff; }

/* ============================================================
   GALERIA
   ============================================================ */
.galeria { padding: 6rem 0; background: var(--dark); }
.galeria .section-eyebrow, .galeria .section-title { color: #fff; text-align: center; }
.galeria .section-title { margin-bottom: 2.5rem; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 6px;
  margin-top: 2.5rem;
}
.gallery-item:first-child  { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(5) { grid-column: span 2; }

.gallery-item {
  position: relative; overflow: hidden; cursor: pointer;
  background: #000;
}
.gallery-item img {
  width: 100%; height: 300px; object-fit: cover;
  transition: transform .5s ease, opacity .3s ease;
}
.gallery-item:first-child img { height: 606px; }
.gallery-overlay {
  position: absolute; inset: 0;
  background: rgba(14,44,110,.65);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--transition);
}
.gallery-overlay span { color: #fff; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; }
.gallery-item:hover img { transform: scale(1.05); opacity: .8; }
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* Lightbox */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.92);
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.15); border: none;
  color: #fff; cursor: pointer; border-radius: 50%;
  width: 48px; height: 48px; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.3); }
.lb-close { top: 1.5rem; right: 1.5rem; }
.lb-prev  { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 1.5rem; top: 50%; transform: translateY(-50%); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto { padding: 6rem 0; background: var(--warm-white); }
.contacto-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; margin-top: 3rem; }
.contacto-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-block { display: flex; gap: 1.25rem; align-items: flex-start; }
.cb-icon { width: 48px; height: 48px; background: rgba(14,44,110,.08); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue); }
.cb-icon svg { width: 22px; height: 22px; }
.contact-block h4 { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); margin-bottom: .25rem; }
.contact-block p, .contact-block a { font-size: 1rem; color: var(--dark); font-weight: 500; }
.contact-block a:hover { color: var(--blue); }
.cb-note { font-size: .8rem !important; color: var(--text-light) !important; font-weight: 400 !important; }
.contacto-socials { display: flex; gap: 1rem; padding-top: .5rem; }
.cs-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 500; color: var(--text-light);
  padding: .5rem .9rem; border-radius: 50px; border: 1px solid var(--border);
  transition: var(--transition);
}
.cs-link:hover { color: var(--blue); border-color: var(--blue); }
.contacto-mapa iframe { border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--blue); padding: 4rem 0 2rem; }
.footer-inner { display: flex; gap: 3rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 3rem; }
.footer-brand .logo-pan { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #fff; font-weight: 800; }
.footer-brand .logo-canela { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--gold-light); font-weight: 800; }
.footer-brand .logo-amp { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: rgba(255,255,255,.5); }
.footer-brand p { font-size: .85rem; color: rgba(255,255,255,.5); margin-top: .5rem; line-height: 1.8; }
.footer-links { display: flex; flex-direction: column; gap: .75rem; }
.footer-links a { font-size: .9rem; color: rgba(255,255,255,.6); transition: color var(--transition); }
.footer-links a:hover { color: var(--gold-light); }
.footer-social { display: flex; gap: 1rem; align-items: center; }
.footer-social a { color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer-social a:hover { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; text-align: center; }
.footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.35); }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.whatsapp-float {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
  width: 56px; height: 56px;
  background: #25d366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: var(--transition);
  animation: waPulse 3s ease-in-out infinite;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.6); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.45); }
  50% { box-shadow: 0 4px 32px rgba(37,211,102,.75), 0 0 0 8px rgba(37,211,102,.10); }
}

/* ============================================================
   UTILIDADES — estado abierto, buscador, compartir, pedir
   ============================================================ */
.hero-status {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1.15rem; border-radius: 50px;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  background: rgba(255,255,255,.94); color: var(--dark);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  margin-bottom: 1.6rem;
}
.hero-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; flex-shrink: 0; }
.hero-status.abierto .hero-status-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); animation: statusPulse 2s ease-in-out infinite; }
.hero-status.cerrado .hero-status-dot { background: #dc2626; }
.hero-status.abierto { color: #15803d; }
.hero-status.cerrado { color: #b91c1c; }
@keyframes statusPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.estado-hoy.abierto { color: #15803d !important; font-weight: 600 !important; }
.estado-hoy.cerrado { color: #b91c1c !important; font-weight: 600 !important; }

/* Carta: buscador y compartir */
.carta-herramientas {
  max-width: 720px; margin: 0 auto 2.25rem;
  display: flex; gap: .75rem; align-items: stretch;
}
.carta-buscador { position: relative; flex: 1; }
.carta-buscador svg {
  position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-light); pointer-events: none;
}
#carta-buscador {
  width: 100%; padding: .8rem 1.1rem .8rem 2.75rem;
  border: 1.5px solid var(--border); border-radius: 50px;
  font: inherit; font-size: .92rem; color: var(--dark); background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none; -webkit-appearance: none;
}
#carta-buscador::placeholder { color: var(--text-light); }
#carta-buscador:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(200,155,60,.18);
}
.btn-compartir-carta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gold); color: #fff; font-weight: 600; font-size: .9rem;
  padding: .8rem 1.4rem; border: none; border-radius: 50px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(200,155,60,.35);
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap; font-family: inherit;
}
.btn-compartir-carta:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-compartir-carta:active { transform: scale(.97); }
.btn-compartir-carta svg { width: 16px; height: 16px; }

/* Pedir por WhatsApp en cada plato
   Estilo neutro de buena marca: verde WhatsApp sólido con texto blanco.
   Se ve igual de bien en todos los temas (claro y oscuro). */
.menu-item-acciones { margin-top: .5rem; }
.menu-item-pedir {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700; color: #fff;
  padding: .38rem .9rem; border-radius: 50px;
  background: #25d366; border: none;
  box-shadow: 0 2px 8px rgba(37,211,102,.30);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.menu-item-pedir svg { width: 13px; height: 13px; }
.menu-item-pedir:hover { background: #1eb858; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,211,102,.40); }
.menu-item-pedir:active { transform: scale(.96); }
html.tema-5 .menu-item-pedir { background: #1faa51; box-shadow: 0 2px 10px rgba(31,170,81,.35); }
html.tema-5 .menu-item-pedir:hover { background: #25c95f; }

.carta-sin-resultados { text-align: center; padding: 3.5rem 1rem; color: var(--text-light); }
.carta-sin-resultados p { font-size: 1.05rem; }
.carta-sin-resultados-sub { font-size: .88rem !important; margin-top: .5rem; }
.carta-limpiar-filtro {
  margin-top: 1.5rem; padding: .6rem 1.2rem; border-radius: 50px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text-light); font: inherit; font-size: .85rem; cursor: pointer;
  transition: all var(--transition);
}
.carta-limpiar-filtro:hover { color: var(--blue); border-color: var(--blue); }

/* ============================================================
   RESPONSIVE — DISEÑO MÓVIL
   ============================================================ */

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
  .highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .nosotros-grid { grid-template-columns: 1fr; gap: 3rem; }
  .nos-img-side { right: 1rem; bottom: -1.5rem; }
  .contacto-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .nosotros, .carta, .galeria, .contacto { padding: 4.5rem 0; }
}

/* ---- Mobile (≤768px) ---- */
@media (max-width: 768px) {
  /* Navbar */
  .nav-links, .btn-nav { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(14,44,110,.98); padding: 1.75rem 1.5rem;
    gap: 0; box-shadow: 0 12px 32px rgba(0,0,0,.25);
  }
  .nav-links.open a {
    font-size: 1rem; padding: .9rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
  }
  .nav-links.open a:last-of-type { border-bottom: none; }
  .nav-links.open .btn-nav-mobile {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--gold); color: #fff; font-size: .9rem; font-weight: 600;
    padding: .75rem 1.5rem; border-radius: 50px; margin-top: 1rem;
  }
  .burger { display: flex; }

  /* Paddings */
  .highlights, .novedades { padding: 3rem 0; }
  .nosotros, .carta, .galeria, .contacto { padding: 3.5rem 0; }

  /* Carta: en móvil ancho (481-768px) el sidebar pasa a fila de pills wrap */
  .carta-layout { flex-direction: column; }
  .carta-sidebar {
    width: 100%; position: static; max-height: none;
    border-right: none; border-bottom: none;
    display: flex; flex-wrap: wrap; overflow: visible;
    padding: 0 0 .5rem; gap: .45rem;
  }
  .sec-nav-btn {
    display: inline-flex; align-items: center; width: auto;
    border-left: none; border: 1.5px solid var(--border);
    border-radius: 50px; background: rgba(14,44,110,.04);
    padding: .55rem 1.1rem; font-size: .85rem; white-space: nowrap;
  }
  .sec-nav-btn.active {
    background: var(--blue); color: #fff;
    border-color: var(--blue); border-left-color: var(--blue);
  }
  .carta-main { padding-left: 0; padding-top: 1.25rem; }
  .carta-herramientas { flex-direction: column; }
  .btn-compartir-carta { justify-content: center; }
  .section-sub { margin-bottom: 2rem; font-size: 1rem; }

  /* Hero */
  .hero { min-height: 93vh; }
  .hero-title { font-size: clamp(2.8rem, 11vw, 4.5rem); }
  .hero-sub { font-size: 1rem; margin-bottom: 2rem; }
  .hero-ctas { flex-direction: column; align-items: center; gap: .75rem; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline { width: min(300px, 100%); justify-content: center; padding: .9rem 1.5rem; }

  /* Highlights: cuadrícula 2×2, todas las tarjetas visibles */
  .highlight-grid {
    grid-template-columns: 1fr 1fr; gap: 10px;
    background: transparent; border-radius: 0; overflow: visible;
  }
  .highlight-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    padding: 1.5rem 1rem; min-width: 0; text-align: center;
  }
  .highlight-card h3 { font-size: .95rem; }
  .highlight-card p  { font-size: .8rem; }
  .hl-icon { margin-bottom: .75rem; }
  .hl-icon svg { width: 30px; height: 30px; }

  /* Novedades */
  .nov-grid { grid-template-columns: 1fr; gap: .9rem; }
  .nov-label { font-size: 1.3rem; }
  .nov-card { padding: 1.25rem; }

  /* Galería */
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 1.5rem; }
  .gallery-item:first-child  { grid-column: span 2; grid-row: span 1; }
  .gallery-item:nth-child(5) { grid-column: span 1; }
  .gallery-item img          { height: 175px; }
  .gallery-item:first-child img { height: 215px; }

  /* Nosotros */
  .nos-img-side { display: none; }
  .nos-stats    { gap: 1.5rem; flex-wrap: wrap; }
  .nos-stats .stat { flex: 1; min-width: 80px; }

  /* Contacto */
  .contacto-mapa iframe { height: 240px; }
  .contacto-socials { flex-wrap: wrap; }

  /* Footer */
  .footer-inner { flex-direction: column; gap: 2rem; align-items: flex-start; }
  .footer       { padding-bottom: 5.5rem; }
  .footer-bottom p { font-size: .75rem; }

  /* WhatsApp: sube para no solapar barra inferior */
  .whatsapp-float { bottom: 5.5rem; right: 1rem; width: 50px; height: 50px; }
}

/* ---- Móvil pequeño (≤480px) ---- */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .section-sub   { font-size: .93rem; }

  /* Hero */
  .hero-title  { font-size: clamp(2.6rem, 13vw, 3.5rem); line-height: .92; }
  .hero-sub    { font-size: .9rem; padding: 0 .25rem; }
  .hero-scroll { display: none; }

  /* Highlights */
  .highlight-card { padding: 1.25rem .85rem; }
  .highlight-card h3 { font-size: .9rem; }
  .highlight-card p  { font-size: .78rem; line-height: 1.45; }

  /* Galería */
  .gallery-grid { gap: 3px; }
  .gallery-item img { height: 150px; }
  .gallery-item:first-child,
  .gallery-item:nth-child(5) { grid-column: span 1; }
  .gallery-item:first-child img { height: 150px; }

  /* Carta: tabs en cuadrícula de píldoras — todas visibles sin scroll */
  .carta-layout { flex-direction: column; }
  .carta-sidebar {
    width: 100%; position: static; max-height: none;
    border-right: none; border-bottom: none;
    display: flex; flex-wrap: wrap; overflow: visible;
    padding: 0 0 .5rem; gap: .45rem;
  }
  .sec-nav-btn {
    flex-shrink: 0; white-space: nowrap;
    border: 1.5px solid var(--border); border-left-width: 1.5px;
    border-radius: 50px; background: rgba(14,44,110,.04);
    padding: .5rem 1rem; font-size: .8rem; font-weight: 500; color: var(--text);
  }
  .sec-nav-btn:hover { background: rgba(14,44,110,.10); border-color: var(--blue-light); }
  .sec-nav-btn.active {
    background: var(--blue); color: #fff;
    border-color: var(--blue); border-left-color: var(--blue); font-weight: 600;
  }
  .carta-main           { padding-left: 0; padding-top: 1.25rem; }
  .carta-section-titulo { font-size: 1.3rem; }

  /* Menu items */
  .menu-item       { gap: .75rem; }
  .menu-item-foto  { width: 60px; height: 60px; }
  .menu-item-name  { font-size: .9rem; }
  .menu-item-price { font-size: .9rem; }
  .menu-item-desc  { font-size: .76rem; }

  /* Novedades */
  .nov-header { flex-wrap: wrap; gap: .5rem; }

  /* Nosotros */
  .stat strong { font-size: 1.7rem; }
  .nos-stats   { gap: 1rem; }

  /* Footer */
  .footer { padding-bottom: 6rem; }
  .footer-brand .logo-pan,
  .footer-brand .logo-amp,
  .footer-brand .logo-canela { font-size: 1.35rem; }
}

/* Feedback táctil en tarjetas (solo dispositivos sin hover) */
@media (hover: none) {
  .nov-card:active, .highlight-card:active { transform: scale(.98); }
  .gallery-item:active img { transform: scale(.97); opacity: .85; }
  .sec-nav-btn:active { transform: scale(.95); }
}

/* ============================================================
   BARRA DE ACCIÓN FIJA — solo en móvil (llamar · WhatsApp · carta)
   ============================================================ */
.mobile-action-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 990;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 28px rgba(0,0,0,.12);
  padding: .65rem 1rem;
  padding-bottom: calc(.65rem + env(safe-area-inset-bottom));
  gap: .65rem; align-items: stretch;
}
.mobile-action-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .75rem .4rem; border-radius: 12px; min-height: 44px;
  font-weight: 700; font-size: .82rem; text-decoration: none;
  transition: opacity .15s, transform .1s; letter-spacing: .01em; color: #fff;
}
.mobile-action-bar a svg { width: 17px; height: 17px; flex-shrink: 0; }
.mobile-action-bar a:active { transform: scale(.95); opacity: .85; }
.mab-call { background: var(--blue); }
.mab-wa   { background: #22c55e; }
.mab-menu { background: var(--gold); }

@media (max-width: 768px) {
  .mobile-action-bar { display: flex; }
}

/* ============================================================
   TEMAS VISUALES — html.tema-X aplicado por JS según content.json
   Especificidad html.tema-X (0-1-1) > :root (0-1-0) → sobreescribe vars
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   TEMA 2 — EDITORIAL MODERNO
   Minimalista tipográfico · Inter · Negro + coral · Angular
   ══════════════════════════════════════════════════════════ */
html.tema-2 {
  --blue:       #111111;
  --blue-mid:   #2d2d2d;
  --blue-light: #404040;
  --gold:       #e63946;
  --gold-light: #f25f6a;
  --dark:       #0a0a0a;
  --cream:      #f5f5f5;
  --warm-white: #ffffff;
  --border:     #e0e0e0;
  --text:       #1a1a1a;
  --text-light: #555555;
  --shadow:     none;
  --shadow-md:  0 1px 8px rgba(0,0,0,.08);
  --radius:     0px;
  --radius-lg:  2px;
}

/* Navbar siempre blanca, sin sombra */
html.tema-2 .navbar { background: rgba(255,255,255,.98) !important; border-bottom: 1.5px solid #e0e0e0; box-shadow: none !important; }
html.tema-2 .navbar.scrolled { background: rgba(255,255,255,.99) !important; box-shadow: none !important; }
html.tema-2 .nav-logo .logo-pan { color: #111; }
html.tema-2 .nav-logo .logo-amp { color: #bbb; }
html.tema-2 .nav-logo .logo-canela { color: #e63946; }
html.tema-2 .nav-links a { color: #111; font-weight: 500; letter-spacing: .04em; font-size: .82rem; text-transform: uppercase; }
html.tema-2 .nav-links a:hover, html.tema-2 .nav-links a.active-link { color: #e63946; }
html.tema-2 .btn-nav { background: #111; border-radius: 0; }
html.tema-2 .nav-links.open { background: #fff; }
html.tema-2 .nav-links.open a { color: #111; }

/* Hero: overlay lateral, texto izquierda */
html.tema-2 .hero-overlay { background: linear-gradient(to right, rgba(0,0,0,.82) 0%, rgba(0,0,0,.40) 55%, transparent 100%) !important; }
html.tema-2 .hero-content { align-items: flex-start; text-align: left; padding-left: 2rem; }
html.tema-2 .hero-eyebrow { text-align: left; color: #e63946; }
html.tema-2 .hero-title { font-size: clamp(3.8rem,8vw,7.5rem); letter-spacing: -.04em; line-height: .9; font-weight: 900; }
html.tema-2 .hero-sub { max-width: 460px; text-align: left; }
html.tema-2 .hero-ctas { justify-content: flex-start; }
html.tema-2 .btn-primary { border-radius: 0 !important; }
html.tema-2 .btn-outline  { border-radius: 0 !important; border-color: rgba(255,255,255,.8); }

/* Highlights */
html.tema-2 .highlights { background: #0a0a0a; }
html.tema-2 .highlight-card { border-radius: 0; border-top: 3px solid #e63946; }
html.tema-2 .highlight-card h3 { color: #fff; }
html.tema-2 .highlight-card p { color: rgba(255,255,255,.6); }

/* Novedades */
html.tema-2 .novedades { background: #e63946; }
html.tema-2 .nov-card { background: rgba(0,0,0,.12); border-color: rgba(0,0,0,.15); border-radius: 0; }
html.tema-2 .nov-card h3 { color: #fff; }
html.tema-2 .nov-card p { color: rgba(255,255,255,.8); }
html.tema-2 .nov-badge { background: #0a0a0a !important; border-radius: 0; }
html.tema-2 .nov-badge .nd, html.tema-2 .nov-badge .nm { color: #fff; }

/* Carta: lista tipográfica pura, sin fotos */
html.tema-2 .menu-item-foto { display: none !important; }
html.tema-2 .menu-item { padding: .65rem 0; }
html.tema-2 .carta-section-titulo { border-bottom: 3px solid #0a0a0a; font-size: 1.3rem; letter-spacing: -.02em; }
html.tema-2 .carta-sidebar { border-color: #e0e0e0; }
html.tema-2 .sec-nav-btn.active { border-left-color: #e63946; color: #111; background: rgba(230,57,70,.06); }
html.tema-2 .menu-item-price { color: #e63946; font-weight: 700; }
html.tema-2 .menu-item-dots { border-bottom-color: rgba(0,0,0,.15); }

/* Stat */
html.tema-2 .stat strong { color: #e63946; }

/* Footer */
html.tema-2 .footer { background: #0a0a0a; }

/* Sección nosotros: separador llamativo */
html.tema-2 .nosotros-text h2 { letter-spacing: -.03em; }
html.tema-2 .section-eyebrow { color: #e63946; letter-spacing: .2em; }

/* Fuente: Inter en todo */
html.tema-2 body,
html.tema-2 h1, html.tema-2 h2, html.tema-2 h3, html.tema-2 h4,
html.tema-2 .hero-title, html.tema-2 .section-title,
html.tema-2 .nosotros-text h2, html.tema-2 .carta-section-titulo,
html.tema-2 .nav-links a, html.tema-2 .sec-nav-btn,
html.tema-2 .menu-item-name, html.tema-2 .menu-item-desc { font-family: 'Inter', sans-serif; }
html.tema-2 h1, html.tema-2 h2, html.tema-2 h3, html.tema-2 h4,
html.tema-2 .hero-title, html.tema-2 .section-title,
html.tema-2 .nosotros-text h2,
html.tema-2 .carta-section-titulo { font-weight: 800; letter-spacing: -.03em; }


/* ══════════════════════════════════════════════════════════════
   TEMA 3 — RÚSTICO ARTESANAL
   Cálido y orgánico · Fraunces + Crimson Text · Marrón + terracota
   ══════════════════════════════════════════════════════════════ */
html.tema-3 {
  --blue:       #5c3d2e;
  --blue-mid:   #7a5040;
  --blue-light: #9a6450;
  --gold:       #c45e2a;
  --gold-light: #d9743e;
  --dark:       #2d1f0e;
  --cream:      #f5ead8;
  --warm-white: #fdf6e9;
  --border:     #d4b896;
  --text:       #3d2a18;
  --text-light: #8a6a50;
  --shadow:     0 4px 24px rgba(60,30,10,.15);
  --shadow-md:  0 8px 40px rgba(60,30,10,.22);
  --radius:     4px;
  --radius-lg:  10px;
}

/* Hero: altura reducida, más intimista */
html.tema-3 .hero { min-height: 68vh; }
html.tema-3 .hero-overlay { background: linear-gradient(to bottom, rgba(30,12,3,.80) 0%, rgba(20,8,2,.52) 50%, rgba(30,12,3,.88) 100%) !important; }

/* Navbar terrosa */
html.tema-3 .navbar { background: rgba(30,12,3,.90) !important; }
html.tema-3 .navbar.scrolled { background: rgba(30,12,3,.98) !important; }
html.tema-3 .nav-logo .logo-canela { color: #d9743e; }
html.tema-3 .nav-links.open { background: rgba(30,12,3,.97); }

/* Secciones con formas orgánicas */
html.tema-3 .highlights {
  background: linear-gradient(135deg, #5c3d2e 0%, #7a5040 100%);
  clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
  padding: 7rem 0;
  margin: 1rem 0;
}
html.tema-3 .novedades {
  background: linear-gradient(135deg, #2d1f0e 0%, #5c3d2e 100%);
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
  padding: 7rem 0;
  margin: 1rem 0;
}

/* Carta */
html.tema-3 .carta-section-titulo { border-bottom: 3px solid #c45e2a; }
html.tema-3 .carta-sidebar { border-color: #d4b896; }
html.tema-3 .sec-nav-btn.active { border-left-color: #c45e2a; color: #5c3d2e; background: rgba(92,61,46,.08); }
html.tema-3 .menu-item-price { color: #5c3d2e; font-weight: 700; }
html.tema-3 .menu-item { border-bottom-color: rgba(92,61,46,.18); }
html.tema-3 .menu-item-dots { border-bottom-color: rgba(92,61,46,.25); }

/* Stat */
html.tema-3 .stat strong { color: #5c3d2e; }

/* Footer */
html.tema-3 .footer { background: #2d1f0e; }
html.tema-3 .footer-brand .logo-canela { color: #d9743e; }

/* Fuente: Fraunces (títulos expresivos) + Crimson Text (cuerpo) */
html.tema-3 h2, html.tema-3 h3, html.tema-3 h4,
html.tema-3 .hero-title, html.tema-3 .section-title,
html.tema-3 .nosotros-text h2, html.tema-3 .carta-section-titulo { font-family: 'Fraunces', serif; font-weight: 700; }
html.tema-3 body,
html.tema-3 p, html.tema-3 .nav-links a,
html.tema-3 .menu-item-name, html.tema-3 .menu-item-desc,
html.tema-3 .section-sub, html.tema-3 .sec-nav-btn { font-family: 'Crimson Text', Georgia, serif; font-size: 1.08em; line-height: 1.7; }


/* ══════════════════════════════════════════════════════════
   TEMA 4 — URBANO & VIBRANTE
   Energético · Oswald · Negro + amarillo neón · Grid de carta
   ══════════════════════════════════════════════════════════ */
html.tema-4 {
  --blue:       #111111;
  --blue-mid:   #222222;
  --blue-light: #333333;
  --gold:       #f5d000;
  --gold-light: #fae040;
  --dark:       #0a0a0a;
  --cream:      #f0f0ee;
  --warm-white: #f8f8f6;
  --border:     #e0e0dc;
  --text:       #1a1a1a;
  --text-light: #666;
  --shadow:     0 2px 16px rgba(0,0,0,.12);
  --shadow-md:  0 4px 32px rgba(0,0,0,.20);
  --radius:     0px;
  --radius-lg:  2px;
}

/* Navbar negra, solo logo + hamburguesa */
html.tema-4 .navbar { background: #0a0a0a !important; padding: .8rem 0; }
html.tema-4 .navbar.scrolled { background: #0a0a0a !important; }
html.tema-4 .nav-links { display: none !important; }
html.tema-4 .btn-nav { display: none !important; }
html.tema-4 .burger { display: flex !important; }
html.tema-4 .burger span { background: #fff !important; }
html.tema-4 .nav-links.open { display: flex !important; background: #0a0a0a; }
html.tema-4 .nav-links.open a { color: #fff; letter-spacing: .08em; font-size: .9rem; text-transform: uppercase; }
html.tema-4 .nav-links.open a:hover { color: #f5d000; }
html.tema-4 .nav-logo .logo-pan { color: #fff; }
html.tema-4 .nav-logo .logo-amp { color: rgba(255,255,255,.25); }
html.tema-4 .nav-logo .logo-canela { color: #f5d000; }

/* Hero: overlay intenso, tipografía en mayúsculas */
html.tema-4 .hero-overlay { background: linear-gradient(160deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.50) 50%, rgba(0,0,0,.82) 100%) !important; }
html.tema-4 .hero-eyebrow { color: #f5d000; letter-spacing: .28em; }
html.tema-4 .hero-title { text-transform: uppercase; letter-spacing: -.01em; font-weight: 900; }
html.tema-4 .hero-ctas .btn-primary { background: #f5d000; color: #0a0a0a; font-weight: 800; border-radius: 0; }
html.tema-4 .hero-ctas .btn-primary:hover { background: #fae040; }
html.tema-4 .hero-ctas .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; border-radius: 0; }

/* Highlights: amarillo vibrante */
html.tema-4 .highlights { background: #f5d000; }
html.tema-4 .highlight-card { border-radius: 0; background: rgba(0,0,0,.06); }
html.tema-4 .highlight-card h3 { color: #0a0a0a; }
html.tema-4 .highlight-card p { color: rgba(0,0,0,.6); }
html.tema-4 .hl-icon { color: #0a0a0a; }

/* Novedades */
html.tema-4 .novedades { background: #0a0a0a; }
html.tema-4 .nov-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); border-radius: 0; }
html.tema-4 .nov-card h3 { color: #fff; }
html.tema-4 .nov-card p { color: rgba(255,255,255,.55); }
html.tema-4 .nov-badge { background: #f5d000 !important; border-radius: 0; }
html.tema-4 .nov-badge .nd,
html.tema-4 .nov-badge .nm { color: #0a0a0a; }

/* Carta: grid 2 columnas con fotos protagonistas */
html.tema-4 .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
html.tema-4 .menu-item { flex-direction: column; border: none; padding: 0; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
html.tema-4 .menu-item-foto { width: 100%; margin: 0; border-radius: 0; }
html.tema-4 .menu-item-foto img { width: 100%; height: 150px; object-fit: cover; border-radius: 0; }
html.tema-4 .menu-item-info { padding: .75rem .9rem; }
html.tema-4 .menu-item-dots { display: none; }
html.tema-4 .menu-item-price { font-weight: 900; color: #0a0a0a; font-size: 1rem; }
html.tema-4 .carta-section-titulo { border-bottom: 4px solid #f5d000; letter-spacing: .06em; }
html.tema-4 .carta-sidebar { border-color: #e0e0e0; }
html.tema-4 .sec-nav-btn.active { border-left-color: #f5d000; color: #111; background: rgba(245,208,0,.1); font-weight: 700; }
html.tema-4 .sec-nav-btn:hover { background: rgba(245,208,0,.06); }

/* Stat */
html.tema-4 .stat strong { color: #111; }

/* Footer */
html.tema-4 .footer { background: #0a0a0a; }

/* Fuente: Oswald pesado + mayúsculas en títulos */
html.tema-4 h1, html.tema-4 h2, html.tema-4 h3, html.tema-4 h4,
html.tema-4 .hero-title, html.tema-4 .section-title,
html.tema-4 .nosotros-text h2, html.tema-4 .carta-section-titulo { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
html.tema-4 body, html.tema-4 .nav-links a, html.tema-4 .sec-nav-btn,
html.tema-4 .menu-item-name, html.tema-4 .menu-item-desc { font-family: 'Poppins', sans-serif; }

@media (max-width: 600px) {
  html.tema-4 .menu-list { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   TEMA 5 — PREMIUM NOCTURNO (Editorial Dark Warm)
   Casi-negro cálido · Acento canela · Fraunces editorial · Grano
   ══════════════════════════════════════════════════════════════ */
html.tema-5 {
  --blue:       #15110E;            /* superficies oscuras (navbar, highlights, footer) */
  --blue-mid:   #1E1813;
  --blue-light: #2A211A;
  --gold:       #C4763B;            /* canela — acento único */
  --gold-light: #D98E4F;
  --dark:       #0E0B09;            /* fondo galería (se mantiene oscuro) */
  --cream:      #15110E;            /* secciones antes claras → oscuro cálido */
  --warm-white: #0E0B09;            /* fondo body */
  --border:     rgba(242,235,218,.14);
  --text:       #DDD2BC;
  --text-light: #8B7E68;
  --radius:     6px;
  --radius-lg:  14px;
  --shadow:     0 10px 40px rgba(0,0,0,.5);
  --shadow-md:  0 18px 60px rgba(0,0,0,.55);
}

/* ── Texto: lo que era tinta oscura pasa a crema (nunca blanco puro) ── */
html.tema-5 .section-title,
html.tema-5 .nosotros-text h2,
html.tema-5 .carta-section-titulo,
html.tema-5 .menu-item-name { color: #F2EBDA; }
html.tema-5 .mi-info h4,
html.tema-5 .contact-block p,
html.tema-5 .contact-block a { color: #F2EBDA; }
html.tema-5 .stat strong { color: #D98E4F; }
html.tema-5 .menu-item-price { color: #D98E4F; }

/* ── Tipografía editorial: Fraunces para display, Inter para cuerpo ── */
html.tema-5 body, html.tema-5 .nav-links a, html.tema-5 .sec-nav-btn,
html.tema-5 .menu-item-desc, html.tema-5 .section-sub { font-family: 'Inter', sans-serif; }
html.tema-5 h2, html.tema-5 h3, html.tema-5 h4,
html.tema-5 .hero-title, html.tema-5 .section-title,
html.tema-5 .nosotros-text h2, html.tema-5 .carta-section-titulo,
html.tema-5 .nov-label,
html.tema-5 .nav-logo, html.tema-5 .footer-brand .logo-pan,
html.tema-5 .footer-brand .logo-amp, html.tema-5 .footer-brand .logo-canela {
  font-family: 'Fraunces', serif;
}
html.tema-5 .hero-canela { font-style: italic; }
html.tema-5 .hero-y { font-family: 'Fraunces', serif; font-style: italic; color: #C4763B; }

/* ── Hero: mesh gradient cálido animado + grano de película ── */
html.tema-5 .hero-overlay {
  background: linear-gradient(to bottom,
    rgba(14,11,9,.78) 0%, rgba(14,11,9,.55) 45%, rgba(14,11,9,.92) 100%) !important;
}
html.tema-5 .hero::before {
  content: ''; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 50% at 72% 28%, rgba(196,118,59,.32), transparent 70%),
    radial-gradient(36% 46% at 22% 72%, rgba(196,154,91,.20), transparent 70%);
  filter: blur(70px);
  animation: t5mesh 18s ease-in-out infinite alternate;
}
@keyframes t5mesh {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(14deg) scale(1.18); }
}
html.tema-5 .hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
html.tema-5 .hero-eyebrow {
  border-color: rgba(196,118,59,.45); color: #D98E4F;
  background: rgba(14,11,9,.45); letter-spacing: .24em;
}
html.tema-5 .hero-title { font-weight: 600; }
html.tema-5 .btn-primary { border-radius: 4px; box-shadow: 0 6px 28px rgba(196,118,59,.35); }
html.tema-5 .btn-outline { border-radius: 4px; border-color: rgba(242,235,218,.35); }
html.tema-5 .btn-nav     { border-radius: 4px; }

/* ── Navbar ── */
html.tema-5 .navbar.scrolled { background: rgba(14,11,9,.92) !important; border-bottom: 1px solid rgba(242,235,218,.08); }
html.tema-5 .nav-links.open { background: rgba(14,11,9,.97); }
html.tema-5 .nav-logo .logo-canela { color: #D98E4F; }

/* ── Highlights: tarjetas con borde fino y halo canela al pasar ── */
html.tema-5 .highlights { background: #15110E; border-top: 1px solid rgba(242,235,218,.07); border-bottom: 1px solid rgba(242,235,218,.07); }
html.tema-5 .highlight-grid { background: rgba(242,235,218,.08); }
html.tema-5 .highlight-card { background: #15110E; }
html.tema-5 .highlight-card:hover { background: #1E1813; box-shadow: inset 0 0 60px rgba(196,118,59,.07); }
html.tema-5 .highlight-card h3 { color: #F2EBDA; }
html.tema-5 .highlight-card p { color: #8B7E68; }

/* ── Novedades ── */
html.tema-5 .novedades { background: #0E0B09; }
html.tema-5 .novedades::before { background: linear-gradient(90deg, transparent, #C4763B, transparent); }
html.tema-5 .nov-card { background: #1E1813; border-color: rgba(242,235,218,.10); }
html.tema-5 .nov-card:hover { background: #241C15; }
html.tema-5 .nov-card::after { background: #C4763B; }
html.tema-5 .nov-badge { background: rgba(196,118,59,.15); }
html.tema-5 .nov-badge .nd { color: #D98E4F; }
html.tema-5 .nov-social p { color: #8B7E68; }

/* ── Carta ── */
html.tema-5 .carta-section-titulo { border-bottom-color: #C4763B; }
html.tema-5 .menu-item { border-bottom-color: rgba(242,235,218,.10); }
html.tema-5 .menu-item:hover { background: rgba(242,235,218,.03); }
html.tema-5 .menu-item-dots { border-bottom-color: rgba(242,235,218,.22); }
html.tema-5 .sec-nav-btn { color: #8B7E68; }
html.tema-5 .sec-nav-btn:hover { color: #F2EBDA; background: rgba(242,235,218,.05); }
html.tema-5 .sec-nav-btn.active { color: #F2EBDA; background: rgba(196,118,59,.12); border-left-color: #C4763B; }
html.tema-5 .carta-sidebar { border-right-color: rgba(242,235,218,.12); }
html.tema-5 .menu-badge.badge-firma { background: #C4763B; }

/* ── Galería ── */
html.tema-5 .galeria { border-top: 1px solid rgba(242,235,218,.07); }
html.tema-5 .gallery-overlay { background: rgba(196,118,59,.55); }

/* ── Contacto ── */
html.tema-5 .cb-icon { background: rgba(196,118,59,.12); color: #D98E4F; }
html.tema-5 .contact-block h4 { color: #8B7E68; }
html.tema-5 .contact-block a:hover { color: #D98E4F; }
html.tema-5 .cs-link { border-color: rgba(242,235,218,.18); color: #8B7E68; }
html.tema-5 .cs-link:hover { color: #D98E4F; border-color: #C4763B; }

/* ── Footer ── */
html.tema-5 .footer { background: #0E0B09; border-top: 1px solid rgba(242,235,218,.07); }
html.tema-5 .footer-brand .logo-canela { color: #D98E4F; }
html.tema-5 .footer-links a:hover { color: #D98E4F; }
html.tema-5 .footer-social a:hover { color: #D98E4F; }

/* ── Banner promocional ── */
html.tema-5 .promo-banner-overlay { background: linear-gradient(100deg, rgba(14,11,9,.90) 0%, rgba(30,24,19,.78) 55%, rgba(14,11,9,.90) 100%); }
html.tema-5 .promo-banner-overlay.no-foto { background: linear-gradient(100deg, #15110E 0%, #2A211A 50%, #4A2E18 100%); }
html.tema-5 .promo-banner::before { background: #C4763B; }

/* ── Barra de acción móvil ── */
html.tema-5 .mobile-action-bar { background: rgba(20,16,12,.97); border-top-color: rgba(242,235,218,.12); }
html.tema-5 .mab-call { background: #2A211A; }

/* ── Carta móvil: pills oscuras ── */
@media (max-width: 768px) {
  html.tema-5 .sec-nav-btn { background: rgba(242,235,218,.05); border-color: rgba(242,235,218,.16); color: #DDD2BC; }
  html.tema-5 .sec-nav-btn.active { background: #C4763B; border-color: #C4763B; color: #fff; }
  html.tema-5 .nav-links.open a { border-bottom-color: rgba(242,235,218,.08); }
  html.tema-5 .highlight-card { background: rgba(242,235,218,.04); border-color: rgba(242,235,218,.10); }
}


/* ============================================================
   NOTICIAS
   Se rellena desde el panel. La sección se esconde entera si no
   hay ninguna publicada.
   ============================================================ */
.noticias { padding: 5rem 0; background: var(--warm-white); }
/* Ancho tope por tarjeta y rejilla centrada: con una sola noticia, un
   auto-fit a 1fr la estiraba a todo lo ancho y la foto salia enorme. */
.noticias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 1.75rem;
  margin-top: 3rem;
}
.noticia-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease;
}
.noticia-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.10); }
.noticia-foto { aspect-ratio: 4 / 3; overflow: hidden; background: #f0ece4; }
.noticia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noticia-cuerpo { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.noticia-fecha {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: .6rem;
}
.noticia-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; line-height: 1.25; color: var(--dark); margin-bottom: .7rem;
}
.noticia-card p { color: #5a5a5a; font-size: .95rem; line-height: 1.65; margin: 0; white-space: pre-line; }

@media (max-width: 640px) {
  .noticias { padding: 3.5rem 0; }
  .noticias-grid { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
}

/* ============================================================
   LEGAL: enlaces del footer + banner de cookies (LSSI-CE)
   ============================================================ */
.footer-legal {
  margin-top: .75rem; display: flex; justify-content: center;
  align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .82rem;
}
.footer-legal a { color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: #fff; }

.cookies-banner {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 1500;
  max-width: 340px;
  pointer-events: none;                 /* solo la caja es clicable */
}
.cookies-banner-caja {
  pointer-events: auto;
  background: rgba(20,20,20,.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  padding: .7rem .85rem;
}
.cookies-texto { margin: 0 0 .55rem; font-size: .72rem; line-height: 1.45; color: rgba(255,255,255,.85); }
.cookies-texto a { color: #e3c37a; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookies-botones { display: flex; gap: .45rem; }
.cookies-btn {
  border: none; cursor: pointer; font-family: inherit;
  font-size: .72rem; font-weight: 600;
  padding: .38rem .85rem; border-radius: 50px; transition: opacity .15s;
}
.cookies-btn.aceptar { background: #e3c37a; color: #1a1a1a; }
.cookies-btn.rechazar { background: transparent; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.3); }
.cookies-btn:hover { opacity: .85; }

@media (max-width: 560px) {
  .cookies-banner {
    left: .6rem; right: auto; max-width: 300px;
    bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)); /* deja ver la barra inferior móvil */
  }
}

/* ---- Panel de preferencias de cookies ---- */
.cookies-modal {
  position: fixed; inset: 0; z-index: 1600;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(10,10,10,.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cookies-modal[hidden] { display: none; }
.cookies-modal-caja {
  position: relative; width: 100%; max-width: 380px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  padding: 1.4rem 1.4rem 1.2rem;
  max-height: 90vh; overflow: auto;
}
.cookies-modal-caja h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem; color: #0e2c6e;
  margin: 0 0 1rem; padding-right: 1.5rem;
}
.cookies-modal-cerrar {
  position: absolute; top: .7rem; right: .8rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: #9ca3af; padding: .2rem;
}
.cookies-modal-cerrar:hover { color: #374151; }
.cookies-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 0; border-top: 1px solid #f3f4f6;
}
.cookies-cat strong { display: block; font-size: .88rem; color: #1f2937; }
.cookies-cat div span { display: block; font-size: .74rem; line-height: 1.45; color: #6b7280; max-width: 230px; }
.cookies-fija {
  flex: none; font-size: .7rem; font-weight: 600;
  color: #16a34a; background: #dcfce7;
  padding: .25rem .6rem; border-radius: 50px;
}
.cookies-switch { flex: none; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.cookies-switch input {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 34px; height: 19px; border-radius: 50px;
  background: #d1d5db; position: relative;
  transition: background .15s; cursor: pointer; flex: none;
}
.cookies-switch input::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: left .15s;
}
.cookies-switch input:checked { background: #16a34a; }
.cookies-switch input:checked::after { left: 17.5px; }
.cookies-switch-txt { font-size: .72rem; color: #6b7280; }
.cookies-modal-botones { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: 1.1rem; }
.cookies-modal-botones .cookies-btn { flex: 1 1 auto; }
.cookies-modal-mas { margin: .8rem 0 0; font-size: .72rem; text-align: center; color: #6b7280; }
.cookies-modal-mas a { color: #0e2c6e; }

/* Solo para lectores de pantalla: presente en el DOM, invisible en pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}


/* ============================================================
   CESTA DE PEDIDO
   Antes cada plato mandaba su propio mensaje de WhatsApp. Ahora se
   van juntando aquí y se envía uno solo con todo y el total.
   ============================================================ */
#cesta-boton {
  position: fixed; right: 1.5rem; bottom: 6.5rem; z-index: 900;
  width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--blue); color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  display: none; align-items: center; justify-content: center;
  transition: transform .25s ease, background .25s ease;
}
#cesta-boton.con-cosas { display: flex; }
#cesta-boton:hover { transform: scale(1.06); }
#cesta-boton svg { width: 24px; height: 24px; }
#cesta-cuenta {
  position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px;
  padding: 0 6px; border-radius: 999px; background: var(--gold); color: #1a1207;
  font-size: .8rem; font-weight: 800; line-height: 24px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
@media (max-width: 900px) { #cesta-boton { bottom: 5.5rem; right: 1rem; } }

/* Por encima del aviso de cookies (1500) y su ventana (1600): tapaba
   justo el boton de enviar el pedido. */
#cesta-panel, #cesta-tamano { position: fixed; inset: 0; z-index: 1700; display: none; }
#cesta-panel.abierta { display: block; }
#cesta-tamano:not([hidden]) { display: block; }
.cesta-fondo { position: absolute; inset: 0; background: rgba(10,12,22,.55); backdrop-filter: blur(2px); }
body.cesta-abierta { overflow: hidden; }

.cesta-caja {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(460px, 100%); max-height: 85vh; overflow-y: auto;
  background: #fff; border-radius: 20px 20px 0 0; padding: 1.4rem;
  box-shadow: 0 -8px 40px rgba(0,0,0,.25);
  animation: cestaSube .28s cubic-bezier(.22,.61,.36,1);
}
.cesta-caja-tam { bottom: auto; top: 50%; transform: translate(-50%,-50%); border-radius: 20px; }
@keyframes cestaSube { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }

.cesta-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cesta-cab h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--dark); margin: 0; }
.cesta-cerrar { background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; color: #888; padding: 0 .3rem; }
.cesta-cerrar:hover { color: var(--dark); }

.cesta-vacia { color: #777; text-align: center; padding: 2rem 1rem; line-height: 1.7; margin: 0; }
.cesta-linea { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #eee; }
.cesta-linea:last-child { border-bottom: 0; }
.cesta-linea-txt { flex: 1; min-width: 0; }
.cesta-linea-txt strong { display: block; font-size: .98rem; color: var(--dark); }
.cesta-variante { display: inline-block; font-size: .78rem; background: #f0ece4; color: #6b5f4a; padding: .1rem .5rem; border-radius: 999px; margin-top: .2rem; }
.cesta-precio { display: block; font-size: .82rem; color: #888; margin-top: .15rem; }

.cesta-cantidad { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.cesta-cantidad button {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--blue);
  background: #fff; color: var(--blue); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cesta-cantidad button:hover { background: var(--blue); color: #fff; }
.cesta-cantidad span { min-width: 22px; text-align: center; font-weight: 700; }

#cesta-pie { margin-top: 1.2rem; padding-top: 1rem; border-top: 2px solid #f0ece4; }
.cesta-total-fila { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.cesta-total-fila strong { font-size: 1.35rem; color: var(--blue); }
.cesta-nota { font-size: .8rem; color: #999; margin: .35rem 0 1rem; }
.cesta-enviar {
  width: 100%; padding: .95rem; border: 0; border-radius: 999px; cursor: pointer;
  background: #25D366; color: #fff; font-family: inherit; font-size: 1.02rem; font-weight: 700;
}
.cesta-enviar:hover { background: #1eb455; }
.cesta-vaciar {
  width: 100%; margin-top: .6rem; padding: .6rem; border: 0; background: none;
  color: #999; font-family: inherit; font-size: .88rem; cursor: pointer;
}
.cesta-vaciar:hover { color: #d33; }

.cesta-opcion {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: .9rem 1.1rem; margin-bottom: .5rem; cursor: pointer;
  border: 2px solid #e6e0d4; border-radius: 12px; background: #fff;
  font-family: inherit; font-size: 1rem; color: var(--dark);
}
.cesta-opcion:hover { border-color: var(--gold); background: #fffdf7; }
.cesta-opcion strong { color: var(--blue); }

#cesta-aviso {
  position: fixed; left: 50%; bottom: 7.5rem; transform: translate(-50%, 12px);
  z-index: 1750; background: var(--dark); color: #fff;
  padding: .7rem 1.2rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 6px 24px rgba(0,0,0,.3); max-width: 90vw; text-align: center;
}
#cesta-aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* El "+" del botón Añadir */
.menu-item-pedir .mas { font-size: 1.1em; font-weight: 800; margin-right: .1rem; }

@media (prefers-reduced-motion: reduce) {
  .cesta-caja { animation: none; }
  #cesta-aviso { transition: none; }
}

/* Con el pedido abierto, el aviso de cookies estorba: se aparta y vuelve al cerrar */
body.cesta-abierta .cookies-banner { display: none; }

/* ============================================================
   PANTALLAS TÁCTILES: tamaños cómodos para el dedo
   Medido con herramientas/medir-tactil.js. Lo recomendado son 44px
   de alto; había botones de 23, 31 y 36. Solo se aplica cuando no
   hay ratón, así que el escritorio se queda igual.
   ============================================================ */
@media (pointer: coarse) {

  /* "Añadir" de cada plato: es la acción principal de la carta y medía
     31px de alto. Se sube a 44 sin agrandar el texto. */
  .menu-item-pedir {
    min-height: 44px;
    padding: .55rem 1.1rem;
    font-size: .82rem;
  }
  .menu-item-pedir svg { width: 15px; height: 15px; }

  /* Pestañas de secciones de la carta: medían 36px */
  .sec-nav-btn { min-height: 44px; display: inline-flex; align-items: center; }

  /* Enlaces del pie y botones de redes: medían 23px. Se les da alto
     sin separarlos visualmente de más. */
  .footer-links a,
  .contacto-socials .cs-link {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* min-height no hace nada en un elemento en línea: hay que darle display */
  .social-btn { min-height: 44px; display: inline-flex; align-items: center; }

  /* Los platos de la carta, algo más separados: con el dedo, dos filas
     pegadas se pulsan mal */
  .menu-item { padding-top: .2rem; padding-bottom: .2rem; }

  /* Teléfono y WhatsApp del bloque de contacto: medían 23px de alto y son
     justo lo que más se pulsa desde el móvil. */
  .contact-block a { min-height: 44px; display: inline-flex; align-items: center; }

  /* La X de cerrar el banner medía 28x28: se falla más de lo que se acierta */
  .promo-banner-close { min-width: 44px; min-height: 44px; display: inline-flex;
                        align-items: center; justify-content: center; }
  .promo-banner-cta { min-height: 44px; display: inline-flex; align-items: center; }

  /* Iconos de redes del pie: 22x30 */
  .footer-social a { min-width: 44px; min-height: 44px; display: inline-flex;
                     align-items: center; justify-content: center; }

  /* Avisos legales y preferencias de cookies */
  .footer-legal a, .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Aceptar / Rechazar / Configurar del aviso de cookies: medían 31px */
  .cookies-btn { min-height: 44px; }
}

/* La barra inferior repartía el ancho según el texto, así que "La carta"
   se partía en dos líneas en pantallas de 320px. Ahora los tres botones
   miden lo mismo y el texto no se rompe. */
.mobile-action-bar a {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}
.mobile-action-bar a span,
.mobile-action-bar a { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 360px) {
  /* En las pantallas más estrechas se aprieta un poco todo para que las
     tres etiquetas quepan en una línea */
  .mobile-action-bar { padding-left: .5rem; padding-right: .5rem; gap: .4rem; }
  .mobile-action-bar a { font-size: .74rem; padding-left: .2rem; padding-right: .2rem; gap: .3rem; }
  .mobile-action-bar a svg { width: 15px; height: 15px; }
}

/* ============================================================
   VENTANAS BAJAS (portátil sin maximizar, ~600-720px de alto)
   Va al final del fichero a propósito: si se pone antes que las
   reglas del hero, esas ganan por orden y esto no hace nada.
   El contenido de la portada mide unos 640px y no cabe en una
   ventana de 600. Aquí se aprieta para que la portada entera,
   botones incluidos, siga viéndose sin bajar.
   ============================================================ */
@media (max-height: 760px) and (min-width: 769px) {
  .hero { padding-top: 5rem; padding-bottom: 1.25rem; }
  .hero-title { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; }
  .hero-eyebrow { margin-bottom: .7rem; font-size: .72rem; }
  .hero-sub { margin-bottom: 1rem; font-size: 1rem; line-height: 1.5; }
  .hero-ctas { gap: .7rem; }
  .hero-estado { margin-bottom: .8rem; }
  .hero-scroll { display: none; }   /* el "Desliza" sobra si no hay sitio */
}

@media (max-height: 620px) and (min-width: 769px) {
  .hero-title { font-size: clamp(2rem, 5vw, 3.2rem); }
  .hero-sub { font-size: .95rem; margin-bottom: .8rem; }
  .hero-eyebrow { margin-bottom: .5rem; }
}

/* Hueco para el banner promocional, que flota sobre el contenido.
   Solo hace falta cuando la ventana es baja: ahí se sentaba justo encima
   de los botones "Ver la carta / Cómo llegar". La clase la pone y la
   quita script.js según el banner esté o no. */
@media (max-height: 760px) {
  body.con-banner .hero { padding-bottom: 7.5rem; }
}