/*
 * Informe FAME
 * Todas las reglas van bajo #informefame / #informefame-creditos: nada sale del contenedor.
 *
 * Mobile first: los estilos base son los de móvil; se amplían con min-width.
 *   - Tableta:    min-width: 641px
 *   - Escritorio: min-width: 1001px
 */

/* Tipografías (Barlow, SIL Open Font License: assets/fonts/OFL.txt).
   Nombres propios para no chocar con una Barlow que pudiera cargar el tema. */

@font-face {
	font-family: "ifame-barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/barlow-400.woff2") format("woff2");
}

@font-face {
	font-family: "ifame-barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-600.woff2") format("woff2");
}

@font-face {
	font-family: "ifame-barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-700.woff2") format("woff2");
}

@font-face {
	font-family: "ifame-barlow-condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}

@font-face {
	font-family: "ifame-barlow-condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}

@font-face {
	font-family: "ifame-barlow-condensed";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-condensed-700-italic.woff2") format("woff2");
}

/* ==========================================================================
   Base (móvil)
   ========================================================================== */

/* Colores y tipografía base (paleta del PDF del informe). */

#informefame,
#informefame-creditos,
#informefame-billboard {
	--ifame-ink: #231426;
	--ifame-paper: #fef8fb;
	--ifame-magenta: #e91e63;
	--ifame-magenta-soft: #ffe2ea;
	--ifame-violet: #6e0080;
	--ifame-violet-soft: #f0e3f3;
	--ifame-leaf: #399e43;
	--ifame-leaf-dark: #2b7a33;
	--ifame-leaf-soft: #dbf3db;
	--ifame-border: #eadfe6;

	--ifame-font: "ifame-barlow", "Helvetica Neue", Arial, sans-serif;
	--ifame-font-figures: "ifame-barlow-condensed", "Arial Narrow", sans-serif;

	color: var(--ifame-ink);
	background: var(--ifame-paper);
	font-family: var(--ifame-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Su tema pone tipografía directamente en elementos (p. ej. "body, ul { font-family: Arial }"):
   dentro del informe todo hereda la del informe. Las reglas con clase de abajo la cambian donde haga falta. */
#informefame *,
#informefame-creditos *,
#informefame-billboard * {
	font-family: inherit;
}

/* Hestia pone Roboto Slab en los títulos y su CSS adicional los fuerza a rosa con !important:
   aquí el informe decide su propia tipografía y color. */
#informefame :is(h1, h2, h3, h4, h5, h6),
#informefame-creditos :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.5em;
	color: var(--ifame-ink) !important;
	font-family: var(--ifame-font);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
}

#informefame :is(p, li, dt, dd, a, button),
#informefame-creditos :is(p, li, dt, dd, a, button) {
	font-size: inherit;
	line-height: inherit;
}

#informefame p,
#informefame-creditos p,
#informefame-billboard p {
	margin: 0 0 1em;
}

#informefame :is(a, button):focus-visible,
#informefame-billboard :is(a, button):focus-visible {
	outline: 3px solid var(--ifame-violet);
	outline-offset: 3px;
}

/* Utilidades */

#informefame .ifame-container,
#informefame-creditos .ifame-container,
#informefame-billboard .ifame-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1180px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 20px;
	padding-left: 20px;
}

#informefame .ifame-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Botones */

#informefame .ifame-button,
#informefame-billboard .ifame-button {
	display: inline-flex;
	align-items: baseline;
	gap: 15px;
	padding: 14px 24px;
	border: 2px solid var(--ifame-magenta);
	border-radius: 999px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

#informefame .ifame-button--primary,
#informefame-billboard .ifame-button--primary {
	color: #fff;
	background: var(--ifame-magenta);
}

#informefame .ifame-button--primary:hover,
#informefame-billboard .ifame-button--primary:hover,
#informefame .ifame-button--primary:focus-visible,
#informefame-billboard .ifame-button--primary:focus-visible {
	color: #fff;
	background: var(--ifame-violet);
	border-color: var(--ifame-violet);
}

#informefame .ifame-button--secondary,
#informefame-billboard .ifame-button--secondary {
	color: var(--ifame-magenta);
	background: transparent;
}

#informefame .ifame-button--secondary:hover,
#informefame-billboard .ifame-button--secondary:hover,
#informefame .ifame-button--secondary:focus-visible,
#informefame-billboard .ifame-button--secondary:focus-visible {
	color: #fff;
	background: var(--ifame-magenta);
}

#informefame .ifame-button-meta,
#informefame-billboard .ifame-button-meta {
	font-size: 13px;
	font-weight: 600;
	opacity: 0.85;
}

/* Portada: fondo oscuro violeta → magenta, título grande, imagen a la derecha (debajo en móvil) */

#informefame .ifame-hero {
	position: relative;
	overflow: hidden;
	padding: 48px 0 40px;
	color: #fff;
	background:
		radial-gradient(60% 70% at 85% 0%, rgba(233, 30, 99, 0.75) 0%, rgba(233, 30, 99, 0) 70%),
		radial-gradient(50% 60% at 0% 100%, rgba(57, 158, 67, 0.25) 0%, rgba(57, 158, 67, 0) 70%),
		linear-gradient(160deg, #6e0080 0%, #4f005c 55%, #33003c 100%);
}

#informefame .ifame-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	align-items: center;
}

#informefame .ifame-hero-eyebrow {
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

#informefame .ifame-hero-title {
	margin-bottom: 16px;
	color: #fff !important;
}

#informefame .ifame-hero-title-main {
	display: block;
	font-family: var(--ifame-font-figures);
	font-size: clamp(48px, 9vw, 128px);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.01em;
}

#informefame .ifame-hero-title-main em {
	color: #ffd6e5;
	font-style: italic;
}

#informefame .ifame-hero-title-sub {
	display: block;
	margin-top: 20px;
	font-size: clamp(19px, 2vw, 22px);
	font-weight: 400;
	line-height: 1.45;
}

#informefame .ifame-hero-lead {
	max-width: 32em;
	margin-bottom: 28px;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(17px, 1.8vw, 20px);
	line-height: 1.45;
}

#informefame .ifame-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 24px;
}

#informefame .ifame-hero .ifame-button--primary {
	box-shadow: 0 0 0 6px rgba(233, 30, 99, 0.3);
}

#informefame .ifame-hero .ifame-button--primary:hover,
#informefame .ifame-hero .ifame-button--primary:focus-visible {
	color: var(--ifame-magenta);
	background: #fff;
	border-color: #fff;
}

#informefame .ifame-hero .ifame-button--secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.8);
}

#informefame .ifame-hero .ifame-button--secondary:hover,
#informefame .ifame-hero .ifame-button--secondary:focus-visible {
	color: var(--ifame-violet);
	background: #fff;
	border-color: #fff;
}

#informefame .ifame-hero :is(a, button):focus-visible {
	outline-color: #fff;
}

#informefame .ifame-hero-by {
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

/* Ancho y proporción fijos para reservar el hueco antes de que cargue la imagen (evita CLS):
   con márgenes auto en el grid, el contenedor mediría 0 hasta la carga. */
#informefame .ifame-hero-media {
	width: 100%;
	max-width: 380px;
	aspect-ratio: 750 / 1000;
	margin: 0 auto;
}

#informefame .ifame-hero-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}

/* Solo en la réplica local, mientras no exista la imagen. */
#informefame .ifame-hero-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	color: rgba(255, 255, 255, 0.7);
	border: 2px dashed rgba(255, 255, 255, 0.5);
	border-radius: 20px;
}

/* Magnitud del estudio (dentro del fondo de la portada) */

#informefame .ifame-magnitude {
	margin-top: 10px;
	color: #fff;
}

#informefame .ifame-magnitude-title {
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

#informefame .ifame-magnitude-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

#informefame .ifame-magnitude-item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 18px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 20px;
}

#informefame .ifame-magnitude-item::after {
	display: block;
	height: 4px;
	margin-top: 14px;
	background: var(--ifame-magenta);
	border-radius: 2px;
	content: "";
}

#informefame .ifame-magnitude-figure {
	font-family: var(--ifame-font-figures);
	font-size: clamp(40px, 5vw, 60px);
	font-weight: 700;
	line-height: 1;
}

#informefame .ifame-magnitude-label {
	margin-top: 6px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.3;
}

#informefame .ifame-magnitude-note {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 13px;
}

/* Pestañas: una sola fila; si no caben, se deslizan en horizontal. */

#informefame .ifame-tabs {
	border-bottom: 1px solid var(--ifame-border);
}

#informefame .ifame-tabs-list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
}

#informefame .ifame-tabs-list::-webkit-scrollbar {
	display: none;
}

#informefame .ifame-tabs-list li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

#informefame .ifame-tab {
	display: block;
	padding: 12px 16px;
	color: var(--ifame-ink);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

#informefame .ifame-tab.is-active {
	color: var(--ifame-magenta);
	border-bottom-color: var(--ifame-magenta);
}

/* Paneles. Sin JavaScript se ven todos; con JavaScript, el atributo hidden oculta los demás. */

#informefame .ifame-panel {
	padding-top: 40px;
	padding-bottom: 56px;
}

#informefame .ifame-panel[hidden] {
	display: none;
}

/* Secciones dentro de las pestañas */

#informefame .ifame-section-title {
	margin-bottom: 20px;
	font-size: clamp(28px, 3.5vw, 40px);
}

#informefame .ifame-section-lead {
	max-width: 40em;
	margin-bottom: 28px;
	font-size: 18px;
}

#informefame .ifame-access {
	margin-bottom: 56px;
}

/* Tarjetas de acceso a los PDF */

#informefame .ifame-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#informefame .ifame-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 22px;
	background: var(--ifame-magenta-soft);
	border-radius: 20px;
}

#informefame .ifame-card-title {
	margin-bottom: 8px;
	font-size: 22px;
}

#informefame .ifame-card-text {
	flex-grow: 1;
	font-size: 16px;
	line-height: 1.45;
}

#informefame .ifame-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: baseline;
}

#informefame .ifame-card-link {
	color: var(--ifame-magenta);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

#informefame .ifame-card-link:hover {
	text-decoration: underline;
}

#informefame .ifame-card-meta,
#informefame .ifame-card-soon {
	color: var(--ifame-violet);
	font-size: 13px;
	font-weight: 600;
}

/* Datos clave (informe, pág. 7) */

#informefame .ifame-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#informefame .ifame-fact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 24px;
	border-radius: 20px;
}

#informefame .ifame-fact-figure {
	font-family: var(--ifame-font-figures);
	font-size: clamp(44px, 5vw, 60px);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

#informefame .ifame-fact-text {
	font-family: var(--ifame-font-figures);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

/* Gráficos de las pastillas (pictogramas, barras y hexágonos, como en la pág. 13 del PDF).
   Toman el color de su pastilla (currentColor); lo vacío va en blanco. */

#informefame .ifame-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

#informefame .ifame-picto {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

#informefame .ifame-picto-icon {
	width: 20px;
	height: 32px;
	fill: #fff;
	transition: fill 0.3s ease calc(var(--ifame-i, 0) * 0.08s);
}

#informefame .ifame-picto-icon.is-filled {
	fill: currentColor;
}

#informefame .ifame-bar {
	display: block;
	height: 10px;
	margin-top: 8px;
	overflow: hidden;
	background: #fff;
	border-radius: 5px;
}

#informefame .ifame-bar-fill {
	display: block;
	width: var(--ifame-value);
	height: 100%;
	background: currentColor;
	border-radius: 5px;
	transition: width 1s ease calc(var(--ifame-i, 0) * 0.2s);
}

#informefame .ifame-bars {
	display: grid;
	gap: 6px;
	margin-top: 8px;
}

#informefame .ifame-bars-row {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
}

#informefame .ifame-bars-row .ifame-bar {
	margin-top: 0;
}

#informefame .ifame-hexagons {
	width: 120px;
	height: 70px;
	margin-top: 4px;
}

#informefame .ifame-hexagon {
	fill: currentColor;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.4s ease calc(var(--ifame-i, 0) * 0.1s), opacity 0.4s ease calc(var(--ifame-i, 0) * 0.1s);
}

#informefame .ifame-hexagon-line {
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* Estado inicial de la animación: solo si hay JavaScript (.ifame-js) y la pastilla aún no se ha visto.
   Sin JavaScript se ve todo directamente. */
#informefame.ifame-js [data-ifame-reveal]:not(.is-visible) .ifame-picto-icon.is-filled {
	fill: #fff;
}

#informefame.ifame-js [data-ifame-reveal]:not(.is-visible) :is(.ifame-bar-fill, .ifame-chart-bar) {
	width: 0;
}

#informefame.ifame-js [data-ifame-reveal]:not(.is-visible) .ifame-hexagon {
	opacity: 0;
	transform: scale(0.4);
}

@media (prefers-reduced-motion: reduce) {
	#informefame .ifame-picto-icon,
	#informefame .ifame-bar-fill,
	#informefame .ifame-chart-bar,
	#informefame .ifame-hexagon {
		transition: none;
	}
}

#informefame .ifame-fact--rosa {
	color: var(--ifame-magenta);
	background: var(--ifame-magenta-soft);
}

#informefame .ifame-fact--violeta {
	color: var(--ifame-violet);
	background: var(--ifame-violet-soft);
}

#informefame .ifame-fact--verde {
	color: var(--ifame-leaf-dark);
	background: var(--ifame-leaf-soft);
}

/* Cifras destacadas de las fichas */

#informefame .ifame-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

#informefame .ifame-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 20px;
	color: var(--ifame-violet);
	background: var(--ifame-violet-soft);
	border-radius: 20px;
}

#informefame .ifame-stat-figure {
	font-family: var(--ifame-font-figures);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

#informefame .ifame-stat-label {
	font-size: 15px;
	line-height: 1.3;
}

/* Ficha en filas: término y descripción (como la tabla del PDF) */

#informefame .ifame-sheet {
	margin: 0 0 40px;
	border-top: 2px solid var(--ifame-violet);
}

#informefame .ifame-sheet-row {
	padding: 20px 0;
	border-bottom: 1px solid var(--ifame-border);
}

#informefame .ifame-sheet-term {
	margin: 0 0 8px;
	color: var(--ifame-violet);
	font-size: 18px;
	font-weight: 700;
}

#informefame .ifame-sheet-desc {
	margin: 0;
}

#informefame .ifame-sheet-desc > :last-child,
#informefame .ifame-sheet-group > :last-child {
	margin-bottom: 0;
}

#informefame .ifame-sheet-group {
	margin-top: 20px;
	padding-left: 16px;
	border-left: 3px solid var(--ifame-magenta-soft);
}

#informefame .ifame-sheet-group-title {
	margin-bottom: 6px;
	font-size: 18px;
}

#informefame .ifame-bullets {
	margin: 0 0 1em;
	padding-left: 1.2em;
	list-style: disc;
}

#informefame .ifame-bullets li {
	margin: 0 0 4px;
}

/* Gráficos de barras (tablas HTML; la barra se dibuja con --ifame-bar) */

#informefame .ifame-charts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 40px;
}

#informefame .ifame-chart {
	margin: 0;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--ifame-border);
	border-radius: 20px;
}

#informefame .ifame-chart-title {
	margin-bottom: 16px;
	color: var(--ifame-violet);
	font-size: 20px;
	font-weight: 700;
}

#informefame .ifame-chart-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
}

#informefame .ifame-chart-table :is(th, td) {
	padding: 7px 0;
	border: 0;
	background: none;
	text-align: left;
	vertical-align: middle;
}

#informefame .ifame-chart-table thead th {
	padding-bottom: 10px;
	color: var(--ifame-violet);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#informefame .ifame-chart-table tbody th {
	width: 38%;
	padding-right: 12px;
	font-weight: 400;
	line-height: 1.25;
}

#informefame .ifame-chart-value {
	display: flex;
	gap: 8px;
	align-items: center;
}

#informefame .ifame-chart-bar {
	display: block;
	flex: 0 0 auto;
	width: calc(var(--ifame-bar) * 0.6);
	height: 14px;
	background: var(--ifame-magenta);
	border-radius: 0 7px 7px 0;
	transition: width 0.8s ease calc(var(--ifame-i, 0) * 0.05s);
}

#informefame .ifame-chart-number {
	font-family: var(--ifame-font-figures);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

#informefame .ifame-chart-table :is(th, td).ifame-chart-n,
#informefame .ifame-chart-table thead th:last-child {
	width: 64px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

#informefame .ifame-chart-table tfoot :is(th, td) {
	padding-top: 10px;
	border-top: 1px solid var(--ifame-border);
	font-weight: 700;
}

#informefame .ifame-chart-note {
	margin: 12px 0 0;
	color: var(--ifame-violet);
	font-size: 14px;
}

/* Capítulos */

#informefame .ifame-editorial {
	margin-bottom: 48px;
	padding: 24px;
	background: #fff;
	border-left: 6px solid var(--ifame-magenta);
	border-radius: 0 20px 20px 0;
}

#informefame .ifame-editorial-title {
	margin-bottom: 16px;
	font-size: 22px;
}

/* Su tema da estilo a todos los blockquote (cursiva, tamaño): aquí se anulan. */
#informefame .ifame-quote,
#informefame .ifame-quote :is(p, footer, strong, span) {
	font-size: 18px;
	font-style: normal;
	line-height: 1.55;
}

#informefame .ifame-quote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: "«" "»";
}

/* Comillas latinas al principio del primer párrafo y al final del último, resaltadas. */
#informefame .ifame-quote > p:first-of-type::before,
#informefame .ifame-quote > p:last-of-type::after {
	position: relative;
	top: 5px;
	color: var(--ifame-magenta);
	font-size: 2em;
	font-weight: 300;
	line-height: 0;
}

#informefame .ifame-quote > p:first-of-type::before {
	content: open-quote;
	margin-right: 2px;
}

#informefame .ifame-quote > p:last-of-type::after {
	content: close-quote;
	margin-left: 2px;
}

#informefame .ifame-quote-author,
#informefame .ifame-quote-author :is(strong, span) {
	color: var(--ifame-violet);
	font-size: 16px;
}

#informefame .ifame-quote-author {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
}

#informefame .ifame-quote-author::before {
	content: none;
}

#informefame .ifame-chapters {
	margin: 0;
	padding: 0;
	list-style: none;
}

#informefame .ifame-chapter {
	margin: 0 0 56px;
	padding: 0 0 48px;
	border-bottom: 1px solid var(--ifame-border);
}

#informefame .ifame-chapter-header {
	margin-bottom: 24px;
}

#informefame .ifame-chapter-number {
	margin-bottom: 8px;
	color: var(--ifame-magenta);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#informefame .ifame-chapter-title {
	max-width: 22em;
	margin-bottom: 16px;
	font-size: clamp(26px, 3vw, 36px);
}

#informefame .ifame-chapter-lead {
	max-width: 42em;
	font-size: 18px;
}

#informefame .ifame-facts--chapter {
	margin-bottom: 24px;
}

#informefame .ifame-chapter-more {
	margin: 0;
}

/* Gráfico de comparación (nivel de estudios) */

#informefame .ifame-compare {
	margin-bottom: 24px;
}

/* Debajo de la tabla: notas a la izquierda y leyenda a la derecha (en móvil, una debajo de otra). */
#informefame .ifame-compare-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	justify-content: space-between;
	margin-top: 16px;
}

#informefame .ifame-compare-notes .ifame-chart-note {
	margin: 0;
}

#informefame .ifame-compare-legend {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 14px;
}

#informefame .ifame-compare-key::before {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	border-radius: 50%;
	content: "";
	vertical-align: -1px;
}

#informefame .ifame-compare-key--a::before,
#informefame .ifame-compare-dot--a {
	background: var(--ifame-violet);
}

#informefame .ifame-compare-key--b::before,
#informefame .ifame-compare-dot--b {
	background: var(--ifame-magenta);
}

/* Gráfico de puntos sobre escala 0-100 %, con líneas verticales cada 20 %.
   Móvil: indicador arriba; debajo, los puntos y la diferencia. */
#informefame .ifame-compare-plot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 56px;
	gap: 0 16px;
	align-items: center;
}

#informefame .ifame-compare-label {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 12px;
	font-size: 15px;
	line-height: 1.35;
}

#informefame .ifame-compare-track {
	position: relative;
	align-self: stretch;
	min-height: 32px;
	background: repeating-linear-gradient(90deg, rgba(110, 0, 128, 0.2) 0 1px, transparent 1px 20%);
}

#informefame .ifame-compare-line {
	position: absolute;
	top: 50%;
	left: min(var(--ifame-a), var(--ifame-b));
	width: calc(max(var(--ifame-a), var(--ifame-b)) - min(var(--ifame-a), var(--ifame-b)));
	height: 2px;
	background: rgba(110, 0, 128, 0.35);
	transform: translateY(-50%);
}

#informefame .ifame-compare-dot {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 50%;
	transform: translateY(-50%);
}

#informefame .ifame-compare-dot--a {
	left: var(--ifame-a);
}

#informefame .ifame-compare-dot--b {
	left: var(--ifame-b);
}

#informefame .ifame-compare-diff {
	margin: 0;
	font-family: var(--ifame-font-figures);
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

/* Eje X: etiquetas centradas bajo cada línea vertical. */
#informefame .ifame-compare-axis {
	position: relative;
	height: 28px;
}

#informefame .ifame-compare-axis span,
#informefame .ifame-compare-axis-diff {
	color: rgba(35, 20, 38, 0.6);
	font-family: var(--ifame-font-figures);
	font-size: 13px;
}

#informefame .ifame-compare-axis span {
	position: absolute;
	top: 6px;
	left: var(--ifame-x);
	transform: translateX(-50%);
}

#informefame .ifame-compare-axis-diff {
	margin: 0;
	padding-top: 6px;
	text-align: center;
	align-self: start;
}

/* Cuatro momentos */

#informefame .ifame-moments {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

#informefame .ifame-moment {
	margin: 0;
	padding: 22px;
	background: var(--ifame-magenta-soft);
	border-radius: 20px;
}

#informefame .ifame-moment-number {
	margin-bottom: 6px;
	color: var(--ifame-magenta);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#informefame .ifame-moment-title {
	margin-bottom: 10px;
	font-size: 20px;
}

#informefame .ifame-moment-need {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
}

/* Tabla del «efecto matrona» */

#informefame .ifame-midwife {
	margin-bottom: 24px;
}

/* Móvil: cada fila apilada (texto y debajo las tres cifras con su etiqueta). */
#informefame .ifame-midwife-table thead {
	display: none;
}

#informefame .ifame-midwife-table tbody tr {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ifame-border);
}

#informefame .ifame-midwife-table tbody th {
	grid-column: 1 / -1;
	width: auto;
	padding: 0;
}

#informefame .ifame-midwife-table tbody td {
	display: flex;
	flex-direction: column;
	padding: 0;
	color: var(--ifame-violet);
	font-family: var(--ifame-font-figures);
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
}

#informefame .ifame-midwife-table tbody td::before {
	content: attr(data-label);
	font-family: var(--ifame-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Cierre */

#informefame .ifame-closing {
	padding: 32px 24px;
	color: #fff;
	background: var(--ifame-magenta);
	border-radius: 20px;
}

#informefame .ifame-closing-eyebrow {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#informefame .ifame-closing-title {
	margin-bottom: 16px;
	color: #fff !important;
	font-size: clamp(26px, 3vw, 36px);
}

#informefame .ifame-closing p:last-child {
	margin-bottom: 0;
}

#informefame .ifame-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
}

/* Créditos (bloque aparte, al final de la página) */

#informefame-creditos {
	padding: 48px 0;
	background: #fff;
	border-top: 1px solid var(--ifame-border);
}

#informefame-creditos .ifame-creditos-title {
	margin-bottom: 24px;
	color: var(--ifame-violet) !important;
	font-size: 13px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

#informefame-creditos .ifame-creditos-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin: 0 0 28px;
}

#informefame-creditos .ifame-creditos-label {
	margin: 0 0 10px;
	color: var(--ifame-magenta);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#informefame-creditos .ifame-creditos-entity {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 12px;
}

#informefame-creditos .ifame-creditos-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	color: var(--ifame-ink);
	text-decoration: none;
}

#informefame-creditos .ifame-creditos-link:hover .ifame-creditos-name {
	color: var(--ifame-magenta);
	text-decoration: underline;
}

#informefame-creditos .ifame-creditos-link:focus-visible {
	outline: 3px solid var(--ifame-violet);
	outline-offset: 4px;
}

#informefame-creditos .ifame-creditos-logo {
	display: block;
	width: auto;
	max-width: 200px;
	height: 44px;
	margin: 0;
	border: 0;
	object-fit: contain;
	object-position: left center;
}

#informefame-creditos .ifame-creditos-name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

#informefame-creditos .ifame-creditos-sponsor {
	margin-bottom: 24px;
	font-size: 15px;
}

#informefame-creditos .ifame-creditos-notice {
	padding: 20px;
	background: var(--ifame-paper);
	border-radius: 16px;
}

#informefame-creditos .ifame-creditos-notice-title {
	margin-bottom: 8px;
	font-size: 15px;
}

#informefame-creditos .ifame-creditos-notice p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

/* ==========================================================================
   Billboard
   Puede ir en cualquier sitio (home a todo el ancho, una columna…): el salto entre
   móvil y escritorio depende del ancho del propio bloque (container query), no de la pantalla.
   ========================================================================== */

#informefame-billboard {
	container-type: inline-size;
	margin: 32px 0;
	background: transparent;
}

/* Móvil: texto arriba; debajo, botón a la izquierda y portada girada a la derecha. */
#informefame-billboard .ifame-billboard-inner {
	display: grid;
	grid-template-areas:
		"text text"
		"actions media";
	grid-template-columns: 1fr 44%;
	gap: 20px 16px;
	align-items: start;
	padding: 28px 22px;
	color: #fff;
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(233, 30, 99, 0.75) 0%, rgba(233, 30, 99, 0) 70%),
		linear-gradient(160deg, #6e0080 0%, #4f005c 55%, #33003c 100%);
	border-radius: 24px;
}

#informefame-billboard .ifame-billboard-text {
	grid-area: text;
}

#informefame-billboard .ifame-billboard-actions {
	grid-area: actions;
}

#informefame-billboard .ifame-billboard-media {
	grid-area: media;
}

#informefame-billboard .ifame-billboard-eyebrow {
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

#informefame-billboard .ifame-billboard-title {
	margin-bottom: 15px;
	color: #fff !important;
	font-family: var(--ifame-font-figures);
	font-size: clamp(40px, 9cqi, 72px);
	line-height: 0.95;
}

#informefame-billboard .ifame-billboard-title em {
	color: #ffd6e5;
	font-style: italic;
}

#informefame-billboard .ifame-billboard-lead {
	margin-bottom: 20px;
	font-size: 24px;
	line-height: 1.35;
}

#informefame-billboard .ifame-billboard-fact {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	line-height: 1.3;
}

#informefame-billboard .ifame-billboard-fact > p {
	margin: 0;
	display: flex;
	gap: 10px;
	align-items: center;
}

/* Con texto delante, la cifra va dentro de la frase, al final: en flex, el texto en dos líneas
   ocupa todo el ancho y la empuja al borde derecho. */
#informefame-billboard .ifame-billboard-fact > p.ifame-billboard-fact--en-linea {
	display: block;
}

#informefame-billboard .ifame-billboard-fact-number {
	color: #ffd6e5;
	font-family: var(--ifame-font-figures);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

#informefame-billboard .ifame-button--primary {
	box-shadow: 0 0 0 6px rgba(233, 30, 99, 0.3);
}

#informefame-billboard .ifame-button--primary:hover,
#informefame-billboard .ifame-button--primary:focus-visible {
	color: var(--ifame-magenta);
	background: #fff;
	border-color: #fff;
}

#informefame-billboard :is(a, button):focus-visible {
	outline-color: #fff;
}

#informefame-billboard .ifame-billboard-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	transform: rotate(6deg);
	filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.35));
}

/* Escritorio (bloque de 600 px o más): portada a la derecha, sobresaliendo por arriba y por abajo. */
@container (min-width: 600px) {
	#informefame-billboard .ifame-billboard-inner {
		grid-template-areas:
			"text media"
			"actions media";
		grid-template-columns: 1fr 31%;
		gap: 24px 40px;
		align-items: center;
		/* Margen arriba y abajo para lo que sobresale la portada. */
		margin: 72px 0;
		padding: 31px 50px;
	}

	#informefame-billboard .ifame-billboard-actions {
		align-self: center;
	}

	/* La portada ocupa el ancho de su columna (nunca pisa el texto). El margen negativo hace que
	   el contenedor sea 80 px más bajo que ella: sobresale 40 px por arriba y por abajo.
	   El margen del contenedor deja ese sitio libre para no taparse con lo de alrededor. */
	#informefame-billboard .ifame-billboard-media {
		align-self: center;
		margin: -80px 0;
	}

	#informefame-billboard .ifame-billboard-fact {
		gap: 0;
	}

	#informefame-billboard .ifame-billboard-fact-number {
		font-size: 40px;
	}
}

/* Bloque de 600 a 899 px: algo menos de relleno y de separación. */
@container (min-width: 600px) and (max-width: 899px) {
	#informefame-billboard .ifame-billboard-inner {
		grid-template-columns: 1fr 40%;
		gap: 20px 28px;
		padding: 36px 32px;
	}
}

/* ==========================================================================
   Tableta (641px en adelante)
   ========================================================================== */

@media (min-width: 641px) {
	#informefame .ifame-container,
	#informefame-creditos .ifame-container {
		padding-right: 24px;
		padding-left: 24px;
	}

	#informefame .ifame-hero {
		padding: 72px 0 56px;
	}

	#informefame .ifame-magnitude-list {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	#informefame .ifame-magnitude-item {
		padding: 22px;
	}

	#informefame .ifame-tab {
		padding: 12px 20px;
	}

	#informefame .ifame-panel {
		padding-top: 48px;
		padding-bottom: 64px;
	}

	#informefame .ifame-section-lead {
		margin-bottom: 32px;
		font-size: 20px;
	}

	#informefame .ifame-access {
		margin-bottom: 72px;
	}

	#informefame .ifame-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	/* Dos columnas; las anchas ocupan las dos. "dense" rellena los huecos que dejan. */
	#informefame .ifame-facts {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-flow: dense;
		gap: 20px;
	}

	#informefame .ifame-stats {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	#informefame .ifame-stats--two {
		grid-template-columns: repeat(2, 1fr);
	}

	#informefame .ifame-editorial {
		padding: 32px 40px;
	}

	#informefame-creditos {
		padding: 64px 0;
	}

	#informefame-creditos .ifame-creditos-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}

	#informefame .ifame-moments {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	#informefame .ifame-closing {
		padding: 48px;
	}

	/* El «efecto matrona» vuelve a ser una tabla. */
	#informefame .ifame-midwife-table thead {
		display: table-header-group;
	}

	#informefame .ifame-midwife-table tbody tr {
		display: table-row;
	}

	#informefame .ifame-midwife-table tbody :is(th, td) {
		padding: 10px 0;
		border-bottom: 1px solid var(--ifame-border);
	}

	#informefame .ifame-midwife-table tbody th {
		width: 46%;
	}

	#informefame .ifame-midwife-table tbody td {
		display: table-cell;
		text-align: right;
	}

	#informefame .ifame-midwife-table tbody td::before {
		content: none;
	}

	#informefame .ifame-midwife-table thead th,
	#informefame .ifame-midwife-table thead th:last-child {
		width: 18%;
		text-align: right;
	}

	/* El gráfico pasa a tres columnas: indicador | puntos | diferencia. */
	#informefame .ifame-compare-plot {
		grid-template-columns: minmax(0, 30%) minmax(0, 1fr) 90px;
		gap: 0 24px;
	}

	#informefame .ifame-compare-label {
		grid-column: auto;
		padding: 10px 0;
	}

	#informefame .ifame-compare-axis {
		grid-column: 2;
	}

	/* La ficha pasa a dos columnas: término a la izquierda, descripción a la derecha. */
	#informefame .ifame-sheet-row {
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 24px;
		padding: 24px 0;
	}

	#informefame .ifame-sheet-term {
		margin: 0;
	}

	#informefame :is(.ifame-fact--dos-tercios, .ifame-fact--completo) {
		grid-column: span 2;
		flex-direction: row;
		gap: 24px;
		align-items: center;
	}

	/* En las pastillas anchas el gráfico va al final de la fila. */
	#informefame :is(.ifame-fact--dos-tercios, .ifame-fact--completo) .ifame-fact-text {
		flex: 1;
	}

	#informefame :is(.ifame-fact--dos-tercios, .ifame-fact--completo) > :is(.ifame-picto, .ifame-bar, .ifame-bars, .ifame-hexagons) {
		flex: 0 0 auto;
		margin-top: 0;
	}

	/* Solo el gráfico de la pastilla (hijo directo), no las barras internas de un gráfico doble. */
	#informefame :is(.ifame-fact--dos-tercios, .ifame-fact--completo) > :is(.ifame-bar, .ifame-bars) {
		width: 220px;
	}
}

/* ==========================================================================
   Escritorio (1001px en adelante)
   ========================================================================== */

@media (min-width: 1001px) {
	#informefame .ifame-hero-grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 48px;
	}

	#informefame .ifame-hero-media {
		max-width: 440px;
		margin: 0 0 0 auto;
	}

	#informefame .ifame-cards {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Dos columnas que se reparten la altura: los gráficos tienen alturas muy distintas. */
	#informefame .ifame-moments {
		grid-template-columns: repeat(4, 1fr);
	}

	#informefame .ifame-charts {
		display: block;
		column-count: 2;
		column-gap: 24px;
	}

	#informefame .ifame-chart {
		margin-bottom: 24px;
		break-inside: avoid;
	}

	/* Seis columnas para reproducir la página 7 del PDF: tercios, dos tercios, mitades y ancho completo. */
	#informefame .ifame-facts {
		grid-template-columns: repeat(6, 1fr);
		grid-auto-flow: row;
	}

	/* Capítulo con cuatro cifras: las cuatro en una fila. */
	#informefame .ifame-facts--cuatro {
		grid-template-columns: repeat(4, 1fr);
	}

	#informefame .ifame-fact--tercio {
		grid-column: span 2;
	}

	#informefame .ifame-fact--dos-tercios {
		grid-column: span 4;
	}

	#informefame .ifame-fact--mitad {
		grid-column: span 3;
	}

	#informefame .ifame-fact--completo {
		grid-column: span 6;
	}
}