@charset "UTF-8";
/* ==========================================================================
   SKYVEX™ — PÁGINAS INTERNAS (rubros + servicios + hubs)

   POR QUÉ ES UNA HOJA APARTE
   styles.css es el sistema de la portada y pesa 46 KB. Las internas necesitan
   seis componentes que la portada no usa; cargarlos en la hoja principal
   penalizaría el LCP de la página más visitada sin dar nada a cambio.
   Esta hoja se encola DESPUÉS de styles.css y sólo en las internas.

   Reutiliza sin duplicar: ticker, header, menú móvil, .stats/.metric,
   .proc/.step, .acc, .cta, .foot, .btn, .tag, .link, .sec-head, .sec-title.

   CONTIENE
     01 · Portada de página (.phero) + migas
     02 · Titulares largos (.sec-title--sm)
     03 · Bloque de apertura (.open)
     04 · Checklist numerado (.check)
     05 · Tres motivos (.why)
     06 · Otros rubros (.rel)
     07 · Hub de rubros y de servicios (.hub)
     08 · Enrutador por problema (.diag)
     09 · Recorridos combinados (.combo)
     10 · Responsive
     11 · Movimiento reducido
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · PORTADA DE PÁGINA

   Mismo lenguaje que el hero de la portada —degradado azul que colapsa a casi
   negro, campo encendido contra el borde derecho, grano— pero a un tercio de
   la altura: acá el protagonista es el H1, no la marca.
   -------------------------------------------------------------------------- */
.phero{
  position:relative; z-index:1; isolation:isolate;
  padding-top:calc(var(--hdr-h) + clamp(38px, 6vw, 84px));
  padding-bottom:clamp(52px, 8vw, 108px);
  overflow:hidden;
  color:#fff;
}
.phero__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:linear-gradient(176deg,
    #2C3AEA   0%,
    #2233AE  22%,
    #16205C  52%,
    #0A0F33  78%,
    #05071C 100%);
}
.phero__glow{
  position:absolute; inset:0;
  background:radial-gradient(74% 152% at 104% 26%,
    rgba(52,70,240,1)     0%,
    rgba(52,70,240,.92)  38%,
    rgba(50,68,238,.66)  55%,
    rgba(48,66,236,.34)  70%,
    rgba(46,64,232,.12)  85%,
    rgba(42,60,224,0)   100%);
}
.phero__in{ position:relative; z-index:4; }

/* Migas de pan: chicas, en mayúsculas, con el separador más apagado que los
   enlaces para que la jerarquía se lea sin leer. */
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .1rem; }
.crumbs li{ display:flex; align-items:center; }
.crumbs li + li::before{
  content:"/"; margin-inline:.6rem;
  opacity:.38; font-weight:400;
}
.crumbs a,
.crumbs [aria-current]{
  font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
}
.crumbs a{ opacity:.68; transition:opacity var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft); }
.crumbs a:hover{ opacity:1; color:var(--lime); }
.crumbs [aria-current]{ opacity:1; }

.phero__eyebrow{ margin-top:clamp(1.5rem, 3vw, 2.4rem); display:block; }

.phero__title{
  margin-top:clamp(.9rem, 1.6vw, 1.4rem);
  max-width:19ch;
  font-size:clamp(2.3rem, 5.9vw, 5.1rem);
  font-weight:600; line-height:.99; letter-spacing:-.05em;
}
.phero__lead{
  margin-top:clamp(1.25rem, 2.4vw, 1.9rem);
  max-width:56ch;
  font-size:var(--fs-lead); line-height:1.52;
  color:rgba(255,255,255,.72);
}
.phero__ctas{
  margin-top:clamp(1.75rem, 3.2vw, 2.6rem);
  display:flex; flex-wrap:wrap; gap:.75rem 1rem;
}

/* --------------------------------------------------------------------------
   02 · TITULARES LARGOS

   .sec-title llega a 10.5rem: funciona con «Servicios», no con una frase de
   sesenta caracteres. Este modificador conserva el mismo tratamiento —peso,
   tracking, degradado azul— y sólo baja la escala.
   -------------------------------------------------------------------------- */
.sec-title--sm{
  font-size:clamp(2rem, 4.6vw, 4rem);
  line-height:1.02;
  letter-spacing:-.046em;
  max-width:22ch;
}

/* La banda de las internas no es la de la portada.
   Alla los cuatro valores son cifras ("90+", "<2 s") y la escala gigante los
   luce. Aca conviven cifras genericas —las mismas en casi todas las paginas—
   con la palabra que resume el rubro ("Antes y despues", "Urgencias"): a
   4,6 rem la frase parte la columna en dos renglones y, peor, deja el dato
   generico mas grande que el especifico. Una sola escala para las cuatro
   mantiene la fila como una unidad y devuelve el peso al contenido. */
.stats--band .metric__n{
  display:block;
  font-size:clamp(1.6rem, 3vw, 2.6rem);
  line-height:1.08;
  letter-spacing:-.042em;
  text-wrap:balance;
}

/* --------------------------------------------------------------------------
   03 · BLOQUE DE APERTURA

   Un solo párrafo grande. Es el punto donde la página explica por qué existe;
   si compite con otra cosa, deja de leerse.
   -------------------------------------------------------------------------- */
/* El aire de arriba lo pone el padding inferior de .stats: repetir aca
   var(--sec-y) dejaba un hueco de 224 px entre la banda y el titular. */
.open{ padding-block:clamp(28px, 3.6vw, 56px) 0; background:var(--white); }
.open__lead{
  margin-top:clamp(1.6rem, 3vw, 2.6rem);
  max-width:62ch;
  font-size:clamp(1.15rem, 1.55vw, 1.6rem);
  line-height:1.42; letter-spacing:-.026em;
  color:var(--gray);
}

/* --------------------------------------------------------------------------
   04 · CHECKLIST NUMERADO

   Dos columnas con filete arriba de cada ítem: el mismo recurso editorial de
   .sec-head y .metric. El número ordena; no decora.
   -------------------------------------------------------------------------- */
.chk{ padding-block:var(--sec-y); background:var(--white); }
.chk__lead{
  margin-top:clamp(1.4rem, 2.6vw, 2.2rem);
  max-width:52ch;
  font-size:var(--fs-lead); line-height:1.55;
  color:var(--gray);
}
.chk__grid{
  margin-top:clamp(2rem, 4vw, 3.5rem);
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:0 clamp(2rem, 5vw, 5.5rem);
}
.chk__i{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(1rem, 1.8vw, 1.7rem);
  padding-block:clamp(1.4rem, 2.2vw, 2rem);
  border-top:1px solid var(--line);
}
/* Las dos primeras filas comparten el filete superior de la sección. */
.chk__i:nth-child(-n+2){ border-top-color:transparent; padding-top:0; }
.chk__n{
  font-size:var(--fs-micro); font-weight:600; letter-spacing:.12em;
  color:var(--blue); font-variant-numeric:tabular-nums;
  padding-top:.35em;
}
.chk__i h3{
  font-size:clamp(1.05rem, 1.45vw, 1.3rem);
  letter-spacing:-.032em;
}
.chk__i p{
  margin-top:.55rem;
  font-size:.9375rem; line-height:1.6;
  color:var(--gray); max-width:46ch;
}

/* --------------------------------------------------------------------------
   05 · TRES MOTIVOS

   Retoma la alternancia de color de las tarjetas de la portada
   (azul · oscuro · claro) para que la página no se lea como una lista larga.
   -------------------------------------------------------------------------- */
.why{ padding-block:0 var(--sec-y); background:var(--white); }
.why__grid{
  margin-top:clamp(2rem, 4vw, 3.5rem);
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.4vw, 20px);
}
.why__i{
  position:relative;
  display:flex; flex-direction:column;
  gap:clamp(1.6rem, 2.6vw, 2.5rem);
  min-height:clamp(270px, 24vw, 340px);
  padding:clamp(1.5rem, 2.2vw, 2.2rem);
  border-radius:var(--r-lg);
  /* Sin borde a proposito: con background-origin en padding-box, un borde
     dejaria un anillo de 1px con el color de fondo alrededor de la imagen.
     La linea fina de la variante clara se dibuja con box-shadow interior. */
  border:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.why__i::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
  transition:opacity var(--t-slow) var(--ease);
}
.why__i > *{
  position:relative;
  z-index:2;
}
.why__i:hover{ transform:translateY(-6px); }
.why__n{
  font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.why__b{ margin-top:auto; }
.why__i h3{
  font-size:clamp(1.2rem, 1.7vw, 1.55rem);
  letter-spacing:-.038em;
}
.why__i p{ margin-top:.7rem; font-size:.9375rem; line-height:1.58; }

.why__i--blue{
  color:#fff;
  background-color:#1E2C8F;
}
.why__i--blue::before{
  background:linear-gradient(180deg, rgba(23,35,111,0.72) 0%, rgba(30,44,143,0.55) 45%, rgba(16,24,78,0.88) 100%);
}
.why__i--blue .why__n{ color:var(--lime); }
.why__i--blue p{ color:rgba(255,255,255,.9); text-shadow:0 1px 2px rgba(0,0,0,.3); }
.why__i--blue:hover{ box-shadow:0 24px 50px -26px rgba(48,70,211,.6); }

.why__i--dark{
  color:#fff;
  background-color:var(--ink);
}
.why__i--dark::before{
  background:linear-gradient(180deg, rgba(17,24,39,0.7) 0%, rgba(17,24,39,0.5) 45%, rgba(10,14,26,0.9) 100%);
}
.why__i--dark .why__n{ color:var(--lime); }
.why__i--dark p{ color:rgba(255,255,255,.88); text-shadow:0 1px 2px rgba(0,0,0,.3); }
.why__i--dark:hover{ box-shadow:0 24px 50px -30px rgba(23,23,23,.55); }

.why__i--light{
  background-color:var(--white);
  box-shadow:inset 0 0 0 1px var(--line);
}
.why__i--light::before{
  background:linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.92) 100%);
}
.why__i--light .why__n{ color:var(--blue); }
.why__i--light p{ color:var(--gray); }
.why__i--light:hover{ box-shadow:inset 0 0 0 1px rgba(23,23,23,.2), 0 24px 50px -30px rgba(23,23,23,.3); }

/* --------------------------------------------------------------------------
   06 · OTROS RUBROS

   Enlaces laterales entre páginas hermanas. Sin esto cada rubro sería un
   callejón sin salida: se entra desde Google y no hay a dónde seguir.
   -------------------------------------------------------------------------- */
.rel{ padding-block:0 var(--sec-y); background:var(--white); }
.rel__grid{
  margin-top:clamp(1.5rem, 2.6vw, 2.2rem);
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(12px, 1.4vw, 20px);
}
.rel__grid > li{ display:flex; }
.rel__i{
  flex:1;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1.05rem, 1.6vw, 1.35rem) clamp(1.1rem, 1.6vw, 1.4rem);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-size:.9375rem; font-weight:500; letter-spacing:-.018em;
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease),
             transform var(--t) var(--ease);
}
.rel__i svg{ width:14px; height:14px; flex:none; opacity:.45; transition:transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.rel__i:hover{ border-color:var(--blue); background:rgba(48,70,211,.045); transform:translateY(-3px); }
.rel__i:hover svg{ transform:translate(3px,-3px); opacity:1; }

/* --------------------------------------------------------------------------
   07 · HUB DE RUBROS
   -------------------------------------------------------------------------- */
/* Arriba manda el padding inferior de .stats, igual que en .open. */
.hub{ padding-block:clamp(28px, 3.6vw, 56px) var(--sec-y); background:var(--white); }
.hub__g{ margin-top:clamp(1.75rem, 3.2vw, 2.75rem); }
.hub__g + .hub__g{ margin-top:clamp(2.75rem, 5vw, 4.75rem); }
.hub__h{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.hub__name{
  font-size:clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing:-.04em; color:var(--blue);
}
.hub__grid{
  margin-top:clamp(1.25rem, 2.2vw, 1.9rem);
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.4vw, 20px);
}
.hub__grid > li{ display:flex; }
.hub__c{
  flex:1;
  display:flex; flex-direction:column; gap:.75rem;
  padding:clamp(1.3rem, 2vw, 1.8rem);
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease),
             transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.hub__c h3{ font-size:clamp(1.05rem, 1.4vw, 1.25rem); letter-spacing:-.035em; }
.hub__c p{ font-size:.875rem; line-height:1.58; color:var(--gray); }
.hub__c .link{ margin-top:auto; align-self:flex-start; }
.hub__c:hover{
  border-color:var(--blue); background:rgba(48,70,211,.04);
  transform:translateY(-5px); box-shadow:0 24px 50px -32px rgba(48,70,211,.5);
}


/* --------------------------------------------------------------------------
   08 · ENRUTADOR POR PROBLEMA

   Es lo único que hace servicios.html y no hace ninguna otra página: en vez de
   listar lo que vendemos, parte del problema con el que llega la consulta.
   Por eso no es una tarjeta más —una tarjeta invita a mirar, una fila invita a
   recorrer— sino filas separadas por filete, el mismo recurso editorial de
   .sec-head, .metric y .chk__i.

   El hover copia el del acordéon de la portada (.acc__btn:hover .acc__name):
   azul y 4 px a la derecha. Es el gesto que el sitio ya usa para decir
   «esto se abre», y acá significa lo mismo.
   -------------------------------------------------------------------------- */
.diag{ padding-block:var(--sec-y); background:var(--white); }
.diag__lead{
  margin-top:clamp(1.4rem, 2.6vw, 2.2rem);
  max-width:52ch;
  font-size:var(--fs-lead); line-height:1.55;
  color:var(--gray);
}
.diag__list{
  margin-top:clamp(2rem, 4vw, 3.25rem);
  border-top:1px solid var(--line);
}
.diag__i{ border-bottom:1px solid var(--line); }
.diag__a{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(1rem, 2.4vw, 2.2rem);
  padding:clamp(1.35rem, 2.2vw, 1.9rem) clamp(.6rem, 1.2vw, 1.1rem);
  transition:background-color var(--t) var(--ease);
}
.diag__n{
  font-size:var(--fs-micro); font-weight:600; letter-spacing:.12em;
  color:var(--blue); font-variant-numeric:tabular-nums;
}
.diag__q{
  font-size:clamp(1.1rem, 1.85vw, 1.6rem);
  font-weight:600; line-height:1.24; letter-spacing:-.035em;
  text-wrap:balance;
  transition:color var(--t) var(--ease), transform var(--t) var(--ease);
}
/* La respuesta no compite con la pregunta: es la etiqueta que la cierra. */
.diag__r{
  display:inline-flex; align-items:center; gap:.5em;
  flex:none;
  font-size:var(--fs-small); font-weight:600; letter-spacing:-.012em;
  color:var(--gray);
  transition:color var(--t) var(--ease);
}
.diag__r .arw{ width:1em; height:1em; flex:none; transition:transform var(--t) var(--ease); }

.diag__a:hover{ background:rgba(48,70,211,.045); }
.diag__a:hover .diag__q{ color:var(--blue); transform:translateX(4px); }
.diag__a:hover .diag__r{ color:var(--blue); }
.diag__a:hover .arw{ transform:translate(3px,-3px); }

/* --------------------------------------------------------------------------
   09 · RECORRIDOS COMBINADOS

   Banda oscura entre dos secciones claras. No es decoración: la página viene
   de dos bloques largos sobre --white (enrutador y hub) y necesita un corte
   antes de seguir, igual que .philo corta la portada y .cta cierra las internas.

   Las tres columnas van sin caja: filete arriba y aire. Con tarjeta serían la
   tercera grilla de tarjetas de la página y todo empezaría a parecer lo mismo.
   -------------------------------------------------------------------------- */
.combo{ padding-block:var(--sec-y); background:var(--ink); color:#fff; }
.combo .sec-head{ border-bottom-color:var(--line-on-dark); }
.combo .tag--dim{ color:rgba(255,255,255,.5); }
.combo__lead{
  margin-top:clamp(1.4rem, 2.6vw, 2.2rem);
  max-width:56ch;
  font-size:var(--fs-lead); line-height:1.55;
  color:rgba(255,255,255,.72);
}
.combo__grid{
  margin-top:clamp(2.25rem, 4.5vw, 3.75rem);
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.75rem, 3.5vw, 3.5rem);
}
.combo__i{
  display:flex; flex-direction:column; gap:.85rem;
  padding-top:clamp(1.2rem, 2vw, 1.7rem);
  border-top:1px solid var(--line-on-dark);
}
.combo__n{
  font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--lime);
}
.combo__i h3{
  font-size:clamp(1.2rem, 1.7vw, 1.55rem);
  letter-spacing:-.038em;
}
.combo__i p{
  font-size:.9375rem; line-height:1.58;
  color:rgba(255,255,255,.72);
}
/* La cadena es el dato de la columna: va abajo de todo y alineada entre las
   tres, aunque los textos de arriba midan distinto. */
.combo__chain{
  margin-top:auto; padding-top:clamp(1rem, 1.8vw, 1.5rem);
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
}
.combo__chain li{
  display:flex; align-items:center;
  font-size:.75rem; font-weight:600; letter-spacing:-.008em;
}
.combo__chain li span{
  padding:.42rem .7rem;
  border:1px solid var(--line-on-dark); border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  white-space:nowrap;
}
.combo__chain li:first-child span{
  border-color:var(--lime); color:var(--lime);
  background:rgba(223,255,57,.07);
}
.combo__chain li + li::before{
  content:"92";
  margin-right:.5rem;
  opacity:.42; font-weight:400;
}

/* --------------------------------------------------------------------------
   10 · RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .rel__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:960px){
  .why__grid{ grid-template-columns:1fr; }
  /* Con tres columnas, dos dejan una huérfana. Se pasa directo a una. */
  .combo__grid{ grid-template-columns:1fr; }
  .why__i{ min-height:0; }
  .hub__grid{ grid-template-columns:repeat(2, 1fr); }
  .phero__title{ max-width:none; }
}
@media (max-width:720px){
  .chk__grid{ grid-template-columns:1fr; }
  /* En una sola columna sólo la primera fila hereda el filete de la sección. */
  .chk__i:nth-child(-n+2){ border-top-color:var(--line); padding-top:clamp(1.4rem,2.2vw,2rem); }
  .chk__i:first-child{ border-top-color:transparent; padding-top:0; }
  .rel__grid,
  .hub__grid{ grid-template-columns:1fr; }
  .phero__ctas .btn{ width:100%; justify-content:space-between; }
  .hub__h{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  /* La respuesta baja debajo de la pregunta, alineada con ella y no con el
     número: sin grid-column caería en la columna del índice. */
  .diag__a{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:.2rem 1rem;
    padding-inline:0;
  }
  .diag__r{ grid-column:2; margin-top:.6rem; }
}

/* --------------------------------------------------------------------------
   11 · MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .why__i,.rel__i,.hub__c,.diag__a,.diag__q,.diag__r{ transition:none; }
}