/* Pantalla del Canal 3. Diseñada para salir a 640×480 (4:3): letras gruesas y grandes, sin blanco puro,
   márgenes seguros de ~5 % y sin líneas finas. 1rem = 10 px en el escenario de 1280×960. */
:root {
  --navy: #0b1f3a; --navy-2: #12305a; --ink: #06121f; --green: #34d058; --green-ink: #06210f;
  --text: #f1f5f9; --soft: #b9c7da; --gold: #ffd23f; --red: #c0233b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: none; }
body { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 600; color: var(--text); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
#stage { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; overflow: hidden; background: var(--ink); }
#layers { position: absolute; inset: 0; }

/* capas y transición */
.layer { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.layer.in { opacity: 1; }
.slide { display: flex; flex-direction: column; padding: 5.2rem 6.4rem 4.8rem; overflow: hidden; }
.slide { isolation: isolate; }
.slide.hasbar { padding-bottom: 22.5rem; }
.bgimg, .bgdim { position: absolute; inset: 0; z-index: -1; }
.bgimg { background-size: cover; background-position: center; }
.slide.hasbg { text-shadow: 0 .2rem .8rem rgba(0, 0, 0, .75); }
.title { font-family: "Bebas Neue", "Barlow Condensed", sans-serif; font-weight: 400; font-size: 8.4rem; line-height: 1; letter-spacing: .05em; color: var(--green); }

/* marca CANAL TRES (reemplazable subiendo un logo en el panel) */
.wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: "Bebas Neue", sans-serif; font-weight: 400; line-height: .9; transform: skewX(-8deg); }
.wordmark span { background: var(--green); color: #fff; font-size: 4.4rem; padding: .25rem 1.4rem .1rem; letter-spacing: .06em; }
.wordmark b { background: var(--navy); border: .4rem solid var(--green); color: #fff; font-weight: 400; font-size: 11rem; padding: .2rem 1.6rem 0; letter-spacing: .04em; margin-top: -.1rem; }
.wordmark.small span { font-size: 2rem; padding: .1rem .8rem 0; } .wordmark.small b { font-size: 5rem; border-width: .25rem; padding: .1rem .9rem 0; }
.wordmark.top { position: absolute; top: 4rem; left: 6.4rem; transform: skewX(-8deg) scale(.62); transform-origin: 0 0; }
.wordmark.huge { transform: skewX(-8deg) scale(1.3); }

.logo-img { display: block; width: auto; }
.logo-img.top { position: absolute; top: 3.6rem; left: 6.4rem; height: 12rem; }
.logo-img.huge { height: 30rem; }
.logo-img.small { height: 8rem; }

/* barra inferior */
#bar { position: absolute; left: 0; right: 0; bottom: 0; transition: opacity .6s, transform .6s; }
#bar.off { opacity: 0; transform: translateY(100%); }
#ticker { height: 6.4rem; background: var(--green); color: var(--green-ink); overflow: hidden; position: relative; white-space: nowrap; font-size: 4.2rem; line-height: 6.4rem; font-weight: 600; }
#ticker-text { position: absolute; left: 0; top: 0; will-change: transform; }
#info { display: flex; align-items: center; justify-content: space-between; height: 13.6rem; padding: 0 6.4rem 3.8rem; background: #0a1830; border-top: .5rem solid var(--green); }
#info img { height: 8rem; width: auto; display: block; }
#bar-time-wrap { font-size: 6.4rem; line-height: 1; display: flex; align-items: baseline; gap: 1rem; }
#bar-time-wrap small { font-size: 3.4rem; color: var(--soft); }
#bar-date { font-size: 4.8rem; line-height: 1; }
#bar-temp { font-size: 6.4rem; line-height: 1; color: var(--gold); min-width: 14rem; text-align: right; }

/* ---------- hora y fecha ---------- */
.slide.clock { background: radial-gradient(120% 90% at 50% 20%, var(--navy-2), var(--ink)); align-items: center; justify-content: center; text-align: center; }
.bigtime { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 36rem; line-height: .85; letter-spacing: .02em; display: flex; align-items: baseline; justify-content: center; gap: 2rem; }
.bigtime .ampm { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 7.6rem; color: var(--green); letter-spacing: 0; }
.longdate { font-size: 7rem; line-height: 1.05; margin-top: 3.2rem; color: var(--text); letter-spacing: .04em; }
.temp-row { display: flex; align-items: center; justify-content: center; gap: 3rem; margin-top: 4.4rem; padding: 2.4rem 4.4rem; background: rgba(0, 0, 0, .35); border-left: .6rem solid var(--green); }
.temp-row .wicon { width: 11rem; height: 11rem; }
.temp-col { text-align: left; }
.temp-col .deg { font-size: 11rem; line-height: .85; color: var(--gold); font-family: "Bebas Neue", sans-serif; font-weight: 400; }
.temp-col .cond { font-size: 4.6rem; line-height: 1.1; }
.temp-row .place { font-size: 4.6rem; color: var(--soft); max-width: 30rem; text-align: left; line-height: 1.05; }

/* ---------- clima ---------- */
.wicon svg { width: 100%; height: 100%; display: block; }
.slide.weather { background: linear-gradient(180deg, #1c6fb8 0%, #0f3f78 60%, #0b2a52 100%); }
.slide.weather.night { background: linear-gradient(180deg, #0f1f45 0%, #0a1430 70%, #060c1f 100%); }
.slide.weather .title { color: var(--text); font-size: 7.6rem; }
.now { display: flex; align-items: center; gap: 3.6rem; margin-top: 1.6rem; }
.wicon.big { width: 20rem; height: 20rem; flex: none; }
.now-col .deg { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 20rem; line-height: .8; color: #fff; }
.now-col .cond { font-size: 5.6rem; line-height: 1.1; margin-top: 1rem; }
.hilo { display: flex; gap: 3rem; font-size: 4.6rem; color: var(--soft); margin-top: .6rem; }
.hilo b { color: var(--gold); font-weight: 600; }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: auto; }
.daycard { background: rgba(0, 0, 0, .32); padding: 1.6rem 1rem; text-align: center; border-top: .5rem solid var(--green); }
.dname { font-size: 4.2rem; line-height: 1; color: var(--green); }
.daycard .wicon { width: 9rem; height: 9rem; margin: .6rem auto; }
.dtemp { font-size: 4.2rem; line-height: 1.1; }
.drain { font-size: 3.4rem; color: var(--soft); margin-top: .3rem; }

/* ---------- frase ---------- */
.slide.quote { background: radial-gradient(110% 100% at 20% 0%, #14507a, #0b1f3a 55%, var(--ink)); }
.qmark { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 24rem; line-height: .6; height: 9rem; color: var(--green); margin-top: auto; }
.qtext { font-weight: 600; line-height: 1.12; margin-top: 2rem; flex: 0 1 auto; max-width: 100%; text-wrap: balance; }
.qauthor { font-size: 5.6rem; color: var(--gold); margin-top: 3.6rem; margin-bottom: auto; line-height: 1.1; }

/* ---------- santoral ---------- */
.slide.santoral { background: radial-gradient(110% 100% at 80% 0%, #4a2670, #241043 55%, #12091f); align-items: center; text-align: center; }
.sdate { font-size: 6.4rem; line-height: 1.05; margin-top: 1.4rem; }
.slabel { font-size: 5rem; color: var(--gold); margin-top: auto; }
.names { margin: 1.6rem 0 auto; line-height: 1.12; width: 100%; }
.name { padding: .6rem 0; border-bottom: .3rem solid rgba(255, 255, 255, .15); max-width: 92%; margin: 0 auto; }
.name:last-child { border-bottom: 0; }

/* ---------- festivo ---------- */
.slide.holiday { background: radial-gradient(110% 100% at 50% 0%, #7a1230, #3a0a1c 60%, #1c0610); justify-content: center; text-align: center; align-items: center; }
.slide.holiday.oficial { background: radial-gradient(110% 100% at 50% 0%, #0f6b3a, #0a3a2c 60%, #061c18); }
.slide.holiday .title { color: var(--gold); font-size: 7.4rem; }
.hname { font-family: "Bebas Neue", sans-serif; font-weight: 400; line-height: .98; margin: 3rem 0 2rem; letter-spacing: .02em; text-wrap: balance; }
.hdate { font-size: 5.6rem; color: var(--soft); }
.hnote { margin-top: 3rem; font-size: 4.8rem; background: var(--gold); color: #2b1c00; padding: .6rem 2.4rem; }

/* ---------- tarjetas de teléfonos ---------- */
.slide.phones.blue { background: linear-gradient(160deg, #123b78, #0a1f45 70%); }
.slide.phones.green { background: linear-gradient(160deg, #0d6a49, #08342a 70%); }
.slide.phones.red { background: linear-gradient(160deg, #8c1830, #3a0a16 70%); }
.slide.phones .title { color: var(--text); font-size: 7.6rem; }
.rows { margin-top: 2.6rem; display: flex; flex-direction: column; gap: .4rem; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: .7rem 0; border-bottom: .3rem solid rgba(255, 255, 255, .18); line-height: 1.05; }
.row .lab { flex: 1 1 auto; }
.row .val { color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- imagen / video del anunciante ---------- */
.slide.media { padding: 0; background: #000; }
.slide.media img, .slide.media video { width: 100%; height: 100%; display: block; }
.slide.idle { background: radial-gradient(120% 90% at 50% 20%, var(--navy-2), var(--ink)); align-items: center; justify-content: center; }

/* ---------- dólar ---------- */
.slide.dollar { background: radial-gradient(110% 100% at 50% 0%, #0f5a3a, #08301f 60%, #04160e); align-items: center; text-align: center; }
.slide.dollar .title { color: var(--text); font-size: 7.6rem; }
.dbig { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 30rem; line-height: .9; color: #fff; margin-top: auto; letter-spacing: .01em; }
.dunit { font-size: 6rem; color: var(--soft); line-height: 1; margin-top: 1rem; }
.dchange { margin-top: 3rem; font-size: 5.2rem; line-height: 1; padding: .8rem 2.4rem; background: rgba(0, 0, 0, .35); }
.dchange.up { color: #ff9a8a; } .dchange.down { color: #7ff0a6; } .dchange.flat { color: var(--soft); }
.dsrc { margin-top: auto; font-size: 4.2rem; color: var(--soft); padding-top: 2rem; }

/* ---------- resultados ---------- */
.sub { font-size: 5.6rem; line-height: 1.05; margin-top: .6rem; color: var(--text); }
.slide.scores { background: linear-gradient(160deg, #123b78, #0a1f45 70%); }
.slide.scores.nflx { background: linear-gradient(160deg, #0e3d4a, #08202a 70%); }
.matches { display: flex; flex-direction: column; margin-top: 2rem; flex: 1; justify-content: center; }
.match { display: grid; grid-template-columns: 15rem 1fr 15rem 1fr; gap: 1.4rem; align-items: baseline; padding: .6rem 0; border-bottom: .3rem solid rgba(255, 255, 255, .15); line-height: 1.05; }
.mdate { font-size: .8em; color: var(--soft); white-space: nowrap; } .mdate.live, .ninfo.live { color: #ff6b6b; }
.mteam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mteam.r { text-align: right; } .mteam.lost { color: var(--soft); }
.mscore { text-align: center; color: var(--gold); font-variant-numeric: tabular-nums; }
.thead { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; }
.thead .sub { margin-top: 0; font-size: 4.6rem; color: var(--soft); }
.teams { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1.4rem; flex: 1; justify-content: center; }
.nteam { background: rgba(0, 0, 0, .28); padding: .8rem 2rem .6rem; border-left: .6rem solid var(--green); }
.nhead { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; }
.nname { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 6.4rem; line-height: 1; letter-spacing: .04em; }
.ninfo { font-size: 3.6rem; color: var(--soft); }
.ngame { display: grid; grid-template-columns: 6rem 1fr 14rem 19rem; gap: 1.4rem; align-items: baseline; font-size: 4.2rem; line-height: 1.1; padding: .1rem 0; border-top: .25rem solid rgba(255, 255, 255, .12); }
.nres { text-align: center; font-weight: 600; } .nres.G { color: #7ff0a6; } .nres.P { color: #ff9a8a; } .nres.E { color: var(--soft); }
.nscore { color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; } .ndate { text-align: right; color: var(--soft); font-size: .86em; white-space: nowrap; }

/* ---------- efemérides ---------- */
.slide.efem { background: radial-gradient(110% 100% at 20% 0%, #6a4310, #3a2408 55%, #1a1004); }
.efs { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 2rem; flex: 1; justify-content: center; }
.ef { display: grid; grid-template-columns: 15rem 1fr; gap: 2.4rem; align-items: baseline; line-height: 1.12; }
.efy { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 1.5em; color: var(--gold); line-height: 1; }