/* ============================================================
   Aluar · Programa de Pasantías — child theme de Hello Elementor
   ============================================================
   Todo el texto vive en widgets nativos (Encabezado, Editor de texto, Botón,
   Imagen, Video). Este archivo pone lo que esos widgets no traen: tipografía de
   los titulares (Elementor descarta la del Encabezado al importar), layout que
   no tiene setting nativo y el comportamiento del header.

   El enganche son MARCADORES: cada bloque abre con un widget HTML de una línea,
   `<i class="al-m al-m-<tipo>">`, y el CSS sube al contenedor con :has().
   Elementor descarta al importar las clases y los IDs de contenedor; el markup
   de un widget HTML es lo único que llega intacto.

   Selector de sección: .e-con:has(> .elementor-widget-html .al-m-<tipo>)
   Todas las secciones son de ancho completo (content_width: full), así que no
   hay .e-con-inner en el medio.
   ============================================================ */

/* ---------- fuentes (licencia web de Aluar; mismas que aluar.com.ar) ---------- */
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/HelveticaNeueLTPro-Lt.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 300; font-style: italic; font-display: swap;
  src: url("../fonts/HelveticaNeueLTPro-LtIt.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/HelveticaNeueLTPro-Roman.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/HelveticaNeueLTPro-Md.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/HelveticaNeueLTPro-Bd.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Pro"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("../fonts/HelveticaNeueLTPro-Blk.woff2") format("woff2"); }

/* ---------- tokens (sacados del SVG del diseño) ---------- */
:root {
  --al-azul: #0E66CA;
  --al-azul-hover: #0A519F;
  --al-azul-claro: #8DB3D8;
  --al-petroleo: #133949;
  --al-celeste: #E5EEF8;
  --al-celeste-2: #E4EDF7;
  --al-naranja: #F9B256;
  --al-naranja-hover: #F7A033;
  --al-texto: #484740;
  --al-gris: #4A4A49;
  --al-blanco: #FFFFFF;
  --al-font: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --al-header-h: 96px;
}

body:has(.al-m) {
  font-family: var(--al-font);
  color: var(--al-texto);
  background: var(--al-blanco);
  -webkit-font-smoothing: antialiased;
}
html:has(.al-m) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.al-m) { scroll-behavior: auto; } }

/* La familia de los titulares le gana al kit de Elementor
   (`.elementor-widget-heading .elementor-heading-title`, 0,2,0). */
body:has(.al-m) .elementor-widget-heading .elementor-heading-title { font-family: var(--al-font); }

/* ---------- marcadores ----------
   El widget que lo contiene sale del flujo: si no, cuenta como hijo para el gap
   (y en una fila se lleva su ancho). Sigue en el DOM, así que :has() lo ve y el
   id sirve de ancla. */
body:has(.al-m) .elementor-widget-html:has(.al-m) {
  position: absolute !important; top: 0; left: 0; width: 0 !important; height: 0;
  margin: 0 !important; padding: 0 !important; pointer-events: none;
}
.al-m { display: block; width: 0; height: 0; scroll-margin-top: var(--al-header-h); }

/* ---------- texto corrido ---------- */
/* entre párrafos, un renglón entero (así separa el diseño: interlínea 24, salto 48) */
body:has(.al-m) .elementor-widget-text-editor p { margin: 0 0 1.25em; margin-block-end: 1lh; }
body:has(.al-m) .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
body:has(.al-m) .elementor-widget-text-editor a { color: inherit; }

/* ---------- escala de titulares ---------- */
body:has(.al-m) h2.elementor-heading-title {
  font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em;
}
body:has(.al-m) h3.elementor-heading-title { font-size: 21px; font-weight: 400; line-height: 1.2; }
@media (max-width: 767px) {
  body:has(.al-m) h2.elementor-heading-title { font-size: 30px; }
  body:has(.al-m) h3.elementor-heading-title { font-size: 18px; }
}

/* ---------- botones (pastilla) ---------- */
body:has(.al-m) .elementor-button { white-space: nowrap; transition: background-color .2s, color .2s, transform .2s; }
body:has(.al-m) .elementor-button:hover { transform: translateY(-1px); }
body:has(.al-m) a:focus-visible,
body:has(.al-m) summary:focus-visible,
body:has(.al-m) .elementor-button:focus-visible { outline: 2px solid var(--al-azul); outline-offset: 3px; }

/* ---------- filas de dos columnas: se apilan en tablet vertical / teléfono ---------- */
@media (max-width: 900px) {
  .e-con:has(> .elementor-widget-html .al-m-fila) { flex-direction: column !important; align-items: stretch !important; }
  .e-con:has(> .elementor-widget-html .al-m-fila) > .e-con { width: 100% !important; max-width: 100%; }
}
.e-con { max-width: 100%; }

/* ============================================================
   HEADER (template de Header Footer Elementor)
   Fijo arriba, como en aluar.com.ar. Transparente sobre el hero; al bajar,
   blanco (la clase `al-scrolled` la pone el script de functions.php).
   ============================================================ */
body:has(.al-m) #masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background-color .25s, box-shadow .25s;
}
body.admin-bar:has(.al-m) #masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar:has(.al-m) #masthead { top: 46px; } }
/* como aluar.com.ar: blanco al 80% con desenfoque (medido: rgba(255,255,255,.8) + blur(3px)) */
body.al-scrolled #masthead {
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 1px 0 rgba(19,57,73,.06);
}

.al-logo { display: block; line-height: 0; }
.al-logo svg { display: block; height: auto; }
.al-logo-aluar svg { width: 50px; }
.al-logo-infa svg { width: 96px; }
@media (max-width: 767px) {
  .al-logo-aluar svg { width: 38px; }
  .al-logo-infa svg { width: 72px; }
}

body:has(.al-m) .hfe-nav-menu .hfe-menu-item {
  font-family: var(--al-font) !important; font-weight: 500 !important;
  font-size: 12.5px !important; letter-spacing: .07em !important; text-transform: uppercase;
  color: var(--al-blanco) !important; text-shadow: 0 1px 8px rgba(19,57,73,.45);
  transition: color .2s;
}
body:has(.al-m) .hfe-nav-menu .hfe-menu-item:hover { color: var(--al-celeste) !important; }
body.al-scrolled .hfe-nav-menu .hfe-menu-item { color: var(--al-gris) !important; text-shadow: none; }
body.al-scrolled .hfe-nav-menu .hfe-menu-item:hover { color: var(--al-azul) !important; }
@media (min-width: 1025px) {
  body:has(.al-m) .hfe-nav-menu .hfe-menu-item { white-space: nowrap; padding: 8px 9px !important; }
  body:has(.al-m) .hfe-nav-menu-layout.horizontal .hfe-nav-menu { flex-wrap: nowrap; }
}
/* Elementor 4 les pone `--flex-wrap-mobile: wrap` a TODOS los contenedores: en el
   teléfono la fila del header se partía y la hamburguesa caía a un segundo renglón.
   Lo mismo en la fila de logos + redes del footer. */
.e-con:has(> .elementor-widget-html .al-m-header),
.e-con:has(> .elementor-widget-html .al-m-pie-top) { flex-wrap: nowrap !important; }

/* hamburguesa: en un disco blanco, para que se lea sobre cualquier zona de la foto.
   El ícono va con !important: el widget de HFE lo pinta de blanco desde su propio
   CSS (`div.hfe-nav-menu-icon svg { fill: #FFF }`, tres clases + id de elemento). */
body:has(.al-m) .hfe-nav-menu__toggle .hfe-nav-menu-icon { color: var(--al-gris) !important; }
body:has(.al-m) .hfe-nav-menu__toggle .hfe-nav-menu-icon svg { fill: var(--al-gris) !important; }
body:has(.al-m) .hfe-nav-menu__toggle {
  color: var(--al-gris); background: var(--al-blanco); border-radius: 50%;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(19,57,73,.18);
}
body:has(.al-m) .hfe-nav-menu__toggle svg { fill: currentColor; width: 22px; height: 22px; }
@media (max-width: 1024px) {
  /* el contenedor del menú se achica a la hamburguesa: con sus 560px de
     escritorio empujaba el toggle fuera de la pantalla */
  .e-con:has(> .elementor-widget-html .al-m-header) > .e-con:last-child { width: auto !important; flex: 0 0 auto; }
  body:has(.al-m) ul.hfe-nav-menu { flex-direction: column !important; flex-wrap: nowrap !important; width: 100%; background: var(--al-blanco); }
  body:has(.al-m) ul.hfe-nav-menu li { width: 100%; }
  body:has(.al-m) .hfe-nav-menu__toggle:not(.hfe-active-menu) + nav { overflow: hidden; }
  body:has(.al-m) .hfe-nav-menu .hfe-menu-item {
    color: var(--al-gris) !important; text-shadow: none; font-size: 14px !important;
    padding: 15px 20px !important; border-bottom: 1px solid var(--al-celeste);
  }
  /* el panel sale pegado al borde derecho y a todo el ancho de la pantalla */
  body:has(.al-m) .hfe-nav-menu__layout-horizontal.hfe-dropdown { box-shadow: 0 12px 24px rgba(19,57,73,.14); }
}

/* ============================================================
   HERO
   ============================================================ */
.e-con:has(> .elementor-widget-html .al-m-hero) {
  min-height: clamp(560px, 45vw, 760px);
  justify-content: center;
  background-position: center 35% !important;
}
.e-con:has(> .elementor-widget-html .al-m-hero) h1.elementor-heading-title {
  font-size: 65px; font-weight: 900; line-height: .92; letter-spacing: -.01em;
}
@media (max-width: 1024px) {
  .e-con:has(> .elementor-widget-html .al-m-hero) h1.elementor-heading-title { font-size: 54px; }
}
@media (max-width: 767px) {
  /* En el teléfono la foto va arriba, encuadrada en la persona, y el texto
     abajo sobre blanco: encima de la foto tapaba la cara. */
  .e-con:has(> .elementor-widget-html .al-m-hero) {
    min-height: 0; justify-content: flex-start;
    padding-top: 400px !important; padding-bottom: 44px !important;
    background-size: auto 380px !important; background-position: 64% 0 !important;
    background-color: var(--al-blanco) !important;
  }
  .e-con:has(> .elementor-widget-html .al-m-hero) h1.elementor-heading-title { font-size: 42px; }
}

/* ============================================================
   UNA EXPERIENCIA ÚNICA — la foto sale de la grilla hacia la izquierda y apoya
   en el borde inferior de la banda
   ============================================================ */
.e-con:has(> .elementor-widget-html .al-m-exp-foto) { align-self: flex-end; }
/* en el diseño los dos primeros párrafos van seguidos, sin renglón en blanco */
.e-con:has(> .elementor-widget-html .al-m-programa) .elementor-widget-text-editor:has(+ .elementor-widget-text-editor) p { margin: 0; }
.e-con:has(> .elementor-widget-html .al-m-programa) .elementor-widget-text-editor a { font-weight: 400; }
@media (min-width: 901px) {
  .e-con:has(> .elementor-widget-html .al-m-exp-foto) .elementor-widget-image {
    margin-left: -150px; width: calc(100% + 150px) !important; max-width: none;
  }
}
.e-con:has(> .elementor-widget-html .al-m-exp-foto) img,
.e-con:has(> .elementor-widget-html .al-m-foto) img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  /* texto primero, foto apoyada abajo */
  .e-con:has(> .elementor-widget-html .al-m-exp-foto) { order: 2; }
  .e-con:has(> .elementor-widget-html .al-m-exp-foto) img { max-width: 520px; margin: 0 auto; }
}

/* ============================================================
   ¡SUMATE A ALUAR! — caja azul montada sobre la foto del equipo
   ============================================================ */
.e-con:has(> .elementor-widget-html .al-m-sumate) > .elementor-widget-image img {
  display: block; width: 100%; height: clamp(320px, 55.5vw, 760px); object-fit: cover; object-position: center 30%;
}
.e-con:has(> .elementor-widget-html .al-m-sumbox) {
  margin-top: -233px; position: relative; z-index: 1;
}
.e-con:has(> .elementor-widget-html .al-m-sumbox) .elementor-widget-text-editor {
  column-count: 2; column-gap: 54px;
}
.e-con:has(> .elementor-widget-html .al-m-sumbox) .elementor-widget-text-editor p { break-inside: auto; }
@media (min-width: 768px) {
  /* el botón arranca donde arranca la segunda columna */
  .e-con:has(> .elementor-widget-html .al-m-sumbox) > .elementor-widget-button { padding-left: calc(50% + 27px); }
}
@media (max-width: 767px) {
  .e-con:has(> .elementor-widget-html .al-m-sumbox) { margin-top: -64px; }
  .e-con:has(> .elementor-widget-html .al-m-sumbox) .elementor-widget-text-editor { column-count: 1; }
}

/* ============================================================
   VIDEO — a todo el ancho; el autoplay al entrar en pantalla lo maneja
   functions.php (los navegadores solo lo permiten sin sonido)
   ============================================================ */
.e-con:has(> .elementor-widget-html .al-m-video) .elementor-widget-video { width: 100%; }
.e-con:has(> .elementor-widget-html .al-m-video) .elementor-wrapper { aspect-ratio: 1280 / 650; }
.e-con:has(> .elementor-widget-html .al-m-video) video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .e-con:has(> .elementor-widget-html .al-m-video) .elementor-wrapper { aspect-ratio: 16 / 9; }
}

/* ============================================================
   ÁREAS (Aluar e Infa) — título con dos filetes y un desplegable por área
   ============================================================ */
.e-con:has(> .elementor-widget-html .al-m-areas) > .elementor-widget-heading .elementor-heading-title {
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
  padding: 14px 16px; font-size: 21px; font-weight: 400; letter-spacing: 0;
}
/* todo el bloque se pliega bajo el título (pedido del cliente, 2026-10-28): landing.js
   mete un <button> dentro del título y alterna .al-abierto. Sin JS queda abierto.
   Los :hover/:focus le ganan al `button:hover` de Hello (0,1,1). */
body:has(.al-m) .al-plegar,
body:has(.al-m) .al-plegar:is(:hover, :focus) {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer;
  white-space: normal;  /* Hello les pone nowrap a los botones: en el teléfono desbordaba */
}
/* la flecha fina del diseño: abajo cerrado, arriba abierto */
body:has(.al-m) .al-plegar::after {
  content: ""; flex: none; width: 10px; height: 10px; margin: 0 4px 6px;
  border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg);
  transition: transform .25s;
}
body:has(.al-m) .al-abierto .al-plegar::after { transform: translateY(5px) rotate(-135deg); }
body:has(.al-m) .al-plegar:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.e-con:has(> .elementor-widget-html .al-m-infa) .al-plegar::after { border-color: var(--al-naranja); }
.al-plegable:not(.al-abierto) > .e-con { display: none !important; }  /* !important: la preview lo pone en línea */
/* el color de los filetes: azul en Aluar, blanco en Infa (sigue al color del título) */
.e-con:has(> .elementor-widget-html .al-m-lista) details { border-bottom: 1px solid transparent; }
.e-con:has(> .elementor-widget-html .al-m-lista) summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; font-size: 19px; line-height: 1.25; transition: color .2s;
}
.e-con:has(> .elementor-widget-html .al-m-lista) summary::-webkit-details-marker { display: none; }
.e-con:has(> .elementor-widget-html .al-m-lista) summary::before {
  content: "›"; color: var(--al-azul); font-weight: 700; font-size: 22px; line-height: 1;
  display: inline-block; width: 8px; transition: transform .2s;
}
.e-con:has(> .elementor-widget-html .al-m-lista) details[open] > summary::before { transform: rotate(90deg); }
.e-con:has(> .elementor-widget-html .al-m-lista) summary:hover { color: var(--al-azul); }
.e-con:has(> .elementor-widget-html .al-m-lista) details > :not(summary) {
  margin: 2px 0 10px 18px; font-size: 16px; line-height: 1.45;
}
.e-con:has(> .elementor-widget-html .al-m-lista) details a {
  display: inline-block; margin-top: 2px; padding: 6px 16px; border-radius: 99px;
  border: 1px solid var(--al-azul); color: var(--al-azul); text-decoration: none;
  font-size: 13px; letter-spacing: .02em; transition: background-color .2s, color .2s;
}
.e-con:has(> .elementor-widget-html .al-m-lista) details a:hover { background: var(--al-azul); color: var(--al-blanco); }

/* Infa: lista blanca, flechas naranjas */
.e-con:has(> .elementor-widget-html .al-m-lista-infa) summary::before { color: var(--al-naranja); }
.e-con:has(> .elementor-widget-html .al-m-lista-infa) summary:hover { color: var(--al-naranja); }
.e-con:has(> .elementor-widget-html .al-m-lista-infa) details a { border-color: var(--al-naranja); color: var(--al-naranja); }
.e-con:has(> .elementor-widget-html .al-m-lista-infa) details a:hover { background: var(--al-naranja); color: var(--al-petroleo); }

/* ============================================================
   INFA — foto a sangre a la izquierda (media pantalla), texto en la grilla
   ============================================================ */
@media (min-width: 901px) {
  .e-con:has(> .elementor-widget-html .al-m-infa-fila) > .e-con:has(> .elementor-widget-image) { width: calc(50% - 14px) !important; }
  .e-con:has(> .elementor-widget-html .al-m-infa-fila) > .e-con:not(:has(> .elementor-widget-image)) { max-width: 412px; }
}
.e-con:has(> .elementor-widget-html .al-m-infa-fila) img { display: block; width: 100%; height: auto; }
.e-con:has(> .elementor-widget-html .al-m-infa-texto) h6.elementor-heading-title {
  display: inline-block; border: 1px solid currentColor; border-radius: 99px;
  padding: 4px 18px; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: .02em;
}
@media (max-width: 900px) {
  .e-con:has(> .elementor-widget-html .al-m-infa-fila) { flex-direction: column !important; }
  .e-con:has(> .elementor-widget-html .al-m-infa-fila) > .e-con { width: 100% !important; }
  .e-con:has(> .elementor-widget-html .al-m-infa-texto) { padding: 0 20px !important; }
  /* la sección no tiene padding lateral (la foto va a sangre): el bloque de
     áreas lo recupera acá */
  .e-con:has(> .elementor-widget-html .al-m-infa) > .e-con:has(> .elementor-widget-html .al-m-areas) { padding: 0 20px !important; }
}

/* ============================================================
   ETAPAS — seis en fila; 3×2 en tablet, 2×3 en teléfono
   ============================================================ */
.e-con:has(> .elementor-widget-html .al-m-etapas-grilla) svg { display: block; width: 120px; height: 120px; margin-inline: auto; }
.al-disco { fill: var(--al-azul); }
.al-trazo { fill: var(--al-blanco); }
.al-disco-pendiente { fill: none; stroke: var(--al-azul); stroke-width: 2; stroke-dasharray: 6 6; }
/* diseño: Light 23 con interlínea 24; la fecha en Light Italic, sin paréntesis y más
   chica (pedido del cliente, 2026-10-26) */
.e-con:has(> .elementor-widget-html .al-m-etapas-grilla) h3.elementor-heading-title {
  font-size: 23px; font-weight: 300; line-height: 24px;
}
.e-con:has(> .elementor-widget-html .al-m-etapas-grilla) h3 em {
  display: inline-block; margin-top: 6px; font-weight: 300; font-style: italic; font-size: 18px; line-height: 21px;
}
/* seis columnas de 176 + 5 × 7 = 1091 (entra en 1092): «preocupacionales» mide 175
   y «(Nov y Dic 2026)» 164 en Light 23 — con columnas de 164 se partían */
@media (min-width: 1101px) {
  .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) { column-gap: 7px !important; }
  .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) > .e-con { width: 176px !important; }
}
@media (max-width: 1100px) {
  .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) > .e-con { width: calc(33.333% - 14px) !important; }
}
@media (max-width: 600px) {
  .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) > .e-con { width: calc(50% - 10px) !important; }
  .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) svg { width: 96px; height: 96px; }
  .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) h3.elementor-heading-title { font-size: 19px; line-height: 21px; }
  .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) h3 em { font-size: 15px; line-height: 18px; }
}

/* ============================================================
   LO QUE BUSCAMOS / LO QUE OFRECEMOS — listas con flecha y arcos decorativos
   ============================================================ */
.e-con:has(> .elementor-widget-html .al-m-req) { position: relative; overflow: hidden; }
.e-con:has(> .elementor-widget-html .al-m-req) ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.e-con:has(> .elementor-widget-html .al-m-req) li { position: relative; padding-left: 12px; font-size: 20px; line-height: 22px; }
.e-con:has(> .elementor-widget-html .al-m-req) li::before {
  content: "›"; position: absolute; left: 0; top: -.02em; color: var(--al-azul); font-weight: 700;
}
/* el widget de los arcos sale del flujo y ocupa toda la sección: en Elementor el
   widget es `position: relative`, así que sin esto los arcos se ubicaban contra
   el widget (centrado) y caían encima de «Lo que buscamos» */
.e-con:has(> .elementor-widget-html .al-m-req) > .elementor-widget-html:has(.al-deco-req) {
  position: absolute !important; inset: 0; width: auto !important; max-width: none;
  margin: 0 !important; pointer-events: none; z-index: 0;
}
.e-con:has(> .elementor-widget-html .al-m-req) > .e-con { position: relative; z-index: 1; }
.al-deco-req { position: absolute; right: 28px; top: 88px; width: 248px; pointer-events: none; }
.al-deco-req svg { display: block; width: 100%; height: auto; }
.al-linea { fill: none; stroke: var(--al-azul); stroke-width: 1px; }
@media (max-width: 1200px) { .al-deco-req { width: 160px; right: -20px; top: 40px; opacity: .9; } }
@media (max-width: 767px) { .al-deco-req { width: 110px; right: -24px; top: 24px; } }

/* ============================================================
   HISTORIAS QUE INSPIRAN — carrusel: la primera tarjeta arranca en la grilla
   de 864 y las siguientes se cortan en el borde de la pantalla
   ============================================================ */
/* la sección no tiene padding lateral (la pista va de borde a borde): el título
   y las flechas se quedan en la grilla, con margen en pantallas chicas */
.e-con:has(> .elementor-widget-html .al-m-historias) > .e-con:not(:has(> .elementor-widget-html .al-m-reels)) {
  width: min(864px, 100% - 40px) !important;
}
.e-con:has(> .elementor-widget-html .al-m-reels) {
  flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
  padding-inline: max(24px, calc((100% - 864px) / 2)) !important;
  scroll-padding-inline: max(24px, calc((100% - 864px) / 2));
}
.e-con:has(> .elementor-widget-html .al-m-reels)::-webkit-scrollbar { display: none; }
.e-con:has(> .elementor-widget-html .al-m-reels) > .e-con {
  flex: 0 0 416px !important; scroll-snap-align: start; aspect-ratio: 9 / 16;
  overflow: hidden; background: var(--al-petroleo);
}
.e-con:has(> .elementor-widget-html .al-m-reels) .elementor-widget-video,
.e-con:has(> .elementor-widget-html .al-m-reels) .elementor-wrapper { height: 100%; }
.e-con:has(> .elementor-widget-html .al-m-reels) .elementor-wrapper { aspect-ratio: 9 / 16; }
.e-con:has(> .elementor-widget-html .al-m-reels) video { width: 100%; height: 100%; object-fit: cover; }
/* la portada nativa del widget (image overlay) llena la tarjeta */
.e-con:has(> .elementor-widget-html .al-m-reels) .elementor-custom-embed-image-overlay { background-size: cover; background-position: center; }
/* el play va arriba a la derecha: al centro tapaba el texto de la portada */
.e-con:has(> .elementor-widget-html .al-m-reels) .elementor-custom-embed-play {
  top: 16px; left: auto; right: 16px; transform: none;
}
.e-con:has(> .elementor-widget-html .al-m-reels) .elementor-custom-embed-play i { font-size: 46px; }
.e-con:has(> .elementor-widget-html .al-m-reels) .elementor-custom-embed-play svg { width: 46px; height: 46px; }
@media (max-width: 767px) {
  .e-con:has(> .elementor-widget-html .al-m-reels) > .e-con { flex-basis: 78% !important; }
}

.al-flechas { display: flex; gap: 8px; }
.al-flechas button {
  width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--al-azul); background: transparent; color: var(--al-azul);
  display: grid; place-items: center; transition: background-color .2s, color .2s, opacity .2s;
}
.al-flechas button svg { width: 22px; height: 22px; }
.al-flechas button:hover:not(:disabled) { background: var(--al-azul); color: var(--al-blanco); }
.al-flechas button:focus-visible { outline: 2px solid var(--al-azul); outline-offset: 3px; }
.al-flechas button:disabled { opacity: .35; cursor: default; }

/* ============================================================
   CIERRE
   ============================================================ */
.e-con:has(> .elementor-widget-html .al-m-cierre) h2.elementor-heading-title {
  font-size: 53.5px; line-height: 1; letter-spacing: -.02em;
}
@media (max-width: 767px) {
  .e-con:has(> .elementor-widget-html .al-m-cierre) h2.elementor-heading-title { font-size: 38px; }
}
/* diseño: 19/24 y sin renglón en blanco entre los párrafos */
.e-con:has(> .elementor-widget-html .al-m-cierre) .elementor-widget-text-editor { font-size: 19px; line-height: 24px; }
.e-con:has(> .elementor-widget-html .al-m-cierre) .elementor-widget-text-editor p { margin: 0; }
.e-con:has(> .elementor-widget-html .al-m-cierre) .elementor-widget-text-editor a { color: var(--al-azul); text-decoration: none; }
.e-con:has(> .elementor-widget-html .al-m-cierre) .elementor-widget-text-editor a:hover { text-decoration: underline; }

/* ============================================================
   FOOTER (template de Header Footer Elementor) — el de aluar.com.ar
   ============================================================ */
.e-con:has(> .elementor-widget-html .al-m-pie) h6.elementor-heading-title {
  font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 21px;
}
.e-con:has(> .elementor-widget-html .al-m-pie-sede) h6.elementor-heading-title { font-size: 16px; line-height: 16px; }
.e-con:has(> .elementor-widget-html .al-m-pie) .elementor-widget-text-editor p { margin: 0 0 8px; }
.e-con:has(> .elementor-widget-html .al-m-pie-sede) .elementor-widget-text-editor p { margin: 0 0 10px; }
.e-con:has(> .elementor-widget-html .al-m-pie-sede) .elementor-widget-text-editor p:first-child { margin-bottom: 18px; }
/* filete gris arriba del footer, como en aluar.com.ar */
.e-con:has(> .elementor-widget-html .al-m-pie) { border-top: 1px solid #EDEDED; }
/* el botón «volver arriba» es fixed: su widget sale de la fila de la barra azul
   (si no, ocupa lugar y los links no llegan al borde derecho) */
body:has(.al-m) .elementor-widget-html:has(.al-arriba) { position: absolute !important; width: 0 !important; margin: 0 !important; }
.e-con:has(> .elementor-widget-html .al-m-pie) .elementor-widget-text-editor a { text-decoration: none; }
.e-con:has(> .elementor-widget-html .al-m-pie) .elementor-widget-text-editor a:hover { color: var(--al-azul); }
.e-con:has(> .elementor-widget-html .al-m-pie) .elementor-widget-text-editor a[href^="tel:"] { text-decoration: underline; }
.e-con:has(> .elementor-widget-html .al-m-pie-barra) .elementor-widget-text-editor p { margin: 0; }
.e-con:has(> .elementor-widget-html .al-m-pie-barra) .elementor-widget-text-editor a { color: inherit; text-decoration: underline; }
.e-con:has(> .elementor-widget-html .al-m-pie-barra) .elementor-widget-text-editor a + a { margin-left: 40px; }
.e-con:has(> .elementor-widget-html .al-m-pie-hecho) .elementor-widget-text-editor p { margin: 0; }
.al-bandera { display: block; line-height: 0; }
.al-bandera svg { width: 16px; height: 16px; }
.al-logo-pie svg { width: 92px; height: 80px; }
.al-logo-veshr svg { width: 70px; }
@media (max-width: 767px) {
  /* logos + redes en una fila de 350px: se achican los logos y las cajas toman su ancho */
  .al-logo-pie svg { width: 66px; height: 58px; }
  .al-logo-veshr svg { width: 52px; }
  .e-con:has(> .elementor-widget-html .al-m-pie-top) > .e-con { width: auto !important; flex: 0 0 auto; }
  .e-con:has(> .elementor-widget-html .al-m-pie-top) > .e-con:has(.al-logo-pie) { gap: 22px !important; }
}
@media (max-width: 900px) {
  .e-con:has(> .elementor-widget-html .al-m-pie-cols) { flex-wrap: wrap !important; gap: 28px 24px !important; }
  .e-con:has(> .elementor-widget-html .al-m-pie-cols) > .e-con { width: calc(50% - 12px) !important; }
  .e-con:has(> .elementor-widget-html .al-m-pie-cols) > .e-con:has(> .elementor-widget-html .al-m-pie-sede) { width: 100% !important; }
}
@media (max-width: 767px) {
  .e-con:has(> .elementor-widget-html .al-m-pie-barra) > .e-con { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .e-con:has(> .elementor-widget-html .al-m-pie-barra) .elementor-widget-text-editor { text-align: left !important; }
}
.al-arriba {
  position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 16px; z-index: 999;
  width: 40px; height: 40px; border-radius: 50%; background: var(--al-blanco);
  box-shadow: 0 2px 10px rgba(19,57,73,.25); display: grid; place-items: center;
  color: var(--al-azul); pointer-events: auto; transition: transform .2s;
}
.al-arriba:hover { transform: translateY(-2px); }
.al-arriba svg { width: 16px; height: 16px; }

/* ============================================================
   ENTRADAS AL HACER SCROLL — las de aluar.com.ar (componente FadeIn, framer-motion)
   ============================================================
   Cada bloque arranca transparente y corrido, y entra en 0,8 s (easeOut) una sola
   vez, cuando asoma 100 px en pantalla. Bloques: suben 20 px. Filas foto | texto:
   el de la izquierda entra desde la izquierda y el de la derecha desde la derecha
   (40 px). Íconos: crecen desde la mitad, medio segundo después.
   El estado inicial lo pone este CSS (así no parpadea al cargar) y landing.js
   agrega .al-visto. Sin JS, con movimiento reducido o en el editor no se oculta
   nada; `al-mostrar` es el respaldo: si el JS no corrió, a los 3 s muestra todo
   (y es también la marca con la que el JS reconoce qué animar). */
:root { --al-lado: 0; }                              /* teléfono y tablet: todo sube */
@media (min-width: 1025px) { :root { --al-lado: 1; } }
@keyframes al-mostrar { to { opacity: 1; transform: none; } }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  /* suben */
  body:not(.elementor-editor-active) :is(
    .e-con:has(> .elementor-widget-html .al-m-hero) > .e-con,
    .e-con:has(> .elementor-widget-html .al-m-sumate) > .elementor-widget-image,
    .e-con:has(> .elementor-widget-html .al-m-sumbox),
    .e-con:has(> .elementor-widget-html .al-m-video) > .elementor-widget-video,
    .e-con:has(> .elementor-widget-html .al-m-areas) > .elementor-widget-heading,
    .e-con:has(> .elementor-widget-html .al-m-etapas) > .elementor-widget-heading,
    .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) > .e-con,
    .e-con:has(> .elementor-widget-html .al-m-banda) > :is(.elementor-widget-heading, .elementor-widget-text-editor),
    .e-con:has(> .elementor-widget-html .al-m-historias) > .e-con
  ) { opacity: 0; transform: translateY(20px); animation: al-mostrar 0s 3s forwards; }

  /* filas: el primero desde la izquierda, el último desde la derecha */
  body:not(.elementor-editor-active) :is(
    .e-con:has(> .elementor-widget-html :is(.al-m-fila, .al-m-infa-fila)) > .e-con:has(~ .e-con)
  ) { opacity: 0; transform: translate(calc(-40px * var(--al-lado)), calc(20px - 20px * var(--al-lado)));
      animation: al-mostrar 0s 3s forwards; }
  body:not(.elementor-editor-active) :is(
    .e-con:has(> .elementor-widget-html :is(.al-m-fila, .al-m-infa-fila)) > .e-con:not(:has(~ .e-con))
  ) { opacity: 0; transform: translate(calc(40px * var(--al-lado)), calc(20px - 20px * var(--al-lado)));
      animation: al-mostrar 0s 3s forwards; }

  /* íconos */
  body:not(.elementor-editor-active) :is(
    .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) > .e-con > .elementor-widget-html,
    .al-deco-req
  ) { opacity: 0; transform: scale(.5); animation: al-mostrar 0s 3s forwards; --al-d0: .5s; }

  /* las seis etapas entran en cascada (el ícono hereda el retraso de su etapa) */
  .e-con:has(> .elementor-widget-html .al-m-etapas-grilla) > .e-con { --al-paso: .15s; }
}
/* body:has(): 0,2,1, le gana a la transición de los widgets de Elementor (0,2,0) */
body:has(.al-m) .al-visto {
  opacity: 1 !important; transform: none !important;
  transition: opacity .8s cubic-bezier(0, 0, .58, 1), transform .8s cubic-bezier(0, 0, .58, 1);
  transition-delay: calc(var(--al-d0, 0s) + var(--al-i, 0) * var(--al-paso, 0s));
}