/* =========================================================
   IZAKAYA SENRO · aspecto de la portada (index.html)
   Idea: «cartel de andén». La taberna está junto a las vías: la portada es un cartel de estación a color plano (P33),
   los turnos salen en un tablero de salidas (A30), la reserva se enseña como un billete sellado (R7), la carta pasa
   como un rótulo (A21) y el cierre es el cartel de la puerta (C11). En el móvil, barra inferior tipo app (M6).
   ========================================================= */

body { background: var(--c-bg); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.005em; text-transform: uppercase; line-height: .95; }
h2 { font-size: clamp(2.25rem, 5.4vw, 4.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.eyebrow { color: var(--c-brand); font-weight: 600; letter-spacing: .18em; }
.lead { color: var(--c-muted); }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.btn { border-radius: var(--radius); font-weight: 600; letter-spacing: .02em; }
.btn--ghost { border: 2px solid var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-bg); }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
:focus-visible { outline: .1875rem solid var(--c-brand); outline-offset: .1875rem; }

/* ---------- Cabecera ---------- */
.header { background: var(--c-bg); border-bottom: 2px solid var(--c-ink); }
.header.is-scrolled { border-bottom-color: var(--c-ink); }
.logo { font: 800 1.75rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink); gap: .5rem; }
.logo-mark { width: 2rem; height: 2rem; border-radius: var(--radius); background: var(--c-ink); }
.logo-mark svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--c-bg); stroke-width: 2; }
.nav a:not(.btn) { font: 600 1.0625rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--c-ink); }
.nav a:not(.btn):hover { color: var(--c-brand); }

/* ---------- P33 · El cartel ---------- */
.cartel { position: relative; background: var(--c-farol); color: #fff8ec; padding: clamp(1.25rem, 3vw, 2.25rem) 0; overflow: hidden; }
.cartel .wrap { position: relative; min-height: min(calc(100svh - var(--header-h) - 3.5rem), 52rem); display: grid; grid-template-rows: auto 1fr auto; gap: clamp(1rem, 3vw, 2.5rem); }
.cartel .franja { display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; padding-bottom: .75rem; border-bottom: 2px solid currentColor; font: 600 .875rem/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; }
.cartel-titulo { align-self: center; margin: 0; max-width: 11ch; font: 800 clamp(3.5rem, 13vw, 12rem)/.84 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.cartel-titulo .l { display: inline-block; }
.cartel-titulo .hueca { color: transparent; -webkit-text-stroke: max(2px, .025em) var(--c-carbon); }
.js .cartel-titulo .l { animation: subir .9s cubic-bezier(.2,.7,.1,1) both; }
.js .cartel-titulo .l2 { animation-delay: .08s; } .js .cartel-titulo .l3 { animation-delay: .16s; } .js .cartel-titulo .l4 { animation-delay: .24s; }
@keyframes subir { from { opacity: 0; transform: translateY(.35em); } }
.cartel .pie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 1rem 1.75rem; align-items: end; padding-top: .875rem; border-top: 2px solid currentColor; font-size: 1rem; }
.cartel .pie p { margin: 0; }
.cartel .pie b { display: block; font: 600 .8125rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; margin-bottom: .3rem; }
.cartel .pie a:not(.btn) { color: inherit; text-underline-offset: .2em; }
.btn--cartel { background: var(--c-carbon); color: #fff8ec; font-size: 1.125rem; min-height: 3.5rem; padding: 0 1.75rem; }
.btn--cartel:hover { background: #000; }
.sello-giro { position: absolute; right: 0; top: 50%; width: clamp(8rem, 15vw, 12.5rem); aspect-ratio: 1; transform: translateY(-50%) rotate(-8deg); color: #fff8ec; }
.sello-giro svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 26s linear infinite; overflow: visible; }
.sello-giro text { font: 600 .66rem var(--f-body); letter-spacing: .28em; text-transform: uppercase; fill: currentColor; }
.sello-giro img { position: absolute; inset: 20%; width: 60%; height: 60%; border-radius: 50%; object-fit: cover; border: .1875rem solid var(--c-carbon); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- A21 · Rótulo que pasa ---------- */
.cinta-anden { background: var(--c-carbon); color: #f2ead8; padding: .9rem 0; border-block: 2px solid var(--c-carbon); }
.cinta-anden .m-cinta { --m-hueco: 2.75rem; }
.cinta-anden span { font: 600 clamp(1.125rem, 1.8vw, 1.5rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; display: inline-flex; gap: .6em; align-items: center; }
.cinta-anden span::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-farol); margin-left: 2.1rem; }
.cinta-anden b { color: #ff9b8a; font-weight: 600; }

/* ---------- A30 · Tablero de salidas y R7 · billete ---------- */
.tablero-rejilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.tablero { margin-top: 2rem; background: var(--c-carbon); color: #f2ead8; border-radius: var(--radius-lg); padding: .5rem 1.125rem 1rem; --m-paleta-fondo: #2e2c29; --m-paleta-texto: #fff8ec; }
.tablero-fila { display: grid; grid-template-columns: 7.5rem 7rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid #3a3733; font: 600 clamp(1.125rem, 1.7vw, 1.375rem)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.tablero-fila:last-child { border-bottom: 0; }
.tablero-fila > span:last-child { font: 500 1rem/1.3 var(--f-body); text-transform: none; letter-spacing: 0; color: #d9cfbb; }
.tablero-cab { font: 600 .75rem/1 var(--f-body); letter-spacing: .18em; color: #b9ad95; padding: .6rem 0; }
.tablero-cab > span:last-child { font: inherit; color: inherit; text-transform: uppercase; letter-spacing: .18em; }
.tablero-barra { color: #ff9b8a; }

.billete { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); transform: rotate(2deg); position: relative; }
.billete-cuerpo { padding: 1.5rem 1.5rem 1.25rem; border-bottom: 2px dashed var(--c-line); position: relative; }
.billete-cuerpo::before, .billete-cuerpo::after { content: ""; position: absolute; bottom: -.75rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-bg); }
.billete-cuerpo::before { left: -.75rem; } .billete-cuerpo::after { right: -.75rem; }
.billete-cab { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; font: 600 .75rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.billete-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 0; }
.billete-datos dt { font: 600 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.billete-datos dd { margin: .3rem 0 0; font: 800 clamp(2.25rem, 4vw, 3.25rem)/1 var(--f-display); text-transform: uppercase; }
.billete-pasos { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: .5rem; }
.billete-pasos li { counter-increment: p; display: flex; gap: .75rem; align-items: baseline; font-weight: 500; }
.billete-pasos li::before { content: counter(p); font: 700 1rem/1 var(--f-display); width: 1.6rem; height: 1.6rem; display: inline-grid; place-items: center; border: 2px solid var(--c-ink); border-radius: 50%; flex: none; }
.billete-talon { padding: 1.25rem 1.5rem 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.billete-talon p { margin: 0; color: var(--c-muted); font-size: .9375rem; }
.billete-sello { display: grid; place-items: center; width: 6.25rem; height: 6.25rem; border-radius: 50%; border: .1875rem double var(--c-brand); color: var(--c-brand); font: 800 1rem/1 var(--f-display); text-transform: uppercase; text-align: center; letter-spacing: .04em; transform: rotate(-14deg); }

/* ---------- Carta ---------- */
.carta-sec { background: var(--c-surface); border-block: 2px solid var(--c-ink); }
.carta-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-bottom: 2.5rem; }
.carta-cabeza h2 { margin: 0; }
.carta-nota { margin: 0; max-width: 34rem; color: var(--c-muted); }
.carta-filtros { gap: .375rem; }
.carta-filtro { border: 2px solid var(--c-ink); border-radius: var(--radius); font: 600 1.0625rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.carta-filtro[aria-pressed="true"] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.carta-grupo > h3 { display: flex; align-items: center; gap: 1rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.carta-grupo > h3::after { content: ""; flex: 1; height: 2px; background: var(--c-ink); }
.carta-rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.75rem 1.5rem; }
.carta-foto { border-radius: var(--radius); }
.carta-cab h4 { font: 700 1.375rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.carta-precio { font: 700 1.375rem/1 var(--f-display); color: var(--c-brand); }
.carta-prod.sin-foto { order: 2; border-top: 2px solid var(--c-ink); padding-top: .875rem; }
.carta-alergenos { text-transform: lowercase; }
.carta-alergenos::first-letter { text-transform: uppercase; }

/* ---------- La taberna ---------- */
.taberna-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.taberna-foto { margin: 0; aspect-ratio: 7 / 5; overflow: hidden; border-radius: var(--radius-lg); }
.taberna-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vias { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--c-ink); }
.vias li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--c-line); }
.vias h3 { margin: 0 0 .2rem; }
.vias p { margin: 0; color: var(--c-muted); }
.via { display: inline-block; justify-self: start; background: var(--c-ink); color: var(--c-bg); font: 700 .9375rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; padding: .4rem .55rem; border-radius: var(--radius); }

/* ---------- Preguntas ---------- */
.faq-sec { background: var(--c-surface-2); }
.faq-rejilla { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq { max-width: none; border-top: 2px solid var(--c-ink); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; font: 700 clamp(1.25rem, 2vw, 1.5rem)/1.15 var(--f-display); text-transform: uppercase; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.75rem; font-weight: 500; color: var(--c-brand); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 1.375rem; color: var(--c-muted); max-width: 62ch; }

/* ---------- Cómo llegar · C11 ---------- */
.llegar { background: var(--c-bg); border-top: 2px solid var(--c-ink); }
.c11-cartel { --c11-papel: var(--c-carbon); --c11-tinta: #fff8ec; box-shadow: var(--shadow); }
.c11-cartel .c11-horas li.hoy { background: var(--c-farol); color: #fff8ec; }
.c11-estado { font: 800 clamp(3.25rem, 8vw, 5rem)/.9 var(--f-display); }
.llegar-titulo { margin: 0; }
.c11-tel { font: 700 clamp(2.25rem, 5vw, 3.5rem)/1 var(--f-display); color: var(--c-brand); }
.cierres { font-size: .9375rem; }
.llegar-mapa { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; margin-top: clamp(3rem, 6vw, 5rem); }
.vias-foto { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); }
.vias-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.llegar-mapa .map { border-radius: var(--radius-lg); min-height: 16rem; }

/* ---------- Pie ---------- */
.footer { border-top: 2px solid var(--c-ink); color: var(--c-muted); }

/* ---------- M6 · barra inferior en el móvil ---------- */
.barra-app { display: none; }

@media (max-width: 860px) {
  .tablero-rejilla, .taberna-rejilla, .faq-rejilla, .llegar-mapa { grid-template-columns: minmax(0, 1fr); }
  .billete { max-width: 26rem; transform: rotate(1deg); }
  .cartel .wrap { min-height: 0; gap: 1.75rem; }
  .cartel-titulo { font-size: 18vw; padding: 1.25rem 0 .5rem; max-width: none; }
  .cartel .franja { flex-direction: column; gap: .25rem; padding-right: 6.5rem; }
  .cartel .pie { grid-template-columns: 1fr 1fr; }
  .cartel .pie .btn { grid-column: 1 / -1; }
  .sello-giro { top: .25rem; transform: rotate(-8deg); width: 5.75rem; }
  .tablero-fila { grid-template-columns: 5.75rem 4.75rem minmax(0, 1fr); gap: .625rem; }

  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .barra-app { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--c-carbon); padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom)); border-top: 2px solid var(--c-carbon); }
  .barra-app a { display: grid; justify-items: center; gap: .2rem; min-height: 3.5rem; align-content: center; color: #f2ead8; text-decoration: none;
    font: 600 .875rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius); }
  .barra-app svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .barra-app .barra-app-reservar { background: var(--c-farol); color: #fff8ec; }
  .header .nav .btn { display: none; }
}

@media (max-width: 600px) {
  .carta-rejilla { gap: 0; }
  .carta-prod { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--c-line); }
  .carta-prod.sin-foto { display: flex; padding-top: 1rem; border-top: 1px solid var(--c-line); }
  .carta-foto { aspect-ratio: 1; margin: 0; }
}

@media (max-width: 480px) {
  .cartel .pie { grid-template-columns: 1fr; }
  .billete-datos dd { font-size: 2.25rem; }
  .tablero { padding-inline: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .cartel-titulo .l { animation: none; }
  .sello-giro svg { animation: none; }
}

/* ===== Pantallas grandes (14 oct 2026; herramientas/pantallas-grandes.mjs) =====
   Hasta 1440 px de ancho la web es idéntica. Por encima, la letra raíz crece en proporción (letra, espacios y
   medidas van en rem) hasta el 150 % a 2840 px, y el contenido ocupa al menos el 70 % de la pantalla: en una
   pantalla 2K o 4K se ve como en un portátil, solo que más grande, en vez de quedar apretado en el centro. */
html:not(:has([data-login])) { font-size: clamp(100%, calc(100% + (100vw - 1440px) * .005714), 150%); } /* el panel (admin.html) no crece */