/* ===================================================================
   MLC NOTICIAS - CAPA EDITORIAL (contenido migrado desde /Archive)
   Se carga DESPUES de style.css. Todo va con prefijo .mlc- para no
   pisar los estilos del diseno original (hero, dock, chat, etc.).
   =================================================================== */

:root {
    --mlc-red: #e50914;
    --mlc-red-dark: #b00710;
    --mlc-ink: #14161c;
    --mlc-ink-soft: #3a4050;
    --mlc-paper: #faf8f4;
    --mlc-paper-2: #f1ede6;
    --mlc-line: #e2ddd3;
    --mlc-gold: #c19a3f;
    --mlc-display: 'Fraunces', 'Playfair Display', Georgia, serif;
    --mlc-sans: 'Public Sans', 'Outfit', system-ui, sans-serif;
}

.mlc-section { padding: 6rem 2rem; position: relative; }
/* El marquee de shows ya cierra la seccion visualmente: menos aire debajo
   para no dejar un salto vacio antes de "Mesa de contenido". */
#mlc-media { padding-bottom: 2rem; }
.mlc-wrap { max-width: 1200px; margin: 0 auto; width: 100%; }
.mlc-light { background: var(--mlc-paper); color: var(--mlc-ink); }
.mlc-dark  { background: #0a0b0e; color: #fff; }

/* Cabecera de seccion numerada (01 - Titulo) */
.mlc-eyebrow {
    display: flex; align-items: center; gap: .9rem;
    font-family: var(--mlc-sans);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--mlc-red);
    margin-bottom: 1.5rem;
}
.mlc-eyebrow .num {
    font-family: var(--mlc-display);
    font-size: 1.35rem; font-weight: 700; font-style: italic;
    letter-spacing: 0; color: var(--mlc-ink);
    line-height: 1;
}
.mlc-dark .mlc-eyebrow .num { color: #fff; }
.mlc-eyebrow .rule { flex: 1; height: 1px; background: currentColor; opacity: .25; max-width: 120px; }

.mlc-h2 {
    font-family: var(--mlc-display);
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 600; line-height: 1.08; letter-spacing: -.02em;
    margin-bottom: 1.4rem;
}
.mlc-h2 em { font-style: italic; color: var(--mlc-red); }
.mlc-lead {
    font-family: var(--mlc-sans);
    font-size: 1.1rem; line-height: 1.75; color: var(--mlc-ink-soft);
    max-width: 62ch;
}
.mlc-dark .mlc-lead { color: rgba(255,255,255,.72); }

.mlc-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: 1rem 2rem; border-radius: 999px;
    font-family: var(--mlc-sans); font-weight: 700; font-size: .9rem;
    letter-spacing: .04em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; border: none;
    background: var(--mlc-red); color: #fff;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    box-shadow: 0 10px 30px -12px rgba(229,9,20,.7);
}
.mlc-btn:hover { transform: translateY(-3px); background: var(--mlc-red-dark); }
.mlc-btn.ghost {
    background: transparent; color: inherit; box-shadow: none;
    border: 1px solid currentColor;
}
.mlc-btn.ghost:hover { background: rgba(229,9,20,.08); color: var(--mlc-red); border-color: var(--mlc-red); }

/* -------------------------------------------------
   TOP BAR (servicio + soporte)
   ------------------------------------------------- */
.mlc-topbar {
    background: #000; color: rgba(255,255,255,.72);
    font-family: var(--mlc-sans); font-size: .76rem;
    letter-spacing: .08em; text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; padding: .55rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mlc-topbar a { color: #fff; text-decoration: none; }
.mlc-topbar a:hover { color: var(--mlc-red); }
.mlc-topbar .sep { color: var(--mlc-red); }
.mlc-topbar-right { display: flex; align-items: center; gap: 1rem; }

/* Frases del top bar como etiquetas, con entrada escalonada al cargar */
.mlc-topbar-tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mlc-topbar-tag {
    display: inline-flex; align-items: center;
    padding: .28rem .7rem; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    font-size: .68rem; letter-spacing: .08em; color: rgba(255,255,255,.8);
    opacity: 0; transform: translateY(-6px);
    animation: mlcTagIn .5s ease forwards;
}
.mlc-topbar-tag:nth-child(1) { animation-delay: .1s; }
.mlc-topbar-tag:nth-child(2) { animation-delay: .3s; }
.mlc-topbar-tag:nth-child(3) { animation-delay: .5s; }
@keyframes mlcTagIn { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 820px) { .mlc-topbar-tags { justify-content: center; } }

/* Indicador "Al aire" reubicado en el top bar (antes vivia en el hero) */
.mlc-onair-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px; padding: .3rem .85rem;
    font-family: var(--mlc-sans); font-size: .68rem; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.85);
}
.mlc-onair-badge .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mlc-red); animation: mlcPulse 1.4s infinite; }
.mlc-onair-badge .clock { font-variant-numeric: tabular-nums; color: #fff; font-weight: 700; }
.topbar-lang-toggle { padding: 2px; }
.topbar-lang-toggle .lang-btn { padding: 3px 9px; font-size: .68rem; }
@media (max-width: 820px) {
    .mlc-topbar { flex-direction: column; gap: .3rem; text-align: center; padding: .5rem 1rem; font-size: .68rem; }
    .mlc-topbar-right { flex-direction: column; gap: .3rem; }
}
/* En movil el top bar se oculta: su contenido (idioma, tags, soporte)
   vive dentro del menu de pantalla completa (.mlc-mobile-nav). */
@media (max-width: 1100px) { .mlc-topbar { display: none; } }

/* -------------------------------------------------
   TICKER EN VIVO
   ------------------------------------------------- */
.mlc-ticker {
    display: flex; align-items: stretch;
    background: #0a0b0e; border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative; z-index: 5;
}
.mlc-ticker-label {
    display: flex; align-items: center; gap: .5rem;
    background: var(--mlc-red); color: #fff;
    padding: .6rem 1.2rem; flex-shrink: 0;
    font-family: var(--mlc-sans); font-weight: 800; font-size: .74rem;
    letter-spacing: .2em; text-transform: uppercase;
}
.mlc-ticker-label .live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #fff;
    animation: mlcPulse 1.4s infinite;
}
@keyframes mlcPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.mlc-ticker-scroll { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.mlc-ticker-track {
    display: flex; align-items: center;
    white-space: nowrap; animation: mlcMarquee 45s linear infinite;
    width: max-content; margin-left: 2rem;
}
.mlc-ticker:hover .mlc-ticker-track { animation-play-state: paused; }
.mlc-ticker-powered {
    display: flex; align-items: center; gap: .55rem;
    flex-shrink: 0; padding: .6rem 1.2rem;
    background: rgba(255,255,255,.04); border-left: 1px solid rgba(255,255,255,.08);
    font-family: var(--mlc-sans); font-size: .66rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55);
    text-decoration: none; transition: background .25s ease, color .25s ease;
}
.mlc-ticker-powered:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.mlc-ticker-powered img { height: 15px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
@media (max-width: 700px) { .mlc-ticker-powered span { display: none; } }
/* En movil el ticker se oculta: sus noticias ya estan listadas dentro
   del menu de pantalla completa (.mlc-mobile-nav-breaking). */
@media (max-width: 1100px) { .mlc-ticker { display: none; } }

@keyframes mlcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mlcMarquee3 { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
.mlc-ticker-item {
    display: inline-flex; align-items: center; gap: .7rem;
    font-family: var(--mlc-sans); font-size: .85rem; color: rgba(255,255,255,.8);
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    text-decoration: none; cursor: pointer;
}
.mlc-ticker-item:hover { color: #fff; }
.mlc-ticker-item b {
    color: var(--mlc-red); font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em; font-size: .72rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.mlc-ticker-item { margin-right: 2.5rem; }
.mlc-ticker-item .diamond { color: rgba(255,255,255,.25); }

/* -------------------------------------------------
   BANNER DE ALIANZA
   ------------------------------------------------- */
.mlc-alliance {
    background: linear-gradient(90deg, #000 0%, #1a0305 50%, #000 100%);
    padding: 2.2rem; text-align: center;
    border-top: 1px solid rgba(229,9,20,.25);
    border-bottom: 1px solid rgba(229,9,20,.25);
}
.mlc-alliance img { height: 42px; margin-bottom: .7rem; }
.mlc-alliance p {
    font-family: var(--mlc-sans); font-size: .8rem;
    letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.mlc-alliance p a { color: var(--mlc-red); text-decoration: none; font-weight: 700; }

/* -------------------------------------------------
   01 - MANIFIESTO
   ------------------------------------------------- */
.mlc-manifesto-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start;
}
.mlc-manifesto-body p { margin-bottom: 1.3rem; }

/* Bloc de notas: "Lo que producimos" */
.mlc-notepad {
    background: repeating-linear-gradient(#fffdf5, #fffdf5 33px, #cfd8e6 34px);
    border: 1px solid var(--mlc-line); border-radius: 10px;
    box-shadow: 0 30px 60px -30px rgba(20,22,28,.35);
    padding: 2rem 2rem 2rem 3.6rem; position: relative; overflow: hidden;
}
.mlc-notepad::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 2.4rem;
    width: 2px; background: rgba(229,9,20,.5);
}
.mlc-notepad h4 {
    font-family: var(--mlc-sans); font-size: .72rem; font-weight: 800;
    letter-spacing: .22em; text-transform: uppercase; color: var(--mlc-red);
    margin-bottom: 1.2rem;
}
.mlc-notepad ul { list-style: none; }
.mlc-notepad li {
    font-family: var(--mlc-display); font-size: 1.25rem; color: var(--mlc-ink);
    line-height: 34px; display: flex; align-items: center; gap: .8rem;
    opacity: 0; transform: translateX(-12px);
    animation: mlcWriteIn .6s ease forwards;
}
.mlc-notepad li:nth-child(1) { animation-delay: .1s; }
.mlc-notepad li:nth-child(2) { animation-delay: .5s; }
.mlc-notepad li:nth-child(3) { animation-delay: .9s; }
.mlc-notepad li:nth-child(4) { animation-delay: 1.3s; }
.mlc-notepad li::before { content: "\2713"; color: var(--mlc-red); font-size: .95rem; font-family: var(--mlc-sans); }
@keyframes mlcWriteIn { to { opacity: 1; transform: translateX(0); } }

/* -------------------------------------------------
   02 - MESA DE CONTENIDO (lista de audios)
   ------------------------------------------------- */
.mlc-desk-head {
    display: grid; grid-template-columns: 1.3fr 1fr;
    gap: 2rem; margin-bottom: 2.5rem; align-items: center;
}
.mlc-desk-login { flex-shrink: 0; }
@media (max-width: 800px) {
    .mlc-desk-head { grid-template-columns: 1fr; }
}

.mlc-audio-list { border-top: 1px solid var(--mlc-line); }
.mlc-audio-row {
    display: grid; grid-template-columns: 46px 1fr auto auto;
    align-items: center; gap: 1.4rem;
    padding: 1.35rem .6rem; border-bottom: 1px solid var(--mlc-line);
    transition: background .25s ease, padding .25s ease;
}
.mlc-audio-row:hover { background: #fff; padding-left: 1.2rem; }
.mlc-audio-row .idx {
    font-family: var(--mlc-display); font-size: 1.1rem; font-style: italic;
    color: var(--mlc-red); font-weight: 700;
}
.mlc-audio-row .title {
    font-family: var(--mlc-sans); font-size: 1.05rem; font-weight: 700; color: var(--mlc-ink);
    margin-bottom: .25rem;
}
.mlc-demo-tag { font-weight: 500; color: var(--mlc-ink-soft); }
.mlc-audio-row .meta {
    font-family: var(--mlc-sans); font-size: .8rem; color: var(--mlc-ink-soft);
}
.mlc-tag {
    font-family: var(--mlc-sans); font-size: .66rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    padding: .35rem .75rem; border-radius: 999px;
    background: rgba(229,9,20,.08); color: var(--mlc-red);
    border: 1px solid rgba(229,9,20,.2); white-space: nowrap;
}
.mlc-dl {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--mlc-sans); font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--mlc-ink); text-decoration: none;
    border: 1px solid var(--mlc-line); border-radius: 999px;
    padding: .55rem 1.1rem; background: #fff; white-space: nowrap;
    transition: all .25s ease;
}
.mlc-dl:hover { background: var(--mlc-red); color: #fff; border-color: var(--mlc-red); }
@media (max-width: 800px) {
    .mlc-audio-row { grid-template-columns: 34px 1fr; row-gap: .7rem; }
    .mlc-audio-row .mlc-tag, .mlc-audio-row .mlc-dl { grid-column: 2; justify-self: start; }
}

/* Valor de programacion diaria */
.mlc-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
    margin: 3rem 0 2rem;
}
.mlc-stat {
    background: #fff; border: 1px solid var(--mlc-line); border-radius: 12px;
    padding: 1.8rem 1.4rem; text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
.mlc-stat:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(20,22,28,.5); }
.mlc-stat .n {
    font-family: var(--mlc-display); font-size: 2.6rem; font-weight: 700;
    color: var(--mlc-red); line-height: 1; margin-bottom: .5rem;
}
.mlc-stat .l {
    font-family: var(--mlc-sans); font-size: .74rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--mlc-ink-soft);
}
.mlc-dark .mlc-stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.mlc-dark .mlc-stat .l { color: rgba(255,255,255,.6); }
@media (max-width: 700px) { .mlc-stats { grid-template-columns: repeat(2, 1fr); } }

.mlc-format-note {
    display: flex; align-items: center; gap: 1.2rem;
    background: var(--mlc-paper-2); border: 1px solid var(--mlc-line); border-left: 4px solid var(--mlc-red);
    border-radius: 12px; padding: 1.4rem 1.6rem; height: 100%; box-sizing: border-box;
}
.mlc-format-note p { font-family: var(--mlc-sans); font-size: .88rem; color: var(--mlc-ink-soft); margin: 0; flex: 1; }
.mlc-format-cta {
    flex-shrink: 0; display: inline-block; white-space: nowrap;
    background: var(--mlc-red); color: #fff; font-family: var(--mlc-sans); font-weight: 700;
    font-size: .85rem; text-decoration: none; padding: .7rem 1.2rem; border-radius: 8px;
    transition: transform .2s ease, background .2s ease;
}
.mlc-format-cta:hover { background: var(--mlc-ink); transform: scale(1.04); }
@media (max-width: 800px) {
    .mlc-format-note { flex-direction: column; align-items: flex-start; }
    .mlc-format-cta { align-self: stretch; text-align: center; }
}

.mlc-demo-player { display: flex; align-items: center; gap: .9rem; margin-top: .4rem; }
.mlc-demo-play {
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--mlc-red); color: #fff; flex-shrink: 0;
    display: grid; place-items: center; transition: transform .2s ease;
}
.mlc-demo-play:hover { transform: scale(1.08); }
.mlc-demo-play svg { width: 18px; height: 18px; }
.mlc-demo-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--mlc-line); cursor: pointer; position: relative; }
.mlc-demo-fill { height: 100%; width: 0%; border-radius: 4px; background: var(--mlc-red); transition: width .15s linear; }
.mlc-demo-time { font-family: var(--mlc-sans); font-size: .74rem; color: var(--mlc-ink-soft); min-width: 34px; text-align: right; }

/* -------------------------------------------------
   03 - TALENTO
   ------------------------------------------------- */
.mlc-talent-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3rem;
}
.mlc-talent-card {
    position: relative; overflow: hidden; border-radius: 14px;
    aspect-ratio: 3/4; background: #111; cursor: pointer;
}
.mlc-talent-card img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.mlc-talent-card:hover img { filter: grayscale(0%); transform: scale(1.07); }
.mlc-talent-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.mlc-talent-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem; z-index: 2; }
.mlc-talent-info h4 {
    font-family: var(--mlc-display); font-size: 1.15rem; color: #fff; line-height: 1.2;
}
.mlc-talent-info p {
    font-family: var(--mlc-sans); font-size: .78rem; color: rgba(255,255,255,.72);
    margin-top: .25rem; max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .4s ease, opacity .4s ease;
}
.mlc-talent-card:hover .mlc-talent-info p { max-height: 60px; opacity: 1; }
.mlc-btn-play-sm {
    position: absolute; bottom: 15px; right: 15px; z-index: 10;
    width: 35px; height: 35px; border-radius: 50%; border: none;
    background: #e50914; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
    transition: transform .2s ease, background .2s ease;
}
.mlc-btn-play-sm:hover { background: #ff1e27; transform: scale(1.1); }
.mlc-btn-play-sm.is-playing { background: #ff1e27; }
.mlc-freq {
    position: absolute; top: .9rem; right: .9rem; z-index: 3;
    background: var(--mlc-red); color: #fff;
    font-family: var(--mlc-sans); font-size: .64rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .3rem .65rem; border-radius: 999px;
}
@media (max-width: 1000px) { .mlc-talent-grid { grid-template-columns: repeat(2, 1fr); } }

/* Shows y franquicias */
.mlc-shows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2rem; }
.mlc-show-card {
    text-align: center; padding: 1rem .8rem;
    transition: transform .3s ease;
}
.mlc-show-card:hover { transform: translateY(-6px); }
.mlc-show-logo-wrap { display: flex; align-items: center; justify-content: center; }
.mlc-show-card .mlc-show-logo {
    width: 39%; height: auto; object-fit: contain; margin: 0 auto;
    transition: transform .3s ease;
}
.mlc-show-card:hover .mlc-show-logo { transform: scale(1.08); }
.mlc-show-card p {
    font-family: var(--mlc-sans); font-size: 1.05rem; color: rgba(255,255,255,.75);
    max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
    transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.mlc-show-card:hover p { max-height: 3.6rem; opacity: 1; margin-top: .35rem; }
@media (max-width: 1000px) { .mlc-shows { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------
   04 - COBERTURA
   ------------------------------------------------- */
.mlc-coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.mlc-market {
    border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
    padding: 1.5rem; position: relative; overflow: hidden;
    transition: all .35s ease; background: rgba(255,255,255,.03);
}
.mlc-market:hover { border-color: var(--mlc-red); background: rgba(229,9,20,.1); transform: translateY(-5px); }
.mlc-market span {
    font-family: var(--mlc-sans); font-size: .66rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase; color: var(--mlc-red);
    display: block; margin-bottom: .4rem;
}
.mlc-market h4 { font-family: var(--mlc-display); font-size: 1.35rem; color: #fff; }
@media (max-width: 800px) { .mlc-coverage-grid { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------
   05 - TESTIMONIOS (tarjeta centrada)
   ------------------------------------------------- */
.mlc-testimonial-card {
    max-width: 620px; margin: 0 auto; text-align: center;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px; padding: 3rem 2.5rem;
}
.mlc-testimonial-quote-icon { width: 38px; height: 38px; color: var(--mlc-red); opacity: .55; margin: 0 auto 1.2rem; display: block; }
.mlc-testimonial-quote {
    font-family: var(--mlc-display); font-style: italic;
    font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.35; color: #fff;
    margin-bottom: 1.4rem;
}
.mlc-testimonial-body {
    font-family: var(--mlc-sans); font-size: .95rem; line-height: 1.7;
    color: rgba(255,255,255,.68); max-width: 480px; margin: 0 auto 2rem;
}
.mlc-testimonial-footer { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.mlc-testimonial-avatar {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 30% 25%, #2a2d36, #0d0e12);
    border: 2px solid var(--mlc-gold);
    box-shadow: 0 0 0 6px rgba(193,154,63,.08);
}
.mlc-testimonial-avatar .mono {
    font-family: var(--mlc-display); font-size: 1.25rem; font-weight: 700; color: var(--mlc-gold);
}
.mlc-testimonial-who { display: flex; flex-direction: column; gap: .15rem; }
.mlc-testimonial-who strong { font-family: var(--mlc-display); font-size: 1.05rem; color: #fff; }
.mlc-testimonial-who span {
    font-family: var(--mlc-sans); font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--mlc-red);
}
@media (max-width: 700px) { .mlc-testimonial-card { padding: 2.2rem 1.5rem; } }

/* -------------------------------------------------
   06 - NUEVA ALIANZA (fusionada con Breaking News)
   ------------------------------------------------- */
#alianza .mlc-eyebrow { justify-content: flex-start; margin-bottom: .8rem; }
#alianza .mlc-eyebrow .num { color: #fff; }
#alianza .mlc-h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .6rem; }
#alianza .mlc-lead { margin-bottom: 0; }
.mlc-s6-head {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2.5rem; align-items: start; text-align: left;
}
.mlc-s6-head-text { max-width: 560px; }
.mlc-s6-side { display: flex; flex-direction: column; gap: .8rem; }
.mlc-s6-side-logo {
    display: flex; align-items: center; justify-content: center;
    padding: 1.1rem; border-radius: 14px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.mlc-s6-side-logo img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
@media (max-width: 800px) {
    .mlc-s6-head { grid-template-columns: 1fr; }
}

/* Fila 1 del lado derecho: los 2 logos, uno por columna */
.mlc-s6-side-logos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* Fila 2: las 3 pildoras, una por columna */
.mlc-pillars-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
    margin: 0; max-width: none;
}
.mlc-pillar-pill {
    display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
    padding: .9rem 1rem; border-radius: 14px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.mlc-pillar-pill:hover { border-color: rgba(229,9,20,.5); background: rgba(229,9,20,.08); transform: translateY(-3px); }
.mlc-pillar-pill .n {
    font-family: var(--mlc-display); font-style: italic; font-weight: 700;
    font-size: 1.1rem; color: var(--mlc-red); flex-shrink: 0;
}
.mlc-pillar-pill p { font-family: var(--mlc-sans); font-size: .8rem; color: rgba(255,255,255,.75); line-height: 1.4; margin: 0; }
@media (max-width: 560px) {
    .mlc-s6-side-logos { grid-template-columns: 1fr; }
    .mlc-pillars-row { grid-template-columns: 1fr; }
}
.mlc-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* -------------------------------------------------
   07 - NEWSLETTER + AFILIADOS
   ------------------------------------------------- */
.mlc-news-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: center; }
.mlc-subform { display: flex; gap: .8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.mlc-subform input {
    flex: 1; min-width: 240px; padding: 1rem 1.3rem;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.05); color: #fff;
    font-family: var(--mlc-sans); font-size: .95rem; outline: none;
    transition: border-color .25s ease;
}
.mlc-subform input:focus { border-color: var(--mlc-red); }
.mlc-subnote { font-family: var(--mlc-sans); font-size: .78rem; color: rgba(255,255,255,.45); margin-top: .9rem; }
.mlc-affiliate-card {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px; padding: 2rem; text-align: center;
}
.mlc-affiliate-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--mlc-red); margin-bottom: 1rem; }
.mlc-affiliate-card .role {
    font-family: var(--mlc-sans); font-size: .7rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase; color: var(--mlc-red); margin-bottom: .6rem;
}
.mlc-affiliate-card h4 { font-family: var(--mlc-display); font-size: 1.5rem; color: #fff; margin-bottom: .5rem; }
.mlc-affiliate-card a { display: block; font-family: var(--mlc-sans); font-size: .95rem; color: rgba(255,255,255,.75); text-decoration: none; margin-top: .25rem; }
.mlc-affiliate-card a:hover { color: var(--mlc-red); }
@media (max-width: 900px) { .mlc-news-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Ticker de marcas */
.mlc-cs-ribbon {
    display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
    background: var(--mlc-red); color: #fff; font-family: var(--mlc-sans);
    font-size: .85rem; font-weight: 600; padding: .65rem 1.2rem; border-radius: 8px;
    margin-top: 2.5rem;
}
.mlc-cs-ribbon-label { text-transform: uppercase; letter-spacing: .04em; }
.mlc-cs-ribbon-sep { opacity: .6; }
.mlc-cs-ribbon-phone { color: #fff; text-decoration: none; }
.mlc-cs-ribbon-phone:hover { text-decoration: underline; }

.mlc-brands { overflow: hidden; border-top: 1px solid rgba(255,255,255,.1); margin-top: 4rem; padding-top: 2rem; }
.mlc-brands-track {
    display: flex; align-items: center; white-space: nowrap;
    animation: mlcMarquee3 30s linear infinite; width: max-content;
}
.mlc-brands-track span {
    font-family: var(--mlc-display); font-size: 1.2rem; font-style: italic;
    color: rgba(255,255,255,.4); transition: color .3s ease;
}
.mlc-brands-track span { margin-right: 3.5rem; }
.mlc-brands-track span:hover { color: var(--mlc-red); }
.mlc-brands-track img {
    height: 67.5px; width: auto; margin-right: 3.5rem; flex-shrink: 0;
    opacity: .85; transition: opacity .3s ease;
}
.mlc-brands-track img:hover { opacity: 1; }

/* -------------------------------------------------
   Sección de contacto: propuesta + formulario a la
   izquierda, tarjeta de contacto directo a la derecha.
   ------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3.5rem; align-items: start; }
.contact-main { padding-top: .2rem; }
.contact-subtitle {
    font-family: var(--mlc-sans); font-size: .74rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .6rem;
}
.contact-title { font-family: var(--mlc-display); margin: 0 0 1rem; line-height: 1.15; }
.contact-desc { font-family: var(--mlc-sans); line-height: 1.6; max-width: 52ch; margin: 0 0 2.2rem; }

.contact-form { display: flex; flex-direction: column; gap: .9rem; max-width: 480px; }
.contact-form-label { font-family: var(--mlc-sans); font-size: .85rem; color: rgba(255,255,255,.6); margin: 0; }
.contact-form-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.contact-form-row input {
    /* min-width (no flex-basis en px) para que la fila no se convierta
       en 200px de ALTO cuando @media abajo cambia a flex-direction:column */
    flex: 1 1 auto; min-width: 200px; box-sizing: border-box; padding: 1rem 1.3rem;
    border-radius: 12px; border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.05); color: #fff;
    font-family: var(--mlc-sans); font-size: .95rem; outline: none;
    transition: border-color .25s ease;
}
.contact-form-row input:focus { border-color: var(--mlc-red); }
.contact-form-submit { align-self: flex-start; }
@media (max-width: 520px) {
    .contact-form-row { flex-direction: column; }
    .contact-form-submit { width: 100%; text-align: center; }
}

.contact-card {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px; padding: 1.8rem; display: flex; flex-direction: column; gap: .9rem;
}
.contact-card-person { display: flex; align-items: center; gap: 1rem; margin-bottom: .3rem; }
.contact-card-photo {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--mlc-red); flex-shrink: 0;
}
.contact-card-name { display: block; font-family: var(--mlc-display); font-size: 1.15rem; color: #fff; }
.contact-card-role {
    display: block; font-family: var(--mlc-sans); font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--mlc-red); margin-top: .15rem;
}
.contact-card-row {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .9rem; border-radius: 12px;
    background: rgba(255,255,255,.03); text-decoration: none;
    transition: background .2s ease;
}
.contact-card-row:hover { background: rgba(255,255,255,.08); }
.contact-card-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: var(--mlc-red);
    display: flex; align-items: center; justify-content: center;
}
.contact-card-text { display: flex; flex-direction: column; min-width: 0; }
.contact-card-text small { font-family: var(--mlc-sans); font-size: .68rem; color: rgba(255,255,255,.5); }
.contact-card-text strong { font-family: var(--mlc-sans); font-size: .92rem; color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.contact-card-whatsapp {
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1rem; border-radius: 999px;
    background: #25D366; color: #08341c; text-decoration: none;
    font-family: var(--mlc-sans); font-size: .88rem; font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease;
}
.contact-card-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(37,211,102,.6); }
.whatsapp-circle {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center;
}
.contact-card-secondary {
    text-align: center; font-family: var(--mlc-sans); font-size: .82rem; font-weight: 700;
    color: rgba(255,255,255,.7); text-decoration: none; padding: .6rem;
    border: 1px solid rgba(255,255,255,.15); border-radius: 12px;
    transition: border-color .2s ease, color .2s ease;
}
.contact-card-secondary:hover { border-color: var(--mlc-red); color: #fff; }
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Modal del formulario completo */
.mlc-modal-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(5,5,5,.75); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.mlc-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.mlc-modal {
    position: relative; background: #fff; border-radius: 20px;
    padding: 2.4rem; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
    transform: translateY(16px); transition: transform .25s ease;
}
.mlc-modal-overlay.is-open .mlc-modal { transform: translateY(0); }
.mlc-modal-close {
    position: absolute; top: 1.1rem; right: 1.1rem; width: 32px; height: 32px;
    border-radius: 50%; border: none; background: #f3f4f6; color: #555;
    font-size: .9rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mlc-modal-close:hover { background: #e5e7eb; }
.mlc-modal-title {
    font-family: var(--mlc-display); font-size: 1.4rem; color: var(--mlc-ink);
    margin-bottom: 1.4rem; padding-right: 2rem;
}

/* -------------------------------------------------
   Reproductor flotante (popup) — abierto por TODOS los
   botones de play del sitio (dock, talento, mesa de
   contenido y shows).
   ------------------------------------------------- */
.fp-modal {
    display: none;
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    width: min(340px, calc(100vw - 24px));
    background: rgba(20,20,20,.96); backdrop-filter: blur(10px);
    padding: 14px 18px; border-radius: 22px;
    z-index: 10000; color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 15px 35px rgba(0,0,0,.6);
}
.fp-modal.is-open { display: block; }
.fp-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.fp-info { min-width: 0; }
.fp-title {
    margin: 0; font-size: .92rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-subtitle {
    margin: 2px 0 0; font-size: .72rem; color: #aaa; font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-close {
    flex-shrink: 0; background: none; border: none; color: #888; cursor: pointer;
    padding: 4px; display: flex; align-items: center; justify-content: center;
}
.fp-close:hover { color: #fff; }
.fp-controls { display: flex; align-items: center; gap: 12px; }
.fp-play-btn {
    flex-shrink: 0; background: var(--mlc-red); border: none; border-radius: 50%;
    width: 36px; height: 36px; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.fp-play-btn:hover { background: #ff1e27; }
.fp-progress-container {
    flex: 1; height: 6px; background: #333; border-radius: 3px;
    position: relative; cursor: pointer; min-width: 0;
}
.fp-progress { width: 0%; height: 100%; background: var(--mlc-red); border-radius: 3px; position: relative; }
.fp-progress-dot {
    position: absolute; right: -4px; top: -3px; width: 12px; height: 12px;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.fp-download-btn {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.fp-download-btn:hover { background: rgba(255,255,255,.2); }

/* -------------------------------------------------
   Modal de descarga: CTA con captura de correo
   ------------------------------------------------- */
.dl-modal {
    display: none;
    position: fixed; inset: 0; z-index: 10050;
    background: rgba(5,5,5,.75); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 1.5rem;
}
.dl-modal.is-open { display: flex; }
.dl-modal-card {
    position: relative; background: #fff; border-radius: 22px;
    padding: 2.6rem 2.2rem 2.2rem; width: 100%; max-width: 420px;
    text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.dl-modal-close {
    position: absolute; top: 1rem; right: 1rem; width: 30px; height: 30px;
    border-radius: 50%; border: none; background: #f3f4f6; color: #555;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dl-modal-close:hover { background: #e5e7eb; }
.dl-modal-icon { font-size: 2.2rem; margin-bottom: .4rem; }
.dl-modal-title {
    font-family: var(--mlc-display); font-size: 1.5rem; color: var(--mlc-ink);
    margin: 0 0 .5rem;
}
.dl-modal-track {
    display: none; font-size: .82rem; font-weight: 700; color: var(--mlc-red);
    margin: 0 0 .6rem;
}
.dl-modal-copy {
    font-family: var(--mlc-sans); font-size: .92rem; color: var(--mlc-ink-soft);
    line-height: 1.5; margin: 0 0 1.4rem;
}
.dl-modal-input {
    width: 100%; padding: .85rem 1rem; margin-bottom: .3rem;
    border: 1px solid #d8d8d8; border-radius: 12px; font-size: .95rem;
    font-family: var(--mlc-sans); background: #fff; color: #14161c;
    color-scheme: light;
}
.dl-modal-input:focus { outline: none; border-color: var(--mlc-red); }
.dl-modal-error {
    display: none; color: var(--mlc-red); font-size: .78rem; text-align: left;
    margin: .2rem 0 .6rem;
}
.dl-modal-error.is-visible { display: block; }
.dl-modal-submit {
    width: 100%; border: none; border-radius: 12px; padding: .95rem 1rem;
    background: var(--mlc-red); color: #fff; font-family: var(--mlc-sans);
    font-weight: 800; font-size: .95rem; letter-spacing: .02em; cursor: pointer;
    margin-top: .6rem; transition: background .2s ease, transform .2s ease;
}
.dl-modal-submit:hover { background: var(--mlc-red-dark); transform: translateY(-1px); }
.dl-modal-fine { font-size: .74rem; color: #999; margin: 1rem 0 0; }

/* -------------------------------------------------
   Formulario de contacto reutilizado dentro del banner oscuro
   (mismas clases que antes, con colores adaptados a fondo negro)
   ------------------------------------------------- */
.mlc-brief-contact { padding: 3.2rem 2rem; }
.mlc-brief-contact .contact-subtitle { color: var(--mlc-red); }
.mlc-brief-contact .contact-title { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.mlc-brief-contact .contact-desc { color: rgba(255,255,255,.6); }

/* -------------------------------------------------
   HERO - tarjetas informativas superpuestas (del archive)
   ------------------------------------------------- */
/* Pantallas de poca altura (laptops comunes, ~800px o menos): el hero
   se aprieta contra el dock de retratos. Reducimos margenes para que
   todo respire sin solaparse. */
@media (max-height: 800px) {
    .hero-text .line2 { margin-bottom: .4rem; }
    .hero-desc { margin-bottom: 0; }
    .hero-text { top: 38%; }
}
@media (max-height: 700px) {
    .hero-desc { display: none; }
    .hero-text { top: 34%; }
}

/* Nav de secciones en el header */
.mlc-nav { display: flex; gap: 1.6rem; align-items: center; }
.mlc-nav a {
    font-family: var(--mlc-sans); font-size: .8rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.75); text-decoration: none;
    position: relative; padding-bottom: 3px;
}
.mlc-nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
    background: var(--mlc-red); transition: width .3s ease;
}
.mlc-nav a:hover { color: #fff; }
.mlc-nav a:hover::after { width: 100%; }
@media (max-width: 1100px) { .mlc-nav { display: none; } }

/* Boton hamburguesa (solo visible en movil/tablet, cuando .mlc-nav se oculta).
   z-index mas alto que el panel a pantalla completa para que el boton
   (convertido en X mientras el menu esta abierto) siga visible y sirva
   para cerrarlo. */
.mlc-nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.1); padding: 0; flex-shrink: 0;
    position: relative; z-index: 2001;
}
.mlc-nav-toggle span {
    display: block; width: 18px; height: 2px; margin: 0 auto;
    background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .25s ease;
}
.mlc-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mlc-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.mlc-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1100px) { .mlc-nav-toggle { display: flex; order: 3; margin-left: .5rem; } }

/* Panel de navegacion movil: a pantalla completa, como un pop-up.
   Ademas de los links, aqui vive todo lo que en desktop esta en el
   top bar (idioma, tags, soporte) y en el ticker de noticias, para
   poder ocultar esas dos barras en movil y no perder su contenido. */
.mlc-mobile-nav {
    display: none; position: fixed; inset: 0; z-index: 2000;
    flex-direction: column; background: rgba(8,9,12,.98); backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease;
}
@media (max-width: 1100px) { .mlc-mobile-nav { display: flex; } }
.mlc-mobile-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mlc-mobile-nav-close {
    position: absolute; top: 1.1rem; right: 1rem; z-index: 1;
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center;
}
.mlc-mobile-nav-close span {
    position: absolute; width: 18px; height: 2px; background: #fff; border-radius: 2px;
}
.mlc-mobile-nav-close span:nth-child(1) { transform: rotate(45deg); }
.mlc-mobile-nav-close span:nth-child(2) { transform: rotate(-45deg); }
.mlc-mobile-nav-scroll {
    height: 100%; overflow-y: auto;
    padding: 5rem 0 2.5rem;
}
.mlc-mobile-nav a {
    font-family: var(--mlc-sans); font-size: .95rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.85); text-decoration: none;
    padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.06);
    display: block;
}
.mlc-mobile-nav a:hover, .mlc-mobile-nav a:active { color: var(--mlc-red); background: rgba(255,255,255,.03); }

.mlc-mobile-nav-top {
    display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
    padding: 0 1.5rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .5rem;
}
.mlc-mobile-nav-tags { display: flex; flex-wrap: wrap; gap: .5rem; }

.mlc-mobile-nav-links { display: flex; flex-direction: column; }

.mlc-mobile-nav-breaking {
    padding: 1.5rem 1.5rem 0;
}
.mlc-mobile-nav-label {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
    color: #fff; font-family: var(--mlc-sans); font-weight: 800; font-size: .74rem;
    letter-spacing: .2em; text-transform: uppercase;
}
.mlc-mobile-nav-label .live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--mlc-red);
    animation: mlcPulse 1.4s infinite;
}
.mlc-mobile-ticker-item {
    display: block; font-family: var(--mlc-sans); font-size: .82rem; color: rgba(255,255,255,.75);
    padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
    text-decoration: none; cursor: pointer;
}
.mlc-mobile-ticker-item:hover { color: #fff; }
.mlc-mobile-ticker-item b {
    display: block; color: var(--mlc-red); font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; margin-bottom: .2rem;
}

.mlc-mobile-nav-support {
    margin: 1.5rem 1.5rem 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08);
    display: flex; flex-direction: column; gap: .4rem;
    font-family: var(--mlc-sans); font-size: .85rem; color: rgba(255,255,255,.55);
}
.mlc-mobile-nav-support a { padding: 0; border: none; display: inline; color: #fff; text-transform: none; letter-spacing: normal; font-weight: 600; }

/* Revelado al hacer scroll */
.mlc-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.mlc-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Revelado escalonado de elementos individuales (pildoras, tarjetas, filas)
   dentro de una seccion ya revelada: cada uno aparece con un pequeno
   desfase respecto al anterior. */
.mlc-reveal-item { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.mlc-reveal-item.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .mlc-reveal-item { opacity: 1; transform: none; transition: none; }
}

/* Responsive general */
@media (max-width: 900px) {
    .mlc-section { padding: 4rem 1.2rem; }
    .mlc-manifesto-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}


/* ===================================================================
   RONDA 2 - bloque superior fijo, hero, players, carruseles y mapa
   =================================================================== */

/* ---------- Top bar + header + ticker ----------
   El top bar y el ticker van en flujo normal (se van con el scroll).
   El <header> (logo + nav + botones) es hijo directo del body y es
   sticky: se queda en su lugar hasta que el scroll lo alcanza y
   entonces se pega arriba durante el resto de la pagina, dejando ver
   el video del hero detras gracias a su fondo translucido. */
.header { position: sticky; top: 0; z-index: 1000; }
.btn-trial {
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
    gap: .6rem; white-space: nowrap; text-align: center; max-width: none; width: auto;
    line-height: 1.2; padding: .95rem 1.7rem; font-size: 1rem;
}
.btn-trial-icon {
    width: 18px; height: 18px; flex-shrink: 0;
    animation: mlcArrowNudge 1.4s ease-in-out infinite;
}
@keyframes mlcArrowNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}
@media (max-width: 420px) {
    /* En telefonos muy angostos, en vez de agrandar sin limite, se
       permite envolver a 2 lineas para no desbordar el viewport. */
    .btn-trial { white-space: normal; max-width: 260px; font-size: .88rem; padding: .85rem 1.4rem; }
}
.mlc-ticker { border-top: 1px solid rgba(255,255,255,.08); }

/* Pequeno respiro al saltar a una seccion por ancla */
:root { --mlc-stack: 20px; }
section[id], main[id], .mlc-section { scroll-margin-top: var(--mlc-stack); }

/* ---------- HERO ---------- */
/* El hero se comparte con el dock de locutores: el bloque de texto se centra
   entre el bloque superior fijo y el dock, por eso las medidas son compactas. */
.hero-text { top: 26%; }
.hero-text .line1 {
    font-size: clamp(1.3rem, 2.7vw, 2.6rem);
    font-weight: 400; letter-spacing: 1px; color: #fff; text-transform: none;
    font-family: 'Fraunces', Georgia, serif; line-height: 1.3;
}
.hero-text .line2 {
    font-size: clamp(2.4rem, 5.6vw, 5.4rem);
    text-transform: none; font-family: 'Fraunces', Georgia, serif; font-weight: 700;
    letter-spacing: -1px; line-height: 1.12; margin-bottom: .9rem;
}
.hero-desc {
    font-family: 'Public Sans', 'Outfit', sans-serif;
    font-size: clamp(.78rem, .95vw, .95rem);
    line-height: 1.55; color: rgba(255,255,255,.82);
    max-width: 760px; margin: 0 auto; text-shadow: 0 2px 10px rgba(0,0,0,.8);
    padding: 0 1.5rem;
}

@media (max-width: 900px) {
    /* El header no cabe en movil y desbordaba la pagina: telefono, correo y el
       CTA de prueba ya estan en la top bar y en el hero, asi que se ocultan. */
    .header { padding: 0 1rem; }
    .header .logo { height: 54px; }
    .header-actions { gap: .5rem; }
    .header-actions > .btn-icon-only,
    .header-actions > a.btn-acceder:not(.btn-trial) { display: none; }
    .header-actions .btn-acceder { padding: .5rem 1rem; font-size: .75rem; }

    /* En movil el dock ocupa casi toda la pantalla: el texto sube por encima
       del retrato, como en el diseno original. */
    .hero-text { top: 20%; }
    .hero-desc { display: none; }

    /* "Local Connection." se corta en telefonos angostos: el clamp base
       esta pensado para pantallas anchas y el white-space:nowrap heredado
       de .line2 (style.css) lo saca del viewport. Achicamos el minimo y
       permitimos que envuelva como red de seguridad. */
    .hero-text .line1,
    .hero-text .line2 { white-space: normal; padding: 0 1rem; }
    .hero-text .line2 { font-size: clamp(1.9rem, 11vw, 3rem); }
}

/* ---------- Filas de audio: play + onda ---------- */
.mlc-audio-row { grid-template-columns: 44px 46px minmax(220px, 1fr) minmax(140px, 220px) auto auto; }
.mlc-row-play {
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--mlc-ink); color: #fff; display: grid; place-items: center;
    transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
}
.mlc-row-play svg { width: 16px; height: 16px; }
.mlc-row-play:hover { background: var(--mlc-red); transform: scale(1.08); }
.mlc-row-play.is-playing { background: var(--mlc-red); box-shadow: 0 0 0 5px rgba(229,9,20,.16); }

.mlc-wave { position: relative; height: 36px; cursor: pointer; overflow: hidden; }
.mlc-wave-bars {
    display: flex; align-items: center; gap: 2px; height: 36px; width: 100%;
}
.mlc-wave-bars i {
    display: block; flex: 1; min-width: 2px; border-radius: 2px;
    background: #c9c4ba; transition: background .3s ease;
}
.mlc-wave-played {
    position: absolute; inset: 0; width: 0%; overflow: hidden;
    border-right: 1px solid var(--mlc-red);
}
.mlc-wave-played .mlc-wave-bars { width: 100%; }  /* JS lo fija en px al ancho real de .mlc-wave */
.mlc-wave-played i { background: var(--mlc-red); }
.mlc-audio-row:hover .mlc-wave-bars i { background: #a9a49a; }
.mlc-audio-row:hover .mlc-wave-played i { background: var(--mlc-red); }

@media (max-width: 900px) {
    .mlc-audio-row { grid-template-columns: 44px 1fr; row-gap: .6rem; }
    .mlc-audio-row .idx { display: none; }
    .mlc-audio-row .mlc-wave, .mlc-audio-row .mlc-tag, .mlc-audio-row .mlc-dl { grid-column: 2; }
    .mlc-audio-row .mlc-tag, .mlc-audio-row .mlc-dl { justify-self: start; }
}

/* ---------- Carruseles a todo el ancho (autoplay) ---------- */
.mlc-marquee {
    /* Ancho completo: son hermanos de .mlc-wrap dentro de la seccion, asi que
       basta con anular el padding lateral (100vw incluiria la barra de scroll). */
    position: relative; width: auto;
    margin-left: -2rem; margin-right: -2rem;
    overflow: hidden; padding: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mlc-marquee-track {
    display: flex; width: max-content;
    animation: mlcMarquee 60s linear infinite;
}
.mlc-marquee.reverse .mlc-marquee-track { animation-duration: 48s; animation-direction: reverse; }
.mlc-marquee:hover .mlc-marquee-track { animation-play-state: paused; }
.mlc-marquee-track > * { margin-right: 1.2rem; }
.mlc-marquee .mlc-talent-card { flex: 0 0 280px; width: 280px; margin-top: 0; }
.mlc-marquee .mlc-show-card { flex: 0 0 320px; width: 320px; }
@media (prefers-reduced-motion: reduce) {
    .mlc-marquee-track, .mlc-ticker-track, .mlc-brands-track { animation: none; }
}
/* El padding de .mlc-section baja a 1.2rem en <=900px: el sangrado negativo
   de la marquesina tiene que seguirlo para quedar exactamente a todo el ancho. */
@media (max-width: 900px) {
    .mlc-marquee { margin-left: -1.2rem; margin-right: -1.2rem; }
}
@media (max-width: 700px) {
    .mlc-marquee .mlc-talent-card { flex-basis: 220px; width: 220px; }
    .mlc-marquee .mlc-show-card { flex-basis: 260px; width: 260px; }
}

/* ---------- Cobertura: texto a la izquierda, mapa a la derecha ---------- */
.mlc-coverage-split { display: grid; grid-template-columns: .85fr 1.5fr; gap: 3rem; align-items: center; }
.mlc-coverage-text .mlc-lead { margin-bottom: 0; }
@media (max-width: 900px) {
    .mlc-coverage-split { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- Mapa de cobertura ---------- */
.mlc-map { margin-top: 0; position: relative; }
/* overflow oculto a proposito: hay masas de tierra cuyos anillos se salen del
   viewBox y deben recortarse al marco del mapa. El borde se difumina con una
   mascara radial para que no se vea como un recorte cuadrado. */
.mlc-map svg {
    width: 100%; height: auto; display: block; overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 100%);
}
.mlc-map-land path {
    fill: url(#mlcLandGrad);
    stroke: rgba(255,255,255,.22);
    stroke-width: 1;
    stroke-linejoin: round;
}
.mlc-map-land path.mlc-map-borders { fill: none; stroke: rgba(255,255,255,.12); stroke-width: .7; }
/* Mapa de EE. UU.: sin mascara de borde, rutas entre mercados y etiquetas en pastilla */
.mlc-map svg { -webkit-mask-image: none; mask-image: none; }
.mlc-map-arcs path { fill: none; stroke: var(--mlc-red); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: .75; animation: mlcArcFlow 2.4s linear infinite; }
@keyframes mlcArcFlow { to { stroke-dashoffset: -22; } }
.mlc-map-nodes circle { fill: #fff; stroke: var(--mlc-red); stroke-width: 2; }
.mlc-pin .marker { animation-delay: var(--d, 0s); }
.mlc-pin-tag {
    display: inline-block; white-space: nowrap; box-sizing: border-box; height: 100%;
    padding: 0 .55rem; line-height: 22px; border-radius: 4px;
    background: rgba(10,11,14,.88); border-left: 3px solid var(--mlc-red);
    font-family: 'Public Sans', sans-serif; font-size: 12.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.mlc-pin:hover .mlc-pin-tag { background: var(--mlc-red); }
.mlc-pin { cursor: pointer; }
.mlc-pin .marker {
    fill: var(--mlc-red);
    filter: drop-shadow(0 6px 12px rgba(229,9,20,.55));
    /* transform-box por defecto en SVG es view-box: sin fill-box, el "center"
       seria el centro del mapa y los pines saldrian volando al animarse. */
    transform-box: fill-box; transform-origin: center;
    animation: mlcPinDrop .8s cubic-bezier(.2,1.4,.4,1) backwards;
}
.mlc-pin:nth-of-type(1) .marker { animation-delay: .05s; }
.mlc-pin:nth-of-type(2) .marker { animation-delay: .2s; }
.mlc-pin:nth-of-type(3) .marker { animation-delay: .35s; }
.mlc-pin:nth-of-type(4) .marker { animation-delay: .5s; }
.mlc-pin:nth-of-type(5) .marker { animation-delay: .65s; }
.mlc-pin:nth-of-type(6) .marker { animation-delay: .8s; }
@keyframes mlcPinDrop {
    from { opacity: 0; transform: translateY(-26px) scale(.6); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mlc-pin .halo {
    fill: none; stroke: var(--mlc-red); stroke-width: 1.5;
    transform-box: fill-box; transform-origin: center; opacity: 0;
    animation: mlcHalo 3s ease-out infinite;
}
.mlc-pin .halo2 { animation-delay: 1.5s; }
@keyframes mlcHalo {
    0%   { opacity: .85; transform: scale(.16); }
    70%  { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}
.mlc-pin .pin-label {
    fill: #fff; text-anchor: middle;
    font-family: 'Public Sans', sans-serif; font-size: 17px; font-weight: 700;
    letter-spacing: .5px; paint-order: stroke;
    stroke: rgba(0,0,0,.75); stroke-width: 4px; stroke-linejoin: round;
}
.mlc-pin:hover .marker { fill: #fff; }
.mlc-pin:hover .pin-label { fill: var(--mlc-red); }

/* Etiquetas con bandera: van en foreignObject (HTML) porque el emoji de
   bandera no siempre pinta a color dentro de <text> SVG en Chrome/Windows. */
.mlc-pin-label-box { overflow: visible; pointer-events: none; }
.mlc-pin-label {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; height: 100%; text-align: center; white-space: nowrap;
    font-family: 'Public Sans', sans-serif; font-size: 17px; font-weight: 700;
    letter-spacing: .5px; color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,.8), 0 0 4px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9);
}
.mlc-pin:hover .mlc-pin-label { color: var(--mlc-red); }

/* Banderitas dibujadas en CSS: no dependen de que el sistema tenga fuente
   de emoji a color (Chrome/Windows no siempre la pinta dentro de SVG/foreignObject). */
.mlc-flag {
    display: inline-block; width: 20px; height: 14px; flex-shrink: 0;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.4);
}
.mlc-flag-us {
    position: relative; overflow: hidden;
    background: repeating-linear-gradient(to bottom, #B22234 0 2px, #fff 2px 4px);
    background-size: 100% 4px;
}
.mlc-flag-us::before {
    content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 50%;
    background: #3C3B6E;
}
.mlc-flag-mx { background: linear-gradient(to right, #006847 0 33%, #fff 33% 66%, #CE1126 66% 100%); }
.mlc-flag-es { background: linear-gradient(to bottom, #AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75% 100%); }
.mlc-flag-ar { background: linear-gradient(to bottom, #74ACDF 0 33%, #fff 33% 66%, #74ACDF 66% 100%); }
.mlc-flag-co { background: linear-gradient(to bottom, #FCD116 0 50%, #003893 50% 75%, #CE1126 75% 100%); }
.mlc-flag-pe { background: linear-gradient(to right, #D91023 0 33%, #fff 33% 66%, #D91023 66% 100%); }
.mlc-flag-br { position: relative; overflow: hidden; background: #009C3B; }
.mlc-flag-br::before {
    content: ""; position: absolute; top: 15%; left: 15%; right: 15%; bottom: 15%;
    background: #FFDF00; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.mlc-flag-br::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px;
    margin: -3px 0 0 -3px; background: #002776; border-radius: 50%;
}
.mlc-flag-cl { position: relative; overflow: hidden; background: linear-gradient(to bottom, #fff 0 50%, #D52B1E 50% 100%); }
.mlc-flag-cl::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 50%; background: #0039A6; }
@media (max-width: 760px) {
    /* El mapa no se lee por debajo de ~640px: se desplaza en horizontal
       dentro de su propio contenedor en lugar de encogerse. */
    .mlc-map { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
    .mlc-map svg { min-width: 640px; }
    .mlc-pin .pin-label { font-size: 26px; }
}


/* ---------- Mesa de contenido: una sola columna, valor de programacion primero ---------- */
.mlc-desk-split {
    display: flex; flex-direction: column; gap: 2rem;
    margin-top: 1rem;
}

/* ---------- The MLC Noticias Brief: banner largo ---------- */
.mlc-brief-banner {
    background: linear-gradient(90deg, #0a0b0e 0%, #1a0305 60%, #0a0b0e 100%);
    padding: 2.6rem 2rem; color: #fff;
    border-top: 1px solid rgba(229,9,20,.25);
    border-bottom: 1px solid rgba(229,9,20,.25);
}
.mlc-brief-row {
    display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;
}
.mlc-brief-text { flex: 1 1 320px; min-width: 260px; }
.mlc-brief-eyebrow {
    display: block; font-family: var(--mlc-sans); font-size: .7rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase; color: var(--mlc-red); margin-bottom: .5rem;
}
.mlc-brief-text h2 {
    font-family: var(--mlc-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    font-weight: 600; line-height: 1.2; margin: 0;
}
.mlc-brief-text h2 em { font-style: italic; color: var(--mlc-red); }
.mlc-brief-banner .mlc-subform { margin: 0; flex: 1 1 380px; max-width: 460px; }
.mlc-brief-affiliate {
    display: flex; align-items: center; gap: .8rem; flex: 0 0 auto;
    padding-left: 2rem; border-left: 1px solid rgba(255,255,255,.15);
}
.mlc-brief-affiliate img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mlc-red); }
.mlc-brief-affiliate .role {
    font-family: var(--mlc-sans); font-size: .64rem; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase; color: var(--mlc-red); margin-bottom: .2rem;
}
.mlc-brief-affiliate a { font-family: var(--mlc-sans); font-size: .82rem; color: rgba(255,255,255,.8); text-decoration: none; }
.mlc-brief-affiliate a:hover { color: #fff; }
.mlc-brief-banner .mlc-brands { margin-top: 2rem; padding-top: 1.6rem; max-width: 1200px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
    .mlc-brief-row { flex-direction: column; align-items: stretch; text-align: center; }
    .mlc-brief-affiliate { padding-left: 0; border-left: none; justify-content: center; }
}

    #shows-marquee .mlc-marquee-track {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
        animation: none !important;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }
    #shows-marquee .mlc-show-card {
        width: 100% !important;
        flex: none !important;
    }
    #shows-marquee .mlc-show-logo-wrap {
        width: 100%;
    }
    #shows-marquee .mlc-show-logo {
        width: 80% !important;
        max-width: 150px;
    }
    .mlc-show-play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(229, 9, 20, 0.9);
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }
    .mlc-show-card:hover .mlc-show-play-overlay {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    
/* Preguntas frecuentes */
.mlc-faq { max-width: 860px; margin-top: 2rem; display: grid; gap: .8rem; }
.mlc-faq-item { background: #fff; border: 1px solid var(--mlc-line, #e2ddd3); border-radius: 12px; padding: 0 1.2rem; }
.mlc-faq-item summary {
    cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 700; font-size: 1.02rem;
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.mlc-faq-item summary::-webkit-details-marker { display: none; }
.mlc-faq-item summary::after { content: '+'; color: var(--mlc-red); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.mlc-faq-item[open] summary::after { content: '\2212'; }
.mlc-faq-item p { margin: 0 0 1.2rem; line-height: 1.6; color: var(--mlc-ink-soft, #3a4050); }

/* Logos de la alianza (06) ahora son enlaces */
a.mlc-s6-side-logo { text-decoration: none; transition: background .25s ease, border-color .25s ease; }
a.mlc-s6-side-logo:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.25); }
/* Etiqueta LIVE sobre el slider de noticias (06) */
.mlc-s6-live { margin-top: 3rem; }
.mlc-s6-live .mlc-ticker-label { display: inline-flex; border-radius: 4px; }

/* Hero: la 3.a linea es un subtitulo discreto, en una sola linea y sin
   competir con el titular destacado (2.a linea). */
.hero-text .line2.line3 {
    font-family: 'Public Sans', 'Outfit', sans-serif; font-weight: 500;
    font-size: clamp(.8rem, 1.7vw, 1.6rem); letter-spacing: .18em; text-transform: uppercase;
    line-height: 1.3; white-space: nowrap; max-width: none; padding: 0;
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: rgba(255,255,255,.82); color: rgba(255,255,255,.82);
    filter: none; text-shadow: 0 2px 8px rgba(0,0,0,.7); margin-bottom: 1.2rem;
}
@media (max-width: 700px) {
    .hero-text .line2.line3 { font-size: clamp(.55rem, 2.9vw, .9rem); letter-spacing: .08em; white-space: nowrap; }
}