/* Modo Persuade (portada y /organizadores): escena oscura de marca, narrativa por desplazamiento.
   Solo transform y opacity se animan. CSP: sin style en línea. Con prefers-reduced-motion todo queda estático y legible. */

body.persuade {
  color-scheme: dark; background: var(--marino-950); color: var(--escena-texto);
  --fondo: #0B0E28; --superficie: #141A44; --superficie-2: #1B2250; --texto: #F5F7FA; --texto-2: #A9B0CC; --linea: #2A3158; --linea-fuerte: #6A7299;
  --enlace: #6FA3FF; --foco: #FFD200; --lado-aka: var(--aka-vivo); --lado-ao: var(--ao-vivo); --aka: var(--aka-vivo); --ao: var(--ao-vivo);
  --ok-t: #4ADE80; --ok-f: #0F2E22; --pend-t: #FFC83D; --pend-f: #33280A; --err-t: #FF7A80; --err-f: #3A1519; --info-t: #8DB6FF; --info-f: #14264F;
  --neu-t: #A9B0CC; --neu-f: #1B2250; --primario: #F5F7FA; --primario-texto: var(--marino-900); --sombra-1: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.5);
}
.p-portada { overflow-x: clip; background: var(--marino-950); }
.p-h2 { font: 700 var(--t-h2)/1.02 var(--fuente-marca); font-stretch: var(--ancho-marca); text-transform: uppercase; letter-spacing: 0; text-wrap: balance; color: #fff; max-width: 16em; }
.p-lead { font-size: var(--t-lead); line-height: 1.4; color: var(--escena-texto-2); max-width: 36em; margin: 16px 0 0; }
.p-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.p-micro { margin: 20px 0 0; font-size: .9375rem; color: var(--escena-texto-2); }
.p-micro a { color: var(--escena-texto); }
.franja-marca { display: block; width: 56px; height: 6px; margin-bottom: 24px; background: linear-gradient(100deg, var(--aka-vivo) 0 50%, var(--ao-vivo) 50% 100%); }
.p-portada :focus-visible { outline-color: var(--escena-foco); }
.btn.contorno { border-color: rgba(255,255,255,.5); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn.contorno:hover:not(:disabled) { background: rgba(255,255,255,.1); } }

/* ---------- hero a pantalla completa con velo marino; el titular se reduce y se fija al desplazar ---------- */
.p-hero { position: relative; height: calc((100svh - var(--barra-h)) * 1.7); }
.p-hero-fijo { position: sticky; top: var(--barra-h); height: calc(100svh - var(--barra-h)); min-height: 600px; overflow: hidden; isolation: isolate; background: var(--marino-900); display: flex; align-items: center; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
.p-foto { position: absolute; inset: 0; z-index: -3; background: var(--tatami); }
.p-foto::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 0%, rgba(255,255,255,.18), transparent 60%); }
.p-ilus { position: absolute; right: 3%; bottom: 4vw; width: min(773px, 58vw); max-width: none; height: auto; }
.p-foto-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 30%; }
.p-foto.con-foto::after { content: none; }
.p-trama { position: absolute; inset: 0; z-index: -2; background: url("/img/patron-tatami.svg") 0 0 / 64px 64px; -webkit-mask-image: linear-gradient(to right, #000 0 40%, transparent 70%); mask-image: linear-gradient(to right, #000 0 40%, transparent 70%); }
.p-velo { position: absolute; inset: 0; z-index: -1; background: var(--velo-hero); }
.p-hero-in { width: min(1280px, 100% - 2 * clamp(16px, 3vw, 32px)); margin: 0 auto; padding-bottom: 4vw; }
.p-hero-cuerpo { max-width: 56rem; animation: p-entra 420ms var(--ease-salida) both; }
.p-titular { margin: 0; font: 700 var(--t-hero)/.96 var(--fuente-marca); font-stretch: var(--ancho-marca); text-transform: uppercase; letter-spacing: -.005em; max-width: 10.5em; text-wrap: balance; color: #fff; transform-origin: 0 0; }
.p-hero-resto .p-lead { max-width: 34em; }
@keyframes p-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes p-titular { to { transform: translateY(-14vh) scale(.62); } }
@keyframes p-resto { to { opacity: 0; transform: translateY(-3vh); pointer-events: none; } }
@keyframes p-foto { to { opacity: .55; } }
.p-st .p-titular { animation: p-titular linear both; animation-timeline: scroll(root); animation-range: 0px 60vh; }
.p-st .p-fade { animation: p-resto linear both; animation-timeline: scroll(root); animation-range: 0px 36vh; }
.p-st .p-foto { animation: p-foto linear both; animation-timeline: scroll(root); animation-range: 0px 60vh; }

/* ---------- escenas fijadas ---------- */
.p-escena { position: relative; height: calc(100svh + 5 * 62svh); background: var(--marino-900); }
.p-escena-fija { position: sticky; top: var(--barra-h); height: calc(100svh - var(--barra-h)); min-height: 540px; display: flex; align-items: center; overflow: hidden; background: var(--marino-900) url("/img/patron-tatami.svg") 0 0 / 64px 64px; }
.p-escena-in { width: min(1280px, 100% - 2 * clamp(16px, 3vw, 32px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.p-pasos { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: paso; }
.p-pasos li { counter-increment: paso; }
.p-pasos button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 14px; border-radius: 10px; border: 0; background: transparent; color: var(--escena-texto-2); font: 600 1rem/1.2 var(--fuente-texto); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.p-pasos button::before { content: counter(paso); font: 700 1.25rem/1 var(--fuente-numeros); font-stretch: var(--ancho-marca); color: var(--escena-texto-2); min-width: 1ch; font-variant-numeric: tabular-nums; }
.p-pasos button[aria-current="step"] { background: rgba(255,255,255,.09); color: #fff; font-weight: 700; }
.p-pasos button[aria-current="step"]::before { color: var(--vivo); }
.p-pasos button:disabled { cursor: default; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .p-pasos button:hover:not([aria-current]) { background: rgba(255,255,255,.05); color: #fff; } }
.p-paso-txt { margin: 16px 0 0; color: var(--escena-texto); font-size: 1rem; line-height: 1.5; max-width: 34em; min-height: 6.5em; }
.p-vis { min-width: 0; }
.p-marco { border-radius: 12px; overflow: hidden; border: 1px solid var(--escena-linea); box-shadow: var(--sombra-2); background: #0B0E14; }
.p-rotulo { margin: 12px 0 0; font-size: .875rem; color: var(--escena-texto-2); }
.p-demo { display: inline-block; font: 700 .75rem/1 var(--fuente-texto); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; margin-right: 6px; border-radius: 4px; background: var(--vivo); color: var(--marino-900); }
.p-estado { margin: 0 0 12px; font: 700 .9375rem/1.2 var(--fuente-marca); font-stretch: var(--ancho-marca); letter-spacing: .08em; text-transform: uppercase; color: var(--vivo); min-height: 1.2em; }

/* llave real (llave.js) en versión compacta dentro de la escena */
.p-zona-llave .llave-barra, .p-zona-llave .leyenda, .p-zona-llave .lista-rondas, .p-zona-llave .ver-completa { display: none; }
.p-zona-llave .llave-wrap { margin: 0; }
.p-zona-llave .arbol-region { padding: 12px 16px; background: var(--marino-800); border-color: var(--escena-linea); scroll-behavior: auto; }
.p-zona-llave .arbol { gap: 28px; }
.p-zona-llave .ronda-col { width: 200px; }
.p-zona-llave .celda { min-height: 108px; padding: 5px 0; }
.p-zona-llave .encuentro { background: var(--marino-900); border-color: var(--marino-700); }
.p-zona-llave .cab-enc { padding: 2px 10px; }
.p-zona-llave .lado { min-height: 36px; padding: 4px 10px; cursor: default; }
.p-zona-llave .lado .quien b { font-size: .75rem; }
.p-zona-llave .lado.ganador .quien small { font-weight: 400; }
.p-zona-llave .lado .quien i { white-space: nowrap; font-size: .75rem; }
.p-zona-llave .pie-enc { padding: 2px 10px; }
.p-zona-llave .lado[data-quien] { transition: background-color 140ms ease; }
.p-zona-llave .lado.ruta { background: rgba(255,210,0,.16); box-shadow: inset 0 0 0 2px var(--vivo); }
.p-zona-llave .lado:focus-visible { outline: 3px solid var(--escena-foco); outline-offset: -3px; border-radius: 0; }
.p-podio { margin-top: 12px; }
.p-podio h3 { font: 700 .9375rem/1.2 var(--fuente-marca); font-stretch: var(--ancho-marca); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; color: var(--escena-texto-2); }
.p-podio ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.p-podio li { background: var(--marino-800); border: 1px solid var(--escena-linea); border-radius: 10px; padding: 10px 12px; font-size: .875rem; animation: p-entra 320ms var(--ease-salida) both; }
.p-podio li b { display: block; font: 700 1.5rem/1 var(--fuente-numeros); font-stretch: var(--ancho-marca); color: var(--vivo); margin-bottom: 2px; }
.p-def { margin: 16px 0 0; display: grid; gap: 8px; } .p-def dt { font-weight: 700; color: #fff; } .p-def dd { margin: 0 0 8px; color: var(--escena-texto-2); }

/* ---------- kata: rejilla de jueces ---------- */
.p-kata { background: var(--marino-950); padding: clamp(64px, 9vw, 128px) 0; }
.p-kata-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1280px; }
.p-kata-marco { background: #0B0E14; border: 1px solid var(--escena-linea); border-radius: 12px; padding: clamp(12px, 2vw, 24px); container-type: inline-size; }
.p-kata-bandas { display: grid; gap: 4px; margin-bottom: 8px; }
.p-kata-banda { display: flex; align-items: center; gap: 12px; padding: 8px 14px; color: #fff; font: 700 1rem/1.1 var(--fuente-marca); font-stretch: var(--ancho-marca); text-transform: uppercase; background: var(--lado); }
.p-kata-banda.aka { --lado: var(--aka); } .p-kata-banda.ao { --lado: var(--ao); }
.p-kata-banda span:first-child { letter-spacing: .08em; } .p-kata-banda span:last-child { margin-left: auto; font-size: .875rem; font-weight: 600; text-align: right; }
.p-kata-tabla { width: 100%; table-layout: fixed; border-spacing: 4px; border-collapse: separate; }
.p-kata-tabla th { font: 600 .8125rem/1 var(--fuente-texto); color: var(--escena-texto-2); text-align: center; }
.p-kata-tabla tbody th { text-align: left; font-weight: 700; letter-spacing: .08em; width: 4.5em; }
.p-kata-tabla td { text-align: center; background: #05070A; padding: clamp(6px, 1.2cqw, 14px) 0; }
.p-nota { display: inline-block; font: 700 clamp(1.25rem, 5.2cqw, 2.25rem)/1 var(--fuente-numeros); font-stretch: var(--ancho-marca); font-variant-numeric: tabular-nums; color: var(--vivo); }
.v { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(34px, 7cqw, 52px); height: clamp(34px, 7cqw, 52px); border-radius: 50%; font: 700 clamp(.625rem, 2cqw, .875rem)/1 var(--fuente-texto); color: #fff; background: #1E2636; }
.v.aka { background: var(--aka); } .v.ao { background: var(--ao); }
.p-kata-res { margin: 12px 0 0; text-align: center; font: 700 1rem/1.2 var(--fuente-marca); font-stretch: var(--ancho-marca); letter-spacing: .06em; text-transform: uppercase; }
.p-kata:not(.visto) .p-nota { opacity: 0; transform: translateY(8px); }
.p-nota { transition: opacity 320ms var(--ease-salida), transform 320ms var(--ease-salida); }
.p-nota.c1 { transition-delay: 90ms; } .p-nota.c2 { transition-delay: 180ms; } .p-nota.c3 { transition-delay: 270ms; } .p-nota.c4 { transition-delay: 360ms; }

/* ---------- en directo, eventos, organizadores ---------- */
.p-directo { background: var(--marino-950); border-top: 1px solid var(--escena-linea); }
.p-directo-in { padding-block: 18px; display: grid; gap: 8px 32px; grid-template-columns: auto 1fr; align-items: center; }
.p-directo h2 { font: 700 .8125rem/1 var(--fuente-texto); letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.p-directo ul { list-style: none; margin: 0; padding: 0; } .p-directo li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; } .p-directo li + li { border-top: 1px solid var(--escena-linea); }
.p-directo a { color: var(--escena-texto-2); }
.p-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--vivo); flex: none; } /* estático: el texto «En directo ahora» ya dice el estado */
.p-eventos { background: var(--marino-900); padding: clamp(64px, 9vw, 112px) 0; }
.p-eventos .encabezado-bloque h3 { font: 700 1.5rem/1.1 var(--fuente-marca); font-stretch: var(--ancho-marca); text-transform: uppercase; }
.p-eventos .encabezado-bloque { margin-top: 40px; } .p-eventos .encabezado-bloque:first-child { margin-top: 0; }
.p-eventos .vacio { background: var(--marino-800); border: 1px solid var(--escena-linea); border-radius: var(--r-tarjeta); max-width: none; }
.p-eventos .vacio h2 { color: #fff; }
.p-org { background: var(--marino-800); padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.p-org::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(100deg, var(--aka) 0 50%, var(--ao) 50% 100%); }
.p-org-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: center; max-width: 1280px; }
.p-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.p-lista li { color: var(--escena-texto-2); padding-top: 16px; border-top: 1px solid var(--escena-linea); } .p-lista b { color: #fff; display: block; }

/* ---------- alternativa estática (prefers-reduced-motion) ---------- */
.p-quieto .p-hero { height: auto; }
.p-quieto .p-hero-fijo { position: relative; top: auto; height: auto; min-height: calc(100svh - var(--barra-h)); padding: 48px 0 6vw; }
.p-quieto .p-hero-cuerpo { animation: none; }
.p-quieto .p-escena, .p-estatica { height: auto; }
.p-quieto .p-escena-fija, .p-estatica .p-escena-fija { position: static; height: auto; min-height: 0; padding: clamp(48px, 7vw, 96px) 0; }
.p-quieto .p-paso-txt { min-height: 0; }
.p-fotogramas { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); min-width: 0; }
.p-fotograma { margin: 0; } .p-fotograma .p-md { border-radius: 12px; border: 1px solid var(--escena-linea); } .p-fotograma figcaption { margin-top: 8px; font-size: .9375rem; color: var(--escena-texto-2); }
.p-quieto .p-escena-in:has(.p-fotogramas) { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) {
  .p-hero-cuerpo, .p-podio li { animation: none; }
  .p-nota { transition: opacity 120ms linear; transition-delay: 0ms !important; transform: none !important; }
}

/* ---------- móvil ---------- */
@media (max-width: 820px) {
  .p-hero-fijo { align-items: flex-end; min-height: 640px; }
  .p-foto { inset: 0 0 auto 0; height: 38%; } .p-ilus { right: 0; bottom: 0; width: 100%; max-width: 560px; left: auto; }
  .p-velo { background: var(--velo-hero-movil); } .p-trama { display: none; }
  .p-hero-in { padding-bottom: 6vw; } .p-titular { font-size: 2.625rem; }
  .p-hero-resto .p-lead { font-size: 1rem; margin-top: 12px; } .p-ctas { margin-top: 20px; gap: 12px; } .p-ctas .btn { width: 100%; } .p-micro { margin-top: 12px; }
  .p-escena-in { grid-template-columns: 1fr; gap: 12px; align-items: start; padding-top: 8px; }
  .p-escena-fija { align-items: flex-start; }
  .p-vis { order: -1; } .p-escena .p-txt .p-lead { display: none; } .p-llave .p-h2 { font-size: 1.5rem; }
  .p-pasos { flex-direction: row; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
  .p-pasos li { flex: 1 1 auto; } .p-pasos button { padding: 6px 10px; font-size: .8125rem; justify-content: center; min-height: 44px; }
  .p-pasos button::before { font-size: 1rem; }
  .p-paso-txt { font-size: .875rem; margin-top: 10px; min-height: 0; }
  .p-escena-in { gap: 8px; } .p-llave .p-h2 { font-size: 1.25rem; } .p-estado { margin-bottom: 6px; font-size: .8125rem; }
  .p-zona-llave .arbol-region { padding: 8px 12px; } .p-zona-llave .arbol { gap: 20px; }
  .p-zona-llave .celda { min-height: 74px; padding: 3px 0; } .p-zona-llave .cab-enc, .p-zona-llave .pie-enc { display: none; } .p-zona-llave .ronda-col { width: 168px; }
  .p-zona-llave .lado { min-height: 32px; padding: 2px 8px; } .p-zona-llave .lado .quien small { display: none; }
  .p-podio { margin-top: 8px; } .p-podio h3 { margin-bottom: 4px; } .p-podio ol { grid-template-columns: repeat(4, 1fr); gap: 4px; } .p-podio li { padding: 6px 8px; font-size: .75rem; } .p-podio li b { font-size: 1.125rem; }
  .p-rotulo { margin-top: 6px; font-size: .75rem; }
  .p-kata-in, .p-org-in { grid-template-columns: 1fr; }
  .p-directo-in { grid-template-columns: 1fr; }
  .p-kata-banda span:last-child { display: none; }
}

/* ---------- /organizadores ---------- */
.o-hero { background: var(--marino-900) url("/img/patron-tatami.svg") 0 0 / 64px 64px; padding: clamp(48px, 8vw, 112px) 0 clamp(64px, 9vw, 128px); position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
.o-hero-in { width: min(1280px, 100% - 2 * clamp(16px, 3vw, 32px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.o-titular { max-width: 9em; font-size: var(--t-h1); }
.o-panel { background: #000; border-radius: var(--r-tarjeta); overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; position: relative; }
.o-panel img { width: 100%; max-width: 1200px; height: auto; position: relative; z-index: 1; }
.o-hechos { background: var(--marino-950); border-bottom: 1px solid var(--escena-linea); }
.o-hechos-in { width: min(1280px, 100% - 2 * clamp(16px, 3vw, 32px)); margin: 0 auto; padding: 20px 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 40px; font: 700 .9375rem/1.2 var(--fuente-marca); font-stretch: var(--ancho-marca); letter-spacing: .08em; text-transform: uppercase; color: var(--escena-texto); }
.o-como, .o-datos, .o-faq, .o-contacto { padding: clamp(64px, 9vw, 112px) 0; }
.o-como { background: var(--marino-900); } .o-datos { background: var(--marino-950); } .o-faq { background: var(--marino-900); } .o-contacto { background: var(--marino-800); position: relative; }
.o-contacto::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(100deg, var(--aka) 0 50%, var(--ao) 50% 100%); }
.o-como:focus, .o-contacto:focus { outline: none; }
.o-zig { display: grid; gap: clamp(48px, 7vw, 96px); margin-top: clamp(32px, 5vw, 64px); }
.o-bloque { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.o-bloque.inv { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .o-bloque.inv .o-bloque-txt { order: 2; }
.o-bloque h3 { font: 700 var(--t-h3)/1.1 var(--fuente-marca); font-stretch: var(--ancho-marca); text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.o-bloque p { color: var(--escena-texto-2); max-width: 34em; margin: 0; }
.o-fig { margin: 0; } .o-fig img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--escena-linea); box-shadow: var(--sombra-2); background: var(--marino-800); }
.o-fig.movil { justify-self: center; max-width: 340px; }
.o-fig figcaption { margin-top: 8px; font-size: .8125rem; color: var(--escena-texto-2); }
.o-prox { margin: clamp(32px, 5vw, 64px) 0 0; color: var(--escena-texto-2); }
.o-cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 32px; }
.o-cols h3 { font: 700 1.25rem/1.1 var(--fuente-marca); font-stretch: var(--ancho-marca); text-transform: uppercase; color: #fff; margin-bottom: 8px; } .o-cols p { color: var(--escena-texto-2); margin: 0; }
.o-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); max-width: 1280px; align-items: start; }
.o-faq details { border-top: 1px solid var(--escena-linea); } .o-faq details:last-child { border-bottom: 1px solid var(--escena-linea); }
.o-faq summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 650; list-style: none; padding: 8px 0; }
.o-faq summary::-webkit-details-marker { display: none; }
.o-faq summary::after { content: "+"; font: 700 1.5rem/1 var(--fuente-numeros); color: var(--vivo); transition: transform 180ms var(--ease-salida); flex: none; }
.o-faq details[open] summary::after { transform: rotate(45deg); }
.o-faq details p { margin: 0 0 16px; color: var(--escena-texto-2); max-width: 44em; animation: p-entra 180ms ease-out both; }
.o-pend { margin-top: 24px; padding: 14px 16px; border: 1px dashed var(--escena-linea); border-radius: 12px; color: var(--escena-texto-2); max-width: 40em; }
.o-cta-fija { display: none; }
@media (max-width: 820px) {
  .o-hero-in, .o-bloque, .o-bloque.inv, .o-faq-in { grid-template-columns: 1fr; }
  .o-bloque.inv .o-bloque-txt { order: 0; } .o-bloque .o-fig { order: -1; }
  .o-panel { aspect-ratio: 16 / 10; }
  .o-cta-fija { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--marino-900); border-top: 1px solid var(--escena-linea); }
  .o-cta-fija[hidden] { display: none; } .o-cta-fija .btn { width: 100%; }
  .o-pagina { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .o-faq summary::after { transition: none; } .o-faq details p { animation: none; } }

/* relleno de lado reglamentario (AKA/AO) sobre escena: los «vivos» solo valen para texto y gráficos */
body.persuade { --aka-relleno: #A80F1C; --ao-relleno: #1148B0; }
.p-kata-banda.aka, .v.aka { --lado: var(--aka-relleno); background: var(--aka-relleno); }
.p-kata-banda.ao, .v.ao { --lado: var(--ao-relleno); background: var(--ao-relleno); }
.p-kata-banda { background: var(--lado); }

/* un solo evento: tarjeta horizontal con cartel grande, sin huecos */
.rejilla.sola { grid-template-columns: minmax(0, 880px); }
.rejilla.sola .ev-tarj { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.rejilla.sola .ev-cartel { aspect-ratio: auto; min-height: 340px; border-bottom: 0; }
.rejilla.sola .ev-cuerpo { justify-content: center; padding: clamp(20px, 3vw, 40px); }
@media (max-width: 700px) { .rejilla.sola .ev-tarj { grid-template-columns: 1fr; } .rejilla.sola .ev-cartel { aspect-ratio: 1 / 1; min-height: 0; } }
