/* public/assets/css/main.css */
/* Bebas Neue servida desde el propio servidor (antes Google Fonts con
   display=swap: al cambiar de página se veía otra fuente un instante).
   font-display:block + <link rel="preload"> en el <head>: el texto espera a
   la fuente buena en vez de pintar una sustituta. */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Anton (títulos) y Karla (texto) en WOFF2 desde el propio servidor, con
   font-display:block + preload: sin cambio de fuente al cargar la página. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: block;
  src: url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: block;
  src: url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root { --bg:#FFFFFF; --ink:#000000; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:'Karla', ui-sans-serif, system-ui, sans-serif; }
/* Nunca se parte una palabra ni se pone guion al saltar de línea: el texto salta solo entre palabras completas */
body { hyphens:manual; -webkit-hyphens:manual; overflow-wrap:normal; word-break:normal; }
/* Footer pegado al borde inferior cuando la pagina es mas corta que la
   pantalla; si es mas larga, queda al final del scroll. Solo web publica. */
body:has(> .site-footer) { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body:has(> .site-footer) > main { flex:1 0 auto; }
body:has(> .site-footer) > .site-footer { flex-shrink:0; }

.marquee-row { overflow:hidden; white-space:nowrap; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:.4rem 0; }
.marquee-row.invert { background:var(--ink); color:#fff; }
.marquee-track { display:inline-flex; animation: marquee 40s linear infinite; }
.marquee-row.reverse .marquee-track { animation-direction: reverse; }
.marquee-track span { font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(1.25rem, 4vw, 2.5rem); padding:0 .7em; }
@keyframes marquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation:none; } }

.event-grid { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--ink); }
.event-card { border-right:1px solid var(--ink); padding:1rem; }
.event-card:last-child { border-right:none; }
.event-card img { width:100%; height:auto; display:block; }
.event-card h3 { font-family:'Anton', sans-serif; text-transform:uppercase; font-size:clamp(1.0625rem, 2.2vw, 1.25rem); }

@media (max-width: 700px) {
  .event-grid { grid-template-columns:1fr; }
  .event-card { border-right:none; border-bottom:1px solid var(--ink); }
}

.age-gate-overlay { position:fixed; inset:0; background:var(--ink); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:999; text-align:center; padding:2rem; }
.age-gate-overlay button { font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.2rem; padding:.8rem 1.6rem; margin:.5rem; border:2px solid #fff; background:transparent; color:#fff; cursor:pointer; }
.age-gate-overlay button.exit { opacity:.6; }

/* ---- Sala Equis-style editorial grid system (blanco y negro estricto) ---- */

.poster-title { margin:0; padding:.4rem 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(1.75rem, 7vw, 3.25rem); line-height:1.05; }

/* Titulo de seccion (H2): un nivel por debajo de .poster-title (H1) — antes
   ambos compartian .poster-title y en movil renderizaban al mismo tamano. */
.section-title { margin:0; padding:.4rem 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(1.375rem, 4vw, 2rem); line-height:1.15; }

.nav-cell { display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.2rem; border-right:1px solid var(--ink); font-family:'Karla', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.03em; text-decoration:none; color:var(--ink); background:var(--bg); }
.nav-cell:last-child { border-right:none; }
.nav-cell:hover, .nav-cell.active { background:var(--ink); color:#fff; }

.hero-split { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--ink); position:relative; }
.hero-split .hero-panel { position:relative; overflow:hidden; border-right:1px solid var(--ink); aspect-ratio:16/9; }
.hero-split .hero-panel:last-child { border-right:none; }
.hero-split .hero-panel img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-split .hero-panel figcaption { position:absolute; left:0; right:0; bottom:0; padding:.5rem 1rem; background:rgba(0,0,0,.7); color:#fff; font-family:'Anton', sans-serif; text-transform:uppercase; }
@media (max-width:700px) { .hero-split { grid-template-columns:1fr; } .hero-split .hero-panel { border-right:none; border-bottom:1px solid var(--ink); } .hero-split .hero-panel:last-child { border-bottom:none; } }

/* Ficha de evento público: imagen + datos, 2 columnas en escritorio, 1 en móvil */
.event-detail-grid { display:grid; grid-template-columns:1fr 1fr; }
.event-detail-media { border-right:1px solid var(--ink); }
.event-detail-table { width:100%; border-collapse:collapse; }
.event-detail-table td { padding:.8rem; border:1px solid var(--ink); }
@media (max-width:700px) {
  .event-detail-grid { grid-template-columns:1fr; }
  .event-detail-media { border-right:none; border-bottom:1px solid var(--ink); }
  .event-detail-table { display:block; }
  .event-detail-table tr { display:flex; flex-direction:column; }
  .event-detail-table td { border-left:none; border-right:none; }
  .event-detail-table tr:first-child td:first-child { border-top:none; }
}

.listing-table { width:100%; border-collapse:collapse; border-top:1px solid var(--ink); }
.listing-table tr { border-bottom:1px solid var(--ink); }
.listing-table td { padding:1rem; vertical-align:middle; border-right:1px solid var(--ink); }
.listing-table td:last-child { border-right:none; text-align:right; }
.listing-table .listing-thumb { width:120px; }
.listing-table .listing-thumb img, .listing-table .listing-thumb .category-placeholder { width:120px; height:168px; }
.listing-table .listing-thumb img { object-fit:cover; display:block; }
.listing-table .listing-title { font-family:'Anton', sans-serif; text-transform:uppercase; font-size:30px; }
.listing-table .listing-meta { display:block; font-family:'Karla', sans-serif; font-size:.85rem; opacity:.7; margin-top:.2rem; }
.listing-table .listing-action { display:inline-block; padding:.6rem 1rem; border:1px solid var(--ink); text-decoration:none; color:var(--ink); text-transform:uppercase; font-weight:600; }
.listing-table .listing-action:hover { background:var(--ink); color:#fff; }

.category-placeholder { display:flex; align-items:center; justify-content:center; background:var(--bg); border:1px solid var(--ink); font-family:'Anton', sans-serif; font-size:1.4rem; color:var(--ink); aspect-ratio:1/1; }

.form-card { max-width:420px; margin:2rem auto; border:1px solid var(--ink); padding:2rem; }
.form-card h1 { font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.8rem; margin-top:0; }
.form-card label { display:block; margin-bottom:1rem; font-family:'Karla', sans-serif; font-weight:600; text-transform:uppercase; font-size:.8rem; letter-spacing:.05em; }
.form-card input { display:block; width:100%; margin-top:.4rem; padding:.7rem; font-size:1rem; border:none; border-bottom:2px solid var(--ink); background:var(--bg); color:var(--ink); }
.form-card input:focus { outline:none; border-bottom-color:var(--ink); background:rgba(0,0,0,.05); }
.form-card button, .form-card-btn { width:100%; padding:.8rem; background:var(--ink); color:#fff; border:none; text-transform:uppercase; font-weight:700; letter-spacing:.05em; cursor:pointer; }
.form-card button:hover, .form-card-btn:hover { opacity:.85; }
.form-card .form-message { padding:.8rem; margin-bottom:1rem; background:var(--ink); color:#fff; }

.hamburger-btn { position:fixed; top:1rem; right:1rem; z-index:1002; width:2.6rem; height:2.6rem; border:1px solid var(--ink); background:var(--bg); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer; }
.hamburger-btn:hover { background:var(--ink); color:#fff; }

.maintenance-badge { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2; }
.maintenance-badge img { width:clamp(130px,22vw,220px); }

/* ---- Panel lateral (drawer) compartido: login de mantenimiento + nav pública ---- */

.drawer-backdrop {
  position:fixed; inset:0; z-index:1000;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.drawer-backdrop.is-open { opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s linear 0s; }

.drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:1001;
  width:min(90vw, 380px);
  background:var(--bg); border-left:1px solid var(--ink);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .3s ease;
}
.drawer.is-open { transform:translateX(0); }
.drawer .drawer-inner { padding:4.5rem 1.5rem 1.5rem; }

/* Dentro del drawer, la tarjeta de login pierde su propio marco (el drawer ya hace de marco) */
.drawer .form-card { margin:0; max-width:none; border:none; padding:0; }
/* Login del area de cliente: sin marco. */
.form-card[data-cuenta-login] { border:none; }
/* Que el atributo hidden gane a los display:block de .form-card (campo contrasena del login). */
.form-card [hidden] { display:none !important; }
/* Aviso "no tienes contrasena": texto negro sobre gris claro. */
.form-card .form-message[data-cuenta-login-sin-password] { background:#EEEEEE; color:#000; }
/* Oculto a la vista pero legible por lectores de pantalla. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Dentro del drawer, los enlaces de nav se apilan en vertical en vez de en fila */
.drawer .nav-cell { display:flex; width:100%; border-right:none; border-bottom:1px solid var(--ink); justify-content:flex-start; padding:1rem .2rem; }
.drawer .nav-cell:last-child { border-bottom:none; }

/* ---- Cabecera, menú hamburguesa y footer públicos (calcados de salaequis.es) ----
   Escritorio: cabecera fija de 75px (logo 20% + celdas de menú de igual ancho +
   hamburguesa) y footer fijo abajo; el body reserva su altura con padding.
   Móvil (<=1024px): cabecera de 68px con logo centrado, el menú se abre a
   pantalla completa bajo la cabecera y el footer deja de ser fijo. */
:root { --site-header-h:75px; --site-footer-h:48px; }
/* Los anclajes (#apuntarme) no quedan bajo la cabecera fija; en movil la variable pasa a 68px. */
html { scroll-padding-top:var(--site-header-h, 75px); }
body.has-site-header { padding-top:var(--site-header-h); padding-bottom:var(--site-footer-h); }
.site-header { position:fixed; top:0; left:0; width:100%; height:var(--site-header-h); display:flex; align-items:stretch; border-bottom:1px solid var(--ink); background:var(--bg); z-index:60; }
.site-header-brand { flex:0 0 20%; display:flex; align-items:center; justify-content:center; padding:0 1rem; border-right:1px solid var(--ink); font-family:'Anton', sans-serif; text-transform:uppercase; font-size:clamp(1.2rem, 2vw, 1.8rem); color:inherit; text-decoration:none; white-space:nowrap; }
.site-header-nav { flex:1 1 auto; display:flex; align-items:stretch; min-width:0; }
/* Hasta dos lineas centradas ("PROGRAMACIÓN SEPTIEMBRE", categorias largas) en vez de cortar con ellipsis. */
.site-header-nav .nav-cell { flex:1 1 0; min-width:0; padding:0 .6rem; display:flex; align-items:center; justify-content:center; text-align:center; white-space:normal; overflow:hidden; line-height:1.15; font-size:.9rem; border-right:1px solid var(--ink); }
.site-header-nav--muchas .nav-cell { font-size:.8rem; padding:0 .4rem; }
.site-header-nav .nav-cell:last-child { border-right:1px solid var(--ink); }
.site-hamburger { flex:0 0 var(--site-header-h); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:0; border:0; background:var(--bg); color:var(--ink); cursor:pointer; }
.site-hamburger-bar { display:block; width:26px; height:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease; }
.site-hamburger:hover, .site-hamburger[aria-expanded="true"] { background:var(--ink); color:#fff; }
.site-hamburger[aria-expanded="true"] .site-hamburger-bar:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.site-hamburger[aria-expanded="true"] .site-hamburger-bar:nth-child(2) { opacity:0; }
.site-hamburger[aria-expanded="true"] .site-hamburger-bar:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
.site-hamburger:focus-visible, .site-menu-link:focus-visible, .site-header-nav .nav-cell:focus-visible, .site-footer .nav-cell:focus-visible { outline:2px solid currentColor; outline-offset:-4px; }

.site-menu { position:fixed; top:var(--site-header-h); right:0; z-index:59; width:min(90vw, 380px); max-height:calc(100vh - var(--site-header-h)); overflow-y:auto; background:var(--bg); border-left:1px solid var(--ink); border-bottom:1px solid var(--ink); transform:translateX(100%); visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s; }
.site-menu.is-open { transform:translateX(0); visibility:visible; transition:transform .3s ease, visibility 0s linear 0s; }
.site-menu ul { list-style:none; margin:0; padding:0; }
.site-menu li { border-bottom:1px solid var(--ink); }
.site-menu li:last-child { border-bottom:none; }
.site-menu form { margin:0; }
.site-menu-link { display:block; width:100%; padding:1rem 1.2rem; font:600 1rem 'Karla', sans-serif; text-transform:uppercase; letter-spacing:.03em; text-align:left; color:var(--ink); background:var(--bg); border:0; text-decoration:none; cursor:pointer; }
.site-menu-link:hover, .site-menu-link.active { background:var(--ink); color:#fff; }
.site-menu-nav { display:none; }
.site-menu-cuenta { padding:1.2rem; }
.site-menu-cuenta ul { margin:0 -1.2rem -1.2rem; border-top:1px solid var(--ink); }
.site-menu-title { margin:0 0 1rem; font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.4rem; }
.site-menu-sesion { margin:0 0 1rem; font-size:.85rem; word-break:break-all; }
.site-menu .form-card { margin:0; max-width:none; border:none; padding:0; }

.site-footer { position:fixed; bottom:0; left:0; width:100%; height:var(--site-footer-h); border-top:1px solid var(--ink); background:var(--bg); z-index:10; }
.site-footer-nav { display:flex; height:100%; }
.site-footer-nav .nav-cell { flex:1 1 0; min-width:0; padding:0 .5rem; font-size:.8rem; }
/* display:block: text-overflow no actua sobre el inline-flex heredado de .nav-cell. */
.site-footer .nav-cell { display:block; text-align:center; line-height:var(--site-footer-h); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:1024px) {
  :root { --site-header-h:68px; }
  body.has-site-header { padding-bottom:0; }
  .site-header { justify-content:center; }
  .site-header-brand { flex:0 1 auto; margin:0 auto; border-right:none; font-size:1.5rem; }
  .site-header-nav { display:none; }
  .site-hamburger { position:absolute; top:0; right:0; width:var(--site-header-h); height:100%; }
  .site-menu { width:100%; height:calc(100vh - var(--site-header-h)); height:calc(100dvh - var(--site-header-h)); max-height:none; border-left:none; border-bottom:none; }
  .site-menu-nav { display:block; }
  .site-menu-nav li:last-child { border-bottom:1px solid var(--ink); }
  .site-menu-link { font-size:18px; padding:1.1rem 1rem; }
  .site-menu-cuenta { display:none; }
  html.site-menu-open, html.site-menu-open body { overflow:hidden; }
  .site-footer { position:relative; height:auto; }
  .site-footer-nav { flex-direction:column; }
  .site-footer .nav-cell { display:block; padding:1rem; text-align:center; line-height:1.3; border-right:none; border-bottom:1px solid var(--ink); white-space:normal; }
  .site-footer-nav .nav-cell:last-child { border-bottom:none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu, .site-menu.is-open, .site-hamburger-bar { transition:none; }
}

/* ==== Panel de gestión (/sala) — sistema de diseño propio, moderno y minimalista ==== */

.admin-shell {
  display:flex; min-height:100vh;
  --line:#e4e4e4; --line-strong:#cfcfcf; --muted:#6b6b6b; --hover:#f3f3f3;
  --danger:#b00020; --danger-soft:#fdeef0;
}

.admin-sidebar { flex:0 0 240px; background:var(--ink); color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.admin-brand { padding:1.5rem 1.5rem 1rem; font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.15rem; line-height:1.15; letter-spacing:.02em; }
.admin-brand span { display:block; opacity:.5; font-family:'Karla', sans-serif; font-size:.65rem; font-weight:600; letter-spacing:.08em; margin-top:.3rem; }
a.admin-brand { display:block; color:inherit; text-decoration:none; }
a.admin-brand:hover, a.admin-brand:focus-visible { text-decoration:underline; text-underline-offset:.2em; outline:none; }

.admin-nav { display:flex; flex-direction:column; padding:.5rem 0; }
.admin-nav-link { display:block; padding:.7rem 1.5rem; color:rgba(255,255,255,.65); text-decoration:none; font-weight:600; font-size:.875rem; text-transform:uppercase; letter-spacing:.04em; border-left:3px solid transparent; }
.admin-nav-link:hover { color:#fff; background:rgba(255,255,255,.06); }
.admin-nav-link.is-active { color:#fff; background:rgba(255,255,255,.1); border-left-color:#fff; }

.admin-sidebar-footer { margin-top:auto; padding:1rem 1.5rem 1.5rem; border-top:1px solid rgba(255,255,255,.15); }
.admin-session-info { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; opacity:.5; margin-bottom:.6rem; }
.admin-sidebar-footer .admin-nav-link { padding:.5rem 0; }

.admin-main-wrap { flex:1 1 auto; min-width:0; background:#fafafa; }
.admin-main { max-width:1080px; margin:0 auto; padding:2.5rem 2.5rem 4rem; }

.admin-topbar { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:2rem; padding-bottom:1.25rem; border-bottom:1px solid rgba(0,0,0,.08); }
.admin-topbar h1 { margin:0; font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.6rem; letter-spacing:.01em; }
.admin-topbar-actions { display:flex; gap:.6rem; flex-wrap:wrap; }

.admin-card { background:var(--bg); border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:1.75rem; margin-bottom:1.5rem; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.admin-card h2 { margin-top:0; font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.05rem; letter-spacing:.02em; }
.admin-card + .admin-card { margin-top:1.5rem; }

.admin-collapsible-summary { cursor:pointer; font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.05rem; letter-spacing:.02em; list-style-position:outside; }
.admin-collapsible[open] .admin-collapsible-summary { margin-bottom:1rem; }

.admin-table-wrap { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.admin-table th { text-align:left; font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; padding:0 .75rem .55rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.admin-table td { padding:.55rem .75rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:#f7f7f7; }
.admin-table td.admin-table-actions { width:1%; white-space:nowrap; text-align:right; }

/* Acciones de fila: botones de icono cuadrados, alineados a la derecha. */
.admin-row-actions { display:flex; gap:.35rem; justify-content:flex-end; align-items:center; }
.admin-row-actions form { margin:0; }
.admin-icon-btn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:34px; height:34px; padding:0; border:1px solid var(--line-strong, #cfcfcf); border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; text-decoration:none; transition:background-color .12s, border-color .12s, color .12s; }
.admin-icon-btn:hover { background:var(--hover, #f3f3f3); border-color:var(--ink); }
.admin-icon-btn.is-danger:hover { color:var(--danger, #b00020); border-color:var(--danger, #b00020); background:var(--danger-soft, #fdeef0); }
.admin-icon-btn:focus-visible, .admin-btn:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.admin-icon-btn svg { display:block; }
.admin-btn svg { flex:0 0 auto; }
@media (prefers-reduced-motion: reduce) { .admin-icon-btn { transition:none; } }

/* ---- Tablas responsive: en pantallas estrechas cada fila pasa a ser una
   tarjeta apilada en vez de deslizarse horizontalmente. Cada <td> necesita
   un atributo data-label="Nombre de columna" para que ::before lo pinte. ---- */
@media (max-width:640px) {
  .admin-table-wrap { overflow-x:visible; }
  .admin-table, .listing-table { width:100%; }
  .admin-table thead, .listing-table thead,
  .admin-table tr, .listing-table tr { display:block; }
  .admin-table thead, .listing-table thead { display:none; }
  /* Las tablas de /sala pintan su fila de cabecera como un <tr><th>...</th></tr>
     suelto (sin <thead>) — es siempre la primera fila, así que se oculta por
     posición. listing-table nunca tiene fila de cabecera, así que no aplica ahí. */
  .admin-table tr:first-child { display:none; }
  .admin-table tbody tr, .listing-table tbody tr {
    display:block; margin-bottom:1rem; border:1px solid rgba(0,0,0,.1); border-radius:10px;
    padding:.4rem .9rem; background:var(--bg);
  }
  .listing-table tbody tr { border-bottom:none; }
  .admin-table td, .listing-table td {
    display:flex; align-items:center; gap:.6rem; padding:.6rem 0;
    border-bottom:1px solid rgba(0,0,0,.06); border-right:none; text-align:left;
  }
  .admin-table td:last-child, .listing-table td:last-child { border-bottom:none; }
  .admin-table td[data-label]::before, .listing-table td[data-label]::before {
    content: attr(data-label); flex:0 0 auto; min-width:6.5rem;
    font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
    color:rgba(0,0,0,.4);
  }
  .admin-table td.admin-table-actions { width:auto; justify-content:flex-end; }
  .listing-table .listing-thumb { width:auto; }
  .listing-table .listing-thumb img, .listing-table .listing-thumb .category-placeholder { width:72px; height:100px; }
}

.admin-badge { display:inline-block; padding:.2rem .65rem; border-radius:999px; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700; border:1px solid var(--ink); white-space:nowrap; }
.admin-badge.is-muted { border-color:rgba(0,0,0,.2); color:rgba(0,0,0,.5); }
.admin-badge.is-solid { background:var(--ink); color:#fff; }

.admin-kpi-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.admin-kpi-card{ display:flex; flex-direction:column; align-items:center; padding:.75rem 1rem; border:1px solid rgba(0,0,0,.15); border-radius:8px; min-width:90px; }
.admin-kpi-number{ font-family:'Anton',sans-serif; font-size:1.6rem; }
.admin-kpi-label{ font-size:.7rem; opacity:.7; text-align:center; }

.admin-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:2.5rem; padding:.7rem 1.1rem; border-radius:7px; font-weight:700; font-size:.875rem; text-transform:uppercase; letter-spacing:.03em; text-decoration:none; cursor:pointer; border:1px solid var(--ink); background:var(--ink); color:#fff; line-height:1; }
.admin-btn:hover { opacity:.82; }
.admin-btn.is-outline { background:transparent; color:var(--ink); }
.admin-btn.is-sm { min-height:2.25rem; padding:.5rem .8rem; font-size:.75rem; border-radius:6px; }
.admin-inline-form { display:inline-block; }

.admin-field { display:block; margin-bottom:1rem; font-size:.8125rem; font-weight:600; color:#262626; }
.admin-field .admin-hint { display:block; margin-top:.3rem; font-size:.75rem; font-weight:400; line-height:1.4; color:var(--muted, #6b6b6b); }
.admin-hint { font-size:.75rem; line-height:1.4; color:var(--muted, #6b6b6b); }
.admin-input, .admin-select, .admin-textarea { display:block; width:100%; margin-top:.35rem; padding:.55rem .7rem; font-size:.95rem; font-weight:400; text-transform:none; letter-spacing:normal; font-family:'Karla', sans-serif; color:var(--ink); background:var(--bg); border:1px solid rgba(0,0,0,.16); border-radius:7px; }
.admin-input:focus, .admin-select:focus, .admin-textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.08); }
/* Los inputs de fichero no se pueden re-estilizar del todo (el boton "Elegir
   archivo" es nativo del navegador) — se aumenta el padding del control para
   ampliar el area de toque alrededor de ese boton. */
.admin-file-input { padding:.9rem .7rem; }
.admin-textarea { min-height:6rem; resize:vertical; }
.admin-checkbox-field { display:flex; align-items:center; gap:.55rem; margin-bottom:.9rem; font-weight:500; text-transform:none; letter-spacing:normal; font-size:.9rem; color:var(--ink); }
.admin-checkbox-field input { width:auto; margin:0; }

/* Checkbox de seleccion masiva (listados con acciones en bloque): objetivo
   tactil mayor que el checkbox nativo por defecto (~13px). */
.admin-checkbox-select { width:1.4rem; height:1.4rem; margin:0; }
.admin-fieldset { border:1px solid rgba(0,0,0,.1); border-radius:8px; padding:1rem 1.1rem; margin-bottom:1.1rem; }
.admin-fieldset legend { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:rgba(0,0,0,.55); padding:0 .3rem; }
.admin-tag-grid { display:flex; flex-wrap:wrap; gap:.6rem; }
.admin-tag-grid .admin-checkbox-field { margin-bottom:0; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:.35rem .8rem; }
.admin-form-actions { margin-top:1.5rem; display:flex; gap:.6rem; }

.admin-empty { color:rgba(0,0,0,.4); font-size:.9rem; padding:1.5rem 0; }
.admin-photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:.6rem; }
.admin-photo-grid img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
.admin-list-plain { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.admin-list-plain li { display:flex; align-items:center; justify-content:space-between; gap:.6rem 1rem; flex-wrap:wrap; padding:.7rem .9rem; border:1px solid rgba(0,0,0,.08); border-radius:8px; }
.admin-list-plain a { color:var(--ink); text-decoration:none; font-weight:600; }
.admin-list-plain a:hover { text-decoration:underline; }
.admin-search-row { display:flex; gap:.6rem; margin-bottom:1.5rem; }
.admin-search-row .admin-input { margin-top:0; }
.admin-inline-select-form { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

.admin-filter-bar { display:flex; gap:.7rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1.5rem; padding:1rem 1.1rem; background:var(--bg); border:1px solid rgba(0,0,0,.08); border-radius:10px; }
.admin-filter-bar .admin-field { margin-bottom:0; min-width:160px; flex:1 1 160px; }
.admin-filter-bar .admin-field.is-search { flex:2 1 220px; }
.admin-filter-bar .admin-input, .admin-filter-bar .admin-select { margin-top:.3rem; }
.admin-filter-bar-actions { display:flex; gap:.5rem; }

.admin-pagination { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.5rem; }
.admin-pagination-status { font-size:.75rem; color:rgba(0,0,0,.5); text-transform:uppercase; letter-spacing:.04em; }
.admin-btn.is-disabled { opacity:.35; pointer-events:none; }

.admin-results-count { font-size:.75rem; color:rgba(0,0,0,.45); margin:-.8rem 0 1rem; }

@media (max-width:900px) {
  .admin-shell { flex-direction:column; }
  .admin-sidebar { position:static; height:auto; flex-direction:row; align-items:center; overflow-x:auto; }
  .admin-brand { padding:.8rem 1rem; white-space:nowrap; }
  .admin-nav { flex-direction:row; padding:0; }
  .admin-nav-link { padding:.9rem .9rem; border-left:none; border-bottom:3px solid transparent; white-space:nowrap; }
  .admin-nav-link.is-active { border-left-color:transparent; border-bottom-color:#fff; }
  .admin-sidebar-footer { margin-top:0; margin-left:auto; border-top:none; padding:.6rem 1rem; white-space:nowrap; }
  .admin-session-info { display:none; }
  .admin-main { padding:1.5rem 1.2rem 3rem; }
}

.admin-menu-builder { display:flex; gap:1.5rem; flex-wrap:wrap; }
.admin-menu-column { flex:1 1 260px; min-width:220px; }
.admin-menu-list { list-style:none; margin:0; padding:0; min-height:3rem; display:flex; flex-direction:column; gap:.5rem; }
.admin-menu-item { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; padding:.7rem .9rem; border:1px solid rgba(0,0,0,.15); border-radius:8px; cursor:grab; background:var(--bg); user-select:none; }
.admin-menu-item.is-dragging { opacity:.4; }
.admin-menu-item-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.admin-menu-list.is-drop-target { outline:2px dashed rgba(0,0,0,.3); outline-offset:4px; }

/* ---- Bloque "Próximos eventos" de la home (Pieza C) ---- */
.marquee-track a { font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(1.25rem, 4vw, 2.5rem); padding:0 .7em; color:inherit; text-decoration:none; }
.marquee-track a:hover { text-decoration:underline; }

.event-grid.is-single { grid-template-columns:1fr; }
.event-card { text-decoration:none; color:var(--ink); display:block; }
.event-grid .event-card:hover h3 { text-decoration:underline; }

/* ---- Ficha de evento con pestanas (shell + pestana Info) ---- */
.admin-tabs-nav { display:flex; flex-wrap:wrap; gap:.4rem; border-bottom:1px solid rgba(0,0,0,.15); margin-bottom:1rem; }
.admin-tabs-btn { padding:.5rem 1rem; border:none; background:none; cursor:pointer; font-family:'Karla',sans-serif; font-weight:600; opacity:.6; }
.admin-tabs-btn.is-active { opacity:1; border-bottom:2px solid var(--ink); }
.admin-tabs-panel { display:none; }
.admin-tabs-panel.is-active { display:block; }
.admin-field-label { display:block; font-size:.8125rem; font-weight:600; color:#262626; margin-bottom:.35rem; }
.admin-image-error { display:block; color:var(--danger, #b00020); font-weight:600; font-size:.8125rem; margin-top:.4rem; }
.admin-image-error[hidden] { display:none; }
.admin-block-error { color:var(--danger, #b00020); font-weight:600; font-size:.875rem; margin:0 0 1rem; padding:.6rem .8rem; background:var(--danger-soft, #fdeef0); border-radius:8px; }

/* ---- Fichas en secciones (evento, cliente, usuario) ---- */
.admin-sections-form { display:flex; flex-direction:column; gap:1rem; }
.admin-section { background:var(--bg); border:1px solid var(--line, #e4e4e4); border-radius:12px; padding:1.25rem 1.4rem .4rem; }
.admin-section + .admin-section { margin-top:1rem; }
.admin-sections-form > .admin-section + .admin-section { margin-top:0; }
.admin-section.has-error { border-color:var(--danger, #b00020); box-shadow:0 0 0 1px var(--danger, #b00020); }
.admin-section .admin-section-title { margin:0 0 1rem; font-family:'Karla', sans-serif; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted, #6b6b6b); }
.admin-section .admin-section-note { margin:-.4rem 0 1rem; }
.admin-section .admin-list-plain, .admin-section > .admin-empty { margin-bottom:1rem; }
.admin-section > .admin-empty { padding:0; }

.admin-grid-2, .admin-grid-3, .admin-grid-fecha, .admin-grid-imagenes, .admin-grid-ponente { display:grid; gap:0 1rem; align-items:start; }
.admin-grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.admin-grid-2.is-wide-first { grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); }
.admin-grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.admin-grid-fecha { grid-template-columns:minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
.admin-grid-imagenes { grid-template-columns:minmax(0, 5fr) minmax(0, 2fr); gap:0 1.25rem; }
.admin-grid-ponente { grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:0 1.25rem; }
@media (max-width:1000px) { .admin-grid-fecha { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:700px) {
  .admin-grid-2, .admin-grid-2.is-wide-first, .admin-grid-3, .admin-grid-fecha, .admin-grid-imagenes, .admin-grid-ponente { grid-template-columns:minmax(0, 1fr); }
  .admin-section { padding:1rem 1rem .25rem; }
}
.admin-check-row { display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; margin-bottom:.5rem; }
.admin-check-row .admin-checkbox-field { margin-bottom:.6rem; }

.admin-readonly { margin:0 0 1rem; }
.admin-readonly-item { margin-bottom:.75rem; }
.admin-readonly dt { font-size:.75rem; font-weight:600; color:var(--muted, #6b6b6b); margin-bottom:.15rem; }
.admin-readonly dd { margin:0; font-size:.95rem; }
.admin-readonly-text { margin:0 0 1rem; font-size:.95rem; line-height:1.5; }

/* ---- Campo de imagen: marco con la proporción real de uso ---- */
.admin-image-field { max-width:520px; }
.admin-grid-imagenes .admin-image-field, .admin-grid-ponente .admin-image-field { max-width:none; }
.admin-image-frame { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:120px; overflow:hidden; border-radius:10px; background:#f4f4f4; border:1px solid var(--line, #e4e4e4); cursor:pointer; }
.admin-image-frame[style*="aspect-ratio"] { min-height:0; }
.admin-image-frame.is-empty { border:1.5px dashed var(--line-strong, #cfcfcf); background:#fafafa; }
.admin-image-frame:hover { border-color:var(--ink); }
.admin-image-frame.is-drop-target { border:1.5px solid var(--ink); background:#ececec; }
.admin-image-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .15s, filter .15s; }
.admin-image-preview[hidden] { display:none; }
.admin-image-frame.is-removing .admin-image-preview { opacity:.25; filter:grayscale(1); }
.admin-image-empty { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1rem; text-align:center; font-size:.8125rem; color:var(--muted, #6b6b6b); }
.admin-image-empty[hidden] { display:none; }
.admin-image-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin:.55rem 0 .35rem; }
.admin-image-actions .admin-btn { text-transform:none; letter-spacing:normal; font-weight:600; }
.admin-file-input:focus-visible ~ .admin-image-actions label { outline:2px solid var(--ink); outline-offset:2px; }
.admin-image-field .admin-hint { display:block; }
.admin-image-field .admin-image-frame[style*="2 / 3"] { max-width:300px; }
@media (prefers-reduced-motion: reduce) { .admin-image-preview { transition:none; } }

/* ---- Barra fija de guardado ---- */
.admin-shell { --savebar-h:64px; }
/* Barra de guardado: franja blanca fija al pie de la pantalla, con la línea
   superior a todo el ancho y el botón negro ocupando toda su altura. */
.admin-savebar { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:stretch; height:var(--savebar-h); padding-left:calc(240px + 2.5rem); background:#fff; color:var(--ink); border-top:1px solid var(--ink); }
.admin-savebar-status { align-self:center; font-size:.875rem; color:rgba(0,0,0,.55); min-height:1em; }
.admin-savebar.is-dirty .admin-savebar-status { color:var(--ink); font-weight:600; }
.admin-savebar.is-dirty .admin-savebar-status::before { content:''; display:inline-block; width:.5rem; height:.5rem; margin-right:.5rem; background:var(--ink); vertical-align:middle; }
.admin-savebar-actions { display:flex; align-items:stretch; margin-left:auto; }
.admin-savebar .admin-btn { height:100%; min-width:var(--savebar-h); margin:0; padding:0 2rem; border:0; border-radius:0; box-shadow:none; background:var(--ink); color:#fff; font-family:'Anton', sans-serif; font-size:1.05rem; font-weight:400; text-transform:uppercase; letter-spacing:.04em; }
.admin-savebar .admin-btn:hover { background:#222; }
.admin-savebar .admin-btn.is-outline { background:#fff; color:var(--ink); border-left:1px solid var(--ink); }
.admin-savebar .admin-btn.is-outline:hover { background:#f0f0f0; }
.admin-savebar .admin-btn:focus-visible { outline:2px solid #fff; outline-offset:-5px; }
.admin-savebar .admin-btn.is-outline:focus-visible { outline-color:var(--ink); }
/* Que nada quede tapado por la franja */
.admin-main:has(.admin-savebar) { padding-bottom:calc(var(--savebar-h) + 2.5rem); }
/* El sidebar queda por encima de la franja: la franja asoma solo en la zona de contenido */
.admin-shell:has(.admin-savebar) .admin-sidebar { position:sticky; z-index:41; }
@media (max-width:900px) {
  .admin-savebar { padding-left:1.2rem; }
  .admin-shell:has(.admin-savebar) .admin-sidebar { position:static; z-index:auto; }
}
@media (max-width:520px) { .admin-savebar-status { display:none; } .admin-savebar-actions { width:100%; } .admin-savebar-actions .admin-btn { flex:1 1 auto; padding:0 1rem; } .admin-savebar { padding-left:0; } }

.admin-stars { border:none; padding:0; margin:0 0 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.admin-stars legend { font-size:.8125rem; font-weight:600; color:#262626; padding:0; margin-bottom:.3rem; width:100%; }
.admin-stars input { position:absolute; opacity:0; width:1px; height:1px; }
.admin-stars-clear { cursor:pointer; font-size:.85rem; text-decoration:underline; opacity:.7; }
.admin-stars input:checked + .admin-stars-clear { opacity:1; font-weight:600; }
.admin-stars-group { display:inline-flex; flex-direction:row-reverse; }
.admin-stars-star { cursor:pointer; font-size:1.8rem; line-height:1; color:#c9c9c9; padding:0 .1rem; }
.admin-stars-group input:checked ~ .admin-stars-star,
.admin-stars-group .admin-stars-star:hover,
.admin-stars-group .admin-stars-star:hover ~ .admin-stars-star { color:#111; }
.admin-stars input:focus-visible + label { outline:2px solid #111; outline-offset:2px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.admin-repeater-row { display:grid; grid-template-columns:1fr 2fr auto; gap:.5rem; margin-bottom:.5rem; align-items:end; }
.admin-repeater-row .admin-icon-btn { justify-self:start; height:38px; width:38px; }
@media (max-width:700px) { .admin-repeater-row { grid-template-columns:1fr; } }

/* /sala/comilista: platos en rejilla de tarjetas con acciones */
.admin-platos { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.admin-plato { border:1px solid var(--ink); padding:.8rem; display:flex; flex-direction:column; gap:.6rem; }
.admin-plato .admin-image-frame { max-width:180px; }
.admin-plato [data-image-remove] { display:none; }
.admin-plato-acciones { display:flex; gap:.4rem; justify-content:flex-end; }
.admin-platos-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; margin:0 0 1rem; padding:1.6rem 1rem; border:2px dashed var(--ink); text-align:center; cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.admin-platos-drop-texto { font-weight:600; }
.admin-platos-drop:hover, .admin-platos-drop.is-drop-target, .admin-platos-drop:focus-within { background:var(--ink); color:#fff; }
.admin-platos-drop:hover .admin-hint, .admin-platos-drop.is-drop-target .admin-hint, .admin-platos-drop:focus-within .admin-hint { color:#fff; }
.admin-plato-asa { margin-right:auto; cursor:grab; touch-action:none; }
.admin-platos.is-ordenando, .admin-platos.is-ordenando * { cursor:grabbing; user-select:none; }
.admin-plato.is-arrastrando { opacity:.45; outline:2px dashed var(--ink); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .admin-platos-drop { transition:none; } }
.admin-borrar { margin-top:1.5rem; }
.admin-borrar summary { list-style:none; cursor:pointer; display:inline-flex; }
.admin-borrar form { margin-top:.8rem; }

/* Area de cliente: web publica + menu vertical a la izquierda. */
.cuenta-layout { display:flex; align-items:flex-start; gap:2rem; padding:2rem 1rem; max-width:1100px; margin:0 auto; width:100%; }
.cuenta-sidebar { flex:0 0 250px; }
.cuenta-menu { display:flex; flex-direction:column; border:1px solid var(--ink); }
.cuenta-menu .nav-cell { display:flex; width:100%; justify-content:flex-start; text-align:left; border-right:none; border-bottom:1px solid var(--ink); padding:1rem 1.2rem; }
.cuenta-menu form { margin:0; }
.cuenta-menu button.nav-cell { border:none; cursor:pointer; font-size:inherit; }
.cuenta-sesion { margin:.8rem 0 0; font-size:.8rem; opacity:.7; word-break:break-all; }
.cuenta-content { flex:1 1 auto; min-width:0; }
.cuenta-content > h1 { margin-top:0; }
@media (max-width:700px) {
  .cuenta-layout { flex-direction:column; gap:1.2rem; padding:1.2rem 1rem; }
  .cuenta-sidebar { flex:none; width:100%; }
}

/* Ficha de evento: inscripcion integrada bajo la descripcion. */
.event-signup { border-top:1px solid var(--ink); padding:1rem; }
.event-signup h2 { margin:0 0 .8rem; font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.25rem; letter-spacing:.01em; }
.event-signup-form { display:grid; grid-template-columns:1fr 1fr; gap:.6rem .8rem; }
.event-signup-form label { display:block; font-family:'Karla', sans-serif; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.event-signup-form input { display:block; width:100%; margin-top:.3rem; padding:.55rem .6rem; border:1px solid var(--ink); background:var(--bg); color:var(--ink); font:inherit; font-size:1rem; text-transform:none; letter-spacing:0; font-weight:400; }
.event-signup-form .form-card-btn { grid-column:1 / -1; }
.event-signup-notice { margin:0 1rem 1rem; padding:.8rem; background:#EEEEEE; color:#000; }
.event-signup .event-signup-notice { margin:0; }
.event-signup-hint { margin:.6rem 0 0; font-size:.85rem; opacity:.7; }
.event-pay-amount { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.8rem 1rem; margin-bottom:1rem; border:1px solid var(--ink); }
.event-pay-amount span { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.event-pay-amount strong { font-family:'Anton', sans-serif; font-size:1.8rem; line-height:1; }
.event-pay-steps { margin:0 0 1rem; padding-left:1.3rem; line-height:1.6; }
.event-pay-steps li { margin-bottom:.3rem; }
@media (max-width:520px) { .event-signup-form { grid-template-columns:1fr; } }

/* Pagina tras pulsar "Ya he pagado". */
.pago-confirmado { max-width:560px; margin:3rem auto; padding:0 1rem; }
.pago-confirmado-kicker { margin:0 0 .4rem; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; opacity:.6; }
.pago-confirmado h1 { margin:0 0 .8rem; font-family:'Anton', sans-serif; text-transform:uppercase; font-size:clamp(1.5rem,5vw,2.2rem); line-height:1.1; }
.pago-confirmado-tabla { margin:1.5rem 0; }
.pago-confirmado-tabla td:first-child { width:35%; font-weight:600; text-transform:uppercase; font-size:.8rem; letter-spacing:.03em; }
.pago-confirmado-acciones { display:flex; flex-wrap:wrap; gap:.6rem; }

/* Modal de inscripcion por pasos. */
.event-signup > [data-signup-open] { width:100%; }
.signup-dialog { width:calc(100% - 2rem); max-width:560px; padding:0; border:1px solid var(--ink); background:var(--bg); color:var(--ink); }
.signup-dialog::backdrop { background:rgba(0,0,0,.55); }
.signup-dialog form { position:relative; padding:1.5rem; }
.signup-dialog h2 { margin:0 0 1rem; font-family:'Anton', sans-serif; text-transform:uppercase; font-size:1.35rem; line-height:1.15; padding-right:2rem; }
.signup-close { position:absolute; top:.6rem; right:.6rem; width:2.2rem; height:2.2rem; border:1px solid var(--ink); background:var(--bg); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer; }
.signup-close:hover { background:var(--ink); color:#fff; }
.signup-steps { display:flex; gap:0; margin:0 0 1.2rem; border:1px solid var(--ink); width:max-content; max-width:calc(100% - 3rem); }
.signup-steps span { padding:.35rem .8rem; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.signup-steps span + span { border-left:1px solid var(--ink); }
.signup-steps span.is-active { background:var(--ink); color:#fff; }
.signup-dialog .event-signup-form { margin-bottom:1rem; }
.signup-dialog .signup-error { margin:0 0 1rem; }
.signup-dialog .event-signup-notice { margin:0 0 1rem; }
.signup-dialog .form-card-btn { width:100%; padding:.8rem; background:var(--ink); color:#fff; border:1px solid var(--ink); font-family:'Karla', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; }
.signup-dialog .form-card-btn:disabled { opacity:.5; cursor:wait; }
.signup-actions { display:flex; gap:.6rem; }
.signup-actions .admin-btn { flex:0 0 auto; }
.signup-actions .form-card-btn { flex:1 1 auto; width:auto; }
.signup-dialog [hidden] { display:none !important; }
.signup-dialog select, .signup-dialog textarea { display:block; width:100%; margin-top:.3rem; padding:.55rem .6rem; border:1px solid var(--ink); border-radius:0; background:var(--bg); color:var(--ink); font:inherit; font-size:1rem; text-transform:none; letter-spacing:0; }
.signup-dialog textarea { resize:vertical; min-height:5rem; }
.signup-dialog select:focus-visible, .signup-dialog textarea:focus-visible, .signup-dialog input:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.signup-dialog input[readonly] { background:#EEEEEE; }
.signup-acomp { margin-bottom:1rem; }
.signup-acomp > label, .signup-motivo { display:block; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.signup-acomp-nombres { margin-top:.8rem; }
.signup-acomp-nombres:empty { display:none; }
.signup-pay-detail { margin:-.4rem 0 1rem; font-size:.9rem; text-align:right; }
.signup-contador { margin:.3rem 0 1rem; font-size:.8rem; text-align:right; opacity:.7; }
.signup-motivo { margin-top:1rem; }
.signup-solicitud .event-signup-form { margin-top:1rem; text-align:left; }
.signup-solicitud .signup-motivo { grid-column:1 / -1; margin-top:0; }
.signup-solicitud textarea { display:block; width:100%; margin-top:.3rem; padding:.55rem .6rem; border:1px solid var(--ink); background:var(--bg); color:var(--ink); font:inherit; }
/* Dentro de la ficha publica todo el modal va en Karla (estilo salaequis). */
.evento-ficha .signup-dialog { text-align:left; }
.evento-ficha .signup-dialog h2, .evento-ficha .event-pay-amount strong { font-family:'Karla', ui-sans-serif, system-ui, sans-serif; }
.evento-ficha .signup-dialog h2 { font-size:18px; line-height:24px; text-transform:uppercase; }
.evento-ficha .event-pay-amount strong { font-size:1.5rem; font-weight:700; }
.evento-ficha .signup-dialog .form-card-btn, .evento-ficha .signup-dialog .admin-btn { border-radius:0; box-shadow:none; }

/* Ficha de evento en /sala: barra de estado siempre visible. */
.evento-estado-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; padding:.9rem 1.1rem; }
.evento-estado-bar p { margin:0; display:flex; align-items:center; gap:.6rem; }
.evento-estado-bar.is-borrador, .evento-estado-bar.is-cancelado { background:#EEEEEE; }
.evento-estado-acciones { display:flex; gap:.5rem; flex-wrap:wrap; }
.evento-estado-acciones form { margin:0; }

/* Ficha pública del evento (estilo salaequis) */
.evento-ficha, .evento-ficha * { font-family:'Karla', ui-sans-serif, system-ui, sans-serif; font-weight:400; letter-spacing:1px; color:var(--ink); }
.evento-ficha { display:block; }
.evento-cartel { padding:60px; display:flex; align-items:center; justify-content:center; }
.evento-cartel img { display:block; width:auto; max-width:100%; max-height:50vh; margin:0 auto; border:none; }
.evento-cartel-placeholder { width:100%; max-width:420px; aspect-ratio:1/1; max-height:50vh; }
.evento-titulo { margin:0; text-align:center; padding:40px 16px; border-bottom:1px solid var(--ink); font-size:36px; line-height:43px; }
.evento-btn-reservar { display:block; width:100%; margin:0; padding:40px; border:none; border-radius:0; text-transform:uppercase; text-align:center; color:#fff; background:var(--ink); font-size:16px; line-height:20px; cursor:pointer; }
.evento-btn-reservar:hover { background:#222; }
.evento-btn-reservar:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.evento-bloque { padding:20px 120px; border-bottom:1px solid var(--ink); font-size:16px; line-height:20px; text-align:center; }
.evento-bloque-reserva { padding:0; }
.evento-bloque-reserva-notice, .evento-bloque-reserva-texto { padding:20px 120px; }
.evento-bloque-reserva-texto h2 { margin:0 0 .8rem; font-size:16px; line-height:20px; text-transform:uppercase; }
.evento-bloque-reserva .event-signup { border-top:none; padding:0; }
.evento-bloque-titulo { margin:0 0 .6rem; font-size:16px; text-transform:uppercase; }
.evento-descripcion p { margin:0 0 20px; }
.evento-descripcion p:last-child { margin-bottom:0; }
.evento-datos p { margin:0 0 8px; }
.evento-datos p:last-child { margin-bottom:0; }
.evento-ponente-foto { display:block; width:120px; height:120px; object-fit:cover; margin:0 auto .9rem; }
.evento-ponente-nombre { margin:0 0 .5rem; }
.evento-ponente-bio { margin:0 0 .8rem; }
.evento-ponente-enlaces { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin:0; }
@media (max-width:1100px) { .evento-titulo { font-size:32px; line-height:1.3; } }
@media (max-width:900px) { .evento-titulo { font-size:28px; line-height:1.3; } }
@media (max-width:700px) {
  .evento-titulo { font-size:24px; line-height:1.3; }
  .evento-bloque { padding:20px 40px; }
  .evento-bloque-reserva-notice, .evento-bloque-reserva-texto { padding:20px 40px; }
}
@media (max-width:480px) { .evento-titulo { font-size:22px; line-height:28px; } }

/* Modal de confirmación de /sala (admin-ui.js). */
.admin-modal { width:calc(100% - 2rem); max-width:440px; padding:0; border:none; border-radius:12px; background:#fff; color:var(--ink); box-shadow:0 24px 48px -12px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.08); font-family:'Karla', sans-serif; }
.admin-modal::backdrop { background:rgba(60,60,60,.45); }
.admin-modal-body { padding:1.5rem 1.5rem 1rem; }
.admin-modal-title { margin:0 0 .5rem; font-family:'Karla', sans-serif; font-weight:700; font-size:1.125rem; line-height:1.3; }
.admin-modal-text { margin:0; font-size:.95rem; line-height:1.5; color:#3d3d3d; }
.admin-modal-actions { display:flex; justify-content:flex-end; gap:.5rem; padding:1rem 1.5rem 1.25rem; }
.admin-btn.is-danger { background:#b00020; border-color:#b00020; color:#fff; }
@media (max-width:420px) { .admin-modal-actions { flex-direction:column-reverse; } .admin-modal-actions .admin-btn { width:100%; } }
/* "¿Sois más?": acceso secundario a la lista de espera desde el paso Reservar */
.signup-espera-link { display:block; margin:0 0 1rem; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-size:.9rem; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.signup-espera-link:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* ---- Carrusel de eventos (calcado de salaequis.es): celdas a toda altura
   con borde derecho, imagen centrada con mucho margen, titulo centrado en
   mayusculas y chevrons finos sin fondo. JS: public/assets/js/carrusel.js ---- */
.carrusel { --carrusel-visibles:1; --carrusel-linea:var(--ink); position:relative; background:var(--bg); color:var(--ink); }
.carrusel--oscuro { --carrusel-linea:#fff; background:#000; color:#fff; }
@media (min-width:700px) { .carrusel { --carrusel-visibles:2; } }
@media (min-width:1024px) { .carrusel { --carrusel-visibles:3; } }
.carrusel-viewport { overflow:hidden; touch-action:pan-y; }
.carrusel-pista { display:flex; transition:transform .45s ease; }
.carrusel-celda { flex:0 0 calc(100% / var(--carrusel-visibles)); min-width:0; display:flex; border-right:1px solid var(--carrusel-linea); }
.carrusel.is-estatico .carrusel-pista { justify-content:center; }
.carrusel.is-incompleto .carrusel-celda:first-child { border-left:1px solid var(--carrusel-linea); }
.tarjeta-evento { display:flex; flex-direction:column; align-items:center; width:100%; padding:40px 0 30px; color:inherit; text-decoration:none; user-select:none; -webkit-user-drag:none; }
.tarjeta-evento-media { display:block; width:calc(100% - 120px); aspect-ratio:430 / 205; object-fit:cover; }
img.tarjeta-evento-media { pointer-events:none; }
.tarjeta-evento-iniciales { display:flex; align-items:center; justify-content:center; border:1px solid var(--carrusel-linea, var(--ink)); font-family:'Anton', sans-serif; font-size:clamp(2rem, 5vw, 3.5rem); }
.tarjeta-evento-titulo { width:calc(100% - 120px); margin-top:1.1rem; font-family:'Karla', sans-serif; font-weight:600; text-transform:uppercase; text-align:center; line-height:1.1; font-size:clamp(18px, 2.4vw, 36px); overflow-wrap:normal; }
.tarjeta-evento-meta { width:calc(100% - 120px); margin-top:.5rem; font-size:.8rem; text-align:center; opacity:.75; }
@media (hover:hover) { .tarjeta-evento:hover .tarjeta-evento-titulo { text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px; } }
.tarjeta-evento:focus-visible { outline:2px solid currentColor; outline-offset:-6px; }
.carrusel-btn { position:absolute; top:50%; z-index:2; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:30px; height:44px; padding:0; border:0; background:none; color:inherit; cursor:pointer; }
.carrusel-btn--prev { left:10px; }
.carrusel-btn--next { right:10px; }
.carrusel-btn[hidden] { display:none; }
.carrusel-btn:focus-visible { outline:1px solid currentColor; outline-offset:2px; }
@media (max-width:1023px) {
  .tarjeta-evento-media, .tarjeta-evento-titulo, .tarjeta-evento-meta { width:calc(100% - 80px); }
}
/* Movil: el trazo del chevron queda a 10px del borde (Addendum). */
@media (max-width:699px) {
  .carrusel-btn--prev { left:0; justify-content:flex-start; padding-left:10px; }
  .carrusel-btn--next { right:0; justify-content:flex-end; padding-right:10px; }
}
@media (prefers-reduced-motion: reduce) { .carrusel-pista { transition:none; } }

/* ---- Portada (calcada de salaequis.es): marquesinas de 75px con texto de 45px ---- */
.portada-marquee { display:flex; align-items:center; height:75px; overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--ink); background:var(--bg); color:var(--ink); }
.portada-marquee--ayer { border-top:1px solid var(--ink); }
.portada-marquee--oscuro { background:#000; color:#fff; border-bottom-color:#fff; }
.portada-marquee-track { display:inline-flex; flex-shrink:0; animation:marquee 40s linear infinite; }
.portada-marquee-track span { font-family:'Anton', sans-serif; font-size:45px; line-height:1; text-transform:uppercase; letter-spacing:.02em; padding:0 .45em; }
.portada-hoy { background:#000; color:#fff; }
.portada-vacio { margin:0; padding:60px 20px; text-align:center; font-size:16px; line-height:20px; }
/* Mismo corte que la cabecera (68px a <=1024px). La duracion llega inline desde render_marquesina(). */
@media (max-width:1024px) {
  .portada-marquee { height:68px; }
  .portada-marquee-track span { font-size:40px; }
}
@media (prefers-reduced-motion: reduce) { .portada-marquee-track { animation:none; } }
/* Mismo bloque que RESERVAR pero no clicable; el doble selector gana a .evento-ficha * y a .event-signup h2. */
.evento-ficha .evento-finalizado { display:block; width:100%; margin:0; padding:40px; border:none; text-align:center; text-transform:uppercase; font-family:'Karla', ui-sans-serif, system-ui, sans-serif; font-size:16px; line-height:20px; font-weight:400; background:#000; color:#fff; cursor:default; }

/* ---- Paginas publicas editables (concepto / condiciones / aviso legal) ---- */
/* El borde va en el bloque a ancho completo (como la ficha del evento), no en la columna de 900px. */
.poster-title.pagina-titulo { border-top:none; text-align:center; }
.pagina-bloque { border-bottom:1px solid var(--ink); }
.pagina-contenido { max-width:900px; margin:0 auto; padding:2rem 1rem 4rem; }
.pagina-imagen { display:block; width:100%; max-height:420px; object-fit:cover; margin-bottom:2rem; border:1px solid var(--ink); }
.pagina-texto { font-family:'Karla', sans-serif; font-size:1.05rem; line-height:1.7; text-align:center; }

/* ---- Galerias (calcado de salaequis.es/edificio): marquesina + bloque dual 50/50 ---- */
.dualBlock { display:flex; min-height:60vh; border-bottom:1px solid var(--ink); }
.dualBlock-info { width:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:100px 80px; box-sizing:border-box; }
.dualBlock-info h2 { max-width:900px; margin:0 0 1rem; font-family:'Anton', sans-serif; text-transform:uppercase; font-size:2rem; }
.dualBlock-info p { max-width:900px; margin:0 0 1.5rem; font-family:'Karla', sans-serif; font-size:1rem; line-height:1.6; }
/* La imagen va absoluta: una foto vertical no estira el bloque; manda la altura del texto. */
.dualBlock-media { width:50%; margin:0; position:relative; overflow:hidden; }
.dualBlock-media img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.dualBlock-media .category-placeholder { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; font-size:3rem; }
.dualBlock--der { flex-direction:row; }
.dualBlock--izq { flex-direction:row-reverse; }
.dualBlock-info .listing-action { display:inline-block; padding:.6rem 1.2rem; border:1px solid var(--ink); text-decoration:none; color:var(--ink); text-transform:uppercase; font-weight:600; }
.dualBlock-info .listing-action:hover { background:var(--ink); color:#fff; }
@media (max-width:699px) {
  .dualBlock, .dualBlock--izq, .dualBlock--der { flex-direction:column; min-height:0; }
  .dualBlock-info { width:100%; padding:40px 20px; }
  .dualBlock-media { width:100%; }
  .dualBlock-media img { position:static; height:auto; aspect-ratio:4/3; }
  .dualBlock-media .category-placeholder { position:static; height:auto; aspect-ratio:4/3; }
}

/* ---- Calendario (/calendario) ----
   Escritorio y tablet: cabecera del mes + cuadrícula L–D que ocupa justo el
   alto libre entre cabecera y footer fijos (sin scroll aunque haya 6 semanas).
   Móvil (<700px): la cuadrícula se oculta y se muestra la lista de días. */
:root { --cal-cabecera-h:60px; --cal-semana-h:32px; }
.cal-cabecera { display:flex; align-items:stretch; height:var(--cal-cabecera-h); border-bottom:1px solid var(--ink); }
.cal-titulo { flex:1 1 auto; margin:0; display:flex; align-items:center; justify-content:center; font-family:'Anton', sans-serif; font-weight:400; font-size:clamp(1.4rem, 2.4vw, 2.1rem); letter-spacing:.02em; text-transform:uppercase; }
.cal-flecha { flex:0 0 var(--cal-cabecera-h); display:flex; align-items:center; justify-content:center; color:var(--ink); border-right:1px solid var(--ink); }
.cal-flecha:last-child { border-right:0; border-left:1px solid var(--ink); }
.cal-flecha:hover { background:var(--ink); color:#fff; }
.cal-flecha:focus-visible, .cal-dia--evento:focus-visible, .cal-evento:focus-visible { outline:2px solid currentColor; outline-offset:-4px; }

.cal-rejilla { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); grid-template-rows:var(--cal-semana-h) repeat(var(--cal-semanas, 6), minmax(0, 1fr));
  height:calc(100vh - var(--site-header-h) - var(--site-footer-h) - var(--cal-cabecera-h));
  height:calc(100dvh - var(--site-header-h) - var(--site-footer-h) - var(--cal-cabecera-h));
  min-height:360px; }
.cal-dia-semana { display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.cal-celda { position:relative; min-height:0; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.cal-dia-semana:nth-child(7n), .cal-celda:nth-child(7n) { border-right:0; }
.cal-rejilla > .cal-celda:nth-last-child(-n+7) { border-bottom:0; }
.cal-dia { display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%; padding:.5rem .6rem; font:inherit; color:inherit; text-align:left; background:transparent; border:0; }
.cal-num { font-size:clamp(1rem, 1.5vw, 1.35rem); font-weight:600; line-height:1; }
.cal-celda--fuera .cal-num { opacity:.3; }
/* Hoy: recuadro grueso por dentro de la celda (con anillo blanco para que se vea
   también si el día tiene eventos y está en negro). */
.cal-celda--hoy::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--ink), inset 0 0 0 5px #fff; }
.cal-dia--evento { background:var(--ink); color:#fff; cursor:pointer; }
.cal-dia--evento:hover .cal-cuenta, .cal-dia--evento.is-activo .cal-cuenta { text-decoration:underline; }
.cal-dia--evento:focus-visible { outline-color:#fff; }
/* Días ya pasados con eventos: en gris (blanco sobre #767676 = 4,5:1) */
.cal-dia--evento.cal-dia--pasado { background:#767676; }
.cal-evento--pasado { color:#767676; }
.cal-evento--pasado .cal-evento-media { filter:grayscale(1); opacity:.55; border-color:#767676; }
.cal-cuenta { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }

.cal-pop { position:fixed; z-index:70; width:min(340px, calc(100vw - 16px)); max-height:min(420px, calc(100vh - 16px)); overflow-y:auto; background:var(--bg); color:var(--ink); border:1px solid var(--ink); }
.cal-pop[hidden] { display:none; }
.cal-pop-lista { list-style:none; margin:0; padding:0; }
.cal-pop-lista li + li { border-top:1px solid var(--ink); }
.cal-evento { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:.75rem; align-items:center; padding:.6rem; color:var(--ink); text-decoration:none; }
.cal-evento:hover .cal-evento-titulo { text-decoration:underline; }
.cal-evento-media { display:block; width:64px; aspect-ratio:2 / 3; object-fit:cover; border:1px solid var(--ink); }
.cal-evento-iniciales { display:flex; align-items:center; justify-content:center; font-family:'Anton', sans-serif; font-size:1.1rem; }
.cal-evento-texto { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.cal-evento-titulo { font-weight:600; text-transform:uppercase; line-height:1.2; overflow-wrap:normal; }
.cal-evento-meta { font-size:.8rem; }

.cal-lista { display:none; list-style:none; margin:0; padding:0; }
.cal-lista-dia { border-bottom:1px solid var(--ink); }
.cal-lista-fecha { margin:0; padding:.7rem 1rem; background:var(--ink); color:#fff; font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cal-lista-vacio { padding:2rem 1rem; text-align:center; border-bottom:1px solid var(--ink); }

@media (max-width:1024px) {
  .cal-rejilla { height:calc(100vh - var(--site-header-h) - var(--cal-cabecera-h)); height:calc(100dvh - var(--site-header-h) - var(--cal-cabecera-h)); }
}
@media (max-width:699px) {
  .cal-rejilla { display:none; }
  .cal-lista { display:block; }
  .cal-cabecera { height:var(--site-header-h); }
  .cal-flecha { flex-basis:var(--site-header-h); }
}

/* ---------- Portada intro (franjas de categorías + logo + puerta +18) ----------
   Parcial app/Views/_portada_intro.php · lógica en assets/js/portada-intro.js */
html.intro-lock, html.intro-lock body { overflow:hidden; }
.intro { position:fixed; inset:0; z-index:998; background:var(--bg); color:var(--ink); overflow:hidden; }
.intro-marquees { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; border-top:1px solid var(--ink); }
.intro-row { flex:1 1 0; overflow:hidden; white-space:nowrap; width:100%; display:flex; align-items:center; user-select:none; border-bottom:1px solid var(--ink); }
.intro-track { display:inline-flex; flex-shrink:0; align-items:center; will-change:transform; animation:marquee linear infinite; }
.intro-row.reverse .intro-track { animation-direction:reverse; }
.intro-track span { font-family:'Bebas Neue', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; color:var(--ink); font-size:clamp(1.25rem, 4vw, 2.5rem); padding:0 .7em; }
.intro-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.intro-stage { --badge:clamp(130px, 22vw, 220px); position:relative; width:var(--badge); height:var(--badge); }
.intro-badge { position:relative; z-index:2; box-sizing:border-box; width:100%; height:100%; margin:0; padding:0; display:flex; align-items:center; justify-content:center; background:var(--bg); border:2px solid var(--ink); border-radius:0; overflow:hidden; color:var(--ink); font:inherit; transition:transform .25s ease, background-color .25s ease; }
.intro-logo { width:66%; height:auto; display:block; transition:opacity .3s ease, transform .45s ease; }
.intro-plus18 { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue', sans-serif; font-size:calc(var(--badge) * .5); line-height:1; letter-spacing:.02em; opacity:0; transform:scale(.8); transition:opacity .35s ease .2s, transform .45s ease .2s; }

/* Anillo "ENTRAR" girando alrededor del logo (pista de que es clicable). El logo es
   cuadrado: el anillo es más ancho (1.75x) para que las esquinas no tapen el texto.
   Es clicable (lleva a lo mismo que el logo) y al pasar por encima se queda visible. */
.intro-ring { position:absolute; z-index:1; left:50%; top:50%; width:calc(var(--badge) * 1.75); height:calc(var(--badge) * 1.75); transform:translate(-50%, -50%); overflow:visible; pointer-events:none; transition:opacity .3s ease; }
.intro--interactive .intro-ring circle { pointer-events:auto; cursor:pointer; }
.intro-ring circle { fill:var(--bg); stroke:var(--ink); stroke-width:1; }
.intro-ring text { font-family:'Bebas Neue', sans-serif; font-size:11px; fill:var(--ink); letter-spacing:.08em; pointer-events:none; }
.intro-ring-spin { transform-origin:100px 100px; animation:intro-spin 18s linear infinite; }
/* Latido lento: fundidos de 1,6 s, ≈2,2 s visible y ≈4,4 s oculto; al pasar el ratón se queda visible y gira más rápido */
.intro-ring-pulse { animation:intro-ring-fade 6.6s ease-in-out infinite; }
.intro--interactive .intro-stage:hover .intro-ring-pulse { animation:none; opacity:1; }
.intro--interactive .intro-stage:hover .intro-ring-spin { animation-duration:7s; }
@keyframes intro-spin { to { transform:rotate(360deg); } }
@keyframes intro-ring-fade { 0% { opacity:0; } 24.2%, 33.3% { opacity:1; } 57.6%, 100% { opacity:0; } }
.intro.is-gate .intro-ring { opacity:0; pointer-events:none; }
.intro.is-gate .intro-ring circle { pointer-events:none; }


/* Logo del centro (enlace a /programacion) y franjas de categoría clicables */
.intro--interactive .intro-badge { pointer-events:auto; cursor:pointer; text-decoration:none; }
.intro--interactive .intro-badge:hover { transform:scale(1.04); }
.intro--interactive .intro-badge:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
a.intro-row { color:var(--ink); text-decoration:none; cursor:pointer; transition:background-color .15s ease; }
a.intro-row .intro-track span { transition:color .15s ease; }
@media (hover:hover) {
  .intro:not(.is-gate) a.intro-row:hover { background:var(--ink); }
  .intro:not(.is-gate) a.intro-row:hover .intro-track span { color:var(--bg); }
}
a.intro-row:focus-visible { outline:none; background:var(--ink); }
a.intro-row:focus-visible .intro-track span { color:var(--bg); }
/* Con la pregunta +18 abierta, las franjas no reaccionan */
.intro.is-gate a.intro-row { cursor:default; }

/* Estado puerta +18: mismo cuadrado y tamaño que el logo; el logo da paso al +18 */
.intro.is-gate .intro-badge { border-radius:0; cursor:default; transform:none; }
.intro.is-gate .intro-logo { opacity:0; transform:scale(.7); }
.intro.is-gate .intro-plus18 { opacity:1; transform:scale(1); }
.intro-gate { position:absolute; z-index:3; left:50%; top:calc(100% + 1rem); transform:translate(-50%, .6rem); width:max-content; max-width:calc(100vw - 2rem); padding:1rem 1.2rem 1.1rem; background:var(--bg); border:2px solid var(--ink); text-align:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease .35s, transform .35s ease .35s, visibility 0s linear .7s; }
.intro.is-gate .intro-gate { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0); transition-delay:.35s, .35s, 0s; }
/* Al aceptar, la pregunta desaparece en su sitio al momento: no viaja con el logo a la esquina */
.intro--abierta .intro-gate { display:none; }
.intro-gate-q { margin:0 0 .8rem; font-family:'Bebas Neue', sans-serif; font-size:clamp(1.3rem, 3vw, 1.8rem); letter-spacing:.03em; line-height:1.1; }
.intro-gate-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.intro-btn { font-family:'Bebas Neue', sans-serif; font-size:clamp(1.1rem, 2.4vw, 1.4rem); letter-spacing:.04em; line-height:1; padding:.65rem 1.1rem .55rem; border:2px solid var(--ink); background:var(--bg); color:var(--ink); cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.intro-btn:hover, .intro-btn:focus-visible { background:var(--ink); color:var(--bg); outline:none; }
.intro-btn--no { border-color:transparent; text-decoration:underline; text-underline-offset:.2em; }
.intro-btn--no:hover, .intro-btn--no:focus-visible { border-color:var(--ink); text-decoration:none; }

/* Estado inicial: franjas de categorías con el logo en el centro, que "late" una vez. */
.intro--interactive:not(.intro--abierta):not(.is-gate) .intro-stage { animation:intro-latido .8s cubic-bezier(.37,0,.63,1) .7s 1; }
@keyframes intro-latido { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.015); } }

/* Botón de cada franja (acordeón): ocupa toda la franja */
.intro-row-btn { flex:1 1 auto; align-self:stretch; min-width:0; display:flex; align-items:center; overflow:hidden; margin:0; padding:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; text-align:left; transition:background-color .15s ease; }
.intro-row-btn .intro-track span { transition:color .15s ease; }
.intro--abierta button.intro-row-btn { cursor:pointer; }
@media (hover:hover) {
  .intro--abierta button.intro-row-btn:hover { background:var(--ink); }
  .intro--abierta button.intro-row-btn:hover .intro-track span { color:var(--bg); }
}
.intro--abierta button.intro-row-btn:focus-visible { outline:none; background:var(--ink); }
.intro--abierta button.intro-row-btn:focus-visible .intro-track span { color:var(--bg); }
/* Antes de aceptar +18 las franjas no son clicables */
.intro--interactive:not(.intro--abierta) .intro-row-btn { pointer-events:none; }

@media (prefers-reduced-motion: reduce) {
  .intro--interactive .intro-stage { animation:none; }
  .intro-track, .intro-ring-spin { animation:none; }
  .intro-ring-pulse { animation:none; opacity:1; }
}

/* ---------- Portada abierta: categorías en acordeón + carrusel cronológico + dónde estamos ----------
   Al decir "soy mayor de edad" se añade .intro--abierta: la pantalla fija pasa a página con scroll
   y el logo se va a la esquina superior derecha (botón del menú). */
.intro--interactive.intro--abierta { position:static; inset:auto; overflow:visible; z-index:auto; }
.intro--interactive.intro--abierta .intro-marquees { position:static; display:block; overflow:visible; border-top:0; border-bottom:1px solid var(--ink); }
/* Cada franja lleva su línea superior (y otra entre la banda y sus carteles si está abierta); la última cierra con la del contenedor */
.intro--interactive.intro--abierta .intro-row { flex:none; height:var(--intro-fila-h, var(--site-header-h)); border-top:1px solid var(--ink); border-bottom:0; }
.intro--abierta .intro-cat.is-open .intro-row { border-bottom:1px solid var(--ink); }

/* Logo en la esquina superior derecha, del alto de una franja: abre/cierra el menú */
.intro--interactive.intro--abierta .intro-center { position:fixed; inset:0 0 auto auto; z-index:1000; display:block; transition:transform .45s cubic-bezier(.22,.8,.3,1); will-change:transform; }
@media (prefers-reduced-motion: reduce) { .intro--interactive.intro--abierta .intro-center { transition:none; } }
.intro--abierta .intro-stage { --badge:var(--intro-fila-h, var(--site-header-h)); }
.intro--interactive.intro--abierta .intro-badge { border-width:1px; transform:none; transition:background-color .15s ease; }
.intro--abierta .intro-logo { transition:filter .15s ease; }
@media (hover:hover) {
  .intro--interactive.intro--abierta .intro-badge:hover { background:var(--ink); }
  .intro--interactive.intro--abierta .intro-badge:hover .intro-logo { filter:invert(1); }
}
.intro--interactive.intro--abierta .intro-badge:focus-visible { outline:3px solid var(--ink); outline-offset:-6px; }

/* Paso a la esquina: el logo del centro se hunde y a la vez reflota en la esquina (portada-intro.js). */
.intro-hundido { position:fixed; z-index:1001; margin:0; pointer-events:none; }
/* Con la portada abierta el hueco de la barra de scroll queda siempre reservado:
   el logo fijo de la esquina no se mueve aunque cambie el alto del contenido. */
html.intro-gutter { scrollbar-gutter:stable; }

/* Menú a pantalla completa: cada enlace es una franja con línea arriba y abajo.
   Usa el scroll de la página (se ocultan franjas y pie), así no hay una segunda barra bajo el logo. */
.intro-menu { min-height:100vh; min-height:100dvh; background:var(--bg); color:var(--ink); opacity:0; transition:opacity .3s ease; }
.intro.is-menu-visible .intro-menu { opacity:1; }
.intro--interactive.intro--abierta.is-menu .intro-marquees, .intro--interactive.intro--abierta.is-menu .intro-pie { display:none; }

/* Footer de la portada: solo en escritorio, al final del scroll (no fijo) y nunca con el menú abierto */
.intro .intro-footer { display:none; position:static; z-index:auto; }
@media (min-width:1025px) {
  .intro--interactive.intro--abierta:not(.is-menu) .intro-footer { display:block; }
}
.intro-menu ul { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--ink); }
.intro-menu li { border-top:1px solid var(--ink); }
.intro-menu-link { box-sizing:border-box; display:flex; align-items:center; min-height:var(--intro-fila-h, var(--site-header-h)); padding:.3em calc(var(--intro-fila-h, var(--site-header-h)) + 1rem) .2em 1.2rem; font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:clamp(1.25rem, 4vw, 2.5rem); line-height:1; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); text-decoration:none; transition:background-color .15s ease, color .15s ease; }
.intro-menu-link:hover, .intro-menu-link:focus-visible { background:var(--ink); color:var(--bg); outline:none; }
/* Enlace aún sin página (QUIÉNES SOMOS): mismo aspecto, sin efecto al pasar el ratón */
.intro-menu-link--pendiente { cursor:default; }
.intro-menu-link--pendiente:hover { background:transparent; color:var(--ink); }
@media (prefers-reduced-motion: reduce) { .intro-menu { transition:none; } }
.intro-pie { display:none; }
.intro--abierta .intro-pie { display:block; }
/* DÓNDE ESTAMOS en la portada: franja del mismo alto que las categorías; el mapa va
   escondido y se despliega al pulsarla (mismo acordeón, portada-intro.js) */
.intro-pie .fila { height:var(--intro-fila-h, var(--site-header-h)); }
.intro-pie .intro-row-btn { cursor:pointer; }
.intro-pie .intro-row-btn .fila-track span { transition:color .15s ease; }
@media (hover:hover) {
  .intro-pie .intro-row-btn:hover { background:var(--ink); }
  .intro-pie .intro-row-btn:hover .fila-track span { color:var(--bg); }
}
.intro-pie .intro-row-btn:focus-visible { outline:none; background:var(--ink); }
.intro-pie .intro-row-btn:focus-visible .fila-track span { color:var(--bg); }
/* Paso 2 (solo categorías): las secciones no cuentan en el reparto de la pantalla; paso 3 (abierta): bloques */
.intro-cat { display:contents; }
.intro--abierta .intro-cat { display:block; }
/* Franja PROGRAMACIÓN <MES>: solo con la portada abierta (en la intro no existe ni reparte alto) */
.intro-cat.intro-cat--prog { display:none; }
.intro--abierta .intro-cat.intro-cat--prog { display:block; }
/* Calendario dentro del panel: alto según contenido (en /calendario ocupa la pantalla) */
/* En móvil (<700px) manda la cuadrícula compacta + lista de /calendario, sin tocar. */
@media (min-width:700px) {
  .intro-prog-cal .cal-rejilla { height:auto; min-height:0; grid-template-rows:var(--cal-semana-h) repeat(var(--cal-semanas, 6), minmax(84px, auto)); }
}
.intro-prog-cal .cal-cabecera { border-bottom:1px solid var(--ink); }
/* PROGRAMACIÓN: mismo tamaño de letra que DÓNDE ESTAMOS (y el mismo alto que todas las franjas) */
.intro-cat--prog .intro-row .intro-track span { font-size:clamp(2.2rem, 4vw, 2.5rem); }
/* Al aceptar +18 la franja entra desde arriba creciendo y empuja hacia abajo todo lo demás;
   el logo de la esquina baja con ella (portada-intro.js, misma duración y curva). */
@media (prefers-reduced-motion: no-preference) {
  .intro--entrando .intro-cat--prog > .intro-row { animation:intro-prog-entra 750ms cubic-bezier(.22,.8,.3,1) backwards; }
}
@keyframes intro-prog-entra { from { height:0; border-top-width:0; } }
.intro-prog-cal.is-cargando { opacity:.4; transition:opacity .15s ease; pointer-events:none; }
/* PROGRAMACIÓN en la portada: solo la cuadrícula (sin la lista de días debajo) y los días
   con eventos solo en negro, sin el punto del móvil */
.intro-prog-cal .cal-lista { display:none; }
.intro-prog-cal .cal-cuenta::before { content:none; }
@media (prefers-reduced-motion: reduce) { .intro-prog-cal.is-cargando { transition:none; } }

/* Carrusel cronológico: celdas del ancho que fija el JS (--carrusel-celda); anteriores en negro */
.carrusel--cronologico .carrusel-celda { flex:0 0 var(--carrusel-celda, 50%); position:relative; }
.carrusel--cronologico.is-estatico .carrusel-pista { justify-content:flex-start; }
.carrusel-celda--pasada { background:#000; color:#fff; }
.carrusel-celda--vacia { align-items:center; justify-content:center; padding:2rem 1.2rem; text-align:center; font-family:'Bebas Neue', sans-serif; font-size:clamp(1rem, 1.5vw, 1.25rem); line-height:1.1; letter-spacing:.03em; text-transform:uppercase; }
.carrusel--cronologico .carrusel-celda--ultima-pasada .tarjeta-evento { padding-right:2.4rem; }
.carrusel-anteriores { position:absolute; top:0; bottom:0; right:0; width:2.4rem; display:flex; align-items:center; justify-content:center; background:#000; color:#fff; border-left:1px solid #fff; writing-mode:vertical-rl; transform:rotate(180deg); font-family:'Bebas Neue', sans-serif; font-size:1.5rem; letter-spacing:.2em; text-transform:uppercase; pointer-events:none; }
/* Las flechas sobre una celda negra siguen siendo visibles */
.carrusel--cronologico .carrusel-btn { mix-blend-mode:difference; color:#fff; }
.carrusel--cronologico .carrusel-pista { will-change:transform; }

/* Acordeón: al pulsar una categoría sus eventos se despliegan hacia abajo (y la que
   estaba abierta se pliega); los carteles van apareciendo de izquierda a derecha. */
.intro-cat-eventos { display:none; grid-template-rows:0fr; }
.intro--abierta .intro-cat-eventos { display:grid; transition:grid-template-rows .7s cubic-bezier(.22,.8,.3,1); }
.intro--abierta .intro-cat.is-open .intro-cat-eventos { grid-template-rows:1fr; }
.intro-cat-eventos-in { min-height:0; overflow:hidden; visibility:hidden; transition:visibility 0s linear .7s; }
.intro-cat.is-open .intro-cat-eventos-in { visibility:visible; transition-delay:0s; }
.intro-cat.sin-transicion .intro-cat-eventos, .intro-cat.sin-transicion .intro-cat-eventos-in { transition:none; }
@media (prefers-reduced-motion: no-preference) {
  .intro--interactive .intro-cat.is-open .carrusel-celda,
  .intro--interactive .intro-cat.is-open .portada-vacio { animation:intro-cartel-in .7s ease both; animation-delay:calc(250ms + min(var(--c, 0), 6) * 90ms); }
}
@media (prefers-reduced-motion: reduce) { .intro--abierta .intro-cat-eventos { transition:none; } }
@keyframes intro-cartel-in { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:none; } }
/* Franja A LA CARTA: panel de texto con días y horario (sin carrusel) */
.intro-a-la-carta { padding:2.5rem 1.2rem; text-align:center; }
.intro-a-la-carta p { margin:0; }
.intro-a-la-carta-dias, .intro-a-la-carta-horas { font-family:'Bebas Neue', sans-serif; font-size:clamp(1.8rem, 4vw, 2.5rem); line-height:1.05; letter-spacing:.03em; text-transform:uppercase; }
.intro-a-la-carta-horas span { font-size:.6em; }
.intro-a-la-carta-nota { margin-top:.9rem !important; font-size:.95rem; }
/* ---------- Comilista en la portada (app/Views/_comilista.php · comilista.js · mapa-teselas.js) ---------- */
.comilista-cartel { margin:0; border:0; background:none; font:inherit; cursor:pointer; }
.comilista-cartel:focus-visible { outline:2px solid currentColor; outline-offset:-6px; }
.comilista-post[hidden], .comilista-carteles[hidden] { display:none; }
@media (prefers-reduced-motion: no-preference) {
  .comilista-post:not([hidden]) { animation:comilista-entra .35s ease both; }
}
@keyframes comilista-entra { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
/* Volver: negro, a todo lo ancho, bien visible */
.comilista-volver { display:flex; align-items:center; gap:.6rem; width:100%; min-height:44px; margin:0; padding:.5rem 1.2rem; border:0; border-bottom:1px solid var(--ink); background:#000; color:#fff;
  font-family:'Bebas Neue', sans-serif; font-size:clamp(1.25rem, 4vw, 1.8rem); letter-spacing:.06em; line-height:1; text-transform:uppercase; text-align:left; cursor:pointer; }
.comilista-volver:hover, .comilista-volver:focus-visible { background:var(--bg); color:var(--ink); outline:none; }
/* Primera celda del post: nombre del sitio en vertical (como ANTERIORES) a la izquierda del cartel */
.comilista-pista .carrusel-celda:first-child { position:relative; }
.comilista-rotulo { position:absolute; top:0; bottom:0; left:0; z-index:1; width:2.4rem; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000; color:#fff; border-right:1px solid #fff;
  writing-mode:vertical-rl; transform:rotate(180deg); font-family:'Bebas Neue', sans-serif; font-size:1.5rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; pointer-events:none; }
/* El cartel del post mide igual que los platos; el nombre vertical va en el margen izquierdo de la celda */
.comilista-foto--cartel { padding-left:0; }
/* Móvil: los carruseles del Comilista se recorren arrastrando, sin flechas (el visor sí las lleva) */
@media (max-width:699px) { .comilista .carrusel-btn { display:none; } }
/* Platos y mapa: misma caja vertical 2:3 que un cartel */
.comilista-media { display:block; width:100%; max-width:none; aspect-ratio:2 / 3; object-fit:cover; }
.comilista-foto { cursor:default; }
/* Cartel y platos del post: botones que abren el visor (comilista-visor.js) */
button.comilista-foto { margin:0; border:0; background:none; font:inherit; color:inherit; cursor:zoom-in; }
button.comilista-foto:focus-visible { outline:2px solid currentColor; outline-offset:-6px; }
/* Punto del sitio en su mapa (el círculo RG es solo para Raïm): negro con borde blanco */
.comilista-mapa-punto { position:absolute; left:50%; top:50%; z-index:1; width:18px; height:18px; border-radius:50%; background:#000; border:3px solid #fff; box-shadow:0 0 0 1px #000, 0 0 0 7px rgba(0,0,0,.18); transform:translate(-50%, -50%); pointer-events:none; }
/* Mapa: teselas OSM en blanco y negro con el círculo RG en el punto */
.comilista-mapa { position:relative; overflow:hidden; background:#fff; }
.comilista-mapa-teselas { position:absolute; inset:0; filter:grayscale(1) contrast(1.15); }
.comilista-mapa-teselas img { position:absolute; width:256px; height:256px; max-width:none; }
.comilista-mapa .mapa-marcador { z-index:1; }
.comilista-mapa .mapa-atribucion { z-index:1; }
.comilista-mapa-sinjs { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; text-align:center; font-family:'Bebas Neue', sans-serif; font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase; }
.comilista-mapa.is-montado .comilista-mapa-sinjs { display:none; }
.comilista-mapa-enlace { cursor:pointer; color:inherit; }
@media (hover:hover) { .comilista-mapa-enlace:hover .comilista-mapa-teselas { filter:grayscale(1) contrast(1.15) invert(1); } }
.comilista-mapa-enlace:focus-visible { outline:2px solid currentColor; outline-offset:-6px; }
/* Eventos con fotos (render_eventos_portada): penúltima ficha VER EVENTO (negra) y última
   la web del invitado/ponente (blanca). Al pasar el ratón se invierten como las tarjetas. */
.comilista-accion { cursor:pointer; color:inherit; }
.comilista-accion-cara { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; padding:1rem; box-sizing:border-box; text-align:center; background:#000; color:#fff; overflow:hidden; }
.comilista-accion--web .comilista-accion-cara { background:#fff; color:var(--ink); }
.comilista-accion-texto { font-family:'Bebas Neue', sans-serif; font-size:clamp(2rem, 4vw, 2.8rem); line-height:.95; letter-spacing:.03em; text-transform:uppercase; }
.comilista-accion-nombre { font-weight:600; text-transform:uppercase; line-height:1.2; overflow-wrap:anywhere; }
.comilista-accion-host { font-size:.8rem; overflow-wrap:anywhere; }
@media (hover:hover) {
  .comilista-accion:hover .comilista-accion-cara { background:#fff; color:var(--ink); }
  .comilista-accion--web:hover .comilista-accion-cara { background:#000; color:#fff; }
}
.comilista-accion:focus-visible { outline:2px solid currentColor; outline-offset:-6px; }
/* Carteles de evento que despliegan sus fotos: botón con aspecto de tarjeta */
.comilista--eventos .comilista-cartel { width:100%; text-align:inherit; }

/* ---------- Home: filas deslizantes (mismo estilo y ritmo que la portada intro) ----------
   PHP: app/Views/_fila.php · duración: assets/js/filas.js */
.fila { display:flex; align-items:center; height:var(--site-header-h); overflow:hidden; white-space:nowrap; user-select:none; border-bottom:1px solid var(--ink); background:var(--bg); color:var(--ink); }
.fila--oscuro { background:#000; color:#fff; border-bottom-color:#fff; }
.fila-track { display:inline-flex; flex-shrink:0; align-items:center; will-change:transform; animation:marquee 60s linear infinite; }
.fila-track--derecha { animation-direction:reverse; }
.fila-track span { font-family:'Bebas Neue', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; font-size:clamp(1.25rem, 4vw, 2.5rem); padding:0 .7em; }
@media (prefers-reduced-motion: reduce) { .fila-track { animation:none; } }

/* Cabecera de la home: el logo repetido en bucle hacia la izquierda + botón de menú */
.site-header-logos { flex:1 1 auto; min-width:0; display:flex; align-items:center; overflow:hidden; color:inherit; text-decoration:none; }
.site-header-logos img { display:block; height:calc(var(--site-header-h) * .42); width:auto; margin:0 1.6rem; pointer-events:none; }
.site-header--logos .site-hamburger { position:relative; z-index:1; border-left:1px solid var(--ink); }
.site-header-logos:focus-visible { outline:2px solid var(--ink); outline-offset:-4px; }
/* Sin enlaces en la cabecera: el menú lateral los muestra también en escritorio */
.has-cabecera-logos .site-menu-nav { display:block; }
.has-cabecera-logos .site-menu-nav li:last-child { border-bottom:1px solid var(--ink); }
@media (max-width:1024px) {
  .site-header--logos .site-hamburger { position:absolute; }
  .site-header--logos .site-header-logos { padding-right:var(--site-header-h); }
}

/* Carteles: borde que delimita cada cartel (negro en ACTIVIDADES, blanco en ANTERIORES) */
/* Marco del cartel con aire alrededor (paspartú) */
.tarjeta-evento-marco { display:block; box-sizing:border-box; width:calc(100% - 120px); max-width:380px; padding:clamp(12px, 1.6vw, 22px); border:1px solid var(--carrusel-linea, var(--ink)); }
.tarjeta-evento-marco .tarjeta-evento-media { width:100%; max-width:none; border:0; }
@media (max-width:1023px) { .tarjeta-evento-marco { width:calc(100% - 80px); } }
.carrusel.is-asomar .tarjeta-evento-marco { width:calc(100% - 24px); padding:8px; }
.carrusel.is-asomar .tarjeta-evento-marco .tarjeta-evento-media { width:100%; }
/* ANTERIORES: sección invertida; los carteles se ven con su color original (sin invertir, tampoco al pasar el ratón) */
.home-anteriores { background:#000; color:#fff; }

/* Móvil: cartel a la izquierda y el siguiente cortado por la mitad en el borde derecho (carrusel.js, data-carrusel-asomar) */
.carrusel.is-asomar .tarjeta-evento { padding:24px 0; }
.carrusel.is-asomar .tarjeta-evento-media { width:calc(100% - 24px); }
.carrusel.is-asomar .carrusel-btn { display:none; }
/* Carrusel finito: en el primer y último cartel la flecha de ese lado se atenúa */
.carrusel-btn:disabled { opacity:.2; cursor:default; pointer-events:none; }

/* ---------- /sala: accesos rápidos en rejilla con bordes (estética de la web) ---------- */
.sala-accesos { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows:1fr; border-top:1px solid var(--ink); border-left:1px solid var(--ink); background:var(--bg); }
.sala-acceso { display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem; min-height:150px; padding:1.4rem 1.2rem; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--bg); color:var(--ink); text-decoration:none; transition:background-color .15s ease, color .15s ease; }
.sala-acceso-titulo { font-family:'Anton', sans-serif; font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.05; text-transform:uppercase; letter-spacing:.02em; }
.sala-acceso-desc { font-family:'Karla', sans-serif; font-size:.85rem; line-height:1.35; opacity:.7; }
.sala-acceso:hover, .sala-acceso:focus-visible { background:var(--ink); color:#fff; outline:none; }
.sala-acceso:hover .sala-acceso-desc, .sala-acceso:focus-visible .sala-acceso-desc { opacity:.85; }

/* ---------- /sala: panel inicial sin sidebar + entrada del sidebar al abrir una sección ----------
   Clases puestas en layout.php: .admin-shell--inicio (panel) y .admin-shell--entrada
   (primera sección abierta desde el panel). */
.admin-shell--inicio .admin-sidebar { background:#fafafa; color:var(--ink); }
.admin-shell--inicio .admin-nav { display:none; }
.admin-shell--inicio .admin-sidebar-footer { border-top-color:rgba(0,0,0,.12); }
.admin-shell--inicio .admin-sidebar-footer .admin-nav-link { color:rgba(0,0,0,.65); }
.admin-shell--inicio .admin-sidebar-footer .admin-nav-link:hover { color:var(--ink); background:transparent; }

.admin-shell--entrada .admin-sidebar { position:sticky; isolation:isolate; background:#fafafa; animation:sala-sb-texto .45s ease forwards; }
.admin-shell--entrada .admin-sidebar::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--ink); transform-origin:0 50%; animation:sala-sb-fondo .45s cubic-bezier(.65,0,.35,1) both; }
.admin-shell--entrada .admin-sidebar-footer { animation:sala-sb-linea .45s ease both; }
.admin-shell--entrada .admin-sidebar-footer .admin-nav-link { animation:sala-sb-salir .45s ease both; }
.admin-shell--entrada .admin-nav .admin-nav-link { animation:sala-sb-menu .35s ease .3s both; }
@keyframes sala-sb-fondo { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes sala-sb-texto { from { color:var(--ink); } to { color:#fff; } }
@keyframes sala-sb-linea { from { border-top-color:rgba(0,0,0,.12); } to { border-top-color:rgba(255,255,255,.15); } }
@keyframes sala-sb-salir { from { color:rgba(0,0,0,.65); } to { color:rgba(255,255,255,.65); } }
@keyframes sala-sb-menu { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .admin-shell--entrada .admin-sidebar, .admin-shell--entrada .admin-sidebar::before,
  .admin-shell--entrada .admin-sidebar-footer, .admin-shell--entrada .admin-sidebar-footer .admin-nav-link,
  .admin-shell--entrada .admin-nav .admin-nav-link { animation-duration:.01s; animation-delay:0s; }
}

/* ---------- /sala: editor de texto enriquecido (admin-richtext.js) ---------- */
.admin-textarea[data-richtext][hidden] { display:none !important; }
.admin-rt { margin-top:.35rem; border:1px solid rgba(0,0,0,.16); border-radius:7px; background:var(--bg); overflow:hidden; font-weight:400; text-transform:none; letter-spacing:normal; }
.admin-rt:focus-within { border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.admin-rt-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem; padding:.3rem; border-bottom:1px solid rgba(0,0,0,.1); background:#f6f6f6; }
.admin-rt-btn { min-width:2rem; height:2rem; padding:0 .55rem; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--ink); font:600 .8rem 'Karla', sans-serif; cursor:pointer; }
.admin-rt-btn:hover { background:#e8e8e8; }
.admin-rt-btn.is-active { background:var(--ink); color:#fff; }
.admin-rt-btn:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.admin-rt-btn:disabled { opacity:.4; cursor:default; }
.admin-rt-btn.is-bold { font-weight:800; }
.admin-rt-btn.is-italic { font-style:italic; font-family:Georgia, serif; }
.admin-rt-btn.is-underline { text-decoration:underline; }
.admin-rt-sep { width:1px; height:1.2rem; margin:0 .25rem; background:rgba(0,0,0,.15); }
.admin-rt-editor { padding:.6rem .8rem; font:400 .95rem/1.6 'Karla', sans-serif; color:var(--ink); outline:none; overflow-wrap:anywhere; cursor:text; }
.admin-rt-editor p { margin:0 0 .7em; }
.admin-rt-editor p:last-child { margin-bottom:0; }
.admin-rt-editor ul, .admin-rt-editor ol { margin:0 0 .7em; padding-left:1.4em; }
.admin-rt-editor a { color:inherit; text-decoration:underline; }

/* Web pública: texto enriquecido (RichText::render) */
.texto-rico p { margin:0 0 1em; }
.texto-rico p:last-child { margin-bottom:0; }
.texto-rico ul, .texto-rico ol { margin:0 0 1em; padding-left:1.4em; text-align:left; display:inline-block; }
.texto-rico a { color:inherit; text-decoration:underline; text-underline-offset:.15em; }

/* Carteles verticales (2:3) en los carruseles: tope de ancho para que no sean enormes en escritorio */


/* Aire vertical entre los carteles y las filas de texto (ACTIVIDADES / ANTERIORES) */
.carrusel .tarjeta-evento { padding:clamp(36px, 5vw, 64px) 0; }
.carrusel.is-asomar .tarjeta-evento { padding:36px 0; }
/* El cartel se ve entero con su proporción real; los carteles se alinean arriba */
.tarjeta-evento-marco img.tarjeta-evento-media { height:auto; aspect-ratio:auto; object-fit:contain; }
.carrusel .tarjeta-evento { justify-content:flex-start; }

/* ---------- Home: fila de carteles más baja + hover invertido con la info ----------
   Blanco (ACTIVIDADES): al pasar el ratón el bloque pasa a negro, el cartel se
   invierte y aparece la info en blanco. Oscuro (ANTERIORES): justo al revés. */
.carrusel .tarjeta-evento { padding:26px 0 18px; transition:background-color .2s ease, color .2s ease; }
.carrusel .tarjeta-evento-marco { width:calc(100% - 80px); max-width:230px; padding:12px; transition:border-color .2s ease; }
.carrusel .tarjeta-evento-marco img.tarjeta-evento-media { transition:filter .2s ease; }
.tarjeta-evento-info { display:flex; flex-direction:column; align-items:center; gap:.25rem; width:calc(100% - 40px); max-width:320px; min-height:3.4rem; margin-top:.8rem; text-align:center; opacity:0; transition:opacity .2s ease; }
.tarjeta-evento-info .tarjeta-evento-titulo { width:100%; margin:0; font-size:clamp(14px, 1.2vw, 17px); line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-decoration:none !important; }
.tarjeta-evento-info .tarjeta-evento-meta { width:100%; margin:0; font-size:.75rem; opacity:.85; }
.carrusel.is-asomar .tarjeta-evento { padding:22px 0 14px; }
.carrusel.is-asomar .tarjeta-evento-marco { max-width:none; padding:8px; }
.carrusel.is-asomar .tarjeta-evento-info { width:calc(100% - 16px); }

@media (hover:hover) {
  .carrusel .tarjeta-evento:hover { background:var(--ink); color:#fff; }
  .carrusel .tarjeta-evento:hover .tarjeta-evento-marco { border-color:#fff; }
  .carrusel .tarjeta-evento:hover img.tarjeta-evento-media { filter:invert(1); }
  .carrusel .tarjeta-evento:hover .tarjeta-evento-info { opacity:1; }
  .carrusel--oscuro .tarjeta-evento:hover { background:#fff; color:var(--ink); }
  .carrusel--oscuro .tarjeta-evento:hover .tarjeta-evento-marco { border-color:var(--ink); }
  .carrusel--oscuro .tarjeta-evento:hover img.tarjeta-evento-media { filter:none; } /* sin cambio de color */
}
/* Teclado: mismo efecto con el foco */
.carrusel .tarjeta-evento:focus-visible { background:var(--ink); color:#fff; outline-color:#fff; }
.carrusel .tarjeta-evento:focus-visible .tarjeta-evento-marco { border-color:#fff; }
.carrusel .tarjeta-evento:focus-visible img.tarjeta-evento-media { filter:invert(1); }
.carrusel .tarjeta-evento:focus-visible .tarjeta-evento-info { opacity:1; }
.carrusel--oscuro .tarjeta-evento:focus-visible { background:#fff; color:var(--ink); outline-color:var(--ink); }
.carrusel--oscuro .tarjeta-evento:focus-visible .tarjeta-evento-marco { border-color:var(--ink); }
.carrusel--oscuro .tarjeta-evento:focus-visible img.tarjeta-evento-media { filter:none; }
/* Cartel y platos del post de Comilista: sin el efecto hover de las tarjetas de evento (se abren en el visor). El mapa (enlace) conserva el suyo. */
@media (hover:hover) {
  .carrusel .tarjeta-evento.comilista-foto:not(.comilista-mapa-enlace):not(.comilista-accion):hover { background:transparent; color:inherit; }
  .carrusel .tarjeta-evento.comilista-foto:not(.comilista-mapa-enlace):not(.comilista-accion):hover .tarjeta-evento-marco { border-color:var(--carrusel-linea, var(--ink)); }
  .carrusel .tarjeta-evento.comilista-foto:not(.comilista-mapa-enlace):not(.comilista-accion):hover .tarjeta-evento-info { opacity:0; }
  .carrusel .tarjeta-evento.comilista-foto:not(.comilista-mapa-enlace):not(.comilista-accion):hover img.tarjeta-evento-media { filter:none; opacity:1; }
}
/* Pantallas táctiles (sin hover): la info se ve siempre, más pequeña */
@media (hover:none) {
  .tarjeta-evento-info { opacity:1; min-height:0; }
}
@media (prefers-reduced-motion: reduce) {
  .carrusel .tarjeta-evento, .carrusel .tarjeta-evento-marco, .tarjeta-evento-info, .carrusel .tarjeta-evento-marco img.tarjeta-evento-media { transition:none; }
}
/* Sin menú hamburguesa: el logo ocupa toda la cabecera también en móvil */
.site-header--logos .site-header-logos { padding-right:0; }

/* ---------- Prueba: info centrada ENCIMA del cartel (sin espacio debajo) ----------
   Al pasar el ratón: bloque invertido, cartel muy tenue y la info en el centro. */
.carrusel .tarjeta-evento { padding:26px 0; }
.carrusel.is-asomar .tarjeta-evento { padding:22px 0; }
.tarjeta-evento-marco { position:relative; }
.carrusel .tarjeta-evento-info { position:absolute; inset:0; z-index:1; width:auto; max-width:none; min-height:0; margin:0; padding:14px; justify-content:center; opacity:0; pointer-events:none; }
.carrusel .tarjeta-evento-info .tarjeta-evento-titulo { font-size:clamp(15px, 1.35vw, 19px); -webkit-line-clamp:4; }
.carrusel .tarjeta-evento-marco img.tarjeta-evento-media,
.carrusel .tarjeta-evento-marco .tarjeta-evento-iniciales { transition:filter .2s ease, opacity .2s ease; }
@media (hover:hover) {
  .carrusel .tarjeta-evento:hover .tarjeta-evento-media { opacity:.14; }
}
.carrusel .tarjeta-evento:focus-visible .tarjeta-evento-media { opacity:.14; }
/* En táctil no hay hover: solo el cartel */
@media (hover:none) {
  .carrusel .tarjeta-evento-info { opacity:0; }
}

/* ---------- Ficha: RESERVAR como enlace, cartel ampliable y navegación entre eventos ---------- */
a.evento-btn-reservar { text-align:center; text-decoration:none; color:#fff; box-sizing:border-box; }
.cartel-ampliable { display:block; margin:0; padding:0; border:0; background:none; cursor:zoom-in; line-height:0; }
.cartel-ampliable:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.evento-cartel .cartel-ampliable { max-width:100%; }

.cartel-lightbox { width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#000; color:#fff; cursor:zoom-out; }
.cartel-lightbox::backdrop { background:#000; }
.cartel-lightbox img { display:block; width:100%; height:100%; object-fit:contain; padding:clamp(12px, 4vw, 48px); box-sizing:border-box; }
.cartel-lightbox-cerrar { position:fixed; top:.6rem; right:.8rem; z-index:1; width:44px; height:44px; padding:0; border:1px solid #fff; background:#000; color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; }
html.cartel-lightbox-abierto { overflow:hidden; }

.evento-nav { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.evento-nav-link { display:flex; flex-direction:column; justify-content:center; gap:.35rem; min-height:110px; padding:1.2rem 1.4rem; color:var(--ink); text-decoration:none; transition:background-color .15s ease, color .15s ease; }
.evento-nav-link.is-anterior { border-right:1px solid var(--ink); align-items:flex-start; text-align:left; }
.evento-nav-link.is-siguiente { align-items:flex-end; text-align:right; }
.evento-nav-dir { font-family:'Bebas Neue', sans-serif; font-size:clamp(1.4rem, 3.5vw, 2.2rem); letter-spacing:.03em; line-height:1; }
.evento-nav-titulo { font-family:'Karla', sans-serif; font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; opacity:.75; overflow-wrap:normal; }
a.evento-nav-link:hover, a.evento-nav-link:focus-visible { background:var(--ink); color:#fff; outline:none; }

/* ---------- Página de reserva (/eventos/{slug}/reservar) ----------
   Mismo diseño en móvil y escritorio (en escritorio, centrado con ancho máximo). */
.reserva { --reserva-max:880px; }
.reserva-top, .reserva-bloque, .reserva-politica { max-width:var(--reserva-max); margin:0 auto; box-sizing:border-box; }
.reserva-top { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--ink); }
@media (min-width:881px) { .reserva-top { border-left:1px solid var(--ink); border-right:1px solid var(--ink); } }
.reserva-izq { display:flex; flex-direction:column; border-right:1px solid var(--ink); min-width:0; }
.reserva-titulo { flex:1 1 auto; display:flex; align-items:center; margin:0; padding:clamp(14px, 3vw, 28px); font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:clamp(1.7rem, 7vw, 3.6rem); line-height:.95; letter-spacing:.02em; text-transform:uppercase; overflow-wrap:normal; }
.reserva-titulo a { color:inherit; text-decoration:none; }
.reserva-titulo a:hover { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.1em; }
.reserva-datos { display:grid; grid-template-columns:1fr 1fr; margin:0; border-top:1px solid var(--ink); }
.reserva-datos > div { padding:clamp(10px, 2vw, 16px); border-bottom:1px solid var(--ink); min-width:0; }
.reserva-datos > div:nth-child(odd) { border-right:1px solid var(--ink); }
.reserva-datos > div:nth-last-child(-n+2) { border-bottom:0; }
.reserva-datos dt { font-family:'Karla', sans-serif; font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.reserva-datos dd { margin:.3rem 0 0; font-family:'Bebas Neue', sans-serif; font-size:clamp(1.2rem, 4.5vw, 2rem); line-height:1; letter-spacing:.02em; overflow-wrap:normal; }
.reserva-cartel { display:flex; align-items:center; justify-content:center; padding:clamp(10px, 2.5vw, 24px); min-width:0; }
.reserva-cartel .cartel-ampliable, .reserva-cartel img { width:100%; }
.reserva-cartel img { display:block; height:auto; border:1px solid var(--ink); }
.reserva-cartel-placeholder { width:100%; aspect-ratio:2 / 3; display:flex; align-items:center; justify-content:center; border:1px solid var(--ink); font-family:'Anton', sans-serif; font-size:clamp(2rem, 8vw, 4rem); }

.reserva-bloque { padding:clamp(18px, 4vw, 36px) clamp(16px, 4vw, 36px) clamp(26px, 5vw, 44px); }
.reserva-etiqueta { display:block; margin-bottom:.35rem; font-family:'Karla', sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.reserva-form input[type="email"], .reserva-form input[type="text"], .reserva-solicitud input, .reserva-solicitud textarea { display:block; width:100%; box-sizing:border-box; padding:.75rem .8rem; border:1px solid var(--ink); border-radius:0; background:var(--bg); color:var(--ink); font:400 1rem 'Karla', sans-serif; }
.reserva-form input:focus-visible, .reserva-solicitud input:focus-visible, .reserva-solicitud textarea:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.reserva-form input[readonly] { background:#f3f3f3; }
.reserva-fila-campos { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:end; }
.reserva-stepper { display:flex; align-items:stretch; height:46px; border:1px solid var(--ink); }
.reserva-stepper button { width:46px; padding:0; border:0; background:var(--bg); color:var(--ink); font:400 1.5rem 'Karla', sans-serif; cursor:pointer; }
.reserva-stepper button:hover:not(:disabled) { background:var(--ink); color:#fff; }
.reserva-stepper button:disabled { opacity:.3; cursor:default; }
.reserva-stepper output { display:flex; align-items:center; justify-content:center; min-width:3rem; border-left:1px solid var(--ink); border-right:1px solid var(--ink); font-family:'Bebas Neue', sans-serif; font-size:1.7rem; }
.reserva-email-estado { min-height:1.2em; margin:.5rem 0 0; font-size:.85rem; }
.reserva-email-estado.is-ok, .reserva-email-estado.is-error { font-weight:600; }
.reserva-nombres { display:grid; gap:.9rem; margin-top:1.1rem; }
.reserva-total { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; margin-top:1.4rem; padding:1rem 1.1rem; background:var(--ink); color:#fff; }
.reserva-total .reserva-etiqueta { margin:0; flex:1 1 100%; opacity:.8; }
.reserva-total strong { font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:clamp(2rem, 8vw, 3rem); line-height:1; letter-spacing:.02em; }
.reserva-total-detalle { font-size:.85rem; opacity:.8; }
.reserva-pago { margin:1rem 0 0; padding-left:1.3rem; font-size:.92rem; line-height:1.55; }
.reserva-aviso { margin:1rem 0 0; padding:.8rem 1rem; border:1px solid var(--ink); font-size:.92rem; line-height:1.45; }
.reserva-aviso.is-error { background:var(--ink); color:#fff; }
.reserva-bloque > .reserva-aviso:first-child { margin-top:0; margin-bottom:1rem; }
.reserva-enviar { display:block; width:100%; margin-top:1.4rem; padding:1.1rem 1rem; border:1px solid var(--ink); background:var(--ink); color:#fff; font-family:'Bebas Neue', sans-serif; font-size:1.7rem; letter-spacing:.05em; cursor:pointer; }
.reserva-enviar:hover:not(:disabled) { background:#fff; color:var(--ink); }
.reserva-enviar:disabled { opacity:.5; cursor:wait; }
.reserva-enviar:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.reserva-solicitud { margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--ink); }
.reserva-solicitud h2, .reserva-estado h2 { margin:0 0 .6rem; font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:clamp(1.6rem, 5vw, 2.2rem); letter-spacing:.03em; }
.reserva-solicitud p { font-size:.92rem; line-height:1.55; }
.reserva-solicitud-campos { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1rem; }
.reserva-solicitud-motivo { grid-column:1 / -1; }
.reserva-estado { margin:0; font-size:1rem; line-height:1.5; text-align:center; }
p.reserva-estado { font-family:'Bebas Neue', sans-serif; font-size:clamp(1.6rem, 5vw, 2.4rem); letter-spacing:.04em; }
.reserva-politica { padding:clamp(18px, 4vw, 36px); font-size:.95rem; line-height:1.6; }
@media (max-width:420px) {
  .reserva-fila-campos, .reserva-solicitud-campos { grid-template-columns:1fr; }
}
.reserva-sois-mas { display:block; margin:.6rem 0 0; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-size:.9rem; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.reserva-sois-mas:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
/* Lo que el JS oculta con [hidden] se oculta de verdad aunque su clase fije display
   ("¿Sois más?" solo con el evento lleno para tu grupo, el total en lista de espera...) */
.reserva-form [hidden] { display:none !important; }

/* Calendario: el mes y el año se deslizan dentro de su línea, entre las flechas */
.cal-titulo { justify-content:flex-start; overflow:hidden; min-width:0; white-space:nowrap; }
.cal-titulo .fila-track span { font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:clamp(1.25rem, 4vw, 2.5rem); letter-spacing:.03em; padding:0 .7em; }

/* ---------- DÓNDE ESTAMOS: mapa estático a todo el ancho (_donde_estamos.php) ---------- */
.mapa { position:relative; display:block; height:clamp(260px, 36vw, 480px); overflow:hidden; border-bottom:1px solid var(--ink); background:#eee; cursor:pointer; }
.mapa-img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; transition:filter .25s ease; }
.mapa-marcador { position:absolute; left:50%; top:50%; width:clamp(56px, 6vw, 76px); height:clamp(56px, 6vw, 76px); transform:translate(-50%, -50%); border:2px solid var(--ink); border-radius:50%; background:#fff; overflow:hidden; box-shadow:0 0 0 6px rgba(255,255,255,.6); transition:transform .25s ease; }
.mapa-marcador img { display:block; width:100%; height:100%; }
.mapa-atribucion { position:absolute; right:.4rem; bottom:.3rem; padding:.1rem .35rem; background:rgba(255,255,255,.85); color:var(--ink); font-size:.62rem; }
/* Hover solo con ratón (en táctil el toque dejaba el mapa invertido); tras pulsar,
   .is-pulsado lo anula hasta que el ratón sale (al volver de Google Maps no queda invertido). */
@media (hover:hover) { .mapa:not(.is-pulsado):hover .mapa-img { filter:invert(1); } }
.mapa:focus-visible .mapa-img { filter:invert(1); }
@media (hover:hover) { .mapa:not(.is-pulsado):hover .mapa-marcador { transform:translate(-50%, -50%) scale(1.08); } }
.mapa:focus-visible .mapa-marcador { transform:translate(-50%, -50%) scale(1.08); }
.mapa:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; }
.mapa-direccion { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.5rem; padding:1.1rem clamp(16px, 3vw, 32px); border-bottom:1px solid var(--ink); color:var(--ink); text-decoration:none; transition:background-color .15s ease, color .15s ease; }
.mapa-direccion-texto { display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem; }
.mapa-direccion-texto strong { font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:clamp(1.5rem, 4vw, 2.3rem); letter-spacing:.03em; line-height:1; }
.mapa-direccion-texto span { font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; }
.mapa-direccion-cta { font-family:'Karla', sans-serif; font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
@media (hover:hover) { .mapa-direccion:not(.is-pulsado):hover { background:var(--ink); color:#fff; outline:none; } }
.mapa-direccion:focus-visible { background:var(--ink); color:#fff; outline:none; }
@media (prefers-reduced-motion: reduce) { .mapa-img, .mapa-marcador { transition:none; } }

/* Galerías en escritorio: filas más bajas y alargadas (formato panorámico) */
@media (min-width:700px) {
  .dualBlock { min-height:0; height:clamp(220px, 26vw, 400px); }
  .dualBlock-info { padding:28px clamp(32px, 5vw, 80px); overflow:hidden; }
  .dualBlock-info h2 { font-size:clamp(1.5rem, 2.4vw, 2.2rem); margin-bottom:.6rem; }
  .dualBlock-info p, .dualBlock-info .texto-rico { font-size:.95rem; line-height:1.5; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .dualBlock-info .texto-rico p { margin:0 0 .5em; }
}

/* DÓNDE ESTAMOS: borde negro encima de la franja */
.donde-estamos { border-top:1px solid var(--ink); }

/* Galerías: la fila entera es el enlace a los eventos de la categoría */
.galeria { display:block; color:inherit; text-decoration:none; }
.galeria .dualBlock-info { transition:background-color .2s ease, color .2s ease; }
.galeria:hover .dualBlock-info, .galeria:focus-visible .dualBlock-info { background:var(--ink); color:#fff; }
.galeria:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; }

/* Marcador del mapa más pequeño */
.mapa-marcador { width:clamp(34px, 3vw, 44px); height:clamp(34px, 3vw, 44px); box-shadow:0 0 0 4px rgba(255,255,255,.6); }

/* Galerías: secciones aún más bajas (texto + imagen) */
@media (min-width:700px) {
  .dualBlock { height:clamp(160px, 17vw, 280px); }
  .dualBlock-info { padding:18px clamp(28px, 4vw, 64px); }
  .dualBlock-info p, .dualBlock-info .texto-rico { -webkit-line-clamp:3; margin-bottom:0; }
}
@media (max-width:699px) {
  .dualBlock-info { padding:24px 20px; }
  .dualBlock-media img, .dualBlock-media .category-placeholder { aspect-ratio:16 / 9; }
}

/* Franjas negras: el texto blanco sobre negro se ve ópticamente más grueso
   (el suavizado lo engorda). Se compensa con un trazo negro fino pintado por
   encima del contorno (se come un poco del borde de cada letra) y suavizado en
   escala de grises, para que pesen igual que las blancas. */
.fila--oscuro .fila-track span {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-stroke:.018em #000;
}

/* Reserva: cartel a la izquierda, título y datos a la derecha */
.reserva-izq { border-right:0; }
.reserva-cartel { border-right:1px solid var(--ink); }

/* Visor del cartel: fondo blanco, sin bordes; la X también sin borde */
.cartel-lightbox { background:#fff; color:var(--ink); border:0; outline:0; }
.cartel-lightbox::backdrop { background:#fff; }
.cartel-lightbox img { border:0; }
.cartel-lightbox-cerrar { border:0; background:transparent; color:var(--ink); font-size:2.2rem; }
.cartel-lightbox-cerrar:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* RESERVAR ocupa toda la franja en negro (también en móvil, donde
   .evento-bloque recibía padding y dejaba margen blanco alrededor) */
.evento-bloque.evento-bloque-reserva { padding:0; }
.evento-bloque-reserva .evento-btn-reservar { display:block; width:100%; box-sizing:border-box; margin:0; }

/* Anterior / siguiente: flecha + nombre del evento y la fecha debajo, centrados en vertical */
.evento-nav { align-items:stretch; }
.evento-nav-link { justify-content:center; gap:.45rem; min-height:120px; }
.evento-nav-titulo { display:flex; align-items:center; gap:.6rem; max-width:100%; font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:clamp(1.3rem, 3vw, 2rem); line-height:1.05; letter-spacing:.03em; text-transform:uppercase; opacity:1; }
.evento-nav-link.is-siguiente .evento-nav-titulo { justify-content:flex-end; }
.evento-nav-nombre { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:normal; }
.evento-nav-flecha { flex:0 0 auto; }
.evento-nav-fecha { font-family:'Karla', sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; opacity:.75; }
.evento-nav-dir { display:none; }

/* ---------- Ficha del evento en móvil ----------
   Cartel a todo el ancho, sin el nombre (queda para lectores y buscadores) ni
   los datos (están en la página de reserva). Orden: cartel, DESCRIPCIÓN,
   descripción, invitado, RESERVA TU PLAZA. */
@media (max-width:700px) {
  .evento-cartel { padding:0; border-bottom:1px solid var(--ink); }
  .evento-cartel .cartel-ampliable { width:100%; max-width:none; }
  .evento-cartel img { width:100%; max-width:none; max-height:none; height:auto; }
  .evento-cartel-placeholder { max-width:none; }
  .evento-ficha .evento-titulo { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .evento-ficha .evento-datos { display:none; }
}

/* Visor del cartel: fijado a la pantalla visible y centrado (en móvil 100vh
   incluye la barra del navegador y el cartel quedaba demasiado abajo) */
.cartel-lightbox[open] { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:clamp(12px, 4vw, 48px); overflow:hidden; }
.cartel-lightbox[open] img { width:auto; height:auto; max-width:100%; max-height:100%; padding:0; object-fit:contain; }

/* Texto de las franjas deslizantes: clamp(2.2rem, 4vw, 2.5rem) en todas
   (filas y calendario), salvo la primera página (+18), que queda como estaba */
.fila-track span, .cal-titulo .fila-track span { font-size:clamp(2.2rem, 4vw, 2.5rem); }
/* La primera página (portada +18) mantiene su tamaño original */
.intro-row .intro-track span { font-size:clamp(1.25rem, 4vw, 2.5rem); }

/* Móvil: la info del evento se vuelve a ver (va tras la franja DESCRIPCIÓN) */
@media (max-width:700px) {
  .evento-ficha .evento-datos { display:block; }
}

/* Ficha en móvil: el cartel un pelín más pequeño, con aire alrededor */
@media (max-width:700px) {
  .evento-cartel { padding:18px; }
}

/* Visor del cartel: anclado arriba y con la altura de la zona SIEMPRE visible
   (100svh). En móvil 100%/100vh cuentan la barra del navegador como si no
   estuviera y el cartel quedaba por debajo del centro de lo que se ve. */
.cartel-lightbox[open] { inset:auto; top:0; left:0; right:0; bottom:auto; height:100vh; height:100svh; }

/* Reserva: cliente desconocido -> la solicitud aparece justo bajo el correo */
.reserva-form .reserva-solicitud { margin-top:1rem; }
.reserva-solicitud-lead { font-weight:600; }
.reserva-resto[hidden] { display:none; }

/* Reserva en móvil: la cabecera (cartel | título + 2x2) no parte palabras a
   la mitad; recuadros con letra algo menor para que quepan enteros. */
.reserva-titulo { overflow-wrap:normal; hyphens:manual; }
.reserva-datos dd { overflow-wrap:normal; word-break:normal; }
@media (max-width:700px) {
  .reserva-titulo { font-size:clamp(1.3rem, 6vw, 2.2rem); padding:12px; }
  .reserva-datos > div { padding:8px 10px; }
  .reserva-datos dt { font-size:.6rem; }
  .reserva-datos dd { font-size:clamp(1rem, 4.2vw, 1.4rem); white-space:nowrap; }
}

/* Reserva enviada: "Volver al evento" negro a todo el ancho de la pantalla */
.pago-volver { display:block; width:100%; box-sizing:border-box; margin:0; padding:40px 16px; background:var(--ink); color:#fff; text-align:center; text-decoration:none; text-transform:uppercase; font-size:16px; line-height:20px; letter-spacing:.04em; border-top:1px solid var(--ink); }
.pago-volver:hover { background:#222; }
.pago-volver:focus-visible { outline:2px solid #fff; outline-offset:-6px; }

/* De momento, sin footer en móvil */
@media (max-width:699px) {
  .site-footer { display:none; }
  body.has-site-header { padding-bottom:0; }
}

/* Calendario: en la lista del mes cada día es una franja blanca deslizante */
.cal-lista-dia .fila { border-top:0; }
.cal-lista-dia { border-bottom:0; }
.cal-lista-dia .cal-pop-lista { border-bottom:1px solid var(--ink); }

/* Calendario en móvil: cuadrícula del mes compacta y, debajo, la lista de
   días con eventos (cada día como franja deslizante). */
@media (max-width:699px) {
  .cal-rejilla { display:grid; height:auto; min-height:0; grid-template-rows:30px repeat(var(--cal-semanas, 6), 52px); border-bottom:1px solid var(--ink); }
  .cal-rejilla > .cal-celda:nth-last-child(-n+7) { border-bottom:0; }
  .cal-dia-semana { font-size:.65rem; letter-spacing:.04em; }
  .cal-dia { padding:.35rem .4rem; }
  .cal-num { font-size:1rem; }
  .cal-cuenta { font-size:0; }
  .cal-cuenta::before { content:""; display:block; width:6px; height:6px; border-radius:50%; background:currentColor; }
  .cal-lista { display:block; }
}

/* Todas las franjas deslizantes con línea arriba y abajo. La superior se
   solapa 1px con el bloque anterior: si ese bloque ya tiene línea inferior se
   funden en una (no sale doble); si no la tiene, aparece. */
.fila { border-top:1px solid var(--ink); margin-top:-1px; position:relative; }
.fila--oscuro { border-top-color:var(--ink); }

/* Ficha del evento en escritorio: cartel y info a media pantalla cada uno,
   ocupando al menos el alto libre bajo la cabecera. El cartel queda fijo
   (sticky) mientras se lee la info. */
@media (min-width:701px) {
  .evento-ficha { display:grid; grid-template-columns:1fr 1fr; align-items:start; min-height:calc(100vh - var(--site-header-h)); min-height:calc(100dvh - var(--site-header-h)); border-bottom:1px solid var(--ink); }
  .evento-ficha > .evento-cartel { position:sticky; top:var(--site-header-h); height:calc(100vh - var(--site-header-h)); height:calc(100dvh - var(--site-header-h)); box-sizing:border-box; padding:clamp(24px, 4vw, 60px); display:flex; align-items:center; justify-content:center; border-right:1px solid var(--ink); border-bottom:0; }
  .evento-ficha > .evento-cartel .cartel-ampliable { max-width:100%; max-height:100%; display:flex; justify-content:center; }
  .evento-ficha > .evento-cartel img { width:auto; height:auto; max-width:100%; max-height:calc(100vh - var(--site-header-h) - 2 * clamp(24px, 4vw, 60px)); max-height:calc(100dvh - var(--site-header-h) - 2 * clamp(24px, 4vw, 60px)); }
  .evento-info { display:flex; flex-direction:column; min-width:0; min-height:calc(100vh - var(--site-header-h)); min-height:calc(100dvh - var(--site-header-h)); }
  .evento-info .evento-bloque { padding-left:clamp(24px, 4vw, 60px); padding-right:clamp(24px, 4vw, 60px); }
  .evento-info .evento-bloque-reserva { margin-top:auto; border-bottom:0; }
  .evento-info .evento-titulo { padding-left:clamp(24px, 4vw, 60px); padding-right:clamp(24px, 4vw, 60px); }
}
@media (min-width:701px) { .evento-info .evento-bloque.evento-bloque-reserva { padding:0; } }

/* Reserva en escritorio: cartel | título + DÍA/HORA/DURACIÓN/PRECIO a media
   pantalla cada uno, a todo el ancho y ocupando el alto libre bajo la
   cabecera (como la ficha del evento). */
@media (min-width:701px) {
  .reserva-top { max-width:none; border-left:0; border-right:0; min-height:calc(100vh - var(--site-header-h)); min-height:calc(100dvh - var(--site-header-h)); }
  .reserva-cartel { padding:clamp(24px, 4vw, 60px); }
  .reserva-cartel .cartel-ampliable { display:flex; justify-content:center; width:auto; max-width:100%; }
  .reserva-cartel img { width:auto; max-width:100%; max-height:calc(100vh - var(--site-header-h) - 2 * clamp(24px, 4vw, 60px)); max-height:calc(100dvh - var(--site-header-h) - 2 * clamp(24px, 4vw, 60px)); }
  .reserva-titulo { padding:clamp(24px, 4vw, 60px); font-size:clamp(2.2rem, 4.5vw, 4.5rem); }
  .reserva-datos > div { padding:clamp(16px, 2vw, 28px) clamp(24px, 4vw, 60px); }
  .reserva-datos dd { font-size:clamp(1.6rem, 2.6vw, 2.6rem); }
}

/* Título del evento (ficha y página de reserva): mayúsculas y más grueso (Anton) */
.evento-titulo, .reserva-titulo { font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em; }
.evento-titulo { line-height:1.1; }
.reserva-titulo { line-height:1; }

/* Reserva en escritorio: título del mismo tamaño que en la ficha y los
   recuadros justo debajo, centrados en vertical: todo a la vista al abrir. */
@media (min-width:701px) {
  .reserva-izq { justify-content:center; }
  .reserva-titulo { flex:0 0 auto; font-size:36px; line-height:1.1; padding:clamp(20px, 3vw, 40px) clamp(24px, 4vw, 60px); border-top:1px solid var(--ink); }
  .reserva-datos > div:nth-last-child(-n+2) { border-bottom:1px solid var(--ink); }
}
@media (min-width:701px) and (max-width:1100px) { .reserva-titulo { font-size:32px; } }
@media (min-width:701px) and (max-width:900px) { .reserva-titulo { font-size:28px; } }

/* Reserva en escritorio: la parte de arriba deja sitio a la franja RESERVA TU
   PLAZA, que se ve siempre al abrir (alto = pantalla - cabecera - franja). */
@media (min-width:701px) {
  .reserva-top { min-height:calc(100vh - 2 * var(--site-header-h)); min-height:calc(100dvh - 2 * var(--site-header-h)); }
  .reserva-cartel img { max-height:calc(100vh - 2 * var(--site-header-h) - 2 * clamp(24px, 4vw, 60px)); max-height:calc(100dvh - 2 * var(--site-header-h) - 2 * clamp(24px, 4vw, 60px)); }
}

/* Reserva en escritorio: la parte de arriba se ajusta al alto de la pantalla:
   cabecera + [cartel | título y recuadros] + franja RESERVA TU PLAZA = alto
   visible. El cartel se escala para caber entero. (Solo escritorio.) */
@media (min-width:701px) {
  .reserva-top { height:calc(100vh - 2 * var(--site-header-h)); height:calc(100dvh - 2 * var(--site-header-h)); min-height:0; overflow:hidden; }
  .reserva-cartel { min-height:0; overflow:hidden; }
  .reserva-cartel .cartel-ampliable { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
  .reserva-cartel img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
  .reserva-izq { min-height:0; overflow:hidden; }
  .reserva-titulo { flex:0 1 auto; min-height:0; overflow:hidden; }
}

/* Reserva en móvil: cabecera compacta (alto natural, sin ajustar a la
   pantalla) y cartel sin borde que lo recuadre. */
@media (max-width:700px) {
  .reserva-top { grid-template-columns:48% 1fr; }
  .reserva-cartel { padding:8px; }
  .reserva-cartel-placeholder { border:0; }
  .reserva-cartel img { border:0; max-height:56vh; max-height:56dvh; width:auto; max-width:100%; margin:0 auto; }
  .reserva-izq { justify-content:space-between; }
  .reserva-titulo { flex:1 1 auto; font-size:clamp(1.25rem, 6vw, 2rem); padding:12px; }
  .reserva-datos > div { padding:8px 10px; }
  .reserva-datos dt { font-size:.6rem; }
  .reserva-datos dd { margin-top:.2rem; font-size:clamp(1.05rem, 4.6vw, 1.45rem); }
}

/* Sin efecto de subrayado al pasar el ratón en toda la web */
.admin-list-plain a:hover, .marquee-track a:hover, .event-grid .event-card:hover h3,
.tarjeta-evento:hover .tarjeta-evento-titulo, .cal-dia--evento:hover .cal-cuenta,
.cal-dia--evento.is-activo .cal-cuenta, .cal-evento:hover .cal-evento-titulo,
.reserva-titulo a:hover { text-decoration:none; }

/* Reserva: título sin línea superior y centrado como en la ficha del evento */
.reserva-titulo { border-top:0; justify-content:center; text-align:center; }
@media (max-width:700px) { .reserva-titulo { border-top:0; } }

/* Reserva en escritorio con footer fijo (>1024px): se descuenta también el
   footer para que la franja RESERVA TU PLAZA se vea siempre al abrir */
@media (min-width:1025px) {
  .reserva-top { height:calc(100vh - 2 * var(--site-header-h) - var(--site-footer-h)); height:calc(100dvh - 2 * var(--site-header-h) - var(--site-footer-h)); }
}

/* Selector de plazas: el recuadro se ajusta a − 1 + (en móvil se estiraba a
   todo el ancho y el + quedaba sin línea negra a la derecha) */
.reserva-stepper { width:max-content; }

/* Reserva: selector de plazas y correo siempre en la misma fila (móvil y
   escritorio) */
.reserva-fila-campos { grid-template-columns:auto minmax(0, 1fr); gap:.8rem; }
.reserva-email { min-width:0; }
@media (max-width:420px) { .reserva-fila-campos { grid-template-columns:auto minmax(0, 1fr); } }

/* ---------- Página "No lo soy" de la puerta +18 (app/Views/menor.php) ---------- */
.menor-body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); }
.menor { box-sizing:border-box; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; padding:2rem 16px; text-align:center; }
.menor-caja { box-sizing:border-box; width:clamp(130px, 22vw, 220px); aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:2px solid var(--ink); background:var(--bg); }
.menor-logo { width:66%; height:auto; display:block; }
.menor-titulo { max-width:18ch; margin:0; font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:clamp(2rem, 6vw, 4rem); line-height:1; letter-spacing:.02em; text-transform:uppercase; }
.menor-titulo--chiste { max-width:40ch; font-size:clamp(1.5rem, 4.2vw, 2.6rem); line-height:1.1; }

/* ---------- Visor del Comilista a pantalla completa (comilista-visor.js) ---------- */
.comilista-visor { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; outline:0; background:#fff; color:var(--ink); overflow:hidden; }
.comilista-visor::backdrop { background:#fff; }
.comilista-visor[open] { display:flex; align-items:center; justify-content:center; }
.comilista-visor-img { display:block; max-width:calc(100% - 7rem); max-height:calc(100% - 6rem); width:auto; height:auto; object-fit:contain; user-select:none; touch-action:pan-y; }
.comilista-visor-cerrar { position:fixed; top:.6rem; right:.8rem; z-index:2; width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--ink); font-size:2.2rem; line-height:1; cursor:pointer; }
.comilista-visor-btn { position:fixed; top:50%; z-index:2; display:flex; align-items:center; justify-content:center; width:44px; height:64px; padding:0; border:0; background:transparent; color:var(--ink); cursor:pointer; transform:translateY(-50%); }
.comilista-visor-btn--prev { left:.4rem; }
.comilista-visor-btn--next { right:.4rem; }
.comilista-visor-btn[hidden] { display:none; }
.comilista-visor-btn:disabled { opacity:.2; cursor:default; }
.comilista-visor-cerrar:focus-visible, .comilista-visor-btn:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.comilista-visor-contador { position:fixed; bottom:.8rem; left:0; right:0; margin:0; text-align:center; font-family:'Bebas Neue', sans-serif; font-size:1.3rem; letter-spacing:.08em; }
html.comilista-visor-abierto { overflow:hidden; }
@media (max-width:699px) {
  /* Móvil: foto casi a todo el ancho; las flechas quedan encima, en los bordes */
  .comilista-visor-img { max-width:100%; max-height:calc(100% - 7rem); }
  .comilista-visor-btn { background:rgba(255,255,255,.75); }
}