/*
 * Sitio principal de Swedish Institute.
 *
 * Va detrás de las hojas del tema de landings, que ya fijan los tokens
 * (--si-*), los botones base y los bloques compartidos. Aquí solo está lo que
 * el sitio añade: cabecera con menú, pie, y los bloques si-web-*.
 *
 * Ritmo de fondos aprobado: el navy estructura la página y el blanco respira.
 * Nunca más de dos secciones claras seguidas.
 */

.si-web {
	--si-web-gradiente: radial-gradient(700px 380px at 12% 20%, rgba(68,119,187,0.22), transparent 60%),
		radial-gradient(650px 420px at 90% 30%, rgba(65,182,230,0.16), transparent 62%),
		radial-gradient(600px 380px at 30% 95%, rgba(255,204,9,0.10), transparent 60%),
		linear-gradient(135deg, #14163B 0%, #1A1C4E 55%, #14163B 100%);
	--si-web-alto-cabecera: 126px;
	/* Body copy size: the lead text of «Ready to start your journey?». */
	--si-web-texto: 17px;
	/* Vertical padding of a section; interior pages use the tighter rhythm of
	   the landings (see «Vertical rhythm» below). */
	--si-web-seccion: 96px;
	--si-web-seccion-form: 120px;
	--si-web-seccion-pie: 82px;
	font-size: 17px;
}
/* The parent sets overflow-x: hidden on body, which makes body a scroll
   container and keeps the sticky masthead from sticking. clip trims the same
   horizontal overflow without creating a scroll container. */
body.si-web { overflow-x: clip; }
/* An in-page anchor lands below the sticky masthead, not under it. */
.si-web [id] { scroll-margin-top: calc(var(--si-web-alto-cabecera) + var(--wp-admin--admin-bar--height, 0px)); }
.si-web p, .si-web li { line-height: 1.65; }
.si-web-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.si-web-amarillo { color: var(--si-yellow); }
.si-web-main { display: block; }
.si-web-main:focus { outline: none; }
.si-web h1, .si-web h2, .si-web h3 { font-family: var(--si-font-display); }

/* ---------- Botones ---------- */
.si-web-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px; border-radius: 999px;
	font-family: var(--si-font-display); font-weight: 700; font-size: 16px;
	border: 2px solid transparent; text-decoration: none; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.si-web-btn:focus-visible { outline: 3px solid var(--si-sky); outline-offset: 2px; }
.si-web-btn--primario { background: var(--si-yellow); color: var(--si-navy); border-color: var(--si-yellow); box-shadow: 0 12px 28px rgba(255,204,9,0.30); }
.si-web-btn--primario:hover { color: var(--si-navy); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(255,204,9,0.45); }
.si-web-btn--contorno-navy { background: transparent; color: var(--si-navy); border-color: var(--si-navy); }
.si-web-btn--contorno-navy:hover { background: var(--si-navy); color: #fff; }
.si-web-btn--contorno-blanco { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.si-web-btn--contorno-blanco:hover { background: #fff; color: var(--si-navy); }

.si-web-pill {
	display: inline-block; background: var(--si-yellow); color: var(--si-navy-deep);
	font-family: var(--si-font-display); font-weight: 700; font-size: 12px; letter-spacing: .14em;
	text-transform: uppercase; padding: 8px 18px; border-radius: 999px; margin-bottom: 24px;
}

/* ---------- Cabecera ---------- */
.si-web-masthead { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; }
/* The focused skip link shows above the sticky masthead, which comes later in
   the page with the same stacking level. */
.si-web .skip-link { z-index: 101; }
/* Swedish Institute blue strip. Net Price Calculator and the phone are yellow
   pills with the text colour of the Request Info button of the bar below. */
.si-web-topbar {
	background: #4477CC; color: var(--si-navy-darker);
	display: flex; align-items: center; justify-content: flex-end; gap: 24px;
	padding: 8px 32px; font-family: var(--si-font-display); font-weight: 700; font-size: 12px;
	letter-spacing: .12em; text-transform: uppercase;
}
.si-web-topbar__link,
.si-web-topbar__phone {
	display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 22px; border-radius: 999px;
	background: var(--si-yellow); color: var(--si-navy-darker); text-decoration: none;
}
.si-web-topbar__phone { letter-spacing: .10em; }
.si-web-topbar__link:hover,
.si-web-topbar__phone:hover { background: #FFD840; color: var(--si-navy-darker); }
.si-web-topbar a:focus-visible { outline: 3px solid var(--si-navy-darker); outline-offset: 2px; }

/* El desenfoque va en un pseudoelemento y no en la barra: un backdrop-filter
   en la barra la convierte en la caja de referencia de sus hijos fijos, y el
   cajón del menú móvil quedaba recortado al alto de la barra. */
.si-web-nav { position: relative; z-index: 0; transition: box-shadow .3s ease; }
.si-web-nav::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: rgba(26,28,78,0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	transition: background .3s ease;
}
.si-web-nav.is-scrolled { box-shadow: 0 2px 16px rgba(20,22,59,0.35); }
.si-web-nav.is-scrolled::before { background: rgba(26,28,78,0.96); }
.si-web-nav__inner {
	max-width: 1600px; margin: 0 auto; padding: 14px 32px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.si-web-nav__logo { display: flex; flex-shrink: 0; }
.si-web-nav__logo img { height: 52px; width: auto; display: block; }
.si-web-nav__menu { flex: 1; min-width: 0; display: flex; justify-content: center; }
.si-web-nav__drawer-head { display: none; }
.si-web-nav__list, .si-web-nav__sublist { list-style: none; margin: 0; padding: 0; }
.si-web-nav__list { display: flex; align-items: center; gap: 20px; }
.si-web-nav__item { position: relative; }
.si-web-nav__item--0 > .si-web-nav__link,
.si-web-nav__item--0 > .si-web-nav__trigger {
	font-family: var(--si-font-display); font-weight: 500; font-size: 0.95rem; color: rgba(255,255,255,0.85);
	background: none; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
	min-height: 48px; padding: 8px 4px; display: inline-flex; align-items: center; gap: 6px;
}
.si-web-nav__item--0 > .si-web-nav__link:hover,
.si-web-nav__item--0 > .si-web-nav__trigger:hover,
.si-web-nav__item--0.is-current > .si-web-nav__link { color: #fff; }
.si-web-nav__trigger .si-web-icono { opacity: .75; transition: transform .25s ease; }
.si-web-nav__trigger[aria-expanded="true"] .si-web-icono { transform: rotate(180deg); }
.si-web-nav__item a:focus-visible, .si-web-nav__trigger:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 2px; }
.si-web-nav__sub {
	position: absolute; top: 100%; left: 0; min-width: 300px; z-index: 200;
	background: var(--si-navy-deep); border-radius: 4px; padding: 4px 0;
	box-shadow: 0 24px 60px rgba(0,0,0,0.45);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.si-web-nav__sub--2 { top: 0; left: 100%; min-width: 280px; transform: translateX(6px); }
.si-web-nav__item.has-sub:hover > .si-web-nav__sub,
.si-web-nav__item.has-sub:focus-within > .si-web-nav__sub,
.si-web-nav__item.is-open > .si-web-nav__sub { opacity: 1; visibility: visible; transform: none; }
.si-web-nav__sublist > li { border-bottom: 1px solid rgba(255,255,255,0.10); }
.si-web-nav__sublist > li:last-child { border-bottom: 0; }
.si-web-nav__sub .si-web-nav__link,
.si-web-nav__sub .si-web-nav__trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
	padding: 16px 20px; background: none; border: 0; cursor: pointer; text-align: left;
	color: #fff; font-family: var(--si-font-display); font-weight: 700; font-size: 12px; line-height: 1.25;
	text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
}
.si-web-nav__sub .si-web-nav__link:hover,
.si-web-nav__sub .si-web-nav__trigger:hover { background: rgba(255,255,255,0.08); color: var(--si-yellow); }
.si-web-nav__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.si-web-nav__toggle {
	display: none; width: 48px; height: 48px; background: none; border: 0; cursor: pointer;
	flex-direction: column; justify-content: center; gap: 5px; padding: 12px;
}
.si-web-nav__toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.si-web-nav__toggle:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 2px; }
.si-web-nav__cta {
	background: var(--si-yellow); color: var(--si-navy-darker); border-radius: 999px; padding: 10px 22px;
	min-height: 44px; font-family: var(--si-font-display); font-weight: 700; font-size: 14px;
	letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center;
	text-decoration: none; white-space: nowrap;
}
.si-web-nav__cta:hover { color: var(--si-navy-darker); background: #FFD840; }
.si-web-nav__cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Por debajo de 1440 el menú pasa a cajón lateral, como en el diseño. */
@media (max-width: 1440px) {
	.si-web-nav__toggle { display: inline-flex; }
	.si-web-nav__actions { flex: 1; justify-content: space-between; }
	.si-web-nav__menu {
		position: fixed; inset: 0; z-index: 1000; display: block;
		background: #fff; padding: 32px 32px 56px 56px; overflow-y: auto;
		transform: translateX(-105%); transition: transform .28s ease; visibility: hidden;
	}
	.si-web-nav__menu.is-open { transform: none; visibility: visible; }
	.si-web-nav__drawer-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 32px; }
	.si-web-nav__drawer-head img { width: 200px; height: auto; }
	.si-web-nav__drawer-logo { display: block; line-height: 0; }
	.si-web-nav__drawer-logo:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 4px; }
	.si-web-nav__close {
		width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--si-rule);
		background: var(--si-surface); color: var(--si-navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	}
	.si-web-nav__close:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 2px; }
	.si-web-nav__list { display: block; }
	.si-web-nav__item--0 > .si-web-nav__link,
	.si-web-nav__item--0 > .si-web-nav__trigger {
		width: 100%; justify-content: space-between; color: var(--si-navy); font-size: 1rem;
		border-bottom: 1px solid var(--si-rule); padding: 13px 0;
	}
	.si-web-nav__item--0 > .si-web-nav__link:hover,
	.si-web-nav__item--0 > .si-web-nav__trigger:hover { color: var(--si-navy); }
	.si-web-nav__item a:focus-visible, .si-web-nav__trigger:focus-visible { outline-color: var(--si-navy); }
	.si-web-nav__sub, .si-web-nav__sub--2 {
		position: static; min-width: 0; background: transparent; box-shadow: none; padding: 0 0 0 12px;
		opacity: 1; visibility: visible; transform: none; display: none;
	}
	.si-web-nav__item.has-sub:hover > .si-web-nav__sub,
	.si-web-nav__item.has-sub:focus-within > .si-web-nav__sub { display: none; }
	/* Al tocar un apartado el dedo deja el :hover y el foco dentro de él, y la
	   regla de arriba pesa más que un .is-open suelto: el submenú se marcaba
	   abierto pero no se veía. Con .has-sub las dos pesan igual y gana esta. */
	.si-web-nav__item.has-sub.is-open > .si-web-nav__sub { display: block; }
	.si-web-nav__sublist > li { border-bottom: 1px solid var(--si-surface); }
	.si-web-nav__sub .si-web-nav__link,
	.si-web-nav__sub .si-web-nav__trigger {
		color: var(--si-warm); text-transform: none; letter-spacing: normal; font-weight: 500;
		font-size: 0.92rem; padding: 12px 8px; min-height: 44px;
	}
	.si-web-nav__sub .si-web-nav__link:hover,
	.si-web-nav__sub .si-web-nav__trigger:hover { background: var(--si-surface); color: var(--si-navy); }
	/* The open drawer locks the page scroll on the root: an overflow on body
	   would make it a scroll container and unstick the masthead. */
	html:has(> body.si-web-menu-abierto) { overflow: hidden; }
}
@media (max-width: 1280px) {
	.si-web-nav__logo { display: none; }
	.si-web { --si-web-alto-cabecera: 122px; }
}
@media (max-width: 640px) {
	.si-web { --si-web-alto-cabecera: 108px; }
	.si-web-topbar { padding: 6px 16px; gap: 10px; font-size: 11px; }
	.si-web-topbar__link, .si-web-topbar__phone { min-height: 28px; padding: 0 12px; }
	.si-web-nav__inner { padding: 10px 16px; }
	.si-web-nav__menu { padding: 24px 20px 48px 24px; }
}
/* Both pills fit one row on the narrowest phones. */
@media (max-width: 400px) {
	.si-web-topbar__link, .si-web-topbar__phone { letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
	.si-web-nav__menu, .si-web-nav__sub { transition: none; }
}

/* ---------- Pie ---------- */
.si-web-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #1A1C4E 0%, #14163B 100%); color: #fff; }
.si-web-footer a { color: #fff; text-decoration: none; }
.si-web-footer a:hover { color: var(--si-yellow); }
.si-web-footer a:focus-visible { outline: 2px solid var(--si-yellow); outline-offset: 3px; }
.si-web-footer__inner { max-width: 1560px; margin: 0 auto; padding: 64px 40px 24px; }
/* The last column («Stay Connected») takes the width of its icons, so the five
   sit in one row. */
.si-web-footer__grid { display: grid; grid-template-columns: auto repeat(3, 1fr) max-content; gap: 40px; align-items: start; }
.si-web-footer__brand img { width: 100%; max-width: 220px; height: auto; display: block; }
/* List headings: a single line underneath, as wide as the column. */
.si-web-footer__titulo {
	border-bottom: 1px solid rgba(255,255,255,0.6); padding: 0 0 12px;
	font-family: var(--si-font-display); font-weight: 400; font-size: 13px; letter-spacing: 2px;
	text-transform: uppercase; margin: 0 0 20px; line-height: 1.4;
}
.si-web-footer__list, .si-web-footer__contact, .si-web-footer__social, .si-web-footer__legal-links { list-style: none; margin: 0; padding: 0; }
.si-web-footer__list { display: flex; flex-direction: column; gap: 11px; }
.si-web-footer__list a, .si-web-footer__contact { font-size: 14px; line-height: 1.55; }
.si-web-footer__contact { display: flex; flex-direction: column; gap: 12px; }
.si-web-footer__social { display: flex; gap: 12px; }
.si-web-footer__social-link {
	display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px;
	border-radius: 50%; border: 1px solid rgba(255,255,255,0.5);
}
.si-web-footer__social-link:hover { background: var(--si-yellow); border-color: var(--si-yellow); color: #000 !important; }
.si-web-footer__legal { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 48px; padding-top: 20px; }
.si-web-footer__legal-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.si-web-footer__copy { color: rgba(255,255,255,0.7); font-size: 12px !important; margin: 0; }
.si-web-footer__legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.si-web-footer__legal-link { color: rgba(255,255,255,0.7) !important; font-size: 12px; }
.si-web-footer__legal-link:hover { color: #fff !important; }
/* From here down the logo takes its own row and the three lists keep room
   next to the row of icons. */
@media (max-width: 1200px) {
	.si-web-footer__grid { grid-template-columns: repeat(3, 1fr) max-content; column-gap: 32px; }
	.si-web-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.si-web-footer__inner { padding: 56px 32px 20px; }
	.si-web-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
	.si-web-footer__inner { padding: 48px 20px 20px; }
	.si-web-footer__grid { grid-template-columns: 1fr; gap: 36px; }
	.si-web-footer__legal-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Página heredada (sin bloques del diseño) ---------- */
.si-web-page-head { background: var(--si-web-gradiente); color: #fff; padding: 72px 0 56px; }
.si-web-page-head h1 { color: #fff; font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0; }
.si-web-prose { padding-top: 56px; padding-bottom: 80px; max-width: 900px; }
.si-web-prose img { height: auto; }
.si-web-archive { padding-top: 48px; padding-bottom: 80px; max-width: 900px; }
.si-web-archive__item { border-bottom: 1px solid var(--si-rule); padding: 24px 0; }
.si-web-archive__item h2 { font-size: 1.4rem; margin: 0 0 6px; }
.si-web-archive__item h2 a { color: var(--si-navy); text-decoration: none; }
.si-web-archive__date { color: var(--si-warm); font-size: 14px; margin: 0 0 8px; }

/* ---------- Hero ---------- */
.si-web-hero { position: relative; overflow: hidden; background: var(--si-navy-deep); color: #fff; padding: 96px 0; }
.si-web-hero__glow {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(600px 380px at 10% 20%, rgba(68,119,187,0.55), transparent 60%),
		radial-gradient(700px 420px at 92% 10%, rgba(65,182,230,0.35), transparent 62%),
		radial-gradient(560px 360px at 30% 95%, rgba(255,204,9,0.20), transparent 60%),
		radial-gradient(620px 380px at 88% 92%, rgba(68,119,187,0.32), transparent 60%);
}
.si-web-hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 120px; align-items: center; }
.si-web-hero h1 { font-weight: 800; color: #fff; font-size: clamp(2.5rem, 4.4vw, 60px); line-height: 1.05; margin: 0 0 24px; }
.si-web-hero__lead { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.85); margin: 0 0 32px; max-width: 560px; }
.si-web-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.si-web-hero__cta {
	position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 14px;
	background: linear-gradient(135deg, #FFCC09 0%, #FFD840 55%, #FFCC09 100%); color: var(--si-navy-deep);
	font-family: var(--si-font-display); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
	padding: 0 34px; min-height: 60px; border-radius: 999px;
	box-shadow: 0 12px 32px rgba(255,204,9,0.45), 0 2px 8px rgba(0,0,0,0.25);
	transition: transform .25s ease, box-shadow .25s ease;
}
.si-web-hero__cta::before {
	content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; z-index: -1; pointer-events: none;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,0.55) 55%, transparent 100%);
	transform: skewX(-20deg); animation: si-web-brillo 3.2s ease-in-out infinite;
}
@keyframes si-web-brillo { 0% { left: -80%; } 60%, 100% { left: 130%; } }
.si-web-hero__cta:hover { color: var(--si-navy-deep); transform: translateY(-2px); box-shadow: 0 18px 42px rgba(68,119,187,0.55), 0 4px 12px rgba(0,0,0,0.30); }
.si-web-hero__cta:focus-visible { outline: 3px solid rgba(255,255,255,0.8); outline-offset: 3px; }
.si-web-hero__card { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.si-web-hero__card img { width: 100%; height: 100%; object-fit: cover; }
.si-web-hero--sangre { padding: 0; min-height: 640px; display: flex; align-items: center; }
/* Las columnas del hero de programa no crecen con su contenido. Un nombre
   largo con sus dos últimas palabras atadas (huerfanas.js del padre) ensanchaba
   la del texto y el titular entraba en la foto; con la columna fija, esa
   pareja desborda, el guion la desata y el titular salta de línea dentro. */
.si-web-hero--sangre .si-web-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
.si-web-hero--sangre .si-web-hero__text { padding: 96px 0; }
.si-web-hero__bleed { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.si-web-hero__bleed img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1280px) {
	.si-web-hero--tarjeta .si-web-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 1024px) {
	.si-web-hero--sangre .si-web-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.si-web-hero--sangre { flex-direction: column; min-height: 0; }
	.si-web-hero--sangre .si-web-hero__bleed { position: relative; width: 100%; height: 420px; order: 2; }
	.si-web-hero--sangre .si-web-hero__text { padding: 72px 0 48px; }
}
@media (max-width: 768px) {
	.si-web-hero { padding: 64px 0; }
	.si-web-hero--sangre { padding: 0; }
	.si-web-hero h1 { font-size: 40px; }
	.si-web-hero--sangre .si-web-hero__bleed { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
	.si-web-hero__cta::before { animation: none; display: none; }
}

/* ---------- Formulario de información ---------- */
.si-web-lead { position: relative; overflow: hidden; padding: var(--si-web-seccion-form) 0; background: var(--si-web-gradiente); color: #fff; }
.si-web-lead__bg {
	position: absolute; left: -6%; top: 0; width: 52%; height: 100%; opacity: .18; pointer-events: none;
	background-position: center; background-size: cover;
	-webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%); mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
}
.si-web-lead__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.si-web-lead h2 { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin: 0 0 20px; color: #fff; text-wrap: balance; }
.si-web-lead__intro { color: rgba(255,255,255,.8); margin: 0 0 32px; max-width: 480px; }
.si-web-checks { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; }
.si-web-checks li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: rgba(255,255,255,.9); line-height: 1.45; }
.si-web-checks__icon, .si-web-callcard__icon {
	flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--si-yellow);
	background: rgba(255,204,9,0.14); border: 1px solid rgba(255,204,9,0.55);
}
.si-web-checks__icon { width: 32px; height: 32px; border-radius: 8px; }
.si-web-checks sup { font-size: .65em; }
.si-web-callcard {
	display: flex; align-items: center; gap: 14px; padding: 16px 28px 16px 20px; width: fit-content; max-width: 100%; text-decoration: none; color: #fff;
	background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
}
.si-web-callcard:hover { color: #fff; border-color: rgba(255,204,9,0.55); }
.si-web-callcard:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 2px; }
.si-web-callcard__icon { width: 44px; height: 44px; border-radius: 50%; }
.si-web-callcard__label { display: block; font-family: var(--si-font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.si-web-callcard__num { display: block; font-family: var(--si-font-display); font-weight: 700; font-size: 18px; }
.si-web-count { max-width: 420px; padding: 24px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); }
.si-web-count__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.si-web-count__pill {
	font-family: var(--si-font-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; padding: 6px 14px;
}
.si-web-count__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.si-web-count__grid > div { background: #26297A; border-radius: 10px; padding: 12px 6px; text-align: center; }
.si-web-count__grid span { display: block; font-family: var(--si-font-display); font-weight: 800; font-size: 28px; color: #fff; line-height: 1.1; }
.si-web-count__grid small { display: block; font-family: var(--si-font-display); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-top: 4px; }
.si-web-lead__card .form-card { border-radius: 20px; padding: 44px 40px; box-shadow: 0 24px 64px rgba(0,0,0,.35); }
.si-web-lead__form-title { font-weight: 800; font-size: 26px; color: var(--si-navy); margin: 0 0 6px; line-height: 1.15; }
.si-web-lead__form-text { font-size: 14px !important; color: var(--si-warm); margin: 0 0 24px; }
@media (max-width: 960px) {
	.si-web-lead { padding: 72px 0; }
	.si-web-lead__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.si-web-lead__card .form-card { padding: 32px 24px; }
}
/* Program layout: the figures run in one row across the top of the section.
   Below them, countdown, «Ready to start your journey?» and call box on the
   left, with the heading at the middle of the height of the form on the right.
   Below 960px everything stacks (figures, countdown, form, call box) and the
   heading with its sentence is not shown. */
.si-web-lead--programa .si-web-checks--cifras { grid-column: 1 / -1; margin: 0; }
.si-web-checks--cifras .si-web-checks__icon { width: 48px; height: 48px; border-radius: 12px; }
.si-web-checks--cifras .si-web-checks__icon .si-web-icono { width: 24px; height: 24px; }
body.si-web .si-web-checks.si-web-checks--cifras li { gap: 16px; font-size: 18px; line-height: 1.4; color: #fff; }
/* Each figure takes the width of its text (never more than its share), and the
   group sits centred with a fixed gap instead of three equal columns. */
@media (min-width: 961px) {
	.si-web-lead--programa .si-web-lead__grid { row-gap: 64px; }
	.si-web-lead--programa .si-web-checks--cifras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, max-content); justify-content: center; gap: 56px; }
	body.si-web .si-web-checks.si-web-checks--cifras li { font-size: 20px; }
	/* The column takes the height of the form and its outer rows share the
	   free space, so the heading sits at the middle of the form. */
	.si-web-lead--programa .si-web-lead__text { align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; }
	.si-web-lead--programa .si-web-count { grid-row: 1; align-self: end; margin-bottom: 40px; }
	.si-web-lead--programa .si-web-lead__journey { grid-row: 2; }
	.si-web-lead--programa .si-web-lead__journey .si-web-lead__intro { margin-bottom: 0; }
	.si-web-lead--programa .si-web-callcard { grid-row: 3; align-self: start; margin-top: 28px; }
}
@media (max-width: 960px) {
	.si-web-lead--programa .si-web-lead__grid { gap: 32px; }
	.si-web-lead--programa .si-web-lead__text { display: contents; }
	.si-web-lead--programa .si-web-count { order: 1; margin: 0; max-width: none; }
	.si-web-lead--programa .si-web-lead__card { order: 2; }
	.si-web-lead--programa .si-web-lead__journey { display: none; }
	.si-web-lead--programa .si-web-callcard { order: 3; justify-self: center; }
}

/* ---------- Franja de datos ---------- */
/* A band in the gradient of the palette, without a photo behind it. */
.si-web-trust { position: relative; overflow: hidden; background: linear-gradient(135deg, #2A2E7C 0%, #1F2268 100%); color: #fff; }
.si-web-trust__grid { position: relative; list-style: none; margin: 0; padding: 56px 0; display: grid; grid-template-columns: repeat(4, 1fr); }
/* Stats start at the top of their column: a longer label or a smaller stat
   never pushes its stat lower than the others. A long stat (smaller type) keeps
   the height of a short one, so the labels line up too. */
.si-web-trust__item { text-align: center; padding: 0 24px; border-right: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 140px; }
.si-web-trust__item:last-child { border-right: 0; }
.si-web-trust__value { font-family: var(--si-font-display); font-weight: 700; font-size: 40px; line-height: 1; margin-bottom: 14px; }
.si-web-trust__item--largo .si-web-trust__value { font-size: 26px; line-height: 1.1; min-height: 40px; }
.si-web-trust__label { font-family: var(--si-font-display); font-weight: 500; font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.4; }
@media (max-width: 768px) {
	.si-web-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; padding: 40px 0; }
	.si-web-trust__item { border-right: 0; min-height: 0; padding: 0 8px; min-width: 0; }
	.si-web-trust__value { font-size: 30px; }
	.si-web-trust__item--largo .si-web-trust__value { font-size: 22px; min-height: 30px; }
}
@media (max-width: 420px) {
	.si-web-trust__value { font-size: 24px; }
	.si-web-trust__item--largo .si-web-trust__value { min-height: 24px; }
	.si-web-trust__label { font-size: 13px; }
}

/* ---------- Programas ---------- */
.si-web-programs { padding: var(--si-web-seccion) 0; background: var(--si-web-gradiente); color: #fff; }
.si-web-programs__title { font-weight: 800; color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 20px; text-align: center; }
.si-web-programs__lead { font-size: 18px; color: rgba(255,255,255,0.8); margin: 0 auto 40px; text-align: center; max-width: 900px; }
.si-web-programs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; }
.si-web-programs__item { min-width: 0; }
.si-web-pcard {
	position: relative; height: 100%; min-height: 150px; border-radius: 14px; overflow: hidden; padding: 20px;
	display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; background: var(--si-navy-darker);
	transition: transform .25s ease, box-shadow .25s ease;
}
.si-web-pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.si-web-pcard::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,22,59,0.20) 0%, rgba(20,22,59,0.85) 100%); }
.si-web-pcard:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.30); }
.si-web-pcard:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 3px; }
.si-web-pcard__name { position: relative; z-index: 2; font-weight: 500; font-size: 1.05rem; line-height: 1.25; margin: 0; color: #fff; }
.si-web-pcard__badge {
	position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--si-font-display); font-weight: 700; font-size: 0.68rem;
	letter-spacing: .06em; padding: 5px 12px; border-radius: 6px; background: rgba(20,22,59,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.18);
}
/* Con tres tarjetas, tres columnas del ancho de las de cuatro, centradas: sin hueco a la derecha. */
@media (min-width: 1101px) {
	.si-web-programs__grid:has(> .si-web-programs__item:nth-child(3):last-child) { grid-template-columns: repeat(3, calc((100% - 36px) / 4)); justify-content: center; }
}
@media (max-width: 1100px) { .si-web-programs__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
	.si-web-programs__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 480px) {
	.si-web-programs__grid { grid-template-columns: 1fr; grid-auto-rows: 170px; }
}

/* ---------- Tarjetas con detalle ---------- */
.si-web-features { background: #fff; color: var(--si-ink); padding: var(--si-web-seccion) 0; }
.si-web-features__title { font-weight: 800; color: var(--si-navy-deep); font-size: clamp(2rem, 3.4vw, 40px); line-height: 1.1; margin: 0; text-align: center; text-wrap: balance; }
.si-web-features__lead { margin: 20px auto 64px; max-width: 820px; text-align: center; }
.si-web-features__lead p { font-size: 18px; color: var(--si-warm); margin: 0 0 12px; }
.si-web-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.si-web-feature { position: relative; border-radius: 14px; overflow: hidden; min-height: 360px; isolation: isolate; color: #fff; }
.si-web-feature:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 3px; }
.si-web-feature__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; }
.si-web-feature__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,59,0.15) 0%, rgba(20,22,59,0.55) 55%, rgba(20,22,59,0.92) 100%); transition: background .35s ease; }
/* «Learn more» sits at the same distance from the bottom of every card, with
   title and text resting right above it. Over the card, or with the keyboard,
   the list opens above that line and «Learn more» fades out. */
.si-web-feature__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 64px; transition: padding-bottom .45s cubic-bezier(.2,.7,.2,1); }
.si-web-feature__title { font-weight: 700; font-size: 20px; line-height: 1.15; margin: 0 0 6px; color: #fff; text-transform: uppercase; }
.si-web-feature__text { font-size: 14px !important; line-height: 1.5; color: rgba(255,255,255,0.88); margin: 0 0 10px; }
.si-web-feature__more { position: absolute; left: 22px; bottom: 28px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--si-font-display); font-weight: 600; font-size: 13px; color: var(--si-yellow); text-transform: uppercase; letter-spacing: .08em; transition: opacity .25s ease; }
.si-web-feature__detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.si-web-feature__list { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease .15s, transform .35s ease .15s; }
.si-web-feature__list li { position: relative; padding-left: 22px; font-size: 14px !important; line-height: 1.5; color: rgba(255,255,255,0.92); }
.si-web-feature__list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 14px; height: 2px; background: var(--si-yellow); border-radius: 2px; }
.si-web-feature:hover .si-web-feature__img, .si-web-feature:focus-within .si-web-feature__img { transform: scale(1.06); }
.si-web-feature:hover .si-web-feature__shade, .si-web-feature:focus-within .si-web-feature__shade { background: linear-gradient(180deg, rgba(20,22,59,0.85) 0%, rgba(20,22,59,0.90) 45%, rgba(20,22,59,0.96) 100%); }
.si-web-feature:hover .si-web-feature__body, .si-web-feature:focus-within .si-web-feature__body { padding-bottom: 28px; }
.si-web-feature:hover .si-web-feature__detalle, .si-web-feature:focus-within .si-web-feature__detalle { grid-template-rows: 1fr; }
.si-web-feature:hover .si-web-feature__more, .si-web-feature:focus-within .si-web-feature__more { opacity: 0; }
.si-web-feature:hover .si-web-feature__list, .si-web-feature:focus-within .si-web-feature__list { opacity: 1; transform: none; }
/* Sin ratón no hay «pasar por encima»: la lista se ve siempre. */
@media (hover: none), (prefers-reduced-motion: reduce) {
	.si-web-feature__body { padding-bottom: 28px; transition: none; }
	.si-web-feature__more { display: none; }
	.si-web-feature__detalle { grid-template-rows: 1fr; transition: none; }
	.si-web-feature__list { opacity: 1; transform: none; transition: none; }
	.si-web-feature__shade { background: linear-gradient(180deg, rgba(20,22,59,0.35) 0%, rgba(20,22,59,0.85) 45%, rgba(20,22,59,0.95) 100%); }
	.si-web-feature__img { transition: none; }
}
@media (max-width: 1280px) { .si-web-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
	.si-web-features { padding: 64px 0; }
	.si-web-features__lead { margin-bottom: 40px; }
	.si-web-features__grid { grid-template-columns: 1fr; }
	.si-web-feature { min-height: 420px; }
}

/* ---------- Bloques del padre dentro del sitio ---------- */
.si-web .testimonials { background: linear-gradient(135deg, #14163B 0%, #1A1C4E 55%, #14163B 100%); }
.si-web .quote-avatar { display: none; }
.si-web .quote-role { color: var(--si-yellow); }
/* En el sitio se ven dos testimonios a la vez, no tres como en las landings. */
@media (min-width: 1000px) { .si-web .testimonial-card { flex-basis: calc(50% - 10px); } }
/* El bento del sitio va sin iconos y con la entradilla al tamaño del cuerpo. */
.si-web .experience .bento-icon { display: none; }
/* The intro has no image beside it, so it spans the width of its grid. */
.si-web .experience .section-heading p { font-size: 17px; max-width: none; }
/* FAQ sobre blanco: cada pregunta en su caja y el signo en círculo amarillo.
   La última caja es la de disclaimers y va en navy, como en el diseño. */
.si-web-claro .faqs { background: #fff; border: 0; }
.si-web-claro .faqs .section-heading h2 { color: var(--si-navy); }
.si-web-claro .faq-list { max-width: 800px; margin: 0 auto; }
.si-web-claro .faq-item { border: 1px solid var(--si-rule); border-radius: 10px; background: #fff; padding: 0 20px; margin-bottom: 10px; }
.si-web-claro .faq-question { color: var(--si-navy); gap: 16px; }
.si-web-claro .faq-question:focus-visible { outline-color: var(--si-navy); }
.si-web-claro .faq-chevron { width: 28px; height: 28px; border-radius: 50%; background: var(--si-yellow); color: var(--si-navy-deep); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.si-web-claro .faq-answer, .si-web-claro .faq-answer p, .si-web-claro .faq-answer li { color: var(--si-ink); font-size: 15px; }
.si-web-claro .faq-answer a { color: var(--si-navy); }
.si-web-claro .faq-item:last-child { background: var(--si-navy-deep); border-color: transparent; }
.si-web-claro .faq-item:last-child .faq-question { color: #fff; }
.si-web-claro .faq-item:last-child .faq-question:focus-visible { outline-color: var(--si-yellow); }
.si-web-claro .faq-item:last-child .faq-answer,
.si-web-claro .faq-item:last-child .faq-answer p,
.si-web-claro .faq-item:last-child .faq-answer li { color: rgba(255,255,255,0.88); font-size: 14px; }
.si-web-claro .faq-item:last-child .faq-answer a { color: var(--si-yellow); }

/* Section with collapsible details: an Image and text block followed by SI FAQ
   items, both inside one group (`si-web-desplegables--gris|claro|oscuro`). The
   group paints the background and carries the section anchor, so the section
   and its details read as one block and an in-page link lands on its heading. */
.si-web-desplegables--gris { background: var(--si-surface); }
.si-web-desplegables--claro { background: #fff; }
.si-web-desplegables--oscuro { background: var(--si-web-gradiente); }
.si-web-desplegables > .si-web-media { background: transparent; padding-bottom: 40px; }
.si-web-desplegables__lista { max-width: 1280px; margin: 0 auto; padding: 0 32px var(--si-web-seccion); }
.si-web-desplegables .faq-item { border: 1px solid var(--si-rule); border-radius: 10px; background: #fff; padding: 0 20px; margin-bottom: 10px; }
.si-web-desplegables .faq-question { color: var(--si-navy); gap: 16px; }
.si-web-desplegables .faq-question:focus-visible { outline-color: var(--si-navy); }
.si-web-desplegables .faq-chevron { width: 28px; height: 28px; border-radius: 50%; background: var(--si-yellow); color: var(--si-navy-deep); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.si-web-desplegables .faq-answer, .si-web-desplegables .faq-answer p, .si-web-desplegables .faq-answer li { color: var(--si-ink); font-size: 15px; }
.si-web-desplegables .faq-answer a { color: var(--si-navy); }
.si-web-desplegables--oscuro .faq-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.si-web-desplegables--oscuro .faq-question { color: #fff; }
.si-web-desplegables--oscuro .faq-question:focus-visible { outline-color: var(--si-yellow); }
.si-web-desplegables--oscuro .faq-answer, .si-web-desplegables--oscuro .faq-answer p, .si-web-desplegables--oscuro .faq-answer li { color: rgba(255,255,255,0.85); }
.si-web-desplegables--oscuro .faq-answer a { color: var(--si-yellow); }
@media (max-width: 768px) {
	.si-web-desplegables > .si-web-media { padding-bottom: 32px; }
	.si-web-desplegables__lista { padding: 0 20px 64px; }
}

/* ---------- Tarjeta destacada ---------- */
.si-web-innovation { background: linear-gradient(135deg, #14163B 0%, #1A1C4E 55%, #14163B 100%); padding: var(--si-web-seccion) 0; }
.si-web-innovation__card { position: relative; overflow: hidden; background: #fff; border-radius: 24px; padding: 72px 56px; max-width: 1240px; margin: 0 auto; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
/* The photo is enlarged past the card so the light stone wall at both of its
   sides stays out of view and no white band shows at the edges. */
.si-web-innovation__bg { position: absolute; inset: 0; opacity: .12; background-size: cover; background-position: center; transform: scale(1.65); pointer-events: none; }
.si-web-innovation__body { position: relative; }
.si-web-innovation h2 { font-weight: 800; font-size: clamp(2rem, 3.6vw, 46px); line-height: 1.1; color: var(--si-navy-deep); margin: 0 0 24px; }
.si-web-innovation__text { font-size: 18px !important; line-height: 1.65; color: var(--si-navy); margin: 0 auto 32px; max-width: 640px; }
.si-web-innovation__seal { margin: 48px auto 0; max-width: 720px; background: var(--si-navy-darker); border-radius: 16px; padding: 28px 36px; display: flex; align-items: center; gap: 28px; text-align: left; }
.si-web-innovation__seal-img { width: 140px; height: auto; flex-shrink: 0; }
.si-web-innovation__seal p { font-size: 15px !important; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 0; }
@media (max-width: 768px) {
	.si-web-innovation { padding: 64px 0; }
	.si-web-innovation__card { padding: 40px 24px; }
	.si-web-innovation__seal { flex-direction: column; text-align: center; padding: 24px; gap: 16px; }
}

/* ---------- Imagen y texto ---------- */
.si-web-media { position: relative; overflow: hidden; padding: var(--si-web-seccion) 0; }
.si-web-media--oscuro { background: var(--si-web-gradiente); color: #fff; }
.si-web-media--claro { background: #fff; color: var(--si-ink); }
.si-web-media--gris { background: var(--si-surface); color: var(--si-ink); }
.si-web-media__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.si-web-media--img-derecha .si-web-media__grid { grid-template-columns: 1.1fr 1fr; }
.si-web-media--img-derecha .si-web-media__images { order: 2; }
.si-web-media--sin-imagen .si-web-media__grid { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
/* On program pages a section without image or video spans the whole container. */
.si-web-programa .si-web-media--sin-imagen .si-web-media__grid { max-width: none; }
.si-web-media__images--una .si-web-media__figure { aspect-ratio: 4/3; }
.si-web-media__figure { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.25); }
.si-web-media__figure img { width: 100%; height: 100%; object-fit: cover; }
.si-web-media__images--collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; gap: 12px; }
.si-web-media__images--collage .si-web-media__figure:first-child { grid-row: 1 / span 2; }
.si-web-media__images--collage .si-web-media__figure:only-child,
.si-web-media__images--collage .si-web-media__figure:first-child:nth-last-child(2) { grid-row: 1 / span 2; }
.si-web-media__images--collage .si-web-media__figure:nth-child(2):last-child { grid-row: 1 / span 2; }
.si-web-media__title { font-weight: 800; font-size: clamp(2rem, 3.6vw, 44px); line-height: 1.1; margin: 0 0 20px; text-wrap: balance; }
.si-web-media--oscuro .si-web-media__title { color: #fff; }
.si-web-media--claro .si-web-media__title, .si-web-media--gris .si-web-media__title { color: var(--si-navy); }
.si-web-media__title--barra { position: relative; padding-left: 22px; }
.si-web-media__title--barra::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 7px; background: var(--si-yellow); border-radius: 2px; }
.si-web-media__rich > :first-child { margin-top: 0; }
.si-web-media__rich p, .si-web-media__rich li { font-size: 16px; }
.si-web-media--oscuro .si-web-media__rich { color: rgba(255,255,255,0.82); }
.si-web-media--oscuro .si-web-media__rich strong { color: #fff; }
.si-web-media--claro .si-web-media__rich, .si-web-media--gris .si-web-media__rich { color: var(--si-warm); }
.si-web-media__rich h3 { font-size: 18px; color: var(--si-yellow); margin: 24px 0 8px; }
.si-web-media--claro .si-web-media__rich h3, .si-web-media--gris .si-web-media__rich h3 { color: var(--si-navy); }
.si-web-media__rich a { color: inherit; text-decoration: underline; }
.si-web-media__rich ul { padding-left: 1.1em; }
.si-web-media__rich ul li::marker { color: var(--si-yellow); }
.si-web-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 14px; }
.si-web-list:empty, .si-web-list:not(:has(*)) { display: none; }
/* The margin separates the list from a box or a button after it. A list that
   ends the column (no rankings box, no button) carries none, so the section
   ends at its own padding. */
.si-web-media__text > .si-web-list:last-child { margin-bottom: 0; }
.si-web-list__item { display: flex; align-items: center; gap: 14px; font-size: 15px !important; line-height: 1.45; }
.si-web-media--oscuro .si-web-list__item { color: rgba(255,255,255,.9); }
/* On light sections the points read in the colour of the section text. */
.si-web-media--claro .si-web-list__item, .si-web-media--gris .si-web-list__item { color: var(--si-warm); }
.si-web-list__icon { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--si-yellow); background: rgba(255,204,9,0.14); border: 1px solid rgba(255,204,9,0.55); }
.si-web-media--claro .si-web-list__icon, .si-web-media--gris .si-web-list__icon { color: var(--si-blue); background: rgba(68,119,187,0.10); border-color: rgba(68,119,187,0.35); }
.si-web-media--claro .si-web-list__item strong, .si-web-media--gris .si-web-list__item strong { color: var(--si-navy); }
.si-web-media__note { margin-top: 48px; display: flex; gap: 18px; align-items: flex-start; padding: 24px 28px; border-radius: 14px; }
.si-web-media--oscuro .si-web-media__note { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,.85); }
.si-web-media--claro .si-web-media__note, .si-web-media--gris .si-web-media__note { background: var(--si-navy-darker); color: rgba(255,255,255,.9); }
.si-web-media__note p { font-size: 14px !important; margin: 0 0 6px; }
/* El texto del aviso ocupa al menos el alto del icono y se centra en él: una
   sola línea queda a la altura del icono y uno largo empieza arriba. */
.si-web-media__note > div { min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.si-web-media__note > div > :last-child { margin-bottom: 0; }
.si-web-media__note strong { color: var(--si-yellow); }
.si-web-media__note-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--si-yellow); border: 1px solid rgba(255,204,9,0.55); background: rgba(255,204,9,0.14); }
/* Dos botones seguidos; en móvil, uno debajo de otro y a todo el ancho. */
.si-web-media__actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 600px) {
	.si-web-media__actions .si-web-btn { flex: 1 1 100%; white-space: normal; text-align: center; line-height: 1.25; padding: 12px 24px; }
}
/* Vídeo o mapa en la columna de imagen. El vertical se queda en su ancho de
   móvil, pegado al lado exterior; el apaisado y el mapa llenan la columna. */
.si-web-media__images--video { display: flex; justify-content: flex-start; }
.si-web-media--img-derecha .si-web-media__images--video { justify-content: flex-end; }
.si-web-media__images--video .si-web-video__frame { box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.si-web-media__map { display: block; width: 100%; aspect-ratio: 4/3; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.18); background: var(--si-surface); }
/* Rankings con su sello, debajo de la lista, como en la web actual. */
.si-web-ranking { display: flex; align-items: center; gap: 24px; margin: 0 0 32px; padding: 20px 24px; border-radius: 14px; background: var(--si-surface); border: 1px solid var(--si-rule); }
.si-web-media--oscuro .si-web-ranking { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.si-web-ranking__logo { width: 112px; height: auto; flex-shrink: 0; }
.si-web-ranking__title { font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--si-navy); margin: 0 0 10px; }
.si-web-media--oscuro .si-web-ranking__title { color: #fff; }
.si-web-ranking__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.si-web-ranking__list li { font-size: 15px !important; line-height: 1.45; color: var(--si-ink); }
.si-web-media--oscuro .si-web-ranking__list li { color: rgba(255,255,255,0.88); }
.si-web-ranking__list strong { color: var(--si-navy); font-family: var(--si-font-display); }
.si-web-media--oscuro .si-web-ranking__list strong { color: var(--si-yellow); }
@media (max-width: 1100px) {
	.si-web-media__grid, .si-web-media--img-derecha .si-web-media__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.si-web-media--img-derecha .si-web-media__images { order: 0; }
	/* En una columna el vídeo va debajo del texto, como piden las fichas; las fotos siguen arriba. */
	.si-web-media__images--video, .si-web-media--img-derecha .si-web-media__images--video { justify-content: center; order: 2; }
}
@media (max-width: 480px) {
	.si-web-ranking { flex-direction: column; align-items: flex-start; gap: 16px; }
	.si-web-ranking__logo { width: 96px; }
}
@media (max-width: 768px) {
	.si-web-media { padding: 64px 0; }
	.si-web-media__images--collage { grid-template-rows: 150px 150px; }
}

/* ---------- Vídeo ---------- */
.si-web-video { position: relative; overflow: hidden; padding: var(--si-web-seccion) 0; background: var(--si-web-gradiente); color: #fff; }
.si-web-video__grid { display: grid; grid-template-columns: 1.1fr auto; gap: 64px; align-items: center; max-width: 1200px; }
.si-web-video h2 { font-weight: 800; color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 20px; }
.si-web-video__text p { font-size: 18px; color: rgba(255,255,255,0.8); margin: 0; max-width: 520px; }
.si-web-video__frame { position: relative; overflow: hidden; background: #000; }
.si-web-video--vertical .si-web-video__frame { width: min(360px, 80vw); aspect-ratio: 9/16; border-radius: 24px; justify-self: end; box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 6px rgba(255,255,255,0.06); }
.si-web-video--horizontal .si-web-video__frame { width: 100%; aspect-ratio: 16/9; border-radius: 16px; box-shadow: 0 32px 80px rgba(0,0,0,0.45); }
/* El apaisado ocupa el ancho de su columna: con la columna automática del vertical se quedaría a cero. */
.si-web-video--horizontal:not(.si-web-video--solo) .si-web-video__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.si-web-video--solo .si-web-video__grid { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
.si-web-video--solo.si-web-video--horizontal { background: #000; }
.si-web-video__frame video, .si-web-video__frame iframe, .si-web-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.si-web-video__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
	width: 88px; height: 88px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--si-yellow); color: var(--si-navy-deep); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 12px 40px rgba(0,0,0,0.45); transition: transform .2s ease;
}
.si-web-video__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.si-web-video__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.si-web-video__foot { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; justify-content: space-between; font-family: var(--si-font-display); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.si-web-video__foot i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--si-yellow); margin-right: 6px; }
.si-web-video.is-playing .si-web-video__play, .si-web-video.is-playing .si-web-video__foot, .si-web-video.is-playing .si-web-video__poster { display: none; }
/* Marco de vídeo dentro de otro bloque (imagen y texto, tarjetas). Cada marco
   lleva su propio estado: en una rejilla de vídeos solo cambia el que se pulsa. */
.si-web-video__frame--vertical { width: min(340px, 100%); aspect-ratio: 9/16; border-radius: 24px; }
.si-web-video__frame--horizontal { width: 100%; aspect-ratio: 16/9; border-radius: 16px; }
.si-web-video__frame.is-playing .si-web-video__play, .si-web-video__frame.is-playing .si-web-video__poster { display: none; }
/* A section reached through an anchor keeps the header height clear above it. */
.si-web-video[id] { scroll-margin-top: calc(var(--si-web-alto-cabecera) + var(--wp-admin--admin-bar--height, 0px)); }
/* With a 360° tour: heading on top, the tour full width and the video centered below. */
.si-web-video--tour .si-web-video__grid,
.si-web-video--tour.si-web-video--horizontal:not(.si-web-video--solo) .si-web-video__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 1280px; }
.si-web-video--tour h2 { margin: 0; }
.si-web-video__tour { position: relative; height: 400px; border-radius: 16px; overflow: hidden; background: var(--si-navy-deep); box-shadow: 0 32px 80px rgba(0,0,0,0.45); }
.si-web-video__tour iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.si-web-video--tour .si-web-video__frame { width: min(100%, 880px); justify-self: center; }
@media (max-width: 900px) {
	.si-web-video { padding: 64px 0; }
	.si-web-video__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; text-align: center; }
	.si-web-video__text p { margin: 0 auto; }
	.si-web-video--vertical .si-web-video__frame { justify-self: center; }
	.si-web-video--horizontal:not(.si-web-video--solo) .si-web-video__grid { grid-template-columns: minmax(0, 1fr); }
	.si-web-video__tour { height: 360px; }
}

/* ---------- Instagram ---------- */
.si-web-instagram { padding: var(--si-web-seccion) 0; background: #fff; }
.si-web-instagram__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.si-web-instagram__handle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--si-font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--si-blue); margin-bottom: 14px; }
.si-web-instagram h2 { font-weight: 800; color: var(--si-navy); font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 0; }
.si-web-instagram__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.si-web-instagram__tile { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: 6px; background: var(--si-surface); }
.si-web-instagram__tile img { width: 100%; height: 100%; object-fit: cover; }
.si-web-instagram__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(41,44,115,0.65) 0%, rgba(255,204,9,0.35) 100%); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; }
.si-web-instagram__tile:hover .si-web-instagram__overlay, .si-web-instagram__tile:focus-visible .si-web-instagram__overlay { opacity: 1; }
.si-web-instagram__tile:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 2px; }
@media (max-width: 900px) { .si-web-instagram__grid { grid-template-columns: repeat(3, 1fr); } }
/* El feed de Spotlight trae su propia cabecera de perfil y su botón de cargar más; la cabecera y el «Follow Us» ya los pone el bloque. */
.si-web-instagram__feed .FeedHeader__root, .si-web-instagram__feed .FeedLayout__load-more-btn { display: none !important; }
/* Posts in portrait 4:5, as Instagram shows them now. Spotlight squares each
   cell with an inline padding-bottom; the photo covers the cell. */
.si-web-instagram__feed .FeedGridLayout__cell { padding-bottom: 125% !important; }
@media (max-width: 480px) { .si-web-instagram__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Blog ---------- */
.si-web-blog { padding: var(--si-web-seccion) 0; background: linear-gradient(135deg, #F4F6FA 0%, #EAECF3 55%, #F4EEDA 100%); }
.si-web-blog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }
.si-web-blog__head > div { flex: 1 1 520px; }
.si-web-blog h2 { font-weight: 800; color: var(--si-navy); font-size: clamp(2rem, 3.4vw, 40px); line-height: 1.1; margin: 0; }
.si-web-blog__head p { font-size: 18px; color: var(--si-warm); margin: 20px 0 0; max-width: 820px; }
.si-web-blog__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.si-web-post { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(20,22,59,.06); transition: transform .2s, box-shadow .2s; }
.si-web-post:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20,22,59,.14); color: inherit; }
.si-web-post:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 3px; }
.si-web-post__img { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--si-navy-deep); }
/* The photo fills the 16:9 box out of the flow: in the flow a tall photo
   stretched its box and the cards of a row came out with uneven heights. */
.si-web-post__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.si-web-post__cat { position: absolute; top: 14px; left: 14px; background: var(--si-navy); color: #fff; font-family: var(--si-font-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.si-web-post__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.si-web-post__date { font-family: var(--si-font-display); font-weight: 500; font-size: 12px; color: #5A5E6B; text-transform: uppercase; letter-spacing: .1em; }
.si-web-post__title { font-family: var(--si-font-display); font-weight: 700; font-size: 19px; color: var(--si-navy-deep); line-height: 1.25; }
/* Three lines at most, as in the blog listing: a full meta description is longer than a trimmed excerpt. */
.si-web-post__excerpt { font-size: 14px; color: var(--si-warm); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.si-web-post__more { font-family: var(--si-font-display); font-weight: 600; font-size: 14px; color: #3A6BAA; margin-top: auto; padding-top: 8px; }
@media (max-width: 1100px) { .si-web-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
	.si-web-blog { padding: 64px 0; }
	.si-web-blog__grid { grid-template-columns: 1fr; }
	.si-web-blog__head .si-web-btn { width: 100%; }
}

/* ---------- Franja de texto ---------- */
.si-web-band {
	padding: 72px 0; text-align: center; color: #fff;
	background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 18px), linear-gradient(135deg, #2A2E7C 0%, #1F2268 100%);
}
.si-web-band h2 { font-weight: 800; color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 18px; }
.si-web-band__text { max-width: 900px; margin: 0 auto; color: rgba(255,255,255,0.88); }
.si-web-band__text p { font-size: 16px; margin: 0 0 10px; }
.si-web-band__text a { color: var(--si-yellow); text-decoration: underline; }
.si-web-band__text a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Disclaimers y llamada ---------- */
.si-web-contact { background: #fff; padding: var(--si-web-seccion-pie) 5%; }
/* Detrás de una sección blanca el relleno de esta ya está puesto: sumar los
   dos dejaba más de 200 px en blanco antes de los disclaimers. */
.si-web-media--claro + .si-web-contact { padding-top: 0; }
.si-web-contact__inner { max-width: 1258px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.si-web-contact__box { position: relative; background: var(--si-surface); border-radius: 12px; padding: 20px 60px 20px 24px; }
.si-web-contact__i { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%; background: var(--si-yellow); color: var(--si-navy-deep); display: flex; align-items: center; justify-content: center; font-family: var(--si-font-display); font-weight: 700; font-size: 14px; }
.si-web-contact__box h2 { font-weight: 700; font-size: 16px; color: var(--si-navy-deep); margin: 0 0 6px; }
.si-web-contact__text p { font-size: 14px !important; line-height: 1.55; color: var(--si-ink); margin: 0; }
.si-web-contact__text a { color: var(--si-navy-deep); text-decoration: underline; }
/* «Prefer to talk?» takes a third of the width of the box and sits centred
   under it; on phones, the width of its label. */
.si-web-contact__call {
	display: flex; flex-direction: column; align-items: center; align-self: center; width: fit-content; min-width: 33%; max-width: 100%;
	border: 3px solid var(--si-yellow); border-radius: 999px; padding: 16px 40px; text-decoration: none;
}
.si-web-contact__call:hover { background: rgba(255,204,9,0.12); }
.si-web-contact__call:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 3px; }
.si-web-contact__label { font-family: var(--si-font-display); font-weight: 600; font-size: 11px; color: var(--si-navy-deep); letter-spacing: 2px; text-transform: uppercase; }
.si-web-contact__num { font-family: var(--si-font-display); font-weight: 700; font-size: 18px; color: var(--si-navy-deep); margin-top: 4px; }
@media (max-width: 768px) {
	.si-web-contact { padding: 48px 20px; }
	.si-web-contact__call { padding: 14px 24px; }
}

/* ---------- Pasos con tarjeta ---------- */
.si-web-steps { padding: var(--si-web-seccion) 0; background: var(--si-web-gradiente); color: #fff; }
.si-web-steps__title { position: relative; padding-left: 22px; font-weight: 800; font-size: clamp(2rem, 3.6vw, 44px); color: #fff; line-height: 1.1; margin: 0 0 48px; }
.si-web-steps__title::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 7px; background: var(--si-yellow); border-radius: 2px; }
.si-web-steps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: si-web-paso; }
.si-web-step { counter-increment: si-web-paso; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); }
.si-web-step::before { content: counter(si-web-paso); width: 40px; height: 40px; border-radius: 50%; background: var(--si-yellow); color: var(--si-navy-deep); display: inline-flex; align-items: center; justify-content: center; font-family: var(--si-font-display); font-weight: 800; font-size: 18px; }
.si-web-step__title { font-weight: 700; font-size: 20px; color: #fff; margin: 0; line-height: 1.2; }
.si-web-step__text p, .si-web-step__text li { font-size: 15px !important; color: rgba(255,255,255,0.82); margin: 0 0 8px; }
.si-web-step__text ul { padding-left: 1.1em; margin: 0; }
.si-web-step__text li::marker { color: var(--si-yellow); }
.si-web-step__text strong { color: var(--si-yellow); }
.si-web-step__img { margin: auto 0 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16/10; }
.si-web-step__img img { width: 100%; height: 100%; object-fit: cover; }
.si-web-step .si-web-btn { align-self: flex-start; min-height: 48px; font-size: 14px; padding: 0 20px; white-space: nowrap; }
/* En móvil el botón ocupa el ancho de la tarjeta y su texto salta de línea si
   no cabe: «View Full Admission Requirements» se salía por la derecha. */
@media (max-width: 600px) {
	.si-web-step .si-web-btn { align-self: stretch; white-space: normal; text-align: center; line-height: 1.25; padding: 12px 20px; }
}
@media (max-width: 1000px) { .si-web-steps__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .si-web-steps { padding: 64px 0; } }

/* ---------- Formulario a ancho completo ---------- */
.si-web-panel { position: relative; overflow: hidden; padding: var(--si-web-seccion) 0; background: var(--si-web-gradiente); color: #fff; }
.si-web-panel__bg { position: absolute; inset: 0; opacity: .14; background-size: cover; background-position: center; pointer-events: none; }
.si-web-panel__inner { position: relative; max-width: 1040px; }
.si-web-panel__title { display: table; margin: 0 auto 12px; position: relative; padding-left: 22px; font-weight: 800; font-size: clamp(2rem, 3.6vw, 44px); color: #fff; }
.si-web-panel__title::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 7px; background: var(--si-yellow); border-radius: 2px; }
.si-web-panel__text { text-align: center; color: rgba(255,255,255,0.82); margin: 0 0 32px; }
.si-web-panel__card .form-card { border-radius: 20px; padding: 40px; }
/* Los títulos de sección del formulario largo van con la tipografía del sitio;
   Forminator los pinta con la letra del cuerpo, a 45px y en gris. */
.si-web-panel .forminator-ui .forminator-title { font-family: var(--si-font-display) !important; font-weight: 700 !important; font-size: 24px !important; line-height: 1.2 !important; color: var(--si-blue) !important; margin: 16px 0 12px !important; }
/* La dirección lleva sus subcampos en una fila anidada al 100% con margen
   negativo, que la deja 14px más corta que los campos vecinos. */
.si-web-panel .forminator-ui .forminator-field-address > .forminator-row { margin-left: 0 !important; margin-right: 0 !important; }
.si-web-panel .forminator-ui .forminator-field-address > .forminator-row > .forminator-col { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 768px) {
	.si-web-panel { padding: 64px 0; }
	.si-web-panel__card .form-card { padding: 28px 20px; }
}

@media (max-width: 768px) {
	.si-web-container { padding: 0 20px; }
}

/* Smush pone opacity:1 a lo que carga en diferido; las capas decorativas
   llevan su propia opacidad y se excluyen de esa carga con .no-lazyload. */
.si-web-lead__bg { opacity: .18 !important; }
.si-web-innovation__bg { opacity: .12 !important; }
.si-web-panel__bg { opacity: .14 !important; }

/* ==========================================================================
   Blog: listado (home.php, archive.php, search.php) y entrada (single.php).
   Ritmo de fondos: cabecera navy, filtros en blanco, rejilla en gris claro, y
   vuelve el navy con el formulario. En la entrada, artículo en blanco,
   relacionadas en gris y el formulario navy.
   ========================================================================== */

/* ---------- Blog: cabecera del listado ---------- */
.si-web-cabecera-blog {
	position: relative; overflow: hidden; min-height: 440px; display: flex; align-items: center;
	padding: 80px 0; background: var(--si-web-gradiente); color: #fff; text-align: center;
}
.si-web-cabecera-blog__fondo { position: absolute; inset: 0; }
.si-web-cabecera-blog__fondo img { width: 100%; height: 100%; object-fit: cover; }
.si-web-cabecera-blog__fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,59,0.55) 0%, rgba(20,22,59,0.72) 100%); }
.si-web-cabecera-blog__contenido { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.si-web .si-web-cabecera-blog__antetitulo {
	font-family: var(--si-font-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; line-height: 1.4;
	text-transform: uppercase; color: #fff; background: var(--si-blue); border-radius: 999px; padding: 8px 20px; margin: 0 0 22px;
}
.si-web-cabecera-blog h1 { font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.04; color: #fff; margin: 0; }
.si-web-cabecera-blog__entradilla { font-size: 17px; color: rgba(255,255,255,0.85); margin: 18px auto 0; max-width: 780px; }

/* ---------- Blog: filtros ---------- */
.si-web-filtros { background: #fff; padding: 48px 0 40px; }
.si-web-filtros__form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 16px; align-items: end; }
.si-web-filtros__campo { min-width: 0; }
.si-web-filtros__campo label {
	display: block; font-family: var(--si-font-display); font-weight: 600; font-size: 12px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--si-warm); margin-bottom: 8px;
}
.si-web-filtros__buscar { position: relative; }
.si-web-filtros__buscar .si-web-icono { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--si-warm); pointer-events: none; }
.si-web-filtros input, .si-web-filtros select {
	width: 100%; height: 48px; padding: 0 14px; font-family: var(--si-font-display); font-size: 15px; color: var(--si-navy);
	background-color: #fff; border: 1.5px solid var(--si-navy); border-radius: 6px;
}
.si-web-filtros input { -webkit-appearance: none; appearance: none; padding-left: 42px; color: var(--si-ink); }
.si-web-filtros input::placeholder { color: #6B6D73; }
.si-web-filtros input:focus, .si-web-filtros select:focus { outline: 3px solid var(--si-yellow); outline-offset: 1px; }
.si-web-filtros__boton {
	height: 48px; padding: 0 26px; border-radius: 6px; border: 1.5px solid var(--si-navy); background: var(--si-navy); color: #fff;
	font-family: var(--si-font-display); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s ease;
}
.si-web-filtros__boton:hover { background: var(--si-navy-deep); }
.si-web-filtros__boton:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 2px; }

/* ---------- Blog: rejilla y tarjeta ---------- */
.si-web-listado { background: var(--si-surface); padding: 56px 0 80px; }
.si-web-listado__grid, .si-web-relacionadas__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.si-web-listado__vacio { text-align: center; color: var(--si-warm); padding: 48px 0; margin: 0; }
.si-web-tarjeta {
	position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 8px; overflow: hidden;
	box-shadow: 0 4px 18px rgba(20,22,59,0.08); transition: transform .2s ease, box-shadow .2s ease;
}
.si-web-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(20,22,59,0.14); }
.si-web-tarjeta__img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--si-navy-deep); }
/* Same as the block cards: the photo never sets the height of its 16:9 box. */
.si-web-tarjeta__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.si-web-tarjeta__cat {
	position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-family: var(--si-font-display); font-weight: 600; font-size: 10px; letter-spacing: .1em; line-height: 1; text-transform: uppercase;
	color: #fff; background: var(--si-navy-deep); border-radius: 999px; padding: 7px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.si-web-tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
/* La fecha va antes en pantalla y después en el código: quien navega por
   titulares llega al título y lee la fecha a continuación. */
.si-web-tarjeta__fecha {
	order: -1; font-family: var(--si-font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--si-warm); margin-bottom: 10px;
}
.si-web .si-web-tarjeta__titulo { font-weight: 700; font-size: 1.12rem; line-height: 1.3; color: var(--si-navy); margin: 0 0 10px; }
.si-web-tarjeta__titulo a { color: inherit; text-decoration: none; }
.si-web-tarjeta__titulo a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
/* El foco se dibuja en la capa que estira el enlace, por dentro del borde de la
   tarjeta, que recorta lo que sobresale. */
.si-web-tarjeta__titulo a:focus-visible { outline: none; }
.si-web-tarjeta__titulo a:focus-visible::after { outline: 3px solid var(--si-navy); outline-offset: -3px; }
.si-web .si-web-tarjeta__extracto {
	font-size: 15px; line-height: 1.55; color: var(--si-warm); margin: 0 0 18px;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.si-web-tarjeta__mas {
	margin-top: auto; align-self: flex-start; font-family: var(--si-font-display); font-weight: 600; font-size: 14px; color: var(--si-blue);
	padding: 4px 10px 4px 0; border-radius: 4px; transition: background .15s ease, padding .15s ease, color .15s ease;
}
.si-web-tarjeta:hover .si-web-tarjeta__mas { background: var(--si-yellow); color: var(--si-navy-darker); padding-left: 10px; }

/* ---------- Blog: paginación ---------- */
.si-web-paginacion { margin-top: 44px; }
.si-web-paginacion ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.si-web-paginacion .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px;
	border-radius: 6px; font-family: var(--si-font-display); font-weight: 600; font-size: 15px; color: var(--si-navy); text-decoration: none;
}
.si-web-paginacion a.page-numbers:hover { background: rgba(41,44,115,0.08); color: var(--si-navy); }
.si-web-paginacion a.page-numbers:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 2px; }
.si-web-paginacion .current { background: var(--si-yellow); color: var(--si-navy-darker); }
.si-web-paginacion .dots { min-width: 0; padding: 0 4px; color: var(--si-warm); }
.si-web-paginacion .prev, .si-web-paginacion .next { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Blog: entrada ---------- */
.si-web-destacada { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 480px; overflow: hidden; background: var(--si-surface); }
.si-web-destacada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.si-web-articulo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 96px; align-items: start; padding-top: 48px; padding-bottom: 80px; }
.si-web-articulo__principal { min-width: 0; max-width: 820px; }
.si-web-articulo__cabecera { padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid rgba(22,24,29,0.1); }
.si-web-articulo__chip {
	display: inline-block; margin-bottom: 24px; padding: 7px 16px; border: 1px solid var(--si-yellow); border-radius: 999px;
	font-family: var(--si-font-display); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--si-navy-darker); text-decoration: none;
}
.si-web-articulo__chip:hover { background: rgba(255,204,9,0.14); color: var(--si-navy-darker); }
.si-web-articulo__chip:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 2px; }
.si-web-articulo__cabecera h1 { font-weight: 800; font-size: clamp(2rem, 4.2vw, 50px); line-height: 1.1; color: var(--si-navy); margin: 0; }
.si-web .si-web-articulo__meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: rgba(22,24,29,0.72); }
.si-web-articulo__lectura { color: rgba(22,24,29,0.66); }

/* El texto viene del editor: aquí solo se le da la tipografía del diseño. Las
   imágenes flotadas del sitio anterior pasan a ocupar la columna. */
.si-web-articulo__cuerpo { font-size: 17px; line-height: 1.75; color: var(--si-ink); overflow-wrap: break-word; }
.si-web-articulo__cuerpo > :first-child { margin-top: 0; }
.si-web .si-web-articulo__cuerpo p { line-height: 1.75; margin: 0 0 1.5em; }
.si-web-articulo__cuerpo h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.25; color: var(--si-navy); margin: 2em 0 .6em; }
.si-web-articulo__cuerpo h3 { font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--si-navy); margin: 1.8em 0 .5em; }
.si-web-articulo__cuerpo h4 { font-family: var(--si-font-display); font-weight: 600; font-size: 1.05rem; color: var(--si-ink); margin: 1.5em 0 .4em; }
.si-web-articulo__cuerpo strong, .si-web-articulo__cuerpo b { font-family: var(--si-font-display); font-weight: 600; color: var(--si-navy); }
.si-web-articulo__cuerpo a:not(.si-web-btn) { color: var(--si-blue); text-decoration: underline; }
.si-web-articulo__cuerpo a:not(.si-web-btn):hover { color: var(--si-navy); }
.si-web-articulo__cuerpo a:not(.si-web-btn):focus-visible { outline: 2px solid var(--si-navy); outline-offset: 2px; }
.si-web-articulo__cuerpo ul, .si-web-articulo__cuerpo ol { padding-left: 1.25em; margin: 0 0 1.5em; }
.si-web .si-web-articulo__cuerpo li { line-height: 1.7; margin-bottom: .4em; }
.si-web-articulo__cuerpo li::marker { color: var(--si-blue); }
.si-web-articulo__cuerpo img { height: auto; border-radius: 4px; }
.si-web-articulo__cuerpo figure { margin: 2em 0; max-width: 100%; }
.si-web-articulo__cuerpo figure img { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.si-web-articulo__cuerpo figcaption, .si-web-articulo__cuerpo .wp-caption-text { font-size: 15px; font-style: italic; line-height: 1.5; color: rgba(22,24,29,0.66); margin-top: 10px; text-align: center; }
.si-web-articulo__cuerpo .alignleft, .si-web-articulo__cuerpo .alignright { float: none; margin: 2em 0; }
.si-web-articulo__cuerpo .aligncenter { margin-left: auto; margin-right: auto; }
.si-web-articulo__cuerpo iframe, .si-web-articulo__cuerpo video, .si-web-articulo__cuerpo .wp-video { max-width: 100%; }
.si-web-articulo__cuerpo blockquote { margin: 2em 0; padding: 32px 40px; background: var(--si-surface); border-radius: 12px; text-align: center; }
.si-web-articulo__cuerpo blockquote::before { content: '\201C'; display: block; font-family: var(--si-font-display); font-weight: 800; font-size: 4rem; line-height: .6; color: var(--si-yellow); margin-bottom: 8px; }
.si-web .si-web-articulo__cuerpo blockquote p { font-family: var(--si-font-display); font-weight: 500; font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--si-navy); margin: 0; }

/* Franja «Request Info» a mitad del texto. */
.si-web-franja {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	margin: 2em 0 2.5em; padding: 32px 36px; border-radius: 12px; background: linear-gradient(180deg, #1A1C4E, #090A2D);
}
.si-web .si-web-franja .si-web-franja__texto { flex: 1 1 260px; margin: 0; font-family: var(--si-font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; color: #fff; }
.si-web-franja .si-web-btn { flex-shrink: 0; }

.si-web-articulo__pie { margin-top: 40px; }
.si-web-articulo__etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.si-web-articulo__etiqueta {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border: 1px solid var(--si-navy); border-radius: 999px;
	font-size: 15px; line-height: 1.3; color: var(--si-navy); text-decoration: none;
}
.si-web-articulo__etiqueta:hover { background: var(--si-navy); color: #fff; }
.si-web-articulo__etiqueta:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 2px; }
.si-web-articulo__nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(22,24,29,0.1); }
.si-web-articulo__nav a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 1.5px solid var(--si-navy); border-radius: 999px;
	font-family: var(--si-font-display); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--si-navy); text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}
.si-web-articulo__nav a:hover { background: var(--si-yellow); border-color: var(--si-yellow); color: var(--si-navy); }
.si-web-articulo__nav a:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 2px; }

/* Compartir: columna lateral que acompaña al texto mientras se lee. */
.si-web-articulo__lateral { position: sticky; top: calc(var(--si-web-alto-cabecera) + var(--wp-admin--admin-bar--height, 0px) + 24px); }
.si-web-compartir { background: var(--si-surface); border-radius: 12px; padding: 20px; }
.si-web .si-web-compartir__titulo { font-family: var(--si-font-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--si-navy); margin: 0 0 14px; }
.si-web-compartir__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.si-web-compartir__lista li[hidden] { display: none; }
.si-web-compartir__boton {
	position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
	border-radius: 50%; border: 1.5px solid var(--si-navy); background: #fff; color: var(--si-navy); cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.si-web-compartir__boton:hover { background: var(--si-yellow); border-color: var(--si-yellow); color: var(--si-navy-darker); }
.si-web-compartir__boton:focus-visible { outline: 3px solid var(--si-navy); outline-offset: 2px; }
/* Rótulo al pasar por encima o llegar con el teclado: el mismo texto que ya
   anuncia el lector de pantalla. */
.si-web-compartir__boton::after {
	content: attr(aria-label); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5;
	background: var(--si-navy-darker); color: #fff; font-family: var(--si-font-body); font-size: 12px; line-height: 1.3; white-space: nowrap;
	padding: 5px 9px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.si-web-compartir__boton:hover::after, .si-web-compartir__boton:focus-visible::after { opacity: 1; }
.si-web .si-web-aviso {
	position: fixed; left: 50%; bottom: 24px; z-index: 300; margin: 0; transform: translate(-50%, 20px);
	background: var(--si-navy-darker); color: #fff; font-family: var(--si-font-display); font-weight: 600; font-size: 15px;
	padding: 12px 24px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); opacity: 0; pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.si-web-aviso.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Blog: relacionadas ---------- */
.si-web-relacionadas { padding: 88px 0; background: var(--si-rule); }
.si-web .si-web-relacionadas__titulo { position: relative; padding-left: 22px; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.2; color: var(--si-navy); margin: 0 0 28px; }
.si-web-relacionadas__titulo::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 7px; background: var(--si-yellow); border-radius: 2px; }

@media (max-width: 1100px) {
	.si-web-listado__grid, .si-web-relacionadas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.si-web-articulo { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.si-web-articulo__principal { max-width: none; }
	.si-web-articulo__lateral { position: static; }
}
@media (max-width: 900px) {
	.si-web-filtros__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.si-web-filtros__campo--buscar { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
	.si-web-cabecera-blog { min-height: 300px; padding: 56px 0; }
	.si-web-cabecera-blog h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
	.si-web-cabecera-blog__entradilla { font-size: 16px; }
	.si-web-filtros { padding: 36px 0 32px; }
	.si-web-listado, .si-web-relacionadas { padding: 48px 0 56px; }
	.si-web-paginacion li:not(.si-web-paginacion__paso):not(.si-web-paginacion__actual) { display: none; }
	.si-web-destacada { aspect-ratio: 16/10; max-height: 240px; }
	.si-web-articulo { padding-top: 32px; padding-bottom: 56px; }
	.si-web-articulo__cabecera h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
	.si-web-articulo__cuerpo { font-size: 16px; }
	.si-web-articulo__cuerpo h2 { font-size: 1.3rem; }
	.si-web-articulo__cuerpo blockquote { padding: 24px 20px; }
	.si-web-franja { padding: 24px 20px; }
	.si-web-articulo__nav { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
	.si-web-filtros__form { grid-template-columns: minmax(0, 1fr); }
	.si-web-listado__grid, .si-web-relacionadas__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.si-web-tarjeta, .si-web-tarjeta__mas, .si-web-compartir__boton, .si-web-compartir__boton::after, .si-web-aviso, .si-web-articulo__nav a { transition: none; }
	.si-web-tarjeta:hover { transform: none; }
}

/* ---------- Tarjetas ---------- */
.si-web-cards { padding: var(--si-web-seccion) 0; color: var(--si-ink); }
.si-web-cards--claro { background: #fff; }
.si-web-cards--gris { background: var(--si-surface); }
.si-web-cards__title { position: relative; padding-left: 22px; font-weight: 800; font-size: clamp(2rem, 3.6vw, 44px); line-height: 1.1; color: var(--si-navy); margin: 0 0 20px; text-wrap: balance; }
.si-web-cards__title::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 7px; background: var(--si-yellow); border-radius: 2px; }
.si-web-cards__intro { max-width: 900px; color: var(--si-warm); margin: 0 0 40px; }
.si-web-cards__intro p { font-size: 16px; }
.si-web-cards__intro > :last-child { margin-bottom: 0; }
.si-web-cards__intro a { color: inherit; text-decoration: underline; }
.si-web-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.si-web-cards--3-col .si-web-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.si-web-card { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: 16px; background: var(--si-surface); border: 1px solid var(--si-rule); }
.si-web-cards--gris .si-web-card { background: #fff; }
.si-web-card__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; min-height: 64px; }
.si-web-card__logo { display: block; width: auto; height: auto; max-height: 64px; max-width: 100%; object-fit: contain; }
.si-web-card__media .si-web-video__frame { border-radius: 12px; }
/* An image without video keeps the 16:9 slot of the videos in its row, shown whole and centered. */
.si-web-card__media--imagen { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: 12px; background: var(--si-surface); }
.si-web-cards--claro .si-web-card__media--imagen { background: #fff; }
.si-web-card__imagen { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.si-web-card__title { font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--si-navy); margin: 0 0 10px; }
.si-web-card__text p, .si-web-card__text li { font-size: 15px !important; color: var(--si-warm); }
.si-web-card__text > :first-child { margin-top: 0; }
.si-web-card__text > :last-child { margin-bottom: 0; }
.si-web-card__text a { color: var(--si-navy); text-decoration: underline; }
/* La primera tarjeta destacada ocupa la fila: su vídeo grande y el texto al lado. */
.si-web-cards--destacada .si-web-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 40px; }
.si-web-cards--destacada .si-web-card:first-child .si-web-card__title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.2; }
@media (max-width: 1000px) {
	.si-web-cards--3-col .si-web-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.si-web-cards--destacada .si-web-card:first-child { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
	.si-web-cards { padding: 64px 0; }
	.si-web-cards__grid, .si-web-cards--3-col .si-web-cards__grid { grid-template-columns: minmax(0, 1fr); }
	.si-web-card { padding: 22px; }
	.si-web-card__media--imagen { aspect-ratio: auto; }
	.si-web-card__imagen { width: min(220px, 100%); height: auto; }
}

/* ==========================================================================
   Interior pages: Getting Here, timeline, icon row, links in light sections
   and the long application form.
   ========================================================================== */

/* ---------- Getting Here ---------- */
.si-web-dir { padding: var(--si-web-seccion, 96px) 0; color: var(--si-ink); }
/* The light background is a tint of the Swedish blue, so the white card with
   the stops stands out from it. */
.si-web-dir--claro { background: #E5ECF8; }
.si-web-dir--gris { background: var(--si-surface); }
.si-web-dir__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.si-web-dir__head { display: flex; flex-direction: column; gap: 20px; }
.si-web-dir__title { position: relative; padding-left: 22px; margin: 0; font-weight: 800; font-size: clamp(2rem, 3.6vw, 44px); line-height: 1.1; color: var(--si-navy); text-wrap: balance; }
.si-web-dir__title::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 7px; background: var(--si-yellow); border-radius: 2px; }
.si-web .si-web-dir__lead { margin: 0; font-size: var(--si-web-texto, 17px); line-height: 1.65; color: var(--si-warm); }
.si-web-dir__card { background: #fff; border: 1px solid var(--si-rule); border-top: 4px solid var(--si-yellow); border-radius: 16px; box-shadow: 0 12px 32px rgba(20,22,59,0.08); padding: 32px; }
.si-web-dir__grupo { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--si-font-display); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--si-blue); }
.si-web-dir__lista + .si-web-dir__grupo { margin-top: 24px; }
.si-web-dir__lista { list-style: none; margin: 0; padding: 0; }
.si-web-dir__parada { display: flex; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--si-rule); }
.si-web-dir__parada:last-child { border-bottom: 0; }
.si-web-dir__lineas { display: flex; gap: 6px; width: 78px; flex: none; }
.si-web-dir__linea { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 36px; font-family: var(--si-font-display); font-weight: 700; font-size: 16px; line-height: 1; }
.si-web-dir__linea--metro { width: 36px; border-radius: 50%; }
.si-web-dir__linea--autobus { padding: 0 10px; border-radius: 6px; font-size: 14px; }
.si-web .si-web-dir__texto { font-size: var(--si-web-texto, 17px); line-height: 1.5; color: var(--si-ink); }
@media (max-width: 860px) {
	.si-web-dir__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
	.si-web-dir { padding: 64px 0; }
}
@media (max-width: 480px) {
	.si-web-dir__card { padding: 24px 20px; }
	.si-web-dir__parada { gap: 16px; }
}

/* ---------- Timeline ---------- */
/* Every milestone stretches to the tallest one and its text grows, so the
   photos line up on one row whatever the length of each text. All the
   milestones are as wide as the last one (TODAY), so every photo is wider than
   tall in the same proportion. */
.si-web-linea {
	--si-web-linea-col: 340px; --si-web-linea-foto: 260px;
	position: relative; overflow: hidden; padding: 64px 0 56px; color: #fff;
	background: radial-gradient(500px 320px at 12% 20%, rgba(255,204,9,0.28), transparent 65%),
		radial-gradient(600px 380px at 88% 24%, rgba(65,182,230,0.28), transparent 65%),
		radial-gradient(650px 400px at 20% 88%, rgba(68,119,187,0.32), transparent 68%),
		radial-gradient(520px 340px at 78% 90%, rgba(255,204,9,0.22), transparent 65%),
		var(--si-navy-deep);
}
.si-web-linea__head { margin-bottom: 32px; }
.si-web-linea__titulo { position: relative; padding-left: 22px; margin: 0; font-weight: 800; font-size: clamp(2rem, 3.6vw, 44px); line-height: 1.1; color: #fff; }
.si-web-linea__titulo::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 7px; background: var(--si-yellow); border-radius: 2px; }
.si-web-linea__carrusel { position: relative; }
.si-web-linea__scroll { overflow-x: auto; overflow-y: hidden; padding: 0 4% 8px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 4%; overscroll-behavior-x: none; }
.si-web-linea__scroll::-webkit-scrollbar { display: none; height: 0; }
.si-web-linea__scroll:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: -3px; }
.si-web-linea__rail { position: relative; width: max-content; }
.si-web-linea__hitos { position: relative; z-index: 1; display: flex; align-items: stretch; column-gap: 48px; list-style: none; margin: 0; padding: 0; }
.si-web-hito { flex: 0 0 var(--si-web-linea-col); display: flex; flex-direction: column; padding: 0 12px; box-sizing: border-box; scroll-snap-align: start; }
/* The row always comes to rest on a milestone and the last one (TODAY) closes
   it against the right edge: it never stops between two, and on iOS it does
   not bounce past TODAY. */
.si-web-hito:last-child { scroll-snap-align: end; }
.si-web-hito__info { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; padding: 0 4px 32px; }
.si-web-hito__icono { width: 80px; height: 80px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; overflow: hidden; background: rgba(255,255,255,0.06); border: 1.5px dashed rgba(255,255,255,0.4); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.si-web-hito__icono img { display: block; width: 72%; height: 72%; object-fit: contain; }
.si-web-hito__anio { font-family: var(--si-font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: .02em; color: var(--si-yellow); background: rgba(255,204,9,0.10); border: 1px solid rgba(255,204,9,0.45); border-radius: 999px; padding: 6px 20px; margin-bottom: 12px; }
.si-web .si-web-hito__texto { margin: 0; font-size: var(--si-web-texto, 17px); line-height: 1.55; color: rgba(255,255,255,0.88); text-wrap: pretty; }
.si-web-hito__texto a { color: var(--si-yellow); text-decoration: underline; }
.si-web-hito__texto a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.si-web-hito__foto { flex: none; height: var(--si-web-linea-foto); margin: 0; border-radius: 10px; overflow: hidden; background: rgba(42,45,92,0.85); border: 2px solid rgba(255,255,255,0.12); box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.si-web-hito__foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.si-web-linea__nav {
	position: absolute; z-index: 3; bottom: calc(var(--si-web-linea-foto) / 2 + 8px - 26px);
	width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.4); color: #fff; cursor: pointer;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.si-web-linea__nav[hidden] { display: none; }
.si-web-linea__nav--prev { left: 16px; }
.si-web-linea__nav--next { right: 16px; }
.si-web-linea__nav:hover:not(:disabled) { background: var(--si-yellow); border-color: var(--si-yellow); color: var(--si-navy-deep); }
.si-web-linea__nav:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 3px; }
.si-web-linea__nav:disabled { opacity: .35; cursor: default; }
@media (max-width: 768px) {
	.si-web-linea { --si-web-linea-col: 316px; --si-web-linea-foto: 220px; padding: 48px 0 40px; }
	.si-web-linea__hitos { column-gap: 24px; }
	.si-web-linea__nav { width: 44px; height: 44px; bottom: calc(var(--si-web-linea-foto) / 2 + 8px - 22px); }
	.si-web-linea__nav--prev { left: 8px; }
	.si-web-linea__nav--next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.si-web-linea__nav { transition: none; }
}

/* ---------- Icon row (SI Web Cards, «Icon row» style) ---------- */
.si-web-card__icono-vacio { display: none; }
.si-web-cards--iconos .si-web-cards__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 24px; }
.si-web-cards--iconos .si-web-card { gap: 16px; align-items: center; text-align: center; padding: 0; background: none; border: 0; }
.si-web-cards--iconos .si-web-card__logos { min-height: 0; justify-content: center; }
.si-web-cards--iconos .si-web-card__logo { width: 96px; height: 96px; max-height: none; object-fit: contain; }
.si-web-cards--iconos .si-web-card:not(:has(.si-web-card__logos, .si-web-card__media)) .si-web-card__icono-vacio {
	display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 22px;
	background: #fff; border: 1px solid var(--si-rule); color: var(--si-blue); box-shadow: 0 6px 16px rgba(20,22,59,0.08);
}
.si-web-cards--iconos .si-web-card__title { margin: 0; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; }
@media (max-width: 1000px) {
	.si-web-cards--iconos .si-web-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.si-web-cards--iconos .si-web-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px; }
	.si-web-cards--iconos .si-web-card { padding: 0; }
	.si-web-cards--iconos .si-web-card__logo,
	.si-web-cards--iconos .si-web-card:not(:has(.si-web-card__logos, .si-web-card__media)) .si-web-card__icono-vacio { width: 72px; height: 72px; }
	.si-web-cards--iconos .si-web-card__title { font-size: 14px; letter-spacing: .02em; }
}

/* ---------- Links in light Image and Text sections ---------- */
/* Links take a link colour of their own instead of the text colour; this blue
   keeps a 5.6:1 contrast on the light gray background. */
.si-web-media--claro .si-web-media__rich a,
.si-web-media--gris .si-web-media__rich a { color: #34639F; }
.si-web-media--claro .si-web-media__rich a:hover,
.si-web-media--gris .si-web-media__rich a:hover { color: var(--si-navy); }

/* ---------- Long application form: options in three columns ---------- */
/* A radio field with the class si-web-columnas-3 (set in the form) lays its
   options out in three columns, two on phones; its label and its messages
   span the row. */
.si-web-panel .si-web-columnas-3 .forminator-field { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; align-items: center; }
.si-web-panel .si-web-columnas-3 .forminator-field > :not(.forminator-radio) { grid-column: 1 / -1; }
/* Forminator spaces stacked options with a top margin; in the grid the gap does it. */
.si-web-panel .si-web-columnas-3 .forminator-field > .forminator-radio { margin: 0 !important; }
@media (max-width: 600px) {
	.si-web-panel .si-web-columnas-3 .forminator-field { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* ==========================================================================
   Global rules of the template: vertical rhythm, form button and type scale.
   They come last so that one place decides these values for every block.
   ========================================================================== */

/* ---------- Vertical rhythm ---------- */
/* Interior pages (everything but the home page, the program pages and the
   blog) use the section rhythm of the landings: 72px per section on desktop
   instead of 96px, 96px around the form instead of 120px and 72px around the
   disclaimers instead of 82px. Below each block's breakpoint its own mobile
   padding still applies. */
body.si-web-interior {
	--si-web-seccion: 72px;
	--si-web-seccion-form: 96px;
	--si-web-seccion-pie: 72px;
}

/* ---------- Forms ---------- */
/* Submit button of every form in the page content: yellow pill, 48px high,
   label in capitals, a third of the width of the fields and centred under
   them. It never gets narrower than its label with its padding (on phones it
   takes what the label needs) and never spans the whole form. */
.si-web-main .forminator-ui .forminator-button-submit {
	display: block !important; width: fit-content !important; min-width: 33% !important; max-width: 100% !important;
	margin-left: auto !important; margin-right: auto !important; padding: 0 20px !important; min-height: 48px !important;
	background: var(--si-yellow) !important; color: var(--si-ink) !important; border-radius: 999px !important;
	font-family: var(--si-font-display) !important; font-weight: 600 !important;
	text-transform: uppercase !important; letter-spacing: .04em !important;
}

/* ---------- Type scale ---------- */
/* Running copy never goes below the body size (--si-web-texto, 17px). Labels,
   eyebrows, pills, buttons, the countdown, the footer and the blog template
   keep their own sizes. Rules with !important answer block rules that carry it. */
body.si-web .si-web-media__rich p, body.si-web .si-web-media__rich li,
body.si-web .si-web-band__text p,
body.si-web .si-web-cards__intro p,
body.si-web .si-web-checks li,
body.si-web .faq-answer, body.si-web .faq-answer p, body.si-web .faq-answer li,
body.si-web .si-web-claro .faq-item:last-child .faq-answer,
body.si-web .si-web-claro .faq-item:last-child .faq-answer p,
body.si-web .si-web-claro .faq-item:last-child .faq-answer li,
body.si-web .quote-text { font-size: var(--si-web-texto); }
body.si-web .si-web-list__item,
body.si-web .si-web-card__text p, body.si-web .si-web-card__text li,
body.si-web .si-web-step__text p, body.si-web .si-web-step__text li,
body.si-web .si-web-media__note p,
body.si-web .si-web-contact__text p,
body.si-web .si-web-ranking__list li,
body.si-web .si-web-innovation__seal p,
body.si-web .si-web-feature__text, body.si-web .si-web-feature__list li,
body.si-web .si-web-lead__form-text { font-size: var(--si-web-texto) !important; }
/* The disclaimers heading stays above its text. */
body.si-web .si-web-contact__box h2 { font-size: 18px; }
/* Form copy: field labels, options and help text. The consent text and its
   checkbox keep the compact size the parent theme gives them in blocks.css. */
body.si-web .forminator-ui .forminator-label,
body.si-web .forminator-ui .forminator-radio-label,
body.si-web .forminator-ui .forminator-checkbox-label,
body.si-web .forminator-ui .forminator-description,
body.si-web .forminator-ui .forminator-field-html p { font-size: var(--si-web-texto) !important; line-height: 1.5 !important; }