/* ==========================================================================
   El Turno — sistema de diseño sobre el tema Extra
   Propuesta 1: prensa obrera. Archivo, esquinas rectas, rojo institucional.
   ========================================================================== */

:root {
	--et-text: #17161A;
	--et-bg: #FFFFFF;
	--et-surface: #F1EFEE;
	--et-divider: #17161A;

	--et-accent: #B3122A;
	--et-accent-100: #FBE9EC;
	--et-accent-600: #8E0E21;
	--et-accent-700: #6E0A19;

	--font-heading: "Archivo", system-ui, -apple-system, sans-serif;
	--font-body: "Archivo", system-ui, -apple-system, sans-serif;
	--heading-weight: 800;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;

	/* Color de sección; cada categoría lo sobrescribe desde functions.php. */
	--seccion: var(--et-accent);
}

/* --- Base ---------------------------------------------------------------- */

body,
body.et_extra {
	font-family: var(--font-body);
	color: var(--et-text);
	background: var(--et-bg);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.entry-title,
.post-title {
	font-family: var(--font-heading);
	font-weight: var(--heading-weight);
	letter-spacing: -0.015em;
	line-height: 1.08;
	color: var(--et-text);
}

/* Extra aplica `text-transform: uppercase` a todos los encabezados. En este
   diseño las versalitas son solo para rótulos, secciones y navegación: los
   titulares se leen en caja normal. */
.et_extra .entry-title,
.et_extra .post-title,
.elturno-articulo .entry-title,
.elturno-columna .entry-title,
.elturno-video__titulo,
.elturno-lista h3,
.elturno-agenda__evento {
	text-transform: none;
}

/* Esquinas rectas en todo el sistema: nada de radios heredados de Extra. */
.et_pb_module,
.et_pb_post_extra,
.et_pb_button,
input,
select,
textarea,
button,
img,
.et_pb_image_wrap,
.widget,
.et_pb_blurb_content {
	border-radius: 0 !important;
}

a { color: var(--et-accent); }
a:hover { color: var(--et-accent-700); }

/* --- Cabecera ------------------------------------------------------------ */

/* Cinta superior: fecha, catchile.cl, boletín, contacto. */
.et_extra #top-header {
	background: var(--et-text);
	border-bottom: 0;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.et_extra #main-header {
	background: var(--et-bg);
	border-bottom: 3px solid var(--et-divider);
	box-shadow: none;
}

/* Cabecera del logo tipográfico EL TURNO. */
.elturno-masthead {
	text-align: center;
	padding: var(--space-6) 0 var(--space-3);
}

.elturno-masthead__wordmark {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: clamp(26px, 4.2vw, 54px);
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin: 0;
}

.elturno-masthead__tagline {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--et-accent);
	margin-top: var(--space-2);
}

/* La franja de secciones se define completa en cabecera.css. No duplicar reglas
   acá: las de este archivo tenían más especificidad y le ganaban a las de allá. */

/* --- Barra de última hora ------------------------------------------------ */

.elturno-ultimahora {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: var(--et-accent);
	color: #fff;
	padding: var(--space-3) var(--space-4);
	font-size: 15px;
}

.elturno-ultimahora__etiqueta {
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	border-right: 1px solid rgba(255, 255, 255, 0.45);
	padding-right: var(--space-4);
}

.elturno-ultimahora a { color: #fff; text-decoration: none; }
.elturno-ultimahora a:hover { text-decoration: underline; }

/* --- Kicker de sección --------------------------------------------------- */

/* Nombre de sección en versalitas, del color de la sección. */
.elturno-kicker,
.et_extra .post-meta .cat-links a,
.et_pb_post_extra .post-meta a[rel~="category"] {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--seccion);
	text-decoration: none;
}

.elturno-kicker::before {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background: var(--seccion);
	margin-bottom: var(--space-2);
}

/* --- Tarjetas de artículo ------------------------------------------------ */

.et_pb_post_extra {
	background: var(--et-bg);
	border: 0;
	border-top: 3px solid var(--seccion);
	box-shadow: none;
	padding-top: var(--space-3);
}

.et_pb_post_extra .post-content,
.et_pb_post_extra .post-header {
	padding: var(--space-3) 0 0;
}

.et_pb_post_extra .entry-title,
.et_pb_post_extra .post-title {
	font-size: clamp(18px, 2vw, 24px);
	margin-bottom: var(--space-2);
}

.et_pb_post_extra .entry-title a,
.et_pb_post_extra .post-title a {
	color: var(--et-text);
	text-decoration: none;
}

.et_pb_post_extra .entry-title a:hover,
.et_pb_post_extra .post-title a:hover {
	color: var(--et-accent);
}

.et_pb_post_extra .post-meta,
.elturno-meta {
	font-size: 12px;
	letter-spacing: 0.03em;
	color: #6b6a6e;
	text-transform: none;
}

/* Nota destacada de portada. */
.elturno-portada__destacado .entry-title,
.elturno-portada__destacado .post-title {
	font-size: clamp(30px, 4.2vw, 54px);
	line-height: 1.02;
}

.elturno-bajada {
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.5;
	color: #3a383d;
	margin-top: var(--space-3);
}

/* --- Listas "Lo último" / "Lo más leído" --------------------------------- */

.elturno-lista { list-style: none; margin: 0; padding: 0; }

.elturno-lista > li {
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgba(23, 22, 26, 0.14);
}

.elturno-lista > li:last-child { border-bottom: 0; }

.elturno-lista__hora {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seccion);
}

.elturno-ranking { counter-reset: elturno-rank; }

.elturno-ranking > li {
	display: flex;
	align-items: baseline;
}

.elturno-ranking > li::before {
	counter-increment: elturno-rank;
	content: counter(elturno-rank);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 26px;
	color: var(--et-accent);
	margin-right: var(--space-3);
	line-height: 1;
}

/* --- Convivencia con las filas y columnas de Divi ------------------------ */

/* Extra da a sus filas `margin: 0 -12px` para compensar el relleno de las
   columnas. Como la fila tiene ancho fijo, ese margen negativo no la ensancha:
   la corre 12 px a la izquierda de su sección. En las secciones blancas no se
   nota, pero la banda negra de Turno Video quedaba pegada al contenido por la
   izquierda y con 24 px de aire por la derecha. Con márgenes automáticos la
   fila se centra y todas las secciones alinean su contenido en el mismo eje. */
/* El `!important` es necesario: Extra declara así su margen negativo y sin él
   no hay especificidad que alcance. */
.et_extra_layout.et_pb_gutters3 .et_pb_extra_column_main .et_pb_row,
.et_extra_layout .et_pb_extra_column_main .et_pb_row {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- Convivencia con las columnas de Divi -------------------------------- */

/* Extra hace `display: flex` las columnas de sus layouts para poder igualar
   alturas. Dentro de una columna flex, Chrome no mide bien la altura de
   nuestras rejillas: con `aspect-ratio` la calculaba de menos (501 px para un
   contenido de 699) y con relleno porcentual de más (798), de ahí el vacío
   negro bajo Turno Video. Las columnas que llevan bloques propios vuelven a
   `block`; no dependemos de la igualación de alturas de Divi.
   El selector repite la forma del de Extra
   (`.et_extra_layout .et_pb_extra_column_main .et_pb_column`) porque con menos
   especificidad no le gana. */
.et_extra_layout .et_pb_extra_column_main .et_pb_column:has(.elturno-video),
.et_extra_layout .et_pb_extra_column_main .et_pb_column:has(.elturno-boletin),
.et_extra_layout .et_pb_extra_column_main .et_pb_column:has(.elturno-grid),
.et_extra_layout .et_pb_extra_column_main .et_pb_column:has(.elturno-seccion-lista) {
	display: block;
}

/* --- Turno Video (verticales 9:16) --------------------------------------- */

.elturno-video {
	background: var(--et-text);
	color: #fff;
	padding: var(--space-8) var(--space-6);
}

.elturno-video h2,
.elturno-video .et_pb_module_header { color: #fff; }

/* El mismo bloque vive en la banda a todo ancho de la portada (~1180 px) y en
   la columna lateral de secciones y artículos (~250 px), así que la rejilla se
   ajusta sola al espacio disponible: cuatro columnas arriba, una o dos en el
   lateral. Es `auto-fit` y no container queries a propósito — declarar el
   bloque como contenedor (`container-type: inline-size`) rompía el cálculo de
   altura de la columna flex de Divi y dejaba un vacío negro de 2.700 px. */
.elturno-video__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
	gap: var(--space-4);
}

.elturno-video__item { position: relative; }

/* El recorte 9:16 se hace con relleno porcentual y no con `aspect-ratio`.
   Las columnas de Divi son `flex-direction: column`, y en ese contexto Chrome
   no resuelve bien la altura intrínseca de una rejilla cuyas piezas sacan su
   alto de la proporción: la fila medía 501 px cuando su contenido eran 699 y
   los videos se salían de la banda negra. El relleno porcentual se resuelve
   contra el ancho, que sí se conoce. */
.elturno-video__item > a {
	position: relative;
	display: block;
	padding-top: 177.78%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

.elturno-video__item img,
.elturno-video__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elturno-video__duracion {
	position: absolute;
	right: var(--space-2);
	bottom: var(--space-2);
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
}


/* --- Opinión ------------------------------------------------------------- */

.elturno-opinion .entry-title,
.elturno-columna .entry-title {
	font-style: italic;
}

/* Sello en negativo: solo se usa aquí y en el boletín. */
.elturno-sello {
	display: inline-block;
	background: var(--et-accent);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-3);
}

.elturno-descargo {
	background: var(--et-surface);
	border-left: 4px solid var(--et-accent);
	padding: var(--space-4);
	font-size: 14px;
	line-height: 1.55;
	margin-top: var(--space-8);
}

.elturno-autor {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-4) 0;
}

.elturno-autor img {
	width: 56px;
	height: 56px;
	object-fit: cover;
}

.elturno-autor__nombre { font-weight: 800; }
.elturno-autor__rol { font-size: 13px; color: #6b6a6e; }

/* --- Cuerpo del artículo ------------------------------------------------- */

.single .entry-content p {
	font-size: 18px;
	line-height: 1.68;
	max-width: 68ch;
}

.single .entry-content blockquote,
.elturno-cita {
	border: 0;
	border-top: 3px solid var(--et-accent);
	border-bottom: 3px solid var(--et-accent);
	padding: var(--space-6) 0;
	margin: var(--space-8) 0;
	font-family: var(--font-heading);
	font-size: clamp(21px, 2.4vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	font-style: normal;
	background: none;
}

.elturno-cita__fuente {
	display: block;
	margin-top: var(--space-3);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6a6e;
}

.elturno-epigrafe {
	font-size: 13px;
	line-height: 1.45;
	color: #6b6a6e;
	padding-top: var(--space-2);
	border-top: 1px solid rgba(23, 22, 26, 0.18);
}

/* --- Etiquetas ----------------------------------------------------------- */

.elturno-tags a,
.et_extra .tags-list a {
	display: inline-block;
	background: var(--et-surface);
	color: var(--et-text);
	font-size: 12px;
	font-weight: 600;
	padding: var(--space-1) var(--space-3);
	margin: 0 var(--space-2) var(--space-2) 0;
	text-decoration: none;
}

.elturno-tags a:hover { background: var(--et-accent-100); color: var(--et-accent-700); }

/* --- Boletín ------------------------------------------------------------- */

.elturno-boletin {
	background: var(--et-accent);
	color: #fff;
	padding: var(--space-8) var(--space-6);
}

.elturno-boletin h2,
.elturno-boletin .et_pb_module_header { color: #fff; margin-bottom: var(--space-2); }

.elturno-boletin input[type="email"] {
	border: 0;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-size: 15px;
	width: 100%;
}

.elturno-boletin button,
.elturno-boletin .et_pb_button {
	background: var(--et-text) !important;
	border: 0 !important;
	color: #fff !important;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: var(--space-3) var(--space-6) !important;
}

/* --- Agenda sindical ----------------------------------------------------- */

.elturno-agenda { list-style: none; margin: 0; padding: 0; }

.elturno-agenda > li {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgba(23, 22, 26, 0.14);
}

.elturno-agenda__fecha {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--et-accent);
	min-width: 62px;
}

/* --- Cabecera de categoría ----------------------------------------------- */

.elturno-seccion-hero {
	border-top: 6px solid var(--seccion);
	padding-top: var(--space-6);
	margin-bottom: var(--space-8);
}

.elturno-seccion-hero__etiqueta {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6b6a6e;
}

.elturno-seccion-hero__titulo {
	font-size: clamp(38px, 6vw, 72px);
	text-transform: uppercase;
	line-height: 0.95;
	margin: var(--space-2) 0 var(--space-3);
}

.elturno-seccion-hero__descripcion {
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.55;
	color: #3a383d;
}

/* Filtros de sección. */
.elturno-filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

.elturno-filtros a {
	font-size: 13px;
	font-weight: 600;
	padding: var(--space-2) var(--space-3);
	border: 1px solid rgba(23, 22, 26, 0.22);
	color: var(--et-text);
	text-decoration: none;
}

.elturno-filtros a:hover,
.elturno-filtros a[aria-current="page"] {
	background: var(--seccion);
	border-color: var(--seccion);
	color: #fff;
}

/* --- Pie ----------------------------------------------------------------- */

.et_extra #main-footer {
	background: var(--et-text);
	color: #fff;
	border-top: 6px solid var(--et-accent);
}

.et_extra #main-footer a { color: rgba(255, 255, 255, 0.82); }
.et_extra #main-footer a:hover { color: #fff; }

.et_extra #footer-bottom { background: var(--et-text); }

/* --- Móvil --------------------------------------------------------------- */

@media (max-width: 767px) {
	.elturno-masthead { padding: var(--space-4) 0 var(--space-2); }
	.single .entry-content p { font-size: 17px; }
	.elturno-ultimahora { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
	.elturno-ultimahora__etiqueta { border-right: 0; padding-right: 0; }
}