/* AltiExcel — hoja propia, 2026-10-09.
   =====================================================================
   POR QUE NO USA `estilo.css`. Decision del autor: AltiExcel es su marca
   de consultoria y tiene que parecer otra cosa al entrar. Observed State
   es papel, tinta y monoespaciada --un cuaderno de laboratorio--; esto es
   una landing de servicios y se parece a lo que se parecen: blanco,
   azul y tipografia ligera.

   Es una hoja APARTE y no un bloque dentro de la del sitio, por una
   razon practica: asi no puede romper las otras 23 paginas. Lo unico
   que comparten es la barra de Observed State de arriba, que se queda
   a proposito --sin ella el visitante aterriza sin salida y pierde el
   conmutador de idioma--.

   LAS TIPOGRAFIAS SE SIRVEN DESDE ESTE DOMINIO, NO DESDE GOOGLE, y eso
   no es preferencia: el sitio entero no hace una sola peticion a
   fonts.googleapis.com, y cargarlas de ahi le entregaria **la IP del
   visitante a Google en cada carga**. El requisito de este proyecto es
   cero datos personales, y una tipografia no es excepcion. Son 53,7 KB
   la primera vez y cacheados despues. La referencia las carga de
   Google; nosotros no.
   ===================================================================== */

@font-face{
  font-family:"Poppins";
  src:url("/altiexcel/poppins-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Poppins";
  src:url("/altiexcel/poppins-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
/* Nunito es VARIABLE: un solo archivo cubre de 200 a 1000, asi que los
   dos pesos que se usan salen del mismo woff2. De ahi que sean tres
   archivos y no cuatro. */
@font-face{
  font-family:"Nunito";
  src:url("/altiexcel/nunito-var.woff2") format("woff2");
  font-weight:200 1000; font-style:normal; font-display:swap;
}

.alti{
  /* Medidos sobre la referencia con getComputedStyle, no a ojo. */
  --azul:#2D4693;
  --texto:#716C80;
  --negro:#1B1B1F;
  --linea:#E4E3E9;
  --suave:#F7F7FA;
  --ancho:1000px;

  background:#fff;
  color:var(--texto);
  font-family:"Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.65;
}
.alti h1,.alti h2,.alti h3{
  font-family:"Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight:300;
  line-height:1.25;
  margin:0;
}
.alti h1{color:var(--azul);font-size:2.5rem}
.alti h2{color:var(--negro);font-size:1.45rem;margin-bottom:.2rem}
.alti h3{color:var(--negro);font-size:1.05rem;font-weight:600}
.alti p{margin:0 0 1rem}
.alti strong{font-weight:600;color:var(--negro)}

.alti-ancho{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem}

/* --- menu propio de AltiExcel --------------------------------------
   Pegajoso arriba porque la pagina es larga y los destinos son anclas
   de la propia pagina: si se fuera con el scroll, a mitad de "AWS" ya
   no habria forma de saltar a "Contacto" sin volver arriba. */
.alti-menu{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
}
.alti-menu ul{
  max-width:var(--ancho);
  margin:0 auto;
  padding:.6rem 1.25rem;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.2rem 1.4rem;
  font-family:"Poppins", sans-serif;
  font-size:.92rem;
}
.alti-menu a{
  color:var(--texto);
  text-decoration:none;
  padding:.2rem 0;
  border-bottom:2px solid transparent;
}
.alti-menu a:hover{color:var(--azul);border-bottom-color:var(--azul)}
.alti-menu a.inicio{color:var(--azul);font-weight:600}

/* --- heroe ---------------------------------------------------------- */
.alti-heroe{padding:3.2rem 0 2.4rem;border-bottom:1px solid var(--linea)}
.alti-heroe .lema{
  font-family:"Poppins", sans-serif;
  color:var(--negro);
  font-size:1.15rem;
  margin:.4rem 0 1.4rem;
}
.alti-heroe .entrada{font-size:1.1rem;max-width:34rem}

/* --- secciones ------------------------------------------------------ */
.alti-sec{padding:2.6rem 0;border-bottom:1px solid var(--linea)}
.alti-sec:last-of-type{border-bottom:0}
.alti-sec .cuerpo{max-width:46rem}
.alti-sec .rotulo{
  font-family:"Poppins", sans-serif;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--azul);
  margin:0 0 .25rem;
}
/* Las tres de abajo --definiciones y posicionamiento-- no estan en el
   menu a proposito: son para quien baja del todo y para los buscadores,
   no destinos de navegacion. Van en gris para que se lean como fondo. */
.alti-sec.fondo{background:var(--suave);border-bottom:0}
.alti-sec.fondo + .alti-sec.fondo{border-top:1px solid var(--linea)}

.alti-lista{list-style:none;padding:0;margin:0 0 1.4rem}
.alti-lista li{
  position:relative;
  padding:.42rem 0 .42rem 1.5rem;
  border-bottom:1px solid var(--linea);
}
.alti-lista li::before{
  content:"";
  position:absolute;
  left:.25rem;
  top:1.05rem;
  width:.42rem;
  height:.42rem;
  background:var(--azul);
  border-radius:1px;
  transform:rotate(45deg);
}

/* --- la llamada a la accion, que se repite ------------------------- */
.alti-cta{
  display:inline-block;
  font-family:"Poppins", sans-serif;
  font-weight:600;
  font-size:.95rem;
  color:#fff;
  background:var(--azul);
  text-decoration:none;
  padding:.62rem 1.3rem;
  border-radius:3px;
}
.alti-cta:hover{background:#24386f}
.alti-cta.plano{
  background:none;
  color:var(--azul);
  padding:.62rem 0;
  border-bottom:2px solid var(--azul);
  border-radius:0;
}
.alti-cta.plano:hover{color:#24386f;border-bottom-color:#24386f}

/* --- contacto ------------------------------------------------------- */
.alti-contacto{
  padding:3rem 0 3.4rem;
  background:var(--azul);
  color:#fff;
}
.alti-contacto h2{color:#fff}
.alti-contacto a{color:#fff}
.alti-contacto .dato{
  font-family:"Poppins", sans-serif;
  font-size:1.3rem;
  font-weight:600;
  display:inline-block;
  margin-top:.6rem;
  border-bottom:2px solid rgba(255,255,255,.5);
  text-decoration:none;
}
.alti-contacto .dato:hover{border-bottom-color:#fff}

/* El pie iba en #9A96A6 y daba 2,88:1 sobre blanco -- AA pide 4,5 para
   texto normal. Medido en produccion el 2026-10-10, no supuesto. Se usa
   `--texto`, que es el mismo gris del cuerpo y da 5,05:1.

   Es exactamente el arreglo que `estilo.css` ya documenta haber hecho dos
   veces en el sitio --"daba 3,70:1 y no llega al 4,5:1 que pide AA"--, y
   volvio a pasar aqui por lo de siempre: un gris elegido a ojo para que
   "se vea discreto" es un gris elegido sin medirlo. */
.alti-pie{
  padding:1.6rem 0 2.4rem;
  font-size:.86rem;
  color:var(--texto);
}
.alti-pie a{color:var(--texto)}

/* --- telefono ------------------------------------------------------- */
@media (max-width:40rem){
  .alti{font-size:16px}
  .alti h1{font-size:1.95rem}
  .alti h2{font-size:1.25rem}
  .alti-heroe{padding:2.2rem 0 1.8rem}
  .alti-sec{padding:2rem 0}
  .alti-menu ul{gap:.1rem 1rem;font-size:.86rem}
}