/* ==========================================================================
   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; }
}

/* Tabla de servicios de la política de cookies de Complianz (página de
   preferencias). Complianz da a cada caja de descripción todo el ancho más 15 px
   de relleno por lado, y sin border-box se salía 30 px en el móvil. Hasta 600 px,
   además, la fila de cada servicio no cabe en una línea con un nombre largo
   («Microsoft Clarity»): el nombre va arriba, las categorías debajo y el chevrón
   a la derecha de los dos. La tabla de cookies de dentro tampoco dejaba encoger
   su columna por debajo del nombre de una cookie. Lo carga también el tema del
   sitio, así que vale para las dos páginas de preferencias. El body sube la
   especificidad por encima de la regla de Complianz, que se carga aparte. */
.cmplz-document .cmplz-dropdown .cmplz-service-description,
.cmplz-document .cmplz-dropdown .cmplz-sharing-data { box-sizing: border-box; }
@media only screen and (max-width: 600px) {
	body #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
		grid-template:
			"heading label checkbox chevron" auto
			"paragraph label checkbox chevron" auto
			/ minmax(0, 1fr) 0 auto 25px;
		row-gap: 2px;
	}
	body #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p { text-align: left; padding: 0 5px; }
	body #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose { grid-template-columns: 100px minmax(0, 1fr); }
	#cmplz-document .cmplz-dropdown .cookies-per-purpose div { overflow-wrap: anywhere; }
}