/*
 * Estilos de todo el sitio de la primera ronda (versión aprobada por el cliente, 14-10-2026): barra superior,
 * menú, menú móvil, botón de volver arriba y el pie propio (template-parts/global/pie.php), que reemplaza a la
 * plantilla de Elementor 9231. Se carga en todas las páginas, después del CSS del tema (inc/global.php).
 *
 * Medidas del pie tomadas de la versión aprobada renderizada (estilos calculados en 1366 y 390 px).
 */

/* Rajdhani alojada en el sitio (primera ronda, 14-10-2026), en lugar de Google Fonts: los mismos archivos y
   subconjuntos (latin y latin-ext, pesos 300 a 700), sin dos dominios externos antes del primer dibujo. Licencia
   OFL, en fuentes/OFL.txt. inc/global.php saca la hoja de Google que imprimía Redux y precarga los pesos 400–700. */
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 300; font-display: swap; src: url('fuentes/rajdhani-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 300; font-display: swap; src: url('fuentes/rajdhani-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/rajdhani-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/rajdhani-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/rajdhani-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/rajdhani-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/rajdhani-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/rajdhani-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('fuentes/rajdhani-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('fuentes/rajdhani-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ht-navy: #14264C;
  --ht-navy-deep: #0B1731;
  --ht-green: #66CC99;
  --ht-green-bright: #79DFAD;
  /* Texto de lectura de las páginas propias (párrafos, listas, testimonios): 18 px, 17 en celular. La versión
     aprobada usaba 16, que en Rajdhani (de x baja) se lee chico; pedido de Facundo, 15-10. Un solo lugar para
     ajustarlo; títulos, etiquetas, botones, menú y pie no dependen de esto. */
  --ht-texto: 18px;
  --ht-texto-alto: 30px;
  /* bajadas bajo los títulos de portada: un escalón por encima del texto */
  --ht-bajada: 20px;
  --ht-bajada-alto: 32px;
}
@media (max-width: 767px) {
  :root { --ht-texto: 17px; --ht-texto-alto: 28px; --ht-bajada: 18px; --ht-bajada-alto: 30px; }
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Texto seleccionado con el verde de la marca. Con body delante: el CSS dinámico del tema la pinta de blanco
   (::selection { background: #FFFFFF }) con la misma especificidad y va después; en fondos claros no se veía (16-10). */
body ::selection { color: var(--ht-navy-deep); background: var(--ht-green); text-shadow: none; }

/* ---------- Barra superior ---------- */
#rs-header .toolbar-sl-share ul li { margin-left: 16px; }
#rs-header .toolbar-sl-share ul li a i { font-size: 24px; line-height: 50px; }
#rs-header .toolbar-contact .ht-toolbar-whatsapp .fab { margin-right: 7px; font-size: 14px; }
/* LinkedIn con su logo cuadrado (\f08c de Font Awesome 5 Brands), como en la versión aprobada: el CSS de Font
   Awesome 4 que carga después redefine .fa-linkedin con \f0e1, que en Brands es el logo de solo "in" */
:is(#rs-header .toolbar-sl-share, .ht-pie__iconos) .fab.fa-linkedin::before { content: "\f08c"; }

/* ---------- Menú ---------- */
/* Escritorio: todo blanco; verde al pasar el mouse, en la página actual y en la flecha de Servicios */
#rs-header #primary-menu-single > li > a { color: #fff; }
#rs-header #primary-menu-single > li > a:hover,
#rs-header #primary-menu-single > li:hover > a,
#rs-header #primary-menu-single > li:is(.current-menu-item,.current-menu-ancestor,.current-menu-parent) > a,
#rs-header #primary-menu-single > li.menu-item-has-children > a::after,
#rs-header #primary-menu-single > li > span { color: var(--ht-green); }
/* Celular y tableta: el logo, centrado en su fila como el botón del menú; quedaba 6,5 px más arriba en todos los
   anchos hasta 991 (medido el 15-10). Corrido sin tocar el armado del tema. */
@media (max-width: 991px) {
  #rs-header .menu-area .logo-area img { position: relative; top: 6px; }
}
/* Escritorio: más aire entre la línea de la barra superior y la fila del logo y el menú (pedido del 15-10). Solo con la
   barra en su lugar: fija al bajar (.sticky) queda como estaba. */
@media (min-width: 992px) {
  #rs-header .menu-sticky:not(.sticky) .menu-area { padding-top: 14px; }
}
/* Sin el botón de los tres puntos (menú lateral) en escritorio: el menú ya muestra todo */
#rs-header .header-quote .sidebarmenu-area:not(.mobilehum) { display: none; }

/* Celular: el panel del menú queda encima de todo, en azul; blanco, y verde en la página actual */
nav.menu-wrap-off.menu-ofcn { z-index: 100002; background: #0E1D3D; }
nav.menu-ofcn .close-button { background: transparent; }
nav.menu-ofcn #mobile_menu .menu li { border-color: rgba(255,255,255,.12); }
nav.menu-ofcn #mobile_menu #primary-menu-single1 > li > a,
nav.menu-ofcn #mobile_menu #primary-menu-single1 > li > a:visited { color: #fff; }
nav.menu-ofcn #mobile_menu #primary-menu-single1 > li:is(.current-menu-item,.current-menu-ancestor,.current-menu-parent) > a,
nav.menu-ofcn #mobile_menu #primary-menu-single1 > li > a:is(:hover,:focus-visible) { color: var(--ht-green); }
nav.menu-ofcn #mobile_menu #primary-menu-single1 .sub-menu a { color: rgba(255,255,255,.85); }
nav.menu-ofcn #mobile_menu #primary-menu-single1 .sub-menu a:hover { color: var(--ht-green); }
nav.menu-ofcn #mobile_menu #primary-menu-single1 .submenu-button { opacity: 1; }
nav.menu-ofcn #mobile_menu #primary-menu-single1 .submenu-button::before,
nav.menu-ofcn #mobile_menu #primary-menu-single1 .submenu-button::after { background: rgba(255,255,255,.75); }

@media (max-width: 767px) {
  /* zonas de toque cómodas (44 px) en la barra */
  #rs-header .toolbar-area { padding-top: 0; padding-bottom: 0; }
  #rs-header .rs-contact-info li a { display: inline-flex; align-items: center; min-height: 44px; }
  body { overflow-x: clip; }
}

/* ---------- Páginas propias (Servicios, Contacto y Academy): body.ht-pagina-propia ---------- */
/* Movido de servicios.css en la primera ronda (14-10-2026), cuando Contacto y Academy pasaron a usarlo. */
/*
 * Anclas (tarjeta → detalle en Servicios, #en-la-URL): la barra fija del tema tapa lo que queda debajo de ella.
 * scroll-padding-top descuenta su alto en todo desplazamiento a un ancla. pagina.js pone el alto real en
 * --ht-barra cuando la barra está fija; estos son los del tema (104 px desde 992 de ancho, 80 debajo) para
 * el primer desplazamiento, que suele empezar antes de que la barra se fije.
 */
html:has(.ht-pagina-propia) { --ht-barra: 80px; scroll-padding-top: calc(var(--ht-barra) + 16px); }
@media (min-width: 992px) { html:has(.ht-pagina-propia) { --ht-barra: 104px; } }

/* Encabezado del tema (header5): transparente, con texto blanco, y su barra (.sticky-wrapper) va en
   position:absolute encima del banner de cada página, que es el que le reserva el alto (163 px en
   escritorio, 185 en móvil). En las páginas propias no hay banner: la barra vuelve al flujo, así ocupa su lugar
   en cualquier ancho, y lleva el azul de su estado fijo al hacer scroll. */
.ht-pagina-propia #rs-header { background-color: #14264C; border-bottom: 1px solid rgba(255,255,255,.09); }
.ht-pagina-propia #rs-header .sticky-wrapper { position: relative; }

.ht-progreso {
  position: fixed; z-index: 100000; top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg,#66CC99,#60B0E2);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Linterna: luz que sigue al cursor sobre los fondos oscuros (assets/global/linterna.js, 15-10) ---------- */
/* la misma luz de la sección final de Contacto; encima del contenido, mezclada en "screen": aclara lo oscuro y deja
   igual el texto blanco. Aparece y se apaga con el cursor.
   Con `span` delante (0,1,1): servicios.css carga después y revierte todo con `.ht-servicio * { all: revert }`
   (0,1,0); solo con `.ht-linterna` la luz nunca se dibujó en Servicios (visto el 16-10, por estilos calculados). */
span.ht-linterna {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  opacity: 0; transition: opacity .4s ease; mix-blend-mode: screen;
  /* 280 px y .10 desde el 16-10 (eran 420 y .16): el cliente la pidió más suave y más chica */
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(102,204,153,.10), transparent 60%);
}
.is-iluminado > span.ht-linterna { opacity: 1; }
/* la portada de la Homepage, en su propia capa: así la luz no se dibuja sobre el encabezado, que va encima */
.ht-portada { isolation: isolate; }

/* ---------- Botón volver arriba ---------- */
/* siempre por encima de franjas y degradados; verde, con un vaivén suave que invita a usarlo. Con body delante:
   el CSS dinámico del tema (opciones de Redux) lo pinta de blanco con la misma especificidad y va después */
#scrollUp { z-index: 100000; }
body #scrollUp i {
  display: grid; place-items: center; width: 48px; height: 48px;
  color: var(--ht-navy); background: var(--ht-green);
  border: 2px solid rgba(255,255,255,.78); box-shadow: 0 10px 28px rgba(8,19,43,.24);
  line-height: 1; animation: ht-flotar 2.5s ease-in-out infinite;
}
body #scrollUp i:hover { opacity: 1; transform: translateY(-3px) scale(1.06); }
@keyframes ht-flotar {
  0%, 100% { transform: translateY(0); box-shadow: 0 10px 28px rgba(8,19,43,.24), 0 0 0 0 rgba(102,204,153,.34); }
  50% { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(8,19,43,.26), 0 0 0 9px rgba(102,204,153,0); }
}

/* ---------- Pie ---------- */
.ht-pie {
  background: #fff; color: #6C6C6C;
  font-family: "Rajdhani", Arial, sans-serif; font-size: 16px; line-height: 27.2px;
}
#rs-footer.ht-pie :is(h2,h3,p,ul,address) { margin: 0; padding: 0; } /* con el id: el tema da márgenes a las listas del pie */
#rs-footer.ht-pie .ht-pie__hablemos h2 { margin-bottom: 20px; }
#rs-footer.ht-pie :is(.ht-pie__hablemos,.ht-pie__oficina,.ht-pie__legal) p { margin-bottom: 26px; }
#rs-footer.ht-pie .ht-pie__oficina h3 { margin-bottom: 35px; }
#rs-footer.ht-pie .ht-pie__redes h3 { margin-bottom: 20px; }
#rs-footer.ht-pie .ht-pie__redes h3:not(:first-child) { margin-top: 35px; }
.ht-pie h3 { color: #000; font-size: 24px; line-height: 32px; font-weight: 700; }

/* Fila 1: mapa y Hablemos, mitad y mitad, con tope de 1920 px */
.ht-pie__principal { display: grid; grid-template-columns: 1fr 1fr; max-width: 1920px; margin: 0 auto; }
.ht-pie__mapa { position: relative; min-height: 657px; }
.ht-pie__mapa iframe { display: block; width: 100%; height: 657px; border: 0; filter: saturate(0); }
/* Waze y Google Maps encima del pie del mapa, centrados en cada mitad de la primera mitad de la columna */
.ht-pie__llegar { position: absolute; left: 0; bottom: 30px; display: flex; width: 50%; padding: 10px; }
.ht-pie__llegar a {
  flex: 1; display: grid; place-items: start center; height: 87px;
}
.ht-pie__llegar a i {
  display: grid; place-items: center; width: 78px; height: 78px; box-sizing: border-box;
  border: 3px solid #000; border-radius: 50%; background: #fff; color: #000; font-size: 36px; line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.ht-pie__llegar a:is(:hover,:focus-visible) i { background: #000; color: #fff; }
.ht-pie__llegar a i::before { font-size: 36px; }

.ht-pie__hablemos {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  padding: 30px; color: #fff;
  /* la foto, recién con el pie cerca de la pantalla (is-cerca, script en pie.php) */
  --ht-edificio: var(--ht-edificio-1500);
  /* anclada abajo: en pantallas más anchas el recorte es arriba y la base del edificio no se pierde (15-10) */
  background: center bottom / cover no-repeat;
}
.ht-pie.is-cerca .ht-pie__hablemos { background-image: var(--ht-edificio); }
.ht-pie__hablemos::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.5); }
/* Por encima de 1920 px la fila no crece y a la derecha queda el blanco del pie: la foto se funde en él en vez de
   cortarse de golpe (15-10). Con una máscara que vuelve transparente el bloque, y no con un degradado blanco encima:
   el blanco sobre la capa oscura de la foto daba grises y una línea en el borde. La curva es suave al final. */
@media (min-width: 1921px) {
  .ht-pie__hablemos {
    --ht-fundido: linear-gradient(90deg, #000 calc(100% - 320px), rgba(0,0,0,.6) calc(100% - 170px), rgba(0,0,0,.2) calc(100% - 70px), transparent);
    -webkit-mask-image: var(--ht-fundido);
    mask-image: var(--ht-fundido);
  }
}
.ht-pie__hablemos h2 { color: #fff; font-size: 39px; line-height: 39px; font-weight: 700; margin-bottom: 20px; }
.ht-pie__hablemos p { color: #fff; margin-bottom: 26px; }

/* Fila 2: oficina a la izquierda; redes y WhatsApp en el último cuarto. Mitades y rellenos como las columnas
   de Elementor de la versión aprobada: el texto de la oficina a 20 px del borde, las redes a 10 px de su cuarto */
.ht-pie__datos {
  display: grid; grid-template-columns: 50% 25% 25%; max-width: 1200px; margin: 0 auto; padding: 20px 0;
}
.ht-pie__oficina { padding: 0 20px; }
.ht-pie__redes { padding: 0 10px; }
.ht-pie__oficina h3 { margin-bottom: 35px; }
.ht-pie__oficina p { color: #000; margin-bottom: 26px; }
.ht-pie__oficina img { display: inline; vertical-align: middle; } /* como en Bootstrap: la línea mide lo que la bandera */
.ht-pie__oficina a { color: #457B9D; }
.ht-pie__oficina address { color: #000; font-style: normal; }
.ht-pie__redes { grid-column: 3; }
.ht-pie__redes h3 { margin-bottom: 20px; }
.ht-pie__redes h3:not(:first-child) { margin-top: 35px; }
.ht-pie__iconos { display: flex; gap: 18px; list-style: none; }
#rs-footer .ht-pie__iconos li { margin: 0; padding: 0; line-height: 0; } /* el tema les da relleno a los li del pie */
.ht-pie__iconos a {
  display: grid; place-items: center; width: 50px; height: 50px; box-sizing: border-box;
  border: 2px solid #000; border-radius: 50%; background: #fff; color: #000; font-size: 25px;
  transition: background-color .2s ease, color .2s ease;
}
/* el tema achica y aclara los íconos de los enlaces del pie: se fijan tamaño y color sobre el ícono */
#rs-footer .ht-pie__iconos a i { font-size: 25px; line-height: 1; color: #000; }
#rs-footer .ht-pie__iconos a:is(:hover,:focus-visible) { background: #000; }
#rs-footer .ht-pie__iconos a:is(:hover,:focus-visible) i { color: #fff; }

/* Fila 3: línea y copyright */
.ht-pie__legal { max-width: 1200px; margin: 0 auto; padding: 25px 20px 10px; }
.ht-pie__legal::before { content: ""; display: block; height: 1px; margin-bottom: 35px; background: #60B0E2; }
.ht-pie__legal p { color: #212121; margin-bottom: 26px; }

@media (max-width: 1024px) {
  .ht-pie__hablemos { --ht-edificio: var(--ht-edificio-1024); }
}
@media (max-width: 767px) {
  .ht-pie__principal,
  .ht-pie__datos { grid-template-columns: 1fr; }
  .ht-pie__llegar { width: 100%; }
  /* la foto del edificio, más alta en celular para que se vea entero */
  .ht-pie__hablemos { min-height: clamp(320px, 88vw, 420px); --ht-edificio: var(--ht-edificio-640); }
  /* en celular cada bloque conserva el aire de las columnas de la versión aprobada (dos rellenos de 10 px
     por lado más el de la sección siguiente) */
  .ht-pie__datos { padding: 20px 0; }
  .ht-pie__redes { grid-column: auto; margin-top: 42px; padding: 0 20px; }
  .ht-pie__oficina a.mailinicial { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  #scrollUp i { animation: none; }
}