/* ==========================================================================
   SHLOMOCHANGE — hoja base compartida
   Versión: v2  ·  17 de agosto de 2026
   CAMBIO v1→v2: paleta reconstruida a partir de los colores reales del
   logotipo (azul #4059F5 y verde #37EC87, muestreados del archivo original).
   Se elimina el ámbar, que era una invención previa y no pertenece a la marca.
   REGLA DE VERSIONADO: este archivo se sirve con Cache-Control inmutable a
   1 año. Nunca se edita en sitio: cualquier cambio crea base.v2.css y se
   actualiza el <link> de todas las páginas. Ver §10 del documento de
   especificaciones.
   ========================================================================== */

/* --------------------------------------------------------------- TOKENS
   Azul y verde están muestreados píxel a píxel del logotipo original.
   No son una interpretación: son los colores de la marca.

   REGLAS DE USO (verificadas con contraste WCAG):
   · --azul  #4059F5 — acción y avance. 5.3:1 sobre blanco → apto para texto.
   · --verde #37EC87 — la promesa y el resultado alcanzado.
                        1.55:1 sobre blanco → NUNCA texto sobre fondo claro.
                        12.5:1 sobre tinta  → sí como texto sobre oscuro.
                        Sobre claro, sólo como relleno o marcador gráfico.
   · La BRECHA no tiene color propio: es el vacío entre el azul y el verde,
     igual que el corte de la «A» del logotipo.                            */
:root{
  --negro:#000000;        /* el del logotipo */
  --tinta:#0B0D12;        /* texto y superficies oscuras */
  --tinta-80:#3A3F4C;
  --azul:#4059F5;         /* del logotipo — acción y avance */
  --azul-hover:#2B3FC4;
  --verde:#37EC87;        /* del logotipo — promesa y resultado */
  --papel:#F4F5F8;
  --blanco:#FFFFFF;
  --gris:#5F6675;
  --linea:#E1E4EC;

  --display:"Archivo", system-ui, sans-serif;
  --texto:"IBM Plex Sans", system-ui, sans-serif;
  --dato:"IBM Plex Mono", ui-monospace, monospace;

  --ancho:1180px;
  --radio:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; overflow-x:clip; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.06; letter-spacing:-.022em; margin:0}
p{margin:0 0 1.1rem}

.envoltura{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:24px}
.seccion{padding-block:104px}
.seccion--compacta{padding-block:72px}
.seccion--blanca{background:#fff; border-block:1px solid var(--linea)}
.oscura{background:var(--tinta); color:#E8EEF4}
.oscura h2,.oscura h3{color:#fff}

/* ------------------------------------------------------ Rótulo de sección */
.rotulo{
  font-family:var(--dato); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--azul);
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
}
.rotulo::after{content:""; flex:1; height:1px; background:var(--linea)}
.oscura .rotulo{color:var(--verde)}
.oscura .rotulo::after{background:rgba(255,255,255,.16)}

/* ---------------------------------------------------------------- Botones */
.boton{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--texto); font-weight:600; font-size:16px;
  padding:15px 26px; border-radius:var(--radio); text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:.18s ease;
}
.boton--solido{background:var(--azul); color:#fff}
.boton--solido:hover{background:var(--azul-hover)}
.boton--linea{border-color:currentColor; color:var(--tinta)}
.boton--linea:hover{background:var(--tinta); color:#fff; border-color:var(--tinta)}
.oscura .boton--linea{color:#E8EEF4}
.oscura .boton--linea:hover{background:#fff; color:var(--tinta); border-color:#fff}
.boton--claro{background:#fff; color:var(--tinta)}
/* Contorno explícito para fondos oscuros que NO usan la clase .oscura
   (portadas con imagen, degradados). Evita botones invisibles. */
.boton--linea-claro{border-color:rgba(255,255,255,.55); color:#E8EEF4}
.boton--linea-claro:hover{background:#fff; color:var(--tinta); border-color:#fff}
.boton--claro:hover{background:var(--verde); color:var(--tinta)}

:focus-visible{outline:3px solid var(--azul); outline-offset:3px; border-radius:2px}

.salto{position:absolute; left:-9999px}
.salto:focus{left:16px; top:16px; z-index:100; background:#fff; padding:12px 18px; border-radius:var(--radio)}

/* ------------------------------------------------------------ Navegación */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);
}
.nav__caja{display:flex; align-items:center; gap:28px; height:74px}
.nav__logo img{height:34px; width:auto}
.nav__menu{display:flex; gap:26px; margin-left:auto; list-style:none; padding:0; margin-block:0}
.nav__menu a{
  text-decoration:none; font-size:15.5px; font-weight:500; color:var(--tinta-80);
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.nav__menu a:hover,.nav__menu a[aria-current="page"]{color:var(--azul); border-bottom-color:var(--azul)}
.nav__acciones{display:flex; align-items:center; gap:14px}
.nav__app{
  font-family:var(--dato); font-size:13px; font-weight:500; letter-spacing:.06em;
  text-decoration:none; color:var(--azul); border:1px solid var(--linea);
  padding:9px 14px; border-radius:var(--radio); white-space:nowrap;
}
.nav__app:hover{border-color:var(--azul); background:#EEF0FE}
.nav__cta{
  background:var(--azul); color:#fff; text-decoration:none; font-weight:600; font-size:15px;
  padding:11px 20px; border-radius:var(--radio); white-space:nowrap;
}
.nav__cta:hover{background:var(--azul-hover)}
.nav__hamburguesa{display:none; margin-left:auto; background:none; border:1px solid var(--linea); border-radius:var(--radio); padding:9px 12px; font-size:18px; cursor:pointer}

/* ----------------------------------------------- Cabezal y rejilla común */
.cabezal{max-width:64ch}
.cabezal h2{font-size:clamp(1.95rem,3.7vw,2.9rem)}
.cabezal p{margin-top:20px; color:var(--gris); font-size:1.08rem}
.oscura .cabezal p{color:#AEB4C4}
.cabezal--centrado{margin-inline:auto; text-align:center}
.cabezal--centrado .rotulo{justify-content:center}

.rejilla{display:grid; gap:26px; margin-top:52px}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}

/* ------------------------------------------------- Síntoma (borde brecha) */
.sintoma{border-top:2px solid var(--azul); padding-top:22px}
.sintoma h3{font-size:1.18rem; margin-bottom:10px}
.sintoma p{font-size:.98rem; color:var(--gris); margin:0}
.oscura .sintoma p{color:#AEB4C4}

/* ------------------------------------------------- Franja de organizaciones */
.confianza{background:#fff; border-block:1px solid var(--linea); padding-block:40px; overflow:hidden}
.confianza__titulo{
  font-family:var(--dato); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); text-align:center; margin:0 0 28px;
}
.carril{display:flex; gap:0; width:max-content; animation:desliza 46s linear infinite}
.carril:hover,.carril:focus-within{animation-play-state:paused}
@keyframes desliza{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marca{
  flex:0 0 auto; width:178px; height:62px; margin-inline:16px;
  display:flex; align-items:center; justify-content:center;
}
.marca img{
  max-height:52px; width:auto; object-fit:contain;
  filter:grayscale(1) contrast(.9); opacity:.62; transition:.25s ease;
}
.marca:hover img{filter:none; opacity:1}

/* ------------------------------------------------------------ Testimonios */
.voz{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:30px 28px;
  display:flex; flex-direction:column; gap:20px;
}
.voz blockquote{margin:0; font-size:1.06rem; line-height:1.55; font-style:italic; color:var(--tinta)}
.voz__firma{display:flex; align-items:center; gap:14px; margin-top:auto}
.voz__firma img{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.voz__nombre{font-family:var(--display); font-weight:700; font-size:.99rem; line-height:1.3}
.voz__cargo{font-size:.85rem; color:var(--gris); line-height:1.4}

/* ------------------------------------------------------------- Fundadores */
.nosotros{display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center}
.nosotros img{border-radius:var(--radio); width:100%; height:auto}
.nosotros__cifras{display:flex; gap:44px; margin-top:30px; padding-top:24px; border-top:1px solid var(--linea)}
.nosotros__cifra b{display:block; font-family:var(--display); font-size:2rem; color:var(--azul); letter-spacing:-.03em; line-height:1}
.nosotros__cifra span{font-family:var(--dato); font-size:12px; color:var(--gris); letter-spacing:.06em; text-transform:uppercase}

/* ------------------------------------------------------- Cierre y formulario */
.cierre{text-align:center}
.cierre h2{font-size:clamp(2rem,4.4vw,3.2rem); max-width:19ch; margin-inline:auto}
.cierre p{margin-top:22px; max-width:52ch; margin-inline:auto; color:#AEB4C4}
.cierre__acciones{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px}
.formulario{
  max-width:640px; margin:56px auto 0; text-align:left;
  border-top:1px solid rgba(255,255,255,.16); padding-top:36px;
}
.campo{margin-bottom:18px}
.campo label{
  display:block; font-family:var(--dato); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#AEB4C4; margin-bottom:8px;
}
.campo input,.campo textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radio); padding:13px 15px; color:#fff; font:inherit; font-size:16px;
}
.campo input:hover,.campo textarea:hover{border-color:rgba(255,255,255,.4)}
.campo textarea{min-height:118px; resize:vertical}
.formulario__estado{font-family:var(--dato); font-size:13px; color:var(--verde); margin:14px 0 0; min-height:20px}

/* ------------------------------------------------------------------- Pie */
.pie{background:#05060A; color:#8B91A1; padding-block:56px 32px; font-size:.93rem}
.pie__caja{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px}
.pie__marca{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.pie__marca img{width:44px; height:44px; border-radius:50%}
.pie__marca span{font-family:var(--display); font-weight:800; letter-spacing:.02em; color:#fff; font-size:1.05rem}
.pie h4{font-family:var(--dato); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#666D7E; margin:0 0 16px; font-weight:500}
.pie ul{list-style:none; padding:0; margin:0}
.pie li{margin-bottom:10px}
.pie a{color:#8B91A1; text-decoration:none}
.pie a:hover{color:#fff}
.pie__legal{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-family:var(--dato); font-size:12px; color:#666D7E;
}

/* ------------------------------------------------------------ Responsive */
@media (max-width:1000px){
  .rejilla--3,.rejilla--4{grid-template-columns:1fr 1fr}
  .nosotros{grid-template-columns:1fr; gap:40px}
  .pie__caja{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .seccion{padding-block:72px}
  .nav__menu,.nav__app,.nav__cta-larga{display:none}
  .nav__hamburguesa{display:block}
  .nav__caja{gap:10px; height:66px}
  .nav__logo img{height:27px}
  .nav__cta{font-size:14px; padding:10px 14px}
  .nav__hamburguesa{padding:8px 11px; font-size:16px}
  .nav__caja[data-abierto="true"] .nav__menu{
    display:flex; flex-direction:column; position:absolute; top:66px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--linea); padding:20px 24px 26px; gap:16px; margin:0;
  }
  .nav__caja[data-abierto="true"] .nav__app{display:inline-block; align-self:flex-start}
  .nav__acciones{margin-left:12px}
  .rejilla--2,.rejilla--3,.rejilla--4,.pie__caja{grid-template-columns:1fr}
  .nosotros__cifras{gap:28px; flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .carril{animation:none; flex-wrap:wrap; width:100%; justify-content:center}
}