/* ==========================================================================
   El Turno — plantilla de artículo
   ========================================================================== */

.elturno-articulo { border-top: 6px solid var(--seccion); padding-top: var(--space-6); }

/* --- Migas --------------------------------------------------------------- */

.elturno-migas {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b6a6e;
	margin-bottom: var(--space-4);
}

.elturno-migas a { color: #6b6a6e; text-decoration: none; }
.elturno-migas a:hover { color: var(--seccion); }
.elturno-migas span { margin: 0 var(--space-1); }

/* --- Sello editorial ----------------------------------------------------- */

.elturno-sello-bloque {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.elturno-sello--seccion { background: var(--seccion); }

.elturno-sello-bloque__nota {
	font-size: 13px;
	color: #6b6a6e;
}

/* --- Titular ------------------------------------------------------------- */

.elturno-articulo .entry-title {
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.03;
	margin: 0 0 var(--space-4);
}

/* La columna de opinión va en itálica. */
.elturno-opinion .elturno-articulo .entry-title { font-style: italic; }

.elturno-bajada--articulo {
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.5;
	color: #3a383d;
	max-width: 62ch;
	margin: 0 0 var(--space-6);
}

/* --- Ficha: firma, fecha, compartir -------------------------------------- */

.elturno-ficha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-top: 1px solid rgba(23, 22, 26, 0.18);
	border-bottom: 1px solid rgba(23, 22, 26, 0.18);
	margin-bottom: var(--space-6);
}

.elturno-ficha__retrato img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	display: block;
}

.elturno-ficha__texto { flex: 1 1 240px; }

.elturno-ficha__autor {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
}

.elturno-ficha__rol,
.elturno-ficha__fecha {
	display: block;
	font-size: 13px;
	color: #6b6a6e;
}

.elturno-compartir {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.elturno-compartir span { color: #6b6a6e; }

.elturno-compartir a {
	font-weight: 700;
	color: var(--et-text);
	text-decoration: none;
	border-bottom: 2px solid var(--seccion);
	padding-bottom: 1px;
}

.elturno-compartir a:hover { color: var(--seccion); }

/* --- Foto de apertura ---------------------------------------------------- */

.elturno-apertura { margin: 0 0 var(--space-8); }

.elturno-apertura img {
	width: 100%;
	height: auto;
	display: block;
}

.elturno-apertura .elturno-epigrafe { margin-top: var(--space-2); }

/* --- Lateral ------------------------------------------------------------- */

.elturno-lateral .elturno-bloque { margin-bottom: var(--space-6); }
.elturno-lateral .elturno-video { padding: var(--space-4); }
.elturno-lateral .elturno-video__grid { grid-template-columns: 1fr; }
.elturno-lateral .elturno-boletin { padding: var(--space-6) var(--space-4); }
.elturno-lateral .elturno-boletin__form { flex-direction: column; }

@media (max-width: 980px) {
	.elturno-ficha { gap: var(--space-3); }
	.elturno-compartir { width: 100%; }
}

/* --- Cuerpo: intertítulos, listas, tablas y figuras ----------------------- */

/* Extra pone `text-transform: uppercase` en todos los encabezados. Dentro del
   cuerpo del artículo los intertítulos van en caja normal, igual que el
   titular (ver la regla equivalente en elturno.css). */
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
	text-transform: none;
	font-family: var(--font-heading);
	max-width: 62ch;
}

.single .entry-content h2 {
	font-size: clamp(23px, 2.4vw, 31px);
	line-height: 1.15;
	margin: var(--space-8) 0 var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid rgba(23, 22, 26, 0.18);
}

.single .entry-content h3 {
	font-size: clamp(19px, 1.8vw, 23px);
	line-height: 1.2;
	margin: var(--space-6) 0 var(--space-2);
}

.single .entry-content ul,
.single .entry-content ol {
	max-width: 66ch;
	margin: 0 0 var(--space-6);
	padding-left: 0;
	list-style: none;
}

.single .entry-content li {
	position: relative;
	font-size: 17px;
	line-height: 1.6;
	padding-left: var(--space-6);
	margin-bottom: var(--space-3);
}

.single .entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 12px;
	height: 3px;
	background: var(--seccion, var(--et-accent));
}

.single .entry-content ol { counter-reset: elturno-item; }

.single .entry-content ol > li::before {
	counter-increment: elturno-item;
	content: counter(elturno-item);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 15px;
	color: var(--seccion, var(--et-accent));
}

/* Tablas de datos. Extra no les da estilo propio dentro del contenido.
   El envoltorio con scroll evita que una tabla ancha empuje la página. */
.elturno-tabla {
	overflow-x: auto;
	margin: var(--space-6) 0;
	-webkit-overflow-scrolling: touch;
}

.elturno-tabla table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 15px;
}

.elturno-tabla th,
.elturno-tabla td {
	text-align: left;
	padding: var(--space-3);
	border-bottom: 1px solid rgba(23, 22, 26, 0.18);
	vertical-align: top;
}

.elturno-tabla thead th {
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 3px solid var(--seccion, var(--et-accent));
}

.elturno-tabla tbody th {
	font-weight: 700;
	width: 34%;
}

.elturno-tabla tbody tr:last-child th,
.elturno-tabla tbody tr:last-child td { border-bottom: 0; }

/* Figura intercalada en el cuerpo (gráficos, documentos). */
.elturno-figura { margin: var(--space-8) 0; }

.elturno-figura img {
	width: 100%;
	height: auto;
	display: block;
	background: var(--et-surface);
}

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

/* --- Video vertical dentro del artículo ---------------------------------- */

/* Las piezas de Turno Video son 9:16. Un iframe a todo el ancho de la
   columna quedaría absurdamente alto, así que se limita el ancho y se
   mantiene la proporción con relleno porcentual, por la misma razón que en
   la banda de portada: dentro de una columna flex de Extra, Chrome no mide
   bien la altura calculada con `aspect-ratio`. */
.elturno-video-inserto {
	max-width: 340px;
	margin: var(--space-8) 0;
}

.elturno-video-inserto__marco {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 177.78%; /* 16 / 9 */
	background: #17161a;
}

.elturno-video-inserto__marco iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

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

.elturno-video-inserto figcaption strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--seccion, var(--et-accent));
	margin-bottom: 2px;
}

/* Desde tablet el video acompaña al texto en vez de cortar la lectura. */
@media (min-width: 720px) {
	.elturno-video-inserto {
		float: right;
		max-width: 300px;
		margin: var(--space-2) 0 var(--space-6) var(--space-6);
	}
}