/* ==========================================================================
   Portada (Inicio)
   ========================================================================== */

/* 0. Hero (apertura de la portada) */
.portada-hero { background: var(--papel); }
.portada-hero__texto {
	flex: 1.3 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: clamp(40px, 6cqi, 104px) var(--margen) clamp(36px, 5cqi, 88px);
}
.portada-hero__titulo {
	max-width: 14ch;
	font-weight: 900;
	font-size: clamp(48px, 8cqi, 132px);
	line-height: 0.88;
	letter-spacing: -0.045em;
}
.portada-hero__entradilla { max-width: 52ch; font-size: clamp(18px, 1.6cqi, 22px); line-height: 1.45; color: var(--texto-2); }
.portada-hero__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.portada-hero__imagen { flex: 1 1 360px; min-height: clamp(320px, 36cqi, 560px); }
.portada-hero__imagen.foto { aspect-ratio: auto; }
.portada-hero--rojo { background: var(--rojo); color: var(--papel); }
.portada-hero--rojo .portada-hero__entradilla { color: var(--papel); }

/* Hero con foto de fondo: capa oscura (más densa a la izquierda, donde va el texto) y texto en blanco. */
.portada-hero--fondo {
	position: relative;
	isolation: isolate;
	min-height: clamp(520px, 46cqi, 760px);
	background: var(--tinta);
	color: var(--papel);
}
.portada-hero--fondo .portada-hero__fondo { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
.portada-hero--fondo .portada-hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.portada-hero--fondo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(29, 27, 26, .86) 0%, rgba(29, 27, 26, .62) 55%, rgba(29, 27, 26, .25) 100%),
		rgba(29, 27, 26, .2);
}
.portada-hero--fondo .portada-hero__titulo,
.portada-hero--fondo .portada-hero__entradilla { color: var(--papel); }
.portada-hero--fondo .portada-hero__texto { flex-basis: 100%; }
.portada-hero--fondo .portada-hero__titulo { text-shadow: 0 2px 24px rgba(29, 27, 26, .35); }
.portada-hero--fondo :focus-visible { outline-color: var(--papel); }

/* 1. Noticias */
.portada-noticias { padding-top: clamp(24px, 3.5cqi, 48px); }
.portada-noticias__fecha { font-size: 14px; color: var(--gris); }
.portada-destacada {
	flex: 2 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.portada-destacada__titulo {
	font-weight: 800;
	font-size: var(--fs-h1-destacada);
	line-height: 1;
	letter-spacing: -0.03em;
}
.portada-destacada .entradilla { max-width: 62ch; }
/* Foto de la destacada algo más baja que 16:9, para que el titular y la entradilla queden más arriba. */
.portada-destacada .foto--16x9 { aspect-ratio: 11 / 5; }
.portada-destacada .foto--16x9 img { object-position: 50% 35%; }
.portada-lateral { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; }

/* 2. Reza con el Papa León */
.portada-oracion {
	padding: clamp(32px, 4cqi, 56px) var(--margen);
	background: var(--rojo);
	color: var(--papel);
}
.portada-oracion__fila {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3cqi, 48px);
	align-items: flex-end;
	justify-content: space-between;
}
.portada-oracion__texto { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.portada-oracion__titulo {
	font-weight: 800;
	font-size: clamp(32px, 4cqi, 60px);
	line-height: 1;
	letter-spacing: -0.03em;
}
.portada-oracion__parrafo { font-size: var(--fs-entradilla); line-height: 1.45; max-width: 60ch; }

/* 3. Testimonios */
.portada-serie {
	flex: 1.4 1 480px;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: clamp(20px, 2.4cqi, 32px);
	background: var(--hueso);
}
.portada-serie__foto { flex: 1 1 220px; }
.portada-serie__texto {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}
.portada-serie__arriba { display: flex; flex-direction: column; gap: 14px; }
.portada-serie__titulo {
	font-weight: 800;
	font-size: clamp(30px, 3cqi, 44px);
	line-height: 1;
	letter-spacing: -0.03em;
}
.portada-serie__parrafo { font-size: 17px; line-height: 1.5; color: var(--texto-2); }
.portada-serie .boton { align-self: flex-start; }
.portada-testimonios { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; }

/* 4. Papa Tracker */
.portada-tracker {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-top: var(--regla);
	border-bottom: var(--regla);
}
/* Cada celda lleva regla arriba y a la izquierda, desplazada 2px: las que caen
   en el borde de la franja quedan recortadas. Así las reglas siguen bien al
   apilarse, sin puntos de corte. */
.portada-tracker__celda {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	margin: -2px 0 0 -2px;
	padding: clamp(24px, 3cqi, 40px) var(--margen);
	border-top: var(--regla);
	border-left: var(--regla);
}
.portada-tracker__intro { flex-direction: column; gap: 12px; justify-content: center; }
.portada-tracker__etiqueta { display: flex; align-items: center; gap: 8px; }
.portada-tracker__etiqueta::before { content: ""; width: 10px; height: 10px; background: var(--rojo); flex: none; }
.portada-tracker__titulo {
	font-weight: 800;
	font-size: clamp(28px, 2.8cqi, 40px);
	line-height: 1.05;
	letter-spacing: -0.025em;
}
.portada-tracker__apoyo { font-size: 16px; color: var(--texto-2); max-width: 40ch; }
.portada-tracker__ahora {
	gap: 20px;
	align-items: center;
	padding-left: clamp(20px, 3cqi, 40px);
	padding-right: clamp(20px, 3cqi, 40px);
}
.portada-tracker__dato { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.portada-tracker__rotulo { font-size: 13px; font-weight: 600; color: var(--gris); }
.portada-tracker__lugar { font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.portada-tracker__coordenadas { font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }
.portada-tracker__proximo {
	flex-direction: column;
	gap: 14px;
	justify-content: center;
	background: var(--tinta);
	color: var(--papel);
}
.portada-tracker__proximo .portada-tracker__rotulo { color: var(--gris-claro); }
.portada-tracker__acto { font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.portada-tracker__cuando { font-size: 15px; color: var(--gris-pie); font-variant-numeric: tabular-nums; }

/* 5. La semana del Papa */
.portada-semana__fila { display: flex; flex-wrap: wrap; gap: var(--hueco); }
.portada-semana__newsletter {
	flex: 1.6 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.portada-semana__newsletter .entradilla { max-width: 52ch; }
.portada-semana__imagen { flex: 1 1 300px; min-width: 0; align-self: stretch; }