/*
 * /internacionalizacion/ v3 — la dimensión europea (Europa real + pasaporte-libro + dossier ACCESS).
 *
 * Depende de sanfelix-page-servicios (base compartido: sf-svc-cta, costuras, eyebrows) → consistencia.
 * Los INTOCABLES (emblema, leyenda, disclaimer, ficha) van sobrios y conforme a norma; el fuego alrededor.
 * Colores de la casa: marca #00a74d, bosque #0b2e1f, crema #f7f5ef, niebla #e1f5ee, ámbar #ef9f27.
 * Familias del mapa: aula=marca, benchmarking=ámbar, viaje=granate #8c2b2b. Azul UE oficial #003399.
 * AAA: textos en bosque/azul-UE sobre papel (medido); nunca marca/ámbar sobre claro como texto.
 */

.sf-intl {
	--sf-intl-bosque: var(--wp--preset--color--verde-bosque, #0b2e1f);
	--sf-intl-marca: var(--wp--preset--color--primario, #00a74d);
	--sf-intl-crema: var(--wp--preset--color--crema, #f7f5ef);
	--sf-intl-niebla: var(--wp--preset--color--verde-niebla, #e1f5ee);
	--sf-intl-aula: #00a74d;
	--sf-intl-bench: #ef9f27;
	--sf-intl-viaje: #b23a3a;
	--sf-intl-azul-ue: #003399;
	--sf-intl-oro: #d7b871;
	color: var(--sf-intl-bosque);
	overflow-x: clip;
}
/* Reset de márgenes SOLO a los títulos propios; NUNCA al CTA canónico (sf-svc-cta__title trae su margen). */
.sf-intl h2:not(.sf-svc-cta__title) { font-family: var(--wp--preset--font-family--titulos); font-weight: 400; line-height: 1.03; margin: 0; }
.sf-intl [class$="__eyebrow"] {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
	margin: 0 0 0.6rem; color: var(--sf-intl-bosque);
}

/* ============================================================================
 * EMBLEMA OFICIAL — INTOCABLE (estático, sin filtros ni animación, con espacio).
 * ========================================================================== */
.sf-eu-emblem { display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.9rem; }
.sf-eu-emblem__flag { display: block; flex: 0 0 auto; line-height: 0; }
.sf-eu-emblem__svg {
	display: block; width: 72px; height: 48px;
	filter: none !important; transform: none !important; transition: none !important; animation: none !important;
}
.sf-eu-emblem__legend { font-family: var(--wp--preset--font-family--cuerpo); font-weight: 700; font-size: 0.82rem; line-height: 1.15; color: var(--sf-intl-bosque); }
.sf-eu-emblem--doc .sf-eu-emblem__svg { width: 66px; height: 44px; }
.sf-eu-emblem--mini { padding: 0; }
.sf-eu-emblem--mini .sf-eu-emblem__svg { width: 48px; height: 32px; }
.sf-eu-emblem--lockup { border: 1px solid rgba(11, 46, 31, 0.14); border-radius: 10px; background: #fff; }

/* ============================================================================
 * 1 · HERO
 * ========================================================================== */
.sf-intl-hero { background: var(--sf-intl-crema); padding: clamp(3.5rem, 8vw, 6rem) 1.25rem clamp(3rem, 6vw, 4.5rem); }
.sf-intl-hero__inner { max-width: 60rem; margin: 0 auto; text-align: center; }
.sf-intl-hero__title { font-family: var(--wp--preset--font-family--titulos); font-weight: 400; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 0.98; color: var(--sf-intl-bosque); margin: 0 0 1.2rem; }
.sf-intl-hero__hl { position: relative; white-space: nowrap; }
.sf-intl-hero__hl::after {
	content: ""; position: absolute; left: -0.05em; right: -0.05em; bottom: 0.06em; height: 0.16em;
	background: var(--sf-intl-marca); border-radius: 2px; opacity: 0.9;
	transform: scaleX(0); transform-origin: left center;
	animation: sf-intl-sweep 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
}
@keyframes sf-intl-sweep { to { transform: scaleX(1); } }
.sf-intl-hero__lead { font-family: var(--wp--preset--font-family--cuerpo); font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.55; color: var(--sf-intl-bosque); max-width: 44rem; margin: 0 auto 2rem; }

/* ============================================================================
 * 2 · EUROPA REAL POR CAPAS (banda oscura premium)
 * ========================================================================== */
/* Banda oscura con BORDE LIMPIO (como el plano de /transporte/): crema→bosque siempre pasa por gris
   al fundir (mezcla de tonos), así que NO se funde — banda nítida e intencional, cero gris turbio. */
.sf-intl-map { position: relative; color: var(--sf-intl-crema); padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem clamp(3rem, 6vw, 4rem); background: var(--sf-intl-bosque); }
.sf-intl-map__head { max-width: 54rem; margin: 0 auto 1.5rem; text-align: center; }
.sf-intl-map [class$="__eyebrow"] { color: var(--sf-intl-marca); }
.sf-intl-map__title { color: var(--sf-intl-crema); font-size: clamp(2rem, 5vw, 3.4rem); }
.sf-intl-map__sub { font-family: var(--wp--preset--font-family--cuerpo); color: rgba(247, 245, 239, 0.86); font-size: 1.05rem; line-height: 1.5; max-width: 44rem; margin: 0.6rem auto 0; }
.sf-intl-map__stage { position: relative; max-width: 62rem; margin: 1.5rem auto 0; }
.sf-intl-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sf-intl-map__mass { transition: none; }

/* Ondas de señal desde Ortuella (verde marca). */
.sf-intl-map__wave { color: var(--sf-intl-marca); transform-box: fill-box; transform-origin: center; opacity: 0; animation: sf-intl-wave 6s ease-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes sf-intl-wave { 0% { transform: scale(0.4); opacity: 0.5; } 80% { opacity: 0; } 100% { transform: scale(11); opacity: 0; } }

/* Arcos por familia (color por currentColor). */
.sf-intl-arc { cursor: pointer; }
.sf-intl-arc--aula { color: var(--sf-intl-aula); }
.sf-intl-arc--benchmarking { color: var(--sf-intl-bench); }
.sf-intl-arc--viaje { color: var(--sf-intl-viaje); }
.sf-intl-arc__line { stroke-dasharray: 1; opacity: 0.92; }
.sf-intl.is-js .sf-intl-arc__line { stroke-dashoffset: 1; }
.sf-intl.is-map-in .sf-intl-arc__line { animation: sf-intl-draw 1.6s ease-out forwards; animation-delay: calc(0.25s + var(--i) * 0.22s); }
@keyframes sf-intl-draw { to { stroke-dashoffset: 0; } }
/* El viaje (granate) va punteado fino y protagonista; benchmarking punteado suave. */
.sf-intl-arc--viaje .sf-intl-arc__line { stroke-width: 2.8; }
.sf-intl-arc--benchmarking .sf-intl-arc__line { stroke-dasharray: 5 6; opacity: 0.85; }
.sf-intl.is-js .sf-intl-arc--benchmarking .sf-intl-arc__line { stroke-dashoffset: 0; animation: none; opacity: 0; }
.sf-intl.is-map-in .sf-intl-arc--benchmarking .sf-intl-arc__line { animation: sf-intl-fade 1s ease-out forwards; animation-delay: calc(0.4s + var(--i) * 0.22s); }
@keyframes sf-intl-fade { to { opacity: 0.85; } }
.sf-intl-arc__pulse { filter: drop-shadow(0 0 5px currentColor); }
.sf-intl-arc--benchmarking .sf-intl-arc__pulse { r: 3; }
.sf-intl-arc__dest { filter: drop-shadow(0 0 4px currentColor); transition: r 0.18s ease; }
.sf-intl-arc:hover .sf-intl-arc__line, .sf-intl-arc:focus-visible .sf-intl-arc__line { opacity: 1; stroke-width: 3.4; }
.sf-intl-arc:hover .sf-intl-arc__dest, .sf-intl-arc:focus-visible .sf-intl-arc__dest { r: 8.5; }
.sf-intl-arc:focus-visible { outline: none; }
.sf-intl-arc:focus-visible .sf-intl-arc__dest { stroke: var(--sf-intl-crema); stroke-width: 2; }

/* Ortuella latiendo. */
.sf-intl-map__origin { color: var(--sf-intl-marca); }
.sf-intl-map__origin-pulse { transform-box: fill-box; transform-origin: center; opacity: 0.5; animation: sf-intl-beat 2.6s ease-out infinite; }
@keyframes sf-intl-beat { 0% { transform: scale(0.7); opacity: 0.55; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }

/* Tooltip. */
.sf-intl-map__tip[hidden] { display: none; }
.sf-intl-map__tip {
	position: absolute; z-index: 3; min-width: 12rem; max-width: 18rem; padding: 0.7rem 0.85rem;
	background: var(--sf-intl-crema); color: var(--sf-intl-bosque); border-radius: 9px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); pointer-events: none; transform: translate(-50%, -115%);
	display: flex; flex-direction: column; gap: 0.15rem;
}
.sf-intl-map__tip-prog { font-family: var(--wp--preset--font-family--etiquetas); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #005e28; }
.sf-intl-map__tip-lugar { font-family: var(--wp--preset--font-family--titulos); font-size: 1.1rem; line-height: 1; }
.sf-intl-map__tip-nota { font-family: var(--wp--preset--font-family--cuerpo); font-size: 0.86rem; line-height: 1.3; }

/* Leyenda de familias. */
.sf-intl-map__legend { list-style: none; margin: 1.75rem auto 0; padding: 0; max-width: 58rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem; }
.sf-intl-legend { display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--wp--preset--font-family--etiquetas); }
.sf-intl-legend__mark { align-self: center; flex: 0 0 auto; width: 20px; height: 3px; border-radius: 2px; }
.sf-intl-legend--aula .sf-intl-legend__mark { background: var(--sf-intl-aula); }
.sf-intl-legend--benchmarking .sf-intl-legend__mark { background: repeating-linear-gradient(90deg, var(--sf-intl-bench) 0 4px, transparent 4px 8px); }
.sf-intl-legend--viaje .sf-intl-legend__mark { background: var(--sf-intl-viaje); height: 4px; }
.sf-intl-legend--origin .sf-intl-legend__mark { width: 10px; height: 10px; border-radius: 50%; background: var(--sf-intl-marca); box-shadow: 0 0 8px var(--sf-intl-marca); }
.sf-intl-legend__label { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-intl-crema); }
.sf-intl-legend__desc { font-family: var(--wp--preset--font-family--cuerpo); font-size: 0.82rem; color: rgba(247, 245, 239, 0.7); }

/* ============================================================================
 * 3 · EL PASAPORTE (objeto libro con tapa que se abre)
 * ========================================================================== */
/* Vuelta a la luz con borde limpio contra la banda oscura del mapa (dark→light nítido, sin gris). */
.sf-intl-pass { position: relative; padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem clamp(3rem, 6vw, 4rem); background: var(--sf-intl-niebla); }
.sf-intl-pass__head { max-width: 52rem; margin: 0 auto 2rem; text-align: center; }
.sf-intl-pass__title { font-size: clamp(1.9rem, 4.5vw, 3rem); }

.sf-intl-book { max-width: 56rem; margin: 0 auto; perspective: 2000px; }
.sf-intl-book__inner { position: relative; aspect-ratio: 8 / 5; transform-style: preserve-3d; }
.sf-intl-book__page {
	position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
	background-color: #f4efe2;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M0 8 Q15 1 30 8 T60 8' fill='none' stroke='%230b2e1f' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='60'%3E%3Cpath d='M8 0 Q1 15 8 30 T8 60' fill='none' stroke='%230b2e1f' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
	box-shadow: 0 22px 55px rgba(11, 46, 31, 0.22), inset 0 0 0 1px rgba(11, 46, 31, 0.07), inset 0 0 60px rgba(11, 46, 31, 0.06);
}
.sf-intl-book__spine { position: absolute; top: 4%; bottom: 4%; left: 50%; width: 3px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(11, 46, 31, 0.28), transparent); box-shadow: 0 0 14px rgba(11, 46, 31, 0.2); }
.sf-intl-book__stamps { list-style: none; margin: 0; padding: clamp(1.25rem, 4vw, 2.75rem); height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); place-items: center; gap: 0.25rem; }

/* La tapa (se abre con rotateY, bisagra en el lomo izquierdo). */
.sf-intl-book__cover {
	position: absolute; inset: 0; border-radius: 12px; z-index: 3;
	transform-origin: left center; transform: rotateY(0deg); backface-visibility: hidden;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	background: linear-gradient(135deg, #0c3421 0%, #071c14 100%);
	box-shadow: inset 0 0 0 1px rgba(215, 184, 113, 0.28), inset 0 0 60px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.35);
}
.sf-intl.is-pass-open .sf-intl-book__cover { transform: rotateY(-168deg); }
.sf-intl-book__cover-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; }
.sf-intl-book__crest { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(215, 184, 113, 0.5); }
.sf-intl-book__crest img { width: 48px; height: 48px; filter: sepia(1) saturate(0.7) brightness(1.15) hue-rotate(3deg); opacity: 0.92; }
.sf-intl-book__cover-title { font-family: var(--wp--preset--font-family--etiquetas); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.4rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sf-intl-oro); text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 1px rgba(215,184,113,0.5); }
.sf-intl-book__cover-sub { font-family: var(--wp--preset--font-family--etiquetas); font-size: 0.78rem; letter-spacing: 0.3em; color: rgba(215, 184, 113, 0.8); }
.sf-intl-book__open { display: block; margin: 1.25rem auto 0; font-family: var(--wp--preset--font-family--etiquetas); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-intl-bosque); background: transparent; border: 1px solid rgba(11, 46, 31, 0.3); border-radius: 999px; padding: 0.55rem 1.2rem; cursor: pointer; transition: background-color 0.2s ease; }
.sf-intl-book__open:hover, .sf-intl-book__open:focus-visible { background: rgba(11, 46, 31, 0.06); }
.sf-intl.is-pass-open .sf-intl-book__open { display: none; }

/* Sellos: geometría real (circular / rectangular de frontera), tintas, rotaciones, alguno solapa. */
.sf-intl-stamp {
	--rot: calc((var(--i) - 2.5) * 5deg); --ty: 0px; --tint: var(--sf-intl-bosque);
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 88%; aspect-ratio: 1 / 1; padding: 0.4rem; text-align: center; color: var(--tint);
	transform: rotate(var(--rot)) translateY(var(--ty));
}
.sf-intl-stamp--rect { aspect-ratio: 7 / 5; }
.sf-intl-stamp:nth-child(2) { --ty: 7px; z-index: 2; }
.sf-intl-stamp:nth-child(4) { --ty: -6px; margin-left: -14%; z-index: 3; } /* solapa como pasaporte usado */
.sf-intl-stamp:nth-child(6) { --ty: 5px; }
.sf-intl-stamp--verde { --tint: #0b2e1f; }
.sf-intl-stamp--azul { --tint: var(--sf-intl-azul-ue); }
.sf-intl-stamp--granate { --tint: #7e2626; }
.sf-intl-stamp--sobrio { --tint: #4a5a50; }
.sf-intl-stamp__ring { position: absolute; inset: 6%; border: 2.5px solid currentColor; border-radius: 50%; opacity: 0.9; }
.sf-intl-stamp--rect .sf-intl-stamp__ring { border-radius: 6px; inset: 8%; }
.sf-intl-stamp__ring::before { content: ""; position: absolute; inset: 5px; border: 1px dashed currentColor; border-radius: inherit; opacity: 0.45; }
.sf-intl-stamp--previsto .sf-intl-stamp__ring { border-style: dashed; }
.sf-intl-stamp__text { font-family: var(--wp--preset--font-family--etiquetas); font-weight: 700; font-size: clamp(0.66rem, 1.55vw, 0.9rem); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
.sf-intl-stamp__sub { font-family: var(--wp--preset--font-family--etiquetas); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }

/* ESTAMPADO AL ABRIR — ahora con el ESTADO FINAL DECLARADO, no colgando de una animación.
 *
 * EL BUG DE LAS PÁGINAS EN BLANCO (curado el 11/08/2026). Esto era antes:
 *
 *     .sf-intl.is-js .sf-intl-stamp { opacity: 0 }
 *     .sf-intl.is-pass-open .sf-intl-stamp { animation: … both; animation-delay: calc(0.5s + var(--i)*0.16s) }
 *
 * Con `both`, el elemento adopta el fotograma 0% —opacidad 0— DURANTE TODO EL RETARDO,
 * que en el último sello llegaba a 1,3 s. Y quien dispara el reveal es un
 * IntersectionObserver. Juntando las dos cosas, cualquier captura de PÁGINA COMPLETA
 * —que agranda el viewport, hace que TODOS los observadores disparen a la vez y
 * fotografía acto seguido— pillaba la tapa ya girada y los sellos todavía a cero: el
 * pasaporte salía con las dos páginas EN BLANCO.
 *
 * Reproducido con viewport de 1440×6000: a 1,2 s solo 5 sellos de 6 (uno a 0 y otro a
 * 0,59); un poco antes, los seis a cero. La red de seguridad de 4 s del JS tapaba el
 * caso «el IO no dispara», pero no este, porque aquí el IO SÍ disparaba.
 *
 * Ahora es una TRANSICIÓN, no una animación: el estado final (opacidad 1, escala 1)
 * está escrito en el CSS. Si la transición no llega a correr —captura, pestaña en
 * segundo plano, frame perdido—, los sellos se quedan PUESTOS igual, que es la regla
 * de oro de la casa. El escalonado total baja además de 1,8 s a 1,15 s. */
.sf-intl.is-js .sf-intl-stamp {
	opacity: 0;
	transform: rotate(var(--rot)) translateY(var(--ty)) scale(1.45);
	transition: opacity 0.34s ease, transform 0.45s cubic-bezier(0.2, 1, 0.3, 1);
	transition-delay: calc(0.2s + var(--i) * 0.1s);
}
.sf-intl.is-pass-open .sf-intl-stamp {
	opacity: 1;
	transform: rotate(var(--rot)) translateY(var(--ty)) scale(1);
}

/* Y al imprimir (o al exportar a PDF) el pasaporte va SIEMPRE sellado y sin tapa:
   ahí no hay scroll que dispare nada. */
@media print {
	.sf-intl.is-js .sf-intl-stamp {
		opacity: 1;
		transform: rotate(var(--rot)) translateY(var(--ty));
		transition: none;
	}
	.sf-intl-book__cover,
	.sf-intl-book__open { display: none; }
}

.sf-intl-pass__sub { max-width: 40rem; margin: 0.9rem auto 0; font-family: var(--wp--preset--font-family--cuerpo); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.5; color: color-mix( in srgb, var(--sf-intl-bosque) 78%, transparent ); }

.sf-intl-pass__foot { text-align: center; font-family: var(--wp--preset--font-family--cuerpo); font-size: 0.95rem; color: var(--sf-intl-bosque); margin: 1.5rem auto 0; }
.sf-intl-pass__foot strong { font-weight: 800; }

/* ============================================================================
 * 4 · EL VIAJE POR EDADES
 * ========================================================================== */
.sf-intl-journey { position: relative; padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem clamp(4rem, 8vw, 6rem); overflow: hidden; background: linear-gradient(to bottom, var(--sf-intl-niebla) 0%, var(--sf-intl-crema) clamp(3.5rem, 7vw, 5.5rem)); }
.sf-intl-journey__head { max-width: 52rem; margin: 0 auto 2.5rem; text-align: center; }
.sf-intl-journey__title { font-size: clamp(1.8rem, 4.2vw, 2.8rem); }
.sf-intl-journey__sub { max-width: 40rem; margin: 0.9rem auto 0; font-family: var(--wp--preset--font-family--cuerpo); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.5; color: color-mix( in srgb, var(--sf-intl-bosque) 78%, transparent ); }

/* ---------------------------------------------------------------------------
 * EL CAMINO (v4). Antes: tres iconos genéricos en fila y una línea de puntos.
 * Ahora: tres paradas que SUBEN de izquierda a derecha —la edad crece, el camino
 * sube— cosidas por un trazo de cera doble.
 *
 * La escalera la da un margen superior decreciente: la parada 0 baja 2 peldaños,
 * la 1 baja uno y la 2 se queda arriba. Va en MARGEN y no en transform a
 * propósito, porque el transform lo usa el reveal.
 * ------------------------------------------------------------------------- */
.sf-intl-journey__line {
	list-style: none; margin: 0 auto; padding: 0; max-width: 58rem;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
	position: relative;
	--sf-road-rise: clamp(22px, 4.8vw, 68px); /* alto de cada peldaño */
	--sf-road-pin: 9px;                       /* centro de la chincheta desde el alto de su parada */
}
.sf-intl-journey__step { margin-block-start: calc((2 - var(--i)) * var(--sf-road-rise)); }

/* El trazo, anclado EXACTAMENTE entre la chincheta de la 1.ª parada y la de la 3.ª:
   de centro de columna a centro de columna (1/6 y 5/6) y de peldaño 2 a peldaño 0.
   Por eso las tres chinchetas caen sobre la línea a cualquier ancho. */
.sf-intl-road {
	position: absolute; left: 16.667%;
	/* ANCHO EXPLÍCITO, no `right`. Un <svg> es un elemento REEMPLAZADO: en
	   posicionamiento absoluto con width:auto el navegador usa su ancho INTRÍNSECO
	   (que en un SVG sin atributo width es el 100% del contenedor) y descarta el
	   `right` por sobre-restricción. Con `right: 16.667%` el camino se salía 310px
	   por la derecha. Lo mismo vale para la altura del raíl vertical. */
	width: 66.666%;
	top: var(--sf-road-pin);
	height: calc(var(--sf-road-rise) * 2);
	overflow: visible; pointer-events: none; z-index: 0;
}
.sf-intl-road--v { display: none; }
.sf-intl-road__stroke {
	fill: none; stroke: var(--sf-intl-bosque); stroke-width: 2.6;
	stroke-linecap: round; stroke-linejoin: round; opacity: 0.55;
}
/* La segunda pasada del crayón: más fina, ámbar y un pelo desplazada. */
.sf-intl-road__stroke--ghost { stroke: #b9701a; stroke-width: 1.8; opacity: 0.4; }

/* Se DIBUJA al entrar (el trazo crece), y sin JS ya está dibujado. */
.sf-intl.is-js .sf-intl-road__stroke { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.sf-intl.is-journey-in .sf-intl-road__stroke { transition: stroke-dashoffset 1.5s cubic-bezier(0.3, 0.8, 0.4, 1) 0.15s; stroke-dashoffset: 0; }
.sf-intl.is-journey-in .sf-intl-road__stroke--ghost { transition-delay: 0.3s; }

.sf-intl-journey__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; position: relative; z-index: 1; }
.sf-intl.is-js .sf-intl-journey__step { opacity: 0; transform: translateY(14px); }
.sf-intl.is-journey-in .sf-intl-journey__step { animation: sf-intl-up 0.6s ease-out forwards; animation-delay: calc(0.3s + var(--i) * 0.28s); }
@keyframes sf-intl-up { to { opacity: 1; transform: translateY(0); } }

/* La chincheta que clava la parada en el camino. */
.sf-intl-journey__pin {
	width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
	background: #ef9f27; box-shadow: 0 0 0 3px var(--sf-intl-crema), 0 0 0 5px rgba(11, 46, 31, 0.5);
}

/* Etiqueta de etapa: el vistazo rápido necesita saber DE QUÉ CURSO habla cada hito. */
.sf-intl-journey__stage {
	font-family: var(--wp--preset--font-family--etiquetas); font-weight: 700;
	font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--sf-intl-bosque);
	background: color-mix( in srgb, #ef9f27 26%, var(--sf-intl-crema) );
	border-radius: 999px; padding: 0.2rem 0.62rem;
	margin-top: 0.7rem;
}

/* La edad, GRANDE: es el eje de la sección. */
.sf-intl-journey__age { font-family: var(--wp--preset--font-family--titulos); font-size: clamp(2rem, 4.6vw, 3rem); color: var(--sf-intl-bosque); line-height: 0.95; margin-top: -0.15rem; }

/* La escena a cera: ya no es un icono en una pastilla, es un dibujo. */
.sf-intl-journey__doodle { width: clamp(122px, 15vw, 168px); height: auto; color: var(--sf-intl-bosque); margin: 0.3rem 0 0.1rem; }
.sf-intl-dl__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sf-intl-dl { fill: none; stroke: var(--sf-intl-bosque); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-intl-dl-thick { fill: none; stroke: var(--sf-intl-bosque); stroke-width: 4.4; stroke-linecap: round; }
.sf-intl-dl-thin { fill: none; stroke: var(--sf-intl-bosque); stroke-width: 1.8; stroke-linecap: round; }
.sf-intl-dl-fill { fill: var(--sf-intl-bosque); }
.sf-intl-dl-fill2 { fill: color-mix( in srgb, var(--sf-intl-crema) 82%, #fff ); }
.sf-intl-dl-acc { fill: none; stroke: #b9701a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sf-intl-dl-accf { fill: color-mix( in srgb, #ef9f27 52%, #fff ); stroke: none; }
.sf-intl-dl-lens { fill: rgba(255, 255, 255, 0.55); }
.sf-intl-dl-grid { fill: none; stroke: var(--sf-intl-bosque); stroke-width: 1; opacity: 0.24; }
.sf-intl-dl-land { fill: color-mix( in srgb, var(--sf-intl-bosque) 13%, transparent ); stroke: var(--sf-intl-bosque); stroke-width: 2.2; stroke-linejoin: round; }
.sf-intl-dl-txt { font-family: var(--wp--preset--font-family--etiquetas); font-size: 8px; font-weight: 700; letter-spacing: 0; fill: var(--sf-intl-bosque); }

.sf-intl-journey__text { font-family: var(--wp--preset--font-family--cuerpo); font-size: 1rem; line-height: 1.4; color: var(--sf-intl-bosque); max-width: 16rem; }
.sf-intl-journey__text strong { font-weight: 800; }

/* --- MÓVIL: el camino BAJA. Raíl vertical a la izquierda y paradas en fila. --- */
@media (max-width: 47.999rem) {
	.sf-intl-journey__line {
		grid-template-columns: 1fr; gap: 2.4rem;
		--sf-road-rise: 0px;
		padding-inline-start: 3.4rem;
	}
	.sf-intl-journey__step {
		margin-block-start: 0;
		align-items: flex-start; text-align: left;
	}
	.sf-intl-journey__text { max-width: none; }
	.sf-intl-journey__pin { position: absolute; left: -3.4rem; top: 0; }
	.sf-intl-road--h { display: none; }
	.sf-intl-road--v {
		display: block;
		left: 0.55rem; right: auto; width: 22px;
		top: var(--sf-road-pin); bottom: auto; height: calc(100% - var(--sf-road-pin));
		/* El raíl muere en un desvanecido por abajo: la última parada no tiene
		   chincheta que lo remate y un corte seco se vería como un error. */
		-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
	}
	.sf-intl-road--v .sf-intl-road__stroke { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
}
/* (El avión de papel y su estela se retiraron el 11/08/2026 junto con su motor: eran
   del diseño viejo del viaje, cuando el tercer hito era un avión de clipart.) */

/* ============================================================================
 * 5 · ACCESS — EL DOSSIER
 * ========================================================================== */
.sf-intl-dossier { position: relative; padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem; background: linear-gradient(to bottom, var(--sf-intl-crema) 0%, var(--sf-intl-niebla) clamp(3.5rem, 7vw, 5.5rem)); }
.sf-intl-dossier__folder { position: relative; max-width: 54rem; margin: 0 auto; }
.sf-intl-dossier__tab { display: inline-block; font-family: var(--wp--preset--font-family--etiquetas); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--sf-intl-crema); background: var(--sf-intl-bosque); padding: 0.4rem 1.1rem; border-radius: 8px 8px 0 0; margin-left: 1.5rem; }
.sf-intl-dossier__doc { background: #fffdf8; border: 1px solid rgba(11, 46, 31, 0.14); border-radius: 0 12px 12px 12px; box-shadow: 0 16px 44px rgba(11, 46, 31, 0.14); padding: clamp(1.75rem, 5vw, 3rem); }
.sf-intl-dossier__header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(11, 46, 31, 0.12); }
.sf-intl-dossier__title { font-family: var(--wp--preset--font-family--titulos); font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--sf-intl-bosque); }
.sf-intl-dossier__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem; margin: 0; }
.sf-intl-dossier__field--wide { grid-column: 1 / -1; }
.sf-intl-dossier__field dt { font-family: var(--wp--preset--font-family--etiquetas); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #005e28; margin-bottom: 0.25rem; }
.sf-intl-dossier__field dd { font-family: var(--wp--preset--font-family--cuerpo); font-size: 1.02rem; line-height: 1.45; color: var(--sf-intl-bosque); margin: 0; }
.sf-intl-dossier__subtitle { font-family: var(--wp--preset--font-family--etiquetas); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-intl-bosque); margin: 1.75rem 0 0.85rem; }
.sf-intl-dossier__products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sf-intl-dossier__product { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem; border-radius: 10px; background: #f7f2e6; border: 1px solid rgba(11, 46, 31, 0.1); }
.sf-intl-dossier__product--familias { border-color: rgba(0, 94, 40, 0.35); background: #eef6ee; }
.sf-intl-dossier__product-tipo { font-family: var(--wp--preset--font-family--etiquetas); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #005e28; }
.sf-intl-dossier__product-titulo { font-family: var(--wp--preset--font-family--cuerpo); font-weight: 800; font-size: 0.98rem; line-height: 1.25; color: var(--sf-intl-bosque); }
.sf-intl-dossier__product-nota { font-family: var(--wp--preset--font-family--cuerpo); font-size: 0.86rem; line-height: 1.35; color: #33413a; }
.sf-intl-dossier__product-link { margin-top: auto; font-family: var(--wp--preset--font-family--etiquetas); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #005e28; text-decoration: none; }
.sf-intl-dossier__product-link:hover, .sf-intl-dossier__product-link:focus-visible { text-decoration: underline; }
.sf-intl-dossier__disclaimer { font-family: var(--wp--preset--font-family--cuerpo); font-size: 0.8rem; line-height: 1.5; color: #33413a; margin: 1.5rem 0 0; }

/* Hermana INTERINA (Erasmus+ 2026). */
.sf-intl-dossier__sister { display: flex; align-items: center; gap: 1rem; max-width: 54rem; margin: 1.25rem auto 0; padding: 1rem 1.25rem; border: 1px dashed rgba(11, 46, 31, 0.3); border-radius: 12px; background: rgba(255, 253, 248, 0.6); }
.sf-intl-dossier__sister-title { font-family: var(--wp--preset--font-family--titulos); font-size: 1.2rem; color: var(--sf-intl-bosque); margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.6rem; }
.sf-intl-dossier__sister-flag { font-family: var(--wp--preset--font-family--etiquetas); font-size: 0.56rem; letter-spacing: 0.14em; border: 1px solid currentColor; border-radius: 3px; padding: 1px 4px; color: #4a5a50; }
.sf-intl-dossier__sister-text { font-family: var(--wp--preset--font-family--cuerpo); font-size: 0.92rem; line-height: 1.45; color: var(--sf-intl-bosque); margin: 0; }
.sf-intl-dossier__interino { font-style: italic; color: #4a5a50; border-bottom: 1px dashed rgba(11, 46, 31, 0.4); }

/* ============================================================================
 * RESPONSIVE
 * ========================================================================== */
@media (max-width: 760px) {
	.sf-intl-dossier__products { grid-template-columns: 1fr; }
	.sf-intl-dossier__fields { grid-template-columns: 1fr; }
	.sf-intl-map__legend { flex-direction: column; align-items: flex-start; max-width: 22rem; }
}
@media (max-width: 620px) {
	.sf-intl-book__inner { aspect-ratio: 7 / 6; }
	.sf-intl-book__stamps { padding: 1rem; gap: 0.1rem; }
	/* (El apilado del viaje y su raíl vertical los lleva el bloque de 47.999rem.) */
}

/* ============================================================================
 * MOVIMIENTO REDUCIDO — todo abierto/dibujado/quieto; emblema ya estático.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.sf-intl-hero__hl::after { animation: none; transform: scaleX(1); }
	.sf-intl-map__wave, .sf-intl-map__origin-pulse { animation: none; opacity: 0; }
	.sf-intl.is-js .sf-intl-arc__line { animation: none; stroke-dashoffset: 0; opacity: 0.92; }
	.sf-intl.is-js .sf-intl-arc--benchmarking .sf-intl-arc__line { opacity: 0.85; }
	.sf-intl-book__cover { transition: none; transform: rotateY(-168deg); }
	.sf-intl-book__open { display: none; }
	/* Sellos ya puestos, sin transición ni escala de entrada (el reveal es ahora una
	   transición, no una animación: hay que apagar la transición, no la animación). */
	.sf-intl.is-js .sf-intl-stamp { transition: none; opacity: 1; transform: rotate(var(--rot)) translateY(var(--ty)); }
	/* El camino sale YA dibujado, sin trazo creciendo. */
	.sf-intl.is-js .sf-intl-road__stroke { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
	.sf-intl.is-js .sf-intl-journey__step { animation: none; opacity: 1; transform: none; }
}