:root {
    --verde: #063f2a;
    --verde-claro: #0b6b47;
    --amarillo: #f2c230;
    --negro: #050706;
    --gris-claro: #b8c4bb;
    --blanco: #f5f5ef;
    --rojo: #d71920;
    --borde: rgba(255,255,255,.16);
    --fondo-card: rgba(255,255,255,.08);
    --sombra: 0 30px 90px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--blanco);
    background:
        radial-gradient(circle at top left, rgba(242,194,48,.18), transparent 32%),
        radial-gradient(circle at top right, rgba(11,107,71,.35), transparent 38%),
        linear-gradient(135deg, #040605 0%, #0a1711 50%, #030403 100%);
}

a { color: inherit; text-decoration: none; }

.contenedor { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }

.cabecera {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(3,6,4,.82);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--borde);
}

.barra { min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.marca { display: flex; align-items: center; gap: 14px; }

.marca-logo {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    border: 2px solid var(--amarillo);
    background:
        radial-gradient(circle at 50% 28%, var(--amarillo) 0 7px, transparent 8px),
        linear-gradient(180deg, #15251d, #030403);
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,.42);
}

.marca-logo::before {
    content: "";
    position: absolute;
    width: 38px;
    height: 28px;
    left: 7px;
    bottom: 7px;
    border: 5px solid var(--amarillo);
    border-bottom: 0;
    border-radius: 34px 34px 0 0;
    background: #030403;
}

.marca-logo span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7px;
    z-index: 2;
    text-align: center;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    color: var(--amarillo);
}

.marca strong { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; }
.marca small { display: block; color: var(--gris-claro); font-size: .82rem; margin-top: 3px; }

.menu { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.menu a { color: var(--gris-claro); padding: 10px 12px; border-radius: 999px; font-size: .92rem; }
.menu a:hover, .admin-link { color: white; background: rgba(255,255,255,.09); }

.hero {
    min-height: calc(100vh - 78px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
    align-items: center;
    padding: 72px 0;
}

.etiqueta { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--borde); background: rgba(255,255,255,.08); color: var(--gris-claro); padding: 10px 14px; border-radius: 999px; font-size: .92rem; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 18px rgba(215,25,32,.8); }
.punto.online { background: #35d07f; box-shadow: 0 0 18px rgba(53,208,127,.9); }

h1 { margin: 26px 0 22px; font-size: clamp(3.1rem, 8vw, 7rem); line-height: .86; letter-spacing: -.07em; text-transform: uppercase; }
h1 span { color: var(--amarillo); }

.bajada { max-width: 660px; color: var(--gris-claro); font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.7; margin-bottom: 30px; }
.botones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.boton { display: inline-flex; align-items: center; justify-content: center; padding: 14px 20px; border-radius: 999px; font-weight: 800; border: 1px solid var(--borde); }
.boton-principal { background: linear-gradient(135deg, var(--amarillo), #d99d13); color: #10100c; box-shadow: 0 18px 45px rgba(242,194,48,.24); }
.boton-secundario { background: rgba(255,255,255,.08); color: white; }

.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.datos article { border: 1px solid var(--borde); background: rgba(255,255,255,.07); border-radius: 20px; padding: 16px; }
.datos strong { display: block; font-size: 1.15rem; margin-bottom: 5px; }
.datos span { color: var(--gris-claro); font-size: .9rem; }

.player { border: 1px solid var(--borde); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-radius: 32px; padding: 16px; box-shadow: var(--sombra); }
.pantalla { position: relative; aspect-ratio: 16 / 9; background: black; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); }
video { width: 100%; height: 100%; display: block; background: black; }

.espera { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; background: radial-gradient(circle at center, rgba(242,194,48,.18), transparent 36%), linear-gradient(135deg, #040605, #102018); }
.espera.oculto { display: none; }
.espera h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.espera p { margin: 0; color: var(--gris-claro); line-height: 1.55; }

.ondas { display: flex; justify-content: center; align-items: end; gap: 6px; height: 54px; margin-bottom: 18px; }
.ondas span { width: 8px; border-radius: 999px; background: linear-gradient(to top, var(--verde-claro), var(--amarillo)); animation: onda 1s infinite ease-in-out; }
.ondas span:nth-child(1) { height: 22px; animation-delay: .05s; }
.ondas span:nth-child(2) { height: 38px; animation-delay: .15s; }
.ondas span:nth-child(3) { height: 52px; animation-delay: .25s; }
.ondas span:nth-child(4) { height: 30px; animation-delay: .35s; }
.ondas span:nth-child(5) { height: 46px; animation-delay: .45s; }
@keyframes onda { 0%, 100% { transform: scaleY(.45); opacity: .65; } 50% { transform: scaleY(1); opacity: 1; } }

.estado { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 4px 2px; color: var(--gris-claro); font-size: .92rem; }
.seccion { padding: 76px 0; }
.pagina { min-height: calc(100vh - 180px); }

.titulo-seccion { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.titulo-seccion h2 { margin: 0; font-size: clamp(2rem, 4.6vw, 4rem); line-height: .96; letter-spacing: -.06em; text-transform: uppercase; }
.titulo-seccion p { margin: 0; max-width: 560px; color: var(--gris-claro); line-height: 1.65; }

.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tarjeta { min-height: 220px; padding: 24px; border: 1px solid var(--borde); background: var(--fondo-card); border-radius: 28px; color: var(--blanco); }
.tarjeta h3 { margin: 0 0 12px; font-size: 1.25rem; }
.tarjeta p { margin: 0; color: var(--gris-claro); line-height: 1.65; }
.icono { width: 52px; height: 52px; border-radius: 18px; background: linear-gradient(135deg, var(--verde-claro), var(--amarillo)); display: grid; place-items: center; margin-bottom: 18px; font-size: 1.45rem; }

.videos-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.video-principal, .lista-videos { border: 1px solid var(--borde); background: rgba(255,255,255,.07); border-radius: 28px; overflow: hidden; }
.video-placeholder { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 26px; background: radial-gradient(circle at center, rgba(242,194,48,.16), transparent 34%), linear-gradient(135deg, #07120d, #111a16); border-bottom: 1px solid var(--borde); }
.video-placeholder strong { display: block; font-size: 1.5rem; margin-bottom: 8px; }
.video-placeholder span { color: var(--gris-claro); line-height: 1.5; }
.video-info { padding: 20px; }
.video-info h3 { margin: 0 0 8px; }
.video-info p { margin: 0; color: var(--gris-claro); line-height: 1.6; }
.video-item { display: block; padding: 18px; border-bottom: 1px solid var(--borde); }
.video-item:last-child { border-bottom: 0; }
.video-item strong { display: block; margin-bottom: 6px; }
.video-item span { color: var(--gris-claro); font-size: .92rem; line-height: 1.5; }
.video-local, .video-detalle { width: 100%; aspect-ratio: 16 / 9; background: #000; }

.programacion { border: 1px solid var(--borde); border-radius: 28px; overflow: hidden; background: rgba(255,255,255,.07); }
.fila-programa { display: grid; grid-template-columns: 150px 1fr 160px; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--borde); align-items: center; }
.fila-programa:last-child { border-bottom: 0; }
.fila-programa span, .fila-programa small { color: var(--gris-claro); }

.auspiciadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.auspiciador { border: 1px solid var(--borde); background: rgba(255,255,255,.07); border-radius: 20px; min-height: 110px; display: grid; place-items: center; color: var(--gris-claro); text-align: center; padding: 18px; font-weight: 700; }
.auspiciador img { max-width: 100%; max-height: 80px; object-fit: contain; }

.contacto { border: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(242,194,48,.16), rgba(11,107,71,.16)), rgba(255,255,255,.07); border-radius: 32px; padding: 34px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.contacto h2 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: .95; letter-spacing: -.05em; text-transform: uppercase; }
.contacto p { margin: 0; color: var(--gris-claro); line-height: 1.6; }

.thumb { width: 100%; max-height: 180px; object-fit: cover; border-radius: 18px; margin-bottom: 16px; }
.detalle { max-width: 920px; }
.detalle h1 { font-size: clamp(2.3rem, 5vw, 4.8rem); }
.imagen-detalle { width: 100%; border-radius: 24px; margin-bottom: 22px; }
.cuerpo { color: var(--gris-claro); line-height: 1.75; font-size: 1.05rem; }

.pie { border-top: 1px solid var(--borde); }
.pie-contenido { color: var(--gris-claro); padding: 34px 0 44px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .92rem; }

@media (max-width: 920px) {
    .barra { align-items: flex-start; flex-direction: column; padding: 18px 0; }
    .menu { justify-content: flex-start; }
    .hero, .videos-grid, .contacto { grid-template-columns: 1fr; }
    .datos, .tarjetas, .auspiciadores { grid-template-columns: 1fr; }
    .titulo-seccion { display: block; }
    .titulo-seccion p { margin-top: 12px; }
    .fila-programa { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 520px) {
    .contenedor { width: min(100% - 22px, 1180px); }
    .player { padding: 10px; border-radius: 22px; }
    .pantalla { border-radius: 16px; }
    .tarjeta, .contacto { padding: 22px; }
}