*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:'Segoe UI', Arial, sans-serif;
    background:#0f172a;
    color:white;
    overflow:hidden;
}

.pantalla{
    width:100vw;
    height:100vh;
    padding:20px;
    background:
        radial-gradient(circle at top left, rgba(171,187,45,.15), transparent 35%),
        #0f172a;
}

header{
    height:10vh;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.marca{
    display:flex;
    align-items:center;
    gap:16px;
}

.marca img{
    height:72px;
    background:white;
    border-radius:14px;
    padding:7px;
}

h1{
    color:#ABBB2D;
    font-size:54px;
    line-height:1;
}

header p{
    font-size:18px;
    color:white;
}

#reloj{
    font-size:28px;
    font-weight:bold;
    background:rgba(255,255,255,.08);
    padding:14px 22px;
    border-radius:16px;
}

.barra-corporativa{
    height:38px;
    margin:8px 0 12px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#14213d;
    border-left:4px solid #ABBB2D;
    border-radius:12px;
}

.texto-barra{
    white-space:nowrap;
    color:#ABBB2D;
    font-weight:800;
    font-size:20px;
    animation:moverBarra 22s linear infinite;
}

@keyframes moverBarra{
    from{transform:translateX(100%);}
    to{transform:translateX(-100%);}
}

main{
    height:72vh;
    display:grid;
    grid-template-columns:5.5fr 1fr;
    gap:20px;
}

.principal{
    background:#f4f6f9;
    color:#0f172a;
    border-radius:28px;
    padding:22px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.badge{
    display:inline-block;
    padding:7px 16px;
    border-radius:999px;
    font-weight:bold;
    text-transform:uppercase;
    font-size:14px;
    margin-bottom:12px;
}

.comunicado{ background:#dbeafe; color:#1d4ed8; }
.evento{ background:#dcfce7; color:#15803d; }
.campaña{ background:#fef3c7; color:#b45309; }
.noticia{ background:#ede9fe; color:#6d28d9; }

#media-contenedor{
    width:100%;
    height:45vh;
    background:white;
    border-radius:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    margin-bottom:18px;
}

#media-contenedor img,
#media-contenedor video,
.media-principal{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    object-position:center;
    display:block;
}

.principal h2{
    font-size:42px;
    line-height:1.1;
    margin-bottom:8px;
    color:#020617;
}

.principal p{
    font-size:24px;
    color:#334155;
}

aside{
    background:#f4f6f9;
    color:#0f172a;
    border-radius:28px;
    padding:20px 14px;
    overflow:hidden;
}

aside h3{
    font-size:26px;
    margin-bottom:18px;
}

aside ul{
    list-style:none;
}

aside li{
    background:white;
    border-left:5px solid #ABBB2D;
    border-radius:12px;
    padding:12px;
    margin-bottom:12px;
    font-size:18px;
    font-weight:600;
}

footer{
    height:6vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}

footer marquee{
    width:100%;
    color:#ABBB2D;
    font-size:24px;
    font-weight:bold;
    background:rgba(255,255,255,.08);
    padding:10px;
    border-radius:12px;
}