/**
 * Vela — sistema de diseño global.
 *
 * Esta es la ÚNICA fuente de verdad del alineado y de la marca. Se carga
 * antes que cualquier plugin, y los plugins de Vela leen estas variables en
 * vez de traer sus propias medidas. Si cambias --vela-ancho o --vela-gutter
 * aquí, se mueve el sitio entero: cabecera, secciones y pie a la vez.
 *
 * Los valores están muestreados de la maqueta del equipo de diseño.
 */

:root {

	/* ---------------------------------------------------------- marca */

	--vela-petroleo:        #0c3846;
	--vela-petroleo-oscuro: #0b3846;
	--vela-turquesa:        #5eb0c8;
	--vela-turquesa-suave:  #b4e0e1;
	--vela-dorado:          #997952;
	--vela-dorado-claro:    #f7dc6b;
	--vela-blanco:          #ffffff;

	/* Fondos y textos secundarios. */
	--vela-fondo:           #ffffff;
	--vela-fondo-alt:       #f5fdff;
	--vela-separador:       #47534b;
	--vela-texto-tenue:     #859ba2;

	/* -------------------------------------------------------- retícula

	   --vela-ancho  : ancho máximo del contenido (1772 px en la maqueta).
	   --vela-gutter : aire lateral mínimo antes de tocar el borde.

	   A 1920 px el gutter vale 74 px y el contenido mide exactamente
	   1772 px, que es lo que mide la línea del pie en el diseño. Por
	   debajo de eso el contenido encoge y el gutter se mantiene. */

	--vela-ancho:  1772px;
	--vela-gutter: clamp(20px, 4vw, 74px);

	/* Ancho de lectura para bloques de texto largo. */
	--vela-ancho-texto: 72ch;

	/* ----------------------------------------------------- tipografía

	   La maqueta usa dos familias:
	     · Einer Grotesk Heavy — menú y titulares. Es COMERCIAL: hay que
	       licenciarla y auto-alojarla. Mientras no esté, cae en Montserrat.
	     · Montserrat — cuerpo y pie. Libre, se carga desde Google Fonts. */

	--vela-fuente:        "Montserrat", -apple-system, BlinkMacSystemFont,
	                      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vela-fuente-titulo: "Einer Grotesk", var(--vela-fuente);
	/* Script de los rotulos manuscritos: «Francisqui», «conoce a». */
	--vela-fuente-script: "Tamara Falies", "Brush Script MT", cursive;

	/* ------------------------------------------------ escala tipográfica

	   NUEVE pasos para todo el sitio. Antes de esto había treinta y un
	   tamaños distintos en pantalla, medidos sobre cinco páginas: nueve
	   solo para el cuerpo de texto —13 · 13,9 · 14 · 14,1 · 14,6 · 15 ·
	   15,5 · 16 · 17,6— y el mismo titular de sección a 27, 35, 40 y 41
	   según qué plugin lo dibujara.

	   **En `vw`, y no en `cqi`.** La primera versión de esto usaba `cqi`,
	   que dentro de una sección mide contra su hueco y fuera cae al ancho
	   de la ventana. Parecía lo mejor de los dos mundos y era el error: el
	   MISMO token daba 16,1 px dentro de una sección y 17,7 en el pie. Un
	   token que rinde dos tamaños no es una escala. El texto que se lee no
	   debe depender de lo ancha que sea su columna —un párrafo en una
	   columna estrecha sigue queriendo 15 px—, así que se mide contra la
	   ventana y punto.

	   `cqi` sigue siendo lo correcto para lo que acompaña a un gráfico y
	   tiene que encoger con él: la baraja de destinos, el retrato del
	   carrusel, los iconos. Para eso no hay token, porque no es tipografía
	   de lectura.

	   **El `clamp` no es adorno: el suelo es lo que hace falta.** Sin él,
	   un valor que se lee bien en escritorio se queda en 10 px en un
	   móvil. El techo evita que en pantallas muy anchas el cuerpo se vaya
	   a 24.

	   Calibrado sobre lo que ya se veía bien: a 1360 de ventana cae a
	   menos de un píxel de los tamaños que había. Unificar no tenía que
	   verse como un rediseño. */

	--vela-txt-xs:    clamp(11px, .87vw, 14px);     /* cargos, copyright, notas   */
	--vela-txt-sm:    clamp(13px, 1.02vw, 16px);    /* etiquetas, pies de foto    */
	--vela-txt-md:    clamp(15px, 1.19vw, 19px);    /* cuerpo de texto            */
	--vela-txt-lg:    clamp(17px, 1.47vw, 23px);    /* destacado, subtítulos      */
	--vela-txt-xl:    clamp(21px, 1.93vw, 30px);    /* rótulo de sección          */
	--vela-txt-2xl:   clamp(26px, 2.76vw, 44px);    /* titular «ligero + fuerte»  */
	--vela-txt-3xl:   clamp(34px, 4.14vw, 68px);    /* titular grande             */

	/* Los manuscritos. Dos pasos porque no hacen el mismo papel: el grande
	   va sobre una foto a sangre y el pequeño dentro de una tarjeta. */
	--vela-script:    clamp(44px, 6.07vw, 104px);
	--vela-script-sm: clamp(34px, 4.45vw, 76px);

	/* ------------------------------------------------------ espaciado */

	--vela-esp-1: 8px;
	--vela-esp-2: 16px;
	--vela-esp-3: 24px;
	--vela-esp-4: clamp(28px, 2.5vw, 48px);
	--vela-esp-5: clamp(40px, 4.2vw, 80px);
	--vela-esp-6: clamp(56px, 6.7vw, 128px);

	/* --------------------------------------------------------- formas */

	--vela-radio:       12px;
	--vela-radio-suave: 28px;
	--vela-radio-pill:  999px;

	--vela-sombra:      0 6px 24px rgba(11, 56, 70, .18);
	--vela-sombra-alta: 0 18px 40px rgba(11, 56, 70, .18);

	/* -------------------------------------------------------- ritmo */

	--vela-curva:    cubic-bezier(.22, .61, .36, 1);
	--vela-duracion: .45s;

	/* --------------------------------------------------- barras de scroll */

	/*
	 * Pulgar en petróleo, y por eso el carril **no puede ser transparente**.
	 *
	 * La barra de la página se dibuja sobre lo que haya debajo, incluido el pie,
	 * que también es petróleo: con un carril translúcido, el pulgar se fundiría
	 * con él justo al llegar abajo. El carril sólido y claro le da contraste en
	 * cualquier sección, sea clara u oscura.
	 *
	 * El claro sale del propio petróleo rebajado con blanco, no de un hex nuevo:
	 * así sigue la paleta aunque alguien cambie el primario.
	 */
	--vela-scroll-pulgar:       var(--vela-petroleo);
	--vela-scroll-pulgar-hover: var(--vela-turquesa);
	--vela-scroll-pista:        color-mix(in srgb, var(--vela-petroleo) 9%, #fff);
	--vela-scroll-grosor:       10px;
}

@media ( prefers-reduced-motion: reduce ) {
	:root {
		--vela-duracion: .01ms;
	}
}

/* ==========================================================================
   Contenedor

   La clase que alinea todo. Úsala en cada sección y todo el sitio compartirá
   el mismo eje y el mismo aire lateral, venga del tema o de un plugin.
   ========================================================================== */

.vela-contenedor {
	width: min(100% - (2 * var(--vela-gutter)), var(--vela-ancho));
	margin-inline: auto;
}

/* Variante a sangre: ocupa todo el ancho pero conserva el aire lateral. */
.vela-contenedor--ancho {
	width: 100%;
	padding-inline: var(--vela-gutter);
}

/* Variante estrecha, para texto largo. */
.vela-contenedor--texto {
	width: min(100% - (2 * var(--vela-gutter)), var(--vela-ancho-texto));
	margin-inline: auto;
}

/* Separación vertical estándar entre secciones. */
.vela-seccion {
	padding-block: var(--vela-esp-5);
}

.vela-seccion--alt {
	background: var(--vela-fondo-alt);
}

/* ==========================================================================
   Puente con Elementor

   Elementor maqueta con sus propios contenedores, así que sin esto el sitio
   tendría dos retículas distintas: la del tema y los plugins por un lado
   (--vela-ancho / --vela-gutter) y la de Elementor por otro (1140 px y 10 px
   de aire, sus valores de fábrica).

   Un contenedor «boxed» de Elementor se compone de dos cajas: la exterior
   (.e-con) pone el aire lateral y la interior (.e-con-inner) limita el ancho
   a --container-max-width. Ajustando ambas al token, el resultado es
   exactamente el mismo cálculo que hace .vela-contenedor:

       min(100% - 2 * gutter, ancho)

   …y una sección puesta con shortcode dentro de Elementor queda alineada al
   píxel con la barra de navegación y el pie.

   El ancho máximo se fija en los ajustes globales del kit de Elementor
   (Ajustes del sitio → Diseño → Ancho del contenido) para que el editor
   también lo respete; aquí va el aire lateral, que el kit no expone.

   Solo los contenedores de primer nivel (.e-parent): a los anidados ya les
   llega el aire del padre, y los de ancho completo (.e-con-full) están a
   sangre a propósito —el vídeo de portada, por ejemplo—. Si un contenedor
   tiene su propio relleno puesto a mano en Elementor, ese gana: esto solo
   cambia el valor por defecto.
   ========================================================================== */

.e-con-boxed.e-parent {
	--container-default-padding-left:  var(--vela-gutter);
	--container-default-padding-right: var(--vela-gutter);
}

/*
 * Y la retícula, a las secciones de primer nivel.
 *
 * Un contenedor de Elementor puesto a «ancho completo» no alinea nada: sus
 * hijos llegan hasta el borde de la pantalla. Y si se le pone el ancho a mano
 * —1500 px aquí, 45 de relleno allá— cada sección acaba con su propio eje y
 * ninguna coincide con la barra de navegación ni con el pie.
 *
 * Esta regla se lo quita de las manos: toda sección de primer nivel usa el
 * mismo cálculo que `.vela-contenedor`, pase lo que pase en el panel de
 * Elementor. Si algún día cambia --vela-ancho, se mueve el sitio entero.
 *
 * Se aplica solo a las secciones «atómicas» —las de la versión 4 del editor,
 * que es donde se maqueta el contenido— y no a los contenedores clásicos. A
 * esos se les deja su ajuste de Elementor porque son los que alojan las
 * secciones que se pintan a sangre: el hero con su vídeo y la franja de
 * cayos. Esas se alinean por dentro, no por fuera.
 *
 * La pega: gana sobre lo que se ponga en Elementor, así que el ancho y el
 * aire lateral de una sección ya no se tocan ahí. Para lo que sí debe llegar
 * de lado a lado —una franja con foto de fondo— está la clase
 * `vela-a-sangre`, que se escribe en Elementor en «Avanzado → Clases CSS».
 */
.elementor > .e-con.e-atomic-element:not(.vela-a-sangre) {
	width: min(100% - (2 * var(--vela-gutter)), var(--vela-ancho));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;

	/* Y el aire lateral de fábrica de los contenedores anidados, a cero: son
	   10 px que Elementor pone por su cuenta y que desplazan el contenido
	   respecto al eje de la sección. La variable se hereda, así que con
	   ponerla aquí la respetan todos los de dentro. */
	--container-default-padding-inline-start: 0px;
	--container-default-padding-inline-end: 0px;
	--container-default-padding-left: 0px;
	--container-default-padding-right: 0px;
}

/*
 * A sangre: de lado a lado de la ventana, esté donde esté la sección y sin
 * importar el relleno de quien la contenga.
 *
 * El `100vw` incluye el ancho de la barra de desplazamiento, así que el
 * bloque sobresale unos píxeles por cada lado. Sobresale igual por los dos
 * —va centrado sobre el eje del padre—, y `overflow-x: clip` en la raíz
 * recorta ese sobrante sin crear un contexto de scroll, que es lo que
 * distingue a `clip` de `hidden` y lo que evita romper los elementos
 * pegajosos de la página.
 */
.vela-a-sangre {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/*
 * Y la contraria: una franja que ya llega a los bordes, pero cuyo contenido
 * tiene que caer sobre el eje.
 *
 * Es el caso del hero de «Nosotros»: el fondo en petróleo debe ir de lado a
 * lado, y el texto encima alinearse con la barra de navegación y con el pie.
 * Sin esto arrancaba en 10 px cuando el eje estaba en 54, y se notaba.
 *
 * Se escribe `vela-eje` en Elementor, en «Avanzado → Clases CSS», sobre el
 * contenedor que hace de franja.
 *
 * Lo que se cambia es la **variable** y no el relleno, porque así es como lo
 * declara Elementor: su regla es `.e-con { padding-inline-start:
 * var(--padding-inline-start) }` con 10 px de fábrica. Poniendo un
 * `padding-inline` propio habría que pelear con su especificidad; cambiando la
 * variable, su propia regla hace el trabajo. Los tres niveles del selector son
 * para ganarle a ese `.e-con` sin recurrir a `!important`.
 */
.elementor .e-con.vela-eje {
	--padding-inline-start: var(--vela-gutter);
	--padding-inline-end:   var(--vela-gutter);
}

/* ==========================================================================
   Barras de scroll

   Con la marca puesta, y en todas partes: la de la página y también las de
   cualquier zona desplazable de dentro —el panel de platillos del menú, una
   tabla ancha, un bloque de código—, porque los pseudoelementos se aplican a
   cualquier elemento con scroll.

   Van los dos juegos de propiedades a propósito, que no es duplicar:

     · `scrollbar-color` y `scrollbar-width` son el estándar y los entienden
       Firefox y Chrome desde la 121.
     · `::-webkit-scrollbar` es lo de siempre, y es lo único que entienden
       Safari y los Chrome anteriores.

   Dos detalles que solo se ven midiendo:

     · `scrollbar-color` **se hereda** y `scrollbar-width` **no**. Comprobado:
       con las dos solo en `html`, el panel de platillos recibía el color y se
       quedaba en `auto` de grosor. Por eso el grosor va en el selector
       universal.
     · En Chromium, declarar las propiedades estándar **desactiva** las reglas
       `::-webkit-scrollbar`. No es un conflicto que haya que resolver: allí
       manda el estándar —color y grosor, que es lo que importa— y el pulgar
       redondeado con aire a los lados se ve en Safari. El color es el mismo en
       los dos sitios, que es lo que hace que no se note el cambio.

   No se toca `scrollbar-gutter`: reservar el hueco siempre evita el salto de
   layout al aparecer la barra, pero cambia el ancho de todas las páginas y eso
   es una decisión aparte.
   ========================================================================== */

html {
	scrollbar-color: var(--vela-scroll-pulgar) var(--vela-scroll-pista);

	/*
	 * Freno al desplazamiento horizontal.
	 *
	 * Las franjas a sangre se hacen con `width: 100vw` y margenes negativos, y
	 * `100vw` cuenta la barra de scroll vertical: con ella en pantalla sobran
	 * unos pixeles por la derecha. En el movil no pasa —ahi la barra se dibuja
	 * encima y no ocupa—, asi que es cosa del escritorio.
	 *
	 * Recorta lo que se sale, aunque no lo elimina del todo: el `overflow` de la
	 * raiz se propaga al viewport y Chrome sigue dejando arrastrar esos pocos
	 * pixeles. Cerrarlo del todo pedia saber el ancho real sin barra, que no
	 * existe en CSS: habria que medirlo con JavaScript y publicarlo en una
	 * variable. No compensa por cinco pixeles.
	 *
	 * `clip` y no `hidden` a proposito: `hidden` convierte al elemento en un
	 * contenedor de desplazamiento y eso rompe `position: sticky` en toda la
	 * pagina. `clip` solo recorta.
	 */
	overflow-x: clip;
}

/* El grosor no se hereda: hay que dárselo a cada elemento con scroll. */
* {
	scrollbar-width: thin;
}

*::-webkit-scrollbar {
	width:  var(--vela-scroll-grosor);
	height: var(--vela-scroll-grosor);
}

*::-webkit-scrollbar-track {
	background: var(--vela-scroll-pista);
	border-radius: var(--vela-radio-pill);
}

*::-webkit-scrollbar-thumb {
	background: var(--vela-scroll-pulgar);
	border-radius: var(--vela-radio-pill);

	/*
	 * El borde transparente con `background-clip` es lo que deja el aire a los
	 * lados: recorta el fondo al interior del borde, así que el pulgar queda
	 * más fino que el carril sin tener que inventarse un segundo elemento.
	 */
	border: 2px solid transparent;
	background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--vela-scroll-pulgar-hover);
	background-clip: content-box;
}

/* El cuadradito donde se cruzan la barra vertical y la horizontal. */
*::-webkit-scrollbar-corner {
	background: transparent;
}

/* ==================================================== tipografía en Elementor

   Nueve clases, una por paso de la escala. Se escriben en el widget, en
   «Avanzado → Clases CSS», y ahí se le BORRA el tamaño de letra.

   Es el mismo trato que `vela-a-sangre` y `vela-eje`: el constructor apunta a
   una decisión que vive aquí, en vez de guardar un número suyo. Un tamaño
   escrito en el widget se queda dentro de la base de datos, donde no lo ve el
   repositorio, no sale en una revisión y nadie lo encuentra el día que haya
   que cambiar la escala.

   Lleva `!important` a regañadientes, y solo por esto: Elementor imprime lo
   del widget como CSS en linea, y contra eso no hay especificidad que valga.
   Si el widget no trae tamaño propio —que es como debe quedar—, sobra; pero
   entonces tampoco molesta.
   -------------------------------------------------------------------------- */

.vela-txt-xs,
.vela-txt-xs .elementor-heading-title  { font-size: var(--vela-txt-xs) !important; }

.vela-txt-sm,
.vela-txt-sm .elementor-heading-title  { font-size: var(--vela-txt-sm) !important; }

.vela-txt-md,
.vela-txt-md .elementor-heading-title  { font-size: var(--vela-txt-md) !important; }

.vela-txt-lg,
.vela-txt-lg .elementor-heading-title  { font-size: var(--vela-txt-lg) !important; }

.vela-txt-xl,
.vela-txt-xl .elementor-heading-title  { font-size: var(--vela-txt-xl) !important; }

.vela-txt-2xl,
.vela-txt-2xl .elementor-heading-title { font-size: var(--vela-txt-2xl) !important; }

.vela-txt-3xl,
.vela-txt-3xl .elementor-heading-title { font-size: var(--vela-txt-3xl) !important; }

.vela-script,
.vela-script .elementor-heading-title  { font-size: var(--vela-script) !important; }

.vela-script-sm,
.vela-script-sm .elementor-heading-title { font-size: var(--vela-script-sm) !important; }