/* ============================================================
   GERPRO — Base compartida: paleta, reset, fondo y tipografia.
   La cargan el home (el cubo) y los seis subsitios de servicio.
   Es la unica fuente de la paleta de marca: si un color cambia,
   cambia aqui y en ningun otro archivo.
   ============================================================ */
:root{
  /* Marca */
  --indigo:#292E59;
  --ambar:#EC8E39;
  --teal:#1994A4;
  --menta:#7FC0B7;
  --rojo:#F8522F;
  --verde:#3E914D;
  --naranja:#EF8E3A;
  --coral:#FF7F50;
  --petroleo:#014052;      /* LeanBuilt                    */
  --naranja-lb:#E4681F;    /* LeanBuilt (acento)           */

  /* Gerpro IA² — identidad propia, morada de punta a punta (no el ambar del
     resto del sitio). Tomada tal cual del tema que hoy sirve gerpro.ai
     (ia2week-tokens.css: --iaw-vio y --iaw-vio-hi). Úsela en el portal de
     entrada, el boton "Gerpro IA²" y el panel/manifiesto — nunca en el cubo
     ni en las seis secciones de servicio, que siguen siendo ambar/teal. */
  --ia-violeta:#8520D6;
  --ia-fucsia:#C34EFC;

  /* Fondos y texto */
  --deep:#0B0E22;          /* fondo profundo               */
  --deep2:#141938;         /* indigo intermedio            */
  --indigo-deep:#1C2040;   /* fondo hero Gerpro IA         */
  --indigo-night:#141733;  /* fondo hero Gerpro IA (base)  */
  --ink:#EAECF8;           /* texto principal sobre oscuro */
  --ink-dim:rgba(234,236,248,.68);
  --hair:rgba(127,192,183,.22);   /* lineas finas menta      */

  /* Tipografia — la de marca, segun el design system de Gerpro:
     Poppins para display y Open Sans para texto. No las cambie aqui sin
     cambiarlas alli: _ds/gerpro-design-system/tokens/typography.css es la
     fuente de verdad, y este archivo es su reflejo en el sitio.
     Poppins no tiene eje de ancho: 'font-stretch' no le hace nada. */
  --display:'Poppins', system-ui, -apple-system, sans-serif;
  --body:'Open Sans', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --ls-eyebrow:.14em; --ls-heading:-.01em; --ls-display:-.02em;

  /* Curvas de easing de marca — mismas para toda animacion del sitio, no
     inventar una nueva por componente. */
  --ease-out:cubic-bezier(.23, 1, .32, 1);
  --ease-in-out:cubic-bezier(.77, 0, .175, 1);

  /* Radios y espaciado — igual que _ds/gerpro-design-system/tokens/{radius,spacing}.css.
     Las sombras de ese sistema asumen paginas claras (tinte indigo suave sobre
     blanco): sobre nuestro fondo oscuro esa sombra es invisible, asi que los
     box-shadow del tema NO se portan literales — el radio y el espaciado si son
     geometria pura y aplican tal cual, oscuro o claro. Cada subsitio puede pisar
     estos valores con los suyos propios (ver body[data-servicio] en subsitio.css)
     cuando su design system trae una escala distinta a la del home. */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:20px;
  --radius-pill:999px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* En iOS (Safari y Chrome, que corre sobre el mismo motor WebKit) el rebote
   elastico del scroll deja pasar el dedo mas alla del final del documento:
   se ve como si tras el footer hubiera una zona vacia sin contenido antes de
   que la pagina rebote de vuelta. overscroll-behavior corta ese rebote. */
html{
  overscroll-behavior-y:none;
}

body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--indigo-night);
  overscroll-behavior-y:none;
  /* clip y no hidden: 'hidden' convierte al body en contenedor de scroll
     y rompe el position:sticky de las secciones portadas de Gerpro IA */
  overflow-x:clip;
}

/* Base del hero de gerpro-ai.html.
   Va en una capa fija propia y NO como background-attachment:fixed del body:
   'fixed' obliga al navegador a repintar el degradado completo en cada frame
   de scroll, y en iOS Safari y Android de gama media eso se ve como parpadeo.
   Una capa position:fixed se compone una sola vez y el resultado es identico. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% 16%, rgba(56,64,124,.95) 0%, transparent 62%),
    radial-gradient(900px 720px at 8% 88%, rgba(25,148,164,.20) 0%, transparent 60%),
    linear-gradient(180deg, var(--indigo) 0%, var(--indigo-deep) 48%, var(--indigo-night) 100%);
}

::selection{ background:var(--ambar); color:#0B0E22; }
button{ font-family:inherit; cursor:pointer; }
a{ color:var(--menta); }
:focus-visible{ outline:2px solid var(--ambar); outline-offset:3px; border-radius:4px; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--deep); }
::-webkit-scrollbar-thumb{ background:#2C3260; border-radius:9px; }

/* ------- Pie de sitio (parts/site-footer.php) -------
   Un solo pie para el home y los subsitios: antes vivia partido en dos
   (el del home aqui escondido bajo #aiSections en ecosistema.css, el de
   los subsitios en subsitio.css) y cada uno tenia informacion distinta.
   tokens.css es el unico archivo que cargan ambos grupos de pagina
   (gerpro_base_assets(), functions.php), por eso el componente vive aqui. */
.site-footer{
  position:relative;background:var(--indigo-night);color:#9AA0BC;padding:0 0 2rem;font-size:.88rem;
  background-image:radial-gradient(1000px 420px at 50% 0%,rgba(52,59,115,.55) 0%,transparent 72%);
  overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(236,142,57,.6) 28%,rgba(127,192,183,.6) 72%,transparent);
}
.site-footer a{ text-decoration:none; }
.site-footer .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin:1.5rem 0 2.5rem;position:relative}
.site-footer .foot-grid img{height:46px;width:auto;margin-bottom:1rem}
.site-footer .foot-grid h4{
  color:#fff;font-family:var(--mono);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.55rem;
}
.site-footer .foot-grid h4::before{content:"";width:14px;height:1px;background:var(--ambar)}
.site-footer .foot-grid h4.foot-siganos{margin-top:1.5rem}
.site-footer .foot-grid ul{list-style:none}
.site-footer .foot-grid li{margin:.5rem 0}
.site-footer .foot-grid a{
  color:#9AA0BC;transition:color .3s var(--ease-out),transform .3s var(--ease-out);
  display:inline-block;
}
.site-footer .foot-grid a:hover{color:#fff;transform:translateX(4px)}
.site-footer .foot-grid .sol a::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:2px;margin-right:.6rem;
  background:var(--k);box-shadow:0 0 10px var(--k);vertical-align:middle;
  transform:translateY(-1px);
}
/* Iconos de redes: circulos discretos que se encienden con el color de marca
   de cada red al pasar el mouse, mismo --k que ya usa la columna Soluciones
   para el mismo proposito (identificar de un vistazo a que enlaza). */
.site-footer .foot-grid .social{ display:flex; gap:.6rem; margin-top:.1rem; }
.site-footer .foot-grid .soc-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  color:#9AA0BC; transition:color .25s var(--ease-out), border-color .25s var(--ease-out),
    background .25s var(--ease-out), transform .25s var(--ease-out);
}
.site-footer .foot-grid .soc-ico svg{ width:18px; height:18px; }
.site-footer .foot-grid .soc-ico:hover{
  color:var(--k); border-color:var(--k);
  background:color-mix(in srgb, var(--k) 16%, transparent);
  transform:translateY(-3px);
}
.site-footer .pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--verde);animation:gp-foot-pulse 2s infinite}
@keyframes gp-foot-pulse{0%{box-shadow:0 0 0 0 rgba(62,145,77,.6)}70%{box-shadow:0 0 0 10px rgba(62,145,77,0)}100%{box-shadow:0 0 0 0 rgba(62,145,77,0)}}
.site-footer .foot-status{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.2rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:#C9CEE8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-pill);padding:.4rem .9rem;
}
.site-footer .foot-base{
  border-top:1px solid rgba(255,255,255,.08);padding-top:1.6rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:#8A90AE;
}
@media (max-width:900px){.site-footer .foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.site-footer .foot-grid{grid-template-columns:1fr;gap:2rem}}