/* =====================================================================
   carta.css — motor visual común de la carta pública.
   Regla: ningún selector contiene colores, fuentes, radios ni tiempos de marca;
   todo sale de los tokens --t-* (tema) o es núcleo del motor (sin tokenizar).
   ===================================================================== */

:root{
  /* ---- TOKENS DE TEMA (--t-*) ------------------------------------------------
     Valores por defecto del motor (= preset "Editorial"). Un tema los sobreescribe
     en el elemento host; lo que no defina cae aquí. */

  /* entradas de marca (4) + su descomposición RGB para usos con transparencia */
  --t-bg:#0A0908;          --t-bg-rgb:10, 9, 8;
  --t-text:#F2EBDA;        --t-text-rgb:242, 235, 218;
  --t-primary:#C5301E;
  --t-accent:#CBB48C;

  /* semánticos derivados: superficies, texto y líneas */
  --t-surface:#1A1716;
  --t-text-soft:#DDD2BC;
  --t-text-muted:#8B7E68;
  --t-line:rgba(var(--t-text-rgb), .09);
  --t-focus:var(--t-accent);
  --t-on-accent:#0A0908;

  /* texto/controles SOBRE MULTIMEDIA (fotos, vídeo, reel). Independientes de --t-text (superficie sólida):
     siempre claros y con contraste resuelto contra el scrim, aunque el tema general sea claro. */
  --t-on-media:#F2EBDA;
  --t-on-media-soft:#DDD2BC;
  --t-on-media-muted:#8B7E68;
  --t-on-media-accent:#CBB48C;
  --t-on-media-rgb:242, 235, 218;
  --t-media-stage:#1A1716;   /* fondo oscuro DETRÁS de las fotos (no es --t-surface: en un tema claro esa superficie aclara la foto) */

  /* bases de scrim (capa de protección de contraste sobre media/superficies) y su intensidad */
  --t-topbar-rgb:14, 11, 9;
  --t-scrim-rgb:4, 3, 3;
  --t-scrim-soft-rgb:6, 5, 4;
  --t-scrim-chip-rgb:10, 9, 8;
  --t-float-rgb:16, 14, 12;
  --t-scrim-k:1;

  /* hoja inferior (modales / detalle) */
  --t-sheet:#F2EBDA;
  --t-on-sheet:#1A1714;
  --t-on-sheet-muted:#6b6b6b;
  --t-on-sheet-desc:#5a5248;
  --t-on-sheet-faint:#8a8175;
  --t-sheet-ink-rgb:0, 0, 0;
  --t-sheet-control:#fff;
  --t-sheet-control-line:#ccc;

  /* tipografía, forma y movimiento */
  --t-font-title:'Fraunces',serif;
  --t-font-body:'Inter',sans-serif;
  --t-radius-card:16px;
  --t-motion:.6s;
  --t-glow:16%;

  /* ---- ALIAS LEGACY (temporales) ----------------------------------------------
     Ningún selector los usa ya. Se conservan solo por compatibilidad y se eliminan en Fase 2.
     --bg-2, --accent-2, --brand-secondary y --glow-intensity ya no tenían consumidores. */
  --bg:var(--t-bg); --bg-2:#121010; --bg-3:var(--t-surface);
  --cream:var(--t-text); --cream-2:var(--t-text-soft); --cream-3:var(--t-text-muted);
  --accent:var(--t-primary); --accent-2:#A82516; --gold:var(--t-accent);
  --line:var(--t-line);
  --brand-primary:var(--t-primary); --brand-secondary:#A82516; --brand-background:var(--t-bg);
  --brand-text:var(--t-text); --brand-accent:var(--t-accent);
  --card-radius:var(--t-radius-card); --animation-speed:var(--t-motion); --glow-intensity:40%;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--t-bg); color:var(--t-text); font-family:var(--t-font-body); height:100%; overscroll-behavior-y:none; overflow-x:hidden;}
h1,h2,h3{font-family:var(--t-font-title); font-weight:600;}
em{font-style:italic; color:var(--t-accent);}
button{font:inherit;}
:focus-visible{outline:2px solid var(--t-focus); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---- topbar ---- */
@keyframes logoFade{ from{opacity:0;} to{opacity:1;} }
.topbar{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background:linear-gradient(180deg, rgba(var(--t-topbar-rgb), calc(.85 * var(--t-scrim-k))), transparent);}
.brand-block{display:flex; align-items:center; gap:10px; animation:logoFade calc(var(--t-motion) * .8) ease-out;}
/* Imagen de fondo de la carta (opcional; la pone carta-tema.js). Desenfoque (0-24 px) y oscurecido (0-80 %) a gusto del restaurante (los aplica carta-tema.js); el velo es NEGRO: no tiñe la foto. */
#fondo-capa{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
#fondo-capa .fondo-img{position:absolute; inset:-40px; background-size:cover; background-position:center;}
#fondo-capa .fondo-velo{position:absolute; inset:0; background:rgba(0,0,0,.3);}   /* el JS fija el desenfoque y el oscurecido elegidos */
[data-fondo-img] body{background:transparent;}
[data-fondo-img] #vista-home{background:none;}
/* Con imagen de fondo la página es "oscura": textos de cabecera con los tonos pensados para ir sobre foto, y tarjetas limpias (sin escenario negro ni sombra pesada) */
[data-fondo-img] .brand-name{color:var(--t-on-media);}
[data-fondo-img] .brand-tagline{color:var(--t-on-media-muted);}
[data-fondo-img] .brand-glifo{color:var(--t-on-media-accent);}
[data-fondo-img] .cat-card{background:transparent; box-shadow:0 14px 34px rgba(0,0,0,.35); border-color:rgba(255,255,255,.14);}
[data-fondo-img] .cat-card img{opacity:.95;}
[data-fondo-img] .carrusel{padding-bottom:44px; margin-bottom:-36px;}
[data-fondo-img] .inicio .ini-card{background:transparent;}   /* la sombra no se corta en el borde del carrusel */
.brand-logo{height:34px; width:auto; max-width:120px; object-fit:contain; display:block;}
.brand-glifo{font-size:.7rem; line-height:1.05; color:var(--t-accent); writing-mode:vertical-rl; opacity:.85;}
.brand-name{font-family:var(--t-font-title); font-style:italic; font-size:1.15rem; color:var(--t-text); line-height:1.2;}
.brand-tagline{font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--t-text-muted); margin-top:2px;}
.lang-selector{position:relative;}
.lang-flag{width:28px; height:20px; border-radius:3px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; cursor:pointer; border:none;}
.lang-menu{position:absolute; top:30px; right:0; background:var(--t-surface); border:1px solid var(--t-line); border-radius:8px; padding:6px; display:none; grid-template-columns:repeat(3,1fr); gap:4px; z-index:25;}
.lang-menu.abierto{display:grid;}
.lang-menu button{width:32px; height:24px; border-radius:4px; border:none; background:#fff; font-size:1rem; cursor:pointer;}

/* ---- HOME: carrusel de categorías ---- */
#vista-home{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:24px;
  padding:calc(72px + 8vh) 16px 32px;
  background:
    radial-gradient(ellipse 900px 500px at 50% 38%, color-mix(in srgb, var(--t-primary) var(--t-glow), transparent) 0%, transparent 70%),
    var(--t-bg);
}
.carrusel{display:flex; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; width:100%; max-width:1000px; padding:8px 14vw; -webkit-overflow-scrolling:touch;}
.carrusel::-webkit-scrollbar{display:none;}
@keyframes entrada{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
@keyframes zoomAmbiental{ from{transform:scale(1);} to{transform:scale(1.035);} }
.cat-card{
  flex:0 0 272px; margin-left:-34px; scroll-snap-align:center; border-radius:var(--t-radius-card); overflow:hidden; position:relative; height:380px;
  background:var(--t-media-stage); border:1px solid var(--t-line); cursor:pointer;
  transition:transform .4s cubic-bezier(.16,.84,.24,1), opacity .4s ease, box-shadow .4s ease;
  box-shadow:0 24px 50px rgba(0,0,0,.6); transform-origin:center; perspective:600px;
  animation:entrada var(--t-motion) cubic-bezier(.16,.84,.24,1) backwards;
  animation-delay:calc(.5s + var(--indice, 0) * 90ms);
}
/* Páginas de fondo CLARO: las tarjetas laterales no se desvanecen (el desvanecido dejaría pasar el fondo blanco y lavaría foto y texto) y la sombra es suave.
   Va ANTES de las reglas :hover/:focus para que estas sigan mandando. El atributo lo pone carta-tema.js a partir de lo que ya validó el motor. */
[data-fondo=claro] .cat-card{opacity:1 !important; box-shadow:0 16px 36px rgba(0,0,0,.22);}
[data-fondo=claro] .carrusel{padding-bottom:44px; margin-bottom:-36px;}   /* sitio para que la sombra no se corte en el borde del carrusel (el diseño no se mueve) */
.cat-card:first-child{margin-left:0;}
.cat-card:active{transform:scale(.97) !important;}
@media (hover:hover){
  .cat-card:hover{ box-shadow:0 30px 60px rgba(0,0,0,.65), 0 0 0 1px color-mix(in srgb, var(--t-accent) 45%, transparent); }
  .cat-card:hover img{ animation-play-state:paused; transform:scale(1.06); transition:transform .6s ease; }
}
.cat-card:focus-visible{ box-shadow:0 24px 50px rgba(0,0,0,.6), 0 0 0 2px var(--t-accent); }
@media (max-width:359px){
  .carrusel{padding:8px 10vw;}
  .cat-card{flex-basis:224px; height:320px; margin-left:-24px;}
}
.cat-card img{width:100%; height:100%; object-fit:cover; opacity:.78; animation:zoomAmbiental 11s ease-in-out infinite alternate; transition:transform .6s ease;}
.cat-card .cat-glass{position:absolute; left:0; right:0; bottom:0; padding:22px 22px 24px; color:var(--t-on-media); background:linear-gradient(0deg, rgba(var(--t-scrim-soft-rgb), calc(.92 * var(--t-scrim-k))) 0%, rgba(var(--t-scrim-soft-rgb), calc(.55 * var(--t-scrim-k))) 55%, transparent 100%); display:flex; flex-direction:column; gap:10px;}
.cat-glass .cat-numero{font-size:.68rem; letter-spacing:.16em; color:var(--t-on-media-accent); font-weight:500;}
.cat-glass .cat-fila{display:flex; justify-content:space-between; align-items:flex-end;}
.cat-glass .cat-textos h3{font-family:var(--t-font-title); font-weight:500; font-size:1.5rem; line-height:1.15; margin-bottom:4px;}
.cat-glass .cat-textos small{display:block; font-size:.68rem; color:var(--t-on-media-muted); text-transform:uppercase; letter-spacing:.06em;}
.cat-glass .cat-flecha{color:var(--t-on-media-accent); font-size:1rem; flex-shrink:0; margin-left:10px; transition:transform .3s ease;}
.cat-card:hover .cat-flecha{transform:translateX(4px);}
.dots{display:flex; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.08em; color:var(--t-text-muted);}
.dots .dot-linea{width:22px; height:1px; background:var(--t-line); position:relative; overflow:hidden;}
.dots .dot-linea.activo::after{content:''; position:absolute; inset:0; background:var(--t-accent);}
.estado{color:var(--t-text-muted); font-size:.85rem;}
.btn-instagram{width:40px; height:40px; border-radius:50%; border:1px solid var(--t-line); background:transparent; color:var(--t-text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.btn-instagram svg{width:20px; height:20px;}

/* ---- estado de error (slug ausente / inválido / restaurante inactivo / fallo de red) ---- */
#vista-error{min-height:100dvh; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:32px; background:var(--t-bg);}
#vista-error h2{font-size:1.3rem; color:var(--t-text);}
#vista-error p{color:var(--t-text-muted); font-size:.9rem; max-width:360px; line-height:1.5;}

/* ---- VISTA REEL ---- */
#vista-reel{position:fixed; inset:0; background:#000; color:var(--t-on-media); display:none; flex-direction:column; z-index:30; opacity:0; transform:scale(1.03); transition:opacity .55s cubic-bezier(.16,.84,.24,1), transform .55s cubic-bezier(.16,.84,.24,1);}
#vista-reel.activa{opacity:1; transform:scale(1);}
.reel-topline{display:flex; align-items:center; gap:24px; padding:16px 20px 14px; position:relative; z-index:3; overflow:hidden; background:linear-gradient(180deg, rgba(var(--t-scrim-rgb), calc(.6 * var(--t-scrim-k))) 0%, transparent 100%);}
.reel-header{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.btn-back{width:38px; height:38px; border-radius:50%; background:rgba(var(--t-scrim-chip-rgb), .45); backdrop-filter:blur(6px); border:1px solid rgba(var(--t-on-media-rgb), .18); color:var(--t-on-media); font-size:1.1rem; cursor:pointer; flex-shrink:0;}
/* nombre de la categoría como píldora del color de marca */
.reel-header h2{font-family:var(--t-font-body); font-size:.95rem; font-weight:600; white-space:nowrap; padding:6px 16px; border-radius:999px; background:var(--t-primary); color:var(--t-on-primary); border:1.5px solid rgba(var(--t-on-media-rgb), .85);}
.subtabs{position:relative; z-index:2; display:flex; align-items:center; gap:22px; overflow-x:auto; flex:1; min-width:0; -webkit-overflow-scrolling:touch;}
.subtabs::-webkit-scrollbar{display:none;}
.subtab{flex:0 0 auto; background:none; border:none; border-bottom:2px solid transparent; color:var(--t-on-media-muted); padding:6px 2px 10px; font-size:.85rem; font-weight:500; cursor:pointer; white-space:nowrap; transition:color .3s ease, border-color .3s ease;}
.subtab.activa{color:var(--t-on-media); border-color:var(--t-on-media-accent);}
.reel-scroll{flex:1; min-height:0; overflow-y:auto; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;}
.plato-slide{height:100%; scroll-snap-align:start; scroll-snap-stop:always; position:relative; flex-shrink:0; overflow:hidden;}
.media-bg{position:absolute; inset:0; overflow:hidden; z-index:0; background:#000;}
.media-bg video, .media-bg img{width:100%; height:100%; object-fit:cover; filter:blur(50px) brightness(.5) saturate(1.15); transform:scale(1.15);}
.media-fg{position:relative; z-index:1; height:100%; aspect-ratio:9/16; max-width:100%; margin:0 auto; overflow:hidden;}
.media-fg video, .media-fg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:zoomAmbiental 14s ease-in-out infinite alternate;}
/* ---- panel de info FIJO: no scrollea, solo cambia su contenido ---- */
.reel-info-fijo{position:absolute; left:0; right:0; top:0; bottom:var(--navbar-height, 66px); z-index:2; pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;}
.plato-overlay{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(var(--t-scrim-rgb), calc(.95 * var(--t-scrim-k))) 0%, rgba(var(--t-scrim-rgb), calc(.75 * var(--t-scrim-k))) 16%, rgba(var(--t-scrim-rgb), calc(.28 * var(--t-scrim-k))) 38%, rgba(var(--t-scrim-rgb), calc(.22 * var(--t-scrim-k))) 100%);}
.plato-info{position:relative; z-index:2; width:100%; padding:28px 24px 32px; pointer-events:auto; cursor:pointer; opacity:1; transition:opacity .3s ease;}
.plato-info.cambiando{opacity:0;}
.plato-info h3{font-family:var(--t-font-title); font-weight:500; font-size:1.9rem; line-height:1.1; margin-bottom:10px; text-shadow:0 2px 14px rgba(0,0,0,.8);}
.plato-info p{color:var(--t-on-media-soft); font-size:.86rem; max-width:min(480px, 100%); line-height:1.5; text-shadow:0 1px 8px rgba(0,0,0,.8); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.plato-precio{color:var(--t-on-media-soft); margin-top:12px; font-size:.9rem; text-shadow:0 1px 6px rgba(0,0,0,.8);}
.plato-precio b{color:var(--t-on-media); font-weight:700; font-size:1rem;}
/* botones de la ficha: «Más información» (contorno) y «Añadir» (color de marca) */
.plato-acciones{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.btn-info, .btn-add{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; font-family:var(--t-font-body); font-size:.88rem; font-weight:600; cursor:pointer; pointer-events:auto; white-space:nowrap; transition:transform .2s ease, background .2s ease, box-shadow .2s ease;}
.btn-info svg, .btn-add svg{width:17px; height:17px; flex-shrink:0;}
.btn-info{background:rgba(var(--t-scrim-chip-rgb), .35); backdrop-filter:blur(6px); border:1px solid rgba(var(--t-on-media-rgb), .55); color:var(--t-on-media);}
.btn-info:hover{background:rgba(var(--t-scrim-chip-rgb), .6);}
.btn-add{background:var(--t-primary); border:1px solid var(--t-primary); color:var(--t-on-primary); box-shadow:0 8px 22px rgba(0,0,0,.35);}
.btn-info:focus-visible, .btn-add:focus-visible{outline:2px solid var(--t-on-media); outline-offset:2px;}
@keyframes pulseChevron{ 0%,100%{transform:translateY(0); opacity:.5;} 50%{transform:translateY(6px); opacity:.9;} }
/* móvil/tablet: junto a los botones de la ficha, a la derecha; escritorio ancho: centrada abajo (ver media 1100) */
.btn-siguiente{position:absolute; right:14px; bottom:42px; z-index:2; background:none; border:none; color:var(--t-on-media); padding:6px; cursor:pointer; pointer-events:auto; animation:pulseChevron 2s ease-in-out infinite;}
.btn-siguiente svg{width:22px; height:22px; display:block;}
.btn-add:active, .btn-info:active{transform:scale(.95);}
.btn-add.agregado{background:var(--t-accent); border-color:var(--t-accent); color:var(--t-on-accent); transform:scale(1.06);}

/* ---- barra inferior (móvil) / cluster flotante (escritorio) ---- */
.navbar{position:fixed; bottom:0; left:0; right:0; z-index:60; display:flex; background:var(--t-bg); border-top:1px solid rgba(var(--t-text-rgb), .08); padding:10px 0 max(10px, env(safe-area-inset-bottom));}
.navbar button{flex:1; background:none; border:none; color:var(--t-text-soft); display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.64rem; font-family:var(--t-font-body); cursor:pointer; transition:color .2s ease;}
.navbar button:hover, .navbar button:focus-visible{color:var(--t-accent);}
.navbar svg{width:19px; height:19px;}
.badge{position:absolute; transform:translate(10px,-8px); background:var(--t-accent); color:var(--t-on-accent); font-size:.6rem; font-weight:700; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center;}
/* ---- toast de confirmación al añadir ---- */
.toast{position:fixed; left:50%; bottom:88px; transform:translate(-50%, 16px); background:rgba(var(--t-float-rgb), .94); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid rgba(var(--t-text-rgb), .14); border-radius:14px; padding:10px 16px; display:flex; align-items:center; gap:12px; z-index:70; opacity:0; pointer-events:none; transition:opacity .3s cubic-bezier(.16,.84,.24,1), transform .3s cubic-bezier(.16,.84,.24,1); max-width:min(90vw,380px); box-shadow:0 14px 34px rgba(0,0,0,.5);}
.toast.visible{opacity:1; transform:translate(-50%, 0);}
.toast img{width:36px; height:36px; border-radius:9px; object-fit:cover; flex-shrink:0;}
.toast span{font-size:.82rem; color:var(--t-text-soft); line-height:1.3;}
.toast strong{color:var(--t-text); font-weight:600;}

/* ---- modal genérico ---- */
.modal-overlay{position:fixed; inset:0; bottom:var(--navbar-height, 66px); background:rgba(var(--t-scrim-soft-rgb), calc(.4 * var(--t-scrim-k))); backdrop-filter:blur(20px) saturate(1.05); -webkit-backdrop-filter:blur(20px) saturate(1.05); z-index:50; display:none; align-items:flex-end;}
.menu-item{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid rgba(var(--t-sheet-ink-rgb), .08); cursor:pointer;}
.menu-item h3{margin:0; font-size:1rem;}
.menu-item .flecha{transition:transform .2s; color:var(--t-on-sheet-faint);}
.menu-item.abierta .flecha{transform:rotate(180deg);}
.menu-platos{display:none; padding-bottom:8px;}
.menu-platos.abierta{display:block;}
.menu-plato-fila{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid rgba(var(--t-sheet-ink-rgb), .06); align-items:flex-start;}
.menu-plato-foto{width:64px; height:64px; border-radius:10px; object-fit:cover; flex-shrink:0;}
.menu-plato-info{flex:1;}
.menu-plato-info h4{margin:0 0 4px; font-size:.95rem;}
.menu-plato-info p{margin:0 0 4px; font-size:.8rem; color:var(--t-on-sheet-muted); line-height:1.35;}
.menu-plato-precio{font-size:.85rem; font-weight:600;}
.menu-plato-alergenos{margin-top:4px; font-size:.9rem;}
.btn-ghost-add{align-self:flex-start; background:none; border:1px solid rgba(var(--t-sheet-ink-rgb), .15); border-radius:20px; padding:6px 14px; font-size:.78rem; font-weight:600; color:var(--t-on-sheet); white-space:nowrap; cursor:pointer; transition:background .2s ease;}
.btn-ghost-add:active{background:rgba(var(--t-sheet-ink-rgb), .06);}
.detalle-foto{width:100%; height:220px; object-fit:cover; border-radius:14px; margin-bottom:16px;}
.modal{background:var(--t-sheet); color:var(--t-on-sheet); width:100%; max-height:70vh; overflow-y:auto; border-radius:16px 16px 0 0; padding:22px 20px 30px;}
.modal h3{color:var(--t-on-sheet); font-family:var(--t-font-body); font-weight:600; font-size:1.1rem; margin-bottom:14px;}
.modal-close{float:right; background:none; border:none; font-size:1.2rem; cursor:pointer;}
.item-pedido{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 10px; padding:12px 0; border-bottom:1px solid rgba(var(--t-sheet-ink-rgb), .08);}
.item-pedido .item-nombre{flex:1 1 100%; font-size:.95rem;}
.item-pedido .item-fila-inferior{flex:1 1 100%; display:flex; justify-content:space-between; align-items:center;}
.stepper{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.stepper button{width:26px; height:26px; border-radius:6px; border:1px solid var(--t-sheet-control-line); background:var(--t-sheet-control); cursor:pointer; flex-shrink:0;}
.item-precio{white-space:nowrap; font-weight:500;}

/* ---- panel «Menú»: hoja inferior en móvil, panel lateral derecho en escritorio ---- */
.modal-panel .panel-menu{padding:0 0 24px; max-height:82vh; border-radius:20px 20px 0 0;}
.panel-cab{position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px 14px; background:var(--t-sheet); border-bottom:1px solid rgba(var(--t-sheet-ink-rgb), .1);}
.modal .panel-cab h3{margin:0; font-family:var(--t-font-title); font-size:1.45rem; font-weight:600;}
.btn-cerrar{width:40px; height:40px; border-radius:50%; flex-shrink:0; border:1px solid rgba(var(--t-sheet-ink-rgb), .25); background:none; color:var(--t-on-sheet); font-size:1rem; cursor:pointer;}
.btn-cerrar:hover{background:rgba(var(--t-sheet-ink-rgb), .07);}
.panel-chips{display:flex; gap:8px; overflow-x:auto; padding:14px 20px 2px; scrollbar-width:none;}
.panel-chips::-webkit-scrollbar{display:none;}
.panel-chips:empty{display:none;}
.chip-cat{flex:0 0 auto; padding:7px 15px; border-radius:999px; border:1px solid rgba(var(--t-sheet-ink-rgb), .22); background:none; color:var(--t-on-sheet-muted); font-family:var(--t-font-body); font-size:.82rem; font-weight:600; white-space:nowrap; cursor:pointer;}
.chip-cat.activa{background:var(--t-primary); border-color:var(--t-primary); color:var(--t-on-primary);}
#lista-menu{padding:0 20px;}
.panel-cat-titulo{margin:16px 0 0; font-size:.95rem; font-weight:700; color:var(--t-on-sheet-muted);}
.panel-menu .menu-plato-fila{gap:16px; padding:18px 0; border-bottom:1px solid rgba(var(--t-sheet-ink-rgb), .08);}
.panel-menu .menu-plato-fila:last-child{border-bottom:0;}
.panel-menu .menu-plato-foto{width:96px; height:96px; border-radius:14px; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.25);}
.panel-menu .menu-plato-info{min-width:0; display:flex; flex-direction:column; gap:4px;}
.panel-menu .menu-plato-info h4{margin:0; font-size:1.05rem; font-weight:700; cursor:pointer;}
.panel-menu .menu-plato-info p{margin:0; font-size:.84rem; line-height:1.4;}
.menu-plato-pie{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 12px; margin-top:8px;}
.panel-menu .menu-plato-precio{font-size:.92rem; font-weight:600;}
.panel-menu .menu-plato-precio b{font-weight:800;}
.btn-anadir{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; border:0; background:var(--t-primary); color:var(--t-on-primary); font-family:var(--t-font-body); font-size:.86rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:transform .2s ease;}
.btn-anadir svg{width:16px; height:16px;}
.btn-anadir:active{transform:scale(.95);}
.btn-anadir:focus-visible, .chip-cat:focus-visible, .btn-cerrar:focus-visible{outline:2px solid var(--t-focus, var(--t-accent)); outline-offset:2px;}

/* ---- «Más información»: cuadro compacto del plato (mismo lenguaje que el panel Menú) ---- */
.panel-detalle .detalle-cuerpo{padding:18px 20px 0; display:flex; flex-direction:column; gap:14px;}
.panel-detalle .detalle-foto{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:14px; margin:0;}
.detalle-desc{margin:0; font-size:.95rem; line-height:1.5; color:var(--t-on-sheet-desc, var(--t-on-sheet));}
.detalle-bloque h4{margin:0 0 4px; font-size:.95rem; font-weight:700;}
.detalle-bloque p{margin:0; font-size:.9rem; line-height:1.45; color:var(--t-on-sheet-muted);}
.detalle-pie{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding-top:4px;}
.detalle-precio-caja{display:flex; flex-direction:column; gap:2px;}
.detalle-precio-caja span{font-size:.9rem; color:var(--t-on-sheet-muted);}
.detalle-precio-caja b{font-size:1.05rem; font-weight:800;}
.panel-detalle .btn-anadir{padding:11px 20px; font-size:.92rem;}
.btn-compartir{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border-radius:14px; border:1px solid rgba(var(--t-sheet-ink-rgb), .2); background:none; color:var(--t-on-sheet); font-family:var(--t-font-body); font-size:.92rem; font-weight:600; cursor:pointer;}
.btn-compartir svg{width:17px; height:17px;}
.btn-compartir:hover{background:rgba(var(--t-sheet-ink-rgb), .06);}
.btn-compartir:focus-visible{outline:2px solid var(--t-focus, var(--t-accent)); outline-offset:2px;}

/* ---- ESCRITORIO ancho: ficha del plato como tarjeta a la derecha del vídeo y menú como panel lateral ---- */
@media (min-width:1100px){
  .reel-info-fijo{justify-content:center; align-items:flex-end; padding-right:4vw;}
  .plato-overlay{background:linear-gradient(90deg, transparent 50%, rgba(var(--t-scrim-rgb), calc(.35 * var(--t-scrim-k))) 100%);}
  .plato-info{width:min(440px, 30vw); padding:30px 32px; border-radius:20px; background:rgba(var(--t-scrim-chip-rgb), .58); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); border:1px solid rgba(var(--t-on-media-rgb), .14); box-shadow:0 24px 60px rgba(0,0,0,.45);}
  .plato-info h3{font-size:2.1rem;}
  .plato-info p{-webkit-line-clamp:4; text-shadow:none;}
  .modal-panel{justify-content:flex-end; align-items:stretch; background:rgba(var(--t-scrim-soft-rgb), calc(.15 * var(--t-scrim-k))); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
  .modal-panel .panel-menu{width:min(480px, 38vw); max-height:none; margin:20px 24px; border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.5); border:1px solid rgba(var(--t-sheet-ink-rgb), .1);}
  .panel-menu .menu-plato-foto{width:112px; height:112px;}
  .btn-siguiente{right:auto; left:calc(50% - 17px); bottom:16px;}
  /* el cuadro de «Más información» es más pequeño que el menú: flota a la derecha, centrado en alto */
  #modal-detalle{align-items:center;}
  #modal-detalle .panel-detalle{width:min(440px, 34vw); max-height:calc(100% - 40px); margin:0 24px; height:auto;}
}
@media (prefers-reduced-motion: reduce){ .btn-info, .btn-add, .btn-anadir{transition:none;} }
.total-row{display:flex; justify-content:space-between; font-weight:600; padding-top:12px; font-size:1.05rem;}


/* ---- PLANTILLAS DE INICIO (carta-inicio.js): hero · lateral · detalle. El carrusel original no usa nada de esto. ---- */
#vista-home.con-inicio{background:none; align-items:stretch; gap:0; padding-inline:0;}
#vista-home.con-inicio .btn-instagram{align-self:center; margin-top:14px;}
.inicio{width:100%; max-width:1240px; margin:0 auto; position:relative;}
.inicio .ini-contador{font-size:.78rem; letter-spacing:.22em; color:var(--t-accent); margin-bottom:10px;}
.inicio .ini-titulo{font-family:var(--t-font-title); font-weight:600; font-size:clamp(2.1rem, 5.6vw, 4.1rem); line-height:1.05; margin:0 0 14px;}
.inicio .ini-sub{font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px; opacity:.9;}
.inicio .ini-desc{max-width:36ch; line-height:1.55; opacity:.88; margin:0 0 20px;}
.inicio .ini-eyebrow{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--t-accent); margin:0 0 10px;}

/* ---- Etiqueta/Título/Texto de «Página de inicio», compartidos por carrusel · hero · lateral (detalle los pinta en su propia columna) ----
   #vista-home.con-inicio ya reserva un margen superior grande (pensado para el diseño sin este bloque); con el bloque presente
   sobra ese margen extra, así que se reduce al mínimo que sigue librando la barra superior fija. */
#vista-home.con-inicio.con-intro{padding-top:76px;}
.ini-intro-fija{max-width:640px; margin:0 auto; padding:0 16px; text-align:center;}
.ini-intro-fija .ini-eyebrow{margin-bottom:8px;}
.ini-intro-fija .ini-intro-titulo{font-family:var(--t-font-title); font-weight:600; font-size:clamp(1.5rem, 4vw, 2.3rem); line-height:1.15; margin:0 0 8px; color:var(--t-text);}
.ini-intro-fija .ini-intro-texto{font-size:.92rem; line-height:1.55; color:var(--t-text-soft); max-width:56ch; margin:0 auto;}
[data-fondo-img] .ini-intro-fija .ini-intro-titulo, [data-fondo-img] .ini-intro-fija .ini-intro-texto{color:var(--t-on-media);}
.inicio-hero .ini-intro-fija{max-width:640px; margin:0; padding:28px 28px 0; text-align:left; color:var(--t-on-media);}
.inicio-hero .ini-intro-fija .ini-intro-titulo{color:var(--t-on-media); text-shadow:0 2px 14px rgba(0,0,0,.7);}
.inicio-hero .ini-intro-fija .ini-intro-texto{color:var(--t-on-media-soft); text-shadow:0 1px 8px rgba(0,0,0,.6); margin:0; max-width:56ch;}
/* Lateral es asimétrica (texto a la izquierda, foto a la derecha): el bloque de arriba comparte el mismo margen
   izquierdo que el texto de cada categoría, en vez de ir centrado, para que quede todo alineado de arriba a abajo. */
.inicio-lateral .ini-intro-fija{text-align:left; margin:0; max-width:820px; padding:14px 28px 4px 55px;}   /* 55px = mismo margen que el texto de cada categoría (28 del cuerpo + 27 de su borde/sangría) */
.inicio-lateral .ini-intro-fija .ini-intro-texto{margin:0;}
.inicio-lateral .ini-intro-fija .ini-eyebrow{margin-bottom:4px;}
.inicio-lateral .ini-intro-fija .ini-intro-titulo{font-size:clamp(1.35rem, 3vw, 1.9rem); line-height:1.1; margin-bottom:4px;}
.inicio-lateral .ini-intro-fija .ini-intro-texto{font-size:.85rem; line-height:1.4;}
.inicio .ini-boton{border:1px solid currentColor; background:transparent; color:inherit; border-radius:999px; padding:12px 22px; display:inline-flex; gap:10px; align-items:center; font:inherit; cursor:pointer; transition:background .2s;}
.inicio .ini-boton:hover, .inicio .ini-boton:focus-visible{background:rgba(255,255,255,.14);}
.inicio .ini-card{position:relative; border-radius:var(--t-radius-card); overflow:hidden; border:1px solid var(--t-line); cursor:pointer; flex:0 0 auto; background:var(--t-media-stage); box-shadow:0 14px 34px rgba(0,0,0,.35); transition:transform .3s cubic-bezier(.16,.84,.24,1), opacity .3s, box-shadow .3s;}
.inicio .ini-card img{width:100%; height:100%; object-fit:cover; display:block; opacity:.92;}
.inicio .ini-card:hover{transform:translateY(-3px);}
.inicio .ini-card.activa{border-color:var(--t-on-media);}
.inicio .ini-glass{position:absolute; left:0; right:0; bottom:0; padding:14px 16px 16px; display:flex; justify-content:space-between; align-items:flex-end; gap:8px; color:var(--t-on-media); background:linear-gradient(0deg, rgba(var(--t-scrim-soft-rgb), calc(.92 * var(--t-scrim-k))) 0%, rgba(var(--t-scrim-soft-rgb), calc(.5 * var(--t-scrim-k))) 60%, transparent 100%);}
.inicio .ini-glass h3{font-family:var(--t-font-title); font-size:1.15rem; margin:2px 0;}
.inicio .ini-glass small{display:block; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t-on-media-muted);}
.inicio .ini-num{font-size:.62rem; letter-spacing:.18em; color:var(--t-on-media-accent);}
.inicio .ini-flecha{color:var(--t-on-media-accent);}
.inicio .ini-cuerpo > *{min-width:0;}
.inicio .ini-pie{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 24px 6px; font-size:.78rem; opacity:.85;}
.inicio-hero .ini-pie{color:var(--t-on-media);} .inicio-lateral .ini-pie, .inicio-detalle .ini-pie{color:var(--t-text);}
.inicio-lateral .ini-pie{padding-top:8px;}

/* HERO: la portada de la categoría activa a pantalla completa */
.inicio-hero .ini-fondo{position:fixed; inset:0; z-index:0; pointer-events:none;}
.inicio-hero .ini-fondo-img{position:absolute; inset:0; background-size:cover; background-position:center;}
.inicio-hero .ini-fondo::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.22) 100%), linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 45%);}
.inicio-hero .ini-cuerpo{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px; align-items:center; min-height:calc(100dvh - 200px - var(--intro-alto, 0px)); padding:0 28px; color:var(--t-on-media);}
.inicio-hero .ini-cards{display:flex; gap:14px; justify-content:flex-end; align-items:flex-end; align-self:end; padding-bottom:12px;}
.inicio-hero .ini-card{width:clamp(150px, 16vw, 210px); aspect-ratio:3/4;}

/* LATERAL: texto a la izquierda, tarjeta grande al centro y la siguiente atenuada */
.inicio-lateral .ini-cuerpo{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr); gap:44px; align-items:center; min-height:calc(100dvh - 240px - var(--intro-alto, 0px)); padding:0 28px;}
.inicio-lateral .ini-texto{border-left:1px solid var(--t-line); padding-left:26px; color:var(--t-text);}
.inicio-lateral .ini-cards{display:flex; gap:22px; align-items:center; justify-content:center;}
.inicio-lateral .ini-card.grande{width:clamp(170px, 18vw, 240px); aspect-ratio:3/4;}
.inicio-lateral .ini-card.lateral{width:clamp(100px, 12vw, 150px); aspect-ratio:3/4; opacity:.55;}
.inicio-lateral .ini-card.previa{display:none;}   /* en escritorio solo grande + siguiente; en móvil se muestra (ver MÓVIL) */
@keyframes ini-entra-der{from{transform:translateX(40px); opacity:.2;}}
@keyframes ini-entra-izq{from{transform:translateX(-40px); opacity:.2;}}
@keyframes ini-fade{from{opacity:0; transform:translateY(6px);}}
@media (prefers-reduced-motion:reduce){.inicio-lateral .ini-cards .ini-card, .inicio-lateral .ini-texto{animation:none !important;}}
.inicio-lateral .ini-dots{display:flex; justify-content:center; gap:10px; margin-top:8px;}
.inicio-lateral .ini-dot{width:34px; height:3px; border:0; border-radius:2px; background:var(--t-line); cursor:pointer; padding:0;}
.inicio-lateral .ini-dot.activo{background:var(--t-primary);}

/* DETALLE: vista previa grande con miniaturas y ficha a la derecha */
.inicio-detalle .ini-cuerpo{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:44px; align-items:center; min-height:calc(100dvh - 240px); padding:0 28px;}
.inicio-detalle .ini-preview{width:100%; aspect-ratio:16/10;}
.inicio-detalle .ini-thumbs{display:flex; gap:12px; margin-top:14px; overflow-x:auto; padding-bottom:4px;}
.inicio-detalle .ini-thumb{flex:0 0 132px; height:64px; position:relative; border:1px solid var(--t-line); border-radius:12px; overflow:hidden; padding:0; background:var(--t-media-stage); cursor:pointer; color:var(--t-on-media); font:inherit;}
.inicio-detalle .ini-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75;}
.inicio-detalle .ini-thumb span{position:absolute; left:10px; bottom:8px; font-size:.85rem; text-shadow:0 1px 4px rgba(0,0,0,.6);}
.inicio-detalle .ini-thumb.activa{border-color:var(--t-primary); box-shadow:0 0 0 1px var(--t-primary);}
.inicio-detalle .ini-der{color:var(--t-text);}
.inicio-detalle .ini-der .ini-titulo{font-size:clamp(1.8rem, 4vw, 2.7rem);}
.inicio-detalle .ini-acciones{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.inicio .ini-flecha-btn{width:42px; height:42px; border-radius:50%; border:1px solid var(--t-line); background:transparent; color:inherit; cursor:pointer; font-size:1.05rem;}
.inicio .ini-flecha-btn:hover{background:rgba(var(--t-text-rgb), .08);}
[data-fondo-img] .inicio-lateral .ini-texto, [data-fondo-img] .inicio-detalle .ini-der, [data-fondo-img] .inicio-lateral .ini-pie, [data-fondo-img] .inicio-detalle .ini-pie{color:var(--t-on-media);}

/* TABLET */
@media (max-width:1000px){
  .inicio-hero .ini-cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:20px;}
  .inicio-lateral .ini-cuerpo{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:28px;}
  .inicio-detalle .ini-cuerpo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px;}
}
/* MÓVIL */
@media (max-width:700px){
  #vista-home.con-inicio{padding-top:calc(64px + 2vh);}
  #vista-home.con-inicio.con-intro{padding-top:64px;}
  .inicio-hero .ini-cuerpo{grid-template-columns:1fr; align-content:end; gap:18px; min-height:calc(100dvh - 190px - var(--intro-alto, 0px)); padding:0 18px 8px;}
  .inicio-hero .ini-intro-fija{padding:12px 18px 0;}
  .inicio-lateral .ini-intro-fija{padding:10px 18px 4px;}
  .inicio-hero .ini-cards{justify-content:flex-start; overflow-x:auto; padding-bottom:8px; margin-inline:-18px; padding-inline:18px;}
  .inicio-hero .ini-card{width:132px;}
  .inicio-lateral .ini-cuerpo, .inicio-detalle .ini-cuerpo{grid-template-columns:1fr; gap:14px; min-height:0; padding:0 18px;}
  /* móvil: tarjeta grande centrada con un trozo de la anterior y la siguiente; se cambia deslizando el dedo */
  .inicio-lateral .ini-cards{order:-1; gap:12px; overflow:hidden; justify-content:center; margin-inline:-18px; padding:6px 0 10px; touch-action:pan-y;}
  .inicio-lateral .ini-card.grande{width:min(58vw, 240px);}
  .inicio-lateral .ini-card.lateral{width:min(26vw, 110px); opacity:.45; transform:scale(.92);}
  .inicio-lateral .ini-card.previa{display:block;}
  .inicio-lateral .ini-card.lateral .ini-glass{display:none;}
  .inicio-lateral .ini-cards.mov-sig .ini-card{animation:ini-entra-der .32s cubic-bezier(.16,.84,.24,1);}
  .inicio-lateral .ini-cards.mov-ant .ini-card{animation:ini-entra-izq .32s cubic-bezier(.16,.84,.24,1);}
  .inicio-lateral .ini-texto{animation:ini-fade .32s ease;}
  .inicio-lateral .ini-texto{border-left:0; padding-left:0;}
  .inicio .ini-contador{margin-bottom:6px;}
  .inicio .ini-titulo{font-size:1.6rem; line-height:1.15; margin-bottom:8px;}
  .inicio .ini-sub{margin-bottom:8px;}
  .inicio .ini-desc{margin-bottom:0; line-height:1.4;}
  .inicio-detalle .ini-preview{aspect-ratio:4/5;}
  .inicio-detalle .ini-thumb{flex-basis:108px;}
  .inicio .ini-pie{padding:14px 18px 4px; flex-wrap:wrap;}
}


/* ---- Redes sociales (fila bajo el contenido, en todas las plantillas) ---- */
.redes{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:18px; padding:0 18px; position:relative; z-index:1;}
#vista-home:has(.inicio-lateral) .redes{margin-top:8px;}
#vista-home.con-inicio .redes{align-self:center;}
.btn-red{width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--t-text); border:1px solid rgba(var(--t-text-rgb), .28); background:rgba(var(--t-text-rgb), .07); transition:background .2s, transform .2s;}
.btn-red:hover, .btn-red:focus-visible{background:rgba(var(--t-text-rgb), .16); transform:translateY(-2px);}
[data-fondo-img] .btn-red, [data-hero] .btn-red{color:var(--t-on-media); border-color:rgba(var(--t-on-media-rgb), .4); background:rgba(0,0,0,.28);}
/* Con imagen (fondo propio o portada a pantalla completa) la cabecera se oscurece en NEGRO y no se tiñe con el color de fondo del tema */
[data-fondo-img] .topbar, [data-hero] .topbar{background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 100%);}
[data-hero] .brand-name{color:var(--t-on-media);} [data-hero] .brand-tagline{color:var(--t-on-media-muted);} [data-hero] .brand-glifo{color:var(--t-on-media-accent);}
/* sin barras de desplazamiento visibles en las filas que se deslizan */
.inicio .ini-cards, .inicio .ini-thumbs{scrollbar-width:none;}
.inicio .ini-cards::-webkit-scrollbar, .inicio .ini-thumbs::-webkit-scrollbar{display:none;}
.inicio .ini-pie .ini-desliza{margin-left:auto;}

/* ---- sectores distintos de restaurante: línea de detalle (horario, duración…) bajo la descripción ---- */
.plato-info p.plato-detalle{margin-top:5px; font-weight:600; font-size:.8rem; letter-spacing:.01em; -webkit-line-clamp:1;}
.menu-plato-info .plato-detalle{font-size:.74rem; opacity:.85; margin:2px 0 4px;}