/* ============================================================
   WeFly Academia — capa de movimiento y detalle visual
   Complementa las Interactions nativas de Elementor v4.
   Todo lo que anima usa transform/opacity (solo compositor).
   ============================================================ */

/* ---------- CÓMO SE ESCRIBEN LOS SELECTORES DE ESTE ARCHIVO ----------
   Regla única: toda regla que pise algo de Elementor va como

       body .elementor .mi-clase { … }

   y nunca `.elementor .mi-clase` a secas. El motivo no es estético.

   Elementor v4 usa esa misma forma —`.elementor .loquesea`, o sea (0,2,0)—
   para dos cosas: las clases base de sus widgets (`.e-flexbox-base` y
   compañía) y los estilos que se configuran desde el panel. Cuando dos
   reglas empatan en especificidad gana la que se cargó última, y ahí el
   editor y la web pública no coinciden:

     · en la web, wefly.css se imprime después → ganaba esto;
     · en el editor, Elementor reinyecta sus bases y los estilos del panel
       como <style> al vuelo, después de este archivo → ganaba el plugin.

   Consecuencia real, comprobada dentro del iframe del editor: la página se
   veía bien publicada y rota mientras se editaba —cada contenedor volvía a
   `flex-direction: row`, que es el valor de la clase base, y el texto se
   partía en columnas—. `body` delante sube la regla a (0,2,1) y deja de
   depender del orden de carga.

   Contrapartida asumida: en las clases que este archivo define, lo que se
   toque desde el panel de Elementor no se va a ver. La presentación de las
   secciones vive acá; el panel es para textos, imágenes y enlaces. */

/* ---------- 0. LA CAJA DEL SITIO ----------
   Una sola medida de ancho para todas las páginas. El home la define desde
   Elementor con dos contenedores anidados —el de afuera a sangre con 28px de
   aire lateral, el de adentro con max-width 1220px— y todas las secciones lo
   repiten sin excepción, igual que el header y el pie.

   Las páginas que se maquetan desde acá no pueden anidar dos contenedores por
   sección sin duplicar elementos, así que consiguen lo mismo con una sangría
   lateral calculada: el fondo sigue yendo a sangre y el contenido queda en la
   misma columna que el resto del sitio. `max()` reproduce el corte del home
   sin media query: por encima de 1276px reparte el sobrante a los dos lados,
   por debajo deja los 28px fijos.

   Estos dos valores son la fuente de verdad. Si cambia el ancho del sitio,
   cambia acá y nada más — nunca un número suelto dentro de una sección. */
:root {
	--wf-ancho: 1220px;
	--wf-aire: 28px;
}

/* `.s-caja` es la puerta de entrada para lo que venga: una sección nueva se
   suma con esa clase y ya queda en la misma columna que el resto. Las que
   están listadas por nombre son las que se hicieron antes de que existiera. */
body .elementor .s-caja,
body .elementor .s-curso-hero,
body .elementor .s-curso-cuerpo,
body .elementor .s-curso-cta,
body .elementor .s-cursos-hero,
body .elementor .s-cursos-cuerpo,
body .elementor .s-cursos-cta,
body .elementor .s-contacto-hero,
body .elementor .s-contacto-cuerpo,
body .elementor .s-contacto-resenas,
body .elementor .s-contacto-mapa-sec,
body .elementor .s-nosotros-hero,
body .elementor .s-nosotros-cuerpo,
body .elementor .s-nosotros-cta,
body .elementor .s-ext-hero,
body .elementor .s-ext-cuerpo,
body .elementor .s-ext-cta,
body .elementor .s-legal-hero,
body .elementor .s-legal-cuerpo {
	padding-inline: max(var(--wf-aire), calc((100% - var(--wf-ancho)) / 2)) !important;
}

/* ---------- 0. ESCALA TIPOGRÁFICA ----------
   Fuente única de verdad de los tamaños de texto del sitio. Los valores
   reales viven en los estilos de cada clase dentro de Elementor (para que
   sigan siendo editables desde el editor); esto es el espejo del sistema,
   para consultarlo desde CSS y para que nada nuevo se invente un tamaño.

   La guía completa —qué token le toca a cada clase y por qué— está en
   GUIA-TIPOGRAFIA.md, en la raíz del tema hijo.

   Mínimo absoluto: 12px. En mayúsculas con tracking, 13px: por debajo de
   eso el texto espaciado deja de leerse de un vistazo. Antes había 22
   tamaños distintos arrancando en 9px.                                     */

:root {
	--wf-micro: 12px;   /* datos de ficha, pies de foto, etiquetas         */
	--wf-eyebrow: 13px; /* kickers, siglas, numeración, texto de botón     */
	--wf-body-s: 16px;  /* descripciones dentro de tarjetas, links de pie  */
	--wf-body: 17px;    /* bajadas de sección                              */
	--wf-lead: 19px;    /* bajada del hero, de la ventanilla y del CTA     */
	--wf-h4: 21px;      /* títulos de ítem (pasos, razones, salida)        */
	--wf-h3: 26px;      /* títulos de tarjeta (cursos, aeronaves)          */
	--wf-stat: 28px;    /* números de la barra de datos                    */
	--wf-h2: 40px;      /* títulos de sección                              */
	--wf-h2-lg: 44px;   /* ventanilla y CTA final                          */
	--wf-h1: 72px;      /* H1 del hero                                     */
}

@media (max-width: 1024px) {
	:root {
		--wf-body: 17px;
		--wf-lead: 18px;
		--wf-h4: 20px;
		--wf-h3: 23px;
		--wf-stat: 24px;
		--wf-h2: 30px;
		--wf-h2-lg: 33px;
		--wf-h1: 46px;
	}
}

@media (max-width: 767px) {
	:root {
		--wf-body: 16px;
		--wf-lead: 17px;
		--wf-h4: 19px;
		--wf-h3: 21px;
		--wf-stat: 22px;
		--wf-h2: 26px;
		--wf-h2-lg: 28px;
		--wf-h1: 34px;
	}
}

/* ---------- 0. HEADER ----------
   Arranca transparente sobre el hero y se condensa en una barra navy al
   bajar. La clase `wf-header-solid` la pone wefly.js; acá solo se declara
   cómo se ve cada estado.                                                  */

.s-wf-header {
	transition: background-color 0.35s ease,
	            border-color 0.35s ease,
	            padding 0.35s ease,
	            backdrop-filter 0.35s ease;
	border-bottom: 1px solid transparent;
}

/* SANGRÍA PARA LOS SALTOS DE ANCLA.
   El header está FIJO, así que cuando el navegador salta a un `#loquesea` deja
   el destino pegado al borde de arriba de la ventana… que es justo donde está
   el header. El resultado es que la primera franja del bloque al que saltaste
   —el volante y buena parte del H2— queda tapada, y parece que el enlace te
   dejó en el lugar equivocado.

   `scroll-padding-top` en el contenedor de scroll lo resuelve para TODAS las
   anclas del sitio de una vez, sin tener que acordarse de ponerle
   `scroll-margin-top` a cada destino nuevo. Vale igual para los saltos del
   navegador y para cualquier `scrollIntoView()` del JS.

   68px es el header condensado (11px de relleno arriba y abajo), que es el
   estado en el que está siempre que el salto sea hacia abajo. Los 24 de más
   son aire: el destino tiene que quedar debajo del header, no lamiéndolo. */
html {
	scroll-padding-top: 92px;
}

/* Con la sesión abierta el header baja los 32px de la barra de admin, así que
   la sangría tiene que bajar lo mismo. Sólo lo ve quien edita. */
html:has(body.admin-bar) {
	scroll-padding-top: 124px;
}

/* Con sesión iniciada, la barra de admin ocupa los primeros 32px. */
body.admin-bar .s-wf-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .s-wf-header {
		top: 46px;
	}
}

/* Pero por debajo de 600px WordPress pasa la barra a `position: absolute`, o
   sea que deja de estar fija y se va con el scroll. El header, en cambio,
   sigue fijo: si conserva el desplazamiento queda flotando a 46px del borde
   con el contenido pasando por debajo del hueco. Sólo lo ve quien tiene la
   sesión abierta —un visitante no tiene barra— pero es justo lo que se ve
   mientras se revisa el sitio desde el teléfono. */
@media screen and (max-width: 600px) {
	body.admin-bar .s-wf-header {
		top: 0;
	}
}

body.wf-header-solid .s-wf-header {
	background-color: rgba(5, 10, 18, 0.88);
	backdrop-filter: blur(12px);
	border-bottom-color: rgba(255, 255, 255, 0.1);
	padding-block-start: 11px;
	padding-block-end: 11px;
}

/* El logo YA NO se achica al condensarse el header.

   El Manual de Identidad fija para el isologotipo horizontal sin eslógan un
   mínimo digital de 159 x 40 px. La reducción al condensar lo dejaba en
   148 x 37 —por debajo—, así que se saca: la marca no puede bajar del mínimo
   en ningún estado. La transición queda declarada por si algún día se anima
   otra cosa del logo. */
.s-wf-logo-img {
	transition: width 0.35s ease, height 0.35s ease;
}

/* --- menú principal --- */
.s-wf-nav .elementor-nav-menu .menu-item a.elementor-item {
	font-family: var(--HeadingFont, Montserrat), sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #fff;
	padding: 10px 15px;
	fill: #fff;
}

.s-wf-nav .elementor-nav-menu .menu-item a.elementor-item:hover,
.s-wf-nav .elementor-nav-menu .menu-item a.elementor-item.elementor-item-active,
.s-wf-nav .elementor-nav-menu .menu-item a.elementor-item.highlighted {
	color: var(--BrandCyan, #1cb8d4);
	fill: var(--BrandCyan, #1cb8d4);
}

/* Subrayado del pointer en turquesa. */
.s-wf-nav .e--pointer-underline .elementor-item:before,
.s-wf-nav .e--pointer-underline .elementor-item:after {
	background-color: var(--BrandCyan, #1cb8d4);
	height: 2px;
}

/* Submenú de Cursos. */
.s-wf-nav .elementor-nav-menu--dropdown,
.s-wf-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown {
	background-color: var(--NavySurface, #0b1522);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}

.s-wf-nav .elementor-nav-menu--dropdown a.elementor-sub-item,
.s-wf-nav .elementor-nav-menu--dropdown a.elementor-item {
	font-family: var(--BodyFont, Inter), sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--TextBody, #cbd5e1);
	padding: 13px 20px;
}

.s-wf-nav .elementor-nav-menu--dropdown a:hover {
	background-color: rgba(28, 184, 212, 0.12);
	color: #fff;
}

/* Hamburguesa en mobile. */
.s-wf-nav .elementor-menu-toggle {
	color: #fff;
	background: transparent;
}

/* La primera sección de cada página arranca debajo del header salvo en la
   Home, donde el hero es a sangre y el header va encima a propósito. */
body:not(.home) .elementor > .e-con:first-child {
	padding-block-start: 132px;
}

/* ---------- 0b. FOOTER ---------- */

.s-wf-f-cursos-l a,
.s-wf-f-escuela-l a,
.s-wf-f-contacto-l a,
.s-wf-f-legal a {
	transition: color 0.25s ease;
}

.s-wf-f-cursos-l a:hover,
.s-wf-f-escuela-l a:hover,
.s-wf-f-contacto-l a:hover,
.s-wf-f-legal a:hover {
	color: var(--BrandCyan, #1cb8d4);
}

/* Los dos rótulos que acompañan a un logo son la MISMA pieza y se escriben
   juntos, no cada uno por su lado.

   Venían distintos en todo: "miembro verificado" en la mono a 13px, versalitas
   y con separación de letras, y "diseño web por" en la tipografía de texto a
   16px y en caja baja. Uno al lado del otro, en la misma fila y con el mismo
   papel —presentar un logo—, esa diferencia no se lee como jerarquía sino como
   un descuido.

   Se unifican en el rótulo de la mono, que es la convención del sitio para
   todos los volantes (`s-win-kick`, `s-cursos-kick` y compañía) y lo que los
   separa del resto del texto del pie, que también es la de texto a 16px. Si
   preferís el camino contrario —los dos en caja baja— es esta misma regla con
   `--BodyFont`, 16px y sin `text-transform`.

   Van con la clase del padre delante porque los valores originales los pone
   Elementor desde la hoja de la plantilla del pie (la 71) con especificidad
   (0,2,0): con la del padre esto queda en (0,3,0) y no depende del orden en
   que carguen las hojas. */
body .elementor .s-wf-f-red .s-wf-f-red-t,
body .elementor .s-wf-f-credito .s-wf-f-credito-t {
	font-family: var(--MonoFont);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1.5em;
	text-transform: uppercase;
}

.s-wf-f-red-img,
.s-wf-f-credito-img {
	opacity: 0.6;
	transition: opacity 0.25s ease;
}

.s-wf-f-red-img:hover,
.s-wf-f-credito-img:hover {
	opacity: 1;
}

/* ---------- 1. HERO: parallax + salida al hacer scroll ---------- */

.s-hero {
	isolation: isolate;
	/* El hero mide 100vh (lo declara Elementor). El sobrante de alto iba
	   entero ARRIBA del copy porque la sección empujaba todo su contenido al
	   pie: 751px de cielo vacío en un monitor de 1440. Repartido: el copy
	   arranca debajo del header y la barra de datos queda clavada abajo. */
	justify-content: space-between !important;
	/* El fondo se acerca levemente mientras baja el scroll.
	   El orden de capas es: scrim lateral, velo vertical, foto. */
	background-size:
		auto auto,
		auto auto,
		calc(100% + var(--wf-hero, 0) * 9%) auto;
	background-position:
		0% 0%,
		0% 0%,
		center calc(50% + var(--wf-hero, 0) * 5%);
}

.s-hero > * {
	position: relative;
	z-index: 2;
}

/* El copy va centrado verticalmente en el espacio que queda entre el header y
   la barra de datos. Para eso el bloque tiene que ESTIRARSE y quedarse con
   todo el alto sobrante (flex-grow); si no, mide lo que mide su contenido y
   centrarlo no cambia nada.

   Sólo de 768px para arriba: en móvil el copy no va centrado sino empujado
   por un padding en vw que lo alinea con el horizonte de la foto. */
@media (min-width: 768px) {
	body .elementor .s-hero-body {
		flex: 1 1 auto !important;
		align-items: center !important;
	}
}

/* En tablet la sangría superior es de 86px y el header mide 79: con el copy
   arriba el kicker quedaba pegado al menú. Se iguala a la de escritorio. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor .s-hero-body {
		padding-block-start: 140px !important;
	}
}

/* El copy del hero se aleja y se desvanece al bajar. */
.s-hero-copy {
	will-change: transform, opacity;
	transform: translate3d(0, calc(var(--wf-hero, 0) * -70px), 0);
	opacity: calc(1 - var(--wf-hero, 0) * 1.35);
}

/* La barra de datos sube menos: da profundidad. */
.s-hero-statsbar {
	will-change: transform;
	transform: translate3d(0, calc(var(--wf-hero, 0) * -22px), 0);
}

/* Indicador de scroll al pie del hero. */
.s-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 118px;
	z-index: 3;
	width: 1px;
	height: 46px;
	margin-left: -0.5px;
	background: linear-gradient(180deg, transparent, var(--BrandCyan, #1cb8d4));
	transform-origin: top;
	animation: wf-scroll-hint 2.2s ease-in-out infinite;
	opacity: calc(1 - var(--wf-hero, 0) * 2.5);
	pointer-events: none;
}

@keyframes wf-scroll-hint {
	0%   { transform: scaleY(0); opacity: 0; }
	40%  { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- 1b. VENTANILLA ----------
   Se arranca mirando por la ventanilla y al bajar la cámara la atraviesa,
   hasta que el paisaje de Rosario ocupa toda la pantalla. --wf-win va de 0
   (dentro del avión) a 1 (paisaje a sangre) y lo escribe wefly.js. Todo se
   resuelve con transform y opacity: sólo compositor.

   Hay dos modos, y el JS elige según haya foto de cabina o no:

   A) CON FOTO (.wf-con-cabina) — el bueno. El PNG del interior del avión va
      arriba de todo con el hueco de la ventanilla transparente, y el paisaje
      va entero abajo. Al bajar, el PNG escala desde el centro del hueco
      hasta salirse de la pantalla: la máscara se abre físicamente y el
      paisaje se revela POR la ventana, no por un fundido.

   B) SIN FOTO — respaldo. No hay máscara que escalar, así que se recorta la
      propia foto con clip-path a forma de ventanilla y el marco se dibuja
      con un box-shadow. Es el que se ve hoy, hasta que suba el PNG.        */

.s-ventanilla {
	/* Proporción de ventanilla real: más alta que ancha, esquinas muy
	   redondeadas pero sin llegar a la elipse. Sólo aplica al modo B. */
	--win-w: min(330px, 70vw);
	--win-h: min(520px, 62vh);
	--win-r: 108px;

	/* --- calibración del modo A ---
	   Medido sobre ventana-avion2.png (2645x1532): el hueco es de 486x640 px
	   arrancando en (1119,444), o sea 18,4% del ancho y 41,8% del alto, con
	   el centro casi en el medio de la imagen. --cab-zoom sale de ahí: para
	   que un hueco de 18,4% del ancho tape la pantalla hace falta 1/0,184 =
	   5,4x, más un margen para que no se vea el borde. Si el zoom se fuera
	   para un costado se corrige acá y en ningún otro lado. */
	--cab-x: 51.5%;
	--cab-y: 49.9%;
	--cab-zoom: 6;

	/* --- parallax de puntero ---
	   `--win-mx` / `--win-my` los escribe wefly.js sobre `.s-win-day` con la
	   posición del puntero respecto del centro de la pantalla, de -1 a 1. Acá
	   sólo viven el valor de reposo (para el caso sin JS) y la amplitud.

	   La amplitud es NEGATIVA a propósito: el marco de la ventanilla queda
	   clavado y el paisaje se corre para el lado contrario del puntero. Eso es
	   lo que se lee como profundidad —lo de afuera está lejos, se mueve solo—
	   y es el sentido que se pidió. Para invertirlo alcanza con borrar el
	   `-1 *` de estas dos líneas; no hay que tocar nada más.

	   El tope va en vw/vh y no en px fijos porque el paisaje sólo tiene 3% de
	   sobra a cada lado (el `scale` de abajo). En un monitor 22px entran de
	   sobra; en una ventana angosta, no, y se vería el borde de la foto.

	   1.2vw y no 2vw: al máximo desplazamiento hay que sumarle la deriva, que
	   estira un 22% más. Con 2vw medido quedaban 7px de sobra a 1024 y 2px a
	   430 — anda, pero cualquier recorte distinto de la foto lo destapa. Con
	   1.2vw el uso queda en 1.46vw contra 3vw disponibles: margen del doble. */

	/* Vertical más corta que horizontal: la vista por una ventanilla se corre
	   sobre todo de costado, y de arriba a abajo el movimiento grande delata
	   que es una foto plana. Acá el margen sobra (la caja mide una pantalla
	   de alto, así que el 3% son 27px contra 15 de uso). */
	--win-mx: 0;
	--win-my: 0;
	--win-par-x: calc(-1 * min(22px, 1.2vw));
	--win-par-y: calc(-1 * min(13px, 1.4vh));
}

/* En pantallas bajas la ventanilla tiene que achicarse, si no el texto de
   abajo se le monta encima. */
@media (max-height: 780px) {
	.s-ventanilla { --win-h: 56vh; }
}

/* El prefijo .elementor es necesario: Elementor genera sus reglas de widget
   como `.elementor .s-x`, y sin él estas pierden por especificidad. */
body .elementor .s-win-day {
	will-change: clip-path, transform;
	/* En 0 el recorte vale el 100%: se ve sólo el hueco de la ventanilla.
	   En 1 vale 0: la foto ocupa todo. */
	clip-path: inset(
		calc((1 - var(--wf-win, 0)) * (50% - var(--win-h) / 2))
		calc((1 - var(--wf-win, 0)) * (50% - var(--win-w) / 2))
		calc((1 - var(--wf-win, 0)) * (50% - var(--win-h) / 2))
		calc((1 - var(--wf-win, 0)) * (50% - var(--win-w) / 2))
		round calc((1 - var(--wf-win, 0)) * var(--win-r))
	);
	/* Avanzamos hacia la ventana: el paisaje se acerca al abrirse. El
	   desplazamiento va ANTES del scale para que valga siempre los mismos
	   píxeles: puesto después lo multiplicaría el zoom y el parallax se
	   volvería más y más violento a medida que se atraviesa la ventana. */
	transform:
		translate3d(
			calc(var(--win-mx, 0) * var(--win-par-x, 0px)),
			calc(var(--win-my, 0) * var(--win-par-y, 0px)),
			0
		)
		scale(calc(1 + var(--wf-win, 0) * 0.12));
}

/* Hubo un cruce día->noche con una segunda foto encima. Se sacó: encimadas
   se leían los dos logos quemados como marca de agua y las dos alas. Ahora
   la ventanilla muestra una sola foto de día y la capa .s-win-night ya no
   existe en el árbol de Elementor. */

/* --- MODO A: PNG DEL INTERIOR DEL AVIÓN ---
   El hueco de la ventanilla es alfa transparente, así que lo que se ve por
   ahí es la foto aérea que va abajo. El zoom nace en el centro del hueco
   (transform-origin), no en el centro de la caja: si naciera en el centro el
   hueco se iría en diagonal en vez de abrirse de frente.

   La opacidad se mantiene en 1 casi todo el recorrido a propósito. Si se
   desvaneciera antes, el paisaje aparecería por transparencia en TODA la
   pantalla y se perdería la sensación de estar mirando por la ventana: el
   reveal tiene que venir del hueco. El fade final sólo limpia el borde del
   PNG cuando ya está casi todo fuera de cuadro.

   El encuadre (cover / center / no-repeat) lo declara el propio elemento en
   Elementor, para que siga siendo editable desde el panel y para no pelear
   por especificidad con las reglas que genera Elementor.

   El zoom NO es lineal: va con el cuadrado del progreso. Arranca casi quieto
   y acelera sobre el final, que es lo que da la sensación de entrar en la
   ventana en vez de que la imagen simplemente se agrande. calc() permite
   multiplicar dos números sin unidad, así que el easing sale sin JS.        */
body .elementor .s-win-cabina {
	will-change: transform, opacity;
	transform-origin: var(--cab-x) var(--cab-y);
	transform: scale(
		calc(1 + var(--wf-win, 0) * var(--wf-win, 0) * (var(--cab-zoom) - 1))
	);
	opacity: clamp(0, calc((1 - var(--wf-win, 0)) / 0.12), 1);
	pointer-events: none;
}

/* Con PNG no hay nada que recortar ni marco que dibujar: la foto va entera
   debajo y la máscara es la que se mueve. */
.wf-con-cabina .elementor .s-win-day {
	clip-path: none;
	/* Un acercamiento leve del paisaje mientras se atraviesa la ventana:
	   acompaña el movimiento sin competir con el zoom del PNG. Ese 1.06 es
	   además el que le da sobra al parallax de puntero para correrse sin
	   destapar el borde de la foto. */
	transform:
		translate3d(
			calc(var(--win-mx, 0) * var(--win-par-x, 0px)),
			calc(var(--win-my, 0) * var(--win-par-y, 0px)),
			0
		)
		scale(calc(1.06 + var(--wf-win, 0) * 0.06));
}

.wf-con-cabina .s-win-marco { display: none; }

/* --- VIDEO DENTRO DE LA VENTANILLA (prueba) ---
   Va dentro de .s-win-day y la tapa entera. No lleva transform propio a
   propósito: el clip-path, el zoom y todo lo demás ya se los aplica el padre,
   así que el video se comporta igual que la foto sin duplicar ni una regla.

   `object-fit: cover` hace acá el trabajo que hacía `background-size: cover`.
   El video de prueba es 1920x800 (2.4:1) contra una caja de 1.6:1, así que
   recorta bastante de los costados: si la idea prospera, el metraje final
   conviene encuadrarlo sabiendo que se ve la franja del medio. */
.s-win-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El video se pinta encima del fondo de la capa, que queda de respaldo
	   mientras carga y si el navegador no lo reproduce. */
	pointer-events: none;
}

/* Elementor le pone `transition: transform 0.4s` a todo contenedor atómico
   (.e-con). Sirve para un hover, pero acá el transform se reescribe en CADA
   frame —scroll y puntero—, así que la transición se reinicia antes de haber
   arrancado; y como la curva por defecto empieza lenta, nunca sale de esa
   parte. El resultado no es suavidad, es un amortiguado que no converge:
   medido, con el scroll quieto el zoom se quedaba en scale 1.0583 con el
   objetivo en 1.06, y el parallax tardaba 1,3s en hacer el 90% del recorrido.

   La inercia la pone el JS, que sí se puede calibrar y no depende de dónde
   caiga el frame. Estas dos capas no tienen hover, así que no se pierde nada
   más al apagarla. */
body .elementor .s-win-day,
body .elementor .s-win-cabina {
	transition: none;
}

/* --- MARCO DIBUJADO ---
   Respaldo mientras no exista la foto del interior del Cessna.

   No se puede hacer con clip-path polygon: un polígono no tiene esquinas
   redondeadas y quedaba un hueco rectangular desalineado del recorte, que sí
   es redondeado. Se resuelve con un box-shadow de spread enorme: pinta de
   negro cabina TODO lo que queda fuera de un rectángulo redondeado, y ese
   rectángulo usa exactamente la misma fórmula que el clip-path de la foto.

   Al llegar a --wf-win: 1 los insets valen 0, así que la sombra queda
   empujada fuera del viewport y desaparece sola: no hace falta animar la
   opacidad ni sincronizar dos tiempos distintos.                          */
body .elementor .s-win-marco {
	pointer-events: none;
}

.s-win-marco::after {
	content: "";
	position: absolute;
	top: calc((1 - var(--wf-win, 0)) * (50% - var(--win-h) / 2));
	bottom: calc((1 - var(--wf-win, 0)) * (50% - var(--win-h) / 2));
	left: calc((1 - var(--wf-win, 0)) * (50% - var(--win-w) / 2));
	right: calc((1 - var(--wf-win, 0)) * (50% - var(--win-w) / 2));
	border-radius: calc((1 - var(--wf-win, 0)) * var(--win-r));
	box-shadow:
		0 0 0 13px var(--PageBg, #0a0f16),             /* junta interior de la ventanilla */
		/* Cubre el resto de la cabina. Acotado a 100vmax a propósito: con un
		   spread enorme (9999px) el área de pintado se dispara, el compositor
		   se pasa de límite y deja de pintar todo lo que sigue en la página. */
		0 0 0 100vmax #05080D,
		inset 0 0 0 1px rgba(255, 255, 255, 0.14),
		inset 0 18px 50px -18px rgba(0, 0, 0, 0.8);
}

/* El copy va por encima del PNG de cabina (que está en z-index 3): si no,
   la máscara lo taparía durante todo el zoom. El contenedor no se anima,
   se animan las tres líneas por separado. */
body .elementor .s-win-copy {
	position: relative;
	z-index: 6;
}

/* Las tres líneas entran escalonadas, cada una en su tramo del scroll, no
   las tres juntas: primero el volante, después el título, después la bajada.
   Es lo que hace que el texto se sienta parte del viaje y no un cartel que
   aparece cuando termina la animación. */
body .elementor .s-win-kick,
body .elementor .s-win-h,
body .elementor .s-win-p {
	will-change: opacity, transform;

	/* Progreso propio de esta línea: 0 antes de su turno, 1 cuando terminó
	   de entrar. Se calcula una vez y se reusa en opacidad y transform. */
	--p: clamp(0, calc((var(--wf-win, 0) - var(--t0)) / 0.18), 1);

	opacity: var(--p);

	/* Dos zooms encadenados, que hacen cosas distintas:
	   - el primero es la entrada: la línea nace chica y llega a tamaño real
	     mientras aparece, así entra "hacia" el lector en vez de solo subir;
	   - el segundo es continuo con el scroll y no depende del turno de cada
	     línea: hace que el texto siga creciendo junto con la ventana, para
	     que se lea como parte del mismo movimiento y no como una capa
	     pegada encima que se quedó quieta.

	   El segundo va de 0,92 a 1 y no de 1 a 1,08. Es el mismo 8% de recorrido,
	   pero termina en el tamaño REAL: antes el estado final quedaba 8% más
	   grande que lo declarado, así que 40px se veían como 43,2 y el bloque
	   nunca podía empatarle en tamaño al resto de la página por más que los
	   números coincidieran. El crecimiento se siente igual; lo que cambia es
	   dónde aterriza. */
	transform:
		translate3d(0, calc((1 - var(--p)) * 30px), 0)
		scale(calc(0.84 + var(--p) * 0.16))
		scale(calc(0.92 + var(--wf-win, 0) * 0.08));
}

body .elementor .s-win-kick { --t0: 0.34; }
body .elementor .s-win-h    { --t0: 0.46; }
body .elementor .s-win-p    { --t0: 0.58; }

/* Las nubes de la ventanilla se sacaron a propósito: los gradientes se leían
   como manchas pegadas sobre la foto, no como nubes. Van a volver cuando
   estén las imágenes reales (2400x900, apaisadas, con alfa o compuestas con
   mix-blend-mode: screen sobre `.s-win-day`). */

/* Las capas de adentro escalan y se salen de la caja a propósito (el paisaje
   un poco, el PNG de cabina muchísimo). Se recortan acá y no se delega en el
   `overflow-x: clip` de html: si un día se saca esa red de seguridad, esto
   no tiene que empezar a desbordar. El sticky no se ve afectado — `overflow`
   sólo rompería el sticky de sus descendientes, y acá no hay ninguno. */
body .elementor .s-win-sticky {
	overflow: hidden;
}

/* Velo bajo el texto para que se lea sobre cualquier parte de la foto.
   Tiene que estar puesto ANTES de que entre la primera línea de copy (que
   entra en 0.34): el paisaje de día es claro y el texto es blanco, así que
   sin velo la bajada queda ilegible justo mientras aparece. */
.s-win-sticky::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 58%;
	z-index: 5;
	background: linear-gradient(180deg, rgba(5, 10, 18, 0) 0%, rgba(5, 10, 18, 0.82) 55%, var(--Navy, #050a12) 88%);
	opacity: clamp(0, calc((var(--wf-win, 0) - 0.18) / 0.14), 1);
	pointer-events: none;
}

/* Sin JS o con motion reducido: se muestra el paisaje abierto y listo.
   Y la sección se colapsa a una pantalla: si no, quedan dos pantallas de
   negro vacío que sólo tenían sentido para darle recorrido a la animación. */
@media (prefers-reduced-motion: reduce) {
	body .elementor .s-win-day {
		clip-path: none;
		transform: none;
	}
	body .elementor .s-win-marco,
	body .elementor .s-win-cabina { display: none; }
	body .elementor .s-win-copy { opacity: 1; transform: none; }
	.s-win-sticky::before { opacity: 1; }
	.s-ventanilla { height: auto !important; }
	body .elementor .s-win-sticky { position: static !important; height: 88vh !important; }
}

/* ---------- 2. Revelado del H1 por máscara ---------- */

.wf-mask {
	display: block;
	overflow: hidden;
	/* El H1 tiene line-height < 1: sin este aire, overflow:hidden le come
	   los ascendentes y descendentes. El margen negativo lo compensa para
	   que la caja siga midiendo lo mismo. */
	padding-block: 0.12em;
	margin-block: -0.12em;
}

.wf-mask > span {
	display: block;
	transform: translate3d(0, 105%, 0);
	animation: wf-mask-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.wf-mask + .wf-mask > span { animation-delay: 0.09s; }

@keyframes wf-mask-up {
	to { transform: translate3d(0, 0, 0); }
}

/* La flota dejó de ser una tira horizontal con pin: ahora son fichas
   apiladas (.s-av-c150 / .s-av-pa38 / .s-av-sim), que dan lugar a las specs
   de cada aeronave. Las reglas del track viejo se eliminaron junto con su
   código en wefly.js. */

/* ---------- 3b. PROCESO: el plan de vuelo ----------
   La metáfora es una carta de navegación: la ruta completa va punteada, como
   la derrota prevista, y el tramo ya volado se pinta sólido con la aeronave
   en la punta. Cada paso es un waypoint que se captura cuando el avión pasa.

   La ruta va en --plan-x, que es el centro REAL del círculo de cada paso
   (46px de marcador + los 10px de sangría de la columna). Antes estaba
   clavada en 22px y quedaba corrida 11px a la izquierda de los círculos. */

/* --plan-y0 y --plan-len los escribe wefly.js: son el centro del primer
   círculo y la distancia hasta el último. Así la ruta empieza y termina
   clavada en un waypoint y la aeronave nunca queda entre dos. */
.s-proceso-r {
	/* Centro del círculo = padding izquierdo del bloque (0) + la mitad del
	   marcador (46px). Antes eran 33 porque el bloque arrastraba los 10px de
	   padding por defecto de Elementor; al normalizar el eje horizontal el
	   círculo se corrió a 23 y la ruta quedó 10px a la derecha. */
	--plan-x: 23px;
	--plan-y0: 23px;
	--plan-len: calc(100% - 86px);
	/* Mismo color que el fondo de la sección: es lo que rellena los círculos
	   para que la ruta pase POR DETRÁS y no les cruce el número por el
	   medio. Si cambia el fondo de .s-proceso, cambiar acá también. */
	--plan-bg: var(--NavySurface, #0b1522);
}

/* La ruta —prevista y volada— va en una sola capa, por DEBAJO de los pasos.
   Antes el trazo y el avión compartían el ::after y ese pseudo se pinta como
   último hijo: como cada paso arma su propio contexto de apilado (tiene
   opacidad), el z-index del círculo no competía contra él y la línea cruzaba
   los números por delante.

   Tramo volado: es un segundo background cuya ALTURA sale de --wf-plan. Así
   crece sin scaleY, que deformaría cualquier cosa dibujada dentro. */
.s-proceso-r::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: var(--plan-y0);
	height: var(--plan-len);
	left: calc(var(--plan-x) - 0.5px);
	width: 1px;
	pointer-events: none;
	background-repeat: no-repeat, repeat-y;
	background-position: center top, center top;
	background-size: 1px calc(var(--plan-len) * var(--wf-plan, 0)), 1px 12px;
	background-image:
		linear-gradient(180deg, rgba(28, 184, 212, 0.25), var(--BrandCyan, #1cb8d4)),
		repeating-linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.22) 0 6px,
			rgba(255, 255, 255, 0) 6px 12px
		);
	will-change: background-size;
}

/* La aeronave, en capa propia y por ENCIMA de los círculos: es el elemento
   que marca dónde está el lector, tiene que verse siempre.

   Es el `plane` de Lucide girado 135° para que la nariz apunte hacia abajo:
   el icono original vuela hacia arriba a la derecha y la ruta baja. */
.s-proceso-r::after {
	content: "";
	position: absolute;
	z-index: 3;
	left: calc(var(--plan-x) - 13px);
	/* Los 30px la adelantan respecto de la punta del trazo. Centrada justo en
	   la punta caía sobre el círculo del waypoint y le tapaba el número; con
	   el radio del círculo en 23 y la mitad del icono en 13, 30 alcanza para
	   despejar el número y deja la aeronave apenas rozando el borde.
	   De paso queda más fiel: la estela va detrás y el avión adelante. */
	top: calc(var(--plan-y0) + var(--plan-len) * var(--wf-plan, 0) - 13px + 30px);
	width: 26px;
	height: 26px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 27 27' fill='%231cb8d4' stroke='%231cb8d4' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath transform='rotate(135 12 12)' d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E");
	filter: drop-shadow(0 0 10px rgba(28, 184, 212, 0.55));
	will-change: top;
}

/* Los pasos, entre la ruta y la aeronave: tapan la línea, no al avión. */
.s-proceso-r > * {
	position: relative;
	z-index: 2;
}

/* Waypoints. El estado apagado sólo se aplica si el JS está vivo: si falla,
   los pasos quedan legibles al 100% en vez de atenuados para siempre. */
.s-proceso-r [class*="s-paso-"][class*="-marker"] {
	position: relative;
	z-index: 2;
	/* Relleno opaco, no translúcido: con alfa se veía la ruta cruzando el
	   número y no se leía. El tinte cian del estado encendido va como capa
	   aparte, encima de este color. */
	background-color: var(--plan-bg);
	transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

/* El atenuado NO puede ir en el paso entero: `opacity` compone todo el
   subárbol, así que el relleno opaco del círculo caía a 0.34 y la ruta se
   volvía a ver cruzando el número. Se atenúa el contenido —el número y el
   bloque de texto— y el marcador conserva su fondo al 100%. */
.wf-plan-js .s-proceso-r > * {
	transform: translate3d(0, 10px, 0);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wf-plan-js .s-proceso-r > .is-on {
	transform: none;
}

.wf-plan-js .s-proceso-r > * > [class*="-body"],
.wf-plan-js .s-proceso-r > * [class*="-marker"] > * {
	opacity: 0.34;
	transition: opacity 0.5s ease;
}

.wf-plan-js .s-proceso-r > .is-on > [class*="-body"],
.wf-plan-js .s-proceso-r > .is-on [class*="-marker"] > * {
	opacity: 1;
}

/* El borde del círculo apagado se baja a mano: antes lo atenuaba la opacidad
   del paso (0.45 × 0.34 ≈ 0.15). */
.wf-plan-js .s-proceso-r > *:not(.is-on) [class*="-marker"] {
	border-color: rgba(28, 184, 212, 0.15);
}

/* Waypoint capturado: el anillo se enciende y suelta un pulso, una sola vez. */
.s-proceso-r > .is-on [class*="-marker"] {
	border-color: var(--BrandCyan, #1cb8d4);
	background-image: linear-gradient(
		rgba(28, 184, 212, 0.14),
		rgba(28, 184, 212, 0.14)
	);
	animation: wf-waypoint 0.85s ease-out 1;
}

@keyframes wf-waypoint {
	0%   { box-shadow: 0 0 0 0 rgba(28, 184, 212, 0.55); }
	100% { box-shadow: 0 0 0 16px rgba(28, 184, 212, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.wf-plan-js .s-proceso-r > * { transform: none; }
	.wf-plan-js .s-proceso-r > * > [class*="-body"],
	.wf-plan-js .s-proceso-r > * [class*="-marker"] > * { opacity: 1; }
	.s-proceso-r > .is-on [class*="-marker"] { animation: none; }
}

/* Los ítems del desplegable de Cursos los dibuja el widget de menú, no una
   clase atómica, así que quedaban fuera de la escala en 15px. Se alinean a
   `body-s` (16px) desde acá. */
body .elementor .s-wf-header .elementor-nav-menu--dropdown a,
body .elementor .s-wf-header .sub-menu a {
	font-size: 16px;
}

/* El pie es una columna, así que `justify-content` le trabaja en vertical y
   no lo centra. El margen automático sí, pero el control de dimensiones de
   Elementor sólo acepta medidas y descarta `auto`: va desde acá. */
body .elementor .s-wf-footer-body,
body .elementor .s-wf-footer-bar-in {
	margin-inline: auto;
}

/* ---------- 3a-ter. TARJETAS DE CURSO: FILAS ALINEADAS ----------
   Las tres tarjetas medían igual de alto, pero por dentro cada bloque
   arrancaba donde terminaba el anterior: una descripción de 3 líneas en vez
   de 4 corría la ficha de datos y el enlace 27px hacia arriba, y se leía
   como desprolijo.

   Se resuelve con `subgrid`: la tarjeta adopta las filas del contenedor, así
   que encabezado, título, descripción, datos y CTA se alinean entre tarjetas
   solos, sin alturas mínimas inventadas que se rompen en cuanto cambia un
   texto. Requiere que las cinco piezas sean hijas directas de la tarjeta. */
body .elementor .s-cursos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
}

body .elementor .s-cursos-grid > * {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
}

@media (max-width: 1024px) {
	body .elementor .s-cursos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	body .elementor .s-cursos-grid { grid-template-columns: 1fr; }
}

/* ---------- 3a-bis. FICHAS DE DATOS ----------
   Los pares etiqueta/valor de las tarjetas de curso y de las aeronaves.
   Sin esto la etiqueta se partía en dos líneas ("HORAS DE / VUELO") en unas
   tarjetas y en una sola en otras, según lo largo que fuera el valor: cada
   ficha quedaba con una altura distinta y la grilla se veía desprolija.

   La etiqueta nunca se parte; si algo tiene que ceder, cede el valor, que es
   el que puede quedar en dos líneas sin romper la lectura.

   OJO CON EL SELECTOR: iba con `[class$="-k"]` y no aplicaba a NADA. Los
   widgets atómicos de Elementor agregan su propia clase al final, así que el
   atributo real es `s-curso-ppa-d1-k e-paragraph-base` y termina en "base",
   no en "-k". Un `$=` mira el atributo entero, no cada clase por separado.
   Con `*=` sí pesca, y se comprobó que pesca los 12 pares exactos y ni un
   elemento de más: dentro de estas grillas ninguna otra clase lleva "-k" o
   "-v". Misma trampa en cualquier regla futura que quiera atar un sufijo. */
.s-cursos-grid [class*="-d"][class*="-k"],
.s-flota [class*="-s"][class*="-k"] {
	white-space: nowrap;
	flex: 0 0 auto;
}

.s-cursos-grid [class*="-d"][class*="-v"],
.s-flota [class*="-s"][class*="-v"] {
	text-align: end;
	text-wrap: balance;
}

/* ---------- 3b-bis. GALERÍA ---------- */

.s-sede-grid > * {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.5s ease;
}

.s-sede-grid > *:hover {
	border-color: rgba(28, 184, 212, 0.5);
}

.s-sede-grid img {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-sede-grid > *:hover img {
	transform: scale(1.05);
}

.s-sede-grid > *:focus-visible {
	outline: 2px solid var(--BrandCyan, #1cb8d4);
	outline-offset: 2px;
}

/* Lightbox */
.wf-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 32px;
	background: rgba(5, 10, 18, 0.94);
	backdrop-filter: blur(6px);
}

.wf-lb.is-open {
	display: flex;
}

.wf-lb-fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	max-width: min(1100px, 100%);
	max-height: 100%;
}

.wf-lb-fig img {
	max-width: 100%;
	max-height: calc(100vh - 140px);
	object-fit: contain;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.wf-lb-fig figcaption {
	font-family: var(--MonoFont, "JetBrains Mono"), monospace;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #b6c4d3;
	text-align: center;
}

.wf-lb button {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.wf-lb button:hover {
	background: rgba(28, 184, 212, 0.18);
	border-color: rgba(28, 184, 212, 0.55);
}

.wf-lb-x {
	position: absolute;
	top: 24px;
	right: 24px;
}

@media (max-width: 720px) {
	.wf-lb-prev,
	.wf-lb-next {
		position: absolute;
		bottom: 24px;
	}
	.wf-lb-prev { left: 24px; }
	.wf-lb-next { right: 24px; }
}

/* ---------- 3c. RESEÑAS ---------- */

.wf-rv-verdict {
	display: flex;
	align-items: center;
	gap: 18px;
}

.wf-rv-score {
	font-family: var(--HeadingFont, Montserrat), sans-serif;
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -2px;
	color: #fff;
}

.wf-rv-meta {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.wf-rv-count {
	font-family: var(--MonoFont, "JetBrains Mono"), monospace;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #9fb0c2;
}

.wf-rv-stars {
	display: inline-flex;
	gap: 3px;
}

.wf-rv-star {
	width: 15px;
	height: 15px;
	fill: rgba(255, 255, 255, 0.16);
}

.wf-rv-star.is-on {
	fill: #f5b544;
}

.wf-rv-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

/* Google devuelve como mucho CINCO reseñas por lugar y no hay forma de pedir
   más, así que en la home la grilla de dos columnas queda con una huérfana en
   la última fila, a media caja. Cuando el total es impar, la última ocupa el
   ancho entero y la fila cierra. En una sola columna la regla no hace nada.

   Va atada a `.s-res-der`, que es la columna de la home, y no suelta: `odd` es
   una cuenta de HIJOS, no de columnas, así que en la grilla de tres de las
   páginas de curso la tercera tarjeta también es impar y se estiraba a lo
   ancho ella sola. CSS no sabe cuántas columnas resolvió el `auto-fill`. */
.s-res-der .wf-rv-list > .wf-rv-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.wf-rv-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 24px 26px;
	background: var(--NavySurface, #0b1522);
	border: 1px solid rgba(255, 255, 255, 0.09);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.45s ease;
}

.wf-rv-card:hover {
	transform: translate3d(0, -4px, 0);
	border-color: rgba(28, 184, 212, 0.4);
}

.wf-rv-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wf-rv-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: rgba(28, 184, 212, 0.14);
	border: 1px solid rgba(28, 184, 212, 0.3);
	font-family: var(--HeadingFont, Montserrat), sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--BrandCyan, #1cb8d4);
}

.wf-rv-who {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.wf-rv-who strong {
	font-family: var(--HeadingFont, Montserrat), sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.wf-rv-date {
	font-family: var(--MonoFont, "JetBrains Mono"), monospace;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	/* Era #64748b, que sobre el fondo de la tarjeta daba 3,86:1. A 12px cuenta
	   como texto normal, así que el mínimo son 4,5:1 y no llegaba.

	   El escalón siguiente de la escala del sitio (#94a3b8, el gris del pie) sí
	   llega, pero de sobra: 7,2:1 lo pone casi a la altura del texto de la
	   reseña (9,2) y la fecha le empieza a pelear la atención al comentario,
	   que es lo que la persona vino a leer. Este valor intermedio da 4,8:1: pasa
	   el criterio y la fecha sigue leyéndose como dato al margen. */
	color: #75849a;
}

.wf-rv-g {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	opacity: 0.9;
}

.wf-rv-text {
	margin: 0;
	font-family: var(--BodyFont, Inter), sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #a9bacb;
}

/* ---------- 4. Hover de tarjetas ---------- */

.s-curso-ppa,
.s-curso-pca,
.s-curso-tcp {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.45s ease,
	            box-shadow 0.45s ease;
}

.s-curso-ppa:hover,
.s-curso-pca:hover,
.s-curso-tcp:hover {
	transform: translate3d(0, -8px, 0);
	border-color: rgba(28, 184, 212, 0.55);
	box-shadow: 0 24px 60px -24px rgba(28, 184, 212, 0.45);
}

/* Línea que se dibuja sobre el borde superior de la ficha al pasar el mouse. */
.s-curso-ppa::before,
.s-curso-pca::before,
.s-curso-tcp::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--BrandCyan, #1cb8d4);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-curso-ppa:hover::before,
.s-curso-pca:hover::before,
.s-curso-tcp:hover::before {
	transform: scaleX(1);
}

/* Las razones NO llevan hover. Es una lista editorial con filete arriba: el
   papel que aparecía sólo competía con esa retícula sin aportar información,
   y cualquier superficie flotante encima de un filete de ancho distinto se
   lee como desalineada. Se leen de un vistazo; no hay nada que revelar. */

/* Zoom lento de la foto en hover. */
.s-curso-ppa-img,
.s-curso-pca-img,
.s-curso-tcp-img,
.s-sede-i1-img, .s-sede-i2-img, .s-sede-i3-img, .s-sede-i4-img,
.s-flota-p1-img, .s-flota-p2-img, .s-flota-p3-img, .s-flota-p4-img {
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-curso-ppa:hover .s-curso-ppa-img,
.s-curso-pca:hover .s-curso-pca-img,
.s-curso-tcp:hover .s-curso-tcp-img,
.s-sede-i1:hover .s-sede-i1-img,
.s-sede-i2:hover .s-sede-i2-img,
.s-sede-i3:hover .s-sede-i3-img,
.s-sede-i4:hover .s-sede-i4-img,
.s-flota-p1:hover .s-flota-p1-img,
.s-flota-p2:hover .s-flota-p2-img,
.s-flota-p3:hover .s-flota-p3-img,
.s-flota-p4:hover .s-flota-p4-img {
	transform: scale(1.07);
}

/* La flecha del CTA de la tarjeta se abre. */
.s-curso-ppa-cta,
.s-curso-pca-cta,
.s-curso-tcp-cta {
	transition: letter-spacing 0.35s ease, color 0.35s ease;
}

.s-curso-ppa:hover .s-curso-ppa-cta,
.s-curso-pca:hover .s-curso-pca-cta,
.s-curso-tcp:hover .s-curso-tcp-cta {
	letter-spacing: 2.4px;
}

/* ---------- 5. Botones ---------- */

.s-hero-cta-primary,
.s-cta-b1,
.s-hero-cta-whatsapp,
.s-cta-b2,
.s-cursos-btn {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.3s ease,
	            background-color 0.3s ease;
}

.s-hero-cta-primary:hover,
.s-cta-b1:hover {
	transform: translate3d(0, -2px, 0);
	box-shadow: 0 16px 34px -14px rgba(28, 184, 212, 0.75);
}

body .elementor .s-hero-cta-whatsapp:hover,
body .elementor .s-cta-b2:hover,
.s-cursos-btn:hover {
	transform: translate3d(0, -2px, 0);
	background-color: rgba(255, 255, 255, 0.1);
}

/* ---------- 6. Punto del badge ---------- */

.s-hero-badge-dot {
	animation: wf-pulse 2.4s ease-in-out infinite;
}

@keyframes wf-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(28, 184, 212, 0.6); }
	60%      { box-shadow: 0 0 0 7px rgba(28, 184, 212, 0); }
}

/* ---------- 7. prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.s-hero-copy,
	.s-hero-statsbar,
	.s-flota-track {
		transform: none !important;
		opacity: 1 !important;
	}

	.s-hero::after,
	.s-hero-badge-dot {
		animation: none;
	}

	.wf-mask > span {
		transform: none;
		animation: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* La grilla de la galería traía `column-gap: 12px` y `row-gap: normal`, que en
   grid vale CERO: las fotos se separaban entre columnas pero se tocaban entre
   filas. En escritorio pasaba desapercibido porque cada fila tiene su vecina
   al lado; en tablet y móvil, donde todo se apila, quedaba un bloque macizo de
   imágenes pegadas. Se iguala al de columnas. */
body .elementor .s-sede-grid {
	row-gap: 12px;
}

/* ---------- 8. PÁGINA DE CONTACTO ----------
   La home es la única página con hero a sangre y foto detrás; ahí el header
   va transparente y se vuelve sólido al bajar. En cualquier otra página no
   hay foto: el header transparente deja el logo blanco sobre el fondo y no se
   lee nada. Se fuerza sólido en todo lo que no sea la home. */
body:not(.page-id-34) .s-wf-header {
	background-color: rgba(8, 16, 26, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	/* La plantilla del header trae una sangría superior de 132px que sirve
	   sobre el hero de la home —empuja el menú por debajo del borde— y que
	   acá deja una barra de 190px de alto tapando el H1. El estado sólido ya
	   declara 11px, pero el CSS que genera Elementor para la plantilla le
	   gana por especificidad, así que se fija de nuevo desde acá. */
	padding-block: 11px !important;
}

body .elementor .s-contacto-hero,
body .elementor .s-contacto-cuerpo {
	background-color: var(--PageBg, #0a0f16);
	/* El ancho lo pone la caja del sitio, arriba de todo. */
	display: flex;
	color: #ffffff;
}

/* El header mide 79px y está fijo: sin esta sangría el H1 le queda debajo. */
body .elementor .s-contacto-hero {
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding-block: 122px 64px !important;
}

.s-contacto-hero > [data-id="contacto-kicker"] {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--BrandCyan, #1cb8d4);
}

.s-contacto-hero > h1 {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.08;
	color: #ffffff;
}

/* Con prefijo: `.e-paragraph-base` trae `margin: 0` con dos clases y le gana
   a un selector de una clase más un elemento. */
body .elementor .s-contacto-hero > p {
	margin: 0;
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

/* --- reseñas ---
   La página no tenía una sola prueba de que del otro lado haya alguien. Es el
   único bloque con caras, estrellas y color que no sea el de la marca, y en una
   página de contacto es justo lo que decide si escribir o no.

   Lleva `s-bl` a propósito: es la clase con la que ya andan `.s-bl .wf-rv-list`
   y `.s-bl .s-curso-rating` en las páginas de curso, así que la lista de
   reseñas se maqueta sola y acá no hay que escribir nada de eso otra vez. */
body .elementor .s-contacto-resenas {
	background-color: var(--PageBg, #0a0f16);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	color: #ffffff;
	padding-block: 0 96px !important;
}

/* --- cuerpo: datos a la izquierda, formulario a la derecha --- */
body .elementor .s-contacto-cuerpo {
	flex-direction: row;
	/* Las dos columnas comparten alto. El contenido de cada una sigue midiendo
	   lo que mide, pero al no haber ni borde ni fondo que las separe, el
	   desnivel se lee como aire y no como un escalón. */
	align-items: stretch;
	gap: 64px;
	padding-block: 0 96px !important;
}

body .elementor .s-contacto-datos { flex: 1 1 0; min-width: 0; }
body .elementor .s-contacto-form  { flex: 1.05 1 0; min-width: 0; }

/* Escala de aire de la página. Un solo lugar donde moverla: si se toca un
   valor suelto, la página vuelve a quedar despareja. */
.s-contacto-cuerpo {
	--aire-titulo: 28px;   /* del título a lo que viene abajo */
	--aire-bloque: 60px;   /* entre un bloque y el siguiente */
	--aire-item: 32px;     /* entre ítems de una misma lista */
}

/* Los elementos atómicos traen `margin: 0` en sus clases base
   (`e-heading-base`, `e-paragraph-base`), que le gana a un selector de dos
   clases. Sin el prefijo `.elementor` estas separaciones computan 0 y la
   página se ve apretada aunque los valores estén declarados. */
body .elementor .s-contacto-datos h2,
body .elementor .s-contacto-form h2 {
	margin: 0 0 var(--aire-titulo, 28px);
	font-size: 22px;
	line-height: 1.25;
	color: #ffffff;
}

body .elementor .s-contacto-datos h2:not(:first-child) {
	margin-top: var(--aire-bloque, 60px);
}

body .elementor .s-contacto-form > p {
	margin: 0 0 38px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.66);
}

body .elementor .s-contacto-hero > h1 { margin: 0; }

/* La promesa de respuesta bajó desde el encabezado hasta acá, pegada a los
   canales: es la respuesta a "si escribo, ¿me contestan?", y sirve más justo
   antes de escribir que como bajada genérica arriba de todo. */
body .elementor .s-contacto-datos > p {
	margin: 0 0 26px;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.66);
}

/* --- listas de datos ---
   Cada ítem es etiqueta arriba, dato abajo, y a veces una aclaración. Se arma
   con grid y no con viñetas: una lista de contacto no es una enumeración, es
   una tabla de dos niveles. */
.s-contacto-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--aire-item, 32px);
}

.s-contacto-lista > li {
	display: grid;
	gap: 7px;
	/* El filete pegado al texto lo hace ver como un error de maquetación en
	   vez de como una guía. Con aire suficiente se lee como margen. */
	padding-inline-start: 20px;
	padding-block: 2px;
	border-inline-start: 2px solid rgba(28, 184, 212, 0.35);
}

.s-contacto-et {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.45);
}

.s-contacto-v {
	font-size: 17px;
	line-height: 1.45;
	color: #ffffff;
	text-decoration: none;
}

a.s-contacto-v { color: var(--BrandCyan, #1cb8d4); }
a.s-contacto-v:hover { text-decoration: underline; }

/* La aclaración de cada sede es la que evita que alguien vaya a volar al
   centro. Va con menos peso pero legible, no como letra chica. */
.s-contacto-ay {
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.55);
}

/* --- canales con icono ---
   El icono hace el trabajo que hacía la etiqueta: con el logo de WhatsApp al
   lado nadie necesita leer "WhatsApp" para saber qué es. La etiqueta se queda
   igual, pero chica y como apoyo, y el dato pasa a ser lo que se lee primero.
   Así cada canal ocupa un renglón en vez de dos. */
.s-canales {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

/* El prefijo `body .elementor` no es adorno: Elementor declara
   `.e-paragraph-base a { display: unset }` —dos clases y un elemento— y le
   ganaba a `.s-canal-l`, que era una clase sola. Los tres canales quedaban en
   `display: inline`: sin mosaico, sin icono, sin relleno y sin hover. Se veian
   como tres renglones de texto pelado, que es exactamente lo que no se quería.
   Es el mismo problema de §3 del traspaso, pero adentro del HTML de un
   párrafo, donde `auditar_especificidad.py` no mira. */
body .elementor .s-canal-l {
	display: grid;
	grid-template-columns: 46px 1fr;
	grid-template-areas: "ico et" "ico val";
	align-items: center;
	column-gap: 16px;
	row-gap: 3px;
	/* El relleno del enlace es también la separación entre canales: cada fila
	   necesita su propio espacio para que el hover se lea como una pieza y no
	   como un rectángulo que invade al vecino. */
	padding: 14px 14px;
	/* Se compensa el relleno para que el texto siga alineado con los títulos
	   de la columna, que no lo tienen. */
	margin-inline-start: -14px;
	border-radius: 12px;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

/* --- color propio de cada canal ---
   Estaban los tres en turquesa. El turquesa es de la marca, pero el verde de
   WhatsApp y el degradado de Instagram son señales que se reconocen antes de
   leer: puestos en su color, la columna deja de ser un bloque de texto azul y
   se lee de un vistazo. El mosaico repite el color al 12 %, que es lo que le
   da el poco de vida que la página no tenía. */
.s-canal-l::before {
	content: "";
	grid-area: ico;
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background-color: rgba(28, 184, 212, 0.12);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

.s-canal-t {
	grid-area: et;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

.s-canal-v {
	grid-area: val;
	font-size: 16px;
	line-height: 1.3;
	color: #ffffff;
	/* El mail es largo: en pantallas chicas tiene que poder partirse en vez
	   de desbordar la caja. */
	overflow-wrap: anywhere;
}

.s-canal-l:hover {
	background-color: rgba(255, 255, 255, 0.045);
	transform: translateX(3px);
}

.s-canal-l:hover .s-canal-v { color: var(--BrandCyan, #1cb8d4); }
.s-canal--wa .s-canal-l:hover .s-canal-v { color: #25D366; }
.s-canal--ig .s-canal-l:hover .s-canal-v { color: #E1306C; }

/* Verde de WhatsApp e Instagram en su rosa: son señales que se reconocen
   antes de leer la etiqueta. El mosaico repite el color al 14 %. */
.s-canal--wa .s-canal-l::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.2-.7.1s-.7 1-.9 1.2c-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2s0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5s0-.4 0-.5c0-.2-.7-1.6-.9-2.2-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3z'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.1.8.8-3-.2-.3C4.1 15 3.7 13.5 3.7 12c0-4.6 3.7-8.3 8.3-8.3s8.3 3.7 8.3 8.3-3.7 8.2-8.3 8.2z'/%3E%3C/svg%3E");
	background-color: rgba(37, 211, 102, 0.14);
}

.s-canal--mail .s-canal-l::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231CB8D4'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.2-8 5-8-5V6l8 5 8-5v2.2z'/%3E%3C/svg%3E");
}

.s-canal--ig .s-canal-l::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1306C' stroke-width='1.9'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='%23E1306C' stroke='none'/%3E%3C/svg%3E");
	background-color: rgba(225, 48, 108, 0.14);
}

/* --- mapa: banda propia a todo el ancho ---
   Estuvo dentro de la columna de datos y ahí era el problema: como es lo único
   que puede crecer, la columna terminaba 200px por debajo del formulario y el
   conjunto se leía como una L. Estirarlo para emparejar no servía —quedaba en
   108px de alto— y achicarlo tampoco. Como banda propia el escalón no existe:
   las dos columnas quedan sólo con texto y formulario, que miden parecido. */
body .elementor .s-contacto-mapa-sec {
	background-color: var(--PageBg, #0a0f16);
	padding-block: 0 96px !important;
	display: flex;
	flex-direction: column;
	/* `flex-start` acá encogía el mapa a 302px: en una columna flex, el eje
	   transversal es el ancho, y alinear al inicio equivale a ancho de
	   contenido. El botón se alinea aparte, más abajo. */
	align-items: stretch;
}

/* El widget de HTML es un bloque más en la cadena flex: sin esto el ancho se
   corta antes de llegar al mapa. */
.s-contacto-mapa-sec [data-id="contacto-mapa"],
.s-contacto-mapa-sec [data-id="contacto-mapa"] .elementor-widget-container {
	width: 100%;
}

/* --- mapa --- */
.s-mapa {
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	/* El iframe de Google viene con fondo claro: mientras carga se ve un
	   rectángulo blanco sobre el fondo oscuro. Se le pone debajo un tono de
	   la casa para que el salto no exista. */
	background-color: var(--NavyPanel, #101a24);
	line-height: 0;
}

/* Se apunta al `iframe` y no a `.s-mapa-i`: esa clase existía cuando el mapa
   era un widget de HTML propio. Al pasarlo al widget `google_maps`, el iframe
   lo imprime Elementor sin ninguna clase nuestra, así que el filtro dejó de
   aplicarse en silencio y quedaba un rectángulo blanco de 1220x360 en el medio
   de una página negra. Era lo primero que se veía de la página.

   Bajarle el brillo no alcanzaba: un mapa claro al 94 % sigue siendo claro. La
   inversión con giro de tono es el modo oscuro de toda la vida para un mapa
   embebido —Google no deja tematizar el iframe—: el papel se vuelve carbón,
   el agua y los parques conservan su tono y las calles siguen legibles.
   Al pasar el mouse vuelve a su color, que es cuando de verdad se lo mira. */
.s-mapa iframe {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
	filter: invert(0.91) hue-rotate(180deg) saturate(0.78) contrast(0.92);
	transition: filter 0.4s ease;
}

.s-mapa:hover iframe { filter: none; }

/* `align-self` y no sólo `inline-flex`: el contenedor de arriba alinea en
   `stretch`, y en una columna flex eso convierte al hijo en bloque y lo estira
   a los 1220px de la caja. El botón medía todo el ancho de la página. */
body .elementor .s-mapa-btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	padding: 13px 22px;
	border-radius: 10px;
	background-color: var(--BrandCyan, #1cb8d4);
	color: var(--OnBrand, #042028);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.s-mapa-btn::before {
	content: "";
	width: 17px;
	height: 17px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23042028'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.s-mapa-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(28, 184, 212, 0.28);
}

/* --- formulario ---
   FluentForms trae su propia hoja pensada para fondo claro. Acá va sobre
   oscuro, así que hay que reescribir campos, etiquetas y errores; si no,
   quedan cajas blancas flotando sobre el fondo.

   Los colores salen de estas variables y no de valores sueltos dentro de cada
   regla. El motivo: es EL MISMO formulario en dos fondos distintos —el de los
   cursos va sobre una banda blanca, el de contacto sobre el navy— y con los
   colores escritos a mano habría que duplicar las treinta reglas de abajo y
   después mantener las dos copias a la par. Acá el tema claro son quince
   variables y ni una regla repetida.

   Y todas las reglas van con `.elementor` adelante. No es adorno: FluentForms
   encola `fluentform-public-default.css` cuando renderiza el shortcode, o sea
   DESPUÉS de esta hoja, y ahí declara `.ff-default .ff-el-form-control` con
   borde, radio, relleno y color. Eso es (0,2,0), lo mismo que
   `.s-curso-form .ff-el-form-control`, así que el empate lo gana la de ellos
   por orden de carga y el campo se queda con el aspecto de fábrica. El
   `.elementor` de más lleva a (0,3,0) y desempata. Estaba anotado abajo para
   el asterisco de obligatorio, pero el problema era de todo el bloque. */
.s-contacto-form,
.s-curso-form {
	--ff-etiqueta: rgba(255, 255, 255, 0.78);
	--ff-campo-borde: rgba(255, 255, 255, 0.14);
	--ff-campo-fondo: rgba(255, 255, 255, 0.04);
	--ff-campo-texto: #ffffff;
	--ff-campo-ph: rgba(255, 255, 255, 0.34);
	--ff-campo-foco: rgba(255, 255, 255, 0.07);
	--ff-lista-fondo: var(--NavyPanel, #101a24);
	--ff-lista-texto: #ffffff;
	--ff-ayuda: rgba(255, 255, 255, 0.5);
	--ff-op-borde: rgba(255, 255, 255, 0.1);
	--ff-op-fondo: rgba(255, 255, 255, 0.025);
	--ff-op-texto: rgba(255, 255, 255, 0.86);
	--ff-op-hover: rgba(255, 255, 255, 0.05);
	--ff-op-on-texto: #ffffff;
	--ff-radio-borde: rgba(255, 255, 255, 0.34);
	--ff-condicion: rgba(28, 184, 212, 0.35);
	--ff-obligatorio: rgba(255, 176, 60, 0.85);
	--ff-error: #ff9d9d;
	--ff-exito-texto: #ffffff;
}

body .elementor .s-contacto-form .ff-el-group,
body .elementor .s-curso-form .ff-el-group { margin-bottom: 26px; }

/* FluentForms deja la etiqueta pegada al campo. Separarlas es lo que hace que
   un formulario largo se lea como una lista de preguntas y no como un bloque. */
body .elementor .s-contacto-form .ff-el-group > .ff-el-input--label,
body .elementor .s-curso-form .ff-el-group > .ff-el-input--label { margin-bottom: 10px; }

/* Las dos columnas de Nombre / Apellido también necesitan aire entre sí. */
body .elementor .s-contacto-form .ff-t-cell,
body .elementor .s-curso-form .ff-t-cell { padding-inline: 0; }
body .elementor .s-contacto-form .ff-t-container,
body .elementor .s-curso-form .ff-t-container { gap: 20px; }
body .elementor .s-contacto-form .ff-t-container > .ff-t-cell,
body .elementor .s-curso-form .ff-t-container > .ff-t-cell { flex: 1 1 0; }

body .elementor .s-contacto-form .ff-el-input--label label,
body .elementor .s-curso-form .ff-el-input--label label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ff-etiqueta);
}

body .elementor .s-contacto-form .ff-el-form-control,
body .elementor .s-contacto-form select.ff-el-form-control,
body .elementor .s-contacto-form textarea.ff-el-form-control,
body .elementor .s-curso-form .ff-el-form-control,
body .elementor .s-curso-form select.ff-el-form-control,
body .elementor .s-curso-form textarea.ff-el-form-control {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--ff-campo-borde);
	border-radius: 10px;
	background-color: var(--ff-campo-fondo);
	color: var(--ff-campo-texto);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

body .elementor .s-contacto-form .ff-el-form-control::placeholder,
body .elementor .s-curso-form .ff-el-form-control::placeholder { color: var(--ff-campo-ph); }

body .elementor .s-contacto-form .ff-el-form-control:focus,
body .elementor .s-curso-form .ff-el-form-control:focus {
	outline: none;
	border-color: var(--BrandCyan, #1cb8d4);
	background-color: var(--ff-campo-foco);
}

/* El desplegable nativo hereda el fondo del sistema: sobre oscuro las
   opciones salen negras sobre negro en varios navegadores. */
body .elementor .s-contacto-form select.ff-el-form-control option,
body .elementor .s-curso-form select.ff-el-form-control option {
	background-color: var(--ff-lista-fondo);
	color: var(--ff-lista-texto);
}

body .elementor .s-contacto-form textarea.ff-el-form-control,
body .elementor .s-curso-form textarea.ff-el-form-control { min-height: 118px; resize: vertical; }

/* La ayuda se imprime como texto (helpMessagePlacement: after_label), que la
   mete DENTRO del contenedor del campo, justo antes del control. En los grupos
   de opciones ese contenedor es una grilla flexible, así que la ayuda tiene que
   reclamar la fila entera o se acomoda como si fuera una opción más. */
body .elementor .s-contacto-form .ff-el-help-message,
body .elementor .s-curso-form .ff-el-help-message {
	flex: 1 1 100%;
	margin: 0 0 9px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ff-ayuda);
}

/* --- opciones (radios) ---
   Los formularios de curso preguntan por edad, estudios, provincia, carrera y
   urgencia: son catorce grupos, y con el radio de fábrica —un punto suelto y
   el texto al lado— la página se lee como un trámite. Cada opción pasa a ser
   una fila con área de clic propia, que es además lo único que hace usable
   esto en un teléfono: el objetivo pasa de 13 px a la fila entera.

   El `:has()` es progresivo a propósito: donde no exista, las opciones se
   apilan de a una por fila, que es exactamente el comportamiento anterior. */
body .elementor .s-contacto-form .ff-el-input--content:has(> .ff-el-form-check),
body .elementor .s-curso-form .ff-el-input--content:has(> .ff-el-form-check) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body .elementor .s-contacto-form .ff-el-input--content:has(> .ff-el-form-check) > .ff-el-form-check,
body .elementor .s-curso-form .ff-el-input--content:has(> .ff-el-form-check) > .ff-el-form-check {
	flex: 1 1 215px;
	margin: 0;
}

body .elementor .s-contacto-form .ff-el-form-check-label,
body .elementor .s-curso-form .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	height: 100%;
	margin: 0;
	padding: 12px 15px;
	border: 1px solid var(--ff-op-borde);
	border-radius: 10px;
	background-color: var(--ff-op-fondo);
	color: var(--ff-op-texto);
	font-size: 15px;
	line-height: 1.45;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

body .elementor .s-contacto-form .ff-el-form-check-label:hover,
body .elementor .s-curso-form .ff-el-form-check-label:hover {
	border-color: rgba(28, 184, 212, 0.42);
	background-color: var(--ff-op-hover);
}

body .elementor .s-contacto-form .ff-el-form-check-label:has(input:checked),
body .elementor .s-curso-form .ff-el-form-check-label:has(input:checked) {
	border-color: var(--BrandCyan, #1cb8d4);
	background-color: rgba(28, 184, 212, 0.1);
	color: var(--ff-op-on-texto);
}

/* El control nativo hereda el color del sistema: sobre oscuro queda un cuadro
   blanco o directamente invisible según el navegador. Se redibuja. */
body .elementor .s-contacto-form .ff-el-form-check-input,
body .elementor .s-curso-form .ff-el-form-check-input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	border: 1.5px solid var(--ff-radio-borde);
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

body .elementor .s-contacto-form .ff-el-form-check-input:checked,
body .elementor .s-curso-form .ff-el-form-check-input:checked { border-color: var(--BrandCyan, #1cb8d4); }

body .elementor .s-contacto-form .ff-el-form-check-input:checked::after,
body .elementor .s-curso-form .ff-el-form-check-input:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background-color: var(--BrandCyan, #1cb8d4);
}

/* Se navega con teclado: sin esto el foco queda sin marca al quitarle la
   apariencia nativa al control. */
body .elementor .s-contacto-form .ff-el-form-check-input:focus-visible,
body .elementor .s-curso-form .ff-el-form-check-input:focus-visible {
	outline: 2px solid var(--BrandCyan, #1cb8d4);
	outline-offset: 2px;
}

/* El grupo que aparece por lógica condicional entra con un margen distinto:
   sin esto pega un salto seco contra la pregunta que lo disparó. */
body .elementor .s-contacto-form .ff-el-group.has-conditions,
body .elementor .s-curso-form .ff-el-group.has-conditions {
	border-inline-start: 2px solid var(--ff-condicion);
	padding-inline-start: 18px;
}

/* El asterisco de obligatorio sale del rojo de error de FluentForms. Reservar
   el rojo para los errores de verdad: si todo el formulario está salpicado de
   rojo antes de que el visitante escriba una letra, el rojo deja de avisar.

   La regla de FluentForms tiene la misma especificidad que la nuestra y su
   hoja se encola después —el formulario se pinta dentro del contenido—, así
   que gana por orden. El `.elementor` de más no es decorativo: es el que
   inclina el desempate. */
body .elementor .s-contacto-form .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
body .elementor .s-curso-form .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--ff-obligatorio);
}

body .elementor .s-contacto-form .ff-el-group:last-of-type,
body .elementor .s-curso-form .ff-el-group:last-of-type { margin-bottom: 34px; }

/* EL COLOR DEL BOTÓN NO SE DEFIENDE DESDE ACÁ, Y NO SE PUEDE.
   El widget de FluentForms para Elementor trae un control "Background Color"
   con el azul del plugin (#1A7EFB) por defecto, y lo emite en el CSS de cada
   página —aunque nadie lo haya tocado— TERMINADO EN `!important`:

     .fluentform-widget-wrapper .ff-el-group .ff-btn-submit {
         background-color: #1a7efb !important;
     }

   Contra un `!important` no hay especificidad que alcance. Se intentó subir
   este selector y no sirvió: los tres formularios de curso seguían con el
   botón azul de fábrica.
   La solución está del otro lado: los controles
   `form_submit_button_bg_color_normal` y `form_submit_button_text_color_normal`
   quedaron guardados con los colores de marca en los documentos 36, 37, 38 y
   40. Lo de acá abajo sigue valiendo para todo lo demás —forma, tamaño,
   tipografía— y como respaldo si algún día se borra el ajuste del panel. */
body .elementor .s-contacto-form .ff-btn-submit,
body .elementor .s-curso-form .ff-btn-submit {
	padding: 16px 32px;
	border: 0;
	border-radius: 10px;
	background-color: var(--BrandCyan, #1cb8d4);
	color: var(--OnBrand, #042028);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body .elementor .s-contacto-form .ff-btn-submit:hover,
body .elementor .s-curso-form .ff-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(28, 184, 212, 0.28);
}

body .elementor .s-contacto-form .error,
body .elementor .s-contacto-form .text-danger,
body .elementor .s-curso-form .error,
body .elementor .s-curso-form .text-danger { color: var(--ff-error); font-size: 13px; }

body .elementor .s-contacto-form .ff-el-is-error .ff-el-form-control,
body .elementor .s-curso-form .ff-el-is-error .ff-el-form-control { border-color: var(--ff-error); }

/* El mensaje de éxito es lo único que ve quien envía: con el estilo de
   fábrica (verde sobre blanco) parece de otro sitio. */
body .elementor .s-contacto-form .ff-message-success,
body .elementor .s-curso-form .ff-message-success {
	padding: 22px 24px;
	border: 1px solid rgba(28, 184, 212, 0.4);
	border-radius: 12px;
	background-color: rgba(28, 184, 212, 0.09);
	color: var(--ff-exito-texto);
}

body .elementor .s-contacto-form .ff-message-success p,
body .elementor .s-curso-form .ff-message-success p { margin: 0 0 8px; }
body .elementor .s-contacto-form .ff-message-success p:last-child,
body .elementor .s-curso-form .ff-message-success p:last-child { margin-bottom: 0; }

/* El selector de país del campo de teléfono también viene claro. */
body .elementor .s-contacto-form .iti__country-list,
body .elementor .s-curso-form .iti__country-list {
	background-color: var(--ff-lista-fondo);
	color: var(--ff-lista-texto);
}
body .elementor .s-contacto-form .iti__country.iti__highlight { background-color: rgba(28, 184, 212, 0.18); }

/* Las dos columnas se apilan antes de que el formulario quede angosto: por
   debajo de 900px cada una mide menos de 400 y los campos entran apretados.
   Los datos van primero — quien llega a Contacto muchas veces sólo quiere el
   WhatsApp, y hacerle pasar por todo el formulario para encontrarlo es pedirle
   que se vaya. */
@media (max-width: 900px) {
	body .elementor .s-contacto-cuerpo {
		flex-direction: column;
		gap: 52px;
		padding-block-end: 72px !important;
	}
	body .elementor .s-contacto-datos,
	body .elementor .s-contacto-form { flex: 1 1 auto; width: 100%; }
	body .elementor .s-contacto-hero { padding-block: 124px 38px !important; }
}

@media (max-width: 767px) {
	body .elementor .s-contacto-hero { padding-block: 112px 32px !important; }
	.s-contacto-hero > h1 { max-width: none; }
	.s-mapa-i { height: 260px; }
	/* El botón a ancho completo, igual que los CTA del resto del sitio. */
	body .elementor .s-mapa-btn { width: 100%; justify-content: center; }
	body .elementor .s-contacto-form .ff-btn-submit,
	body .elementor .s-curso-form .ff-btn-submit { width: 100%; }
}

/* ---------- 9. QUIÉNES SOMOS ----------
   Es la página que decide la compra. Nadie elige una escuela de aviación por
   el precio: elige en manos de quién pone su seguridad, y esta es la única
   página del sitio cuyo trabajo entero es contestar eso.

   Por eso NO es una página de prosa. La versión anterior era una sola columna
   de texto: se leía bien y no probaba nada. Acá cada afirmación va apareada
   con la foto que la sostiene —el certificado de ANAC colgado en la pared, el
   avión con su matrícula, el aula real— porque una prueba visual pesa más que
   el mejor párrafo. El ritmo alternado izquierda/derecha es lo que sostiene la
   lectura hacia abajo; una columna larga se abandona a la mitad.

   Presupuesto de movimiento: un solo IntersectionObserver para todos los
   bloques y los contadores que ya existían. Nada atado al scroll, nada que
   corra en cada cuadro. */

body .elementor .s-nosotros-hero,
body .elementor .s-nosotros-cuerpo,
body .elementor .s-nosotros-cta {
	background-color: var(--PageBg, #0a0f16);
	display: flex;
	flex-direction: column;
	/* En un flex vertical el eje transversal es el ANCHO: con `flex-start`
	   cada hijo se encoge al tamaño de su contenido y las fotos colapsan. */
	align-items: stretch;
	color: #ffffff;
}

/* --- encabezado --- */
body .elementor .s-nosotros-hero {
	position: relative;
	gap: 18px;
	padding-block: 132px 0 !important;
	/* La luz entra por arriba a la izquierda, igual que en el hero de la home:
	   dos gradientes de 0 KB en lugar de una foto de fondo estirada. Las que
	   hay en la biblioteca miden 856px de ancho y a sangre se pixelan. */
	background-image:
		radial-gradient(120% 80% at 12% -10%, rgba(28, 184, 212, 0.15), transparent 62%),
		radial-gradient(90% 60% at 100% 0%, rgba(28, 184, 212, 0.07), transparent 55%);
}

.s-nosotros-hero > [data-id="nosotros-kicker"] {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--BrandCyan, #1cb8d4);
}

body .elementor .s-nosotros-hero > h1 {
	margin: 0;
	max-width: 16ch;
	font-size: clamp(38px, 5.2vw, 66px);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

body .elementor .s-nosotros-hero > p {
	margin: 0;
	/* Acá sí manda la medida de línea: es prosa corrida. El resto de la página
	   son columnas angostas que ya quedan dentro del rango legible. */
	max-width: 62ch;
	font-size: 18px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.72);
}

/* --- banda de datos --- */
/* Los mismos valores que la banda del hero de la home (Montserrat 800 en
   blanco, JetBrains Mono en gris azulado): son el mismo dato dicho dos veces
   en el mismo sitio y no tienen por qué verse distinto. La versión anterior
   iba en cian a 42px y competía con el H1 que tenía arriba.

   Van copiados y no heredados porque en la home esos valores viven en los
   estilos de Elementor de cada elemento, no en una clase compartida. Si allá
   cambian, hay que tocar acá. */
body .elementor .s-nos-datos {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 56px;
	padding: 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

body .elementor .s-nos-dato {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 0;
	min-width: 140px;
	padding: 0;
}

body .elementor .s-nos-n {
	margin: 0;
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1em;
	letter-spacing: -0.6px;
	color: #ffffff;
	/* Los dígitos no cambian de ancho mientras corre el contador: sin esto el
	   número tiembla de izquierda a derecha durante toda la animación. */
	font-variant-numeric: tabular-nums;
}

body .elementor .s-nos-et {
	margin: 9px 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--TextMuted, #8296ad);
}

/* --- cuerpo --- */
body .elementor .s-nosotros-cuerpo {
	gap: 104px;
	padding-block: 96px 96px !important;
}

body .elementor .s-nb{ display: block; }

body .elementor .s-nb-k {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(28, 184, 212, 0.85);
}

body .elementor .s-nb h2 {
	margin: 0 0 18px;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.18;
	letter-spacing: -0.01em;
}

body .elementor .s-nb h3 {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.3;
}

body .elementor .s-nb p {
	margin: 0 0 15px;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.74);
}

body .elementor .s-nb p:last-child { margin-bottom: 0; }
.s-nb strong { color: #ffffff; font-weight: 600; }

.s-nb a {
	color: var(--BrandCyan, #1cb8d4);
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 184, 212, 0.35);
}

.s-nb a:hover { border-bottom-color: var(--BrandCyan, #1cb8d4); }

/* --- bloque en dos columnas --- */
.s-nb-split {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 60px;
	align-items: center;
}

/* La alternancia se hace por `order` y no invirtiendo las columnas en el HTML:
   así el orden de lectura del documento sigue siendo texto → foto, que es lo
   que necesitan el lector de pantalla y la vista de móvil. */
.s-nb-rev .s-nb-txt { order: 2; }

.s-nb-txt { min-width: 0; }

.s-nb-img {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 4 / 3;
	box-shadow: 0 20px 46px rgba(0, 0, 0, 0.42);
}

body .elementor .s-nb-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.s-nb-img:hover img { transform: scale(1.045); }

/* Dos trabajos en un solo pseudo-elemento: apoyar la foto sobre el fondo casi
   negro —vienen con luz de mediodía y saltaban como recortes pegados encima— y
   fabricarle una base oscura al pie. Sin eso, el pie cae sobre la pared blanca
   del aula o sobre el cielo del avión y no se lee. */
.s-nb-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(3, 8, 14, 0.82) 0%,
		rgba(3, 8, 14, 0.42) 14%,
		rgba(3, 8, 14, 0.06) 34%,
		transparent 55%
	);
	pointer-events: none;
}

/* PREFIJADO CON EL BLOQUE: si no, esta regla NO se aplica.
   `body .elementor .s-nb p` y `body .elementor .s-nb h3` son (0,2,2) y le
   ganaban a esta, que era (0,2,1): el tamaño de abajo se declaraba y no pasaba
   nada, y el texto salía al tamaño de párrafo del bloque. Con `.s-nb` delante
   son (0,3,1) y no hay empate. Es el mismo problema que ya había costado un
   texto invisible en el formulario (ver la nota de `.s-bl.s-consulta`). */
body .elementor .s-nb .s-nb-pie {
	position: absolute;
	inset-inline: 14px;
	bottom: 12px;
	z-index: 1;
	margin: 0 !important;
	font-size: 12px !important;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.72) !important;
}


.s-ciac {
	display: grid;
	gap: 5px;
	margin-top: 22px;
	padding: 15px 18px;
	border-radius: 10px;
	background-color: rgba(28, 184, 212, 0.08);
	border-inline-start: 3px solid var(--BrandCyan, #1cb8d4);
}

.s-ciac .s-nos-et { color: rgba(255, 255, 255, 0.55); }

/* --- 02 · Cómo enseñamos ---
   Tuvo cuatro tarjetas —observar, decidir, anticiparse, ganar confianza— y se
   fueron: repetían palabra por palabra los verbos del párrafo de arriba, y sin
   una glosa debajo no agregaban nada. Escribir yo esa glosa era peor: sería
   atribuirle a la escuela un método pedagógico que nadie describió, justo en
   la página cuyo único trabajo es dar confianza. Ahora el bloque cierra con
   el curso de Factores Humanos que ANAC le aprobó, que es verificable.

   No lleva foto ni recuadro. Foto no hay —ninguna de las de la biblioteca
   muestra instrucción— y una de archivo en el "quiénes somos" se nota.
   Recuadro tampoco: el panel de ANAC es el único bloque enmarcado de la
   página a propósito, y si hubiera dos ya no destacaría ninguno. */
body .elementor .s-metodo {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
}


/* --- 03 · Certificación ---
   Este bloque está armado con elementos nativos de Elementor (flexbox,
   heading, paragraph, image) y no con un widget de HTML, para que los textos,
   las imágenes y los enlaces se editen desde el panel sin tocar código. Acá
   sólo vive la presentación.

   Por eso todos los selectores del bloque llevan `.elementor` delante: los
   contenedores traen sus propias clases base del plugin —que fijan display y
   márgenes— y sin ese prefijo empatan en especificidad y gana el que cargue
   último, que no siempre es este archivo. */
body .elementor .s-anac {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 48px;
	align-items: center;
	padding: 42px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.032);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Los contenedores atómicos de Elementor traen `padding: 10px` de fábrica.
   En el que lleva padding propio no se nota, pero en los cuatro que sólo
   agrupan hay que apagarlo: en la ficha ese relleno dejaba una banda clara
   alrededor de las filas —el fondo que sólo tiene que asomar por el hueco de
   1px— y en las tarjetas le comía 20px de ancho a cada certificado. */
body .elementor .s-anac-txt,
body .elementor .s-ficha-anac,
body .elementor .s-docs,
body .elementor .s-doc {
	padding: 0;
}

body .elementor .s-anac-txt {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
}

/* --- ficha de la habilitación ---
   Los datos salen textuales del certificado de ANAC y se muestran como ficha y
   no como párrafo por una razón concreta: quien está comparando escuelas viene
   a buscar UN dato —el número de habilitación— y lo tiene que encontrar sin
   leer. En prosa se pierde. */
body .elementor .s-ficha-anac {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 24px;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	/* El fondo claro se ve sólo por el hueco de 1px del gap: así la línea
	   divisoria no necesita un borde por fila. */
	background-color: rgba(255, 255, 255, 0.1);
}

body .elementor .s-ficha-fila {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 16px;
	align-items: baseline;
	padding: 13px 16px;
	background-color: #0d131b;
}

body .elementor .s-ficha-k {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

/* PREFIJADO CON EL BLOQUE: si no, esta regla NO se aplica.
   `body .elementor .s-nb p` y `body .elementor .s-nb h3` son (0,2,2) y le
   ganaban a esta, que era (0,2,1): el tamaño de abajo se declaraba y no pasaba
   nada, y el texto salía al tamaño de párrafo del bloque. Con `.s-nb` delante
   son (0,3,1) y no hay empate. Es el mismo problema que ya había costado un
   texto invisible en el formulario (ver la nota de `.s-bl.s-consulta`). */
body .elementor .s-nb .s-ficha-v {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: #ffffff;
}

/* El número va en monoespaciada y con `user-select: all`: es un código que se
   copia para verificarlo, y en una tipografía proporcional los ceros y las
   íes se confunden justo cuando alguien lo está tipeando en otro lado. */
body .elementor .s-ficha-v.s-cod {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo,
	             Consolas, monospace;
	font-size: 13.5px;
	color: var(--BrandCyan, #1cb8d4);
	user-select: all;
	overflow-wrap: anywhere;
}

/* --- los dos documentos ---
   Las hojas son decorativas: quien quiera verificar algo abre el PDF, que es
   el que lleva la firma digital y el número de expediente. Por eso se muestran
   enteras y sin recortar —`height: auto` sobre el ancho de la columna, sin
   `aspect-ratio` que haya que mantener sincronizado con el archivo— y no
   fuerzan la descarga: bajar algo que nadie pidió asusta más de lo que
   convence.

   Sin borde propio: las imágenes ya vienen con su marco claro dibujado, y
   agregarle uno acá dibujaba una segunda línea pegada a la primera. El realce
   del hover es un anillo por fuera, que no toca ese marco. */
body .elementor .s-docs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-self: center;
}

body .elementor .s-doc {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	text-decoration: none;
	transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.3, 1);
}

body .elementor .s-doc:hover { transform: translateY(-4px); }

body .elementor img.s-doc-hoja {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 12px;
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
	transition: box-shadow 0.35s ease;
}

body .elementor .s-doc:hover .s-doc-hoja {
	box-shadow: 0 0 0 2px rgba(28, 184, 212, 0.55),
	            0 22px 48px rgba(0, 0, 0, 0.58);
}

/* PREFIJADO CON EL BLOQUE: si no, esta regla NO se aplica.
   `body .elementor .s-nb p` y `body .elementor .s-nb h3` son (0,2,2) y le
   ganaban a esta, que era (0,2,1): el tamaño de abajo se declaraba y no pasaba
   nada, y el texto salía al tamaño de párrafo del bloque. Con `.s-nb` delante
   son (0,3,1) y no hay empate. Es el mismo problema que ya había costado un
   texto invisible en el formulario (ver la nota de `.s-bl.s-consulta`). */
body .elementor .s-nb .s-doc-t {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
}

body .elementor .s-nb .s-doc-d {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.58);
}

body .elementor .s-doc-ir {
	margin: 4px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--BrandCyan, #1cb8d4);
}


/* --- instructores ---
   Siete tarjetas iguales: foto, nombre y qué dicta. Cuatro por fila, no
   `auto-fit`: con siete el reparto automático mete cinco arriba y deja dos
   estiradas abajo. A cuatro la segunda fila queda de tres, que se lee como
   una fila y no como un sobrante.

   La foto va cuadrada y recortada por CSS (`object-fit: cover`), así da lo
   mismo con qué encuadre llegue cada retrato: todas las caras quedan del
   mismo alto y la fila no se escalona. */
body .elementor .s-inst-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 30px;
}

.s-inst {
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.032);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.3s ease, border-color 0.3s ease,
	            background-color 0.3s ease;
}

.s-inst:hover {
	transform: translateY(-3px);
	border-color: rgba(28, 184, 212, 0.45);
	background-color: rgba(255, 255, 255, 0.05);
}

body .elementor .s-inst p { font-size: 15px; line-height: 1.6; margin: 0; }

/* El hueco de la foto. Mientras no haya retrato cargado, Elementor imprime su
   propia imagen de relleno: se ve el marco ocupado y se cambia desde el panel
   sin tocar nada más. Va con `img.` delante porque `e-image` pone la clase
   sobre la etiqueta <img>, igual que en `.s-doc-hoja`. */
body .elementor img.s-inst-foto {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 14px;
	background-color: rgba(255, 255, 255, 0.05);
}

/* Gana al `p` genérico de arriba: aquel suma el elemento y empata, así que
   el rol lleva la clase también en el selector. */
body .elementor .s-inst p.s-inst-rol {
	font-size: 14px;
	line-height: 1.45;
	color: var(--BrandCyan, #1cb8d4);
}

/* --- ajustes para los contenedores nativos de Elementor ---
   Los bloques de esta página pasaron de un widget de HTML a árboles de
   elementos de Elementor, para que los textos se editen desde el panel. Eso
   cambia dos cosas del CSS de arriba, que fue escrito para markup propio:

   1. Todo contenedor atómico trae `padding: 10px` de fábrica. En los que sólo
      agrupan hay que apagarlo o se come el ancho y descuadra las fotos.
   2. `.s-nb` era un <section> en flujo normal; ahora es un contenedor flex y
      la clase base del plugin gana en especificidad, así que el display se
      vuelve a fijar acá con `.elementor` delante.

   El panel de ANAC queda afuera del reset: es el único `.s-nb` con relleno
   propio, y como esta regla va después y empata en especificidad, se lo
   borraba. Por eso la excepción va acá y no un `padding` repetido allá. */
body .elementor .s-nb:not(.s-anac),
body .elementor .s-nb-txt,
body .elementor .s-nb-img,
body .elementor .s-nb-col,
body .elementor .s-inst-grid,
body .elementor .s-inst,
body .elementor .s-nosotros-btns {
	padding: 0;
}

/* Los bloques sin foto: una sola columna. */
body .elementor .s-nb-col {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Los bloques con foto vuelven a ser grid. `.s-nb-split` sola ya lo declaraba,
   pero como contenedor atómico la clase base del plugin la empata en
   especificidad y gana por orden de carga: quedaba un flex que repartía las
   dos columnas en partes iguales y estiraba la foto en vez de centrarla. */
body .elementor .s-nb-split {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 60px;
	align-items: center;
}

/* --- bloque con foto alta ---
   Historia es el bloque con más texto de la página: con la proporción 4/3 la
   foto quedaba flotando en el medio de una columna mucho más alta. Acá se
   estira a todo el alto de la fila, así acompaña al texto y da lo mismo qué
   foto llegue —apaisada o vertical—, porque el recorte ya lo resuelve el
   `object-fit: cover` de la imagen.

   El `min-height` es el piso para el día que el texto se acorte: sin él, dos
   párrafos menos convierten la foto en una banda. */
body .elementor .s-nb-alta { align-items: stretch; }

body .elementor .s-nb-alta .s-nb-img {
	aspect-ratio: auto;
	min-height: 460px;
}

body .elementor .s-nb-txt {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
}

/* El marco de la foto vuelve a comportarse como un bloque: la proporción y el
   recorte de `.s-nb-img` dependen de que la imagen sea el único hijo en flujo,
   y como contenedor flex el pie —que va posicionado absoluto— no molesta. */
body .elementor .s-nb-img {
	display: block;
}

body .elementor .s-inst {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 16px 16px 20px;
}


body .elementor .s-inst-nota { margin-top: 24px; }

/* El mapa pasó al widget `google_maps`, que trae su propio ancho y quedaba
   corto dentro de la columna. */
body .elementor .elementor-widget-google_maps,
body .elementor .elementor-widget-google_maps > .elementor-widget-container,
body .elementor .elementor-widget-google_maps iframe {
	width: 100%;
}

/* Envoltorio neutro. Lo lleva el contenedor que el conversor tuvo que crear
   cuando un bloque no tenía una raíz única —el encabezado de curso eran dos
   <div> hermanos, por ejemplo—. Sin clase propia se lo comía el
   `flex-direction: row` de fábrica y las fichas quedaban de 60px en fila. */
body .elementor .s-col {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
}

/* --- contenedores convertidos que no traen maqueta propia ---
   Eran <div> o <section> en flujo normal y ahora son contenedores
   atómicos, que el plugin arranca en `flex-direction: row` desde
   `.elementor .e-flexbox-base`. Sin esto el contenido de cada bloque
   se alinea en una sola fila. */
body .elementor .s-bl,
body .elementor .s-camino,
body .elementor .s-cur,
body .elementor .s-curso-rating,
body .elementor .s-legal-caja,
body .elementor .s-mapa,
body .elementor .s-prosa,
body .elementor .s-req-col,
body .elementor .s-ruta-p,
body .elementor .s-tabla-wrap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* --- huecos de contenido ---
   Se ven, y molestan a propósito. Es una página cuyo trabajo es dar confianza:
   un dato inventado hace más daño que un hueco visible, y un hueco discreto se
   publica sin que nadie lo note. BORRAR ESTA REGLA cuando no quede ninguno. */
.s-falta {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 6px;
	background-color: rgba(255, 176, 60, 0.14);
	border: 1px dashed rgba(255, 176, 60, 0.5);
	color: #ffc978;
	font-size: 14px;
	line-height: 1.5;
}

/* --- cierre --- */
body .elementor .s-nosotros-cta {
	align-items: flex-start;
	gap: 16px;
	padding-block: 64px 96px !important;
}

body .elementor .s-nosotros-cta h2 {
	margin: 0;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.15;
}

body .elementor .s-nosotros-cta-p {
	margin: 0 0 26px;
	max-width: 52ch;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.7);
}

body .elementor .s-nosotros-btns{ display: flex; flex-wrap: wrap; gap: 14px; }

body .elementor .s-btn-full,
body .elementor .s-btn-ghost {
	display: inline-flex;
	align-items: center;
	padding: 15px 30px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease,
	            background-color 0.25s ease;
}

body .elementor .s-btn-full {
	background-color: var(--BrandCyan, #1cb8d4);
	color: var(--OnBrand, #042028);
}

/* El fondo transparente va declarado y no omitido: los botones de Elementor
   traen azul de fábrica desde su clase base, así que un botón "sin fondo" que
   no lo diga se pinta igual que el lleno. */
body .elementor .s-btn-ghost {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.s-btn-full:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(28, 184, 212, 0.28);
}

.s-btn-ghost:hover {
	transform: translateY(-2px);
	background-color: rgba(255, 255, 255, 0.06);
}

/* --- aparición al entrar en pantalla ---
   El estado oculto cuelga de `.wf-rv-on`, que lo pone el JS. Si el script no
   corre —error, bloqueador, red cortada— la clase no existe y la página se ve
   entera: nunca se esconde contenido detrás de algo que puede fallar. El JS
   tampoco pone la clase cuando el sistema pide menos movimiento. */
.wf-rv-on .wf-rv {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.wf-rv-on .wf-rv.is-in {
	opacity: 1;
	transform: none;
}

@media (max-width: 1024px) {
	.s-nb-split { gap: 40px; }
	body .elementor .s-nosotros-cuerpo { gap: 80px; }

	/* A cuatro columnas la tarjeta baja de 200px y la foto queda del tamaño de
	   una miniatura. Tres arriba, tres al medio y una abajo. */
	body .elementor .s-inst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	body .elementor .s-nosotros-hero { padding-block: 112px 0 !important; }
	body .elementor .s-nosotros-hero > h1 { max-width: none; }

	/* Dos columnas de datos, no cuatro: a cuatro entran 80px por celda y el
	   número se parte en dos renglones. */
	body .elementor .s-nos-datos { gap: 18px; margin-top: 40px; }
	body .elementor .s-nos-dato { flex: 0 0 calc(50% - 9px); min-width: 0; }
	body .elementor .s-nos-n { font-size: 22px; }

	body .elementor .s-nosotros-cuerpo { gap: 64px; padding-block: 64px 72px !important; }

	/* Se apila, y el `order` de la alternancia se desarma: en una sola columna
	   el texto va siempre primero. */
	body .elementor .s-nb-split { grid-template-columns: 1fr; gap: 26px; }
	body .elementor .s-nb-rev .s-nb-txt { order: 0; }

	/* Apilado no hay alto de fila que copiar: la foto vuelve a una proporción. */
	body .elementor .s-nb-alta .s-nb-img { aspect-ratio: 4 / 3; min-height: 0; }

	body .elementor .s-anac { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; }

	/* La ficha pasa a etiqueta arriba y dato abajo: a dos columnas quedan
	   ~110px para el número de habilitación y se parte en cuatro renglones. */
	body .elementor .s-ficha-fila { grid-template-columns: 1fr; gap: 5px; }

	/* Los dos certificados siguen lado a lado también en el teléfono: apilados
	   ocupan media pantalla cada uno y el bloque se vuelve un scroll largo por
	   dos imágenes que son decorativas, no lectura. */
	body .elementor .s-docs { margin-top: 4px; }

	.s-nosotros-btns > * { flex: 1 1 100%; justify-content: center; }

	/* Dos por fila y no una: apiladas de a una, siete retratos cuadrados son
	   siete pantallas de scroll para un bloque que se hojea. */
	body .elementor .s-inst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ---------- 10. CURSOS (hub del silo) ----------
   Esta página tiene un trabajo de SEO muy concreto y una trampa igual de
   concreta. El trabajo: ser la madre del silo, la que Google reconoce como
   catálogo y desde la que baja autoridad a las tres páginas de curso. La
   trampa: si acá se cuenta el curso de Piloto Privado en detalle, esta página
   compite con /cursos/piloto-privado-rosario por la misma búsqueda y las dos
   pierden — es el clásico de dos páginas propias peleándose un resultado.

   La regla que separa una cosa de la otra:

     · la home responde "qué es esto"      → escuela de aviación en Rosario
     · el hub responde  "cuál me toca"     → carreras de aviación en Rosario
     · cada hijo responde "cómo es este"   → curso de X en Rosario

   Por eso el hub no lleva plan de estudios, ni requisitos detallados, ni FAQ:
   eso vive en los hijos. Lo que sí lleva, y no tiene ninguna otra página, es
   el contenido de DECISIÓN — en qué se diferencian, cuál es la ruta de uno al
   otro, qué comparten. Nadie más puede reclamar esas búsquedas.

   Los títulos de las tarjetas dicen "Piloto Privado de Avión", no "Curso de
   Piloto Privado en Rosario": la frase con ciudad se reserva para el enlace,
   donde trabaja a favor del hijo en vez de competirle. */

body .elementor .s-cursos-hero,
body .elementor .s-cursos-cuerpo,
body .elementor .s-cursos-cta,
body .elementor .s-ext-hero,
body .elementor .s-ext-cuerpo,
body .elementor .s-ext-cta {
	background-color: var(--PageBg, #0a0f16);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	color: #ffffff;
}

/* --- encabezado --- */
body .elementor .s-cursos-hero,
body .elementor .s-ext-hero {
	gap: 18px;
	padding-block: 132px 0 !important;
	background-image:
		radial-gradient(120% 80% at 12% -10%, rgba(28, 184, 212, 0.15), transparent 62%),
		radial-gradient(90% 60% at 100% 0%, rgba(28, 184, 212, 0.07), transparent 55%);
}

.s-cursos-hero > [data-id="cursos-kicker"],
.s-ext-hero > [data-id="ext-kicker"] {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--BrandCyan, #1cb8d4);
}

body .elementor .s-cursos-hero > h1,
body .elementor .s-ext-hero > h1 {
	margin: 0;
	max-width: 18ch;
	font-size: clamp(38px, 5.2vw, 66px);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

body .elementor .s-cursos-hero > p,
body .elementor .s-ext-hero > p {
	margin: 0;
	max-width: 62ch;
	font-size: 18px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.72);
}

body .elementor .s-cursos-cuerpo,
body .elementor .s-ext-cuerpo {
	gap: 96px;
	padding-block: 88px 96px !important;
}

body .elementor .s-cur h2 {
	margin: 0 0 14px;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.18;
	letter-spacing: -0.01em;
}

body .elementor .s-cur > p {
	margin: 0 0 34px;
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.74);
}

body .elementor .s-cur-k {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(28, 184, 212, 0.85);
}

/* --- las tres tarjetas ---
   La tarjeta entera es el enlace: el objetivo táctil de un curso es la
   tarjeta, no un "Ver más" de 90px al fondo. Como el texto del ancla es todo
   lo que hay adentro, la línea final es la que carga la frase con ciudad. */
body .elementor .s-cc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

body .elementor .s-cc{
	display: flex;
	flex-direction: column;
	padding: 26px 24px 24px;
	border-radius: 18px;
	background-color: rgba(255, 255, 255, 0.032);
	border: 1px solid rgba(255, 255, 255, 0.08);
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, border-color 0.3s ease,
	            background-color 0.3s ease, box-shadow 0.3s ease;
}

.s-cc:hover {
	transform: translateY(-4px);
	border-color: rgba(28, 184, 212, 0.45);
	background-color: rgba(255, 255, 255, 0.05);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

body .elementor .s-cc-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.s-cc-idx {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.32);
}

.s-cc-sigla {
	padding: 4px 11px;
	border-radius: 999px;
	background-color: rgba(28, 184, 212, 0.12);
	border: 1px solid rgba(28, 184, 212, 0.3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--BrandCyan, #1cb8d4);
}

body .elementor .s-cc h3 {
	margin: 0 0 10px;
	font-size: 21px;
	line-height: 1.22;
}

body .elementor .s-cc-d {
	min-height: calc(15.5px * 1.62 * 3);
	margin: 0 0 20px;
	font-size: 15.5px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.7);
}

body .elementor .s-cc-datos{
	margin-top: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 16px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body .elementor .s-cc-dato{ display: grid; gap: 3px; }

.s-cc-k {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

.s-cc-v { font-size: 15px; line-height: 1.35; }

/* `margin-top: auto` empuja la línea al fondo: con tarjetas de alto distinto
   —el texto del TCP es más largo— si no, cada flecha queda a una altura y la
   fila se lee desprolija. */
body .elementor .s-cc-ir {
	margin-top: auto;
	padding-top: 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--BrandCyan, #1cb8d4);
}

.s-cc-ir::after {
	content: " →";
	display: inline-block;
	transition: transform 0.3s ease;
}

.s-cc:hover .s-cc-ir::after { transform: translateX(4px); }

/* Marca de dato sin confirmar. A diferencia de `.s-falta`, que señala un
   hueco, acá el dato está y lo que falta es el respaldo: se avisa sin romper
   la lectura de la ficha. Va en la misma familia de color. */
.s-ver {
	font-size: 12px;
	font-weight: 600;
	color: #ffb03c;
}

/* --- bloque de decisión --- */
body .elementor .s-caminos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

body .elementor .s-camino {
	padding: 28px 26px;
	border-radius: 18px;
	background-color: rgba(255, 255, 255, 0.028);
	border: 1px solid rgba(255, 255, 255, 0.07);
}

body .elementor .s-camino h3 {
	margin: 0 0 10px;
	font-size: 19px;
	line-height: 1.25;
}

.s-camino p {
	margin: 0 0 12px;
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
}

.s-camino p:last-child { margin-bottom: 0; }

/* La ruta PPA → PCA. Es el contenido que sólo puede vivir acá: cada hijo
   cuenta su licencia, ninguno cuenta el orden entre las dos. */
body .elementor .s-ruta {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-top: 28px;
}

body .elementor .s-ruta-p {
	flex: 1 1 200px;
	position: relative;
	padding: 18px 20px;
	border-radius: 14px;
	background-color: rgba(28, 184, 212, 0.06);
	border-inline-start: 3px solid rgba(28, 184, 212, 0.55);
}

body .elementor .s-ruta-n {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--BrandCyan, #1cb8d4);
}

.s-ruta-t { font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }
.s-ruta-t strong { color: #ffffff; font-weight: 600; }

/* --- lo que comparten --- */
body .elementor .s-comun {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px 34px;
}

/* Aire entre la bajada y la grilla.

   `.s-comun` no declara separación superior: el único hueco que había lo ponía
   el `margin-bottom: 15px` de `body .elementor .s-bl p`. Como el título del
   bloque deja 16px antes de la bajada, los dos escalones medían lo mismo y la
   grilla se leía como continuación del párrafo en vez de como otro nivel.

   Va sobre el párrafo y no como `margin-top` de la grilla porque `.s-bl` es un
   contenedor flex y ahí los márgenes NO colapsan: sumar 32 arriba daría 47.
   Alcanza a los dos bloques que tienen bajada —«Vivir en Rosario» y «Lo que
   comparten las tres» de /cursos/— y deja como está el que va pegado al H2. */
body .elementor .s-bl p:has(+ .s-comun) { margin-bottom: 32px; }

body .elementor .s-comun-i { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; padding: 0; }

/* `position: relative` y con el prefijo puesto: Elementor declara
   `.e-con::before { position: absolute }` para el velo de fondo de sus
   contenedores, y `.s-comun-i` ES un contenedor. Sin anular esa posición el
   círculo del tilde quedaba FUERA DEL FLUJO: dejaba de ser una celda de la
   grilla, el título se caía a la columna de 30px —una letra por renglón— y el
   círculo se dibujaba encima del texto. Es lo que se veía en «Lo que comparten
   las tres». */
body .elementor .s-comun-i::before {
	content: "";
	position: relative;
	grid-row: span 2;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgba(28, 184, 212, 0.12);
	border: 1px solid rgba(28, 184, 212, 0.3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231CB8D4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px;
}

body .elementor .s-comun-i h3 {
	margin: 0 0 5px;
	font-size: 16px;
	line-height: 1.3;
}

body .elementor .s-comun-i p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.s-cur a:not(.s-cc) {
	color: var(--BrandCyan, #1cb8d4);
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 184, 212, 0.35);
}

.s-cur a:not(.s-cc):hover { border-bottom-color: var(--BrandCyan, #1cb8d4); }

/* --- cierre --- */
body .elementor .s-cursos-cta,
body .elementor .s-ext-cta {
	align-items: flex-start;
	gap: 16px;
	padding-block: 64px 96px !important;
}

body .elementor .s-cursos-cta h2,
body .elementor .s-ext-cta h2 {
	margin: 0;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.15;
}

@media (max-width: 767px) {
	body .elementor .s-cursos-hero,
	body .elementor .s-ext-hero { padding-block: 112px 0 !important; }
	body .elementor .s-cursos-hero > h1,
	body .elementor .s-ext-hero > h1 { max-width: none; }
	body .elementor .s-cursos-cuerpo,
	body .elementor .s-ext-cuerpo { gap: 64px; padding-block: 64px 72px !important; }
	.s-cc { padding: 22px 20px 20px; }
}

/* ---------- 11. PÁGINA DE CURSO ----------
   Una sola plantilla para las tres. No por ahorrar trabajo: porque el visitante
   que compara PPA con PCA tiene que poder saltar de una a otra y encontrar el
   mismo dato en el mismo lugar. Si cada página ordenara distinto, comparar
   costaría el doble y la comparación es exactamente lo que viene a hacer.

   Es la página money del silo: acá vive TODO lo del curso —plan, requisitos,
   salida laboral, preguntas, formulario— y por eso el hub no lo repite.

   El orden no es decorativo. Primero qué es y para qué sirve (decidir si es
   lo que busca), después plan y requisitos (decidir si puede), después salida
   laboral (decidir si le conviene) y recién ahí el formulario. Pedir el dato
   antes de haber contestado las tres preguntas es lo que hace que los
   formularios de cursos se llenen de consultas vacías. */

body .elementor .s-curso-hero,
body .elementor .s-curso-cuerpo,
body .elementor .s-curso-cta {
	background-color: var(--PageBg, #0a0f16);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	color: #ffffff;
}

/* --- encabezado --- */
body .elementor .s-curso-hero {
	gap: 18px;
	padding-block: 132px 0 !important;
	background-image:
		radial-gradient(120% 80% at 12% -10%, rgba(28, 184, 212, 0.15), transparent 62%),
		radial-gradient(90% 60% at 100% 0%, rgba(28, 184, 212, 0.07), transparent 55%);
}

.s-curso-hero > [data-id$="-kicker"] {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--BrandCyan, #1cb8d4);
}

body .elementor .s-curso-hero > h1 {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(34px, 4.6vw, 58px);
	line-height: 1.06;
	letter-spacing: -0.01em;
}

body .elementor .s-curso-hero > p {
	margin: 0;
	max-width: 62ch;
	font-size: 18px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.72);
}

body .elementor .s-curso-botones{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 12px;
}

/* Ficha de cabecera: los cuatro datos que deciden si el curso es viable para
   quien lee. Van arriba y no al final por eso mismo — el que no llega a la
   edad mínima tiene que enterarse en la primera pantalla, no en la quinta. */
body .elementor .s-curso-fichas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 46px;
	padding-block: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

body .elementor .s-curso-ficha{ display: grid; gap: 6px; align-content: start; }

.s-curso-ficha-k {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.s-curso-ficha-v {
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.2;
	/* Era el turquesa de marca, y era el único lugar del sitio donde un dato se
	   pintaba con el acento. Los mismos cuatro datos —edad, psicofísico, horas,
	   requisito— aparecen en las tarjetas del home y de /cursos/ en #CBD5E1, y la
	   barra de datos del hero usa blanco: el turquesa acá era la excepción.

	   Va en blanco y no en #CBD5E1 porque a 24px y peso 700 esto es un dato
	   destacado, no un valor al margen: la escala lo pone al nivel de los números
	   de la barra del hero, que son blancos. El #CBD5E1 de la guía es para los
	   valores de ficha de 12px de las tarjetas, que siguen como están.

	   Lo que se gana además: el turquesa deja de gastarse en un dato neutro y
	   queda para lo que se puede tocar. */
	color: #ffffff;
}

/* --- cuerpo --- */
body .elementor .s-curso-cuerpo {
	gap: 88px;
	padding-block: 84px 88px !important;
}

/* El cuerpo termina en `.s-consulta`, que rompe la columna y pinta el ancho
   entero de blanco. El relleno de abajo queda DEBAJO de ese blanco y antes de
   la foto del cierre, o sea 88px de #0a0f16 atravesados de lado a lado: se lee
   como una franja negra suelta entre el formulario y el cierre, no como aire.

   El bloque blanco ya trae su propio relleno interior (64/72px), así que
   sacarlo no aprieta nada; sólo hace que el blanco termine donde empieza la
   foto.

   El `:has()` y no un `padding-bottom: 0` pelado porque la regla tiene que
   valer sólo mientras el último bloque sea el de fondo lleno. Si algún día se
   agrega un bloque navy después, el aire vuelve solo. */
body .elementor .s-curso-cuerpo:has(> .s-consulta:last-child) {
	padding-bottom: 0 !important;
}

body .elementor .s-bl h2 {
	margin: 0 0 16px;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.18;
	letter-spacing: -0.01em;
}

body .elementor .s-bl-k {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(28, 184, 212, 0.85);
}

body .elementor .s-bl p {
	margin: 0 0 15px;
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.74);
}

body .elementor .s-bl p:last-child { margin-bottom: 0; }
.s-bl strong { color: #ffffff; font-weight: 600; }

.s-bl a {
	color: var(--BrandCyan, #1cb8d4);
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 184, 212, 0.35);
}

.s-bl a:hover { border-bottom-color: var(--BrandCyan, #1cb8d4); }

/* --- tabla del plan de estudios ---
   Con `display: block` y scroll propio: una tabla de tres columnas no entra en
   375px y forzarla parte las palabras letra por letra. Scrollea sola, sin
   arrastrar la página con ella. */
/* La tabla vive ahora dentro de un widget `text-editor`, para que las celdas
   se editen desde el panel. Ese widget no se estira solo: sin esto la tabla se
   encoge al ancho de su contenido y queda a media columna. */
body .elementor .elementor-widget-text-editor,
body .elementor .elementor-widget-text-editor > .elementor-widget-container,
body .elementor .elementor-widget-text-editor .s-tabla {
	width: 100%;
}

/* EL PREFIJO ES LO QUE HACE QUE EL `padding: 0` FUNCIONE.
   Todo contenedor atómico de Elementor arrastra
   `.elementor .e-flexbox-base { padding: 10px }`, que es (0,2,0). Escrito como
   `.s-tabla-wrap` esto era (0,1,0) y perdía; con el prefijo es (0,2,1) y gana.
   Es el mismo relleno de 10px que aparece por todos lados en este sitio: sale
   de esa regla, no de un ajuste que alguien haya puesto. */
body .elementor .s-tabla-wrap {
	margin-top: 26px;
	overflow-x: auto;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	/* SIN RELLENO: la tabla tiene que TOCAR el borde del recuadro.
	   Con los 10px la tabla quedaba flotando adentro de la caja —11px de aire
	   por lado—, así que la banda del encabezado y los filetes de las filas
	   morían antes de llegar al borde redondeado y se leían como líneas
	   cortadas. El recuadro y la tabla parecían dos cosas apiladas en vez de
	   una sola. A cero, el borde redondeado ES el borde de la tabla. */
	padding: 0;
}

/* La nota que va debajo de la tabla —el total de horas del programa— quedaba
   pegada al recuadro, a cero píxeles: el `margin-top` de arriba no tiene
   contraparte abajo, y los widgets de Elementor vienen con `margin: 0`. En un
   contenedor flex los márgenes tampoco colapsan, así que no hay nada que
   herede el hueco.

   Los 26px son los mismos de `margin-top`: la tabla queda con el mismo aire
   arriba y abajo, que es lo que se ve como «un bloque» y no como dos cosas
   apiladas. El `:not(:last-child)` es para que, si algún día una tabla cierra
   el bloque, no arrastre un hueco de más al final. Va por posición y no por
   la etiqueta del hermano, que en estas tres páginas es `p` en unas y `span`
   en otras según lleve lista o no. */
body .elementor .s-tabla-wrap:not(:last-child) {
	margin-bottom: 26px;
}

.s-tabla {
	width: 100%;
	/* El piso existe por la columna de descripciones: sin él, en móvil esa
	   columna se aplasta y queda una palabra por renglón. El precio es que la
	   tabla no entra en 375px y hay que deslizarla, para lo cual `.s-tabla-wrap`
	   tiene `overflow-x: auto`.

	   Estuvo sacado un rato, mientras las tablas llevaban materia y carga
	   horaria: con dos datos cortos no protegía nada y sólo obligaba a deslizar
	   de más. Volvieron las descripciones, vuelve el piso. */
	min-width: 520px;
	border-collapse: collapse;
	font-size: 15.5px;
	/* `reset.css` le pone `margin-block-end: 15px` a toda <table>. Con el
	   recuadro pegado al borde, esos 15px eran una franja vacía entre la última
	   fila y el filo de abajo: la caja cerraba más abajo de donde terminaba la
	   tabla y se notaba como un escalón. Los cuatro lados a cero. */
	margin: 0;
}

.s-tabla th,
.s-tabla td {
	padding: 13px 18px;
	text-align: start;
	/* El `border: 0` NO es redundante y sacarlo rompe la tabla.
	   `reset.css` de Elementor trae `table td, table th { border: 1px solid
	   rgba(128,128,128,.5) }`. Acá se declaraba sólo el filete de abajo, así
	   que los otros tres lados se quedaban con ese gris de fábrica: la tabla
	   salía cuadriculada, con un doble filete en cada fila y unas líneas
	   verticales que no pinta nadie del sitio.
	   Apagar los cuatro y volver a poner el único que va. */
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.s-tabla thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	background-color: rgba(255, 255, 255, 0.03);
}

/* FUERA EL RAYADO CEBRA. Es la tercera cosa que mete `reset.css` de Elementor
   en esta tabla sin que nadie la pida:

     table tbody > tr:nth-child(2n+1) > td { background-color: rgba(128,128,128,.07) }

   Un gris neutro que no pertenece a la paleta, pintando una fila sí y otra no.
   Sumado a los filetes propios, cada fila parecía tener un borde distinto y el
   conjunto se veía sucio.
   El sistema del sitio separa filas con filete, no con bandas —igual que las
   tarjetas de curso—, así que se apaga y listo.

   OJO CON LA ESPECIFICIDAD: la regla del reset es (0,1,4) por el `:nth-child`.
   `.s-tabla tbody td` es (0,1,3) y PIERDE. Con el prefijo son (0,2,3), que
   gana porque manda la segunda columna. */
body .elementor .s-tabla tbody > tr > td,
body .elementor .s-tabla tbody > tr > th {
	background-color: transparent;
}

.s-tabla tbody tr:last-child td { border-bottom: 0; }

/* El hover va después y con el mismo prefijo, si no lo tapa la regla de arriba. */
body .elementor .s-tabla tbody tr:hover > td { background-color: rgba(255, 255, 255, 0.03); }
.s-tabla td:first-child { color: #ffffff; }
.s-tabla td { color: rgba(255, 255, 255, 0.72); }

/* EN EL TELÉFONO LA TABLA DEJA DE SER UNA TABLA.
   Dos columnas de texto no entran en 375px: con el piso de 520 había que
   deslizar de costado para leer la descripción —y volver— materia por materia,
   y sin el piso la primera columna se aplasta a una palabra por renglón. Las
   dos salidas son malas porque el problema no es el ancho: es que una tabla de
   dos columnas es, en realidad, una lista de términos con su definición, y en
   una pantalla angosta se lee mejor apilada.

   Así que cada fila pasa a ser una tarjeta: la asignatura arriba, en blanco y
   con más peso, y la descripción debajo. Nada de scroll lateral y nada de
   texto aplastado, con el mismo HTML.

   El encabezado se oculta porque «Asignatura» y «Qué se ve» rotulan columnas
   que ya no existen; apilado, cada dato se explica solo por su posición y su
   estilo. Al pasar a `display: block` la tabla deja de anunciarse como tabla
   a los lectores de pantalla, y está bien: apilada ES una lista, y se lee en
   el mismo orden en que está escrita en el HTML.

   Los selectores van prefijados con `body .elementor` para ganarle a
   `body .elementor .s-tabla tbody > tr > td`, que es (0,2,3). */
@media (max-width: 767px) {
	body .elementor .s-tabla {
		min-width: 0;
	}

	body .elementor .s-tabla thead {
		display: none;
	}

	body .elementor .s-tabla,
	body .elementor .s-tabla tbody,
	body .elementor .s-tabla tbody > tr,
	body .elementor .s-tabla tbody > tr > td {
		display: block;
		width: 100%;
	}

	/* El filete pasa de la celda a la fila: dentro de una tarjeta no va, entre
	   una tarjeta y la siguiente sí. */
	body .elementor .s-tabla tbody > tr {
		padding: 15px 18px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}

	body .elementor .s-tabla tbody > tr:last-child {
		border-bottom: 0;
	}

	body .elementor .s-tabla tbody > tr > td {
		padding: 0;
		border: 0;
	}

	/* 17px es el mismo tamaño que `.s-contacto-v`, el dato destacado de la lista
	   apilada de la página de contacto: apilar un término sobre su definición ya
	   está resuelto en el sitio y no hacía falta inventar otra escala. En la
	   tabla de escritorio alcanzaba con el color, porque la columna separaba los
	   dos datos; apilados, sin salto de tamaño, el nombre de la materia y su
	   explicación se leen como un mismo párrafo. La descripción se queda en
	   15,5: es contenido, no una nota al pie. */
	body .elementor .s-tabla tbody > tr > td:first-child {
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.35;
	}
}

/* --- requisitos a dos columnas --- */
body .elementor .s-req {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 26px;
}

body .elementor .s-req-col {
	padding: 26px 24px;
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

body .elementor .s-req-col h3 {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.25;
}

.s-req-col ul { margin: 0; padding: 0; list-style: none; }

.s-req-col li {
	position: relative;
	margin-bottom: 11px;
	padding-inline-start: 24px;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.74);
}

.s-req-col li:last-child { margin-bottom: 0; }

.s-req-col li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(28, 184, 212, 0.75);
}

/* --- preguntas frecuentes ---
   `<details>` nativo: abre, cierra y es accesible sin una línea de JavaScript.
   Cualquier acordeón hecho a mano acá sería más peso para hacer lo mismo peor.
   Va marcado con FAQPage, así que estas preguntas pueden salir desplegables en
   el propio resultado de Google. */
/* El FAQ pasó a `nested-accordion`, que es el widget de Elementor que sí se
   edita desde el panel. Renderiza <details>/<summary> igual que el markup
   propio que había, así que el aspecto se conserva sumando su contenedor
   `.e-n-accordion` a los mismos selectores; lo único que no viene solo es el
   ancho y el relleno, que el widget trae de fábrica y acá se apagan. */
.s-faq,
body .elementor .e-n-accordion {
	margin-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* El widget dibuja un recuadro de 1px gris claro (#D5D8DC) alrededor del
   acordeón, de cada pregunta y de cada respuesta. Sobre fondo claro se lee
   como una tarjeta; sobre el navy del sitio quedaban cinco cajas grises
   flotando. Se apagan todos y queda sólo el filete de abajo de cada
   `details`, que es el que separa una pregunta de la siguiente. */
body .elementor .e-n-accordion,
body .elementor .e-n-accordion-item,
body .elementor .e-n-accordion summary,
body .elementor .e-n-accordion .s-faq-cuerpo {
	width: 100%;
	max-width: none;
	background: none;
	border: 0;
	border-radius: 0;
}

body .elementor .e-n-accordion-item { padding: 0; }

.s-faq details,
body .elementor .e-n-accordion .e-n-accordion-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.s-faq summary,
body .elementor .e-n-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.25s ease;
}

.s-faq summary::-webkit-details-marker,
body .elementor .e-n-accordion summary::-webkit-details-marker { display: none; }

/* --- lo que el widget trae de fábrica y había que apagar ---
   El `nested-accordion` está pensado para fondo claro y para usarse tal cual
   sale. Acá se veía mal por tres cosas que no están a la vista hasta que se
   miden:

   1. El widget pone SU PROPIO ícono dentro del summary, al principio. Sumado a
      la flecha que dibuja `summary::after` más abajo, el summary quedaba con
      TRES hijos flex y `space-between` los repartía ícono / título / flecha:
      por eso la pregunta aparecía CENTRADA en vez de alineada a la izquierda.
      Se apaga el de ellos y queda la flecha de la casa.

   2. El texto de la pregunta vive en un `<span>` propio del widget, con el
      color (#1F2124) y la tipografía de fabrica. Sobre el navy del sitio eso
      es gris oscuro sobre negro: se leía apenas. Lo que se declara en el
      `summary` no lo alcanza, porque el color lo pone el hijo.

   3. El cuerpo de la respuesta es un contenedor atómico, así que arrastra el
      `padding: 10px` de la clase base y la respuesta quedaba corrida 10px
      respecto de la pregunta. */
body .elementor .e-n-accordion-item-title-icon { display: none; }

body .elementor .e-n-accordion-item-title-header {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--HeadingFont, Montserrat), sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
	transition: color 0.25s ease;
}

body .elementor .e-n-accordion summary:hover .e-n-accordion-item-title-header,
body .elementor .e-n-accordion details[open] .e-n-accordion-item-title-header {
	color: var(--BrandCyan, #1cb8d4);
}

.s-faq summary:hover,
body .elementor .e-n-accordion summary:hover { color: var(--BrandCyan, #1cb8d4); }

.s-faq summary::after,
body .elementor .e-n-accordion summary::after {
	content: "";
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border-inline-end: 2px solid var(--BrandCyan, #1cb8d4);
	border-block-end: 2px solid var(--BrandCyan, #1cb8d4);
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform 0.25s ease;
}

.s-faq details[open] summary::after,
body .elementor .e-n-accordion details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.s-faq details > div,
body .elementor .e-n-accordion .s-faq-cuerpo {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0 0 22px;
	max-width: 72ch;
	font-size: 16px;
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.72);
}

/* Va por `p` Y por `.e-paragraph-base` a propósito: el widget de párrafo de
   Elementor emite `<span>` en vez de `<p>` cuando el texto lleva una lista
   —con `p`, el parser cierra el párrafo al ver el `<ul>` y la lista se escapa
   del widget—, y esos `span` quedaban sin el margen de 12px, pegados al
   párrafo siguiente. La clase la llevan las dos etiquetas, así que alcanza a
   los dos casos sin repetir la declaración. */
.s-faq details > div p,
.s-faq details > div .e-paragraph-base,
body .elementor .e-n-accordion .s-faq-cuerpo p,
body .elementor .e-n-accordion .s-faq-cuerpo .e-paragraph-base { margin: 0 0 12px; font-size: inherit; }
.s-faq details > div p:last-child,
.s-faq details > div .e-paragraph-base:last-child,
body .elementor .e-n-accordion .s-faq-cuerpo p:last-child,
body .elementor .e-n-accordion .s-faq-cuerpo .e-paragraph-base:last-child { margin-bottom: 0; }

/* --- reseñas dentro de la página de curso --- */
.s-bl .s-curso-rating { margin: 26px 0 30px; }

/* La columna del curso mide 1220 y con el mínimo de 280 de la home entran
   cuatro tarjetas de 293: demasiado angostas para un texto de trescientos y
   pico de caracteres, que se estira a 593 de alto. Con 330 entran tres, de
   casi 400, que es la proporción que ya tienen en la home. */
.s-bl .wf-rv-list {
	margin-top: 4px;
	/* El `min()` no es adorno: en un teléfono la columna mide 319 y un mínimo
	   de 330 pelado arma una pista de 330 que se sale del contenedor. Como html
	   tiene `overflow-x: clip`, no aparece barra de desplazamiento — la tarjeta
	   simplemente se corta y no se nota hasta que se mira de cerca. */
	grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}

/* --- sección de consulta ---
   Rompe la columna y ocupa el ancho de la ventana, en blanco: título,
   bajada y formulario, todo junto adentro. No es sólo un fondo: es lo que
   separa la parte de LEER —hero, plan, requisitos, reseñas, FAQ, todo navy—
   de la parte de HACER. Quien llega hasta acá ya decidió que le interesa, y
   el cambio de fondo le avisa que la página cambió de modo.

   La caja tenue de antes (blanco al 3% con borde al 8%) no alcanzaba: los
   campos eran casi del mismo color que la página y había que buscarlos. */
body .elementor .s-consulta {
	width: 100vw;
	/* El 50% es del ancho del contenedor y el 50vw de la ventana: la diferencia
	   es exactamente lo que hay que retroceder de cada lado para llegar al
	   borde, sin necesidad de saber a qué profundidad está anidado el bloque.
	   El sobrante del ancho de la barra de desplazamiento lo recorta el
	   `overflow-x: clip` de html (sección 15). */
	margin-inline: calc(50% - 50vw);
	/* El contenido vuelve a la columna del sitio. Es el mismo cálculo de
	   `.s-caja`, pero contra la ventana en vez de contra el padre, porque acá
	   el padre ya mide 100vw. */
	padding: 64px max(var(--wf-aire), calc((100vw - var(--wf-ancho)) / 2)) 72px;
	/* Gris y no blanco puro. Un bloque de 1.870px de alto en #FFFFFF, llegando
	   desde el navy del resto de la página, encandila: no es un problema de
	   relación de contraste sino de cuánta luz emite de golpe una superficie
	   tan grande. Este gris emite un 12% menos y sigue leyéndose como sección
	   clara. Los campos quedan en blanco, así que ahora se despegan del fondo
	   en vez de confundirse con él.
	   El valor está en el panel (variable `LightSurface`): si hay que graduarlo
	   se cambia ahí, sin tocar este archivo. */
	background-color: var(--LightSurface, #edf1f5);
}

/* EL PREFIJO `body .elementor` ES OBLIGATORIO ACÁ, y esto costó un texto
   invisible en producción.
   La versión anterior era `.s-bl.s-consulta p`, (0,2,1), con un comentario que
   explicaba que las dos clases ganaban. Ganaban a `.s-bl p`, sí, pero el que
   manda de verdad es `body .elementor .s-bl p`, que es (0,2,2) y pinta el
   párrafo de blanco al 74% para las secciones oscuras. Resultado: la bajada
   del formulario era BLANCA SOBRE BLANCO, invisible, y sólo se notaba como un
   hueco raro entre el título y el primer campo.
   Con el prefijo son (0,4,1) y no hay empate posible. Es la regla §3 del
   archivo: lo que pisa a Elementor va prefijado, siempre. */
body .elementor .s-bl.s-consulta h2 { color: var(--InkOnLight, #0f1b2a); }
body .elementor .s-bl.s-consulta p { color: #475569; }
body .elementor .s-bl.s-consulta strong { color: var(--InkOnLight, #0f1b2a); }

/* El turquesa de marca sobre claro se lee mal: es un color pensado para
   brillar sobre navy. El volante y los enlaces bajan al mismo tono oscurecido,
   que sigue siendo el mismo color.
   El volante estaba en #0D7D93, que sobre blanco daba 4.80:1 —apenas por
   encima del mínimo— y sobre el gris nuevo se caía a 4.23. Pasa a BrandDeep,
   el mismo que ya usan los enlaces de este bloque: 4.97:1 y un color menos
   que mantener. */
body .elementor .s-bl.s-consulta .s-bl-k { color: var(--BrandDeep, #0b7186); }
body .elementor .s-bl.s-consulta a {
	color: var(--BrandDeep, #0b7186);
	border-bottom-color: rgba(11, 113, 134, 0.35);
}
body .elementor .s-bl.s-consulta a:hover { border-bottom-color: var(--BrandDeep, #0b7186); }

.s-curso-form {
	margin-top: 30px;

	/* --- el mismo formulario, en claro --- */
	--ff-etiqueta: #1e293b;
	/* El borde era #CBD5E1 y daba 1.48:1 contra el blanco del campo: el campo
	   no tenía contorno visible, se adivinaba. Con la sección en gris el
	   problema se notaba más todavía. TextMuted llega a 3.04:1, que es el
	   mínimo que pide la norma para el contorno de un control. */
	--ff-campo-borde: var(--TextMuted, #8296ad);
	--ff-campo-fondo: #ffffff;
	--ff-campo-texto: var(--InkOnLight, #0f1b2a);
	--ff-campo-ph: var(--TextSoft, #94a3b8);
	--ff-campo-foco: #ffffff;
	--ff-lista-fondo: #ffffff;
	--ff-lista-texto: var(--InkOnLight, #0f1b2a);
	/* #64748B daba 4.76:1 sobre blanco —al filo— y 4.19 sobre el gris nuevo,
	   por debajo del mínimo. Y es texto de 13,5px, donde el mínimo no se
	   negocia. Al mismo gris de la bajada: 6.68:1. */
	--ff-ayuda: #475569;
	--ff-op-borde: #d8e0ea;
	--ff-op-fondo: #f7fafc;
	--ff-op-texto: #334155;
	--ff-op-hover: #edf6f9;
	--ff-op-on-texto: var(--InkOnLight, #0f1b2a);
	--ff-radio-borde: var(--TextSoft, #94a3b8);
	--ff-condicion: rgba(28, 184, 212, 0.7);
	/* Sobre blanco el ámbar claro no se lee. Sigue sin ser rojo, que es lo que
	   importaba: el rojo queda reservado para los errores de verdad. */
	--ff-obligatorio: #b45309;
	--ff-error: #b42318;
	--ff-exito-texto: var(--InkOnLight, #0f1b2a);
}

/* --- cierre --- */
body .elementor .s-curso-cta {
	align-items: flex-start;
	gap: 16px;
	padding-block: 64px 96px !important;
}

body .elementor .s-curso-cta h2 {
	margin: 0;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.15;
}

/* --- fondo del cierre ---
   Antes el cierre se separaba del bloque de arriba con una línea de 1px. Con
   la foto detrás esa línea sobra y encima se lee como un corte: el cambio de
   fondo ya marca dónde empieza la sección.

   El mismo cielo que cierra la home, y por la misma razón: el cierre es un
   solo componente repetido en todas las páginas y tiene que leerse igual en
   todas. La foto viaja con su velo en la misma propiedad —degradado primero,
   imagen después— así no hace falta una capa aparte encima.

   El último tramo del degradado llega opaco al color del pie: si la foto
   termina de golpe, el borde superior del pie se lee como una línea colgada
   debajo de la imagen. Así la foto se disuelve en el pie y no hay corte.

   Va después de las reglas que pintan el fondo de cada página: empatan en
   especificidad y gana la última. */
body .elementor .s-nosotros-cta,
body .elementor .s-cursos-cta,
body .elementor .s-ext-cta,
body .elementor .s-curso-cta {
	background-color: var(--Navy, #050a12);
	background-image:
		linear-gradient(180deg,
			rgba(5, 10, 18, 0.86) 0%,
			rgba(5, 10, 18, 0.92) 62%,
			var(--Navy, #050a12) 100%),
		url("/wp-content/uploads/2026/08/fondo-vuelo-de-bautismo.webp");
	background-size: cover;
	background-position: center left;
	background-repeat: no-repeat;
}

/* --- el hilo claro que aparece entre el cierre y el pie ---
   El cierre y el pie son exactamente del mismo color (#050a12), y sin embargo
   se ve una línea más clara justo donde se tocan. No es un borde ni un
   margen: es dónde cae la frontera.

   La altura del cierre termina en una fracción de píxel —medido en Nosotros,
   y = 5291,547—, así que ninguna de las dos cajas llena esa fila entera. El
   navegador pinta el cierre al 55 %, el pie al 45 %, y en el 25 % que queda
   sigue asomando el fondo del <body>, que es #0a0f16 y es más claro que los
   dos. De ahí el hilo.

   Por eso pasa sólo acá y no en las otras costuras de la página: es la única
   frontera entre dos cajas del mismo color sobre un fondo de otro color. Donde
   la caja de arriba ya es #0a0f16 —contacto, privacidad, cookies— lo que asoma
   es el mismo color y no se ve nada.

   Apilar capas del mismo color en esa fila NO la cierra, y conviene tenerlo
   claro porque es contraintuitivo: dos coberturas parciales no se suman, se
   componen —queda `1-(1-a)(1-b)`—. Con la fila repartida 55/45 siempre sobra
   un resto del fondo asomando, y agregar una sombra de 1px lo baja del 25 % al
   14 %: se ve más finito, pero se sigue viendo. Una sombra exterior encima
   arranca justo en la frontera fraccionaria, así que nace con el mismo
   problema que vino a tapar.

   Lo que sí la cierra es una sola capa opaca que **cruce** la frontera: una
   banda que empieza dos píxeles arriba y termina tres abajo. Esa fila queda
   cubierta entera de una sola pintada, sin bordes que suavizar en el medio, y
   el pie después pinta encima del mismo color. La banda es del color con el
   que termina el degradado, así que sobre la foto no se nota.

   Va en el cierre y no en el pie a propósito: las páginas legales terminan en
   un bloque #0a0f16 y ahí una banda de #050a12 dibujaría el hilo al revés.
   `.s-cta` es el cierre del home, que pinta su fondo desde el panel de
   Elementor y no desde acá, pero tiene la misma costura. */
body .elementor .s-cta,
body .elementor .s-nosotros-cta,
body .elementor .s-cursos-cta,
body .elementor .s-ext-cta,
body .elementor .s-curso-cta {
	position: relative;
}

/* `left/right: 0` mide contra la caja de relleno, que acá es el ancho entero:
   el `padding-inline` del cierre no la encoge. La banda cruza de lado a lado. */
body .elementor .s-cta::after,
body .elementor .s-nosotros-cta::after,
body .elementor .s-cursos-cta::after,
body .elementor .s-ext-cta::after,
body .elementor .s-curso-cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 5px;
	background-color: var(--Navy, #050a12);
	pointer-events: none;
}

@media (max-width: 767px) {
	body .elementor .s-curso-hero { padding-block: 112px 0 !important; }
	body .elementor .s-curso-hero > h1 { max-width: none; }
	.s-curso-botones > * { flex: 1 1 100%; justify-content: center; }
	body .elementor .s-curso-fichas{ grid-template-columns: repeat(2, 1fr); gap: 24px 18px; margin-top: 34px; }
	body .elementor .s-curso-cuerpo { gap: 64px; padding-block: 60px 64px !important; }
	body .elementor .s-curso-cuerpo:has(> .s-consulta:last-child) { padding-bottom: 0 !important; }
	body .elementor .s-consulta { padding-block: 44px 50px; }
	.s-curso-form { margin-top: 24px; }
	.s-faq summary,
	body .elementor .e-n-accordion summary { font-size: 16px; }
}

/* ---------- 12. PÁGINAS LEGALES ----------
   Privacidad y cookies. Son las dos páginas que nadie lee por gusto y que
   todos buscan con una pregunta concreta ya en la cabeza —«qué hacen con mi
   teléfono», «cómo pido que me borren»—, así que están maquetadas para
   escanear: columna angosta, títulos que se ven de lejos y párrafos cortos.

   No llevan hero grande ni imágenes: cualquier adorno acá es ruido entre el
   visitante y el dato que vino a buscar. */
body .elementor .s-legal-hero,
body .elementor .s-legal-cuerpo {
	background-color: var(--PageBg, #0a0f16);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	color: #ffffff;
}

body .elementor .s-legal-hero {
	gap: 14px;
	padding-block: 128px 0 !important;
}

.s-legal-hero > [data-id="priv-kicker"],
.s-legal-hero > [data-id="cook-kicker"] {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--BrandCyan, #1cb8d4);
}

body .elementor .s-legal-hero > h1 {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

body .elementor .s-legal-cuerpo {
	gap: 0;
	padding-block: 46px 96px !important;
}

/* 68ch y no el ancho del sitio: una línea de 1220px de texto corrido obliga a
   buscar dónde sigue cada renglón, y en un texto legal eso es exactamente lo
   que hace que se deje de leer a la mitad. */
.s-prosa {
	max-width: 68ch;
	font-size: 16.5px;
	line-height: 1.72;
	color: rgba(255, 255, 255, 0.76);
}

.s-prosa .s-legal-fecha {
	margin: 0 0 40px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.45);
}

body .elementor .s-prosa h2 {
	margin: 46px 0 14px;
	font-size: clamp(21px, 2.1vw, 26px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #ffffff;
}

body .elementor .s-prosa h2:first-of-type { margin-top: 0; }

body .elementor .s-prosa h3 {
	margin: 30px 0 10px;
	font-size: 17px;
	line-height: 1.35;
	color: #ffffff;
}

body .elementor .s-prosa p { margin: 0 0 16px; font-size: inherit; line-height: inherit; }
.s-prosa ul { margin: 0 0 18px; padding-inline-start: 22px; }
.s-prosa li { margin-bottom: 9px; }
.s-prosa strong { color: #ffffff; font-weight: 600; }

.s-prosa a {
	color: var(--BrandCyan, #1cb8d4);
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 184, 212, 0.35);
}

.s-prosa a:hover { border-bottom-color: var(--BrandCyan, #1cb8d4); }

/* La leyenda que la ley obliga a reproducir. Va en cita para que se lea como
   lo que es —texto de la norma, no nuestro— y no se confunda con el resto. */
body .elementor .s-legal-cita {
	margin: 0 0 18px;
	padding: 18px 22px;
	border-inline-start: 3px solid rgba(28, 184, 212, 0.5);
	border-radius: 0 12px 12px 0;
	background-color: rgba(255, 255, 255, 0.03);
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.68);
}

/* Los datos de contacto para ejercer derechos: es la parte accionable de toda
   la página y tiene que encontrarse sin leer el resto. */
body .elementor .s-legal-caja {
	margin: 22px 0 8px;
	padding: 22px 24px;
	border: 1px solid rgba(28, 184, 212, 0.3);
	border-radius: 14px;
	background-color: rgba(28, 184, 212, 0.06);
}

.s-legal-caja p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	body .elementor .s-legal-hero { padding-block: 108px 0 !important; }
	body .elementor .s-legal-hero > h1 { max-width: none; }
	body .elementor .s-legal-cuerpo { padding-block: 34px 72px !important; }
	.s-prosa { font-size: 16px; }
}

/* ---------- 13. 404 Y BÚSQUEDA ----------
   Las dos únicas pantallas del sitio que no salen de Elementor: las arma el
   tema hijo en template-parts/. No usan la caja calculada de la sección 0
   porque no son secciones a sangre, así que se centran solas con la misma
   medida. */
/* El body se pinta oscuro para todo el sitio. No es sólo para el 404: cada vez
   que entre dos secciones queda un margen sin fondo propio, lo que se ve es el
   body, y con el blanco de fábrica aparece una franja clara en medio de una
   página negra. Ya pasó una vez entre el cuerpo y el cierre de /cursos. */
body { background-color: var(--PageBg, #0a0f16); }

/* Hello Elementor le pone `max-width: 1140px` a `.site-main` en cuanto la
   página no la maqueta Elementor, que es justo el caso de estas dos. Sin sacar
   ese tope, el fondo oscuro queda como una columna centrada con dos franjas
   claras a los lados. */
body .s-404 {
	max-width: none;
	background-color: var(--PageBg, #0a0f16);
	color: #ffffff;
	padding-inline: var(--wf-aire);
}

.s-404-caja {
	max-width: var(--wf-ancho);
	margin: 0 auto;
	padding-block: 132px 110px;
}

.s-404-k {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--BrandCyan, #1cb8d4);
}

body .elementor .s-404-caja h1,
.s-404-caja h1 {
	margin: 0 0 18px;
	max-width: 18ch;
	font-size: clamp(34px, 4.6vw, 58px);
	line-height: 1.06;
	letter-spacing: -0.01em;
}

.s-404-p {
	margin: 0 0 44px;
	max-width: 60ch;
	font-size: 17.5px;
	line-height: 1.66;
	color: rgba(255, 255, 255, 0.72);
}

.s-404-rutas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin-bottom: 40px;
}

.s-404-ruta {
	display: block;
	padding: 24px 24px 22px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.03);
	text-decoration: none;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.s-404-ruta:hover {
	border-color: rgba(28, 184, 212, 0.5);
	transform: translateY(-3px);
}

.s-404-ruta-t {
	display: block;
	margin-bottom: 7px;
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
}

.s-404-ruta-d {
	display: block;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
}

.s-404-buscar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 520px;
	margin-bottom: 34px;
}

.s-404-buscar input[type="search"] {
	flex: 1 1 240px;
	min-width: 0;
	padding: 13px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.04);
	color: #ffffff;
	font-size: 15px;
}

.s-404-buscar input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.34); }

.s-404-buscar input[type="search"]:focus {
	outline: none;
	border-color: var(--BrandCyan, #1cb8d4);
}

.s-404-buscar button {
	flex: 0 0 auto;
	padding: 13px 26px;
	border: 0;
	border-radius: 10px;
	background-color: var(--BrandCyan, #1cb8d4);
	color: var(--OnBrand, #042028);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.s-404-ayuda {
	margin: 0;
	font-size: 15.5px;
	color: rgba(255, 255, 255, 0.56);
}

.s-404-ayuda a {
	color: var(--BrandCyan, #1cb8d4);
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 184, 212, 0.35);
}

/* --- resultados de búsqueda --- */
.s-busq { margin-bottom: 44px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

.s-busq-r {
	padding: 22px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.s-busq-r a {
	font-size: 19px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
}

.s-busq-r a:hover { color: var(--BrandCyan, #1cb8d4); }

.s-busq-r p {
	margin: 7px 0 0;
	max-width: 72ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
}

.s-busq-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 44px;
}

.s-busq-nav a {
	color: var(--BrandCyan, #1cb8d4);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}

@media (max-width: 767px) {
	.s-404-caja { padding-block: 108px 80px; }
	.s-404-caja h1 { max-width: none; }
	.s-404-buscar button { flex: 1 1 100%; }
}

/* ============================================================
   RESPONSIVE — ajustes que no se pueden declarar por variante
   de Elementor (grillas, pseudo-elementos, el header).
   ============================================================ */

/* Red de seguridad: ningún desborde horizontal en ningún ancho.

   OJO: tiene que ser `clip`, no `hidden`. Con `overflow-x: hidden` el eje Y
   computa a `auto`, html y body pasan a ser contenedores de scroll propios y
   TODOS los `position: sticky` del sitio dejan de frenar: la ventanilla, la
   columna del proceso, la de reseñas y la de salida laboral se iban de largo.
   `clip` recorta igual pero no crea contenedor de scroll, así que el sticky
   sigue anclado al viewport. */
html, body { overflow-x: clip; max-width: 100%; }

/* ---------- tablet y abajo ---------- */
@media (max-width: 1024px) {

	/* La galería pasa de 4 a 2 columnas y todas las celdas ocupan 1x1:
	   con 2 columnas, una celda de 2 de ancho se comería la fila entera. */
	.s-sede-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-rows: 170px !important;
	}
	.s-sede-grid > * {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
	}
	.s-gal-cert { grid-column: span 2 !important; grid-row: span 2 !important; }

	/* Las columnas fijas del proceso y las reseñas dejan de ser sticky:
	   en pantallas bajas quedaban clavadas tapando el contenido. */
	.s-proceso-l,
	.s-res-izq,
	.s-salida-l {
		position: static !important;
		max-width: 100% !important;
	}

	/* --- HEADER EN MODO HAMBURGUESA (1024px es donde Elementor cambia) ---

	   El contenedor del nav conserva `flex: 1 1 0` aunque el menú ya sea un
	   icono, así que se quedaba con TODO el ancho sobrante y empujaba el
	   botón de WhatsApp fuera de la fila: quedaba de 28px con el texto
	   desbordado por encima del hamburguesa. Que ocupe lo que mide el icono
	   y que el botón se apoye contra la derecha. */
	body .elementor .s-wf-nav {
		/* El ancho declarado en Elementor es 100%: con flex-basis auto eso se
		   resuelve contra la fila entera y el contenedor se queda igual con
		   todo el sobrante aunque adentro sólo haya un icono de 40px. */
		flex: 0 0 auto !important;
		width: auto !important;
		order: 3;
	}

	/* El botón pasa a icono. Al lado del hamburguesa la palabra WHATSAPP no
	   entra en ningún teléfono, y la acción ya está rotulada en el hero y en
	   el pie. El texto sigue en el DOM para lectores de pantalla. */
	body .elementor .s-wf-header-cta {
		order: 2;
		position: relative;
		margin-inline-start: auto;
		/* Elementor le pone flex-basis 0: sin tocarlo el ancho declarado no
		   se aplica nunca y el botón queda de 0px con el fondo desbordado. */
		flex: 0 0 40px !important;
		width: 40px !important;
		height: 40px !important;
		min-width: 0 !important;
		padding: 0 !important;
		border-radius: 12px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 21px 21px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23042028'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E");
	}

	.s-wf-header-cta-t {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		white-space: nowrap;
		clip-path: inset(50%);
	}

	/* El hamburguesa venía con el gris por defecto de Elementor (#33373D)
	   sobre la foto del hero: prácticamente invisible contra el cielo. Icono
	   blanco y una pastilla oscura detrás, que es lo único que garantiza
	   contraste sobre una foto que cambia de tono al hacer scroll. */
	body .elementor .s-wf-header .elementor-menu-toggle {
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background-color: rgba(8, 16, 26, 0.55);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	body .elementor .s-wf-header .elementor-menu-toggle svg {
		fill: #ffffff;
	}
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {

	/* Header: el logo baja de tamaño para convivir con el botón de WhatsApp
	   y el hamburguesa. El botón ya es un icono desde 1024px. */
	.s-wf-header-in { gap: 12px !important; }

	/* 159 x 42 también en teléfono: es el mínimo del manual y rige en TODOS los
	   estados. Antes bajaba a 124 x 31 —y con el logo nuevo, más chato, el
	   `object-fit: contain` lo dibujaba a 124 x 32,5—, o sea muy por debajo.
	   Entra bien: a 375px el logo va de 28 a 187 y el botón del menú arranca
	   recién en 255. */
	.s-wf-logo,
	.s-wf-logo-img { width: 159px !important; height: 42px !important; flex: 0 0 159px !important; }

	/* Los dos CTA, a ancho completo. Apilados y midiendo distinto (337 el
	   primero, 306 el segundo) el borde derecho quedaba dentado; encima en
	   393px el primero se partía en dos líneas y el otro no, así que tampoco
	   coincidían de alto.

	   La sangría lateral baja a 16px: con el botón a ancho completo y el texto
	   centrado no se nota, pero es lo que decide dónde parte la línea. Con 34
	   "Reservá tu vuelo de bautismo" se partía hasta en 430px; con 16 entra
	   entero desde 375. Por debajo de eso no hay ancho que alcance. */
	.s-hero-ctas > *,
	.s-cta-btns > * {
		flex: 1 1 100% !important;
		width: 100% !important;
		padding-inline: 16px !important;
	}

	/* Galería a una sola columna. */
	.s-sede-grid {
		grid-template-columns: 1fr !important;
		grid-auto-rows: 190px !important;
	}
	.s-gal-cert { grid-column: span 1 !important; grid-row: span 2 !important; }

	/* El indicador de scroll del hero estorba en pantallas cortas. */
	.s-hero::after { display: none; }

	/* La ventanilla ocupa casi todo el ancho disponible. */
	.s-ventanilla {
		--win-w: 66vw;
		--win-h: 48vh;
		--win-r: 84px;
	}

	/* La franja de datos del hero: dos columnas en vez de cuatro. */
	.s-hero-hud-stats { gap: 18px !important; }
	.s-hero-hud-stats > * { flex: 0 0 calc(50% - 9px) !important; min-width: 0 !important; }

	/* Las fichas de curso y de flota, a una columna con aire propio. */
	.s-cursos-grid,
	.s-flota-aviones,
	.s-porque-grid { gap: 16px !important; }

	/* Los encabezados a dos bloques se apilan: 48px de separación es
	   demasiado aire cuando quedan uno debajo del otro. */
	.s-cursos-head,
	.s-flota-head,
	.s-porque-head,
	.s-sede-head { gap: 20px !important; }

	/* El recorrido de la ventanilla se acorta respecto del escritorio, pero
	   no tanto como para matar la inmersión: el zoom necesita durar. En un
	   teléfono la pantalla es más alta que ancha, así que con `cover` el
	   hueco del PNG se ve más grande y hace falta menos zoom para taparla. */
	.s-ventanilla {
		height: 260vh !important;
		--cab-zoom: 4;
		/* Con el encuadre corregido (ver abajo) el hueco cae en el centro de
		   la caja, así que el zoom tiene que nacer ahí y no en el 51,5%. */
		--cab-x: 50%;
	}

	/* El hueco de la ventanilla NO está en el centro del PNG: su eje cae en el
	   51,5% del ancho de la imagen. En escritorio la caja tiene casi la misma
	   proporción que la foto y el desvío no llega a un píxel, pero en un
	   teléfono `cover` escala por altura y recorta ~1200px de ancho: ese 1,5%
	   se transforma en 23px y la ventana queda corrida a la derecha con el
	   marco cortado. Se compensa moviendo el encuadre. */
	body .elementor .s-win-cabina {
		background-position: 51.9% 50% !important;
	}

	/* Pie centrado. Apilado en una sola columna, todo pegado a la izquierda
	   deja la mitad derecha vacía y se lee como un desalineado. */
	body .elementor .s-wf-footer-cols > *,
	body .elementor .s-wf-footer-cols > * > *,
	body .elementor .s-wf-footer-bar-in,
	body .elementor .s-wf-footer-bar-in > *,
	body .elementor .s-wf-footer-bar-in > * > * {
		text-align: center !important;
		align-items: center !important;
		justify-content: center !important;
	}

	body .elementor .s-wf-footer-bar-in { flex-direction: column !important; }
	body .elementor .s-wf-f-legal { flex-wrap: wrap !important; }

	/* Los rótulos que van al lado de un logo no se parten en dos líneas:
	   centrados, un salto de línea ahí se lee como un error. */
	.s-wf-f-red-t,
	.s-wf-f-credito-t { white-space: nowrap; }

	/* Las dos filas de rótulo+logo ocupan el 100% y el logo tiene un ancho del
	   50%: centrar la fila no servía de nada porque la fila ya era todo el
	   ancho y el par quedaba separado a los extremos. Que cada fila mida lo
	   que mide su contenido y se centre como bloque. */
	body .elementor .s-wf-f-red,
	body .elementor .s-wf-f-credito {
		width: auto !important;
	}

	body .elementor .s-wf-f-red-logo,
	body .elementor .s-wf-f-credito-logo {
		width: auto !important;
		flex: 0 0 auto !important;
	}

	/* Los pasos del plan de vuelo: menos sangría para ganar ancho. El círculo
	   mide igual que en escritorio, así que --plan-x no se toca. */
	.s-proceso-r > * { gap: 16px !important; }

	/* El lightbox necesita más aire para los controles. */
	.wf-lb { padding: 16px; }
	.wf-lb-fig img { max-height: calc(100vh - 190px); }
}

/* Antes había una regla que escondía el botón de WhatsApp por debajo de
   430px, porque con el texto no entraba. Convertido en icono de 40px entra en
   cualquier teléfono, y esconder el CTA principal justo en el ancho más común
   era regalar la conversión. */

/* ---------- 14. HERO Y VENTANILLA: AJUSTE POR TAMAÑO DE PANTALLA ----------

   Cuatro cosas que se veían mal en una notebook de 1920x1200 y que en un
   monitor grande no se notaban. Van juntas porque son el mismo problema de
   fondo: medidas pensadas para una pantalla sola.

   14.1  La tipografía del hero era fija (72px el H1). En un monitor de 3840
         a 150% eso son 72px sobre 2560 de ancho y se ve bien; en 1920 nativo
         es el mismo número sobre la mitad de pantalla, y el hero no entra.
   14.2  El ojo de buey se centraba en 100vh, pero arriba hay una cabecera
         fija de 82px (y la barra de WordPress cuando hay sesión) que tapa esa
         franja: el centro real de lo que se VE está más abajo.
   14.3  El copy sobre el paisaje quedaba ilegible. El velo existía pero era
         flojo justo donde arranca el texto, y el volante en cian sobre
         edificios blancos no llega a ningún contraste decente.
   14.4  El escenario medía 28px menos de cada lado que la pantalla.          */

/* --- 14.1 Tipografía del hero, fluida por ancho Y por alto ---
   El `min()` de adentro es lo importante. Escalar sólo con `vw` arregla las
   pantallas angostas y rompe las bajas: una notebook 1920x900 tiene ancho de
   sobra y nada de alto, y el hero mide 100vh, así que lo que decide si entra
   o no es el alto. Tomando el menor de los dos, manda el que escasea. */
body .elementor .s-hero-h1 {
	/* El término de ancho es agresivo (4.4vw) y el de alto lo frena. Puesto al
	   revés —un vw suave que sirva en escritorio— las tablets caen al piso y
	   el H1 les queda de 32px, que para un título principal es poco. Como el
	   alto pone el techo, el ancho puede permitirse ser generoso. */
	font-size: clamp(32px, min(4.4vw + 4px, 5.6vh), 76px);
	line-height: 1.02;
}

body .elementor .s-hero-sub {
	font-size: clamp(15px, min(0.62vw + 8px, 2.1vh), 20px);
	line-height: 1.62;
}

body .elementor .s-hero-kicker {
	font-size: clamp(11px, 0.3vw + 8px, 14px);
}

/* La sangría de arriba tenía 140px fijos y se comía media pantalla en una
   notebook. El piso son 96px porque la cabecera fija mide 82: por debajo de
   eso el volante se le mete abajo. */
body .elementor .s-hero-body {
	padding-block: clamp(96px, 12vh, 148px) clamp(36px, 6.5vh, 76px) !important;
}

/* La regla de tablet ponía 140px fijos con !important. Se reemplaza por la
   misma fórmula para que no vuelva a ganar por especificidad. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor .s-hero-body {
		padding-block-start: clamp(96px, 12vh, 148px) !important;
	}
}

/* --- 14.2 El ojo de buey se centra en lo que se ve, no en la pantalla ---
   `--wf-hd` lo mide wefly.js (cabecera fija + barra de WordPress si está) y
   lo escribe en <html>. Va como relleno y no como `top`/`height` a propósito:
   el escenario sigue midiendo 100vh y quedando pegado arriba, así que el
   paisaje sigue llegando a sangre; lo único que baja es la caja de contenido,
   que es donde se centra el hueco. La franja de arriba queda detrás de la
   cabecera, que para cuando se llega acá ya es opaca. */
body .elementor .s-win-sticky {
	padding-top: var(--wf-hd, 0px);
}

/* El relleno de arriba alcanza para el copy, que va en flujo, pero NO mueve la
   foto de cabina: una capa absoluta se ancla a la caja de relleno, cuyo borde
   superior sigue estando donde el borde del elemento. O sea que `top: 0` es
   el borde y el relleno se lo saltea. Hay que correr la foto a mano.

   Y se corre HACIÉNDOLA MÁS ALTA, no bajándola. Bajarla con `top` fue el
   primer intento y dejaba la capa 83px corta arriba: mientras la sección entra
   en pantalla —antes de que el escenario se pegue al borde superior— esa
   franja no está tapada por la cabecera, así que se veía una banda del paisaje
   por encima del avión. Estirándola hacia abajo, en cambio, sigue cubriendo
   desde el borde de arriba y lo único que se mueve es su centro, que es lo que
   define dónde cae el ojo de buey: con `cover` el hueco se centra en la caja,
   y la caja ahora termina --wf-hd más abajo. Lo que sobra por abajo se lo come
   el `overflow: hidden` del escenario.

   El paisaje (.s-win-day) NO se toca: tiene que seguir llegando a sangre,
   porque al final del recorrido ocupa la pantalla entera. */
.wf-con-cabina .elementor .s-win-cabina {
	top: 0;
	height: calc(100% + var(--wf-hd, 0px));
}

/* --- 14.3 Contraste del copy sobre el paisaje ---
   Dos velos y no uno. El de la sección da el fundido general hacia abajo; el
   de acá es una mancha suave centrada detrás del bloque de texto, que es lo
   que salva al volante cuando le toca caer sobre un edificio blanco. */
body .elementor .s-win-copy::before {
	content: "";
	position: absolute;
	inset: 52% -6% -6% -6%;
	z-index: -1;
	/* El radio vertical tiene que ser MENOR que la distancia del centro al
	   borde de arriba (64%), y por eso es 58% y no 72%.

	   Con 72% la elipse se salía de la caja por arriba: el borde quedaba al
	   88,9% del radio, donde el degradado todavía vale 0,15 de alfa, y esa
	   caja recortaba de golpe. El resultado era una línea horizontal de unos
	   840px, centrada, cruzando la foto a media pantalla — visible justo ahí
	   porque arriba está el paisaje claro y abajo el velo de la sección.

	   Con 58% la elipse termina DENTRO de la caja, así que en el borde el
	   degradado ya vale 0 y no hay nada que cortar. Los otros tres bordes no
	   necesitan lo mismo: los laterales caen fuera de la pantalla y el de
	   abajo cae bajo el velo de la sección, que ahí ya es opaco. */
	background: radial-gradient(
		62% 58% at 50% 64%,
		rgba(3, 7, 14, 0.92) 0%,
		rgba(3, 7, 14, 0.74) 46%,
		rgba(3, 7, 14, 0) 100%
	);
	opacity: clamp(0, calc((var(--wf-win, 0) - 0.18) / 0.14), 1);
	pointer-events: none;
}

/* El fundido de la sección arranca antes y llega más oscuro.

   Y va con el prefijo `.elementor`, que es lo que hacía que NO se viera nunca.
   Elementor declara sobre todos sus contenedores:

       .e-con::before { content: var(--background-overlay);
                        opacity: var(--overlay-opacity); }

   Eso es (0,1,0), exactamente lo mismo que `.s-win-sticky::before`. Empate de
   especificidad lo rompe el orden de carga, y la hoja de Elementor entra
   después de esta, así que ganaba ella y el velo quedaba en opacidad 0. Con el
   prefijo esto pasa a (0,2,0) y deja de depender del orden.

   La opacidad se repite acá a propósito, aunque ya esté declarada más arriba:
   la de arriba sigue perdiendo el desempate, y una regla que sólo funciona
   porque otra la acompaña es una trampa para el que venga después. */
body .elementor .s-win-sticky::before {
	content: "";
	height: 72%;
	opacity: clamp(0, calc((var(--wf-win, 0) - 0.18) / 0.14), 1);
	background: linear-gradient(
		180deg,
		rgba(5, 10, 18, 0) 0%,
		rgba(5, 10, 18, 0.55) 30%,
		rgba(5, 10, 18, 0.85) 58%,
		var(--Navy, #050a12) 92%
	);
}

/* Mismo motivo: con motion reducido el velo va entero, y también tiene que
   ganarle a `.e-con::before`. */
@media (prefers-reduced-motion: reduce) {
	body .elementor .s-win-sticky::before {
		opacity: 1;
	}
}

/* El cian de marca sobre una foto clara no llega a contraste legible por más
   velo que se le ponga: tiene casi la misma luminosidad que el fondo. Se usa
   una versión muy aclarada, que sigue leyéndose como el mismo color. */
body .elementor .s-win-kick {
	color: #9ee9f8;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* El bloque de la ventanilla usa la MISMA escala tipográfica que el resto de
   la página, no una propia.

   Venía con tipografías fluidas (`clamp` contra el ancho de ventana) mientras
   todas las demás secciones usan la escalera de tres peldaños de Elementor. En
   pantalla grande eso lo dejaba desalineado con todo: 44px de título contra
   los 40 de "Tres licencias", y 19 de bajada contra 17. Se ve enseguida cuando
   las dos secciones quedan una debajo de la otra.

   Los valores son literalmente los de `.s-cursos-*`, breakpoint por
   breakpoint. El volante ya coincidía y por eso no está acá: se le sacó el
   `clamp` y quedan los 13px que pone Elementor.

              escritorio   tablet   móvil
     título       40         30       26
     bajada       17         17       16 */
body .elementor .s-win-h {
	font-size: 40px;
	/* También el interlineado, que es la otra mitad del tamaño: 1,08 y 1,7 son
	   los de `.s-cursos-*`. Dos bloques con la misma letra y distinto
	   interlineado no se leen iguales. */
	line-height: 1.08;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
	body .elementor .s-win-h {
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	body .elementor .s-win-h {
		font-size: 26px;
	}
}

/* El título en DOS líneas, no en tres.
   La caja venía clavada en 680px desde Elementor mientras la tipografía sigue
   creciendo con el ancho hasta 52px. Medido: con 680 el texto salta a tres
   líneas apenas la tipografía pasa de 49,75px, o sea a partir de 1346px de
   ventana — de ahí para arriba quedaba "piloto" solo en el último renglón.
   Con 780 entra en dos hasta el tope de 52px, y sobran 60px de margen para que
   no lo tumbe una diferencia de render entre equipos.

   Va con `.s-win-copy` adelante y no con `!important`: el 680 lo pone
   Elementor con la misma especificidad (0,2,0) desde la hoja de la página,
   que carga DESPUÉS de esta y ganaría el desempate. Con la clase del padre
   esto pasa a (0,3,0) y deja de depender del orden.

   `balance` es lo que reparte parejas las dos líneas: sin eso la primera se
   llena hasta el borde y la segunda queda corta. Un navegador que no lo
   entienda igual muestra dos líneas, sólo que desparejas. */
body .elementor .s-win-copy .s-win-h {
	max-width: 780px;
	text-wrap: balance;
}

/* La separación con el título sube de 16 a 28px. Con el título más chico los
   16px de antes los dejaba pegados: el aire entre dos bloques se lee en
   proporción a la letra, así que achicar una cosa sin abrir la otra hace que
   el conjunto se apriete aunque no se haya tocado. */
body .elementor .s-win-p {
	color: #dde7f3;
	font-size: 17px;
	line-height: 1.7;
	margin-top: 28px;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
	body .elementor .s-win-p {
		font-size: 16px;
		margin-top: 22px;
	}
}

/* --- 14.4 El escenario a sangre ---
   `.s-ventanilla` traía el relleno de fábrica de los contenedores de Elementor
   (10px 28px). Las capas del paisaje y de la cabina son absolutas y se anclan
   a la caja de RELLENO, así que quedaban 28px cortas de cada lado y se veían
   dos franjas negras. El texto no se despeina: `.s-win-copy` tiene sangría
   propia. */
body .elementor .s-ventanilla {
	padding: 0;
}

/* --- 14.5 El hero mide la pantalla que HAY, no la que habría ---
   `100vh` en un teléfono se mide contra la pantalla con la barra de
   direcciones ya retraída, que es más alta que la que se ve al entrar. Medido
   en un 375x812: el hero salía 855 y la barra de datos del pie quedaba 43px
   por debajo del pliegue, invisible hasta que el visitante scrollea.

   `svh` es la unidad que resuelve exactamente esto: la pantalla más chica de
   las dos, o sea la que hay mientras la barra está a la vista. Va detrás de un
   @supports porque en un navegador que no la entienda hay que quedarse con
   `vh`, no con nada.

   El escenario de la ventanilla NO se toca: su recorrido lo calcula el JS
   contra `window.innerHeight`, y mezclar las dos medidas descoordinaría el
   final de la animación. */
@supports (height: 100svh) {
	body .elementor .s-hero {
		height: 100svh;
	}
}

/* --- 14.6 En teléfono el hero crece antes que recortar ---
   Con la altura clavada en una pantalla, lo que no entra se pierde: `.s-hero`
   tiene `overflow: hidden` y la barra de datos del pie quedaba cortada por la
   mitad. Medido en 375x812: el contenido pedía 855.

   Se le saca aire a los rellenos, que era de donde sobraba, pero además la
   altura pasa a ser un MÍNIMO. Así el caso normal entra en una pantalla y el
   caso raro —tipografía grande del sistema, otro idioma, un teléfono muy
   bajo— empuja hacia abajo en vez de cortar. Recortar contenido para respetar
   una medida es al revés: la medida está para el contenido. */
@media (max-width: 767px) {
	body .elementor .s-hero {
		height: auto;
		min-height: 100vh;
	}

	/* La sangría de arriba no es aire decorativo: es lo que separa el texto del
	   avión. La foto de móvil (1084x2560) tiene el avión y la pista en el 30%
	   de arriba y el resto ya viene en negro, pensado justamente para que el
	   copy caiga ahí. Con 84px el volante arrancaba en 110 y el avión termina
	   en ~115, así que se le montaba encima. Empujándolo a ~150 el avión queda
	   limpio y de paso el texto cae sobre la zona oscura, que es donde mejor
	   se lee. */
	body .elementor .s-hero-body {
		padding-block: clamp(120px, 16.4vh, 180px) clamp(12px, 1.8vh, 30px) !important;
	}

	/* Se le saca aire a la barra de datos para compensar lo que bajó el copy y
	   que el conjunto siga entrando en una pantalla: medido en 375x812, con los
	   valores anteriores el pie quedaba 29px por debajo del pliegue. */
	body .elementor .s-hero-hud {
		padding-block: 12px 16px;
	}
}

@supports (height: 100svh) {
	@media (max-width: 767px) {
		body .elementor .s-hero {
			min-height: 100svh;
		}
	}
}

/* --- 14.7 En teléfono el copy baja hasta despejar el avión ---
   La sangría de arriba se medía en `vh`, pero lo que hay que esquivar —el
   avión de la foto— no se mueve con el alto de la pantalla sino con el ANCHO:
   el fondo va en `cover` sobre una imagen de 1084x2560 anclada arriba, así que
   la escala es `vw / 1084` y el avión termina siempre alrededor del 13% de la
   foto, o sea a ~0,307 x vw del borde superior. Con la fórmula en `vh` el
   volante caía justo donde termina el tren de aterrizaje (medido en 412x769:
   avión hasta 126, volante desde 126) y se leía encimado.

   Ahora la sangría sigue al ancho y deja ~40px de aire limpio entre la rueda y
   el volante. El `min()` con `vh` es el freno para la pantalla apaisada, donde
   `30vw` pediría una sangría más alta que la pantalla entera. */
@media (max-width: 767px) {
	/* La foto lleva 190 filas de cielo agregadas arriba (`extender_cielo.py`,
	   extrapolando el degradado que ya traía; la costura mide 1,4 niveles sobre
	   255, o sea invisible). Sin eso el avión no se podía mover: está en el 13%
	   de arriba de la imagen y el fondo va en `cover` anclado arriba, así que
	   por CSS sólo se podía bajar el TEXTO, nunca el avión, que era justo lo
	   que quedaba apretado contra el logo y el menú.

	   El degradado es el mismo de Elementor con las paradas corridas hacia
	   abajo. Son porcentajes del alto de la SECCIÓN, no de la foto: al bajar el
	   avión del 10-17% al 17-24% caía dentro del tramo oscuro y se apagaba. Con
	   las paradas nuevas la ventana clara (0,08-0,18) vuelve a coincidir con el
	   avión y el copy sigue arrancando sobre fondo oscuro. */
	/* La foto y el degradado del móvil los pone Elementor, NO esta hoja.
	   Hubo una época en que se pisaban desde acá, porque la foto de entonces
	   tenía el avión demasiado arriba y hubo que fabricarle cielo. Con la foto
	   nueva —un 9:16 de verdad, con el avión ya en su sitio— eso sobra, y
	   dejarlo era una trampa: cambiar la imagen del móvil en el editor no hacía
	   absolutamente nada, porque esta regla ganaba siempre.

	   Acá queda sólo la geometría, que el editor no sabe calcular.

	   El avión ocupa las filas 681 a 893 de una foto de 1536x2752, y el fondo va
	   en `cover` anclado arriba. `cover` toma la MAYOR de las dos escalas, así
	   que el borde de abajo del avión cae en:

	       max(893/1536 x ancho, 893/2752 x alto) = max(58,14vw · 32,45svh)

	   …y ahí está el problema de `cover`: ese alto no es `100svh`. `svh` es el
	   PISO (`min-height`); el alto real lo fija el contenido, que lo pasa —medido
	   942 contra 812 en un 375—. O sea que la sangría depende de una altura que
	   a su vez depende de la sangría. Se puede resolver el punto fijo con
	   álgebra, pero el resultado depende de cuánto mide el copy, que cambia con
	   cada retoque de texto.

	   Por eso el fondo del móvil deja de ir en `cover` y pasa a escalar SÓLO por
	   ancho. Dos cosas se arreglan juntas:

	     · La posición del avión pasa a ser función de `vw` y nada más, así que
	       la sangría se calcula de una y no depende del alto de nada.
	     · Con `cover` sobre una foto 9:16 en una pantalla de 375x942 la escala
	       la manda el alto y se recorta el 40% del ancho —20% de cada lado—. La
	       foto está encuadrada a propósito en vertical; recortarle casi la mitad
	       era tirar el encuadre.

	   Debajo de la foto queda fondo liso, pero ahí el velo del degradado ya va
	   en 0,94 y no se distingue. El orden de las capas —degradado primero,
	   imagen después— es el que arma Elementor con sus superposiciones. */
	body .elementor .s-hero {
		background-size: auto, 100% auto;
		background-position: 50% 0%, 50% 0%;
	}

	/* El avión termina en la fila 893 de una foto de 1536 de ancho, así que su
	   borde de abajo cae siempre en 0,5814 x vw. Más 44px de aire limpio entre
	   la rueda y el volante.

	   El `min()` con `vh` es el freno del caso apaisado: ahí el ancho puede ser
	   grande (hasta 767, el borde de este breakpoint) mientras el alto real de
	   la pantalla es chico, y `58.14vw + 44px` a esas anchuras pide más
	   sangría que la que entra en la pantalla. El outer `clamp` subía antes a
	   300px de tope, que en un teléfono grande en VERTICAL (430 de ancho, 294px
	   de fórmula) todavía no llegaba a cortar —pero en uno de 600+ de ancho sí,
	   y ahí el copy quedaba pegado ARRIBA del avión en vez de debajo. Se sube
	   el tope y se repone el freno por `vh`, que es el que de verdad distingue
	   vertical de apaisado. */
	body .elementor .s-hero-body {
		padding-block: clamp(150px, min(58.14vw + 44px, 42vh), 320px)
			clamp(28px, 4vh, 56px) !important;
	}

	/* La sangría de arriba es el PISO, no el resultado. En un teléfono alto el
	   hero mide `100svh` y el contenido no llega a llenarlo: con la sección en
	   `space-between`, todo ese sobrante caía en un pozo negro entre los botones
	   y la barra de datos —medido ~79px en 470x880— mientras el avión seguía con
	   los 40px justos de aire.

	   Haciendo que el bloque del copy se quede con el sobrante (`flex: 1`) y
	   empuje su contenido hacia abajo (`flex-end`), ese pozo pasa a ser cielo:
	   en esa misma pantalla el avión pasa de 40 a ~98px de aire. En una pantalla
	   corta no hay sobrante que repartir y manda el piso, así que no se pierde
	   nada.

	   El reparto va en `align-items` y no en `justify-content` porque el bloque
	   es una fila (`flex-direction: row`, como lo arma Elementor): ahí el eje
	   vertical es el TRANSVERSAL. Es el mismo eje que usa la regla de 768px
	   para arriba, y con el mismo valor. `flex-end` mandaba todo el sobrante
	   arriba y dejaba el copy pegado a la barra de datos; centrado se reparte
	   mitad y mitad, que es el equilibrio del montaje. */
	body .elementor .s-hero-body {
		flex: 1 1 auto !important;
		align-items: center !important;
	}

	/* Los 40px que baja el copy salen de la barra de datos, no del pliegue: se
	   quedaba con 247px para cuatro cifras y cuatro etiquetas, casi la mitad en
	   aire (10px de relleno por ficha arriba y abajo, 18 de separación entre
	   filas, 9 entre cifra y etiqueta). Apretada mide ~186 y el hero termina
	   MÁS corto que antes, así que la barra sigue entrando en pantalla.

	   Se aprieta, no se esconde: son las cuatro pruebas de confianza —ANAC,
	   horas, alumnos, reseñas— y el teléfono es justamente donde más falta
	   hacen. */
	body .elementor .s-hero-hud-stats {
		gap: 14px !important;
		padding-block: 6px !important;
	}

	body .elementor .s-hero-hud-stats > .e-con {
		padding-block: 0 !important;
	}

	body .elementor .s-hero-hud-stats .e-paragraph-base {
		margin-top: 5px !important;
	}
}


/* ======================= PISO DE ACCESIBILIDAD — inicio =======================
   Bloque autocontenido y reversible. Se quita entero con
   `herramientas/piso_revertir.py`, que lo borra por estas dos marcas. No
   agregar acá nada que no sea de este tema, y no sacar reglas de acá para
   mezclarlas arriba: la marca es lo que hace que revertir no deje restos.

   Todo lo de este bloque es invisible mientras se navega con el mouse en una
   computadora. Nada mueve el diseño.
   ============================================================================ */

/* --- 1. El anillo de foco, en todo el sitio ---
   Hasta ahora estaba en dos lugares sueltos: la grilla de sede y las casillas
   de los formularios. En el resto del sitio, quien navega con el teclado
   dependía del anillo de fábrica del navegador, que sobre navy casi no se ve.

   El `outline-offset` no es estético: separa el anillo del elemento, así que
   sobre el botón turquesa del hero el anillo cae sobre el navy de atrás en vez
   de sobre el propio botón, que es donde se perdería. */
body .elementor a:focus-visible,
body .elementor button:focus-visible,
body .elementor [role="button"]:focus-visible,
body .elementor summary:focus-visible,
body .elementor input:focus-visible,
body .elementor select:focus-visible,
body .elementor textarea:focus-visible {
	outline: 2px solid var(--BrandCyan, #1cb8d4);
	outline-offset: 3px;
	border-radius: 3px;
}

/* El turquesa de marca sobre blanco da 2,1:1 y el criterio de foco pide 3:1.
   En la sección de consulta —la única de fondo claro— el anillo baja al mismo
   turquesa oscurecido que ya usan ahí los enlaces y el volante. */
body .elementor .s-consulta a:focus-visible,
body .elementor .s-consulta button:focus-visible,
body .elementor .s-consulta input:focus-visible,
body .elementor .s-consulta select:focus-visible,
body .elementor .s-consulta textarea:focus-visible {
	outline-color: var(--BrandDeep, #0b7186);
}

/* --- 2. Área de toque en los enlaces del pie ---
   Medidos en producción: 19px de alto, con 16px de separación entre líneas. El
   criterio de WCAG 2.2 AA (2.5.8) pide 24 × 24 px de destino.

   El relleno va vertical y sobre un elemento `inline`, que es la parte que hace
   que esto no cambie el diseño: en un elemento inline el relleno vertical
   agranda el área que responde al dedo pero NO agranda la caja de línea, así
   que el pie se sigue viendo exactamente igual. Con 8px arriba y abajo el
   destino pasa de 19 a 35px.

   8 y no 12 porque 12 llegaría a 43 y se comería los 16px de separación: el
   destino de un enlace se solaparía con el de arriba y el dedo abriría el que
   no era. Para llegar a los 44px que pide el criterio AAA hay que abrir la
   separación del pie, y eso sí se ve. Queda como decisión de diseño aparte.

   Sólo el pie: en el menú los ítems ya miden 40px, y los enlaces que están
   dentro de un párrafo de texto quedan expresamente exceptuados por el propio
   criterio. */
@media (pointer: coarse) {
	body .elementor .elementor-location-footer .e-paragraph-link-base {
		padding-block: 8px;
	}
}

/* --- 3. Las animaciones no corren en una pestaña que nadie está mirando ---
   El sitio tiene cuatro animaciones en bucle (la pista del hero, la máscara, el
   punto de ruta y el pulso). Un bucle en una pestaña de fondo sigue gastando
   batería y CPU sin que nadie lo vea.

   El `*` con los dos pseudo-elementos no es fuerza bruta: `animation-play-state`
   NO se hereda, así que ponerlo en el `body` no llega a un solo descendiente ni
   a un `::before`. O se listan todos, o se usa el universal.

   El `!important` es por lo mismo: tiene que ganarle a la declaración de
   `animation` de cada regla, que es más específica que este selector. */
body.wf-pausa *,
body.wf-pausa *::before,
body.wf-pausa *::after {
	animation-play-state: paused !important;
}

/* ======================== PISO DE ACCESIBILIDAD — fin ======================== */


/* ========================= SALIDA DEL HERO — inicio ==========================
   Bloque autocontenido y reversible, junto con su gemelo en wefly.js. Los dos
   se quitan con `herramientas/bloque_revertir.py salida-hero`, que los borra
   por estas marcas. No sacar reglas de acá para mezclarlas con el resto del
   archivo: la marca es lo que hace que revertir no deje restos.

   QUÉ HACE
   Al empezar a bajar, el texto del hero se va hacia arriba desenfocándose, de
   arriba hacia abajo: primero el volante, después el título, la bajada, los
   botones y la barra de datos. Cuando el copy terminó de irse, el JS lleva la
   página sola hasta la ventanilla.

   POR QUÉ NO ES UNA MÁSCARA
   La versión anterior recortaba cada palabra contra una ventanita. En papel se
   ve caro; en la práctica, mientras la palabra cruza el borde se la ve cortada
   al medio, y a velocidad de rueda el título se lee partido y sucio. Se probó
   acelerar el cruce y no alcanzó: el corte es inherente al recurso. El
   desenfoque resuelve lo mismo sin cortar nada — el texto se disuelve en vez de
   partirse— y encima se lee como profundidad de campo, que en una foto de pista
   al amanecer es exactamente el lenguaje que corresponde.

   EL MOTOR: --p
   Cada pieza calcula su propio progreso a partir del progreso general, que
   wefly.js escribe en `--wf-hero` de 0 a 1 mientras el hero sale de pantalla:

       --p: clamp(0, (--wf-hero - --d) * --v, 1)

   `--d` es cuándo arranca y `--v` cuán rápido va. Con eso, una sola variable
   global escalona todo el hero sin una línea de JavaScript por cuadro.

   POR QUÉ SE NEUTRALIZA EL CONTENEDOR
   `.s-hero-copy` conserva su transform y su opacidad más arriba en el archivo.
   Si se dejara, se sumaría al de cada hijo. Se apaga acá y no se borra allá a
   propósito: al revertir este bloque, aquella regla vuelve a mandar sola y el
   hero queda exactamente como estaba.                                        */
body .elementor .s-hero-copy {
	transform: none;
	opacity: 1;
}

/* --- el freno de Elementor ---
   Elementor le pone a TODO contenedor (`.e-con`) una transición de 0,4s sobre
   `transform`. Para un hover está bien; para algo atado al scroll es veneno: el
   valor cambia en cada cuadro y el elemento nunca termina de llegar, así que en
   la práctica no se mueve. Medido: ni un `transform` inline los movía — una
   transición en curso le gana al estilo en línea.

   Se apaga con la variable que el propio Elementor expone, en vez de pisarle el
   `transition` entero: las transiciones de fondo, borde y sombra siguen vivas.

   A los botones NO se les toca la suya: es la que les da el hover. Por eso el
   que se mueve es el contenedor `.s-hero-ctas` y no cada botón.              */
body .elementor .s-hero-ctas,
body .elementor .s-hero-hud,
body .elementor .s-hero-hud-in,
body .elementor .s-hero-hud-stats,
body .elementor .s-stat-1,
body .elementor .s-stat-2,
body .elementor .s-stat-3,
body .elementor .s-stat-4 {
	--e-con-transform-transition-duration: 0s;
}

/* --- la salida, pieza por pieza ---
   Sube, se desenfoca y se apaga. Las tres cosas a la vez y no una sola: subir
   sin desenfocar es un desplazamiento; desenfocar sin subir es una foto
   desenfocada; juntas se leen como algo que se aleja.

   El desenfoque va en `--b` porque no puede ser el mismo para todos: 8px sobre
   un título de 68px es un velo; los mismos 8px sobre un dato de 12px lo borran
   antes de que empiece a moverse.                                            */
body .elementor .s-hero-kicker,
body .elementor .s-hero-h1,
body .elementor .s-hero-sub,
body .elementor .s-hero-ctas,
body .elementor .s-stat-1,
body .elementor .s-stat-2,
body .elementor .s-stat-3,
body .elementor .s-stat-4 {
	--p: clamp(0, calc((var(--wf-hero, 0) - var(--d, 0)) * var(--v, 2.6)), 1);
	transform: translate3d(0, calc(var(--p) * var(--y, -56px)), 0);
	filter: blur(calc(var(--p) * var(--b, 6px)));
	opacity: calc(1 - var(--p) * 1.1);
	/* `filter` entra en `will-change` a propósito: sin declararlo, cada cuadro
	   rehace el desenfoque en el hilo principal en vez de en el compositor. */
	will-change: transform, filter, opacity;
}

body .elementor .s-hero-kicker { --d: 0;    --v: 3.2; --y: -44px; --b: 5px; }
body .elementor .s-hero-h1     { --d: 0.05; --v: 2.7; --y: -76px; --b: 9px; }
body .elementor .s-hero-sub    { --d: 0.11; --v: 2.7; --y: -60px; --b: 6px; }
body .elementor .s-hero-ctas   { --d: 0.17; --v: 2.7; --y: -46px; --b: 5px; }

/* La barra de datos arranca más tarde y no es capricho: está pegada al fondo
   del hero, así que sigue a la vista cuando el copy —que vive en la mitad de
   arriba— ya salió de pantalla por el scroll mismo. Darle a cada cosa el tramo
   en el que de verdad se la ve es lo que hace que la salida ocupe el hero
   entero en vez de resolverse en el primer tercio. */
body .elementor .s-stat-1 { --d: 0.22; --v: 2.6; --y: -30px; --b: 4px; }
body .elementor .s-stat-2 { --d: 0.26; --v: 2.6; --y: -30px; --b: 4px; }
body .elementor .s-stat-3 { --d: 0.30; --v: 2.6; --y: -30px; --b: 4px; }
body .elementor .s-stat-4 { --d: 0.34; --v: 2.6; --y: -30px; --b: 4px; }

/* En un teléfono el recorrido se recorta y el desenfoque también: un blur
   grande es de lo más caro que se le puede pedir a una GPU de gama media, y en
   una pantalla chica no hace falta tanto para que se lea igual. */
@media (max-width: 767px) {
	body .elementor .s-hero-kicker { --y: -24px; --b: 3px; }
	body .elementor .s-hero-h1     { --y: -40px; --b: 5px; }
	body .elementor .s-hero-sub    { --y: -32px; --b: 4px; }
	body .elementor .s-hero-ctas   { --y: -24px; --b: 3px; }
	body .elementor .s-stat-1,
	body .elementor .s-stat-2,
	body .elementor .s-stat-3,
	body .elementor .s-stat-4 { --y: -16px; --b: 2px; }
}

/* Con movimiento reducido no se mueve ni se desenfoca nada, pero el desvanecido
   se queda: no es decoración, es lo que evita que el copy se superponga con lo
   que viene abajo mientras el hero sale de pantalla. El salto automático
   tampoco corre — eso lo decide el JS. */
@media (prefers-reduced-motion: reduce) {
	body .elementor .s-hero-kicker,
	body .elementor .s-hero-h1,
	body .elementor .s-hero-sub,
	body .elementor .s-hero-ctas,
	body .elementor .s-stat-1,
	body .elementor .s-stat-2,
	body .elementor .s-stat-3,
	body .elementor .s-stat-4 {
		transform: none;
		filter: none;
		will-change: auto;
	}
}

/* ========================== SALIDA DEL HERO — fin =========================== */

/* ==================== TARJETAS DE CURSO UNIFICADAS — inicio ==================
   Bloque autocontenido y reversible. Se quita con
   `herramientas/bloque_revertir.py tarjetas-curso`, que lo borra por estas
   marcas. No editar reglas de acá adentro mezclándolas con el resto del
   archivo: eso es lo único que puede dejar basura al revertir.

   EL PROBLEMA
   La misma tarjeta de curso tenía dos diseños distintos según la página. En
   el home: esquinas rectas, encabezado y datos en JetBrains Mono en
   mayúsculas, filas de dato separadas por filete, y un hover que levanta la
   tarjeta y dibuja una línea turquesa sobre el borde de arriba. En /cursos/:
   esquinas redondeadas de 18px, sigla dentro de una píldora turquesa, datos
   en dos columnas con la etiqueta arriba del valor en minúscula, y un hover
   de 4px sin línea. Dos vocabularios visuales para el mismo objeto.

   Manda el del home, que es el que ve primero cualquier visitante.

   POR QUÉ ES SÓLO CSS
   Las dos tarjetas tienen exactamente la misma estructura —cinco hijos
   directos: encabezado, título, descripción, datos y enlace—, así que no hace
   falta tocar ni un documento de Elementor. Se reescribe la capa de estilo y
   nada más.

   LO QUE NO SE TOCA, Y NO ES UN OLVIDO
   El texto del enlace sigue siendo largo ("Ver el curso de Piloto Privado en
   Rosario") mientras el del home dice sólo "Ver el curso". Es deliberado: acá
   la tarjeta ENTERA es el ancla, y el texto del ancla es lo que le pasa
   autoridad a la página hija. La frase con ciudad trabaja a favor del hijo.
   Igualar ese texto al del home sería igualar el diseño rompiendo el SEO.
   Como en mayúsculas y monoespaciada no entra en una línea, se deja que caiga
   en dos con las líneas parejas.                                            */

/* --- el ancho de la tarjeta ---
   Elementor le pone 10px de relleno lateral a cada contenedor nuevo. En el
   home esos niveles intermedios están en cero; acá habían quedado puestos en
   dos niveles, y esos 40px eran la razón de que la MISMA tarjeta midiera
   279px donde el home la muestra de 319.

   No es sólo estética: en un teléfono la fila "REQUISITO PREVIO / NINGUNO" no
   entraba en el ancho que quedaba, y como la tarjeta lleva `overflow: hidden`
   —que hace falta para recortar la línea del hover— el dato se cortaba en vez
   de acomodarse. Igualando el ancho al del home, entra igual que en el home.

   Va sobre los hijos directos en vez de nombrar cada grilla: así también
   quedan alineados los otros bloques de la página (los caminos, la ruta) y no
   hay que volver acá cada vez que se agregue una sección. */
body .elementor .s-cur {
	padding-inline: 0;
}

body .elementor .s-cur > .e-con {
	padding-inline: 0;
}

/* La grilla de tarjetas, además, se pone a cero por su cuenta y no por quién
   sea el padre: en /cursos/ cuelga de `.s-cur` pero en /alumnos-extranjeros/
   cuelga de `.s-bl`, y sin esto la misma tarjeta medía 13px menos en una
   página que en la otra. La regla de arriba alinea la PÁGINA; ésta se asegura
   de que el COMPONENTE mida igual en cualquier lado donde se lo use. */
body .elementor .s-cc-grid {
	padding-inline: 0;
}

/* --- la grilla ---
   Igual que la del home: tres columnas fijas y `subgrid`, no `auto-fit`. Con
   `auto-fit` cada tarjeta resuelve su alto por su cuenta y, como las
   descripciones miden distinto, los datos y el enlace de cada una arrancan a
   una altura diferente. Con subgrid las cinco filas las define la grilla y
   las tres tarjetas se alinean solas, sin alturas mínimas inventadas que se
   rompen apenas cambia un texto. */
body .elementor .s-cc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 20px;
}

body .elementor .s-cc-grid > .s-cc {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
}

@media (max-width: 1024px) {
	body .elementor .s-cc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	body .elementor .s-cc-grid { grid-template-columns: 1fr; }
}

/* --- la tarjeta ---
   `overflow: hidden` y `position: relative` no son decorativos: son lo que
   sostiene la línea del hover, que es un ::before de 2px pegado al borde de
   arriba. Sin el recorte, la línea sobresale por las esquinas. */
body .elementor .s-cc {
	position: relative;
	overflow: hidden;
	padding: 32px 30px 34px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 0;
	background-color: var(--NavySurface, #0b1522);
	text-decoration: none;
	color: inherit;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.45s ease,
	            box-shadow 0.45s ease;
}

body .elementor .s-cc:hover {
	transform: translate3d(0, -8px, 0);
	border-color: rgba(28, 184, 212, 0.55);
	background-color: var(--NavySurface, #0b1522);
	box-shadow: 0 24px 60px -24px rgba(28, 184, 212, 0.45);
}

/* La línea turquesa que se dibuja de izquierda a derecha sobre el borde. */
body .elementor .s-cc::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--BrandCyan, #1cb8d4);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

body .elementor .s-cc:hover::before {
	transform: scaleX(1);
}

/* --- encabezado: 01 · PPA --- */
body .elementor .s-cc-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
	padding-bottom: 10px;
}

body .elementor .s-cc-idx,
body .elementor .s-cc-sigla {
	font-family: var(--MonoFont, "JetBrains Mono"), monospace;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
}

body .elementor .s-cc-idx {
	color: var(--BrandCyan, #1cb8d4);
}

/* La sigla pierde la píldora. En el home es texto pelado, y la píldora era
   además el único elemento turquesa relleno de la tarjeta compitiendo con el
   enlace, que es lo accionable de verdad. */
body .elementor .s-cc-sigla {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--TextMuted, #8296ad);
}

/* --- título y descripción --- */
body .elementor .s-cc h3 {
	margin: 0;
	font-family: var(--HeadingFont, Montserrat), sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -1.2px;
	color: #ffffff;
}

body .elementor .s-cc-d {
	/* El `min-height` que había acá emparejaba los altos a mano. Con subgrid
	   sobra, y encima dejaba un hueco cuando el texto era más corto. */
	min-height: 0;
	margin: 0;
	font-family: var(--BodyFont, Inter), sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--TextSoft, #94a3b8);
}

/* --- ficha de datos: una fila por dato, con filete --- */
body .elementor .s-cc-datos {
	display: flex;
	flex-direction: column;
	margin-top: 26px;
	padding-top: 10px;
	border-top: 0;
	gap: 0;
}

body .elementor .s-cc-dato {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body .elementor .s-cc-k,
body .elementor .s-cc-v {
	font-family: var(--MonoFont, "JetBrains Mono"), monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	text-transform: uppercase;
}

/* La etiqueta nunca se parte en dos líneas; si algo tiene que ceder, cede el
   valor, que puede caer en dos sin romper la lectura del par. */
body .elementor .s-cc-k {
	flex: 0 0 auto;
	white-space: nowrap;
	letter-spacing: 1.4px;
	color: var(--TextMuted, #8296ad);
}

body .elementor .s-cc-v {
	letter-spacing: 1.2px;
	text-align: end;
	text-wrap: balance;
	color: var(--TextBody, #cbd5e1);
}

/* --- el enlace --- */
body .elementor .s-cc-ir {
	/* `margin-top: auto` lo empujaba al fondo porque las tarjetas resolvían su
	   alto solas. Con subgrid la fila ya está reservada y el auto sólo
	   despegaba el enlace del filete de arriba. */
	margin-top: 0;
	padding-top: 22px;
	font-family: var(--MonoFont, "JetBrains Mono"), monospace;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--BrandCyan, #1cb8d4);
	transition: letter-spacing 0.35s ease, color 0.35s ease;
}

/* En el home la flecha se abre separando las letras de toda la línea. Acá el
   texto ocupa dos renglones, así que abrir el tracking lo reflowearía en cada
   hover: se mueve sólo la flecha, que es el mismo gesto sin el temblor. */
body .elementor .s-cc-ir::after {
	content: " →";
	display: inline-block;
	transition: transform 0.35s ease;
}

body .elementor .s-cc:hover .s-cc-ir::after {
	transform: translateX(4px);
}

/* ===================== TARJETAS DE CURSO UNIFICADAS — fin ==================== */


/* ===================== PROGRAMA INTERNACIONAL — inicio ======================
   Bloque autocontenido y reversible. Se quita con
   `herramientas/bloque_revertir.py programa-internacional`, que lo borra por
   estas marcas. No editar reglas de acá adentro mezclándolas con el resto del
   archivo: eso es lo único que puede dejar basura al revertir.

   POR QUÉ EXISTE
   /alumnos-extranjeros/ dejó de ser una página de trámites que ofrecía las
   tres carreras y pasó a vender UNA sola cosa: el programa de cero a Piloto
   Comercial, con alojamiento, trámites y traslados adentro del precio.

   Casi todo lo que la página nueva necesita ya estaba en el sitio —`.s-ruta`
   para las etapas, `.s-req` para lo que incluye, `.s-comun` para los motivos,
   `.s-consulta` para el formulario en claro—. Lo único que no existía es una
   forma de mostrar un precio, porque hasta ahora ninguna página tenía uno.
   Eso es lo que agrega este bloque, más el remate del cuerpo que la regla
   original nombraba sólo para las páginas de curso. */

/* El cuerpo de esta página ahora también termina en el bloque gris del
   formulario. Sin esto quedan 96px de navy debajo del gris y antes del cierre:
   una franja oscura suelta que se lee como un error de maqueta, no como aire.
   Es la misma regla que ya corre en `.s-curso-cuerpo`; lo único que faltaba
   era nombrar a este contenedor. */
body .elementor .s-ext-cuerpo:has(> .s-consulta:last-child) {
	padding-bottom: 0 !important;
}

/* --- el recorrido de seis etapas ---
   `.s-ruta` es `flex` con `flex: 1 1 200px`, y así funciona en /cursos/, donde
   son TRES pasos y entran en una fila. Con seis pasos entraban cinco arriba y
   el sexto se iba solo al renglón de abajo estirado a 1.180px: una tarjeta
   cinco veces más ancha que sus hermanas, que se lee como un error y no como
   el final de una secuencia.

   Grilla de tres, entonces: dos filas parejas de tres, que además es cómo se
   agrupan las etapas —las tres de antes de empezar a volar y las tres de la
   formación—. Va scopeado a esta página para no tocar /cursos/, donde el flex
   resuelve bien. */
body .elementor .s-ext-cuerpo .s-ruta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
	body .elementor .s-ext-cuerpo .s-ruta { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
	body .elementor .s-ext-cuerpo .s-ruta { grid-template-columns: 1fr; }
}

/* --- la inversión ---
   Las dos formas de pago, una al lado de la otra. La de contado va destacada
   porque es la más barata para quien compra y la que prefiere la escuela.

   La financiada muestra el TOTAL sumado, no sólo la cuota. Doce cuotas de
   4.950 son 59.400, y quien está por gastar esa plata hace esa multiplicación
   sí o sí. Si la hace solo y le da un número que la página no dijo, lo que
   pierde no es la venta de la cuota: pierde la confianza en todo lo demás que
   leyó antes. */
body .elementor .s-precio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 26px;
}

body .elementor .s-precio-caja {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 28px 26px;
	border-radius: 18px;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

body .elementor .s-precio-caja.s-precio-destacada {
	background-color: rgba(28, 184, 212, 0.07);
	border-color: rgba(28, 184, 212, 0.4);
}

/* El 0.45 de las otras etiquetas chicas del sitio acá NO alcanza, y sólo en
   una de las dos cajas: el velo turquesa de la destacada aclara el fondo lo
   justo para que «PAGO DE CONTADO» caiga a 4.46:1, dos centésimas por debajo
   del mínimo. Sube a 0.55 en las dos —dos etiquetas iguales lado a lado con
   distinto gris se notan— y las dos pasan con margen. */
.s-precio-k {
	margin: 0 0 10px;
	/* 12px y no los 11 de `.s-curso-ficha-k` o `.s-ruta-n`: la guía de
	   tipografía del proyecto fija 12px como mínimo absoluto en cualquier
	   breakpoint, y las otras dos son deuda vieja. Una clase nueva no hereda
	   una excepción; nunca aparecen juntas en pantalla, así que el punto de
	   diferencia no se compara con nada. */
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/* En la mono y no en la de titulares. Es el mismo criterio que ya usan las
   fichas de las tarjetas de curso: un número que se compara con otro se lee
   mejor con los dígitos del mismo ancho, y acá hay exactamente dos números
   para comparar. */
body .elementor .s-precio-n {
	margin: 0 0 10px;
	font-family: var(--MonoFont, "JetBrains Mono"), monospace;
	font-size: clamp(27px, 3.2vw, 38px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: #ffffff;
}

body .elementor .s-precio-caja.s-precio-destacada .s-precio-n {
	color: var(--BrandCyan, #1cb8d4);
}

/* `margin-top: auto` para que las dos bajadas cierren a la misma altura aunque
   una tenga un renglón más que la otra: las cajas ya miden lo mismo porque son
   celdas de la misma fila de la grilla, así que lo único que hay que hacer es
   empujar el texto contra el piso. */
/* PREFIJADO CON EL BLOQUE: si no, esta regla NO se aplica.
   `body .elementor .s-bl p` es (0,2,2) y le
   ganaba a esta, que era (0,2,1): el tamaño de abajo se declaraba y no pasaba
   nada, y el texto salía al tamaño de párrafo del bloque. Con `.s-bl` delante
   son (0,3,1) y no hay empate. Es el mismo problema que ya había costado un
   texto invisible en el formulario (ver la nota de `.s-bl.s-consulta`). */
body .elementor .s-bl .s-precio-d {
	margin: auto 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

/* La aclaración de qué NO entra en el precio. Va debajo de las dos cajas y en
   el mismo tono que un párrafo secundario: no es una advertencia legal que
   haya que esconder, es información que el comprador agradece leer antes de
   preguntarla. */
body .elementor .s-bl .s-precio-nota {
	margin-top: 20px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 767px) {
	body .elementor .s-precio { gap: 14px; }
	body .elementor .s-precio-caja { padding: 24px 20px; }
}

/* ====================== PROGRAMA INTERNACIONAL — fin ======================== */

/* ========================= REDES Y CANALES — inicio =========================
   Bloque reversible `redes-canales`. Se saca con:
       ESCRIBIR=1 python bloque_revertir.py redes-canales

   QUÉ SUMA
   Los canales de Contacto tenían tres filas —WhatsApp, email, Instagram— y
   ahora son seis: se separó el teléfono fijo del WhatsApp, que son dos vías
   distintas y llegan a personas distintas, y entraron Facebook y LinkedIn,
   que son los otros perfiles de la escuela.

   Cada canal reusa `.s-canal-l`, que ya existe: acá sólo van el icono y el
   color propio de cada uno. El icono es un `data:` URI en el `::before`, igual
   que los tres que ya estaban, así no se suma ni una petición de red ni una
   librería de iconos para seis dibujos.

   El `%23` de los SVG es un `#` escapado: adentro de un `data:` URI el
   numeral corta la URL, así que los colores van con esa forma. Es lo que hace
   que `cian_del_manual.py` tenga que buscar las dos escrituras. */

.s-canal--tel .s-canal-l::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231CB8D4'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
	background-color: rgba(28, 184, 212, 0.12);
}

.s-canal--fb .s-canal-l::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877F2'%3E%3Cpath d='M14 8.5V7c0-.7.5-1 1-1h1.5V3H14c-2.2 0-3.5 1.4-3.5 3.6v1.9H8V12h2.5v9H14v-9h2.4l.4-3.5H14z'/%3E%3C/svg%3E");
	background-color: rgba(24, 119, 242, 0.14);
}

.s-canal--li .s-canal-l::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A66C2'%3E%3Cpath d='M4.5 8.7h3.1V21H4.5V8.7zM6 3.4a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6zM10 8.7h3v1.7a3.3 3.3 0 0 1 3-1.9c3.1 0 3.7 2 3.7 4.7V21h-3.1v-6c0-1.5 0-3.3-2-3.3s-2.3 1.6-2.3 3.2V21H10V8.7z'/%3E%3C/svg%3E");
	background-color: rgba(10, 102, 194, 0.14);
}

.s-canal--tel .s-canal-l:hover .s-canal-v { color: var(--BrandCyan, #1cb8d4); }
.s-canal--fb .s-canal-l:hover .s-canal-v { color: #1877F2; }
.s-canal--li .s-canal-l:hover .s-canal-v { color: #0A66C2; }

/* Con seis canales la columna se hacía larga y empujaba el formulario. En
   pantallas anchas van en dos columnas: entran los seis sin que la página
   crezca. Debajo de 900px vuelven a una sola, que es donde el mosaico de 46px
   más la etiqueta ya ocupan todo el renglón. */
@media (min-width: 900px) {
	body .elementor .s-canales {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 10px;
	}
}

/* --- fila de iconos del pie ---
   En el pie no hay lugar para seis renglones con etiqueta: van los iconos
   solos, en fila. El nombre de la red queda en el `aria-label` del enlace, que
   es lo que lee un lector de pantalla y lo que necesita para no anunciar seis
   enlaces llamados «enlace». */
body .elementor .s-f-redes {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body .elementor .s-f-redes a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.06);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

body .elementor .s-f-redes a:hover {
	transform: translateY(-2px);
}

body .elementor .s-f-redes .s-f-red--ig a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1306C' stroke-width='1.9'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='%23E1306C' stroke='none'/%3E%3C/svg%3E");
}
body .elementor .s-f-redes .s-f-red--ig a:hover { background-color: rgba(225, 48, 108, 0.18); }

body .elementor .s-f-redes .s-f-red--fb a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877F2'%3E%3Cpath d='M14 8.5V7c0-.7.5-1 1-1h1.5V3H14c-2.2 0-3.5 1.4-3.5 3.6v1.9H8V12h2.5v9H14v-9h2.4l.4-3.5H14z'/%3E%3C/svg%3E");
}
body .elementor .s-f-redes .s-f-red--fb a:hover { background-color: rgba(24, 119, 242, 0.18); }

body .elementor .s-f-redes .s-f-red--li a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A66C2'%3E%3Cpath d='M4.5 8.7h3.1V21H4.5V8.7zM6 3.4a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6zM10 8.7h3v1.7a3.3 3.3 0 0 1 3-1.9c3.1 0 3.7 2 3.7 4.7V21h-3.1v-6c0-1.5 0-3.3-2-3.3s-2.3 1.6-2.3 3.2V21H10V8.7z'/%3E%3C/svg%3E");
}
body .elementor .s-f-redes .s-f-red--li a:hover { background-color: rgba(10, 102, 194, 0.18); }

/* ========================== REDES Y CANALES — fin =========================== */

/* ========================= FOTO DEL EQUIPO — inicio ========================
   La grupal del equipo es vertical (1792×2227) y entró en un marco pensado para
   fotos horizontales. En escritorio no molesta: `.s-nb-alta` estira el marco a
   la altura de la columna de texto y quedó en 568×706, casi la misma proporción
   que la foto, así que `cover` no recorta nada.

   En móvil sí. Ahí el marco vuelve a `aspect-ratio: 4 / 3` y de una imagen
   vertical se ve el 60 % del alto: **20 % se pierde arriba y 20 % abajo**, y
   arriba es donde están las caras. Subir el punto de recorte deja las cabezas
   completas y se come los pies, que es lo que sobra en una foto de cuerpo
   entero.

   Va por `data-id` y no por clase porque `s-nb-foto` la comparten las otras
   tres fotos de la página —historia, aula y flota—, que son horizontales y no
   necesitan esto. */
@media (max-width: 767px) {
	body .elementor img[data-id="hist-img"] { object-position: 50% 12%; }
}
/* ========================== FOTO DEL EQUIPO — fin =========================== */