/*
 * 2º Torneo de Golf EXATEC Houston: tótem OLED transparente 55" vertical (1080×1920).
 * Mezcla: pack Eventos de INNIOT (entidad de partículas, rótulos espaciados, haz) +
 * tótem SelectUSA (muro de fotos alrededor de un centro negro, pastilla azul, iconos
 * circulares, marco azul doble). Paleta EXATEC: azul rey + blanco, oro del torneo.
 * --u = 1/100 del ancho del escenario 9:16 (10.8 px en el panel). Negro = vidrio.
 */
@font-face { font-family: 'Sora'; src: url('../fuentes/sora.woff2') format('woff2'); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; src: url('../fuentes/sora-ext.woff2') format('woff2'); font-weight: 300 800; font-display: swap; 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 {
  --u: min(1vw, 0.5625vh);
  --cian: #4cc8ff;
  --cian-f: rgba(76, 200, 255, 0.55);
  --azul: #1f6bff;          /* azul EXATEC (#0053c7) subido para que viva en el OLED */
  --azul-h: #0053c7;
  --texto: #eef6ff;
  --tenue: rgba(205, 228, 255, 0.64);
  --oro: #ffd25e;
  --brillo: 0 0 calc(var(--u) * 1.6) rgba(76, 200, 255, 0.55);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
body { font-family: 'Sora', system-ui, sans-serif; color: var(--texto); user-select: none; -webkit-user-select: none; touch-action: none; display: grid; place-items: center; }
body.sin-cursor, body.sin-cursor * { cursor: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
img { -webkit-user-drag: none; }
.svg-ico { width: 100%; height: 100%; display: block; }

/* escenario 9:16: en el tótem llena el panel; en laptop queda al centro con negro a los lados */
#app { position: relative; width: calc(var(--u) * 100); height: calc(var(--u) * 177.78); overflow: hidden; transform: var(--shift, none); transition: transform 3s ease; }
#muro, #bola { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#muro { transition: opacity 0.6s; }
#telon { position: absolute; inset: 0; background: #000; z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
#telon.on { opacity: 1; pointer-events: auto; }

.logo { position: absolute; top: 3.2%; left: 50%; transform: translateX(-50%); height: calc(var(--u) * 7.2); z-index: 30; opacity: 0.96; pointer-events: none; }
.pie { position: absolute; left: 0; right: 0; bottom: 1.6%; text-align: center; font-size: calc(var(--u) * 1.25); letter-spacing: 0.12em; color: rgba(205, 228, 255, 0.42); z-index: 30; pointer-events: none; }

/* ───────── reposo ───────── */
#p-atraer { position: absolute; inset: 0; z-index: 20; pointer-events: none; text-align: center; }
#app:not([data-modo=atraer]) #p-atraer { display: none; }
.gran { position: absolute; left: 0; right: 0; top: 57%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.1); animation: aparece 0.8s ease; }
.gran small { font-family: var(--mono); font-size: calc(var(--u) * 1.6); letter-spacing: 0.42em; color: var(--cian); text-transform: uppercase; }
.gran h1 { font-size: calc(var(--u) * 6.7); font-weight: 800; letter-spacing: -0.01em; line-height: 1; background: linear-gradient(180deg, #fff 30%, #b9d6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gran .sub { display: flex; align-items: center; gap: calc(var(--u) * 1.8); font-size: calc(var(--u) * 2.2); font-weight: 600; letter-spacing: 0.32em; }
.gran .sub i { width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7); border-radius: 50%; background: var(--oro); box-shadow: 0 0 8px var(--oro); }
.gran .benef { font-size: calc(var(--u) * 2); color: var(--oro); font-style: italic; font-weight: 300; margin-top: calc(var(--u) * 0.6); }
.cuenta { position: absolute; left: 0; right: 0; top: 72%; font-family: var(--mono); font-size: calc(var(--u) * 1.9); letter-spacing: 0.22em; color: var(--texto); text-transform: uppercase; }
.rota { position: absolute; left: 0; right: 0; top: 75.4%; font-size: calc(var(--u) * 1.7); color: var(--tenue); letter-spacing: 0.06em; transition: opacity 0.5s; }
.rota.fuera { opacity: 0; }
.toca { position: absolute; left: 50%; top: 80.5%; transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.5) calc(var(--u) * 4); border: 1.5px solid var(--cian-f); border-radius: 999px;
  font-family: var(--mono); font-size: calc(var(--u) * 1.8); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cian); box-shadow: var(--brillo); background: rgba(4, 20, 56, 0.55); }
.toca i { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: 50%; border: 1.5px solid var(--cian); animation: late 1.8s ease-out infinite; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgba(76, 200, 255, 0.7); } 100% { box-shadow: 0 0 0 calc(var(--u) * 2.2) rgba(76, 200, 255, 0); } }
@keyframes aparece { from { opacity: 0; transform: translateY(calc(var(--u) * 1.5)); } }

/* ───────── pastilla azul con el título ───────── */
.pastilla { position: absolute; left: 50%; top: 12.4%; transform: translateX(-50%); z-index: 15; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.2);
  padding: calc(var(--u) * 1) calc(var(--u) * 7); border-radius: 2px;
  background: linear-gradient(90deg, rgba(31, 107, 255, 0) 0%, rgba(31, 107, 255, 0.72) 22%, rgba(31, 107, 255, 0.72) 78%, rgba(31, 107, 255, 0) 100%); animation: entra 0.6s ease; }
.pastilla::before, .pastilla::after { content: ''; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--cian), transparent); }
.pastilla::before { top: 0; } .pastilla::after { bottom: 0; }
.pastilla b { font-size: calc(var(--u) * 3.5); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.pastilla small { font-size: calc(var(--u) * 1.5); color: var(--tenue); font-style: italic; white-space: nowrap; }
@keyframes entra { from { opacity: 0; transform: translate(-50%, calc(var(--u) * -1.5)); } }
#app[data-modo=atraer] .pastilla, #app[data-capa] .pastilla, #app[data-modo=atraer] #bajo-bola, #app[data-capa] #bajo-bola { display: none; }

.bajo-bola { position: absolute; left: 0; right: 0; top: 61.5%; display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 1.6); z-index: 15;
  font-family: var(--mono); font-size: calc(var(--u) * 1.6); letter-spacing: 0.2em; text-transform: uppercase; color: var(--tenue); animation: aparece 0.6s ease; }
.bajo-bola i { width: calc(var(--u) * 0.6); height: calc(var(--u) * 0.6); border-radius: 50%; background: var(--oro); }

/* ───────── iconos circulares ───────── */
.ico { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.7); width: calc(var(--u) * 12); }
.ico > span:first-child { width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); border-radius: 50%; display: grid; place-items: center; padding: calc(var(--u) * 1.9);
  border: 1.5px solid var(--cian-f); background: radial-gradient(circle, rgba(31, 107, 255, 0.35), rgba(4, 20, 56, 0.6) 70%); color: var(--cian);
  box-shadow: var(--brillo), inset 0 0 calc(var(--u) * 1.2) rgba(76, 200, 255, 0.25); transition: transform 0.15s, background 0.2s; }
.ico .txt-idioma { padding: 0; font-size: calc(var(--u) * 2.1); font-weight: 700; letter-spacing: 0.05em; }
.ico small { font-size: calc(var(--u) * 1.45); color: var(--tenue); letter-spacing: 0.03em; white-space: nowrap; }
.ico:active > span:first-child { transform: scale(0.92); background: rgba(76, 200, 255, 0.4); }
.ico.principal > span:first-child { color: var(--oro); border-color: rgba(255, 210, 94, 0.8); box-shadow: 0 0 calc(var(--u) * 1.8) rgba(255, 210, 94, 0.45), inset 0 0 calc(var(--u) * 1.2) rgba(255, 210, 94, 0.2); }
.ico.principal small { color: var(--oro); }

#arco { position: absolute; right: calc(var(--u) * 2); top: 22%; height: 38%; width: calc(var(--u) * 15); z-index: 25; display: flex; flex-direction: column; justify-content: space-between; align-items: center; animation: aparece 0.6s ease; }
#arco .arco-linea { position: absolute; left: calc(var(--u) * -2.6); top: -3%; width: calc(var(--u) * 8); height: 106%; fill: none; stroke: var(--cian); stroke-width: 2; opacity: 0.6; filter: drop-shadow(0 0 6px var(--cian)); pointer-events: none; }
#arco .ico { width: calc(var(--u) * 13); }
#arco .ico:nth-child(2), #arco .ico:nth-child(6) { transform: translateX(calc(var(--u) * 2.2)); }
#arco .ico:nth-child(4) { transform: translateX(calc(var(--u) * -1.4)); }
#arco .ico > span:first-child { width: calc(var(--u) * 6.8); height: calc(var(--u) * 6.8); padding: calc(var(--u) * 1.7); }
#app[data-modo=atraer] #arco, #app[data-capa] #arco { display: none; }

#fila { position: absolute; left: 0; right: 0; top: 70.5%; display: flex; justify-content: center; gap: calc(var(--u) * 1.4); z-index: 25; }
#fila .ico { display: none; }
#app[data-modo=inicio]:not([data-capa]) #fila :is([data-acc=faq], [data-acc=beca], [data-acc=participa], [data-acc=idioma], [data-acc=salir]) { display: flex; }
#app[data-capa] #fila { top: 73.5%; }
#app[data-capa] #fila :is([data-acc=volver], [data-acc=idioma]) { display: flex; }
#app[data-capa=respuesta] #fila [data-acc=inicio] { display: flex; }
#app[data-modo=atraer] #fila { display: none; }

/* ───────── marco azul doble (paneles) ───────── */
.marco { position: absolute; z-index: 22; left: 6%; right: 6%; top: 17.5%; height: 53.5%; padding: calc(var(--u) * 5) calc(var(--u) * 3.4) calc(var(--u) * 3.2);
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(10, 44, 110, 0.8), rgba(3, 16, 46, 0.9));
  border: 2px solid var(--cian); border-radius: calc(var(--u) * 1.2);
  box-shadow: 0 0 calc(var(--u) * 2.4) rgba(76, 200, 255, 0.45), inset 0 0 0 calc(var(--u) * 0.9) rgba(3, 16, 46, 0.9), inset 0 0 0 calc(var(--u) * 1.05) rgba(76, 200, 255, 0.55);
  animation: abre 0.45s cubic-bezier(.2, .8, .2, 1); }
@keyframes abre { from { opacity: 0; transform: scale(0.94); } }
.pestanas { position: absolute; top: calc(var(--u) * -2.4); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * 1); }
.pestanas > * { min-width: calc(var(--u) * 20); text-align: center; padding: calc(var(--u) * 0.9) calc(var(--u) * 3); font-size: calc(var(--u) * 1.9); font-weight: 600; letter-spacing: 0.06em; white-space: nowrap;
  background: linear-gradient(180deg, #2a7bff, #0b3aa0); border: 1.5px solid var(--cian); border-radius: calc(var(--u) * 0.6); box-shadow: var(--brillo); }
.cuerpo { --u: calc(min(1vw, 0.5625vh) * var(--k, 1)); flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2.4); }
.cuerpo > * { animation: sube 0.5s ease both; }
.cuerpo > *:nth-child(2) { animation-delay: 0.08s; } .cuerpo > *:nth-child(3) { animation-delay: 0.16s; } .cuerpo > *:nth-child(4) { animation-delay: 0.24s; } .cuerpo > *:nth-child(5) { animation-delay: 0.32s; }
.cuerpo.midiendo > * { animation: none; }
@keyframes sube { from { opacity: 0; transform: translateY(calc(var(--u) * 1.2)); } }

.rotulo { font-family: var(--mono); font-size: calc(var(--u) * 1.35); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cian); }
.h2 { font-size: calc(var(--u) * 3.3); font-weight: 600; line-height: 1.15; }
.p { font-size: calc(var(--u) * 1.95); line-height: 1.5; color: var(--tenue); font-weight: 300; }
.p b { color: var(--texto); font-weight: 600; }
.nota { font-size: calc(var(--u) * 1.5); color: var(--tenue); text-align: center; font-style: italic; }
.oro { color: var(--oro); }

/* respuesta del FAQ: la pregunta arriba, la respuesta corta y luego la herramienta visual */
.respuesta { display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); padding-bottom: calc(var(--u) * 1.8); border-bottom: 1px solid rgba(76, 200, 255, 0.25); }
.respuesta q { font-size: calc(var(--u) * 1.7); color: var(--cian); font-style: italic; quotes: none; }
.respuesta p { font-size: calc(var(--u) * 2.45); line-height: 1.35; font-weight: 400; }
.herr { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2); }
.herr.compacta { gap: calc(var(--u) * 1.4); }

/* FAQ: chips de preguntas */
.faq-lista { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: calc(var(--u) * 1.3); }
.faq-lista button { text-align: left; display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1) calc(var(--u) * 1.6);
  border: 1.5px solid rgba(76, 200, 255, 0.45); border-radius: calc(var(--u) * 0.8); background: rgba(4, 22, 60, 0.7); font-size: calc(var(--u) * 1.75); line-height: 1.25; transition: background 0.2s, transform 0.15s; }
.faq-lista button::before { content: '?'; flex: none; width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--u) * 1.5); color: var(--oro); border: 1.5px solid rgba(255, 210, 94, 0.6); }
.faq-lista button:active { transform: scale(0.97); background: rgba(76, 200, 255, 0.25); }
.faq-lista button.vista { border-color: rgba(255, 210, 94, 0.45); }

/* tarjetas de dato */
.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.2); }
.dato { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.2); border: 1px solid rgba(76, 200, 255, 0.4); border-radius: calc(var(--u) * 0.7); background: rgba(4, 22, 60, 0.6); display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); }
.dato small { font-family: var(--mono); font-size: calc(var(--u) * 1.2); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cian); }
.dato b { font-size: calc(var(--u) * 1.85); font-weight: 600; line-height: 1.3; }
.foto-banda { position: relative; height: calc(var(--u) * 17); border-radius: calc(var(--u) * 0.8); overflow: hidden; border: 1.5px solid rgba(76, 200, 255, 0.6); flex: none; }
.foto-banda img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75) saturate(1.05); }
.foto-banda::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 16, 46, 0.9), rgba(3, 16, 46, 0) 70%); }
.foto-banda .sobre { position: absolute; left: calc(var(--u) * 2.4); top: 50%; transform: translateY(-50%); z-index: 1; max-width: 62%; }
.foto-banda .sobre b { display: block; font-size: calc(var(--u) * 3.3); font-weight: 800; line-height: 1.05; }
.tira { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1); }
.tira img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: calc(var(--u) * 0.5); border: 1px solid rgba(76, 200, 255, 0.45); filter: brightness(0.85); }

/* programa: línea de tiempo */
.linea { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 4.4); padding-left: calc(var(--u) * 6); margin: calc(var(--u) * 1) 0; }
.linea::before { content: ''; position: absolute; left: calc(var(--u) * 2.2); top: calc(var(--u) * 2); bottom: calc(var(--u) * 2); width: 2px; background: linear-gradient(var(--cian), var(--azul)); box-shadow: 0 0 8px var(--cian); }
.paso { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); }
.paso::before { content: ''; position: absolute; left: calc(var(--u) * -4.75); top: calc(var(--u) * 1.8); width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; background: #031030; border: 2px solid var(--cian); box-shadow: var(--brillo); }
.paso b { font-size: calc(var(--u) * 5.2); font-weight: 700; letter-spacing: 0.01em; }
.paso span { font-size: calc(var(--u) * 2.5); color: var(--tenue); }
.paso.ahora::before { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 calc(var(--u) * 1.6) var(--oro); }
.paso.ahora b { color: var(--oro); }
.paso.ultimo b { color: var(--oro); }

/* sede: mapa */
.mapa { position: relative; flex: 1; min-height: calc(var(--u) * 30); }
.mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa .zona circle { fill: var(--cian); filter: drop-shadow(0 0 4px var(--cian)); }
.mapa text { font-family: 'Sora', sans-serif; fill: var(--texto); font-size: 13px; }
.mapa .zona text { fill: var(--tenue); font-size: 12px; }
.mapa .liga { stroke: rgba(76, 200, 255, 0.45); stroke-width: 1.2; stroke-dasharray: 3 5; fill: none; animation: corre 1.6s linear infinite; }
@keyframes corre { to { stroke-dashoffset: -16; } }
.mapa .onda { fill: none; stroke: var(--oro); stroke-width: 1.4; transform-origin: center; transform-box: fill-box; animation: onda 2.4s ease-out infinite; }
.mapa .onda.b { animation-delay: 1.2s; }
@keyframes onda { from { opacity: 0.9; transform: scale(0.2); } to { opacity: 0; transform: scale(1); } }
.fila-qr { display: flex; align-items: center; gap: calc(var(--u) * 2.4); }
.fila-qr .txt { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }

/* QR */
.qr { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8); }
.qr .cuadro { width: var(--qr, calc(var(--u) * 16)); aspect-ratio: 1; padding: calc(var(--u) * 1); background: #fff; border-radius: calc(var(--u) * 0.8); box-shadow: 0 0 calc(var(--u) * 2) rgba(76, 200, 255, 0.5); }
.qr .cuadro svg { width: 100%; height: 100%; display: block; }
.qr b { font-size: calc(var(--u) * 1.75); font-weight: 600; text-align: center; }
.qr small { font-size: calc(var(--u) * 1.25); color: var(--tenue); }
.qrs { --qr: calc(var(--u) * 21); display: flex; justify-content: center; gap: calc(var(--u) * 7); }

/* participa: planes */
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.6); }
.plan { padding: calc(var(--u) * 2.2) calc(var(--u) * 2); border-radius: calc(var(--u) * 1); text-align: center; border: 1.5px solid rgba(76, 200, 255, 0.55); background: radial-gradient(circle at 50% 0%, rgba(31, 107, 255, 0.35), rgba(4, 22, 60, 0.7) 70%); display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }
.plan small { font-family: var(--mono); font-size: calc(var(--u) * 1.4); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cian); }
.plan b { font-size: calc(var(--u) * 7.4); font-weight: 800; line-height: 1; }
.plan span { font-size: calc(var(--u) * 1.5); color: var(--tenue); }
.plan.dest { border-color: rgba(255, 210, 94, 0.75); box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 210, 94, 0.25); }
.plan.dest small { color: var(--oro); }
.correo { text-align: center; font-size: calc(var(--u) * 2.2); }
.correo small { display: block; font-family: var(--mono); font-size: calc(var(--u) * 1.2); letter-spacing: 0.3em; color: var(--cian); text-transform: uppercase; margin-bottom: calc(var(--u) * 0.4); }

/* invitados */
.personas { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: calc(var(--u) * 1.6); }
.personas.pocas { flex: none; grid-auto-rows: auto; }
.personas.pocas .persona { padding: calc(var(--u) * 3.4) calc(var(--u) * 1.6); }
.persona { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 2) calc(var(--u) * 1.4); border: 1px solid rgba(76, 200, 255, 0.4); border-radius: calc(var(--u) * 1); background: rgba(4, 22, 60, 0.6); }
.avatar { width: calc(var(--u) * 16); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--cian); box-shadow: var(--brillo); overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle, #123a8a, #04112e); flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar span { font-size: calc(var(--u) * 4.2); font-weight: 700; letter-spacing: 0.04em; color: var(--cian); }
.persona .etq { font-family: var(--mono); font-size: calc(var(--u) * 1.3); letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); }
.persona b { font-size: calc(var(--u) * 2.4); font-weight: 600; line-height: 1.2; }
.persona small { font-size: calc(var(--u) * 1.6); color: var(--tenue); line-height: 1.35; }

/* patrocinadores */
.presenta { text-align: center; padding: calc(var(--u) * 2.2); border: 1.5px solid rgba(255, 210, 94, 0.7); border-radius: calc(var(--u) * 1); background: radial-gradient(circle at 50% 0%, rgba(255, 210, 94, 0.14), rgba(4, 22, 60, 0.6) 70%); }
.presenta b { display: block; font-size: calc(var(--u) * 4.4); font-weight: 700; letter-spacing: 0.08em; margin-top: calc(var(--u) * 0.6); }
.hoyo-fila { display: flex; justify-content: center; gap: calc(var(--u) * 1.2); flex-wrap: wrap; }
.marca { padding: calc(var(--u) * 1) calc(var(--u) * 2.2); border: 1px solid rgba(76, 200, 255, 0.55); border-radius: 999px; font-size: calc(var(--u) * 2); font-weight: 600; letter-spacing: 0.06em; background: rgba(4, 22, 60, 0.7); }
.nube { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 0.9) calc(var(--u) * 1); }
.nube span { padding: calc(var(--u) * 0.9) calc(var(--u) * 1.8); border: 1px solid rgba(76, 200, 255, 0.3); border-radius: 999px; font-size: calc(var(--u) * 1.85); color: var(--texto); background: rgba(4, 22, 60, 0.45); }
.centro { text-align: center; }

/* hole-in-one */
.premio { position: relative; flex: 1; min-height: 0; border-radius: calc(var(--u) * 1); overflow: hidden; border: 2px solid rgba(255, 210, 94, 0.75); box-shadow: 0 0 calc(var(--u) * 2.4) rgba(255, 210, 94, 0.3); }
.premio img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); }
.premio .sello { position: absolute; left: 50%; top: calc(var(--u) * 2); transform: translateX(-50%); padding: calc(var(--u) * 0.9) calc(var(--u) * 3); border-radius: 999px; background: rgba(3, 16, 46, 0.85); border: 1.5px solid var(--oro); color: var(--oro); font-weight: 700; letter-spacing: 0.24em; font-size: calc(var(--u) * 1.8); white-space: nowrap; }

/* beca */
.cien { display: flex; align-items: center; gap: calc(var(--u) * 2.4); }
.cien b { font-size: calc(var(--u) * 10); font-weight: 800; line-height: 0.9; background: linear-gradient(180deg, #fff, var(--oro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cien span { font-size: calc(var(--u) * 2.3); line-height: 1.35; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.2); }
.cifras.dos { grid-template-columns: 1fr 1fr; }
.cifra { text-align: center; padding: calc(var(--u) * 1.3) calc(var(--u) * 0.8); border-radius: calc(var(--u) * 0.7); border: 1px solid rgba(76, 200, 255, 0.4); background: rgba(4, 22, 60, 0.6); }
.cifra b { display: block; font-size: calc(var(--u) * 3.9); font-weight: 700; line-height: 1.1; }
.cifra small { font-size: calc(var(--u) * 1.4); color: var(--tenue); }
.fuente { font-size: calc(var(--u) * 1.1); color: rgba(205, 228, 255, 0.4); text-align: right; margin-top: calc(var(--u) * -1.2); }
.beca-baja { display: flex; gap: calc(var(--u) * 2); align-items: stretch; }
.beca-baja .col { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
.beca-baja .cheque { width: calc(var(--u) * 22); border-radius: calc(var(--u) * 0.7); overflow: hidden; border: 1.5px solid rgba(76, 200, 255, 0.55); position: relative; }
.beca-baja .cheque img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); }

/* shotgun */
.diagrama { position: relative; flex: 1; min-height: calc(var(--u) * 30); }
.diagrama svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.diagrama .anillo { fill: none; stroke: rgba(76, 200, 255, 0.35); stroke-width: 10; }
.diagrama .hoyo text { fill: var(--tenue); font-size: 11px; font-family: 'Sora', sans-serif; text-anchor: middle; }
.diagrama .hoyo path { stroke: var(--cian); stroke-width: 1.5; fill: none; }
.diagrama .hoyo polygon { fill: var(--oro); }
.diagrama .equipos { animation: gira 24s linear infinite; transform-origin: 160px 160px; }
.diagrama .equipos circle { fill: #fff; filter: drop-shadow(0 0 4px var(--cian)); }
@keyframes gira { to { transform: rotate(360deg); } }
.diagrama .centro-t { fill: var(--texto); text-anchor: middle; font-family: 'Sora', sans-serif; }

/* galería 2×2 */
.rejilla { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); min-height: 0; }
.rejilla img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 25%; border: 1.5px solid rgba(76, 200, 255, 0.6); border-radius: calc(var(--u) * 0.6); filter: brightness(0.88); }

/* comunidad */
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.9); }
.chips span { padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6); border: 1px solid rgba(76, 200, 255, 0.45); border-radius: 999px; font-size: calc(var(--u) * 1.6); background: rgba(4, 22, 60, 0.55); }

/* medición local (?stats=1) */
#stats { position: fixed; left: 8px; top: 8px; z-index: 200; padding: 10px 14px; background: rgba(0, 0, 0, 0.85); border: 1px solid #4cc8ff; border-radius: 8px; font: 12px/1.5 var(--mono); color: #cfe8ff; white-space: pre; max-height: 90vh; overflow: auto; }

/* programa: cuenta regresiva bajo la línea de tiempo */
.cuenta-prog { text-align: center; font-family: var(--mono); font-size: calc(var(--u) * 2); letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro); padding: calc(var(--u) * 1.6); border: 1px solid rgba(255, 210, 94, 0.45); border-radius: 999px; align-self: center; }