/**
 * Naturólogas — Sistema de diseño
 *
 * Dirección híbrida: la tipografía editorial del esquema (Cormorant Garamond
 * para titulares, DM Sans para texto) con el verde oliva de la marca, el mismo
 * del logotipo y el lema manuscrito.
 *
 * Contraste verificado sobre AA:
 *   texto #1F2618 sobre #FAF9F5 ........ 15.8:1
 *   --nat-acento-texto sobre fondo ...... 6.0:1   (texto pequeño)
 *   blanco sobre --nat-acento ........... 4.7:1   (botones)
 *   texto claro sobre fondo oscuro ..... 11.1:1
 *   acento oscuro sobre fondo oscuro .... 8.3:1
 *
 * El acento tiene dos variantes a propósito: #697B43 rinde 4.4:1 sobre el fondo
 * claro, justo por debajo del mínimo para texto pequeño. Los rellenos usan el
 * color de marca; el texto pequeño usa una versión más oscura que sí cumple.
 */

/* ═══════════════════════════════════════════
   1 · TOKENS
   ═══════════════════════════════════════════ */

:root {
	/* Superficies */
	--nat-bg:            #FAF9F5;
	--nat-bg-2:          #F3F1E9;
	--nat-bg-3:          #EBE8DD;
	--nat-borde:         #E0DED4;
	--nat-borde-2:       #C9C5B6;

	/* Texto */
	--nat-texto:         #1F2618;
	--nat-texto-2:       #55604A;
	--nat-texto-3:       #8A9280;

	/* Acento — el verde de la marca */
	--nat-acento:        #697B43;
	--nat-acento-texto:  #556634;
	--nat-acento-claro:  #E9EDDF;
	--nat-acento-vivo:   #7E9455;
	--nat-acento-contra: #FFFFFF;

	/* Apoyos */
	--nat-tierra:        #8A6A20;
	--nat-tierra-claro:  #F3EBD6;
	--nat-agua:          #2A5A8A;
	--nat-agua-claro:    #E0ECF8;

	/* Tipografías */
	--nat-serif:         'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--nat-sans:          'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--nat-mono:          'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Formas */
	--nat-r:             8px;
	--nat-r-lg:          12px;
	--nat-r-pill:        999px;

	/* Sombras */
	--nat-sombra:        0 1px 3px rgba(31, 38, 24, .07), 0 4px 16px rgba(31, 38, 24, .04);
	--nat-sombra-alta:   0 2px 8px rgba(31, 38, 24, .10), 0 8px 32px rgba(31, 38, 24, .06);

	/* Ritmo */
	--nat-paso:          8px;
	--nat-transicion:    .2s cubic-bezier(.4, 0, .2, 1);

	color-scheme: light;
}

[data-nat-tema="dark"] {
	--nat-bg:            #171B12;
	--nat-bg-2:          #1F2618;
	--nat-bg-3:          #262E1D;
	--nat-borde:         #313A28;
	--nat-borde-2:       #3F4A33;

	--nat-texto:         #D6CFB4;
	--nat-texto-2:       #9DA88C;
	--nat-texto-3:       #6E7A5C;

	--nat-acento:        #A8BC70;
	--nat-acento-texto:  #A8BC70;
	--nat-acento-claro:  rgba(168, 188, 112, .13);
	--nat-acento-vivo:   #C2D68C;
	--nat-acento-contra: #171B12;

	--nat-tierra:        #C8B880;
	--nat-tierra-claro:  rgba(200, 184, 128, .13);
	--nat-agua:          #7AAAF5;
	--nat-agua-claro:    rgba(122, 170, 245, .13);

	--nat-sombra:        0 1px 3px rgba(0, 0, 0, .35);
	--nat-sombra-alta:   0 4px 16px rgba(0, 0, 0, .40);

	color-scheme: dark;
}

/* Modelo de caja.

   Betheme no declara «border-box» en ningún sitio: todo el documento va con el
   modelo antiguo, donde el relleno y el borde se SUMAN al ancho. Un elemento
   propio con «width: 100%» y relleno se sale del contenedor tantos píxeles como
   relleno tenga. Le pasaba al botón de descarga de la biblioteca: 300 px de
   columna, 21 px de relleno a cada lado, 342 px de botón, y el borde derecho
   fuera de la pantalla.

   La regla se limita a los componentes propios en vez de aplicarse a todo el
   documento. Cambiarle el modelo de caja al marcado del tema —cabecera, pie,
   rejillas del maquetador— sería mover el suelo de una plantilla que ya
   funciona. Los campos de formulario no hacen falta aquí: Contact Form 7 ya
   los declara «border-box», comprobado en la página de contacto.

   «.nat-ambito» está en la lista porque los bloques que se insertan en páginas
   del maquetador —el de entrevistas, por ejemplo— viven fuera de «.nat-pagina»
   y necesitan el mismo trato.  */
.nat-pagina,
.nat-ambito,
.nat-pagina [class*="nat-"],
.nat-ambito [class*="nat-"],
.nat-pagina [class*="nat-"]::before,
.nat-pagina [class*="nat-"]::after,
.nat-ambito [class*="nat-"]::before,
.nat-ambito [class*="nat-"]::after {
	box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   2 · TIPOGRAFÍA
   ═══════════════════════════════════════════ */

.nat, .nat-ambito {
	font-family: var(--nat-sans);
	color: var(--nat-texto);
	background: var(--nat-bg);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.nat h1, .nat h2, .nat h3, .nat h4,
.nat-titulo {
	font-family: var(--nat-serif);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--nat-texto);
}

/* Las clases de tamaño llevan «.nat» delante a propósito.
   Sin él, «.nat-titulo-m» tiene menos peso que «.nat h2» y no sirve para nada:
   un h2 con la clase de tamaño mediano seguía saliendo grande. Con el prefijo,
   la clase gana siempre sobre la regla por etiqueta, que es lo que uno espera
   al ponerla. */
.nat h1, .nat .nat-titulo-xl { font-size: clamp(30px, 4.2vw, 46px); }
.nat h2, .nat .nat-titulo-l  { font-size: clamp(24px, 3vw, 32px); }
.nat h3, .nat .nat-titulo-m  { font-size: clamp(18px, 1.6vw, 21px); }

/* La cursiva del acento es el gesto que hereda el esquema. */
.nat h1 em, .nat h2 em, .nat h3 em,
.nat-titulo em, .nat-enfasis {
	font-style: italic;
	color: var(--nat-acento-texto);
}

.nat-eyebrow {
	font-family: var(--nat-sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--nat-texto-3);
}

.nat-mono { font-family: var(--nat-mono); font-size: .92em; }

.nat p { color: var(--nat-texto-2); }

.nat a { color: var(--nat-acento-texto); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.nat a:hover { color: var(--nat-acento-vivo); }

.nat blockquote {
	font-family: var(--nat-serif);
	font-style: italic;
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 300;
	line-height: 1.5;
	color: var(--nat-texto);
	border-left: 2px solid var(--nat-acento);
	padding-left: calc(var(--nat-paso) * 2.5);
	margin: calc(var(--nat-paso) * 3) 0;
}

/* ═══════════════════════════════════════════
   3 · COMPONENTES
   ═══════════════════════════════════════════ */

/* Botones */
.nat-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--nat-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding: 11px 21px;
	border: 1.5px solid transparent;
	border-radius: var(--nat-r);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--nat-transicion), color var(--nat-transicion), border-color var(--nat-transicion);
}
.nat-btn--principal { background: var(--nat-acento); color: var(--nat-acento-contra); }
.nat-btn--principal:hover { background: var(--nat-acento-vivo); color: var(--nat-acento-contra); }
.nat-btn--linea { background: transparent; color: var(--nat-acento-texto); border-color: var(--nat-acento); }
.nat-btn--linea:hover { background: var(--nat-acento-claro); color: var(--nat-acento-texto); }
.nat-btn--tenue { background: transparent; color: var(--nat-texto-2); border-color: var(--nat-borde-2); }
.nat-btn--tenue:hover { border-color: var(--nat-texto-3); color: var(--nat-texto); }
.nat-btn--sm { font-size: 11px; padding: 8px 15px; }

.nat-btn:focus-visible,
.nat-tag:focus-visible,
.nat-toggle:focus-visible {
	outline: 2px solid var(--nat-acento);
	outline-offset: 2px;
}

/* Etiquetas */
.nat-tag {
	display: inline-block;
	font-family: var(--nat-sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 3px;
	padding: 3px 9px;
	background: var(--nat-acento-claro);
	color: var(--nat-acento-texto);
}
.nat-tag--tierra { background: var(--nat-tierra-claro); color: var(--nat-tierra); }
.nat-tag--agua   { background: var(--nat-agua-claro);   color: var(--nat-agua); }

/* Sello de uso de IA — el distintivo editorial de la casa */
.nat-ia {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .05em;
	border-radius: 3px;
	padding: 3px 7px;
	border: 1px solid;
}
.nat-ia--sin { color: var(--nat-acento-texto); background: var(--nat-acento-claro); border-color: color-mix(in srgb, var(--nat-acento) 35%, transparent); }
.nat-ia--con { color: var(--nat-tierra); background: var(--nat-tierra-claro); border-color: color-mix(in srgb, var(--nat-tierra) 35%, transparent); }

/* Píldora con punto */
.nat-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	border-radius: var(--nat-r-pill);
	padding: 4px 12px;
	background: var(--nat-acento-claro);
	color: var(--nat-acento-texto);
}
.nat-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Etiqueta «Pronto» */
.nat-chip-pronto {
	display: inline-block;
	font-family: var(--nat-sans);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nat-tierra);
	background: var(--nat-tierra-claro);
	border: 1px solid color-mix(in srgb, var(--nat-tierra) 28%, transparent);
	border-radius: 3px;
	padding: 1px 6px;
	margin-left: 6px;
	vertical-align: middle;
}

/* Tarjetas */
.nat-card {
	background: var(--nat-bg);
	border: 1px solid var(--nat-borde);
	border-radius: var(--nat-r-lg);
	padding: calc(var(--nat-paso) * 2.5);
	box-shadow: var(--nat-sombra);
	transition: box-shadow var(--nat-transicion), border-color var(--nat-transicion);
}
.nat-card--enlace:hover { box-shadow: var(--nat-sombra-alta); border-color: var(--nat-borde-2); }

/* Cifra destacada */
.nat-cifra {
	font-family: var(--nat-serif);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 300;
	line-height: 1;
	color: var(--nat-acento-texto);
}
.nat-cifra-etiqueta {
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nat-texto-3);
}

/* Estados de disponibilidad */
.nat-estado {
	display: inline-block;
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 3px;
	padding: 3px 9px;
	border: 1px solid;
}
.nat-estado--libre  { background: var(--nat-acento-claro); color: var(--nat-acento-texto); border-color: color-mix(in srgb, var(--nat-acento) 28%, transparent); }
.nat-estado--espera { background: var(--nat-tierra-claro); color: var(--nat-tierra); border-color: color-mix(in srgb, var(--nat-tierra) 28%, transparent); }

/* Separador */
.nat-divisor { height: 1px; background: var(--nat-borde); border: 0; }

/* Avatar */
.nat-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nat-serif);
	font-weight: 400;
	background: var(--nat-acento-claro);
	color: var(--nat-acento-texto);
	border-radius: 50%;
	width: 52px;
	height: 52px;
	font-size: 18px;
	flex-shrink: 0;
	overflow: hidden;
}
.nat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nat-avatar--lg { width: 80px; height: 80px; font-size: 25px; border-radius: var(--nat-r-lg); }

/* ═══════════════════════════════════════════
   4 · INTERRUPTOR DE MODO OSCURO
   ═══════════════════════════════════════════ */

.nat-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--nat-bg-2);
	border: 1px solid var(--nat-borde);
	border-radius: var(--nat-r-pill);
	padding: 6px 12px 6px 10px;
	cursor: pointer;
	font-family: var(--nat-sans);
	font-size: 12px;
	color: var(--nat-texto-2);
	line-height: 1;
	transition: border-color var(--nat-transicion), background var(--nat-transicion);
}
.nat-toggle:hover { border-color: var(--nat-borde-2); }
.nat-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
.nat-toggle .nat-icono-luna { display: none; }
[data-nat-tema="dark"] .nat-toggle .nat-icono-sol  { display: none; }
[data-nat-tema="dark"] .nat-toggle .nat-icono-luna { display: block; }

/* Versión flotante, para cuando no está colocado en el menú */
.nat-toggle--flotante {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9000;
	box-shadow: var(--nat-sombra-alta);
	background: var(--nat-bg);
}

/* ═══════════════════════════════════════════
   5 · UTILIDADES
   ═══════════════════════════════════════════ */

.nat-contenedor { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.nat-fila { display: flex; gap: var(--nat-paso); flex-wrap: wrap; align-items: center; }
.nat-pila { display: flex; flex-direction: column; gap: calc(var(--nat-paso) * 2); }
.nat-seccion { padding-block: clamp(32px, 6vw, 64px); }

.nat-grid { display: grid; gap: calc(var(--nat-paso) * 2); }
.nat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nat-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
	.nat-grid--3, .nat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.nat-grid--2, .nat-grid--3, .nat-grid--4 { grid-template-columns: 1fr; }
}

/* Solo para lectores de pantalla */
.nat-oculto-visual {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ═══════════════════════════════════════════
   6 · MODO OSCURO SOBRE EL TEMA
   ═══════════════════════════════════════════
   Betheme trae sus propios fondos y colores. Estos ajustes evitan que en modo
   oscuro queden bloques blancos sueltos. Son deliberadamente conservadores:
   cuando construyamos nuestras propias plantillas, la mayoría sobrará. */

[data-nat-tema="dark"] body,
[data-nat-tema="dark"] #Wrapper,
[data-nat-tema="dark"] #Content,
[data-nat-tema="dark"] .section,
[data-nat-tema="dark"] #Footer {
	background-color: var(--nat-bg);
	color: var(--nat-texto-2);
}

[data-nat-tema="dark"] h1,
[data-nat-tema="dark"] h2,
[data-nat-tema="dark"] h3,
[data-nat-tema="dark"] h4,
[data-nat-tema="dark"] h5,
[data-nat-tema="dark"] h6 {
	color: var(--nat-texto);
}

[data-nat-tema="dark"] #Header_wrapper,
[data-nat-tema="dark"] #Subheader,
[data-nat-tema="dark"] .mfn-header-tmpl {
	background-color: var(--nat-bg-2);
}

[data-nat-tema="dark"] img:not([src$=".svg"]) { filter: brightness(.92); }

/* ═══════════════════════════════════════════
   7 · PREFERENCIAS DE ACCESIBILIDAD
   ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.nat-btn, .nat-card, .nat-toggle, .nat a {
		transition: none;
	}
}

@media print {
	.nat-toggle { display: none; }
}

/* ═══════════════════════════════════════════
   8 · BLINDAJE FRENTE AL TEMA
   ═══════════════════════════════════════════

   Betheme estiliza `button` de forma global, incluido `button:hover`, con una
   especificidad de (0,1,1). Nuestro `.nat-btn:hover` empata en (0,1,1) y pierde
   por orden de carga, porque la hoja del tema se carga después de la nuestra.

   El síntoma era desconcertante: los botones se veían bien hasta que pasabas el
   cursor por encima, y entonces se volvían negros. Solo se nota si alguien mueve
   el ratón sobre ellos, así que es de los fallos que pasan la revisión y
   aparecen después.

   Repetir los selectores con el elemento delante sube la especificidad a (0,2,1)
   y gana sin recurrir a !important, que sería peor de mantener. */

button.nat-toggle,
a.nat-toggle {
	background: var(--nat-bg-2);
	color: var(--nat-texto-2);
	border: 1px solid var(--nat-borde);
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}
button.nat-toggle--flotante,
a.nat-toggle--flotante {
	background: var(--nat-bg);
	box-shadow: var(--nat-sombra-alta);
}
button.nat-toggle:hover,
a.nat-toggle:hover {
	background: var(--nat-bg-2);
	color: var(--nat-texto);
	border-color: var(--nat-borde-2);
}

button.nat-btn,
a.nat-btn,
input.nat-btn {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	text-decoration: none;
}
button.nat-btn--principal,
a.nat-btn--principal,
button.nat-btn--principal:hover,
a.nat-btn--principal:hover {
	color: var(--nat-acento-contra);
}
button.nat-btn--principal,
a.nat-btn--principal { background: var(--nat-acento); }
button.nat-btn--principal:hover,
a.nat-btn--principal:hover { background: var(--nat-acento-vivo); }

button.nat-btn--linea,
a.nat-btn--linea {
	background: transparent;
	color: var(--nat-acento-texto);
	border-color: var(--nat-acento);
}
button.nat-btn--linea:hover,
a.nat-btn--linea:hover {
	background: var(--nat-acento-claro);
	color: var(--nat-acento-texto);
	border-color: var(--nat-acento);
}

button.nat-btn--tenue,
a.nat-btn--tenue {
	background: transparent;
	color: var(--nat-texto-2);
	border-color: var(--nat-borde-2);
}
button.nat-btn--tenue:hover,
a.nat-btn--tenue:hover {
	background: transparent;
	color: var(--nat-texto);
	border-color: var(--nat-texto-3);
}

/* ═══════════════════════════════════════════
   9 · PÁGINAS ESTÁTICAS
   ═══════════════════════════════════════════ */

.nat-pagina { background: var(--nat-bg); color: var(--nat-texto); }
.nat-medida { max-width: 760px; }
.nat-centrado { text-align: center; }
.nat-fila--centrada { justify-content: center; }

.nat-bajada {
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.8;
	color: var(--nat-texto-2);
	margin-top: calc(var(--nat-paso) * 2);
}

.nat-titulo + .nat-bajada { margin-top: calc(var(--nat-paso) * 2); }
.nat-eyebrow + .nat-titulo { margin-top: calc(var(--nat-paso) * 1.5); }
.nat-titulo.nat-centrado { margin-bottom: calc(var(--nat-paso) * 4); }

.nat-cita-autor {
	display: block;
	font-size: 12px;
	font-style: normal;
	color: var(--nat-texto-3);
	margin-top: calc(var(--nat-paso) * -1.5);
}

/* Alternancia de fondos entre secciones */
.nat-sobre__ejes,
.nat-sobre__historia { background: var(--nat-bg-2); }
.nat-sobre__porque   { border-block: 1px solid var(--nat-borde); }

.nat-sobre__proposito { text-align: center; }
.nat-sobre__proposito .nat-medida { margin-inline: auto; }
.nat-sobre__proposito .nat-bajada { margin-inline: auto; max-width: 620px; }

/* Ejes */
.nat-eje { position: relative; }
.nat-eje__numero {
	display: block;
	font-size: 11px;
	color: var(--nat-acento-texto);
	letter-spacing: .1em;
	margin-bottom: calc(var(--nat-paso) * 1.5);
}
.nat-eje h3 { margin-bottom: var(--nat-paso); }

/* Personas */
.nat-persona { text-align: left; }
.nat-persona .nat-avatar { margin-bottom: calc(var(--nat-paso) * 1.5); }
.nat-persona__nombre { margin-bottom: 2px; }
.nat-persona__rol { font-size: 13px; color: var(--nat-acento-texto); margin-bottom: 2px; }
.nat-persona__profesion { font-size: 13px; color: var(--nat-texto-3); }
.nat-persona__nota { font-size: 13px; margin-top: var(--nat-paso); }

/* Hitos */
.nat-hitos { list-style: none; margin: calc(var(--nat-paso) * 2) 0 0; padding: 0; }
.nat-hito {
	display: flex;
	gap: calc(var(--nat-paso) * 3);
	padding-block: calc(var(--nat-paso) * 3);
	border-bottom: 1px solid var(--nat-borde);
}
.nat-hito:last-child { border-bottom: 0; }
.nat-hito__fecha {
	font-family: var(--nat-serif);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 300;
	color: var(--nat-acento-texto);
	line-height: 1.2;
	flex: 0 0 130px;
}
.nat-hito__cuerpo h3 { margin-bottom: 6px; }

@media (max-width: 560px) {
	.nat-hito { flex-direction: column; gap: var(--nat-paso); }
	.nat-hito__fecha { flex: none; }
}

/* Contacto */
.nat-contacto__atajos { margin-top: calc(var(--nat-paso) * 5); }
.nat-atajo { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.nat-atajo__titulo { font-size: 14px; font-weight: 500; color: var(--nat-texto); }
.nat-atajo__texto  { font-size: 13px; color: var(--nat-texto-2); }
.nat-atajo__enlace { font-size: 12px; color: var(--nat-acento-texto); margin-top: 4px; }

.nat-contacto__pie {
	margin-top: calc(var(--nat-paso) * 5);
	padding-top: calc(var(--nat-paso) * 3);
	border-top: 1px solid var(--nat-borde);
}
.nat-contacto__pie .nat-fila { margin-top: calc(var(--nat-paso) * 1.5); }
.nat-contacto__lugar { font-size: 13px; color: var(--nat-texto-3); margin-top: calc(var(--nat-paso) * 2); }

.nat-organizaciones__beneficios { margin-block: calc(var(--nat-paso) * 5); }
.nat-organizaciones__nota { font-size: 13px; color: var(--nat-texto-3); margin-top: calc(var(--nat-paso) * 4); }

/* Aviso visible solo para quien edita */
.nat-aviso-edicion {
	border: 1px dashed var(--nat-tierra);
	background: var(--nat-tierra-claro);
	color: var(--nat-tierra);
	border-radius: var(--nat-r);
	padding: calc(var(--nat-paso) * 2);
	font-size: 13px;
	line-height: 1.6;
}

/* ═══════════════════════════════════════════
   10 · FORMULARIOS
   ═══════════════════════════════════════════
   Contact Form 7 trae su propio marcado y muy pocos estilos. Esto le da la
   forma del sistema sin tener que tocar la plantilla del formulario. */

.nat-formulario { margin-top: calc(var(--nat-paso) * 5); }

.nat-formulario .wpcf7-form p { margin-bottom: calc(var(--nat-paso) * 2); }

.nat-formulario label {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nat-texto-3);
	margin-bottom: 6px;
}

.nat-formulario input[type="text"],
.nat-formulario input[type="email"],
.nat-formulario input[type="url"],
.nat-formulario input[type="tel"],
.nat-formulario select,
.nat-formulario textarea {
	width: 100%;
	font-family: var(--nat-sans);
	font-size: 14px;
	color: var(--nat-texto);
	background: var(--nat-bg);
	border: 1px solid var(--nat-borde-2);
	border-radius: var(--nat-r);
	padding: 11px 14px;
	transition: border-color var(--nat-transicion);
}

.nat-formulario textarea { min-height: 140px; resize: vertical; }

.nat-formulario input:focus,
.nat-formulario select:focus,
.nat-formulario textarea:focus {
	outline: none;
	border-color: var(--nat-acento);
	box-shadow: 0 0 0 3px var(--nat-acento-claro);
}

.nat-formulario input::placeholder,
.nat-formulario textarea::placeholder { color: var(--nat-texto-3); }

/* El botón de envío de CF7 es un input[type=submit]: hay que ganarle al tema
   con la misma técnica de especificidad del bloque 8. */
.nat-formulario input[type="submit"],
.nat-formulario button[type="submit"] {
	font-family: var(--nat-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	background: var(--nat-acento);
	color: var(--nat-acento-contra);
	border: 1.5px solid transparent;
	border-radius: var(--nat-r);
	padding: 12px 24px;
	cursor: pointer;
	width: auto;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	transition: background var(--nat-transicion);
}
.nat-formulario input[type="submit"]:hover,
.nat-formulario button[type="submit"]:hover {
	background: var(--nat-acento-vivo);
	color: var(--nat-acento-contra);
}

/* Mensajes de validación */
.nat-formulario .wpcf7-not-valid-tip {
	font-size: 12px;
	color: #B3402E;
	margin-top: 5px;
}
[data-nat-tema="dark"] .nat-formulario .wpcf7-not-valid-tip { color: #E88B79; }

.nat-formulario .wpcf7-response-output {
	border-radius: var(--nat-r);
	border-width: 1px;
	font-size: 13px;
	padding: 12px 16px;
	margin: calc(var(--nat-paso) * 2) 0 0;
}

/* ── Consentimiento y opciones ────────────────────────────────────────────
   La regla de arriba pone las etiquetas de campo en mayúsculas diminutas,
   que es lo correcto para «Nombre» o «Correo». Pero barría también el texto
   de consentimiento, dejándolo en versalitas de 11 px: justo lo contrario de
   lo que un consentimiento debería ser. Un texto que pide permiso tiene que
   leerse como una frase normal. */

.nat-formulario .wpcf7-acceptance label,
.nat-formulario .wpcf7-checkbox label,
.nat-formulario .wpcf7-radio label,
.nat-formulario .wpcf7-list-item-label {
	display: inline-flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nat-texto-2);
	line-height: 1.6;
	cursor: pointer;
	margin-bottom: 0;
}

.nat-formulario .wpcf7-list-item { margin-left: 0; }

.nat-formulario input[type="checkbox"],
.nat-formulario input[type="radio"] {
	width: auto;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--nat-acento);
}

/* Con un campo de aceptación, Contact Form 7 mantiene el botón deshabilitado
   hasta que se marca. Que se note que está a la espera y no averiado. */
.nat-formulario input[type="submit"]:disabled,
.nat-formulario button[type="submit"]:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* ═══════════════════════════════════════════
   11 · NOTICIAS
   ═══════════════════════════════════════════ */

.nat-cabecera {
	padding-block: clamp(28px, 5vw, 52px) calc(var(--nat-paso) * 3);
	border-bottom: 1px solid var(--nat-borde);
}

/* Filtros */
.nat-filtros {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	padding-block: calc(var(--nat-paso) * 2);
}
.nat-filtro {
	font-size: 12px;
	line-height: 1;
	padding: 7px 14px;
	border: 1px solid var(--nat-borde-2);
	border-radius: var(--nat-r-pill);
	color: var(--nat-texto-2);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--nat-transicion), color var(--nat-transicion), background var(--nat-transicion);
}
.nat-filtro:hover { border-color: var(--nat-texto-3); color: var(--nat-texto); }
.nat-filtro--activo,
.nat-filtro--activo:hover {
	background: var(--nat-acento);
	border-color: var(--nat-acento);
	color: var(--nat-acento-contra);
}

/* Estructura de dos columnas */
.nat-noticias__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: calc(var(--nat-paso) * 5);
	padding-block: calc(var(--nat-paso) * 4) calc(var(--nat-paso) * 8);
	align-items: start;
}
@media (max-width: 1000px) {
	.nat-noticias__cuerpo { grid-template-columns: 1fr; }
}

/* Entrada destacada */
.nat-destacada {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: calc(var(--nat-paso) * 4);
	align-items: center;
	padding-bottom: calc(var(--nat-paso) * 5);
	margin-bottom: calc(var(--nat-paso) * 5);
	border-bottom: 1px solid var(--nat-borde);
}
.nat-destacada__cuerpo { order: -1; display: flex; flex-direction: column; gap: calc(var(--nat-paso) * 1.5); }
.nat-destacada__cuerpo h2 a { color: inherit; text-decoration: none; }
.nat-destacada__cuerpo h2 a:hover { color: var(--nat-acento-texto); }
.nat-destacada__imagen {
	display: block;
	border-radius: var(--nat-r-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.nat-destacada__imagen img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 700px) {
	.nat-destacada { grid-template-columns: 1fr; }
}

/* Tarjeta de entrada */
.nat-entrada { display: flex; flex-direction: column; gap: var(--nat-paso); }
.nat-entrada__imagen {
	display: block;
	border-radius: var(--nat-r);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	margin: calc(var(--nat-paso) * -1) calc(var(--nat-paso) * -1) var(--nat-paso);
}
.nat-entrada__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.nat-card--enlace:hover .nat-entrada__imagen img { transform: scale(1.03); }
.nat-entrada__meta { gap: 6px; }
.nat-entrada__titulo { line-height: 1.25; }
.nat-entrada__titulo a { color: inherit; text-decoration: none; }
.nat-entrada__titulo a:hover { color: var(--nat-acento-texto); }

@media (prefers-reduced-motion: reduce) {
	.nat-entrada__imagen img { transition: none; }
	.nat-card--enlace:hover .nat-entrada__imagen img { transform: none; }
}

/* Firma */
.nat-firma { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--nat-paso); }
.nat-avatar--sm { width: 34px; height: 34px; font-size: 12px; }
.nat-firma__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nat-firma__nombre { font-size: 13px; font-weight: 500; color: var(--nat-texto); }
.nat-firma__nombre a { color: inherit; text-decoration: none; }
.nat-firma__nombre a:hover { color: var(--nat-acento-texto); }
.nat-firma__meta { font-size: 11px; color: var(--nat-texto-3); }

/* Barra lateral */
.nat-lateral { display: flex; flex-direction: column; gap: calc(var(--nat-paso) * 3); position: sticky; top: calc(var(--nat-paso) * 3); }
@media (max-width: 1000px) { .nat-lateral { position: static; } }

.nat-widget {
	border: 1px solid var(--nat-borde);
	border-radius: var(--nat-r-lg);
	padding: calc(var(--nat-paso) * 2.5);
}
.nat-widget--destacado { background: var(--nat-acento-claro); border-color: var(--nat-borde-2); }
.nat-widget__titulo {
	font-family: var(--nat-serif);
	font-size: 18px;
	font-weight: 400;
	font-style: italic;
	margin-bottom: var(--nat-paso);
	color: var(--nat-texto);
}
.nat-widget p { font-size: 13px; line-height: 1.7; }
.nat-widget .nat-ia { white-space: nowrap; }

/* Publicidad */
.nat-anuncio { display: flex; flex-direction: column; gap: 6px; }
.nat-anuncio__etiqueta {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nat-texto-3);
}
.nat-anuncio img {
	width: 100%;
	height: auto;
	max-height: var(--nat-ad-alto, 180px);
	object-fit: contain;
	border-radius: var(--nat-r);
}

/* Paginación */
.nat-paginacion { margin-top: calc(var(--nat-paso) * 5); }
.nat-paginacion .nav-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.nat-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 10px;
	border: 1px solid var(--nat-borde-2);
	border-radius: var(--nat-r);
	font-size: 13px;
	color: var(--nat-texto-2);
	text-decoration: none;
}
.nat-paginacion .page-numbers:hover { border-color: var(--nat-texto-3); color: var(--nat-texto); }
.nat-paginacion .page-numbers.current {
	background: var(--nat-acento);
	border-color: var(--nat-acento);
	color: var(--nat-acento-contra);
}

.nat-vacio { color: var(--nat-texto-3); font-size: 14px; padding-block: calc(var(--nat-paso) * 4); }

/* ── Entrada completa ── */
.nat-entrada-completa__cabecera { padding-block: clamp(28px, 5vw, 56px) calc(var(--nat-paso) * 3); }
.nat-entrada-completa__cabecera .nat-medida { margin-inline: auto; display: flex; flex-direction: column; gap: calc(var(--nat-paso) * 2); }
.nat-entrada-completa__cabecera .nat-firma { margin-top: var(--nat-paso); }

.nat-entrada-completa__imagen { margin: 0 0 calc(var(--nat-paso) * 5); }
.nat-entrada-completa__imagen img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.nat-entrada-completa__imagen figcaption {
	font-size: 12px;
	color: var(--nat-texto-3);
	text-align: center;
	margin-top: var(--nat-paso);
}

/* Prosa del artículo: la medida y el ritmo son lo que hace legible un texto largo. */
.nat-prosa { margin-inline: auto; font-size: 16px; line-height: 1.8; color: var(--nat-texto-2); }
.nat-prosa > * + * { margin-top: calc(var(--nat-paso) * 2.5); }
.nat-prosa h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: calc(var(--nat-paso) * 5); }
.nat-prosa h3 { font-size: clamp(18px, 2.2vw, 22px); margin-top: calc(var(--nat-paso) * 4); }
.nat-prosa img { max-width: 100%; height: auto; border-radius: var(--nat-r); }
.nat-prosa ul, .nat-prosa ol { padding-left: calc(var(--nat-paso) * 3); }
.nat-prosa li + li { margin-top: 6px; }
.nat-prosa a { color: var(--nat-acento-texto); }

.nat-entrada-completa__temas { margin-inline: auto; margin-top: calc(var(--nat-paso) * 5); padding-top: calc(var(--nat-paso) * 3); border-top: 1px solid var(--nat-borde); }
.nat-entrada-completa__temas .nat-fila { margin-top: var(--nat-paso); }

.nat-relacionadas { background: var(--nat-bg-2); margin-top: calc(var(--nat-paso) * 8); }

/* ── Ajuste de la rejilla de noticias ─────────────────────────────────────
   Con la cabecera lateral de Betheme y la barra de widgets, la columna de
   contenido queda en unos 820 px. Tres columnas fijas daban tarjetas de 263 px:
   demasiado estrechas para un titular en serif, que salía partido en siete
   líneas. Que la rejilla decida cuántas columnas caben según el ancho real. */
.nat-noticias__grid,
.nat-relacionadas .nat-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

/* ── Enlaces con forma de componente ──────────────────────────────────────
   Tercera aparición del mismo problema: «.nat a» pesa (0,1,1) y gana a una
   clase suelta como «.nat-filtro--activo», que pesa (0,1,0). El filtro activo
   acababa con el texto del mismo color que su fondo — invisible.

   Cualquier componente que se pinte sobre un <a> necesita el prefijo «.nat»
   para subir a (0,2,0). Se agrupan aquí para que la próxima vez que aparezca
   un componente-enlace se sepa dónde añadirlo. */

.nat .nat-filtro { color: var(--nat-texto-2); }
.nat .nat-filtro:hover { color: var(--nat-texto); }
.nat .nat-filtro--activo,
.nat .nat-filtro--activo:hover {
	background: var(--nat-acento);
	border-color: var(--nat-acento);
	color: var(--nat-acento-contra);
}

.nat a.nat-tag { color: var(--nat-acento-texto); text-decoration: none; }
.nat a.nat-tag--tierra { color: var(--nat-tierra); }
.nat a.nat-tag--agua { color: var(--nat-agua); }
.nat a.nat-tag:hover { background: var(--nat-acento); color: var(--nat-acento-contra); }

/* ── Medida de lectura del artículo ───────────────────────────────────────
   Medido sobre el post de lanzamiento: con 760 px y cuerpo de 16 px salían
   unos 96 caracteres por línea. El rango cómodo para lectura larga está entre
   60 y 75: pasado ese punto el ojo pierde el comienzo de la línea siguiente y
   leer cansa.

   La medida se aplica solo al cuerpo del artículo. Los titulares y la firma
   siguen con la medida ancha, donde una línea larga no molesta.

   Comprobado en el navegador y no a ojo: 620 px con cuerpo de 17 px dan 73
   caracteres. Con 660 px salían 78, porque al subir el cuerpo de 16 a 17 la
   cuenta cambia y la primera estimación se quedó corta. */
.nat-prosa {
	max-width: 620px;
	font-size: 17px;
}

/* ═══════════════════════════════════════════
   12 · BIBLIOTECA
   ═══════════════════════════════════════════ */

.nat-biblioteca__filtros {
	padding-block: calc(var(--nat-paso) * 2);
	display: flex;
	flex-direction: column;
	gap: var(--nat-paso);
	border-bottom: 1px solid var(--nat-borde);
}
.nat-filtros-fila { display: flex; align-items: center; gap: calc(var(--nat-paso) * 1.5); flex-wrap: wrap; }
.nat-filtros-fila__rotulo { flex: 0 0 44px; }
.nat-filtros-fila .nat-filtros { padding-block: 0; }

.nat-biblioteca__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: calc(var(--nat-paso) * 5);
	padding-block: calc(var(--nat-paso) * 4) calc(var(--nat-paso) * 8);
	align-items: start;
}
@media (max-width: 1000px) { .nat-biblioteca__cuerpo { grid-template-columns: 1fr; } }

.nat-biblioteca__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

.nat-material { display: flex; flex-direction: column; gap: var(--nat-paso); }
.nat-material__etiquetas { gap: 6px; }
.nat-material__titulo { line-height: 1.3; }
.nat-material__titulo a { color: inherit; text-decoration: none; }
.nat-material__titulo a:hover { color: var(--nat-acento-texto); }
.nat-material__resumen { font-size: 13px; }
.nat-material__meta { font-size: 12px; color: var(--nat-texto-3); }
.nat-material__accion { margin-top: auto; padding-top: var(--nat-paso); font-size: 12px; }
.nat-material__descargar { color: var(--nat-acento-texto); }
.nat-material__bloqueado { color: var(--nat-tierra); }

/* El material cerrado se ve, pero se nota que lo está. */
.nat-material--cerrado { border-style: dashed; }

/* Destacado: una línea de acento arriba. Basta para que la vista salte ahí
   primero sin romper la rejilla ni hacer la tarjeta más grande que las demás. */
.nat-material--destacado { border-top: 2px solid var(--nat-acento); }

.nat-candado { white-space: nowrap; }

/* ── Ficha ── */
.nat-material-ficha__reja {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: calc(var(--nat-paso) * 6);
	align-items: start;
}
@media (max-width: 900px) {
	.nat-material-ficha__reja { grid-template-columns: 1fr; gap: calc(var(--nat-paso) * 4); }
}

.nat-material-ficha__principal { display: flex; flex-direction: column; gap: calc(var(--nat-paso) * 2); }
.nat-material-ficha__texto { max-width: none; margin-inline: 0; }
.nat-material-ficha__temas { margin-top: calc(var(--nat-paso) * 2); padding-top: calc(var(--nat-paso) * 3); border-top: 1px solid var(--nat-borde); }
.nat-material-ficha__temas .nat-fila { margin-top: var(--nat-paso); }

.nat-material-ficha__panel {
	display: flex;
	flex-direction: column;
	gap: calc(var(--nat-paso) * 2);
	position: sticky;
	top: calc(var(--nat-paso) * 3);
}
@media (max-width: 900px) { .nat-material-ficha__panel { position: static; } }

.nat-material-ficha__portada img { width: 100%; height: auto; border-radius: var(--nat-r-lg); border: 1px solid var(--nat-borde); }

.nat-ficha-datos {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px calc(var(--nat-paso) * 2);
	margin: 0;
	padding: calc(var(--nat-paso) * 2);
	border: 1px solid var(--nat-borde);
	border-radius: var(--nat-r-lg);
	font-size: 13px;
}
.nat-ficha-datos dt { color: var(--nat-texto-3); }
.nat-ficha-datos dd { margin: 0; color: var(--nat-texto); }

.nat-btn--bloque { width: 100%; justify-content: center; }

/* Muro */
.nat-muro {
	border: 1px solid var(--nat-borde-2);
	background: var(--nat-tierra-claro);
	border-radius: var(--nat-r-lg);
	padding: calc(var(--nat-paso) * 3);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--nat-paso);
}
.nat-muro__icono { font-size: 22px; margin: 0; }
.nat-muro p { font-size: 13px; }
.nat-muro .nat-btn { margin-top: var(--nat-paso); }
.nat-muro__nota { font-size: 12px; color: var(--nat-texto-3); }

.nat-volver { font-size: 13px; color: var(--nat-texto-3); text-decoration: none; }
.nat-volver:hover { color: var(--nat-acento-texto); }

/* ═══════════════════════════════════════════
   13 · ENTREVISTAS
   ═══════════════════════════════════════════ */

.nat-entrevistas__cuerpo { padding-block: calc(var(--nat-paso) * 4) calc(var(--nat-paso) * 8); }

/* La rejilla decide cuántas columnas caben según el ancho real, en vez de
   fijar un número: con tres videos y pantalla ancha no queda un hueco. */
.nat-entrevistas__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.nat-video { display: flex; flex-direction: column; gap: var(--nat-paso); }

/* ── La portada del video ── */

/* Es un botón porque hace algo: carga el reproductor. Un div con un clic
   encima no lo alcanza ni el tabulador ni un lector de pantalla. */
.nat-video__portada {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--nat-borde);
	border-radius: var(--nat-r);
	overflow: hidden;
	background: var(--nat-tierra-claro);
	cursor: pointer;
	aspect-ratio: 16 / 9;
	line-height: 0;
}
.nat-video__portada img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.nat-video__portada:hover img { transform: scale(1.03); }
.nat-video__sin-portada { display: block; width: 100%; height: 100%; background: var(--nat-tierra-claro); }

.nat-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--nat-acento) 92%, transparent);
	color: #fff;
	font-size: 18px;
	line-height: 54px;
	text-align: center;
	padding-left: 4px;
	transition: transform .2s ease;
}
.nat-video__portada:hover .nat-video__play { transform: scale(1.08); }

.nat-video__duracion {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, .78);
	color: #fff;
	font-size: 11px;
	line-height: 1.5;
	padding: 2px 6px;
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
}

/* El reproductor que sustituye a la portada al pulsar. */
.nat-video__reproductor {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--nat-r);
	overflow: hidden;
	border: 1px solid var(--nat-borde);
}
.nat-video__marco { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── El texto de la tarjeta ── */

.nat-video__cuerpo { display: flex; flex-direction: column; gap: 4px; }
.nat-video__titulo { line-height: 1.3; }
.nat-video__titulo a { color: inherit; text-decoration: none; }
.nat-video__titulo a:hover { color: var(--nat-acento-texto); }
.nat-video__quien { font-size: 13px; color: var(--nat-texto-2); margin: 0; }
.nat-video__meta { font-size: 12px; color: var(--nat-texto-3); margin: 0; }
.nat-video__resumen { font-size: 13px; margin-top: 4px; }
.nat-video__externo { margin-top: calc(var(--nat-paso) * 2); }

/* ── La ficha ── */

.nat-entrevista__ancho { max-width: 820px; }
.nat-entrevista__video { margin-block: calc(var(--nat-paso) * 3); }

.nat-entrevista__datos {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--nat-paso) * 4);
	margin: 0 0 calc(var(--nat-paso) * 3);
	padding-bottom: calc(var(--nat-paso) * 3);
	border-bottom: 1px solid var(--nat-borde);
}
.nat-entrevista__datos dt {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nat-texto-3);
	margin-bottom: 2px;
}
.nat-entrevista__datos dd { margin: 0; font-size: 14px; }
.nat-entrevista__temas { margin-block: calc(var(--nat-paso) * 4); }
.nat-entrevista__texto { max-width: 620px; }

/* ── El bloque de la portada ── */

/* Vive dentro de una página del maquetador, así que trae su propio fondo y
   respiración: no puede contar con la caja que le pongan alrededor. */
.nat-portada-entrevistas {
	background: var(--nat-bg);
	padding-block: calc(var(--nat-paso) * 8);
}
.nat-portada-entrevistas__cabecera {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: calc(var(--nat-paso) * 3);
	flex-wrap: wrap;
	margin-bottom: calc(var(--nat-paso) * 4);
}
.nat-portada-entrevistas__cabecera .nat-bajada { margin-bottom: 0; }

.nat-portada-entrevistas__reja {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: calc(var(--nat-paso) * 4);
	align-items: start;
}
.nat-portada-entrevistas__lista {
	display: flex;
	flex-direction: column;
	gap: calc(var(--nat-paso) * 3);
}

/* Las tres pequeñas van con la portada al lado del texto: apiladas serían
   tres tarjetas iguales a la grande y se perdería la jerarquía. */
.nat-portada-entrevistas__lista .nat-video {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: var(--nat-paso);
	align-items: start;
}
.nat-portada-entrevistas__lista .nat-video__play { width: 34px; height: 34px; line-height: 34px; font-size: 12px; }
.nat-portada-entrevistas__lista .nat-video__resumen { display: none; }

@media (max-width: 900px) {
	.nat-portada-entrevistas__reja { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.nat-portada-entrevistas__lista .nat-video { grid-template-columns: 1fr; }
	.nat-portada-entrevistas__lista .nat-video__play { width: 54px; height: 54px; line-height: 54px; font-size: 18px; }
}