/* La Gran Final — hojas: pantallas de estadísticas de la transmisión (panel azul noche con la franja del equipo arriba,
   titulares en Teko, filas con separadores), Todos los datos, formulario "Su lugar en la tribuna", la tribuna de
   invitados (asientos encendidos con su cartelito; el del nuevo invitado se enciende con un flash y su cartelito sube),
   visor de fotos y el aviso del modo demo. */
.gf .hoja { position: absolute; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.gf .hoja-velo { position: absolute; inset: 0; background: rgba(2, 5, 14, .66); opacity: 0; transition: opacity .25s ease; }
.gf .hoja.is-in .hoja-velo { opacity: 1; }
.gf .hoja-panel { position: relative; width: 100%; max-height: 90cqh; overflow: hidden auto; overscroll-behavior: contain; margin: 0 8px calc(var(--safe-b) + 8px); padding: 0 16px 16px; color: var(--blanco); background: var(--navy); border-radius: 6px; box-shadow: 0 -8px 40px rgba(0, 0, 0, .5), inset 0 0 0 1.5px var(--linea); transform: translateY(24px); opacity: 0; transition: transform .3s cubic-bezier(.2, .9, .25, 1), opacity .25s ease; }
.gf .hoja.is-completa .hoja-panel { height: calc(100cqh - var(--safe-t) - 24px); max-height: none; margin-top: calc(var(--safe-t) + 16px); }
.gf .hoja.is-in .hoja-panel { transform: none; opacity: 1; }
.gf .hoja.is-out .hoja-panel { transform: translateY(24px); opacity: 0; }
.gf .hoja.is-out .hoja-velo { opacity: 0; }
.gf .hoja-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 -16px 10px; padding: 16px 12px 10px 16px; background: var(--navy); border-top: 6px solid var(--equipo); box-shadow: 0 1px 0 var(--linea); }
.gf .hoja-cab.is-sola { justify-content: flex-end; border-top-color: var(--oro); }
.gf .hoja-k { margin: 0 0 2px; color: var(--oro); font: 700 13px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; }
.gf .hoja-tit h2 { margin: 0; font: 600 32px/.95 var(--f-tv); letter-spacing: .02em; text-transform: uppercase; }
.gf .hoja-x { flex: none; }
.gf .hoja-cuerpo { display: flex; flex-direction: column; gap: 14px; font: 600 17px/1.4 var(--f-texto); }

/* ---------- Todos los datos ---------- */
.gf .dt-lead { margin: 0; padding: 8px 12px 6px; color: var(--navy); background: var(--oro); font: 600 22px/1.05 var(--f-tv); letter-spacing: .03em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.gf .dt-sec { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.gf .dt-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gris); font: 700 14px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; }
.gf .dt-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; color: var(--equipo-tinta); background: var(--equipo); }
.gf .dt-big { margin: 0; font: 600 30px/1 var(--f-tv); letter-spacing: .02em; text-transform: uppercase; }
.gf .dt-sec p { margin: 0; }
.gf .regalos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gf .regalos li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 4px; background: var(--navy-2); box-shadow: inset 0 0 0 1px var(--linea); }
.gf .regalos li.is-destacado { box-shadow: inset 0 0 0 2px var(--oro); }
.gf .rg-txt { display: flex; flex-direction: column; }
.gf .rg-txt small { color: var(--gris); font-weight: 600; }
.gf .fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gf .foto { position: relative; padding: 0; border: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; background: var(--navy-2); }
.gf .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gf .foto span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px 2px; color: var(--blanco); background: linear-gradient(0deg, rgba(6, 11, 24, .9), rgba(6, 11, 24, 0)); font: 600 18px/1.1 var(--f-tv); letter-spacing: .03em; text-align: left; text-transform: uppercase; }
.gf .dt-faq summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.gf .dt-faq p { color: var(--gris); }
.gf .dt-cta { display: flex; flex-direction: column; gap: 6px; }
.gf .fecha-limite { margin: 0; text-align: center; color: var(--gris); font: 700 15px/1.3 var(--f-texto); }
.gf .dt-hosts { margin: 0; text-align: center; color: var(--gris); }

/* ---------- formulario: Su lugar en la tribuna ---------- */
.gf .fm { display: flex; flex-direction: column; gap: 10px; }
.gf .fm-vista { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 8px; border-radius: 4px; background: radial-gradient(70% 90% at 50% 60%, #1C2B57, var(--navy-2)); box-shadow: inset 0 0 0 1px var(--linea); }
.gf .fm-vista-nombre { color: var(--gris); font: 700 15px/1.2 var(--f-texto); }
.gf .fm-l { display: flex; justify-content: space-between; align-items: baseline; color: var(--gris); font: 700 14px/1.2 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.gf .fm-count { letter-spacing: 0; font-weight: 600; }
.gf .fm input, .gf .fm textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 4px; color: var(--navy); background: #F4F6FA; font: 600 18px/1.3 var(--f-texto); box-shadow: inset 0 0 0 2px #C9D2E3; }
.gf .fm textarea { resize: vertical; min-height: 64px; }
.gf .fm input:focus-visible, .gf .fm textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 3px var(--oro); outline: none; }
.gf .fm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gf .fm-seg-b { min-height: 48px; padding: 4px 8px 0; border: 0; border-radius: 4px; cursor: pointer; color: var(--blanco); background: var(--navy-3); box-shadow: inset 0 0 0 1.5px var(--linea); font: 600 21px/1 var(--f-tv); letter-spacing: .03em; text-transform: uppercase; }
.gf .fm-seg-b[aria-checked="true"] { color: var(--navy); background: var(--oro); box-shadow: none; }
.gf .fm-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gf .fm-personas[hidden], .gf .fm-bloque[hidden] { display: none; }
.gf .fm-paso { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 4px; background: var(--navy-2); box-shadow: inset 0 0 0 1px var(--linea); }
.gf .fm-paso-l { color: var(--gris); font: 700 14px/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; }
.gf .fm-paso-c { display: flex; align-items: center; justify-content: space-between; }
.gf .fm-paso-c output { font: 600 34px/1 var(--f-tv); color: var(--oro); min-width: 2ch; text-align: center; padding-top: 4px; }
.gf .paso-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 4px; cursor: pointer; color: var(--blanco); background: var(--navy-3); box-shadow: inset 0 0 0 1.5px var(--linea); }
.gf .fm-bloque { display: flex; flex-direction: column; gap: 6px; }
.gf .fm-colores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gf .fm-color { display: grid; place-items: center; min-height: 56px; padding: 4px; border: 0; border-radius: 4px; cursor: pointer; background: var(--navy-2); box-shadow: inset 0 0 0 1.5px var(--linea); }
.gf .fm-color[aria-checked="true"] { background: #1C2B57; box-shadow: inset 0 0 0 3px var(--oro); }
.gf .fm-err { margin: 0; min-height: 1.2em; color: #FFB4BE; font: 700 16px/1.3 var(--f-texto); }

/* ---------- la tribuna de invitados ---------- */
.gf .tribuna-sub { margin: 0; color: var(--gris); }
.gf .estadio-grada { position: relative; padding: 18px 8px 10px; border-radius: 4px; overflow: hidden; background:
  repeating-linear-gradient(180deg, transparent 0 86px, rgba(0, 0, 0, .35) 86px 92px),
  linear-gradient(180deg, #16224A 0%, #0F1836 100%); box-shadow: inset 0 0 0 1.5px var(--linea); }
.gf .grada-luz { position: absolute; left: -20%; right: -20%; top: -60px; height: 120px; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 244, 220, .22), transparent 70%); pointer-events: none; }
.gf .grada { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 2px; }
.gf .lugar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 92px; }
.gf .lugar-asiento { display: block; line-height: 0; }
.gf .lugar-cartel { position: relative; z-index: 2; max-width: 100%; margin-bottom: 2px; padding: 3px 6px 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; color: var(--navy); background: var(--blanco); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); font: 600 15px/1.05 var(--f-tv); letter-spacing: .04em; text-transform: uppercase; }
.gf .lugar.is-mio .lugar-cartel { color: var(--navy); background: var(--oro); }
.gf .lugar.is-vacio { opacity: .7; }
.gf .lugar-flash { position: absolute; left: 50%; bottom: 18px; width: 90px; height: 90px; margin-left: -45px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 65%); opacity: 0; pointer-events: none; }
/* llega el nuevo invitado: se enciende con un flash y su cartelito sube */
.gf .lugar.is-llega .lugar-asiento { animation: gf-enciende .9s .35s ease both; }
.gf .lugar.is-llega .lugar-flash { animation: gf-flash .7s .35s ease-out both; }
.gf .lugar.is-llega .lugar-cartel { animation: gf-cartel .7s 1s cubic-bezier(.2, 1.3, .35, 1) both; }
@keyframes gf-enciende { 0% { filter: grayscale(1) brightness(.45); } 30% { filter: brightness(2.2); } 100% { filter: none; } }
@keyframes gf-flash { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes gf-cartel { from { opacity: 0; transform: translateY(26px) scale(.8); } to { opacity: 1; transform: none; } }
.gf .tribuna-cuenta { margin: 0; text-align: center; font: 600 24px/1 var(--f-tv); letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.gf .tribuna-cuenta strong { color: var(--oro); font-size: 44px; font-weight: 700; margin-right: 4px; }
.gf .tribuna-vacia { margin: 0; text-align: center; color: var(--gris); }
.gf .tribuna-h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gris); font: 700 14px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; }
.gf .tribuna-msgs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gf .tribuna-msgs li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--oro); background: var(--navy-2); }
.gf .tribuna-msgs span { color: var(--gris); }
.gf .tribuna-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.gf .tribuna-acciones .tv-btn { flex: 1 1 100%; }
/* (en una fila de dos el texto se partía en tres renglones: cada botón va a lo ancho) */

/* ---------- visor de fotos y aviso del demo ---------- */
.gf .visor .hoja-cuerpo { position: relative; flex: 1; justify-content: center; }
.gf .visor-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gf .visor-img { width: 100%; max-height: 64cqh; object-fit: contain; border-radius: 4px; background: #000; }
.gf .visor-pie { margin: 0; text-align: center; font: 600 24px/1 var(--f-tv); letter-spacing: .03em; text-transform: uppercase; }
.gf .visor-ant, .gf .visor-sig { position: absolute; top: 40%; }
.gf .visor-ant { left: 0; transform: scaleX(-1); }
.gf .visor-sig { right: 0; }
.gf .demo-nota .hoja-cuerpo { align-items: center; text-align: center; padding-bottom: 6px; }
.gf .demo-ic { margin: 0; font-size: 40px; line-height: 1; }
.gf .demo-nota p { margin: 0; }