/* ==========================================================================
   AE Design System tokens (mapeados 1:1 desde _ds_manifest.json del LP1)
   ========================================================================== */
:root {
	--ae-navy: #06204e;
	--ae-blue: #4d5b96;
	--ae-red: #db162f;
	--ae-warm: #e0dcd7;
	--ae-white: #ffffff;
	--ae-ink: #16181d;
	--ae-rule: #d5d0c9;
	--ae-navy-deep: #04173a;
	--ae-surface-warm: #e0dcd7;
	--ae-surface-light: #f7f5f2;

	--ae-font: "Heebo", system-ui, sans-serif;
	--ae-weight-light: 300;
	--ae-weight-regular: 400;
	--ae-weight-medium: 500;
	--ae-weight-bold: 700;
	--ae-weight-black: 800;

	--ae-text-xs: 0.75rem;
	--ae-text-sm: 0.875rem;
	--ae-text-base: 1rem;
	--ae-text-lg: 1.125rem;
	--ae-text-xl: 1.5rem;
	--ae-text-2xl: 2rem;
	--ae-text-3xl: 2.75rem;
	--ae-text-display: clamp(2.5rem, 6vw, 4.5rem);

	--ae-space-1: 0.25rem;
	--ae-space-2: 0.5rem;
	--ae-space-3: 0.75rem;
	--ae-space-4: 1rem;
	--ae-space-6: 1.5rem;
	--ae-space-8: 2rem;
	--ae-space-12: 3rem;
	--ae-space-16: 4rem;
	--ae-space-24: 6rem;

	--ae-radius-sm: 4px;
	--ae-radius-md: 6px;
	--ae-radius-lg: 10px;
	--ae-radius-pill: 999px;
	--ae-touch-min: 48px;

	--ae-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.75);
	--ae-focus-ring-on-light: 0 0 0 3px rgba(219, 22, 47, 0.5);
	/* Dos capas para que el foco se vea sobre cualquier fondo: los elementos que
	   lo usan viven en bloques distintos, unos sobre azul y otros sobre blanco, y
	   un anillo de un solo color desaparece en la mitad de ellos. */
	--ae-focus-ring-universal: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 6px rgba(20, 22, 59, 0.85);
}

/* ==========================================================================
   Base
   ========================================================================== */
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ae-font);
	color: var(--ae-blue);
	background: var(--ae-white);
	overflow-x: hidden;
}
a { color: var(--ae-navy); }
a:hover { color: var(--ae-navy-deep); }
img { max-width: 100%; display: block; }
.ae-container { max-width: 1200px; margin: 0 auto; width: 100%; }
.ae-section { padding: var(--ae-space-24) var(--ae-space-8); }

/* Scroll reveal */
@keyframes ae-fade-in-up {
	from { opacity: 0; transform: translateY(32px); }
	to { opacity: 1; transform: translateY(0); }
}
[data-reveal] {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].ae-revealed { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }


/* Botón */
.ae-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ae-touch-min);
	padding: 0 var(--ae-space-8);
	background: var(--ae-red);
	color: var(--ae-white);
	font-family: var(--ae-font);
	font-weight: var(--ae-weight-bold);
	font-size: var(--ae-text-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	border-radius: var(--ae-radius-md);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}
.ae-btn:hover { background: #b31126; color: var(--ae-white); }
.ae-btn:focus-visible { outline: none; box-shadow: var(--ae-focus-ring-on-light); }
.ae-btn--full { width: 100%; }

/* Campo de formulario genérico */
.ae-field { display: flex; flex-direction: column; gap: var(--ae-space-1); min-width: 0; }
.ae-field label {
	font-size: var(--ae-text-sm);
	font-weight: var(--ae-weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ae-blue);
}
.ae-field input, .ae-field select {
	width: 100%;
	box-sizing: border-box;
	min-height: var(--ae-touch-min);
	padding: 0 var(--ae-space-4);
	font-family: var(--ae-font);
	font-size: var(--ae-text-base);
	color: var(--ae-blue);
	background: var(--ae-white);
	border: 1px solid var(--ae-rule);
	border-radius: var(--ae-radius-md);
}
.ae-field select:focus-visible,
.ae-field input:focus-visible {
	outline: none;
	border-color: var(--ae-red);
	box-shadow: var(--ae-focus-ring-on-light);
}

/* Section heading reutilizable */
.ae-section-heading { display: flex; flex-direction: column; gap: var(--ae-space-2); }
.ae-section-heading h2 {
	margin: 0;
	font-family: var(--ae-font);
	font-size: var(--ae-text-3xl);
	font-weight: var(--ae-weight-black);
	color: var(--ae-navy);
	line-height: 1.15;
}
.ae-section-heading--dark h2 { color: var(--ae-white); }
/* Barra roja vertical al inicio del titulo, en lugar de horizontal debajo.
   El div .ae-bar del markup se oculta: la barra la pinta el propio h2. */
.ae-section-heading .ae-bar { display: none; }
.ae-section-heading h2 { border-left: 5px solid var(--ae-red); border-radius: 2px 0 0 2px; padding-left: 16px; }
.ae-section-heading p.ae-lead { margin: 0; font-size: var(--ae-text-lg); color: var(--ae-blue); }
.ae-section-heading--dark p.ae-lead { color: rgba(255, 255, 255, 0.8); }

@media (max-width: 768px) {
	.ae-section { padding-left: var(--ae-space-4); padding-right: var(--ae-space-4); }
}

/* Reparto de linea. `balance` iguala las lineas de los titulos y evita que la
   ultima quede con una sola palabra; `pretty` hace lo propio en parrafos largos
   sin reordenar el resto. Se aplica por etiqueta y no por clase porque el tema
   pinta encabezados sin clase propia desde el editor. */
h1, h2, h3, h4,
.ae-hero__heading, .ae-section-heading h2, .ae-provides__feature-title,
.ae-schedules__card h3, .ae-careers__card h3 { text-wrap: balance; }

p, li, .ae-hero__lead, .ae-provides__feature-desc, .ae-careers__card p,
.ae-faq__answer, .ae-schedules__lead { text-wrap: pretty; }

/* Los titulos de seccion se quedaban en el tamano de escritorio hasta el movil,
   y a 390 px una frase de cuatro palabras caia en tres lineas dejando la ultima
   con una sola. El acordeon legal baja con ellos porque su tamano esta atado al
   del titulo de seccion a proposito. */
@media (max-width: 560px) {
	.ae-section-heading h2 { font-size: var(--ae-text-2xl); }
	.ae-faq__item--prominent .ae-faq__btn { font-size: var(--ae-text-2xl); }
	.ae-hero__heading { font-size: var(--ae-text-3xl); }
}

/* Con el sistema pidiendo menos movimiento, las secciones aparecen ya en su
   sitio en lugar de subir con el fundido, y el desplazamiento de la página es
   un salto seco. Va al final de la hoja porque neutraliza transiciones que se
   declaran más arriba y comparten especificidad. El carril de testimonios
   declara su propio scroll-behavior en blocks.css, que carga después, así que
   se neutraliza allí. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	[data-reveal-delay="1"], [data-reveal-delay="2"], [data-reveal-delay="3"] { transition-delay: 0s; }
	.ae-btn, .ae-field input, .ae-field select { transition: none; }
}

/* Texto solo para lectores de pantalla. Sale de la vista sin salir del árbol de
   accesibilidad: con display:none o visibility:hidden desaparecería también
   para ellos. */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Salto al contenido. Es el primer elemento enfocable del documento y solo se
   ve mientras tiene el foco: con el teclado, la primera pulsación de tabulador
   lo saca y permite pasar de la cabecera al contenido de una vez.
   El z-index va por encima del 50 de .ae-header, que flota con position:fixed y
   si no lo taparía. */
.skip-link {
	position: fixed;
	top: -100px; left: var(--ae-space-3);
	z-index: 100;
	display: inline-block;
	padding: var(--ae-space-3) var(--ae-space-6);
	background: var(--ae-navy-deep);
	color: var(--ae-white);
	font-family: var(--ae-font);
	font-weight: var(--ae-weight-bold);
	font-size: var(--ae-text-base);
	text-decoration: none;
	border: 3px solid var(--ae-red);
	transition: top .15s ease;
}
.skip-link:focus { top: var(--ae-space-3); }
@media (prefers-reduced-motion: reduce) {
	.skip-link { transition: none; }
}