/*
Theme Name: TVO 2026
Theme URI: http://www.tvosanvicente.cl
Description: Tema de uso exclusivo para TVO San Vicente. Versión optimizada de TVO 2022, con el mismo diseño.
Author: Gino Villanueva
Version: 1.15.3
*/

/* Tipografía Quicksand (SIL Open Font License 1.1; ver fuentes/OFL.txt).
   Archivo original del proyecto Quicksand, solo convertido a WOFF2: una sola
   fuente variable cubre todos los grosores (300 a 700). */
@font-face {
	font-family: 'Quicksand';
	src: url(fuentes/Quicksand-VariableFont_wght.woff2) format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

/* ============================================
   VARIABLES CSS
   ============================================ */
:root {
	/* --vw: ancho de la ventana SIN la barra de desplazamiento. Lo calcula un
	   script en header.php; si no está, se usa 100vw como antes. En celulares
	   es idéntico a 100vw. */
	--color-white: #FFFFFF;
	--color-black: #000000;
	--color-facebook: #3B5998;
	--color-facebook-hover: #0E2C6B;
	--color-twitter: #03A8F3;
	--color-twitter-hover: #007BC6;
	--color-instagram: #D93175;
	--color-instagram-hover: #AC0448;
	--color-alert: #CC0000;
	--color-alert-border: #990000;
	--color-info: #c9c9ff;
	--color-info-border: #020099;
	--color-link: #00588c;
	
	--bg-overlay-light: rgba(0, 0, 0, 0.3);
	--bg-overlay-medium: rgba(0, 0, 0, 0.4);
	--bg-overlay-dark: rgba(0, 0, 0, 0.6);
	--bg-overlay-darker: rgba(0, 0, 0, 0.7);
	--bg-overlay-darkest: rgba(0, 0, 0, 0.8);
	
	--font-primary: 'Quicksand', sans-serif;
	--font-secondary: 'Questrial', sans-serif;
	
	--transition-fast: 0.2s;
	--transition-medium: 0.5s;
	
	--border-radius-small: 30px;
	--border-radius-large: 40px;
	--border-radius-full: 60em;
}

/* ============================================
   ESTILOS BASE
   ============================================ */
body {
	margin: 0;
	background-color: var(--color-black);
}

.fondo {
	width: 100vw;
	height: 100%;
	background-image: url(img/bg_nubes.webp), url(img/bg_colores.jpg);
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, 100% 100%;
	position: fixed;
	z-index: -1;
	max-width: 100vw;
}

/* ============================================
   HEADER Y NAVEGACIÓN
   ============================================ */
.cabecera {
	width: 1410px;
	height: 170px;
	margin: 0 auto;
	display: table;
}

/* El enlace del logo se comporta como bloque: así la cabecera mide 170 px
   exactos, como en la portada original (sin esto, el navegador agrega 4 px
   de espacio bajo el logo). */
.cabecera > a {
	display: block;
}

.logo-cabecera {
	background-image: url(img/logo.png);
	width: 545px;
	height: 170px;
	background-repeat: no-repeat;
	background-position: left;
	display: table-cell;
}

.social {
	display: table-cell;
	text-align: right;
	vertical-align: middle;
}

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

.social a:visited {
	color: inherit;
}

.social-botones {
	display: block;
	text-align: right;
	vertical-align: middle;
	border-radius: var(--border-radius-small);
	line-height: 50px;
}

/* Salto de línea: las redes (Facebook, Instagram, YouTube, TikTok) van en
   una fila y los botones del sitio (Producciones, Señal en vivo, Escríbenos)
   en la de abajo. Así caben las 4 redes sin achicar el logo. */
.social-salto {
	/* Sin uso por defecto: la botonera va en una sola línea. Se activa solo
	   donde no cabe (ventanas de menos de 549 px). */
	display: none;
}

/* Botones sociales - Estilos base compartidos */
.social-productora,
.social-envivo,
.social-contacto {
	font-family: var(--font-primary);
	font-size: 23px;
	height: 40px;
	background-color: var(--bg-overlay-medium);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	margin-left: 9px;
	display: inline-block;
	position: relative;
	border-radius: var(--border-radius-small);
	text-align: center;
	vertical-align: middle;
	line-height: 40px;
	color: var(--color-white);
	padding-left: 42px;
	padding-right: 16px;
	transition: background-color var(--transition-fast);
}

.social-productora {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30'%3E%3Ccircle cx='15.51' cy='15.51' r='9.51' fill='red'/%3E%3C/svg%3E");
}

.social-envivo {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.18' stroke-linecap='round'%3E%3Cpath d='M8.1 22.53A11.28 11.28 0 1 1 23.25 22.53M11.44 19.32A6.66 6.66 0 1 1 19.91 19.32'/%3E%3Ccircle cx='15.67' cy='14.18' r='2.35'/%3E%3C/g%3E%3Cpath fill='%23fff' d='M14.66 19.75H16.64L19.27 27.92H12.04z'/%3E%3C/svg%3E");
}

.social-contacto {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30'%3E%3Cg fill='none' stroke='%23fff' stroke-linejoin='round'%3E%3Crect x='6.51' y='7.37' width='22.09' height='15.06' rx='1' stroke-width='2.66'/%3E%3Cpath stroke-width='2.19' d='M8.16 9.14L17.56 17.18L26.96 9.14'/%3E%3C/g%3E%3C/svg%3E");
}

/* Iconos sociales circulares */
.social-facebook,
.social-instagram,
.social-youtube,
.social-tiktok {
	font-family: var(--font-primary);
	font-size: 0;
	height: 40px;
	width: 41px;
	margin-left: 9px;
	line-height: 47px;
	position: relative;
	display: inline-block;
	border-radius: var(--border-radius-small);
	background-repeat: no-repeat;
	background-position: 0 0;
	color: var(--color-white);
	transition: background-color var(--transition-fast);
}

.social-facebook {
	background-image: url(img/icon-facebook.png);
	background-color: var(--color-facebook);
}

.social-instagram {
	background-image: url(img/icon-instagram.png);
	background-color: var(--color-instagram);
	width: 43px;
}

/* YouTube: ícono genérico de reproducir (img/icon-youtube.svg).
   TikTok: ícono oficial (img/icon-tiktok.png). */
.social-youtube {
	background-image: url(img/icon-youtube.svg);
	background-color: #FF0000;
}

.social-tiktok {
	/* Ícono oficial de TikTok (img/icon-tiktok.png, 23 × 26 px), centrado */
	background-image: url(img/icon-tiktok.png);
	background-color: #000;
	background-position: center;
	background-size: auto 22px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Hovers de botones sociales */
a:hover .social-envivo,
a:hover .social-contacto,
a:hover .social-productora {
	background-color: var(--bg-overlay-darker);
}

a:hover .social-facebook {
	background-color: var(--color-facebook-hover);
}

a:hover .social-youtube {
	background-color: #CC0000;
}

a:hover .social-tiktok {
	background-color: #333;
}

a:hover .social-instagram {
	background-color: var(--color-instagram-hover);
}

/* ============================================
   BOTONERA PARA COMPARTIR (notas)
   Mismo estilo de las píldoras de la cabecera.
   ============================================ */
.compartir {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
}

.compartir-btn {
	font-family: var(--font-primary);
	font-size: 23px;
	height: 40px;
	line-height: 40px;
	padding: 0 16px;
	border: 0;
	margin: 0;
	border-radius: var(--border-radius-small);
	color: var(--color-white);
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: filter var(--transition-fast);
}

.compartir-btn[hidden] {
	display: none;
}

.compartir-btn:visited,
.compartir-btn:hover {
	color: var(--color-white);
}

.compartir-btn:hover {
	filter: brightness(0.85);
}

.compartir-btn svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.compartir-whatsapp {
	background-color: #1DA851;
}

.compartir-facebook {
	background-color: var(--color-facebook);
}

.compartir-x {
	background-color: #000;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.compartir-copiar,
.compartir-mas {
	background-color: #555;
}

.compartir-botones {
	margin: 26px 0 20px;
	display: block;
}

.compartir-botones-nota {
	padding-top: 26px;
	display: block;
	margin-bottom: 20px;
}

/* ============================================
   SEPARADORES
   ============================================ */
.separador {
	width: 100%;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='10'%3E%3Ccircle cx='2.54' cy='5.51' r='2.48' fill='%23fff' fill-opacity='0.51'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: repeat-x;
}

.separador-intermedio {
	width: 1420px;
	height: 30px;
}

/* ============================================
   BUSCADOR
   ============================================ */
.buscador {
	margin-top: 25px;
	width: 1420px;
	margin-left: auto;
	margin-right: auto;
}

.buscador form {
	/* Espacio bajo el buscador que antes agregaba el navegador por su cuenta. */
	margin-bottom: 1em;
}

.buscador input {
	/* border-box: el ancho incluye el relleno y el borde, tal como se veía
	   en la portada. Sin esto, en las notas la barra medía 116 px más y
	   provocaba desplazamiento horizontal. */
	box-sizing: border-box;
	height: 75px;
	width: 1410px;
	border-radius: var(--border-radius-full);
	background: var(--bg-overlay-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='37'%3E%3Cg fill='none' stroke='%23fff'%3E%3Ccircle cx='15.31' cy='15.45' r='12.34' stroke-width='4.9'/%3E%3Cpath stroke-width='5.91' stroke-linecap='round' d='M24.08 24.14L33.15 33.14'/%3E%3C/g%3E%3C/svg%3E") no-repeat 25px;
	color: var(--color-white);
	font-family: var(--font-secondary);
	font-size: 30px;
	border: solid 3px var(--color-white);
	transition: background var(--transition-medium);
	padding-left: 80px;
	padding-right: 30px;
}

.buscador input:focus {
	background: var(--bg-overlay-darkest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='37'%3E%3Cg fill='none' stroke='%23fff'%3E%3Ccircle cx='15.31' cy='15.45' r='12.34' stroke-width='4.9'/%3E%3Cpath stroke-width='5.91' stroke-linecap='round' d='M24.08 24.14L33.15 33.14'/%3E%3C/g%3E%3C/svg%3E") no-repeat 25px;
}

.buscador input[type=submit],
.buscador label {
	display: none;
}

/* ============================================
   CONTROLES DE SLIDER
   Las flechas son SVG escritos dentro del CSS (data:image/svg+xml):
   se ven nítidas en cualquier pantalla y no generan descargas aparte.
   Reemplazan a hilite.png, a17.png y a08.png.
   ============================================ */
.jssora08l, .jssora08r {
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background-repeat: no-repeat;
	overflow: hidden;
	opacity: 0.4;
}

.jssora08l {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Crect width='50' height='50' fill-opacity='.8'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.82' stroke-linejoin='miter' d='M16.73 30.94L25.98 21.75L35.23 30.94'/%3E%3C/svg%3E");
}

.jssora08r {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Crect width='50' height='50' fill-opacity='.8'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.99' stroke-linejoin='miter' d='M17.15 20.56L26.02 29.14L34.89 20.56'/%3E%3C/svg%3E");
}

.jssora08l:hover,
.jssora08r:hover {
	opacity: 0.8;
}

.jssora08l.jssora08ldn,
.jssora08r.jssora08rdn {
	opacity: 0.3;
}

.jssora05l, .jssora05r {
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background-repeat: no-repeat;
	overflow: hidden;
}

.jssora05l {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.8'%3E%3Ccircle cx='20.13' cy='20.51' r='18.28' stroke-width='1.49'/%3E%3Cpath stroke-width='1.92' d='M27 21.05H12.5M19.5 14.88L13.2 21.05L19.5 27.22'/%3E%3C/g%3E%3C/svg%3E");
}

.jssora05r {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.8' transform='matrix(-1 0 0 1 40 0)'%3E%3Ccircle cx='19.12' cy='20.52' r='18.27' stroke-width='1.51'/%3E%3Cpath stroke-width='1.98' d='M28.29 21.02H11.71M18.36 14.95L12.41 21.02L18.36 27.1'/%3E%3C/g%3E%3C/svg%3E");
}

.jssora05l:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff'%3E%3Ccircle cx='20.13' cy='20.51' r='18.28' stroke-width='1.49'/%3E%3Cpath stroke-width='1.92' d='M27 21.05H12.5M19.5 14.88L13.2 21.05L19.5 27.22'/%3E%3C/g%3E%3C/svg%3E");
}

.jssora05r:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' transform='matrix(-1 0 0 1 40 0)'%3E%3Ccircle cx='19.12' cy='20.52' r='18.27' stroke-width='1.51'/%3E%3Cpath stroke-width='1.98' d='M28.29 21.02H11.71M18.36 14.95L12.41 21.02L18.36 27.1'/%3E%3C/g%3E%3C/svg%3E");
}

.jssora05l.jssora05ldn {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.4'%3E%3Ccircle cx='20.13' cy='20.51' r='18.28' stroke-width='1.49'/%3E%3Cpath stroke-width='1.92' d='M27 21.05H12.5M19.5 14.88L13.2 21.05L19.5 27.22'/%3E%3C/g%3E%3C/svg%3E");
}

.jssora05r.jssora05rdn {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.4' transform='matrix(-1 0 0 1 40 0)'%3E%3Ccircle cx='19.12' cy='20.52' r='18.27' stroke-width='1.51'/%3E%3Cpath stroke-width='1.98' d='M28.29 21.02H11.71M18.36 14.95L12.41 21.02L18.36 27.1'/%3E%3C/g%3E%3C/svg%3E");
}

.hilite-l, .hilite-r {
	display: block;
	position: absolute;
	width: 156px;
	height: 156px;
	cursor: pointer;
	background-repeat: no-repeat;
	overflow: hidden;
}

.hilite-l {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='156'%3E%3Cpath fill='%23fff' fill-opacity='0.68' fill-rule='evenodd' d='M78 0a78 78 0 1 0 0 156a78 78 0 1 0 0-156zM115 23V134.5L23.5 79z'/%3E%3C/svg%3E");
}

.hilite-r {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='156'%3E%3Cpath fill='%23fff' fill-opacity='0.68' fill-rule='evenodd' d='M78 0a78 78 0 1 0 0 156a78 78 0 1 0 0-156zM41 23V134.5L132.5 79z'/%3E%3C/svg%3E");
}

.hilite-l:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='156'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M78 0a78 78 0 1 0 0 156a78 78 0 1 0 0-156zM115 23V134.5L23.5 79z'/%3E%3C/svg%3E");
}

.hilite-r:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='156'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M78 0a78 78 0 1 0 0 156a78 78 0 1 0 0-156zM41 23V134.5L132.5 79z'/%3E%3C/svg%3E");
}

/* ============================================
   BARRA DE ADMINISTRACIÓN
   ============================================ */
.adminbar {
	font-family: var(--font-primary);
	font-size: 23px;
	width: 1340px;
	background-color: rgba(0, 0, 0, 0.5);
	color: var(--color-white);
	margin: 0 auto;
	border-radius: var(--border-radius-large);
	padding: 10px 35px;
	display: block;
	line-height: 1.5;
}

.adminbar input {
	font-family: var(--font-primary);
	font-size: 23px;
	background-color: rgba(0, 0, 0, 0.5);
	color: var(--color-white);
	border-radius: var(--border-radius-large);
	border: none;
	padding: 0 15px;
	width: 150px;
	line-height: 1;
	height: 26px;
}

.adminbutton {
	font-family: var(--font-primary);
	font-size: 23px;
	background-color: rgba(0, 0, 0, 0.5);
	color: var(--color-white);
	border-radius: var(--border-radius-large);
	padding: 0 15px;
	text-decoration: none;
	display: inline-block;
	line-height: 1.15;
	height: 25px;
	transition: background-color var(--transition-fast);
}

a:hover .adminbutton {
	background-color: var(--color-white);
	color: var(--color-black);
}

/* ============================================
   CONTENIDO PRINCIPAL
   ============================================ */
.display-full {
	display: block;
	width: 1340px;
	background-color: var(--bg-overlay-darker);
	padding: 21vh 40px;
	margin: 30px auto 0;
	color: var(--color-white);
	text-align: center;
	vertical-align: middle;
}

.display-full-titulo {
	font-family: var(--font-primary);
	font-size: 50px;
}

.display-full-descripcion {
	font-family: var(--font-primary);
	font-size: 25px;
}

audio.wp-audio-shortcode {
	max-width: 100%;
	width: inherit;
}

/* ============================================
   VIDEOS Y CONTENIDO MULTIMEDIA
   ============================================ */
.archivos {
	margin: 30px auto 0;
	width: 1420px;
	color: var(--color-white);
}

.video-titulo {
	font-family: var(--font-primary);
	margin: 30px auto 0;
	color: var(--color-white);
	font-size: 50px;
	width: 1420px;
	line-height: 45px;
}

.video-filler {
	background-color: var(--bg-overlay-medium);
	width: 100%;
	height: 799px;
}

.video-descripcion {
	font-family: var(--font-primary);
	font-size: 20px;
	color: var(--color-white);
	text-align: justify;
	width: 1420px;
	margin: 0 auto;
	min-height: 380px;
}

.video {
	margin: 30px auto;
	width: 1420px;
	height: 799px;
	background-color: var(--color-black);
}

/* Gradiente para overlay de videos */
.noticias-video {
	background: linear-gradient(to bottom, 
		rgba(0,0,0,0) 0%, 
		rgba(0,0,0,0) 31%, 
		rgba(0,0,0,0.93) 83%, 
		rgba(0,0,0,0.93) 100%);
	height: 400px;
	width: 100%;
	transition: all var(--transition-fast);
}

.programa-video,
.fotonota-titulo {
	background: linear-gradient(to bottom, 
		rgba(0,0,0,0) 0%, 
		rgba(0,0,0,0) 31%, 
		rgba(0,0,0,0.93) 83%, 
		rgba(0,0,0,0.93) 100%);
	height: 100%;
	width: 100%;
	transition: all var(--transition-fast);
}

.programa-video {
	height: 200px;
}

.destacado-video {
	background: linear-gradient(to bottom, 
		rgba(0,0,0,0) 0%, 
		rgba(0,0,0,0) 31%, 
		rgba(0,0,0,0.93) 83%, 
		rgba(0,0,0,0.93) 100%);
	height: 799px;
	width: 100%;
	transition: all var(--transition-fast);
}

a:hover .noticias-video,
a:hover .programa-video,
a:hover .destacado-video,
a:hover .destacado-full {
	background-color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   NOTAS Y ARTÍCULOS
   ============================================ */
/* flow-root: el recuadro de la nota contiene siempre a la promoción lateral
   (antes, en notas cortas, la promoción podía asomarse bajo el recuadro;
   quedaba tapada por los comentarios de Facebook, que ya no existen). */
.nota-contenido,
.video-descripcion {
	display: flow-root;
}

.nota-contenido {
	font-family: var(--font-primary);
	font-size: 20px;
	color: var(--color-black);
	background-color: var(--color-white);
	text-align: justify;
	width: 1340px;
	margin: 0 auto;
	padding: 0 40px 40px;
	min-height: 380px;
}

/* Foto de nota */
.fotonota {
	margin: 30px auto 0;
	width: 1420px;
	height: 799px;
	background-color: var(--color-white);
	position: relative;
}

.fotonota-titulo-texto {
	font-family: var(--font-primary);
	font-size: 70px;
	line-height: 50px;
	color: var(--color-white);
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	margin: 40px;
	bottom: 0;
	width: 1340px;
	position: absolute;
}

.fotonota-titulo-fecha {
	font-family: var(--font-primary);
	font-size: 30px;
	font-weight: bold;
	color: var(--color-white);
	line-height: 55px;
}

/* ============================================
   CAJAS DE ALERTA E INFORMACIÓN
   ============================================ */
.endesarrollo,
.atencion {
	font-family: var(--font-primary);
	background-color: var(--color-alert);
	background-repeat: no-repeat;
	background-position: 8px 8px;
	font-size: 20px;
	color: var(--color-white);
	padding: 10px 18px 10px 48px;
	border: 2px solid var(--color-alert-border);
	display: flex;
	line-height: 26px;
	cursor: default;
	text-align: justify;
}

.endesarrollo {
	background-image: url(img/icon_endesarrollo.png);
}

.atencion {
	background-image: url(img/icon_alerta.png);
}

.relacionado {
	font-family: var(--font-primary);
	background-color: var(--color-info);
	background-image: url(img/icon_ampolleta.png);
	background-repeat: no-repeat;
	background-position: 8px 8px;
	font-size: 20px;
	color: var(--color-black);
	padding: 10px 18px 10px 48px;
	border: 2px solid var(--color-info-border);
	display: flow-root;
	line-height: 26px;
	cursor: default;
}

.header-relacionado p {
	margin: 0 0 5px;
}

.link-relacionado p {
	margin: 0;
}

.link-relacionado a {
	text-decoration: none;
	color: var(--color-link);
	line-height: 18px;
}

/* ============================================
   PROMOCIONES
   ============================================ */
.promos-unico,
.promos-1 {
	margin: 0 auto;
	width: 1420px;
	height: 120px;
}

.promo-imagen-1 {
	visibility: visible;
}

.promo-imagen-2 {
	visibility: hidden;
	height: 0;
}

.promos-2 {
	visibility: hidden;
	height: 0;
	/* display:none + loading="lazy": el navegador no descarga la imagen
	   de celular en escritorio (antes se bajaban ambas). */
	display: none;
}

.promo-box {
	padding: 7px;
	border: 1px solid gray;
	max-height: 300px;
	/* Respeta el alto máximo: una imagen más alta ya no se sale del recuadro. */
	overflow: hidden;
	max-width: 300px;
	margin: 0 0 20px 20px;
	display: block;
	float: right;
	width: 50%;
}

/* ============================================
   NOTICIAS
   ============================================ */
.noticias {
	width: 1420px;
	height: 400px;
	margin: 30px auto 0;
	display: block;
}

.noticias-destacado {
	width: 800px;
	height: 400px;
	background: var(--bg-overlay-dark);
	position: absolute;
	margin-left: 0;
	display: block;
}

.noticias-destacado-titular {
	font-family: var(--font-primary);
	font-size: 47px;
	color: var(--color-white);
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	margin: 15px;
	line-height: 35px;
	position: inherit;
	bottom: 0;
	display: block;
}

.noticias-destacado-fecha {
	font-family: var(--font-primary);
	font-size: 25px;
	color: var(--color-white);
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	font-weight: bold;
	line-height: 30px;
	display: block;
}

/* Lista de noticias */
.noticias-lista {
	width: 600px;
	height: 400px;
	margin-left: auto;
	margin-right: 0;
	right: 0;
}

.noticias-lista-bloque {
	width: 600px;
	height: 90px;
	display: table;
}

.noticias-lista-bloque-imagen {
	height: 90px;
	width: 90px;
}

a:hover .noticias-lista-bloque-imagen {
	background-color: rgba(255, 255, 255, 0.2);
}

.noticias-lista-bloque-texto {
	font-family: var(--font-primary);
	font-size: 23px;
	color: var(--color-white);
	display: table-cell;
	text-align: left;
	margin-right: auto;
	vertical-align: middle;
	padding-left: 15px;
	line-height: 19px;
	width: 100%;
}

.noticias-lista-bloque-texto a {
	font-family: var(--font-primary);
	font-size: 23px;
	color: var(--color-white);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	margin-right: auto;
	vertical-align: middle;
	padding-left: 15px;
	line-height: 19px;
	text-decoration: none;
}

.noticias-lista-bloque-fecha {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: bold;
	color: var(--color-white);
	line-height: 22px;
}

.noticias-lista-bloque-fecha a {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: bold;
	color: var(--color-white);
	line-height: 22px;
	text-decoration: none;
}

.noticias-lista-bloque-cliqueable {
	height: 100%;
	width: 100%;
	transition: all var(--transition-fast);
}

a:hover .noticias-lista-bloque-cliqueable {
	background-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   NOTICIAS ZONALES
   ============================================ */
.noticias-zonales {
	width: 1420px;
	margin: 30px auto 0;
	display: flex;
	justify-content: space-between;
	gap: 15px;
}

.noticias-zonales .noticias-zonales-columna {
	width: 460px;
	flex: 0 0 460px;
}

.noticias-zonales-titulo {
	font-family: var(--font-primary);
	font-size: 28px;
	color: var(--color-white);
	font-weight: normal;
	margin-bottom: 10px;
	text-align: left;
}

.noticias-zonales-lista {
	width: 100%;
}

.noticias-zonales-lista .noticias-lista-bloque {
	width: 100%;
	height: 90px;
	display: table;
	margin-bottom: 10px;
}

.noticias-zonales-lista .noticias-lista-bloque-texto {
	font-size: 18px;
	color: var(--color-white);
	display: table-cell;
	text-align: left;
	margin-right: auto;
	vertical-align: middle;
	padding-left: 10px;
	line-height: 16px;
	width: calc(100% - 90px);
}

.noticias-zonales-lista .noticias-lista-bloque-texto a {
	font-size: 18px;
	color: var(--color-white);
	text-decoration: none;
	line-height: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

.noticias-zonales-lista .noticias-lista-bloque-fecha {
	font-size: 13px;
	font-weight: bold;
	color: var(--color-white);
	line-height: 18px;
}

.noticias-zonales-lista .noticias-lista-bloque-fecha a {
	font-size: 13px;
	font-weight: bold;
	color: var(--color-white);
	line-height: 18px;
	text-decoration: none;
}

.noticias-zonales-lista .noticias-lista-bloque:last-child {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.noticias-zonales-lista .noticias-lista-bloque:last-child .noticias-lista-bloque-imagen {
	flex-shrink: 0;
	width: 90px;
	height: 90px;
}

.noticias-zonales-lista .noticias-lista-bloque:last-child .noticias-lista-bloque-texto {
	flex-grow: 1;
	display: block;
	padding-left: 10px;
	text-align: left;
}

.noticias-zonales-lista .noticias-lista-bloque:last-child .noticias-lista-bloque-texto a {
	display: block;
	text-align: left;
}

.movil-listado-zonales {
	display: none;
}

/* Tablet Grande - 1485px */
@media only screen and (max-width: 1485px) {
	/* ... resto del código sin cambios ... */
	
	/* Noticias zonales responsive */
	.noticias-zonales {
		width: 900px;
		gap: 10px;
	}
	
	.noticias-zonales .noticias-zonales-columna {
		width: 290px;
		flex: 0 0 290px;
	}
	
	.noticias-zonales-titulo {
		font-size: 20px;
	}
	
	.noticias-zonales-lista .noticias-lista-bloque {
		margin-bottom: 10px;
	}
	
	.noticias-zonales-lista .noticias-lista-bloque-texto {
		font-size: 14px;
		line-height: 12px;
		padding-left: 8px;
	}
	
	.noticias-zonales-lista .noticias-lista-bloque-texto a {
		font-size: 14px;
		line-height: 12px;
		-webkit-line-clamp: 4;
	}
	
	.noticias-zonales-lista .noticias-lista-bloque-fecha,
	.noticias-zonales-lista .noticias-lista-bloque-fecha a {
		font-size: 11px;
		line-height: 14px;
	}
}

/* ============================================
   PROGRAMAS
   ============================================ */
.programa-1 {
	width: 1420px;
	margin: 30px auto 0;
}

.programa-2 {
	width: 900px;
	margin: 30px auto 0;
	display: none;
}

.programa-titulo {
	font-family: var(--font-primary);
	font-size: 44px;
	color: var(--color-white);
	cursor: default;
	margin-bottom: 10px;
	width: 1420px;
}

.programa-corredor-1,
.programa-corredor-2 {
	height: 200px;
}

.programa-corredor-1 {
	width: 1420px;
}

.programa-corredor-2 {
	width: 900px;
}

.programa-corredor-contenedor-1,
.programa-corredor-contenedor-2 {
	position: relative;
	height: 200px;
	overflow: hidden;
	margin: 0 auto;
}

.programa-corredor-contenedor-1 {
	width: 1420px;
}

.programa-corredor-contenedor-2 {
	width: 900px;
}

.programa-video-titulo {
	font-family: var(--font-primary);
	font-size: 20px;
	line-height: 16px;
	color: var(--color-white);
	position: absolute;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	margin: 0 15px 15px;
	width: 220px;
	bottom: 0;
}

.programa-video-fecha {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: bold;
	color: var(--color-white);
	line-height: 18px;
}

.destacado-video-titulo {
	font-family: var(--font-primary);
	font-size: 70px;
	line-height: 50px;
	color: var(--color-white);
	position: absolute;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	margin: 0 40px 40px;
	width: 1340px;
	bottom: 0;
}

.destacado-video-fecha {
	font-family: var(--font-primary);
	font-size: 34px;
	font-weight: bold;
	color: var(--color-white);
	line-height: 50px;
}

.programa-vermas {
	background: var(--bg-overlay-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.84'%3E%3Ccircle cx='49.97' cy='49.97' r='49.03' stroke-width='2.28'/%3E%3Cpath stroke-width='1.77' d='M50.2 26.99V75.78M24.86 51.35H73.91'/%3E%3C/g%3E%3C/svg%3E") no-repeat 75px 36px;
	background-size: 100px 100px;
	height: 200px;
	transition: background-image var(--transition-medium);
}

.programa-vermas-titulo {
	font-family: var(--font-primary);
	font-size: 20px;
	color: var(--color-white);
	position: absolute;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	margin: 0 15px 25px;
	width: 220px;
	bottom: 0;
}

a:hover .programa-vermas {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath fill='%23fff' fill-opacity='.84' fill-rule='evenodd' d='M49.98 2.15a47.84 47.84 0 1 0 0 95.68a47.84 47.84 0 1 0 0 -95.68zM49.77 27.15H51.51V50.83H74.39V52.57H51.51V75.98H49.77V52.57H24.55V50.83H49.77z'/%3E%3C/svg%3E");
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 88%, rgba(0,0,0,1) 100%);
	width: 100%;
	height: 100px;
}

.footer-text {
	font-family: var(--font-primary);
	color: var(--color-white);
	position: absolute;
	right: 130px;
	text-align: right;
	line-height: 14px;
	font-size: 14px;
	margin-top: 20px;
}

.footer-logo {
	display: block;
	position: relative;
	background-image: url(img/logomini.png);
	background-position: center;
	background-repeat: no-repeat;
	width: 95px;
	height: 40px;
	right: 20px;
	margin-left: auto;
	top: 30px;
}

/* ============================================
   CORREDORES Y SLIDERS
   ============================================ */
.corredor-destacado {
	position: relative;
	margin: 0 auto;
	top: 0;
	left: 0;
	width: 1420px;
	height: 799px;
}

.corredor-programa-1,
.corredor-programa-2 {
	position: relative;
	margin: 0 auto;
	top: 0;
	left: 0;
	height: 200px;
}

.corredor-programa-1 {
	width: 1420px;
}

.corredor-programa-2 {
	width: 900px;
}

.corredor-noticias-1,
.corredor-noticias-2 {
	position: relative;
	margin: 0 auto;
	top: 0;
	left: 0;
	height: 400px;
}

.corredor-noticias-1 {
	width: 600px;
}

.corredor-noticias-2 {
	width: 378px;
	display: none;
}

.slaid-1,
.slaid-2 {
	position: absolute;
	left: 0;
	top: 0;
	height: 200px;
	overflow: hidden;
	margin-left: 65px;
}

.slaid-1 {
	width: 1290px;
}

.slaid-2 {
	width: 770px;
}

.slaid2-1,
.slaid2-2 {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	overflow: hidden;
	margin-top: 50px;
}

.slaid2-1 {
	width: 600px;
}

.slaid2-2 {
	width: 378px;
}

.destacado {
	position: absolute;
	left: 0;
	top: 0;
	width: 1420px;
	height: 799px;
	overflow: hidden;
}

.destacado-full {
	height: 799px;
	transition: all var(--transition-fast);
}

.parche {
	position: relative;
	left: 50%;
	width: 5000px;
	text-align: center;
	margin-left: -2500px;
}

/* ============================================
   NAVEGACIÓN DE PÁGINAS
   ============================================ */
.navegacion {
	display: table;
	margin: 30px auto 0;
	width: 1420px;
	height: 40px;
}

.nav-left,
.nav-right {
	display: table-cell;
	vertical-align: middle;
	width: 40px;
	height: 40px;
}

.nav-left-boton a,
.nav-right-boton a {
	font-size: 0;
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background-repeat: no-repeat;
}

.nav-left-boton a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.8'%3E%3Ccircle cx='20.13' cy='20.51' r='18.28' stroke-width='1.49'/%3E%3Cpath stroke-width='1.92' d='M27 21.05H12.5M19.5 14.88L13.2 21.05L19.5 27.22'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-left-boton a:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff'%3E%3Ccircle cx='20.13' cy='20.51' r='18.28' stroke-width='1.49'/%3E%3Cpath stroke-width='1.92' d='M27 21.05H12.5M19.5 14.88L13.2 21.05L19.5 27.22'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-left-boton a:active {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.4'%3E%3Ccircle cx='20.13' cy='20.51' r='18.28' stroke-width='1.49'/%3E%3Cpath stroke-width='1.92' d='M27 21.05H12.5M19.5 14.88L13.2 21.05L19.5 27.22'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-right-boton a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.8' transform='matrix(-1 0 0 1 40 0)'%3E%3Ccircle cx='19.12' cy='20.52' r='18.27' stroke-width='1.51'/%3E%3Cpath stroke-width='1.98' d='M28.29 21.02H11.71M18.36 14.95L12.41 21.02L18.36 27.1'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-right-boton a:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' transform='matrix(-1 0 0 1 40 0)'%3E%3Ccircle cx='19.12' cy='20.52' r='18.27' stroke-width='1.51'/%3E%3Cpath stroke-width='1.98' d='M28.29 21.02H11.71M18.36 14.95L12.41 21.02L18.36 27.1'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-right-boton a:active {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.4' transform='matrix(-1 0 0 1 40 0)'%3E%3Ccircle cx='19.12' cy='20.52' r='18.27' stroke-width='1.51'/%3E%3Cpath stroke-width='1.98' d='M28.29 21.02H11.71M18.36 14.95L12.41 21.02L18.36 27.1'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-page {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.nav-page-texto {
	font-family: var(--font-primary);
	font-size: 25px;
	color: var(--color-white);
}

/* ============================================
   BLOQUES DE VIDEOS
   ============================================ */
.bloque-videos {
	max-width: 1300px;
	display: block;
	overflow: hidden;
	margin: 30px auto 0;
}

/* ============================================
   VERSIÓN MÓVIL
   ============================================ */
.movil-listado {
	margin-top: 10px;
	display: none;
}

.movil-titulos {
	font-family: var(--font-primary);
	font-size: 44px;
	color: var(--color-white);
	cursor: default;
	margin: 0 auto 10px;
	width: calc(var(--vw, 100vw) - 60px);
}

.movil-video-comun {
	width: 100%;
	height: 90px;
	display: table;
	margin: 0 auto 10px;
}

.movil-video-comun-imagen {
	height: 90px;
	width: 90px;
}

a:hover .movil-video-comun-imagen {
	background-color: rgba(255, 255, 255, 0.2);
}

.movil-video-comun-texto {
	font-family: var(--font-primary);
	font-size: 23px;
	color: var(--color-white);
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	padding-left: 15px;
	line-height: 19px;
	margin-right: auto;
	margin-left: 0;
	width: calc(var(--vw, 100vw) - 150px);
}

.movil-video-comun-texto a {
	font-family: var(--font-primary);
	font-size: 23px;
	color: var(--color-white);
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	padding-left: 15px;
	line-height: 19px;
	margin-right: auto;
	margin-left: 0;
	width: calc(var(--vw, 100vw) - 150px);
	text-decoration: none;
}

.movil-video-comun-fecha {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: bold;
	color: var(--color-white);
	line-height: 22px;
}

.movil-video-comun-fecha a {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: bold;
	color: var(--color-white);
	line-height: 22px;
	text-decoration: none;
}

.movil-video-comun-cliqueable {
	height: 100%;
	width: 100%;
	transition: all var(--transition-fast);
}

a:hover .movil-video-comun-cliqueable {
	background-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   MEDIA QUERIES - RESPONSIVE
   ============================================ */

/* Tablet Grande - 1485px */
@media only screen and (max-width: 1485px) {
	.archivos,
	.video-titulo,
	.video-descripcion,
	.video,
	.fotonota,
	.promos-unico,
	.separador-intermedio,
	.promos-1,
	.noticias,
	.programa-corredor,
	.cabecera,
	.buscador,
	.navegacion {
		width: 900px;
	}
	
	.adminbar,
	.display-full,
	.nota-contenido {
		width: 820px;
	}
	
	.programa-titulo {
		width: 900px;
	}
	
	.video-filler,
	.video {
		height: 506px;
	}
	
	.fotonota {
		height: 506px;
	}
	
	.fotonota-titulo-texto {
		font-size: 46px;
		line-height: 32px;
		width: 820px;
	}
	
	.fotonota-titulo-fecha {
		font-size: 26px;
		line-height: 47px;
	}
	
	.promos-unico,
	.promos-1 {
		height: 76px;
	}
	
	.noticias-destacado {
		width: 506px;
	}
	
	.corredor-noticias-1 {
		display: none;
	}
	
	.corredor-noticias-2 {
		display: inherit;
	}
	
	.noticias-lista {
		width: 378px;
	}
	
	.noticias-lista-bloque {
		width: 378px;
	}
	
	.noticias-lista-bloque-texto,
	.noticias-lista-bloque-texto a {
		font-size: 20px;
		line-height: 17px;
	}
	
	.noticias-lista-bloque-texto a {
		-webkit-line-clamp: 4;
	}
	
	.noticias-lista-bloque-fecha,
	.noticias-lista-bloque-fecha a {
		font-size: 14px;
		line-height: 22px;
	}
	
	.noticias-destacado-titular {
		width: 476px;
		font-size: 35px;
		line-height: 26px;
	}
	
	.programa-1 {
		display: none;
	}
	
	.programa-2 {
		display: inherit;
	}
	
	.programa-corredor-contenedor {
		width: 900px;
	}
	
	.corredor-programa-2 {
		height: 200px;
	}
	
	.logo-cabecera {
		width: 895px;
	}

	/* Una sola línea: en este ancho "En vivo" también queda solo con su ícono
	   (como Producciones y Escríbenos); el ancho mínimo evita que se achique
	   el logo. */
	.social-botones {
		min-width: 320px;
		white-space: nowrap;
	}

	/* Íconos un poco más juntos para que la botonera no toque el logo */
	.social-facebook,
	.social-instagram,
	.social-youtube,
	.social-tiktok {
		margin-left: 4px;
	}

	.social-envivo {
		font-size: 0;
		margin-left: 3px;
		padding-left: 25px;
		padding-right: 16px;
	}
	
	.social-contacto,
	.social-productora {
		font-size: 0;
		margin-left: 3px;
		padding-left: 16px;
		padding-right: 24px;
	}
	
	.social-contacto {
		padding-left: 29px;
		padding-right: 16px;
	}
	
	.buscador input {
		width: 890px;
	}
	
	.bloque-videos {
		width: 780px;
	}
	
	/* Noticias zonales responsive */
	.noticias-zonales {
		width: 900px;
	}
	
	.noticias-zonales-columna {
		width: 218px;
	}
	
	.noticias-zonales-titulo {
		font-size: 20px;
	}
	
	.noticias-zonales-lista .noticias-lista-bloque {
		margin-bottom: 10px;
	}
	
	.noticias-zonales-lista .noticias-lista-bloque-texto {
		font-size: 12px;
		line-height: 11px;
		padding-left: 6px;
	}
	
	.noticias-zonales-lista .noticias-lista-bloque-texto a {
		font-size: 12px;
		line-height: 11px;
		-webkit-line-clamp: 5;
	}
	
	.noticias-zonales-lista .noticias-lista-bloque-fecha,
	.noticias-zonales-lista .noticias-lista-bloque-fecha a {
		font-size: 10px;
		line-height: 13px;
	}
}

/* Tablet - 970px */
@media only screen and (max-width: 970px) {
	.social-botones {
		min-width: 0;
	}

	.noticias,
	.noticias-zonales {
		display: none;
	}
	
	.movil-listado,
	.movil-listado-zonales {
		margin-top: 30px;
		display: inherit;
	}
	
	.movil-listado {
		margin-top: 10px;
	}
	
	.video-titulo,
	.video-descripcion,
	.cabecera,
	.buscador,
	.navegacion {
		width: calc(var(--vw, 100vw) - 60px);
	}
	
	.video-descripcion {
		font-size: 17px;
	}
	
	.nota-contenido {
		width: calc(100% - 80px);
		font-size: 17px;
	}
	
	.fotonota-titulo-texto {
		width: calc(100% - 40px);
		margin: 20px;
	}
	
	.programa-1,
	.programa-2 {
		display: none;
		max-width: 0;
	}
	
	.programa-corredor-2,
	.programa-corredor-contenedor-2 {
		width: 0;
	}
	
	.programa-corredor-contenedor-2 {
		height: 0;
	}
	
	.corredor-noticias-2 {
		display: none;
	}
	
	.adminbar {
		width: calc(var(--vw, 100vw) - 150px);
	}
	
	.buscador input {
		width: calc(var(--vw, 100vw) - 75px);
	}
	
	.movil-video-comun {
		width: calc(var(--vw, 100vw) - 60px);
	}
}

/* Móvil - 970px (antes 960px) */
@media only screen and (max-width: 970px) {
	.video,
	.fotonota,
	.video-filler {
		width: 100%;
		height: calc(var(--vw, 100vw) / 16 * 9);
	}
	
	.promos-unico {
		width: 100%;
		height: calc(var(--vw, 100vw) / 71 * 6);
	}
	
	.separador-intermedio {
		width: 100%;
		height: 12px;
	}
	
	.promos-1,
	.promo-imagen-1 {
		display: none;
		height: 0;
	}
	
	.promos-2,
	.promo-imagen-2 {
		visibility: visible;
		height: inherit;
	}
	
	.promos-2 {
		display: block;
		width: 100%;
		height: calc(var(--vw, 100vw) / 8 * 1);
	}
	
	.display-full {
		width: calc(100% - 80px);
	}
	
	.archivos {
		width: calc(var(--vw, 100vw) - 80px);
	}
	
	.bloque-videos {
		visibility: hidden;
		height: 0;
		width: 0;
		margin-top: 10px;
	}
}

/* Móvil - 970px (antes 957px) */
@media only screen and (max-width: 970px) {
	.logo-cabecera {
		background-image: url(img/logoclean.png);
		width: 191px;
		height: 170px;
	}
	
	.social-botones {
		line-height: 60px;
	}
}

/* Móvil - 800px */
@media only screen and (max-width: 800px) {
	.video-titulo {
		font-size: 40px;
		line-height: 30px;
	}
}

/* Móvil - 750px */
@media only screen and (max-width: 750px) {
	.logo-cabecera {
		width: 221px;
	}
	
	.social-botones {
		max-width: 500px;
	}
	/* (Desde la 1.13.0 "En vivo" y "Escríbenos" quedan solo con su ícono
	   también aquí, igual que desde 700 px: así caben en una línea.) */
}

/* Móvil - 750px y 700px: "En vivo" y "Escríbenos" solo con ícono */
@media only screen and (max-width: 750px) {
	.social-envivo,
	.social-contacto {
		font-size: 0;
		margin-left: 3px;
		padding-right: 16px;
	}

	.social-envivo {
		padding-left: 25px;
	}

	.social-contacto {
		padding-left: 29px;
	}
}

/* Móvil - 700px */
@media only screen and (max-width: 700px) {
	.logo-cabecera {
		width: 171px;
	}
	
	.social-envivo,
	.social-contacto {
		font-size: 0;
		margin-left: 3px;
		padding-right: 16px;
	}
	
	.social-envivo {
		padding-left: 25px;
	}
	
	.social-contacto {
		padding-left: 29px;
	}
	
	.buscador input {
		height: 60px;
		width: calc(var(--vw, 100vw) - 75px);
		background-position: 10px;
		background-size: 30px;
		padding-left: 55px;
		padding-right: 55px;
	}
	
	.buscador input:focus {
		background-position: 10px;
		background-size: 30px;
	}
}

/* Móvil - 650px */
@media only screen and (max-width: 650px) {
	.video-titulo {
		font-size: 35px;
		line-height: 30px;
	}
	
	.fotonota-titulo-texto {
		font-size: 32px;
		line-height: 24px;
	}
	
	.fotonota-titulo-fecha {
		font-size: 25px;
		line-height: 42px;
	}
}

/* Menos de 600 px: ya no caben las 7 en una línea; redes arriba, sitio abajo */
@media only screen and (max-width: 599px) {
	.social-salto {
		display: block;
		height: 0;
	}
}

/* Móvil Pequeño - 548px */
@media only screen and (max-width: 548px) {
	.social-botones {
		max-width: 200px;
		line-height: 51px;
	}
}

/* ============================================
   TÍTULOS H1 (SEO)
   Los títulos de las notas ahora están dentro de un <h1> para que
   Google los reconozca como título. Esta regla hace que el <h1> se vea
   exactamente igual que el texto que había antes (hereda todo del
   contenedor). :where() tiene especificidad cero, así que no interfiere
   con ninguna otra regla.
   ============================================ */
:where(h1.tvo-h1) {
	display: inline;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}


/* ============================================
   MINIATURAS: capa de imagen propia
   La imagen (.tvo-fondo) va dentro de un marco (.tvo-marco) que la recorta,
   detrás del texto. Así puede crecer al pasar el mouse sin mover el texto.
   ============================================ */
.tvo-mini {
	position: relative;
	isolation: isolate;
}

.tvo-marco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}

.tvo-fondo {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}


/* ============================================
   EFECTOS (v1.7.0)
   Todo el movimiento está dentro de "prefers-reduced-motion: no-preference":
   quien activó "reducir movimiento" en su sistema ve el sitio sin animaciones.
   Solo se animan transform y opacity (no traban el scroll).
   ============================================ */
@media (prefers-reduced-motion: no-preference) {

	/* --- Transición entre páginas (Chrome, Edge, Safari) --- */
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.35s;
	}

	/* --- Aparición de secciones al hacer scroll (js/efectos.js) --- */
	.tvo-revelar {
		opacity: 0;
		transform: translateY(30px);
	}

	.tvo-revelar.tvo-visto {
		opacity: 1;
		transform: none;
		transition: opacity 0.6s ease, transform 0.6s ease;
		transition-delay: var(--tvo-retraso, 0s);
	}

	/* --- Zoom en miniaturas (solo con mouse) --- */
	.tvo-fondo {
		transition: transform 0.6s ease, filter 0.6s ease;
	}

	.tvo-cargando {
		opacity: 0;
	}

	.tvo-listo {
		opacity: 1;
		transition: opacity 0.4s ease, transform 0.6s ease, filter 0.6s ease;
	}

	/* Destello mientras carga una imagen diferida */
	.tvo-marco.tvo-brillo::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
		animation: tvo-brillo 1.4s ease-in-out infinite;
	}

	@keyframes tvo-brillo {
		to { transform: translateX(200%); }
	}

	/* --- Punto "en vivo" pulsante --- */
	.social-productora,
	.social-envivo {
		position: relative;
	}

	.social-productora::after,
	.social-envivo::after {
		content: '';
		position: absolute;
		border-radius: 50%;
		pointer-events: none;
		animation: tvo-latido 2s ease-out infinite;
	}

	.social-productora::after {
		left: 11px;
		top: 11px;
		width: 19px;
		height: 19px;
		box-shadow: 0 0 0 2px #FF0000;
	}

	.social-envivo::after {
		left: 13.7px;
		top: 12.2px;
		width: 14px;
		height: 14px;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
		animation-delay: 1s;
	}

	@keyframes tvo-latido {
		0%   { transform: scale(0.7); opacity: 0.9; }
		100% { transform: scale(2.1); opacity: 0; }
	}

	/* --- Destacado: acercamiento lento (Ken Burns) --- */
	.tvo-destacado.tvo-activo .tvo-fondo {
		animation: tvo-kenburns 11s ease-out forwards;
	}

	@keyframes tvo-kenburns {
		from { transform: scale(1); }
		to   { transform: scale(1.08); }
	}

	/* --- Destacado: barra de progreso (8 s por diapositiva) --- */
	.tvo-progreso.tvo-corriendo span {
		animation: tvo-progreso 8s linear forwards;
	}

	.tvo-progreso.tvo-pausa span {
		animation-play-state: paused;
	}

	@keyframes tvo-progreso {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
}

/* Con mouse: la imagen crece un poco y se oscurece; el título sube */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tvo-mini:not(.tvo-destacado):hover .tvo-fondo,
	a:hover .tvo-mini .tvo-fondo {
		transform: scale(1.07);
		filter: brightness(0.85);
	}

	.programa-video-titulo {
		transition: transform 0.4s ease;
	}

	.tvo-mini:hover .programa-video-titulo {
		transform: translateY(-4px);
	}

	/* Brillo en flechas y botones */
	.hilite-l, .hilite-r,
	.jssora05l, .jssora05r,
	.jssora08l, .jssora08r,
	.nav-left-boton a, .nav-right-boton a {
		transition: filter 0.3s ease, opacity 0.3s ease;
	}

	.hilite-l:hover, .hilite-r:hover,
	.jssora05l:hover, .jssora05r:hover,
	.jssora08l:hover, .jssora08r:hover,
	.nav-left-boton a:hover, .nav-right-boton a:hover {
		filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
	}

	a:hover .social-productora,
	a:hover .social-envivo,
	a:hover .social-contacto,
	.compartir-btn:hover {
		box-shadow: 0 0 14px rgba(255, 255, 255, 0.25);
	}
}

/* Barra de progreso del destacado (la base existe siempre; solo se anima
   con movimiento permitido). */
.home .video {
	position: relative;
}

.tvo-progreso {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: rgba(255, 255, 255, 0.15);
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.3s ease;
}

.tvo-progreso span {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.85);
	transform: scaleX(0);
	transform-origin: left center;
}

.tvo-progreso.tvo-oculto {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tvo-progreso {
		display: none;
	}
}

/* Botón "volver arriba" (lo agrega js/efectos.js).
   display:none mientras no se usa: un elemento fijo presente desde el inicio
   desactiva el ajuste automático de tamaño de texto de Chrome en Android,
   y las notas se verían con letra más chica. */
.tvo-arriba {
	display: none;
	position: fixed;
	right: 30px;
	bottom: calc(30px + env(safe-area-inset-bottom, 0px));
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.85);
	/* Sin relleno: solo el círculo y la flecha. La sombra suave los mantiene
	   visibles cuando pasan sobre el recuadro blanco de una nota. */
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M7 20l9-9 9 9'/%3E%3C/svg%3E") no-repeat center;
	cursor: pointer;
	z-index: 50;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, background-color 0.2s ease;
}

.tvo-arriba.tvo-mostrar {
	display: block;
}

.tvo-arriba.tvo-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.tvo-arriba:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

.tvo-arriba:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}


/* ============================================
   VIDEO CON CARGA LIVIANA (notas)
   Miniatura + botón de reproducir; el reproductor de YouTube se carga al
   hacer clic. El botón usa el mismo diseño que las flechas del destacado.
   ============================================ */
.tvo-yt {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: var(--color-black);
	overflow: hidden;
}

.tvo-yt-miniatura {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tvo-yt iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.tvo-yt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 156px;
	height: 156px;
	margin: -78px 0 0 -78px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='156'%3E%3Cpath fill='%23fff' fill-opacity='.68' fill-rule='evenodd' d='M78 0a78 78 0 1 0 0 156a78 78 0 1 0 0-156zM55 38V118L123 78z'/%3E%3C/svg%3E") no-repeat center;
	transition: filter 0.3s ease, transform 0.3s ease;
}

.tvo-yt-play:hover,
.tvo-yt-play:focus-visible {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='156'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M78 0a78 78 0 1 0 0 156a78 78 0 1 0 0-156zM55 38V118L123 78z'/%3E%3C/svg%3E");
	filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
	outline: none;
}

.tvo-yt-enlace {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	text-align: center;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 25px;
}

@media only screen and (max-width: 970px) {
	.tvo-yt-play {
		width: 120px;
		height: 120px;
		margin: -60px 0 0 -60px;
		background-size: 120px 120px;
	}
}

/* Enlaces dentro de textos del sitio (por ejemplo, la página 404) */
.tvo-enlace {
	color: var(--color-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Títulos de sección (h2) y de página (h1): se ven igual que los div que
   había antes. :where() tiene especificidad cero, así que cualquier regla
   del theme sobre esas clases sigue mandando. */
:where(h1.tvo-h, h2.tvo-h) {
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
}


/* ============================================
   ESTILOS QUE ANTES ESTABAN EN LÍNEA (style="…") EN EL HTML (v1.9.0)
   Mismos valores; así la portada pesa menos y se cambian en un solo lugar.
   ============================================ */
.tvo-mini--90 { width: 90px; height: 90px; }
.tvo-mini--200 { width: 200px; height: 200px; }
.tvo-mini--destacado { width: 1420px; height: 799px; }
.tvo-mini--ultimo { position: inherit; display: block; width: 250px; height: 200px; }

.tvo-ultimo {
	max-width: 250px;
	max-height: 200px;
	position: relative;
	display: block;
	margin-right: 10px;
	margin-bottom: 10px;
	overflow: auto;
	text-align: center;
	float: left;
}

.tvo-vermas-90 {
	width: 90px;
	height: 90px;
	background: url(img/mas.svg) no-repeat center;
	background-size: 60px;
}

.tvo-vermas-200 { width: 200px; height: 200px; }

/* Indicador de carga de los carruseles (se oculta al iniciarlos) */
.tvo-carga { position: absolute; top: 0; left: 0; }
.tvo-carga-fondo,
.tvo-carga-icono { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; }
.tvo-carga-fondo { opacity: 0.7; }
.tvo-carga-icono { background: url(img/loading.gif) no-repeat center center; }

/* Posición de las flechas */
.jssora05l { top: 80px; left: 8px; }
.jssora05r { top: 80px; right: 8px; }
.hilite-l { top: 350px; left: 40px; }
.hilite-r { top: 350px; right: 40px; }
#noticias-1 .jssora08l { top: -5px; left: 300px; }
#noticias-1 .jssora08r { bottom: -5px; left: 300px; }
#noticias-2 .jssora08l { top: -5px; left: 150px; }
#noticias-2 .jssora08r { bottom: -5px; left: 150px; }

/* Enlaces del pie de página */
.tvo-enlace-pie { color: inherit; text-decoration: none; }


/* ============================================
   SEO (v1.10.0)
   ============================================ */
/* Las miniaturas ahora son <img>: mismo encuadre que el fondo CSS de antes */
img.tvo-fondo {
	display: block;
	border: 0;
	/* Si una imagen no carga, no se muestra su texto alternativo encima del
	   diseño (queda el recuadro vacío, como antes con los fondos CSS). */
	color: transparent;
	font-size: 0;
	object-fit: cover;
	object-position: center;
}

.tvo-mini--llenar { width: 100%; height: 100%; }

/* Texto solo para Google y lectores de pantalla (no se ve) */
.tvo-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ============================================
   UNA SOLA VERSIÓN POR BLOQUE (v1.11.0)
   Sin JavaScript no se arman las versiones de escritorio: en ese caso se
   muestran los listados en todos los tamaños.
   ============================================ */
html:not(.tvo-js) .movil-listado,
html:not(.tvo-js) .movil-listado-zonales {
	display: block;
}

html:not(.tvo-js) .programa-1,
html:not(.tvo-js) .programa-2,
html:not(.tvo-js) .noticias,
html:not(.tvo-js) .noticias-zonales,
html:not(.tvo-js) .bloque-videos {
	display: none;
}


/* ============================================
   NOTICIAS POR COMUNA (v1.12.0)
   Cuadrícula de tarjetas: 3 columnas (≥1486 px), 2 (971–1485 px) y 1 en
   celulares. Cada tarjeta: nombre de la comuna, nota principal con imagen,
   dos titulares y "Ver más".
   ============================================ */
.tvo-comunas {
	width: 1420px;
	margin: 30px auto 0;
	font-family: var(--font-primary);
	color: var(--color-white);
}

.tvo-comunas-grilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.tvo-comuna {
	display: flex;
	flex-direction: column;
	background: var(--bg-overlay-dark);
}

.tvo-comuna-nombre {
	margin: 0;
	padding: 14px 18px 12px;
	font-size: 26px;
	font-weight: normal;
	letter-spacing: 1px;
	border-top: 4px solid var(--color-white);
}

.tvo-comuna-nombre a {
	color: var(--color-white);
	text-decoration: none;
}

.tvo-comuna-principal {
	display: block;
	color: var(--color-white);
	text-decoration: none;
}

.tvo-mini--comuna {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.tvo-comuna-velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.9) 100%);
}

.tvo-comuna-texto {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.tvo-comuna-fecha {
	display: block;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.3;
}

.tvo-comuna-titular {
	display: block;
	font-size: 24px;
	line-height: 1.2;
}

.tvo-comuna-lista {
	list-style: none;
	margin: 0;
	padding: 4px 18px;
	flex: 1;
}

.tvo-comuna-lista li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tvo-comuna-lista a {
	display: block;
	padding: 12px 0;
	color: var(--color-white);
	text-decoration: none;
	font-size: 19px;
	line-height: 1.25;
}

.tvo-comuna-lista .tvo-comuna-fecha {
	font-size: 14px;
	opacity: 0.8;
}

.tvo-comuna-mas {
	display: block;
	padding: 12px 18px 16px;
	text-align: right;
	color: var(--color-white);
	text-decoration: none;
	font-size: 17px;
	opacity: 0.85;
}

.tvo-comuna-lista a:hover,
.tvo-comuna-nombre a:hover,
.tvo-comuna-mas:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media only screen and (max-width: 1485px) {
	.tvo-comunas {
		width: 900px;
	}

	.tvo-comunas-grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 970px) {
	.tvo-comunas {
		width: calc(var(--vw, 100vw) - 60px);
	}

	.tvo-comunas-titulo {
		width: auto;
		font-size: 44px;
	}

	.tvo-comunas-grilla {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.tvo-comuna-nombre { font-size: 34px; padding: 18px 22px 14px; }
	.tvo-comuna-fecha { font-size: 21px; }
	.tvo-comuna-titular { font-size: 32px; }
	.tvo-comuna-texto { left: 22px; right: 22px; bottom: 20px; }
	.tvo-comuna-lista { padding: 6px 22px; }
	.tvo-comuna-lista a { font-size: 27px; padding: 16px 0; }
	.tvo-comuna-lista .tvo-comuna-fecha { font-size: 20px; }
	.tvo-comuna-mas { font-size: 24px; padding: 14px 22px 20px; }
}


/* ============================================
   TITULARES JUNTO A LA NOTICIA DESTACADA (v1.14.0)
   Lista fija de cuatro noticias (reemplaza al slider vertical): miniatura
   rectangular, fecha y título en dos líneas como máximo, y "Ver más".
   ============================================ */
.tvo-titulares {
	display: flex;
	flex-direction: column;
	font-family: var(--font-primary);
}

.tvo-titulares ul {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.tvo-titulares li {
	flex: 1;
	display: flex;
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tvo-titulares li:first-child {
	border-top: 0;
}

.tvo-titular {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	color: var(--color-white);
	text-decoration: none;
}

.tvo-mini--titular {
	flex: none;
	width: 150px;
	aspect-ratio: 16 / 9;
}

.tvo-titular-texto {
	flex: 1;
	min-width: 0;
}

.tvo-titular-fecha {
	display: block;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.3;
	opacity: 0.85;
}

.tvo-titular-titulo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 22px;
	line-height: 1.25;
	padding-bottom: 2px; /* que no se corten las letras que bajan (g, p, q) */
}

.tvo-titular:hover .tvo-titular-titulo,
.tvo-titulares-mas:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tvo-titulares-mas {
	display: block;
	padding: 8px 4px 0 0;
	text-align: right;
	color: var(--color-white);
	text-decoration: none;
	font-size: 17px;
	opacity: 0.85;
}

@media only screen and (max-width: 1485px) {
	.tvo-titular { gap: 12px; }
	.tvo-mini--titular { width: 112px; }
	.tvo-titular-fecha { font-size: 13px; }
	.tvo-titular-titulo { font-size: 17px; }
	.tvo-titulares-mas { font-size: 15px; }
}

/* Celulares: listado de noticias con miniatura rectangular y títulos que no
   se cortan (solo en el bloque de noticias de la portada). */
@media only screen and (max-width: 970px) {
	.tvo-lista-noticias .movil-video-comun-imagen,
	.tvo-lista-noticias .tvo-mini--90 {
		width: 160px;
		height: 90px;
	}

	.tvo-lista-noticias .movil-video-comun-texto,
	.tvo-lista-noticias .movil-video-comun-texto a {
		width: calc(var(--vw, 100vw) - 220px);
	}

	.tvo-lista-noticias .movil-video-comun-texto > a:last-child {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		line-height: 1.2;
		padding-bottom: 2px;
	}
}