/* ===========================================================================
   edeon — sistema visual
   ---------------------------------------------------------------------------
   Hoja unica del sitio. Reemplaza a styles.css y a los bloques <style> inline
   que cada pagina tenia duplicados.

   Corresponde a la auditoria del 25/08/2026:
     Fase 1  tokens de color, tipografia y espaciado en un solo lugar
     Fase 2  ritmo de secciones, tarjetas, hero, medida de linea
     Fase 3  motion, transiciones tipadas, foco visible

   Regla del sistema: ninguna medida se escribe a mano. Todo sale de las
   escalas de --s1..--s10 y --fs-*. Si algo "necesita" 30px, va a --s6 (32px).

   Orden: tokens, base, layout, componentes de home, componentes de paginas
   interiores, motion, responsive, accesibilidad.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* Color — cada uno con un trabajo asignado -------------------------------- */
  --navy:        #001F3F;  /* seccion Impacto, titulos, botones            */
  --navy-deep:   #001733;  /* hover de boton navy                          */
  --accent:      #0055B8;  /* links, eyebrows, cifras, filete de card      */
  --accent-soft: #F2F7FD;  /* fondo de chip/label sobre claro              */
  --accent-lift: #8FBCF5;  /* acento legible sobre navy                    */
  --ink:         #1A1A1A;  /* texto principal                              */
  --muted:       #5B6879;  /* texto secundario — sesgado al azul del navy  */
  --faint:       #656F80;  /* labels y metadatos — pasa 4.5:1 tambien sobre --sunk */
  --rule:        #DCE3EC;  /* bordes y divisores                           */
  --rule-soft:   #EAEFF5;  /* divisores internos de card                   */
  --bg:          #FFFFFF;  /* fondo base                                   */
  --sunk:        #F4F7FB;  /* tercer fondo alternado (reemplaza #FAFAFA)   */

  /* Alias heredados — nav-mobile.css depende de estos nombres --------------- */
  --border: var(--rule);
  --text:   var(--ink);
  --soft:   var(--sunk);

  /* Tipografia — 8 pasos, ~1.3x entre cada uno ----------------------------- */
  --fs-display: clamp(38px, 5.2vw, 56px);
  --fs-h1:      clamp(30px, 3.6vw, 40px);
  --fs-h2:      clamp(24px, 2.6vw, 30px);
  --fs-h3:      22px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.6;

  /* Espaciado — base 4, 10 pasos, sin valores intermedios ------------------ */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;

  /* Elevacion --------------------------------------------------------------- */
  --lift-rest:  0 1px 2px rgba(0, 31, 63, .05), 0 6px 20px rgba(0, 31, 63, .05);
  --lift-hover: 0 2px 4px rgba(0, 31, 63, .06), 0 14px 34px rgba(0, 31, 63, .10);

  /* Otros ------------------------------------------------------------------- */
  --radius: 3px;
  --max: 1200px;
  --measure: 46ch;          /* medida de linea comoda: ~62 caracteres */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .serif { font-family: 'Archivo', sans-serif; margin-top: 0; text-wrap: balance; }

img { max-width: 100%; }

/* Foco visible en todo lo navegable por teclado (fase 3).
   Alcanza con los elementos realmente enfocables: las tarjetas que son link
   ya entran por a:focus-visible, y las que no lo son nunca reciben foco. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--s6); }

/* Ritmo de secciones: la densidad la marca la seccion, no un padding global. */
.section { padding: var(--s9) 0; }
.section--airy  { padding: var(--s10) 0; }
.section--sunk  { background: var(--sunk); }
.section--navy  { background: var(--navy); color: #fff; }

/* Encabezado de seccion — eyebrow + titulo, sin la linea a todo el ancho. */
.sec-head { margin-bottom: var(--s8); display: flex; flex-direction: column; gap: var(--s3); }
.sec-eyebrow {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 2px;
  font-weight: 600; color: var(--accent); display: block;
}
/* Suelto (paginas interiores) trae su propio margen inferior; dentro de
   .sec-head el espaciado lo pone el gap del contenedor. */
.section-title {
  font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 600;
  letter-spacing: -.015em; color: var(--navy); margin: 0 0 var(--s7);
}
.sec-head .section-title { margin: 0; }
.section--navy .sec-eyebrow  { color: var(--accent-lift); }
.section--navy .section-title { color: #fff; }
.sec-intro { max-width: 62ch; margin: 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.55; }

/* ---------------------------------------------------------------------------
   3. NAV
   --------------------------------------------------------------------------- */
.nav {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 100;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) 0; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
.nav-links a {
  color: var(--ink); font-size: var(--fs-sm); margin-left: var(--s6);
  text-decoration: none; font-weight: 400;
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { font-weight: 600; }

/* ---------------------------------------------------------------------------
   4. HERO
   El velo plano al 72% se reemplaza por un degradado direccional: opaco donde
   va el texto, transparente donde el video tiene textura.
   --------------------------------------------------------------------------- */
.hero {
  padding: var(--s10) 0;
  border-bottom: 1px solid var(--rule);
  position: relative; overflow: hidden; isolation: isolate;
}
.hero > .container { position: relative; z-index: 2; }
.hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, .95)  0%,
    rgba(255, 255, 255, .90) 34%,
    rgba(255, 255, 255, .60) 62%,
    rgba(255, 255, 255, .22) 100%
  );
}
.hero-content { max-width: 780px; }
.hero-label {
  text-transform: uppercase; letter-spacing: 2px; font-size: var(--fs-xs);
  color: var(--accent); font-weight: 600; margin-bottom: var(--s4); display: block;
}
.h1 {
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: -.022em; font-weight: 600;
  margin: 0 0 var(--s5); color: var(--navy);
}
.lead {
  font-size: var(--fs-lead); line-height: 1.55; color: #223244;
  margin: 0; max-width: var(--measure); font-weight: 400;
}
.hero-content .btn { margin-top: var(--s7); }

/* ---------------------------------------------------------------------------
   4b. HERO DE PAGINA INTERIOR (prueba en dashboards-inteligentes)
   Sin media. La home se queda con el video y la atmosfera; las paginas de
   servicio abren con informacion. La diferencia no es decorativa: cambia
   que pregunta responde cada hero.
     home     -> "que es edeon"      titular corto y grande sobre video
     servicio -> "es esto para mi"   titular mas largo y medio, sin media,
                                     con datos concretos debajo
   --------------------------------------------------------------------------- */
.hero--texto {
  padding: var(--s8) 0 0;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: relative; overflow: hidden; min-height: 0;
}

/* Fondo con significado: cada servicio lleva el motivo de lo que hace, en
   vez de una imagen decorativa intercambiable. Dashboards -> grilla de
   grafico. Va a la derecha, donde no hay texto, y se desvanece antes de
   llegar a el. Es CSS puro: no suma un solo byte de descarga. */
.hero--texto::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230055B8%22%20stop-opacity%3D%22.13%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230055B8%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%20232%20L86%20208%20L172%20224%20L258%20156%20L344%20172%20L430%20104%20L520%2060%20L520%20300%20L0%20300%20Z%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cpolyline%20points%3D%220%2C232%2086%2C208%20172%2C224%20258%2C156%20344%2C172%20430%2C104%20520%2C60%22%20fill%3D%22none%22%20stroke%3D%22%230055B8%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"),
    repeating-linear-gradient(to right,  rgba(0,85,184,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, rgba(0,85,184,.07) 0 1px, transparent 1px 44px);
  background-repeat: no-repeat, repeat, repeat;
  background-position: right bottom, 0 0, 0 0;
  background-size: 52% 68%, auto, auto;
  /* Se desvanece antes de llegar al texto: solido a la derecha, nada pasando
     la mitad del ancho. */
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.6) 26%, transparent 52%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.6) 26%, transparent 52%);
}
/* El contenido y la franja se apoyan encima: la franja es opaca y tapa la
   grilla en su zona, que es lo que queremos. */
.hero--texto > .container,
.hero--texto .hero-datos { position: relative; z-index: 1; }
.hero--texto::before { content: none; }          /* sin velo: no hay video que velar */
.hero--texto .hero-content { max-width: 760px; }

/* Titular mas chico que el de la home, a proposito: aca el titular es una
   frase larga que informa, no un lema corto que impacta. */
.hero--texto .h1 {
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -.018em;
}
.hero--texto .lead { color: var(--muted); }
/* .hero-actions ya aporta su propio margen: sin esto se suma al de
   .hero-content .btn y quedan 96px en vez de 48. */
.hero--texto .hero-actions .btn { margin-top: 0; }

/* Migas: responde "donde estoy" sin ocupar lugar. */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); color: var(--faint); margin-bottom: var(--s5);
}
.breadcrumb a { color: var(--faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink); }
.breadcrumb .sep { color: var(--faint); }   /* --rule es color de borde: como texto da 1.29 */

/* Franja de datos: cuatro hechos que cambian por pagina. Es lo que hace
   que dos paginas de servicio no se confundan, y de paso es contenido
   concreto y citable. */
.hero-datos {
  margin-top: var(--s8);
  border-top: 1px solid var(--rule);
  background: var(--sunk);
}
.hero-datos .container {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s5);
}
.dato { display: flex; flex-direction: column; gap: var(--s1); }
.dato dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--faint); font-weight: 600;
}
.dato dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--navy); font-weight: 600; }

@media (max-width: 900px) {
  .hero-datos .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
}
@media (max-width: 560px) {
  .hero-datos .container { grid-template-columns: 1fr; }
  .hero--texto { padding-top: var(--s7); }
}

/* Motivo por servicio: cada pagina lleva el dibujo de lo que hace, en vez de
   una imagen decorativa intercambiable. Arquitectura -> capas apiladas. */
.hero--marcos::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230055B8%22%3E%3Crect%20x%3D%2234%22%20y%3D%2240%22%20width%3D%22300%22%20height%3D%22200%22%20rx%3D%224%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%2280%22%20width%3D%22300%22%20height%3D%22200%22%20rx%3D%224%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M120%20112%20H420%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%2296%22%20r%3D%223%22%20stroke-opacity%3D%22.3%22%2F%3E%3Ccircle%20cx%3D%22154%22%20cy%3D%2296%22%20r%3D%223%22%20stroke-opacity%3D%22.3%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22120%22%20y%3D%2280%22%20width%3D%22300%22%20height%3D%22200%22%20rx%3D%224%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.05%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 44% auto !important;
}
.hero--matriz::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22192%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22324%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22412%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22456%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2276%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2276%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%2276%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22192%22%20cy%3D%2276%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%2276%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%2276%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22324%22%20cy%3D%2276%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%2276%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22412%22%20cy%3D%2276%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22456%22%20cy%3D%2276%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22112%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%22112%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22112%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22192%22%20cy%3D%22112%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%22112%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22112%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22324%22%20cy%3D%22112%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%22112%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22412%22%20cy%3D%22112%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22456%22%20cy%3D%22112%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22148%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%22148%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22148%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22192%22%20cy%3D%22148%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%22148%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22148%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22324%22%20cy%3D%22148%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%22148%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22412%22%20cy%3D%22148%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22456%22%20cy%3D%22148%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22184%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%22184%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22184%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22192%22%20cy%3D%22184%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%22184%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22184%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22324%22%20cy%3D%22184%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%22184%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22412%22%20cy%3D%22184%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22456%22%20cy%3D%22184%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22220%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%22220%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22220%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22192%22%20cy%3D%22220%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%22220%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22220%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22324%22%20cy%3D%22220%22%20r%3D%223%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%22220%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22412%22%20cy%3D%22220%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22456%22%20cy%3D%22220%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22192%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22324%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22412%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Ccircle%20cx%3D%22456%22%20cy%3D%22256%22%20r%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.12%22%2F%3E%3Cg%20stroke%3D%22%230055B8%22%20stroke-opacity%3D%22.24%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M192%2076%20L236%20112%20L280%20112%22%2F%3E%3Cpath%20d%3D%22M236%20112%20L280%20148%20L324%20148%22%2F%3E%3Cpath%20d%3D%22M280%20148%20L324%20184%20L368%20184%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 46% auto !important;
}
.hero--flujo::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230055B8%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M96%2096%20H196%22%20stroke-opacity%3D%22.2%22%2F%3E%3Cpath%20d%3D%22M256%2096%20H356%22%20stroke-opacity%3D%22.2%22%2F%3E%3Cpath%20d%3D%22M386%20126%20V186%22%20stroke-opacity%3D%22.2%22%2F%3E%3Cpath%20d%3D%22M356%20216%20H256%22%20stroke-opacity%3D%22.2%22%2F%3E%3Cpath%20d%3D%22M196%20216%20H126%22%20stroke-opacity%3D%22.2%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2270%22%20width%3D%2260%22%20height%3D%2252%22%20rx%3D%224%22%20stroke-opacity%3D%22.3%22%2F%3E%3Crect%20x%3D%22196%22%20y%3D%2270%22%20width%3D%2260%22%20height%3D%2252%22%20rx%3D%224%22%20stroke-opacity%3D%22.3%22%2F%3E%3Crect%20x%3D%22356%22%20y%3D%2270%22%20width%3D%2260%22%20height%3D%2252%22%20rx%3D%224%22%20stroke-opacity%3D%22.3%22%2F%3E%3Crect%20x%3D%22356%22%20y%3D%22190%22%20width%3D%2260%22%20height%3D%2252%22%20rx%3D%224%22%20stroke-opacity%3D%22.3%22%2F%3E%3Crect%20x%3D%22196%22%20y%3D%22190%22%20width%3D%2260%22%20height%3D%2252%22%20rx%3D%224%22%20stroke-opacity%3D%22.3%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22196%22%20y%3D%2270%22%20width%3D%2260%22%20height%3D%2252%22%20rx%3D%224%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.08%22%2F%3E%3Crect%20x%3D%22356%22%20y%3D%22190%22%20width%3D%2260%22%20height%3D%2252%22%20rx%3D%224%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.08%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 46% auto !important;
}
.hero--ruta::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230055B8%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M40%20220%20C140%20220%20140%2090%20240%2090%20S340%20220%20440%20220%22%20stroke-opacity%3D%22.22%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230055B8%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22220%22%20r%3D%226%22%20fill-opacity%3D%22.3%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2290%22%20r%3D%228%22%20fill-opacity%3D%22.45%22%2F%3E%3Ccircle%20cx%3D%22440%22%20cy%3D%22220%22%20r%3D%226%22%20fill-opacity%3D%22.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 44% auto !important;
}
.hero--gondola::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230055B8%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%2270%22%20y%3D%2260%22%20width%3D%22380%22%20height%3D%2246%22%20rx%3D%223%22%20stroke-opacity%3D%22.18%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%22132%22%20width%3D%22380%22%20height%3D%2246%22%20rx%3D%223%22%20stroke-opacity%3D%22.18%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%22204%22%20width%3D%22380%22%20height%3D%2246%22%20rx%3D%223%22%20stroke-opacity%3D%22.18%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.16%22%3E%3Crect%20x%3D%2282%22%20y%3D%2272%22%20width%3D%2234%22%20height%3D%2222%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%22128%22%20y%3D%2272%22%20width%3D%2234%22%20height%3D%2222%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2282%22%20y%3D%22144%22%20width%3D%2234%22%20height%3D%2222%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%22290%22%20y%3D%22216%22%20width%3D%2234%22%20height%3D%2222%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22174%22%20y%3D%22144%22%20width%3D%2234%22%20height%3D%2222%22%20rx%3D%222%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.4%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 44% auto !important;
}
.hero--expediente::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230055B8%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%2260%22%20y%3D%2252%22%20width%3D%22150%22%20height%3D%22196%22%20rx%3D%224%22%20stroke-opacity%3D%22.18%22%2F%3E%3Crect%20x%3D%22290%22%20y%3D%2252%22%20width%3D%22150%22%20height%3D%22196%22%20rx%3D%224%22%20stroke-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M222%20150%20H278%22%20stroke-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M262%20136%20L278%20150%20L262%20164%22%20stroke-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22M84%2092%20H186%20M84%20120%20H186%20M84%20148%20H150%22%20stroke-opacity%3D%22.14%22%2F%3E%3Cpath%20d%3D%22M314%2092%20H416%20M314%20120%20H416%20M314%20148%20H380%22%20stroke-opacity%3D%22.2%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22290%22%20y%3D%2252%22%20width%3D%22150%22%20height%3D%22196%22%20rx%3D%224%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.05%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 44% auto !important;
}
.hero--embudo::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230055B8%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M60%2060%20H440%20L320%20160%20V240%20L180%20240%20V160%20Z%22%20stroke-opacity%3D%22.24%22%2F%3E%3Cpath%20d%3D%22M120%20104%20H380%22%20stroke-opacity%3D%22.14%22%2F%3E%3Cpath%20d%3D%22M170%20140%20H330%22%20stroke-opacity%3D%22.14%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M60%2060%20H440%20L320%20160%20V240%20L180%20240%20V160%20Z%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.05%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 44% auto !important;
}
.hero--acceso::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230055B8%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%2240%22%20y%3D%2234%22%20width%3D%22440%22%20height%3D%22232%22%20rx%3D%226%22%20stroke-opacity%3D%22.12%22%2F%3E%3Crect%20x%3D%2296%22%20y%3D%2266%22%20width%3D%22328%22%20height%3D%22168%22%20rx%3D%225%22%20stroke-opacity%3D%22.2%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%2298%22%20width%3D%22216%22%20height%3D%22104%22%20rx%3D%224%22%20stroke-opacity%3D%22.34%22%2F%3E%3Cpath%20d%3D%22M232%20130%20v-14%20a28%2028%200%200%201%2056%200%20v14%22%20stroke-opacity%3D%22.34%22%2F%3E%3Crect%20x%3D%22222%22%20y%3D%22130%22%20width%3D%2276%22%20height%3D%2252%22%20rx%3D%224%22%20stroke-opacity%3D%22.34%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22152%22%20y%3D%2298%22%20width%3D%22216%22%20height%3D%22104%22%20rx%3D%224%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.05%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 44% auto !important;
}
.hero--capas::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230055B8%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M60%2078%20L260%2030%20L460%2078%20L260%20126%20Z%22%20stroke-opacity%3D%22.16%22%2F%3E%3Cpath%20d%3D%22M60%20148%20L260%20100%20L460%20148%20L260%20196%20Z%22%20stroke-opacity%3D%22.34%22%2F%3E%3Cpath%20d%3D%22M60%20218%20L260%20170%20L460%20218%20L260%20266%20Z%22%20stroke-opacity%3D%22.16%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M60%20148%20L260%20100%20L460%20148%20L260%20196%20Z%22%20fill%3D%22%230055B8%22%20fill-opacity%3D%22.07%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 46% auto !important;
}

/* ---------------------------------------------------------------------------
   4c. ARQUITECTURA EN CAPAS
   Cuatro franjas apiladas. La de consolidacion va resaltada porque es el
   servicio que vende la pagina: el resto es contexto.
   --------------------------------------------------------------------------- */
.capas { display: flex; flex-direction: column; gap: var(--s1); }
.capa {
  display: grid; grid-template-columns: 230px 1fr; gap: var(--s6);
  align-items: baseline;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg); padding: var(--s5) var(--s6);
}
.capa h3 { margin: 0; font-size: var(--fs-h3); font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.capa p  { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.capa a  { color: var(--accent); }

/* La capa que se vende: navy, para que se lea como el centro del stack. */
.capa--foco {
  background: var(--navy); border-color: var(--navy);
  box-shadow: var(--lift-hover);
}
.capa--foco h3 { color: #fff; }
.capa--foco p  { color: #C6D3E2; }
.capa--foco .capa-tag {
  display: inline-block; margin-top: var(--s2);
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--accent-lift);
}
.capas-cierre {
  margin: var(--s6) 0 0; font-size: var(--fs-lead); line-height: 1.5;
  color: var(--navy); font-weight: 600; max-width: 62ch;
}

@media (max-width: 820px) {
  .capa { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s5); }
}

/* ---------------------------------------------------------------------------
   3b. MENU AGRUPADO POR CAPAS
   El desplegable de Capacidades sigue el modelo que la propia pagina de
   Arquitectura declara: primero el dato, despues la decision, despues la
   ejecucion. No es decoracion: le muestra al comprador como pensamos.
   --------------------------------------------------------------------------- */
.nav-grupo {
  display: block; margin: var(--s3) 0 var(--s1);
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; color: var(--faint);
}
.nav-grupo:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .nav-grupo { margin: var(--s4) 0 var(--s1); }
}

/* Franja de sintomas: la version de industria de .hero-datos.
   Servicio y industria comparten esqueleto pero responden preguntas
   distintas, asi que la carga cambia:
     servicio  -> datos    "para quien / en cuanto / integra con"   =>  es esto lo que necesito?
     industria -> sintomas "¿Donde esta la carga?"                  =>  entienden mi mundo?
   --------------------------------------------------------------------------- */
.hero-sintomas { margin-top: var(--s8); border-top: 1px solid var(--rule); background: var(--sunk); }
.hero-sintomas .container {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s5);
}
.hero-sintomas .rotulo {
  grid-column: 1 / -1; margin: 0 0 calc(var(--s2) * -1);
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--faint); font-weight: 600;
}
.sintoma {
  margin: 0; padding-left: var(--s4); border-left: 2px solid var(--accent);
  font-size: 15px; line-height: 1.45; color: var(--navy); font-weight: 600;
}
@media (max-width: 900px) { .hero-sintomas .container { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------------------------------------------------------------------------
   5. MARQUEE DE CLIENTES
   --------------------------------------------------------------------------- */
.client-marquee {
  padding: var(--s5) 0; border-bottom: 1px solid var(--rule);
  background: var(--bg); position: relative; overflow: hidden;
}
.client-marquee::before, .client-marquee::after {
  content: ""; position: absolute; top: 0; width: 120px; height: 100%;
  z-index: 2; pointer-events: none;
}
.client-marquee::before { left: 0;  background: linear-gradient(90deg,  #fff 0%, rgba(255,255,255,0) 100%); }
.client-marquee::after  { right: 0; background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%); }
.client-marquee-track {
  display: flex; width: max-content; gap: var(--s6); align-items: center;
  animation: client-marquee-scroll 34s linear infinite;
}
.client-marquee:hover .client-marquee-track { animation-play-state: paused; }
.client-logo-item {
  min-width: 150px; height: var(--s8); display: flex; align-items: center; justify-content: center;
  filter: grayscale(100%); opacity: .7;
  transition: opacity .25s var(--ease), filter .25s var(--ease);
}
.client-logo-item img { max-width: 145px; max-height: var(--s7); width: auto; height: auto; object-fit: contain; }
.client-logo-item:hover { filter: grayscale(0%); opacity: 1; }
@keyframes client-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   5b. FRANJA DE ESCALA
   Va despues de los logos: primero quien confia, despues cuanto pesan.
   Responde la pregunta que un comprador corporativo se hace antes que
   cualquier otra: "¿estos van a existir en tres años?".
   --------------------------------------------------------------------------- */
.escala { border-bottom: 1px solid var(--rule); background: var(--bg); }
.escala .container {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5); padding-top: var(--s6); padding-bottom: var(--s6);
}
.escala-dato { display: flex; flex-direction: column; gap: var(--s1); }
.escala-dato .n {
  font-size: var(--fs-h2); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.escala-dato .l { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }

@media (max-width: 780px) {
  .escala .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
}

/* ---------------------------------------------------------------------------
   6. CAPACIDADES — 2 columnas con aire
   --------------------------------------------------------------------------- */
.grid-capabilities { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s9) var(--s8); }
.capability h3 {
  font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 var(--s3); color: var(--navy);
}
.capability p { color: var(--muted); font-size: var(--fs-body); margin: 0 0 var(--s5); max-width: 52ch; }
.capability ul {
  padding: var(--s4) 0 0; margin: 0 0 var(--s4); list-style: none;
  font-size: var(--fs-sm); border-top: 1px solid var(--rule);
}
.capability li { margin-bottom: var(--s2); color: var(--ink); display: flex; gap: var(--s2); }
.capability li::before { content: "→"; color: var(--accent); flex: none; }
.cap-link {
  display: inline-block; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 1px; color: var(--accent); text-decoration: none; font-weight: 600;
}
.cap-link::after {
  content: "→"; display: inline-block; margin-left: var(--s2);
  transition: transform .2s var(--ease);
}
.cap-link:hover::after { transform: translateX(3px); }

/* La vertical de IA se destaca con un filete de acento. */
.capability.ai-highlight { border-left: 2px solid var(--accent); padding-left: var(--s5); }

/* La capacidad fundacional va a todo el ancho y las otras cuatro encima:
   la home cuenta la misma historia de capas que el menu y la pagina de
   Arquitectura. */
.capability--base {
  grid-column: 1 / -1;
  border-left: 2px solid var(--accent); padding-left: var(--s5);
  margin-bottom: var(--s5);
}
.capability--base ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); }
@media (max-width: 768px) { .capability--base ul { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   7. TARJETAS
   Dos variantes deliberadas:
     .card              superficie estatica (bloques de contenido)
     a.card             ademas se eleva y muestra filete al hover
   La elevacion al hover solo va en lo que realmente se puede clickear: si una
   tarjeta que no es link se mueve bajo el mouse, promete algo que no cumple.
   --------------------------------------------------------------------------- */
.card, .project-card {
  position: relative; display: block;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s6); text-decoration: none;
  box-shadow: var(--lift-rest);
}
.card > :last-child, .project-card > :last-child { margin-bottom: 0; }

a.card {
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
a.card::before {
  content: ""; position: absolute; left: -1px; top: var(--s5); bottom: var(--s5);
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
a.card:hover { box-shadow: var(--lift-hover); transform: translateY(-2px); border-color: #CFDDEE; }
a.card:hover::before, a.card:focus-visible::before { transform: scaleY(1); }

.card-kicker {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--faint); font-weight: 600; margin-bottom: var(--s3);
}
.card h3, .card h4, .project-card h3, .project-card h4 {
  font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 var(--s3); color: var(--navy);
}
.card p, .project-card p { margin: 0 0 var(--s5); color: var(--muted); font-size: 15px; line-height: 1.6; }
.card-link {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent); text-decoration: none; font-weight: 600; margin-top: auto;
}
.card-link::after { content: "→"; display: inline-block; margin-left: var(--s2); transition: transform .2s var(--ease); }
a.card:hover .card-link::after { transform: translateX(3px); }

/* Industrias — 4 columnas compactas, densidad distinta a Capacidades. */
.industries-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.industries-grid .card { display: flex; flex-direction: column; padding: var(--s5); }
.industries-grid .card h3 { font-size: var(--fs-lead); }
.industries-grid .card p { font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------------
   8. IMPACTO — el momento visual de la pagina, sobre navy
   --------------------------------------------------------------------------- */
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
.impact-item { display: flex; flex-direction: column; gap: var(--s3); }
.impact-metric {
  font-size: clamp(48px, 6vw, 72px); line-height: 1; font-weight: 700;
  letter-spacing: -.04em; color: var(--accent-lift);
  font-variant-numeric: tabular-nums;
}
.impact-item h3 {
  font-size: var(--fs-lead); line-height: 1.35; font-weight: 600;
  margin: 0; color: #fff;
  padding-top: var(--s3); border-top: 1px solid rgba(255, 255, 255, .18);
}
.impact-item p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: #B9C7D8; }

/* ---------------------------------------------------------------------------
   9. PROYECTOS — 1 destacado a todo el ancho + grilla
   Se quitan los logos repetidos: el nombre del cliente hace de identificador.
   --------------------------------------------------------------------------- */
.project-featured {
  display: grid; grid-template-columns: 260px 1fr; gap: var(--s8);
  align-items: start; margin-bottom: var(--s7);
  padding: var(--s8); border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--sunk);
}
.project-featured .project-logo img {
  max-width: 170px; max-height: var(--s7); width: auto; height: auto;
  object-fit: contain; object-position: left center; display: block;
  filter: grayscale(100%); opacity: .8;
}
.project-featured .card-kicker { color: var(--accent); margin-top: var(--s5); }
.project-featured h3 {
  font-size: var(--fs-h1); line-height: 1.15; font-weight: 600; letter-spacing: -.018em;
  margin: 0 0 var(--s4); color: var(--navy);
}
.project-featured p { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); margin: 0 0 var(--s5); max-width: 60ch; }
/* El bloque de impacto sigue la misma medida que el parrafo, no el ancho de la card. */
.project-featured .project-impact { max-width: 60ch; }

.projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-bottom: var(--s8); }
.projects-grid .card { display: flex; flex-direction: column; }
.projects-grid .card h3 { font-size: var(--fs-lead); }
.projects-grid .card p { font-size: var(--fs-sm); }
.project-impact {
  border-top: 1px solid var(--rule-soft); padding-top: var(--s4); margin-top: auto;
  font-size: 13px; color: var(--ink); line-height: 1.5;
}
.project-impact strong { color: var(--navy); }
.project-client {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); margin-bottom: var(--s3); font-weight: 600;
}

.clients-strip {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--s5) 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4);
}
.client-item { text-align: center; font-size: var(--fs-xs); color: var(--muted); letter-spacing: .8px; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   10. BOTONES
   --------------------------------------------------------------------------- */
.btn {
  display: inline-block; padding: var(--s4) var(--s7);
  background: var(--navy); color: #fff; text-decoration: none;
  font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 1px;
  border-radius: var(--radius);
  /* transicion tipada: antes era `transition: 0.3s` sobre todas las propiedades */
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--navy-deep); box-shadow: var(--lift-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   11. CTA
   --------------------------------------------------------------------------- */
/* Un unico componente de CTA para todo el sitio, sobre navy.
   Nota de diseno: la auditoria proponia dejar el navy solo en la seccion de
   Impacto y pasar el CTA a fondo claro. Al extender el sistema a las paginas
   interiores —que no tienen seccion de Impacto— eso obligaba a dos CTA
   distintos. Se unifico en navy: el color pasa a significar "momento de
   enfasis" y hay un solo componente. En la home los dos bloques navy quedan
   separados por los ~1.700px de Proyectos, asi que la alternancia se sostiene. */
.cta-block, .cta { background: var(--navy); color: #fff; padding: var(--s10) var(--s6); text-align: center; }
.cta-block h2, .cta h2 {
  font-size: var(--fs-h1); line-height: var(--lh-head); font-weight: 600;
  letter-spacing: -.018em; color: #fff;
  margin: 0 auto var(--s4); max-width: 20ch;
}
.cta-block p, .cta p { margin: 0 auto var(--s7); color: #B9C7D8; font-size: var(--fs-lead); max-width: var(--measure); }
.cta-block .btn, .cta .btn { background: #fff; color: var(--navy); }
.cta-block .btn:hover, .cta .btn:hover { background: #EAF1FA; }

/* ---------------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------------- */
.footer-corporate { padding: var(--s9) 0 var(--s7); border-top: 1px solid var(--rule); background: var(--bg); }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap: var(--s6);
  padding-bottom: var(--s7); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5);
}
.footer-brand img { height: 28px; width: auto; margin-bottom: var(--s3); }
.footer-note { font-size: 13px; color: var(--muted); margin: 0; max-width: 42ch; }
.footer-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--navy); margin: 0 0 var(--s3); font-weight: 600;
}
.footer-links a, .footer-links span {
  display: block; font-size: 13px; color: var(--muted); text-decoration: none;
  margin-bottom: var(--s2); transition: color .2s var(--ease);
}
.footer-links a:hover { color: var(--accent); }
.footer-cta {
  display: inline-block; margin-top: var(--s2); padding: var(--s3) var(--s4);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px;
  text-decoration: none; background: var(--navy); color: #fff; border-radius: var(--radius);
  transition: background-color .2s var(--ease);
}
.footer-cta:hover { background: var(--navy-deep); }
.footer-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); font-size: var(--fs-xs); color: var(--muted); }
.footer-meta p { margin: 0 0 var(--s1); font-size: var(--fs-xs); color: var(--muted); }

/* ---------------------------------------------------------------------------
   12b. COMPONENTES DE PAGINAS INTERIORES
   Servicios, industrias y contacto. Antes vivian duplicados en el <style>
   inline de cada pagina.
   --------------------------------------------------------------------------- */

/* Grillas genericas ------------------------------------------------------- */
.grid-2       { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.cases-grid   { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.intro-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }

.hero-actions { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s3); }
.section-sub  { max-width: 62ch; color: var(--muted); font-size: var(--fs-lead); margin: 0 0 var(--s6); }

/* Proceso numerado --------------------------------------------------------
   Grilla y no flex: con flex el ancho del titulo manda y los parrafos
   arrancan en una x distinta en cada fila. La columna fija los alinea. */
.step {
  border-top: 1px solid var(--rule); padding: var(--s5) 0;
  display: grid; grid-template-columns: 320px 1fr; gap: var(--s7); align-items: start;
}
.step:first-child { border-top: 0; padding-top: 0; }
.step h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.step p  { margin: 0; color: var(--muted); max-width: 62ch; }

/* KPI --------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.kpi { border-top: 2px solid var(--accent); padding-top: var(--s4); }
.kpi strong {
  font-size: var(--fs-h2); color: var(--navy); display: block;
  font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi span { font-size: var(--fs-sm); color: var(--muted); }

/* Tablas ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--bg); }
.table-wrap th, .table-wrap td {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule-soft); font-size: var(--fs-sm);
}
.table-wrap th { color: var(--navy); background: var(--sunk); font-weight: 600; }
.table-wrap tr:last-child td { border-bottom: 0; }

/* Logos de proyecto en paginas interiores --------------------------------- */
.project-logo { height: 58px; display: flex; align-items: center; margin-bottom: var(--s4); }
.project-logo img {
  max-width: 150px; max-height: var(--s7); width: auto; height: auto;
  object-fit: contain; object-position: left center; display: block;
  filter: grayscale(100%); opacity: .8;
}
.project-logo-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; max-width: 100%; height: var(--s7); padding: 0 var(--s3);
  border: 1px dashed var(--rule); color: var(--faint);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  background: var(--sunk); border-radius: var(--radius);
}

/* Boton secundario -------------------------------------------------------- */
.btn-outline, .btn-secondary {
  display: inline-block; padding: var(--s4) var(--s7);
  border: 1px solid var(--navy); background: transparent; color: var(--navy);
  text-transform: uppercase; letter-spacing: 1px; font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; text-decoration: none; border-radius: var(--radius);
  font-family: inherit;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn-outline:hover, .btn-secondary:hover { background: var(--navy); color: #fff; }
.cta .btn-outline, .cta-block .btn-outline { border-color: #fff; color: #fff; }
.cta .btn-outline:hover, .cta-block .btn-outline:hover { background: #fff; color: var(--navy); }

/* Formulario de contacto -------------------------------------------------- */
.lead-form-section { padding: var(--s9) 0; background: var(--sunk); }
.lead-form-wrap {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s7); background: var(--bg); box-shadow: var(--lift-rest);
}
.lead-form-wrap h3 {
  margin: 0 0 var(--s3); font-size: var(--fs-h2); font-weight: 600;
  letter-spacing: -.015em; color: var(--navy);
}
.lead-form-wrap > p { margin: 0 0 var(--s6); color: var(--muted); max-width: 62ch; }
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.lead-form .full { grid-column: 1 / -1; }
.lead-form label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px;
  color: var(--navy); display: block; margin-bottom: var(--s2); font-weight: 600;
}
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s3); font-family: 'Archivo', sans-serif; font-size: var(--fs-sm);
  color: var(--ink); background: var(--bg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lead-form input:hover, .lead-form select:hover, .lead-form textarea:hover { border-color: #C3D2E4; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 85, 184, .14);
}
.lead-form textarea { min-height: 120px; resize: vertical; }
.lead-form-actions { text-align: right; grid-column: 1 / -1; }

/* Honeypot: campo de texto real, invisible para una persona.
   No se usa display:none ni type=hidden a proposito. Los bots que valen la
   pena filtrar saltean los campos ocultos por esas dos vias justamente
   porque saben que no son de usuario; en cambio completan cualquier input
   que este en el DOM. Se lo saca de pantalla y se lo deja fuera del flujo.
   position:absolute lo saca del grid, asi que no abre un hueco.
   El aria-hidden y el tabindex viven en el HTML: sin ellos un lector de
   pantalla anuncia el campo, la persona lo completa de buena fe y le
   descartamos el lead. Un honeypot mal hecho bloquea justo a quien menos
   queres bloquear. */
/* Confirmacion y error del envio por JS (form-envio.js). El formulario se
   reemplaza por la confirmacion, asi no se puede mandar dos veces. */
.form-ok {
  border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--accent-soft);
  padding: var(--s6); display: flex; flex-direction: column; gap: var(--s2);
}
.form-ok:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-ok strong { font-size: var(--fs-lead); color: var(--navy); font-weight: 600; }
.form-ok p { margin: 0; color: var(--muted); max-width: 62ch; }

.form-error {
  margin: 0; padding: var(--s3) var(--s4);
  border-left: 2px solid #A3341F; background: #FCF1EE;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm); color: #7A2617;
}
.form-error a { color: #7A2617; }

.lead-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note, .note { font-size: 13px; color: var(--faint); margin: var(--s3) 0 0; }

/* CTA intermedio ---------------------------------------------------------- */
.mid-cta {
  border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--sunk);
  padding: var(--s6); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s5);
}
.mid-cta p { margin: 0; color: var(--muted); max-width: 56ch; }

/* ---------------------------------------------------------------------------
   12c. COMPONENTES DE PAGINAS DE INDUSTRIA
   --------------------------------------------------------------------------- */

/* Feature: bloque de texto con filete de acento arriba ---------------------- */
.feature { border-top: 2px solid var(--accent); padding-top: var(--s4); }
.feature h3 { font-size: var(--fs-h3); color: var(--navy); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--s3); }
.feature p  { margin: 0; color: var(--muted); }

/* Stack: fila de etiquetas cortas ------------------------------------------ */
.stack-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
.stack-item {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s5) var(--s3); text-align: center;
  font-size: var(--fs-sm); color: var(--ink); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}

/* Resultados: tarjetas de metrica ------------------------------------------ */
.results-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.result-card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s5); background: var(--bg); box-shadow: var(--lift-rest);
}
.result-metric {
  font-size: var(--fs-h2); line-height: 1; color: var(--navy);
  font-weight: 700; letter-spacing: -.03em; margin-bottom: var(--s3);
  font-variant-numeric: tabular-nums;
}
.result-card p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* Steps variante fila: "titulo — descripcion" en la misma linea ------------
   Markup distinto al de .step (paginas de servicio): aca cada paso es un
   .row con un <strong> al frente. La columna fija los alinea igual. */
.steps .row {
  border-bottom: 1px solid var(--rule); padding: var(--s5) 0;
  display: grid; grid-template-columns: 220px 1fr; gap: var(--s5); align-items: baseline;
}
.steps .row:last-child { border-bottom: 0; }
.steps strong { color: var(--navy); font-weight: 600; }
.steps .row p { margin: 0; color: var(--muted); }

/* FAQ ---------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.faq-item {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s5); background: var(--bg);
}
.faq-item h3 { margin: 0 0 var(--s2); color: var(--navy); font-size: var(--fs-lead); font-weight: 600; }
.faq-item p  { margin: 0; color: var(--muted); font-size: 15px; }

/* Iconos en linea ---------------------------------------------------------- */
.ico { color: var(--accent); flex: 0 0 auto; }

/* Sintomas: el problema del cliente ---------------------------------------- */
.symptoms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.symptom-card {
  border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  border-radius: var(--radius); padding: var(--s6); background: var(--bg);
  box-shadow: var(--lift-rest);
}
.symptom-card .ico { margin-bottom: var(--s4); display: block; }
.symptom-card h3 { font-size: var(--fs-h3); color: var(--navy); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--s3); }
.symptom-card p  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Modulos: que entregamos -------------------------------------------------- */
.modules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.module-card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s6); background: var(--bg); box-shadow: var(--lift-rest);
  display: flex; gap: var(--s5); align-items: flex-start;
}
.module-card.full { grid-column: 1 / -1; }
.module-card h3 { font-size: var(--fs-lead); color: var(--navy); font-weight: 600; margin: 0 0 var(--s2); }
.module-card p  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Banner navy: afirmacion destacada ---------------------------------------- */
.banner-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.banner-note {
  background: var(--navy); color: #fff; border-radius: var(--radius);
  padding: var(--s5) var(--s6); display: flex; align-items: center; gap: var(--s4);
  font-size: var(--fs-lead); line-height: 1.4;
}
.banner-note .ico { color: #fff; opacity: .85; }
.banner-note strong { font-weight: 600; }

/* Prueba social ------------------------------------------------------------ */
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.proof-card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s6); background: var(--bg); box-shadow: var(--lift-rest);
}
.proof-tag {
  display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent); font-weight: 600; margin-bottom: var(--s4); line-height: 1.4;
}
.proof-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Link con flecha ---------------------------------------------------------- */
.link-cta {
  color: var(--accent); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .3px;
}
.link-cta:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   12d. CONTENIDO LARGO Y PAGINAS SUELTAS
   Legales, canal de etica, 404 y la pagina de ecosistema web.
   --------------------------------------------------------------------------- */

/* Prosa legal: lo unico que importa aca es que se pueda leer.

   La medida va en los hijos y no en .content, porque en el HTML viene como
   <div class="container content">: si se la ponemos al contenedor, el
   margin:0 auto de .container la centra y la prosa queda desalineada
   respecto del hero, que ocupa los 1200px. Asi arranca en el mismo margen
   izquierdo y corta a los 68 caracteres. */
.content > * { max-width: 68ch; }
.content h2 {
  font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 600;
  letter-spacing: -.015em; color: var(--navy); margin: var(--s7) 0 var(--s4);
}
.content h2:first-child { margin-top: 0; }
.content h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--navy); margin: var(--s6) 0 var(--s3); }
.content p  { color: var(--muted); margin: 0 0 var(--s4); }
.content ul { margin: 0 0 var(--s4); padding-left: var(--s5); color: var(--muted); }
.content li { margin-bottom: var(--s2); }
.content a  { color: var(--accent); }

/* Flujo de trabajo por etapas --------------------------------------------- */
.flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.flow {
  background: var(--sunk); padding: var(--s5);
  border-top: 2px solid var(--accent); border-radius: var(--radius);
}
.flow strong { color: var(--navy); display: block; margin-bottom: var(--s2); font-weight: 600; }
.flow p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* 404: tarjetas de navegacion --------------------------------------------- */
.grid-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.link-card {
  display: block; background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--s5); text-decoration: none; color: inherit;
  box-shadow: var(--lift-rest);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.link-card:hover { border-color: #CFDDEE; box-shadow: var(--lift-hover); transform: translateY(-2px); }
.link-card h3 { font-size: var(--fs-h3); color: var(--navy); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--s3); }
.link-card p  { margin: 0; color: var(--muted); }

/* ---------------------------------------------------------------------------
   12f. SEGURIDAD Y TRATAMIENTO DE DATOS
   Pagina de due diligence: la lee el area de sistemas o de compras, no el
   comprador comercial. Densa, con anclas, y marcando lo que falta definir.
   --------------------------------------------------------------------------- */
.practica { display: grid; grid-template-columns: 260px 1fr; gap: var(--s6); padding: var(--s5) 0; border-top: 1px solid var(--rule); align-items: start; }
.practica:first-of-type { border-top: 0; padding-top: 0; }
.practica h3 { margin: 0; font-size: var(--fs-lead); font-weight: 600; color: var(--navy); }
.practica p { margin: 0; color: var(--muted); max-width: 62ch; }
.practica .fuente { display: block; margin-top: var(--s2); font-size: 12px; color: var(--faint); }
@media (max-width: 820px) { .practica { grid-template-columns: 1fr; gap: var(--s2); } }


/* ---------------------------------------------------------------------------
   13. MOTION — reveal on scroll
   La lista de selectores debe coincidir con la de reveal.js. Solo se aplica
   con JS activo: sin JS el contenido se ve normal.
   --------------------------------------------------------------------------- */
.js .sec-head,
.js .capability,
.js .card,
.js .project-card,
.js .project-featured,
.js .impact-item,
.js .step,
.js .kpi,
.js .lead-form-wrap,
.js .mid-cta,
.js .table-wrap,
.js .clients-strip {
  opacity: 0;
  transform: translateY(14px);
}

/* Misma especificidad (0,2,0) que la regla de arriba, pero declarada despues:
   gana sin necesidad de !important. */
.js .is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* ---------------------------------------------------------------------------
   14. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-grid     { grid-template-columns: 1fr; gap: var(--s7); }
  .project-featured { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s6); }
  .project-featured .card-kicker { margin-top: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .symptoms-grid, .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--s5); }
  .section, .section--airy { padding: var(--s8) 0; }
  .hero { min-height: 100svh; padding: var(--s9) 0 var(--s8); display: flex; align-items: flex-end; }
  /* El hero de texto NO es flex ni ocupa la pantalla: si hereda el display
     flex de arriba, la franja de datos se convierte en un item al costado
     en vez de apilarse debajo. */
  .hero--texto { display: block; min-height: 0; padding: var(--s7) 0 0; }
  /* En mobile el texto ocupa todo el ancho, asi que el fondo le queda
     detras en vez de al costado. Ahi no aporta: se oculta. */
  .hero--texto::after { display: none; }
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, .90)  0%,
      rgba(255, 255, 255, .82) 45%,
      rgba(255, 255, 255, .94) 100%
    );
  }
  .grid-capabilities { grid-template-columns: 1fr; gap: var(--s8); }
  .industries-grid, .projects-grid, .clients-strip { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-meta { flex-direction: column; }
  .client-marquee::before, .client-marquee::after { width: var(--s7); }
  .client-logo-item { min-width: 120px; height: 54px; }
  .client-logo-item img { max-width: 112px; max-height: 40px; }
  .cta-block, .cta { padding: var(--s8) var(--s5); }
  .grid-2, .cases-grid, .feature-grid, .intro-grid, .kpi-grid { grid-template-columns: 1fr; }
  .lead-form { grid-template-columns: 1fr; }
  .lead-form-wrap { padding: var(--s5); }
  .lead-form-actions { text-align: left; }
  .mid-cta { flex-direction: column; align-items: flex-start; }
  .step { grid-template-columns: 1fr; gap: var(--s2); }
  .stack-grid, .results-grid, .symptoms-grid, .modules-grid,
  .banner-notes, .proof-grid, .faq-grid { grid-template-columns: 1fr; }
  .module-card.full { grid-column: auto; }
  .steps .row { grid-template-columns: 1fr; gap: var(--s2); }
  .flow-grid, .grid-links { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   15. ACCESIBILIDAD — respetar a quien pidio menos movimiento
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .client-marquee-track { animation: none !important; transform: none !important; }
  .client-marquee { overflow-x: auto; }
  .js .sec-head, .js .capability, .js .card, .js .project-card,
  .js .project-featured, .js .impact-item, .js .step, .js .kpi,
  .js .lead-form-wrap, .js .mid-cta, .js .table-wrap, .js .clients-strip,
  .js .is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .card:hover, .btn:hover { transform: none; }
}