/*
 * Base del tema Acturion.
 * Regla: este archivo solo CONSUME tokens de tokens.css. Cero valores sueltos.
 * Hello Elementor ya aporta un reset; aquí se fija únicamente lo que el diseño necesita.
 */

/* ---------- 1. Reset mínimo ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--acturion-font-sans);
	font-size: var(--acturion-body);
	font-weight: var(--acturion-weight-regular);
	line-height: var(--acturion-lh-body);
	color: var(--acturion-color-text);
	background: var(--acturion-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: var(--acturion-weight-regular);
	line-height: var(--acturion-lh-heading);
	overflow-wrap: anywhere;
}

/* ---------- 2. Escala tipográfica ---------- */

h1, .acturion-h1 { font-size: var(--acturion-h1); }
h2, .acturion-h2 { font-size: var(--acturion-h2); }
h3, .acturion-h3 { font-size: var(--acturion-h3); }
h4, .acturion-h4 { font-size: var(--acturion-h4); }
h5, .acturion-h5 { font-size: var(--acturion-h5); }
h6, .acturion-h6 { font-size: var(--acturion-h6); }

.acturion-h1-xl { font-size: var(--acturion-h1-xl); }

.acturion-display,
.acturion-display-sm {
	line-height: var(--acturion-lh-display);
	/* [figma MCP] los numerales van en Light. */
	font-weight: var(--acturion-weight-light);
	font-variant-numeric: tabular-nums;
}
.acturion-display    { font-size: var(--acturion-display); }
.acturion-display-sm { font-size: var(--acturion-display-sm); }

.acturion-body-18   { font-size: var(--acturion-body-18); }
.acturion-body-16   { font-size: var(--acturion-body-16); }
.acturion-body-14   { font-size: var(--acturion-body-14); }
small,
.acturion-description { font-size: var(--acturion-description); }

a {
	color: inherit;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.2em;
}

/* ---------- 3. Layout ---------- */

/* ---- Marco del sitio ----
   El sitio entero se dibuja dentro de un marco de --acturion-site-max centrado, y por
   encima de ese ancho quedan bandas a los lados con --acturion-frame-bg. Por defecto
   ese token vale el fondo de la página, así que las bandas se funden con ella y el
   sitio se lee a todo el ancho de la pantalla; puesto en negro o blanco (Apariencia >
   Personalizar > Site frame) se ve como Figma al reproducir el artboard sobre su
   lienzo.

   Se enmarcan las TRES cajas de primer nivel del documento (header, main y footer) en
   vez de envolverlas en un div, para no tocar el marcado del tema ni el de Elementor.
   Todo lo que va a sangre —el video del hero, las franjas de degradado, los fondos de
   sección— llega al borde del MARCO, no al de la pantalla.

   La escala fluida ya está anclada al marco vía --acturion-vw (tokens.css), así que el
   sitio enmarcado se ve exactamente igual que el mismo sitio con la ventana al ancho
   del marco. OJO: con las bandas en crema el corte sigue estando ahí para lo que va a
   sangre y NO es del color del fondo (el video del hero, las franjas de degradado, las
   secciones oscuras): esas cajas terminan en 1440. Para que el contenido crezca con la
   pantalla hay que subir --acturion-site-max, no cambiar el color. */

body {
	background: var(--acturion-frame-bg);
}

.acturion-header,
.acturion-main,
.acturion-footer {
	max-width: var(--acturion-site-max);
	margin-inline: auto;
	background: var(--acturion-color-bg);
}

/* El menú móvil es fixed y se sale del marco a propósito: por debajo de 768 la ventana
   es más estrecha que el marco y no hay bandas, así que nunca se solapan. */

/* Contenedor del sitio: --acturion-site-max máx., con el gutter fluido 24px (375) -> 102px
   (1440), lo que deja exactamente 1236px de contenido a 1440 y 327px a 375. */
.acturion-container {
	width: 100%;
	max-width: var(--acturion-site-max);
	margin-inline: auto;
	padding-inline: var(--acturion-gutter);
}

.acturion-section {
	padding-block: var(--acturion-space-section);
}

/* Contenedores raíz de Elementor: mismo modelo que .acturion-container.
   El Kit fija container_width = 1440 y padding 0; el gutter fluido se aplica aquí SOLO a los
   contenedores de primer nivel (.e-parent) para que los anidados no lo hereden.
   Pisa la custom property que Elementor pone en .e-con (2 clases > 1 clase, sin !important);
   un padding puesto desde el editor en un contenedor concreto sigue ganando (3 clases). */
.e-con.e-parent {
	--padding-left: var(--acturion-gutter-capped);
	--padding-right: var(--acturion-gutter-capped);
}

/* ---------- 4. Foco visible (AA) ---------- */

:focus-visible {
	outline: var(--acturion-focus-ring) solid var(--acturion-color-focus);
	outline-offset: var(--acturion-space-1);
	border-radius: var(--acturion-space-1);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* Campos de texto: el aro con offset se veía como un borde negro alrededor de la caja
   (pedido 2026-09-15). El foco sigue siendo visible (AA) pero con la señal propia de
   los campos del diseño: su filete inferior se duplica con una sombra pegada. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none;
	box-shadow: 0 2px 0 0 currentColor;
}

/* ---------- 5. Preferencias del usuario ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* [figma] mobile: la primera sección de cada página arranca a 28 de la cabecera
   (Section1 y=136 = header 108 + 28 en todos los frames del branch). El 50 que da
   el token es la mitad de la frontera de 100 ENTRE secciones y sobra en el
   arranque. El selector baja hasta el <section> del primer widget del primer
   contenedor de Elementor para no tocar secciones anidadas ni bloques --stacked. */
@media (max-width: 767px) {
	.acturion-main .elementor > .e-con:first-child > .elementor-widget:first-child > .elementor-widget-container > section {
		padding-top: 28px;
	}
}