/* ==========================================================================
   Header
   ========================================================================== */
.ae-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	background: linear-gradient(to bottom, rgba(4, 23, 58, 0.55) 0%, rgba(4, 23, 58, 0) 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--ae-space-8);
	min-height: 88px;
	transition: background 0.18s ease, box-shadow 0.18s ease;
}
.ae-header--scrolled { background: var(--ae-navy); box-shadow: 0 4px 20px rgba(4, 23, 58, 0.25); }
.ae-header__logo img { height: 72px; width: auto; max-width: 320px; object-fit: contain; }
.ae-header__right { display: flex; align-items: center; gap: var(--ae-space-6); }
.ae-header__phone {
	color: var(--ae-white); text-decoration: none;
	font-size: var(--ae-text-sm); font-weight: var(--ae-weight-bold); letter-spacing: 0.05em;
	text-transform: uppercase;
	display: inline-flex; align-items: center; justify-content: center; gap: var(--ae-space-2);
	background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
	border-radius: var(--ae-radius-md); padding: 0 var(--ae-space-8);
	/* El tema no tiene reset global de box-sizing: sin esto el borde de 1px
	   sumaria al alto y el boton quedaria 2px mas alto que .ae-btn. */
	box-sizing: border-box; min-height: var(--ae-touch-min);
	transition: background 0.2s ease, border-color 0.2s ease;
}
.ae-header__phone:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); color: var(--ae-white); }
/* Interactivos que no tenian indicador de foco propio y caian en el anillo por
   defecto del navegador, poco visible sobre el azul de la marca. */
.ae-header__phone:focus-visible,
.ae-hero__phone:focus-visible,
.ae-program-paths__card:focus-visible,
.ae-testimonials__nav-btn:focus-visible {
	outline: none;
	box-shadow: var(--ae-focus-ring-universal);
	border-radius: var(--ae-radius-sm);
}
/* Los dos botones de la barra tienen que medir lo mismo. El minimo comun solo
   los iguala si ambos miden la caja igual: el tema no trae reset global de
   box-sizing, asi que sin declararlo el boton rojo sumaba sus 64 px de padding
   al minimo y salia 64 px mas ancho que el del telefono. */
.ae-header__phone, .ae-header .ae-btn { min-width: 170px; box-sizing: border-box; }
/* Borde transparente del mismo grosor que el del telefono: cuando los dos se
   reparten la fila en movil, el reparto parte del padding mas el borde de cada
   uno, y sin el los anchos salian 2 px distintos. */
.ae-header .ae-btn { border: 1px solid transparent; }

/* Por debajo de 960 px el logo, la cuenta atras y los dos botones no caben en
   una linea. La barra pasa a dos filas —logo y cuenta atras arriba, los dos
   botones abajo— en vez de esconder la cuenta atras y dejar el telefono
   reducido a un icono suelto: asi el aviso de inicio de clases sigue estando
   en la barra de navegacion tambien en movil, y los dos botones se reparten el
   ancho a partes iguales, que es lo que los hace identicos.
   El corte esta en 960 y no en 860 porque el aviso lleva fecha: en una sola
   fila, entre 861 y 960 px la fecha se monta sobre los botones incluso en
   formato corto. Repartiendo en dos filas el mensaje se lee entero. */
@media (max-width: 960px) {
	.ae-header { flex-wrap: wrap; row-gap: var(--ae-space-2); padding-top: var(--ae-space-2); padding-bottom: var(--ae-space-2); }
	.ae-header__countdown { flex: 0 1 auto; }
	.ae-header__countdown-text { font-size: var(--ae-text-xs); }
	.ae-header__right { order: 3; flex-basis: 100%; justify-content: center; }
	/* Ancho identico repartiendo la fila, con un tope para que en tablet no se
	   conviertan en dos franjas de media pantalla. */
	.ae-header__phone, .ae-header .ae-btn { flex: 1 1 0; max-width: 240px; white-space: nowrap; }
}
@media (max-width: 768px) {
	.ae-header { padding: var(--ae-space-2) var(--ae-space-4); gap: var(--ae-space-2); min-height: 64px; }
	.ae-header__logo img { height: 48px; max-width: 200px; }
	.ae-header__right { gap: var(--ae-space-2); }
	/* El alto se queda en el minimo tactil del propio tema. Estaba en 36 px, que
	   anulaba el token --ae-touch-min y dejaba los dos enlaces de conversion de la
	   cabecera por debajo del objetivo minimo justo en movil, que es donde se
	   pulsan con el dedo. */
	.ae-header__phone, .ae-header .ae-btn { padding: var(--ae-space-2) var(--ae-space-4); font-size: var(--ae-text-xs); min-height: var(--ae-touch-min); min-width: 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ae-hero { position: relative; background: var(--ae-navy-deep); min-height: min(90vh, 840px); display: flex; align-items: center; padding: var(--ae-space-24) var(--ae-space-8) var(--ae-space-12); }
.ae-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(4,23,58,0.9) 0%, rgba(4,23,58,0.7) 50%, rgba(4,23,58,0.55) 100%); }
.ae-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
/* La fila mide lo que mide la tarjeta del formulario y la columna de texto la
   ocupa entera: la etiqueta del programa arranca en el borde superior de la
   tarjeta y las acreditaciones terminan en el inferior. La tarjeta conserva
   su propio centrado. */
.ae-hero__grid { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 480px; gap: var(--ae-space-12); align-items: stretch; min-width: 0; }
/* Sin `min-width: 0` una celda de rejilla no baja de su contenido minimo, y la
   palabra mas larga del titular obliga a la columna a ser mas ancha que el
   hueco disponible: la pagina entera se desplaza en horizontal en movil. */
.ae-hero__copy { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--ae-space-6); min-width: 0; }
/* El nombre del programa va sin caja: sin fondo, sin borde y sin el relleno
   que los sostenia, para que arranque en la misma vertical que el resto del
   hero en lugar de sangrado por su propio padding. */
.ae-hero__eyebrow { display: inline-block; color: var(--ae-white); font-size: var(--ae-text-sm); font-weight: var(--ae-weight-black); letter-spacing: 0.14em; text-transform: uppercase; width: fit-content; }
.ae-hero__heading { margin: 0; font-family: var(--ae-font); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: var(--ae-weight-black); color: var(--ae-white); line-height: 1.08; letter-spacing: -0.01em; overflow-wrap: break-word; }
.ae-hero__bar { display: none; }
.ae-hero__heading { border-left: 5px solid var(--ae-red); border-radius: 2px 0 0 2px; padding-left: 16px; }
.ae-hero__form-card h3 { border-left: 5px solid var(--ae-red); border-radius: 2px 0 0 2px; padding-left: 16px; }
.ae-hero__lead { margin: 0; font-size: var(--ae-text-lg); color: rgba(255,255,255,0.8); line-height: 1.6; }
.ae-hero__phone { color: var(--ae-white); text-decoration: none; font-size: var(--ae-text-lg); font-weight: var(--ae-weight-bold); display: flex; align-items: center; gap: var(--ae-space-2); width: fit-content; }
.ae-hero__stats { display: flex; flex-wrap: wrap; gap: var(--ae-space-6) var(--ae-space-8); margin-top: var(--ae-space-4); }
.ae-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.ae-hero__stat-line { color: var(--ae-white); font-size: var(--ae-text-2xl); font-weight: var(--ae-weight-black); line-height: 1; }
.ae-hero__stat-number { color: var(--ae-white); font-weight: var(--ae-weight-black); }
.ae-hero__stat-label { color: rgba(255,255,255,0.7); font-size: var(--ae-text-xs); font-weight: var(--ae-weight-medium); }
/* El aire entre el encabezado y los logos es el gap de columna de
   .ae-hero__copy (24px). El margen inferior negativo del encabezado, y la
   anulación del margen superior de lo que va debajo, lo dejan en 12px. */
/* El bloque de acreditaciones baja hasta el borde inferior de la tarjeta:
   el margen superior automatico empuja el encabezado (y los logos que le
   siguen) al final de la columna, y el resto del texto se queda arriba. */
.ae-hero__badges-heading { color: #fff; font-size: 1.05rem; font-weight: var(--ae-weight-semibold, 600); letter-spacing: 0.04em; text-transform: uppercase; margin: auto 0 calc(var(--ae-space-3) - var(--ae-space-6)); }
/* Sin encabezado de acreditaciones son los propios logos los que bajan; la
   regla de abajo (`+ .ae-hero__stats`) anula este margen cuando si lo hay. */
.ae-hero__copy > .ae-hero__stats { margin-top: auto; }
.ae-hero__badges-heading + .ae-hero__stats { margin-top: 0; }
.ae-hero__badges { display: flex; flex-wrap: wrap; gap: var(--ae-space-4) var(--ae-space-6); flex-basis: 100%; margin-top: 0; }
/* Cada insignia es una columna: la placa con el logo arriba y el nombre de
   la acreditadora centrado justo debajo de su propio logo. La placa
   translúcida se mantiene porque dos de los tres logos traen el fondo
   blanco incrustado en la imagen y sin ella se recortarían contra la foto. */
.ae-hero__badge { width: 140px; display: flex; flex-direction: column; align-items: center; gap: var(--ae-space-2); }
/* Sin casilla de fondo: tapaba la foto del hero y el cliente pidio quitarla.
   Los logos que traen transparencia real quedan limpios sobre la foto; los que
   vienen con fondo blanco incrustado (NACCAS es un JPEG, AACS un PNG sin canal
   alfa) siguen mostrando el suyo hasta que lleguen reexportados. */
.ae-hero__badge-plate { width: 140px; height: 140px; border-radius: var(--ae-radius-sm); display: grid; place-items: center; overflow: hidden; padding: 6px; }
/* Antes de que el JS agrupe las insignias en .ae-hero__badges (o si JS
   está deshabilitado), que al menos no se vean pegadas a los stats. */
.ae-hero__stat + .ae-hero__badge { margin-top: var(--ae-space-2); }
.ae-hero__badge-name { color: var(--ae-white); font-size: var(--ae-text-xs); font-weight: var(--ae-weight-bold); letter-spacing: 0.03em; text-align: center; line-height: 1.2; }
.ae-hero__badge-plate img { width: 100%; height: 100%; object-fit: contain; }
.ae-hero__form-card { align-self: center; background: var(--ae-white); border-radius: var(--ae-radius-lg); padding: var(--ae-space-8); display: flex; flex-direction: column; gap: var(--ae-space-4); box-shadow: 0 16px 48px rgba(4,23,58,0.35); overflow: hidden; min-width: 0; }
.ae-hero__form-card h3 { margin: 0; font-size: var(--ae-text-xl); font-weight: var(--ae-weight-bold); color: var(--ae-navy); }
.ae-hero__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ae-space-3); min-width: 0; }
.ae-form-consent { display: flex; flex-direction: column; gap: var(--ae-space-3); }
.ae-form-consent label { display: flex; gap: var(--ae-space-2); align-items: flex-start; font-size: 13px; color: var(--ae-blue); line-height: 1.5; cursor: pointer; text-transform: none; }
.ae-form-consent input[type="checkbox"] { margin-top: 2px; min-width: 18px; min-height: 18px; }
/* La barra de navegacion se parte en dos filas por debajo de 960 px y crece
   hasta 144 px (logo 72 + botones 48 + margenes); el hero arranca por debajo
   para que el titular no le quede tapado. */
@media (max-width: 960px) {
	 .ae-hero { padding-top: 168px; }
}
/* Entre 769 y 1100 px el hero sigue a dos columnas, y la columna del texto no
   da para tres insignias de 140 px: la tercera baja sola a una segunda fila.
   Se estrechan lo justo para que las tres seden en una linea. */
/* Entre 769 y 1100 px el hero sigue a dos columnas y la del texto se queda en
   334 px en la landing mas estrecha: con insignias de 140 px la tercera baja
   sola a una segunda fila. A 96 px con 12 de separacion las tres caben en una
   linea en las cinco, con margen de sobra sobre esos 334. */
@media (min-width: 769px) and (max-width: 1100px) {
	 .ae-hero__badges { gap: var(--ae-space-3); }
	 .ae-hero__badge { width: 96px; }
	 .ae-hero__badge-plate { width: 96px; height: 96px; }
}
/* Justo por encima del punto en que el hero deja de ser de una columna, la del
   texto se queda en unos 275 px en la landing mas estrecha. Un escalon mas. */
@media (min-width: 769px) and (max-width: 827px) {
	 .ae-hero__badge { width: 80px; }
	 .ae-hero__badge-plate { width: 80px; height: 80px; }
}
@media (max-width: 768px) {
	 /* Con el logo a 48 px y los botones a 36 la barra mide 108 px, y 137 en las
	    pantallas donde el logo y la cuenta atras ya no comparten fila y esta se
	    va a una tercera. El margen cubre los dos casos. */
	 .ae-hero { padding-top: 152px; }
	 .ae-hero__grid { grid-template-columns: 1fr; }
	 /* A una columna no hay tarjeta a cuya altura bajar: el margen automatico
	    vale 0 y el encabezado de acreditaciones recupera su aire. */
	 .ae-hero__badges-heading { margin-top: var(--ae-space-6); }
	 .ae-hero__copy > .ae-hero__stats { margin-top: var(--ae-space-4); }
	 .ae-hero__badges-heading + .ae-hero__stats { margin-top: 0; }
	 .ae-hero__badge{width: 86px;}
	 .ae-hero__badge-plate{width: 86px; height: 86px;}
}
/* En los moviles mas estrechos la separacion de 24 px entre insignias es lo que
   hace bajar a la tercera; con las tres en una linea los nombres se siguen
   leyendo bajo su propio logo. */
@media (max-width: 400px) {
	 .ae-hero__badges { gap: var(--ae-space-3); }
}

/* ==========================================================================
   Provides / Learn (layout 2 columnas compartido)
   ========================================================================== */
.ae-provides { background: var(--ae-surface-light); }
.ae-learn { background: var(--ae-white); }
.ae-provides__grid, .ae-learn__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ae-space-16); align-items: center; }
.ae-provides__image, .ae-learn__image { aspect-ratio: 4/5; background: var(--ae-warm); border-radius: var(--ae-radius-lg); overflow: hidden; }
.ae-provides__image img, .ae-learn__image img { width: 100%; height: 100%; object-fit: cover; }
.ae-provides__content, .ae-learn__content { display: flex; flex-direction: column; gap: var(--ae-space-8); }
.ae-provides__list, .ae-learn__list { display: flex; flex-direction: column; gap: var(--ae-space-6); }
.ae-provides__feature { display: flex; gap: var(--ae-space-4); align-items: flex-start; }
.ae-provides__feature-icon { min-width: 40px; height: 40px; border-radius: 50%; background: var(--ae-navy); display: grid; place-items: center; margin-top: 10px;}
.ae-provides__feature-title { font-weight: var(--ae-weight-bold); font-size: var(--ae-text-xl); color: var(--ae-navy); margin-bottom: 5px; margin-top: 10px;}
.ae-provides__feature-desc { font-size: var(--ae-text-lg); color: var(--ae-blue); margin-top: var(--ae-space-1); line-height: 1.6; }
.ae-learn__topic { display: flex; flex-direction: column; gap: var(--ae-space-2); }
.ae-learn__topic h3 { margin: 0; font-size: var(--ae-text-xl); font-weight: var(--ae-weight-bold); color: var(--ae-navy); }
.ae-learn__topic p { margin: 0; font-size: var(--ae-text-lg); line-height: 1.7; color: var(--ae-blue); }
/* La rejilla de dos columnas deja al titulo de Provides menos ancho del que
   necesita a 2.75rem y lo parte en dos lineas. Se baja solo en este bloque.
   Sin white-space: nowrap: hay instancias con titulos largos que desbordarian
   la columna. */
/* El cliente pide este titulo en UNA sola linea. Con tamanos fijos por tramos
   siempre quedaba alguna banda sin cubrir —entre el ancho maximo de la rejilla
   y el salto a una columna, y otra vez por debajo de 484px— y volvia a
   partirse. Con clamp escala de forma continua y no hay banda sin cubrir. */
.ae-provides .ae-section-heading h2 { font-size: clamp(1.35rem, 2.6vw, 2.25rem); }
/* El cuerpo sigue al ancho de la ventana, pero el titulo vive en media rejilla
   desde 769 px: en la franja en la que la columna es mas estrecha que el texto
   que tiene que caber, el clamp se queda largo y el titulo se parte en dos. Las
   dos franjas se corrigen por separado porque el salto de una a otra columna
   ocurre justo en medio. */
@media (min-width: 769px) and (max-width: 900px) {
	.ae-provides .ae-section-heading h2 { font-size: 1.25rem; }
}
@media (min-width: 769px) and (max-width: 827px) {
	.ae-provides .ae-section-heading h2 { font-size: 1.05rem; }
}
@media (max-width: 389px) {
	.ae-provides .ae-section-heading h2 { font-size: 1.15rem; }
}
@media (max-width: 359px) {
	.ae-provides .ae-section-heading h2 { font-size: 1rem; }
}
@media (max-width: 768px) {
	.ae-provides__grid, .ae-learn__grid { grid-template-columns: 1fr; gap: var(--ae-space-8); }
	.ae-provides__image { order: 2; aspect-ratio: 16/9; }
	.ae-learn__image { order: 2; aspect-ratio: 16/9; }
}

/* ==========================================================================
   Schedules
   ========================================================================== */
.ae-schedules { background: var(--ae-navy); }
.ae-schedules__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ae-space-12); }
/* `1fr` equivale a `minmax(auto, 1fr)`, y ese `auto` impide que la columna baje
   del contenido minimo de la tarjeta: en pantallas estrechas la pista crece por
   encima del contenedor y desplaza la pagina. Con `minmax(0, 1fr)` la columna
   puede estrecharse y el texto envuelve, que es lo que se espera. */
.ae-schedules__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ae-space-6); }
/* Cuando la fila se completa con una imagen en vez de con una tercera tarjeta,
   la imagen tiene que ocupar la celda igual que ellas: sin el margen que trae
   por defecto el bloque, y recortada al alto de la fila. */
.ae-schedules__grid > figure { margin: 0; height: 100%; border-radius: var(--ae-radius-lg); overflow: hidden; }
.ae-schedules__grid > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La rejilla admite un bloque de imagen suelto como una celda mas. Sin altura
   forzada la figura entra a su altura natural y descuadra la fila; con el
   recorte ocupa la celda igual que una tarjeta. */
.ae-schedules__grid > figure.wp-block-image { margin: 0; height: 100%; }
.ae-schedules__grid > figure.wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--ae-radius-lg); }
.ae-schedules__card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--ae-radius-lg); padding: var(--ae-space-8); display: flex; flex-direction: column; gap: var(--ae-space-4); transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.6s ease, transform 0.6s ease; min-width: 0; }
.ae-schedules__card:hover { box-shadow: 0 0 0 1px var(--ae-red); border-color: var(--ae-red); }
.ae-schedules__card h3 { margin: 0; font-size: var(--ae-text-xl); font-weight: var(--ae-weight-bold); color: var(--ae-white); }
.ae-schedules__lines { display: flex; flex-direction: column; gap: var(--ae-space-2); }
.ae-schedules__lines span { color: rgba(255,255,255,0.7); font-size: var(--ae-text-base); line-height: 1.6; }
.ae-schedules__next { margin-top: auto; padding-top: var(--ae-space-4); }
.ae-schedules__next-bar { display: none; }
.ae-schedules__next { border-left: 5px solid var(--ae-red); border-radius: 2px 0 0 2px; padding-left: 16px; }
.ae-schedules__next-label { font-size: var(--ae-text-sm); font-weight: var(--ae-weight-medium); color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.08em; }
.ae-schedules__next-date { display: block; font-size: var(--ae-text-lg); font-weight: var(--ae-weight-bold); color: var(--ae-white); margin-top: var(--ae-space-1); }
.ae-schedules__cta { text-align: center; }
.ae-schedules__lead { max-width: 62ch; margin: 0 auto var(--ae-space-4); color: rgba(255,255,255,0.78); font-size: var(--ae-text-base); line-height: 1.6; }
@media (max-width: 768px) {
	.ae-schedules__grid { grid-template-columns: minmax(0, 1fr); }
	/* Apilada a una columna la altura de la fila la marcaria la altura natural
	   de la foto, que a ancho completo se dispara. */
	.ae-schedules__grid > figure.wp-block-image { height: auto; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Careers
   ========================================================================== */
.ae-careers { background: var(--ae-surface-light); }
.ae-careers__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ae-space-12); align-items: center; }
/* El contenedor centra sus hijos para que el boton final no se estire a todo
   el ancho; el titulo se saca de ese centrado y ocupa la fila completa. */
.ae-careers__inner > .ae-section-heading { align-self: stretch; }
/* Las pistas van con minmax(0, 1fr) y no con 1fr a secas. Con 1fr cada pista
   toma como minimo el min-content de la tarjeta —el titulo mas largo mas los
   64 px de relleno— y la rejilla se dimensionaba por ahi: entre 481 y 620 px
   sumaba mas ancho del que habia, las tarjetas de la derecha salian cortadas y
   quedaban fuera de alcance porque el body oculta el desbordamiento lateral.
   Con el minimo en cero la rejilla nunca puede medir mas que su contenedor,
   pase lo que pase con la longitud de los textos. */
.ae-careers__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ae-space-6); width: 100%; }
.ae-careers__card { grid-column: span 2; min-width: 0; background: var(--ae-white); border-radius: var(--ae-radius-lg); padding: var(--ae-space-8); display: flex; flex-direction: column; align-items: center; gap: var(--ae-space-4); text-align: center; border: 1px solid var(--ae-rule); transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.6s ease, transform 0.6s ease; }
.ae-careers__card:hover { box-shadow: 0 0 0 1px var(--ae-red); border-color: var(--ae-red); }
.ae-careers__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ae-navy); display: grid; place-items: center; }
.ae-careers__card h3 { margin: 0; font-size: var(--ae-text-xl); font-weight: var(--ae-weight-bold); color: var(--ae-navy); }
.ae-careers__card p { margin: 0; font-size: var(--ae-text-lg); color: var(--ae-blue); line-height: 1.6; }
/* Red de seguridad del texto: si un titulo llega con un espacio duro entre dos
   palabras, el navegador lo trata como una sola palabra larguisima y esta se
   saldria de la tarjeta. Con esto parte antes de asomar por el borde. */
.ae-careers__card h3, .ae-careers__card p { overflow-wrap: break-word; }
/* Las tarjetas van de tres en tres sobre una rejilla de seis pistas: cuando la
   ultima fila queda incompleta, la primera huerfana arranca en una pista
   desplazada para que el resto se centre bajo las tres de arriba. Con dos
   sueltas empieza en la pista 2 y con una sola en la 3. */
.ae-careers__card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
.ae-careers__card:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
/* Con exactamente cuatro tarjetas, tres arriba y una centrada abajo deja la
   fila de abajo coja. En dos columnas quedan 2 + 2, las tarjetas salen mas
   anchas y ningun titulo se parte. Con cinco no aplica: 3 + 2 ya cierra bien.
   Solo a partir de 621 px: la regla de :has es mas especifica que la columna
   unica de movil y, sin acotarla, mantenia dos columnas donde no caben. */
@media (min-width: 621px) {
	.ae-careers__grid:has(> .ae-careers__card:nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ae-careers__grid:has(> .ae-careers__card:nth-child(4):last-child) > .ae-careers__card {
		grid-column: auto;
	}
}
@media (max-width: 768px) {
	 .ae-careers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
	 /* Con dos pistas el span de dos y el desplazamiento de los huerfanos
	    dejarian una tarjeta por fila. */
	 .ae-careers__card,
	 .ae-careers__card:nth-last-child(2):nth-child(3n + 1),
	 .ae-careers__card:last-child:nth-child(3n + 1) { grid-column: auto; }
	 .ae-cta__card.ae-form-embed{
	width: 90%;
}
}
/* Columna unica hasta 620 px. Por debajo de ese ancho dos tarjetas se reparten
   menos de 280 px cada una y, descontados los 64 px de relleno, al texto le
   quedan poco mas de 200: los titulos de dos palabras largas se parten letra a
   letra. A partir de 621 las dos columnas ya se leen. */
@media (max-width: 620px) { .ae-careers__grid { grid-template-columns: 1fr; } }

/* En dos columnas una tarjeta suelta en la ultima fila se queda pegada a la
   izquierda con el hueco a la derecha. Se centra, que es el mismo criterio que
   en escritorio: alli las huerfanas se corren de pista para quedar bajo las de
   arriba. */
@media (min-width: 621px) and (max-width: 768px) {
	.ae-careers__grid > .ae-careers__card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		/* El tema no trae reset global de box-sizing y la tarjeta lleva 32 px de
		   relleno por lado: sin declararlo, el ancho de media columna se sumaria
		   al relleno y la huerfana saldria mas ancha que sus vecinas. */
		box-sizing: border-box;
		width: calc(50% - (var(--ae-space-6) / 2));
	}
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.ae-testimonials { background: var(--ae-navy-deep); }
.ae-testimonials__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ae-space-8); }
.ae-testimonials__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ae-space-6); }
.ae-testimonials__header .ae-section-heading { margin-bottom: 0; }
.ae-testimonials__nav { display: flex; gap: var(--ae-space-3); flex: none; }
.ae-testimonials__nav-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); cursor: pointer; display: grid; place-items: center; color: var(--ae-white); transition: background 0.2s; }
.ae-testimonials__nav-btn:hover { background: rgba(255,255,255,0.16); }
.ae-testimonials__track {
	display: flex; gap: var(--ae-space-6);
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.ae-testimonials__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
	.ae-testimonials__track { scroll-behavior: auto; }
}
.ae-testimonials__card {
	background: rgba(255,255,255,0.04); border-radius: var(--ae-radius-lg); border-top: 3px solid var(--ae-red);
	padding: var(--ae-space-8); display: flex; flex-direction: column; gap: var(--ae-space-6);
	flex: 0 0 calc(45% - var(--ae-space-6) / 2); min-width: 0; scroll-snap-align: start;
}
.ae-testimonials__card p { margin: 0; font-size: var(--ae-text-lg); line-height: 1.7; color: rgba(255,255,255,0.9); }
.ae-testimonials__meta { font-size: var(--ae-text-sm); display: flex; flex-wrap: wrap; gap: var(--ae-space-2); align-items: baseline; }
.ae-testimonials__author { font-weight: var(--ae-weight-black); color: var(--ae-white); text-transform: uppercase; letter-spacing: 0.04em; }
.ae-testimonials__role { color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--ae-text-xs); }
@media (max-width: 768px) {
	.ae-testimonials__header { flex-direction: column; align-items: flex-start; gap: var(--ae-space-4); }
	.ae-testimonials__card { flex-basis: 80%; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.ae-faq { background: var(--ae-surface-light); }
.ae-faq__inner { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ae-space-8); }
.ae-faq__item { border-bottom: 1px solid var(--ae-rule); border-left: 4px solid var(--ae-red); padding-left: var(--ae-space-4); }
.ae-faq__btn { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: var(--ae-space-6) 0; font-family: var(--ae-font); font-size: var(--ae-text-lg); font-weight: var(--ae-weight-bold); color: var(--ae-navy); text-align: left; min-height: var(--ae-touch-min); gap: var(--ae-space-4); }
.ae-faq__btn:hover { background: rgba(6,32,78,0.03); }
.ae-faq__btn:focus-visible { outline: none; box-shadow: var(--ae-focus-ring-on-light); border-radius: var(--ae-radius-sm); }
.ae-faq__icon { font-size: var(--ae-text-xl); color: var(--ae-red); min-width: 24px; text-align: center; }
.ae-faq__panel { padding: 0 0 var(--ae-space-6) 0; font-size: var(--ae-text-base); line-height: 1.7; color: var(--ae-blue); }
.ae-faq__panel p { margin: 0 0 var(--ae-space-3) 0; }
.ae-faq__panel p:last-child { margin-bottom: 0; }
.ae-faq__panel a { color: var(--ae-red); text-decoration: underline; }
/* Las entradas legales del acordeon no pueden anunciarse en letra mas pequena
   que el encabezado de la seccion: con el interruptor marcado el titulo toma
   los tres valores de .ae-section-heading h2. */
/* Se acota a escritorio: este fichero carga despues de main.css, y sin el media
   query la regla pisaba la reduccion de movil y el descargo salia mas grande
   que el encabezado de su propia seccion. */
.ae-faq__item--prominent .ae-faq__btn { font-weight: var(--ae-weight-black); line-height: 1.15; }
@media (min-width: 561px) {
	.ae-faq__item--prominent .ae-faq__btn { font-size: var(--ae-text-3xl); }
}

/* ==========================================================================
   Disclosures — mismo acordeon que el FAQ, en tono secundario: es letra legal,
   no debe competir con las preguntas frecuentes.
   ========================================================================== */
.ae-disclosures { background: var(--ae-white); }
.ae-disclosures__inner { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ae-space-8); }
.ae-disclosures__item .ae-faq__btn { font-size: var(--ae-text-base); padding: var(--ae-space-4) 0; }
.ae-disclosures__item .ae-faq__panel { font-size: var(--ae-text-sm); }
/* Un disclosure colocado dentro del acordeon de preguntas frecuentes es una
   entrada mas de ese acordeon y recupera su tamano: el tono reducido solo
   corresponde a la caja propia de Disclosures. */
.ae-faq .ae-disclosures__item .ae-faq__btn { font-size: var(--ae-text-lg); padding: var(--ae-space-6) 0; }
.ae-faq .ae-disclosures__item .ae-faq__panel { font-size: var(--ae-text-base); }

/* ==========================================================================
   Forminator embed (Hero + CTA)
   ========================================================================== */
.ae-form-embed { font-family: var(--ae-font); }
.ae-form-embed .forminator-row { margin-bottom: var(--ae-space-3) !important; }
.ae-form-embed .forminator-label { font-size: var(--ae-text-sm) !important; font-weight: var(--ae-weight-medium) !important; color: var(--ae-blue) !important; text-transform: uppercase; letter-spacing: 0.06em; }
.ae-form-embed input[type="text"],
.ae-form-embed input[type="email"],
.ae-form-embed input[type="tel"],
.ae-form-embed select,
.ae-form-embed textarea {
	min-height: var(--ae-touch-min) !important;
	border-radius: var(--ae-radius-md) !important;
	border-color: var(--ae-rule) !important;
	font-family: var(--ae-font) !important;
}
.ae-form-embed .forminator-button-submit,
.ae-form-embed button[type="submit"] {
	background: var(--ae-red) !important;
	border-radius: var(--ae-radius-md) !important;
	font-weight: var(--ae-weight-bold) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	min-height: var(--ae-touch-min) !important;
}
.ae-form-embed__notice {
	margin: 0;
	padding: var(--ae-space-4);
	border: 1px dashed var(--ae-rule);
	border-radius: var(--ae-radius-md);
	font-size: var(--ae-text-sm);
	color: var(--ae-blue);
}

/* El ritmo vertical del formulario se centraliza en .forminator-field: el CSS
   generado del formulario solo margina .forminator-input (que no llevan ni el
   select ni los consentimientos) y la rejilla del plugin anade otros 20px a
   .forminator-col, de ahi que los saltos entre campos midan distinto. Se anulan
   ambos origenes y se deja un unico margen por campo. No puede ponerse en
   .forminator-row: esas filas siguen en display:flex aunque su contenido este
   oculto, y marginarlas abriria huecos donde no hay campo visible. */
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-field .forminator-input { margin-bottom: 0 !important; }
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-row > .forminator-col { margin-bottom: 0 !important; }
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-row > .forminator-col > .forminator-field { margin-bottom: 20px !important; }
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-row.forminator-row-last > .forminator-col > .forminator-field { margin-bottom: 0 !important; }
/* La rejilla del plugin descuenta el hueco DOS veces en las filas de dos
   campos: pone flex-basis: calc(50% - 10px) en cada columna y ademas deja
   column-gap: 10px en la fila. Asi la pareja mide 198+10+198 = 406 y se queda
   10px corta frente a la fila de ancho completo, que mide 416: el borde
   derecho del formulario sale dentado. Con la mitad del hueco por columna las
   dos filas terminan en la misma vertical. */
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-row > .forminator-col-6 {
	flex-basis: calc(50% - 5px) !important;
	max-width: calc(50% - 5px) !important;
}

/* Reparto vertical de la tarjeta: los campos arriba y los consentimientos
   ocupando lo menos posible al pie. Se aprieta el espaciado del bloque de
   consentimiento —su separacion interna y el salto entre las dos casillas— y
   lo liberado se reparte entre los campos, que quedan mas holgados y con el
   mismo salto exacto entre cada par. */
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-row > .forminator-col > .forminator-field:has(input[type="checkbox"]) { margin-bottom: 10px !important; }
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-row > .forminator-col > .forminator-field:not(:has(input[type="checkbox"])) { margin-bottom: 28px !important; }

/* Consentimientos: el texto legal va en letra compacta, con interlineado 1.4,
   para que el formulario no estire la cabecera en la que va; en movil baja un
   punto. La casilla, proporcionada a esa letra, se centra en la primera linea
   del texto. Para eso el parrafo va sin el margen superior que le pone el
   navegador y la etiqueta que envuelve la casilla, sin el relleno del CSS
   propio del formulario: cualquiera de los dos la desplaza respecto del texto.
   El tema del sitio principal usa estas mismas variables. */
:root {
	--ae-consent-texto: 14px;
	--ae-consent-interlineado: 1.4;
	--ae-consent-casilla: 16px;
}
@media (max-width: 768px) {
	:root { --ae-consent-texto: 13px; }
}
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-field-consent .forminator-checkbox__wrapper { align-items: flex-start !important; font-size: var(--ae-consent-texto) !important; }
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-field-consent .forminator-checkbox { display: flex !important; padding: 0 !important; margin: 0 !important; line-height: 1; }
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-field-consent input[type="checkbox"] {
	flex: none; width: var(--ae-consent-casilla); height: var(--ae-consent-casilla);
	margin: calc((var(--ae-consent-texto) * var(--ae-consent-interlineado) - var(--ae-consent-casilla)) / 2) 0 0 !important;
}
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-consent__label,
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-consent__label p { font-size: var(--ae-consent-texto) !important; line-height: var(--ae-consent-interlineado) !important; }
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-consent__label p { margin: 0 !important; }
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-consent__label p + p { margin-top: .5em !important; }

/* La columna del boton no lleva clase forminator-col-N, asi que se dimensiona
   al contenido y queda pegada a la izquierda de su fila. */
.ae-form-embed .forminator-ui.forminator-custom-form .forminator-row.forminator-row-last { justify-content: center !important; }

/* Lo que decide si dos campos caben uno al lado del otro no es el ancho de la
   ventana sino el de la tarjeta que los contiene: la del hero es una columna
   estrecha y sus medias columnas bajan de 130 px, donde la etiqueta «Phone
   Number» parte en dos, el campo cae mas abajo que su vecino y la fila deja un
   hueco de 41 px contra la siguiente. Se mide el propio formulario y, cuando no
   da para dos, los campos pasan a ancho completo con el mismo salto de 20 px
   que el resto. */
.ae-form-embed { container-type: inline-size; }
@container (max-width: 340px) {
	/* row-gap a 0: al apilarse, los 10 px de hueco de la rejilla del plugin se
	   sumarian al margen del campo y ese salto mediria 30 en vez de 20. */
	.ae-form-embed .forminator-ui.forminator-custom-form .forminator-row { flex-wrap: wrap !important; row-gap: 0 !important; }
	.ae-form-embed .forminator-ui.forminator-custom-form .forminator-row > .forminator-col { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ==========================================================================
   CTA Form
   ========================================================================== */
.ae-cta { background: var(--ae-navy-deep); }
.ae-cta__inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ae-space-8); align-items: center; text-align: center; }
.ae-cta__card { background: var(--ae-white); border-radius: var(--ae-radius-lg); padding: var(--ae-space-8); display: flex; flex-direction: column; gap: var(--ae-space-4); width: 100%; max-width: 600px; text-align: left; }
/* Mismo criterio que en Careers: el centrado del contenedor se mantiene para
   la tarjeta del formulario y solo el titulo pasa a la izquierda. */
.ae-cta__inner > .ae-section-heading { align-self: stretch; text-align: left; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ae-footer { background: var(--ae-navy); padding: var(--ae-space-12) var(--ae-space-8) var(--ae-space-8); }
.ae-footer__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ae-space-8); }
.ae-footer__logo { display: flex; justify-content: center; }
.ae-footer__logo img { height: 56px; width: auto; max-width: 320px; object-fit: contain; }
.ae-footer__contact { display: flex; flex-wrap: wrap; gap: var(--ae-space-6); justify-content: center; align-items: center; }
.ae-footer__contact span, .ae-footer__contact a { color: var(--ae-white); font-size: var(--ae-text-sm); text-decoration: none; }
.ae-footer__contact a { font-weight: var(--ae-weight-bold); }
.ae-footer__sep { color: rgba(255,255,255,0.3); }
.ae-footer__legal { display: flex; gap: var(--ae-space-4); justify-content: center; flex-wrap: wrap; }
.ae-footer__legal a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: var(--ae-text-sm); }
.ae-footer__note { margin: 0; color: rgba(255,255,255,0.7); font-size: var(--ae-text-xs); text-align: center; line-height: 1.6; }
.ae-footer__note--narrow { max-width: 700px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Bloques utilitarios (marcador visible solo en editor/admin)
   ========================================================================== */
.ae-block-marker {
	cursor: default;
	border: 1px dashed var(--ae-rule);
	padding: var(--ae-space-2) var(--ae-space-3);
	text-align: center;
	background: rgba(6, 32, 78, 0.04);
	color: rgba(22, 24, 29, 0.6);
	font-style: italic;
	font-size: var(--ae-text-xs);
	margin: 0;
}

/* Countdown */
.ae-countdown { display: flex; flex-direction: column; align-items: center; gap: var(--ae-space-2); }
.ae-countdown__title { font-size: var(--ae-text-sm); font-weight: var(--ae-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ae-blue); }
.ae-countdown__digits { display: flex; gap: var(--ae-space-4); }
.ae-countdown__digits > div { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.ae-countdown__digits span { font-size: var(--ae-text-2xl); font-weight: var(--ae-weight-black); color: var(--ae-navy); line-height: 1; }
.ae-countdown__digits small { font-size: var(--ae-text-xs); color: var(--ae-blue); text-transform: uppercase; }

/* ==========================================================================
   CTA Banner (sin formulario)
   ========================================================================== */
.ae-cta-banner { background: var(--ae-navy); text-align: center; }
.ae-cta-banner__inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--ae-space-4); }
.ae-cta-banner__inner .ae-bar { display: none; }
.ae-cta-banner__inner > h2 { align-self: stretch; text-align: left; }
.ae-cta-banner__inner h2 { border-left: 5px solid var(--ae-red); border-radius: 2px 0 0 2px; padding-left: 16px; margin: 0; font-family: var(--ae-font); font-size: var(--ae-text-3xl); font-weight: var(--ae-weight-black); color: var(--ae-white); line-height: 1.15; }
.ae-cta-banner__inner .ae-lead { margin: 0; font-size: var(--ae-text-lg); color: rgba(255,255,255,0.8); }

/* ==========================================================================
   Program Paths (tarjetas con enlace a otras landings)
   ========================================================================== */
.ae-program-paths { background: var(--ae-white); }
.ae-program-paths__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ae-space-12); }
.ae-program-paths__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ae-space-6); }
.ae-program-paths__card {
	background: var(--ae-navy); border-radius: var(--ae-radius-lg); padding: var(--ae-space-8);
	display: flex; flex-direction: column; gap: var(--ae-space-3); text-decoration: none;
	/* opacity y transform van en la transicion porque esta regla pisa la de
	   [data-reveal] (misma especificidad, hoja posterior) y sin ellas la tarjeta
	   aparecia de golpe mientras el titular de su seccion si se desvanecia. */
	border: 1px solid transparent; transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.6s ease, transform 0.6s ease;
}
.ae-program-paths__card:hover { box-shadow: 0 0 0 1px var(--ae-red); border-color: var(--ae-red); transform: translateY(-2px); }
.ae-program-paths__icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.12); display: grid; place-items: center; margin-bottom: var(--ae-space-2); }
.ae-program-paths__card h3 { margin: 0; font-size: var(--ae-text-xl); font-weight: var(--ae-weight-bold); color: var(--ae-white); }
.ae-program-paths__card p { margin: 0; font-size: var(--ae-text-lg); color: rgba(255,255,255,0.75); line-height: 1.6; }
.ae-program-paths__link { margin-top: auto; padding-top: var(--ae-space-4); font-size: var(--ae-text-sm); font-weight: var(--ae-weight-bold); color: var(--ae-red); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 768px) { .ae-program-paths__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Alternancia de fondos
   Las secciones se suceden alternando tono claro y tono oscuro. Cuando dos
   claras del mismo tono quedan pegadas, el corte entre ellas desaparece: la
   segunda pasa al otro tono claro para que la separacion se lea.
   Solo tiene efecto en el front-end; en el lienzo del editor cada bloque va
   envuelto en su propio contenedor y las secciones no son hermanas.
   ========================================================================== */
.ae-provides + .ae-provides,
.ae-provides + .ae-careers,
.ae-provides + .ae-faq,
.ae-careers + .ae-provides,
.ae-careers + .ae-careers,
.ae-careers + .ae-faq,
.ae-faq + .ae-provides,
.ae-faq + .ae-careers,
.ae-faq + .ae-faq { background: var(--ae-white); }

/* Cambiar un tono claro por otro (#f7f5f2 -> #ffffff) da 1,09:1 de contraste:
   el corte entre las dos secciones sigue sin leerse. Cuando el acordeon abre la
   pagina y le sigue otra seccion clara, se pinta en oscuro y el corte vuelve de
   verdad. Se oscurece este y no el siguiente porque detras del siguiente van los
   testimonios en azul profundo y quedarian dos oscuras pegadas; encima el
   acordeon lleva el hero fotografico, no un panel plano, asi que el salto foto
   -> azul sigue leyendose. La regla va por clase, no por pagina: se aplica sola
   donde aparezca ese par. */
.ae-faq:has(+ .ae-provides) { background: var(--ae-navy); }
.ae-faq:has(+ .ae-provides) .ae-section-heading h2 { color: var(--ae-white); }
.ae-faq:has(+ .ae-provides) .ae-section-heading p.ae-lead { color: rgba(255,255,255,0.8); }
.ae-faq:has(+ .ae-provides) .ae-faq__item { border-bottom-color: rgba(255,255,255,0.2); }
.ae-faq:has(+ .ae-provides) .ae-faq__btn { color: var(--ae-white); }
.ae-faq:has(+ .ae-provides) .ae-faq__btn:hover { background: rgba(255,255,255,0.08); }
.ae-faq:has(+ .ae-provides) .ae-faq__btn:focus-visible { box-shadow: var(--ae-focus-ring); }
.ae-faq:has(+ .ae-provides) .ae-faq__panel { color: rgba(255,255,255,0.85); }
/* Sobre azul el rojo de marca no llega al contraste minimo para texto corrido;
   los enlaces se distinguen por el subrayado. */
.ae-faq:has(+ .ae-provides) .ae-faq__panel a { color: var(--ae-white); }

/* --------------------------------------------------------------------------
   Alternancia: el criterio completo

   Cambiar un tono claro por otro (#f7f5f2 -> #ffffff) deja 1,09:1 de contraste
   y el corte no se ve. Donde dos secciones claras quedan pegadas se pinta una
   de las dos en azul, siguiendo siempre el mismo orden:

   1. Se oscurece la SEGUNDA de las dos.
   2. Si detras de la segunda ya va una oscura, se oscurece la PRIMERA, para no
      cambiar un par claro-claro por uno oscuro-oscuro.
   3. El hero cuenta como «no oscuro» aunque su fondo sea azul: lleva foto, y
      el salto de una foto a un panel plano se lee.
   4. Cuando la pareja clara esta atrapada entre dos oscuras no se puede
      oscurecer ninguna sin romper el punto 2. Ahi la segunda toma el tono
      calido de la paleta y una linea a sangre completa marca el corte.

   Las reglas van por adyacencia, no por pagina: se aplican solas alli donde
   aparezca el patron, y siguen valiendo si el editor reordena los bloques.
   -------------------------------------------------------------------------- */

/* Punto 1 — se oscurece la segunda. */
.ae-learn:has(+ .ae-provides),
.ae-learn:has(+ .ae-careers) { background: var(--ae-navy); }
.ae-learn:has(+ .ae-provides) .ae-section-heading h2,
.ae-learn:has(+ .ae-careers) .ae-section-heading h2,
.ae-learn:has(+ .ae-provides) .ae-learn__topic h3,
.ae-learn:has(+ .ae-careers) .ae-learn__topic h3 { color: var(--ae-white); }
.ae-learn:has(+ .ae-provides) .ae-section-heading p.ae-lead,
.ae-learn:has(+ .ae-careers) .ae-section-heading p.ae-lead,
.ae-learn:has(+ .ae-provides) .ae-learn__topic p,
.ae-learn:has(+ .ae-careers) .ae-learn__topic p { color: rgba(255, 255, 255, 0.8); }
.ae-learn:has(+ .ae-provides) .ae-learn__image,
.ae-learn:has(+ .ae-careers) .ae-learn__image { background: rgba(255, 255, 255, 0.06); }

/* Punto 2 — detras de la segunda va Schedules, que ya es oscura, asi que la
   que se pinta es la primera. Delante queda el hero, que lleva foto. */
.ae-provides:has(+ .ae-learn + .ae-schedules) { background: var(--ae-navy); }
.ae-provides:has(+ .ae-learn + .ae-schedules) .ae-section-heading h2,
.ae-provides:has(+ .ae-learn + .ae-schedules) .ae-provides__feature-title { color: var(--ae-white); }
.ae-provides:has(+ .ae-learn + .ae-schedules) .ae-section-heading p.ae-lead,
.ae-provides:has(+ .ae-learn + .ae-schedules) .ae-provides__feature-desc { color: rgba(255, 255, 255, 0.8); }
.ae-provides:has(+ .ae-learn + .ae-schedules) .ae-provides__feature-icon { background: rgba(255, 255, 255, 0.14); }
.ae-provides:has(+ .ae-learn + .ae-schedules) .ae-provides__image { background: rgba(255, 255, 255, 0.06); }

/* Punto 2 otra vez — Program Paths abre la pagina detras del hero y le sigue
   Provides; oscurecer Provides la pegaria a Schedules. Las tarjetas pasan al
   panel translucido que ya usan las de Schedules: en azul sobre azul se
   perderian. */
.ae-program-paths:has(+ .ae-provides) { background: var(--ae-navy); }
.ae-program-paths:has(+ .ae-provides) .ae-section-heading h2 { color: var(--ae-white); }
.ae-program-paths:has(+ .ae-provides) .ae-section-heading p.ae-lead { color: rgba(255, 255, 255, 0.8); }
.ae-program-paths:has(+ .ae-provides) .ae-program-paths__card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}
.ae-program-paths:has(+ .ae-provides) .ae-program-paths__icon { background: rgba(255, 255, 255, 0.16); }

/* Punto 4 — Careers y Learn quedan entre Schedules y Testimonials, las dos
   oscuras. Oscurecer cualquiera de las dos crearia un par oscuro-oscuro, asi
   que el corte se marca con el tercer tono de la paleta y una linea. */
.ae-careers + .ae-learn:has(+ .ae-testimonials) {
	background: var(--ae-surface-warm);
	/* La linea no usa --ae-rule: ese tono esta pensado para bordes de tarjeta
	   sobre blanco, y contra el claro de la seccion anterior se queda en 1,41:1,
	   por debajo de lo que distingue un limite. Este llega a 3,2:1, que es el
	   minimo con el que un borde se lee, y se queda dentro de la gama calida. */
	border-top: 1px solid #918a80;
}

/* El pie es azul y va detras de la llamada final, que es azul profundo: 1,11:1.
   Una linea clara a sangre completa devuelve el corte sin sacar al pie del
   tono oscuro que le corresponde. */
.ae-footer { border-top: 1px solid rgba(255, 255, 255, 0.16); }






.forminator-button.forminator-button-back,.forminator-button.forminator-button-next{
	display: inline-block !important;
    padding: 15px 20px !important;
    background-color: #06204e !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    font-family: 'Arial', sans-serif !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    letter-spacing: 1px !important;
    min-width: 110px !important;
    text-decoration: none !important;
    border-radius: 10px;
    margin-right: 5px;
}
/* ==========================================================================
   Countdown — dentro de la barra de navegación
   La cuenta atrás no tiene franja propia: se pinta como un elemento más del
   header, en blanco y en la misma línea que el logo y el botón. Antes iba en
   una barra fija encima, que engordaba la cabecera y en móvil acababa
   montándose sobre los botones. Va sin botón propio: el que llevaba apuntaba
   al mismo destino que «Get Started», así que la marca queda con una salida.
   ========================================================================== */
.ae-header__countdown { display: flex; align-items: center; min-width: 0; flex-shrink: 1; }
.ae-header__countdown-text { margin: 0; font-family: var(--ae-font); font-size: var(--ae-text-sm); font-weight: var(--ae-weight-regular, 400); color: var(--ae-white, #fff); white-space: nowrap; }
.ae-header__countdown-text strong { color: var(--ae-white, #fff); font-weight: var(--ae-weight-bold, 700); }
/* En blanco, como el resto del aviso: la fecha es parte del mismo mensaje y en
   gris se leia como una nota al margen. */
.ae-header__countdown-date { color: var(--ae-white, #fff); margin-left: 8px; }
/* La fecha no se esconde en ningún ancho: el aviso pierde la mitad del mensaje
   si solo queda el número de días. Lo que cambia es el formato — «September 14,
   2026» por encima de 1100 px y «Sep 14» por debajo, que mide 56 px menos y
   entra en la fila junto al logo. */
.ae-header__countdown-date--corta { display: none; }
@media (max-width: 1100px) {
	.ae-header__countdown-date--larga { display: none; }
	.ae-header__countdown-date--corta { display: inline; }
}