/* Podcast «El corazón detrás del uniforme»: televisor clásico dibujado con CSS (sin imágenes de terceros).
   Colores de la web: azul marino, rojo, crema y dorado. */
.pc-hero { overflow: hidden; }
.pc-intro { margin: 14px auto 0; max-width: 560px; color: #c6d3df; font-size: 1.08rem; line-height: 1.6; }
.pc-suscribete {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 13px 22px;
    border-radius: 999px; background: #c72632; color: #fff !important; font-weight: 800; font-size: 15px;
    text-decoration: none; box-shadow: 0 10px 26px rgba(199, 38, 50, .35); transition: transform .15s, background .15s;
}
.pc-suscribete:hover, .pc-suscribete:focus-visible { background: #a91d28; transform: translateY(-1px); }
.pc-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-etiqueta {
    display: inline-block; padding: 6px 12px; border-radius: 999px; background: #c72632; color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.pc-meta { margin: 0; color: #667487; font-size: 14px; font-weight: 600; }

/* Plató: pared crema y suelo */
.pc-estudio {
    padding: 70px clamp(16px, 5vw, 60px) 90px;
    background: #f4f1ea;
}
.pc-estudio > * { width: min(1040px, 100%); margin-left: auto; margin-right: auto; }

/* ---------- Televisor ---------- */
.tv { --navy: #06172d; --navy2: #10284b; --rojo: #c72632; --crema: #f4f1ea; --oro: #d7b65d; position: relative; padding-top: 96px; }
.tv-antena { position: absolute; top: 0; left: 50%; width: 0; height: 110px; }
.tv-antena::after {   /* base de la antena */
    content: ""; position: absolute; left: -46px; bottom: -14px; width: 92px; height: 34px;
    border-radius: 46px 46px 0 0; background: linear-gradient(var(--navy2), var(--navy)); border: 2px solid var(--oro); border-bottom: 0;
}
.tv-antena span {
    position: absolute; bottom: 4px; left: -2px; width: 4px; height: 118px; border-radius: 4px;
    background: linear-gradient(#e9dfc6, #9c8a5c); transform-origin: bottom center;
}
.tv-antena span:first-child { transform: rotate(-32deg); }
.tv-antena span:last-child { transform: rotate(28deg); height: 104px; }
.tv-antena span::before {
    content: ""; position: absolute; top: -7px; left: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--oro);
}
.tv-caja {
    position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 26px;
    padding: 26px; border-radius: 34px; border: 3px solid var(--oro);
    background: radial-gradient(120% 90% at 20% 0%, #163b66 0%, var(--navy2) 35%, var(--navy) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -10px 22px rgba(0, 0, 0, .35), 0 30px 60px rgba(6, 23, 45, .35);
}
.tv-marco {
    padding: 18px; border-radius: 28px; background: linear-gradient(145deg, #1b1e24, #07080b);
    box-shadow: inset 0 0 0 2px rgba(215, 182, 93, .35), inset 0 6px 16px rgba(0, 0, 0, .8);
}
.tv-pantalla {
    position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 22px / 26px;
    background: #000; isolation: isolate;
}
.tv-pantalla > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.tv-pantalla:fullscreen { border-radius: 0; }
.tv-pantalla:fullscreen .tv-cristal { display: none; }
.tv-cristal {   /* reflejo del cristal y líneas de barrido (solo antes de emitir) */
    position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: radial-gradient(120% 80% at 25% 10%, rgba(255, 255, 255, .16), transparent 45%),
                repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .65);
}
.tv.emitiendo .tv-cristal { background: radial-gradient(120% 80% at 25% 10%, rgba(255, 255, 255, .06), transparent 40%); box-shadow: inset 0 0 26px rgba(0, 0, 0, .45); }

.tv-facade { position: absolute; inset: 0; display: block; z-index: 1; }
.tv-facade img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.05); }
.tv-play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.tv-play svg { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .55)); transition: transform .15s; }
.tv-facade:hover .tv-play svg, .tv-facade:focus-visible .tv-play svg { transform: scale(1.1); }
.tv-facade:focus-visible { outline: 3px solid var(--oro); outline-offset: -6px; }
.tv-osd {
    position: absolute; top: 6%; right: 6%; z-index: 4; pointer-events: none; font: 700 clamp(16px, 2.6vw, 28px)/1 "Courier New", monospace;
    color: #9dffb0; text-shadow: 0 0 8px rgba(110, 255, 150, .7), 2px 2px 0 rgba(0, 0, 0, .6); letter-spacing: .08em; transition: opacity .6s;
}
.tv-osd.apagado { opacity: 0; }

/* Interferencia al cambiar de canal */
.tv-ruido {
    position: absolute; inset: -20%; z-index: 5; pointer-events: none; opacity: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px, #777;
}
.tv.cambiando .tv-ruido { opacity: 1; animation: tv-nieve .12s steps(3) infinite; }
.tv.cambiando .tv-pantalla::after {   /* franja que rueda */
    content: ""; position: absolute; left: 0; right: 0; height: 22%; z-index: 6; pointer-events: none;
    background: linear-gradient(transparent, rgba(255, 255, 255, .35), transparent); animation: tv-franja .5s linear infinite;
}
@keyframes tv-nieve { 0% { transform: translate(0, 0); } 33% { transform: translate(-6%, 4%); } 66% { transform: translate(5%, -5%); } 100% { transform: translate(-3%, 6%); } }
@keyframes tv-franja { from { top: -25%; } to { top: 105%; } }

/* Carta de ajuste animada (sin episodios) */
.tv-carta { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: 72% 28%; animation: tv-temblor 6s infinite; }
.tv-barras, .tv-barras-bajas { display: grid; grid-template-columns: repeat(7, 1fr); }
.tv-barras i:nth-child(1) { background: #f4f1ea; } .tv-barras i:nth-child(2) { background: #d7b65d; }
.tv-barras i:nth-child(3) { background: #5fb3cf; } .tv-barras i:nth-child(4) { background: #15966f; }
.tv-barras i:nth-child(5) { background: #a64d86; } .tv-barras i:nth-child(6) { background: #c72632; }
.tv-barras i:nth-child(7) { background: #1672b8; }
.tv-barras-bajas i:nth-child(odd) { background: #06172d; } .tv-barras-bajas i:nth-child(even) { background: #10284b; }
.tv-barras-bajas i:nth-child(4) { background: #f4f1ea; }
.tv-circulo {
    position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
    display: grid; place-content: center; gap: 6px; text-align: center; border-radius: 50%;
    border: 4px solid #f4f1ea; background: rgba(6, 23, 45, .88); box-shadow: 0 0 0 6px rgba(6, 23, 45, .5);
}
.tv-circulo span { color: #d7b65d; font: 800 clamp(11px, 1.6vw, 16px)/1 "Courier New", monospace; letter-spacing: .3em; }
.tv-circulo strong { color: #f4f1ea; font: 800 clamp(13px, 2.6vw, 28px)/1 "Courier New", monospace; letter-spacing: .08em; animation: tv-parpadeo 1.6s steps(1) infinite; }
.tv-sin-senal .tv-pantalla::before {   /* barrido lento sobre la carta */
    content: ""; position: absolute; left: 0; right: 0; height: 30%; z-index: 2; pointer-events: none;
    background: linear-gradient(transparent, rgba(255, 255, 255, .12), transparent); animation: tv-franja 4s linear infinite;
}
@keyframes tv-parpadeo { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }
@keyframes tv-temblor { 0%, 92%, 100% { transform: none; } 93% { transform: translateX(-1.5%) skewX(-2deg); } 95% { transform: translateX(1%); } 97% { transform: translateY(1%); } }

/* Panel lateral: piloto, mandos y altavoz */
.tv-panel {
    display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 22px 16px; border-radius: 22px;
    background: linear-gradient(#f7f3ea, #e6dcc6); box-shadow: inset 0 2px 0 #fff, inset 0 -4px 10px rgba(6, 23, 45, .12);
}
.tv-piloto {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; border-radius: 8px;
    background: var(--navy); color: #8a96a6; font: 800 11px/1 Manrope, Arial, sans-serif; letter-spacing: .14em; white-space: nowrap;
}
.tv-piloto i { width: 11px; height: 11px; border-radius: 50%; background: #5a1a20; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.tv.emitiendo .tv-piloto { color: #fff; }
.tv.emitiendo .tv-piloto i { background: #ff3b47; box-shadow: 0 0 10px 2px rgba(255, 59, 71, .8); animation: tv-piloto 1.4s ease-in-out infinite; }
@keyframes tv-piloto { 50% { box-shadow: 0 0 4px 1px rgba(255, 59, 71, .5); } }
.tv-mandos { display: flex; gap: 18px; }
.tv-mando {
    --giro: 0deg; position: relative; width: 62px; height: 62px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f3e3ad, var(--oro) 45%, #8d7330 100%);
    box-shadow: 0 6px 12px rgba(6, 23, 45, .35), inset 0 -3px 6px rgba(0, 0, 0, .25);
    transform: rotate(var(--giro)); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.tv-mando::before {   /* estrías */
    content: ""; position: absolute; inset: 7px; border-radius: 50%;
    background: repeating-conic-gradient(rgba(0, 0, 0, .14) 0 6deg, transparent 6deg 18deg);
}
.tv-mando b { position: absolute; top: 6px; left: 50%; width: 5px; height: 20px; margin-left: -2.5px; border-radius: 3px; background: var(--rojo); }
.tv-mando-vol { --giro: 120deg; }
.tv-rejilla {
    flex: 1; width: 100%; min-height: 110px; border-radius: 12px;
    background: repeating-linear-gradient(var(--navy) 0 5px, transparent 5px 11px) content-box, rgba(6, 23, 45, .08);
    padding: 14px; box-shadow: inset 0 2px 6px rgba(6, 23, 45, .2);
}
.tv-completa {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--navy); color: #fff; font: 700 12px/1 Manrope, Arial, sans-serif; white-space: nowrap;
}
.tv-completa:hover, .tv-completa:focus-visible { background: var(--rojo); }
.tv-completa:focus-visible, .tv-facade:focus-visible { outline: 3px solid var(--oro); }
.tv::after {   /* sombra en el suelo */
    content: ""; display: block; height: 22px; margin: -6px 8% 0; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(6, 23, 45, .28), transparent);
}
.tv-patas { display: flex; justify-content: space-between; padding: 0 16%; height: 30px; }
.tv-patas span { width: 18px; height: 30px; background: linear-gradient(var(--navy), #000); transform: skewX(-12deg); border-radius: 0 0 6px 6px; }
.tv-patas span:last-child { transform: skewX(12deg); }

/* Ahora en emisión */
.tv-ahora { margin-top: 34px !important; text-align: center; }
.tv-ahora h2 { margin: 14px auto 8px; max-width: 760px; color: #07152d; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance; }
.tv-ahora-vacio h2 { font-size: clamp(2rem, 4vw, 3rem); }
.tv-ahora-vacio p { max-width: 560px; margin: 0 auto 10px; color: #4b5a6b; font-size: 1.08rem; line-height: 1.7; }
.tv-ahora-vacio .tv-ahora-sub { margin-top: 22px; font-weight: 700; color: #07152d; }
.tv-ahora-vacio .pc-suscribete { margin-top: 6px; }

/* Canales */
.pc-titulo-lista { margin-top: 60px !important; margin-bottom: 20px !important; color: #07152d; font-size: clamp(1.5rem, 3vw, 2rem); }
.pc-canales { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.pc-canal {
    display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; background: #fff; color: inherit;
    text-decoration: none; box-shadow: 0 10px 28px rgba(7, 21, 45, .10); border: 3px solid transparent; transition: transform .15s, border-color .15s;
}
.pc-canal:hover { transform: translateY(-3px); }
.pc-canal:focus-visible { outline: 3px solid #d7b65d; outline-offset: 2px; }
.pc-canal.activo { border-color: #c72632; }
.pc-canal-mini {
    position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%;
    background: #10284b center / cover no-repeat; background-image: linear-gradient(135deg, #06172d, #10284b);
}
.pc-canal-ch {
    position: absolute; top: 10px; left: 10px; padding: 5px 9px; border-radius: 6px; background: rgba(6, 23, 45, .88);
    color: #9dffb0; font: 700 14px/1 "Courier New", monospace; letter-spacing: .08em;
}
.pc-canal.activo .pc-canal-ch { background: #c72632; color: #fff; }
.pc-canal.activo .pc-canal-ch::after { content: " · EN EMISIÓN"; font-size: 11px; }
.pc-canal-texto { display: grid; gap: 6px; padding: 14px 16px 18px; }
.pc-canal-texto .pc-meta { font-size: 13px; }
.pc-canal-texto strong { color: #07152d; font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.pc-aviso { margin-top: 40px !important; text-align: center; color: #667487; font-size: 13px; line-height: 1.6; }
.pc-aviso a { color: #c72632; text-decoration: underline; }

/* ---------- Móvil: televisor simplificado, pantalla casi a todo el ancho ---------- */
@media (max-width: 760px) {
    .pc-estudio { padding: 34px 8px 60px; }
    .pc-estudio > .tv-ahora, .pc-estudio > .pc-titulo-lista, .pc-estudio > .pc-canales, .pc-estudio > .pc-aviso { width: calc(100% - 16px); }
    .tv { padding-top: 0; }
    .tv-antena, .tv-patas, .tv-rejilla, .tv-mando-vol { display: none; }
    .tv-caja { grid-template-columns: 1fr; gap: 8px; padding: 7px 7px 8px; border-radius: 20px; border-width: 2px; }
    .tv-marco { padding: 5px; border-radius: 15px; }
    .tv-pantalla { border-radius: 11px; }
    .tv-panel { flex-direction: row; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 13px; }
    .tv-mandos { gap: 8px; }
    .tv-mando { width: 30px; height: 30px; }
    .tv-mando::before { inset: 4px; }
    .tv-mando b { top: 3px; width: 3px; height: 10px; margin-left: -1.5px; }
    .tv-piloto { font-size: 10px; padding: 6px 8px; }
    .tv-completa { padding: 8px 10px; font-size: 12px; }
    .tv-ahora { margin-top: 24px !important; }
    .pc-canales { grid-template-columns: 1fr; gap: 12px; }
    .pc-canal { flex-direction: row; align-items: stretch; }
    .pc-canal-mini { flex: 0 0 42%; min-width: 0; aspect-ratio: auto; min-height: 92px; }
    .pc-canal-texto { flex: 1; min-width: 0; }
    .tv::after { display: none; }
    .pc-canal-ch { top: 6px; left: 6px; font-size: 12px; padding: 4px 6px; }
    .pc-canal.activo .pc-canal-ch::after { content: ""; }
    .pc-canal-texto { padding: 10px 12px; align-content: center; }
    .pc-canal-texto strong { font-size: .98rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tv-carta, .tv-circulo strong, .tv-sin-senal .tv-pantalla::before, .tv.emitiendo .tv-piloto i,
    .tv.cambiando .tv-ruido, .tv.cambiando .tv-pantalla::after { animation: none; }
    .tv-mando, .pc-canal, .pc-suscribete, .tv-play svg { transition: none; }
}
