/* ==========================================================================
   IA.INOVASAS.COM — Brand stylesheet
   Paleta INOVA: azul (--blue/--blue2/--blue-deep) es la infraestructura que ya
   operamos, naranja (--orange/--orange-text/--accent-dark) es la identidad
   INOVA, violeta (--violet) es la capa nueva de IA.
   ========================================================================== */

:root {
  /* Trabajo asignado por token — spec §6.
     azul = infraestructura que ya operamos
     naranja = somos INOVA
     violeta = la capa nueva de IA */
  --blue: #07578f;
  --blue2: #0a6ba8;
  --orange: #ee9220;
  --violet: #5A3FC0;

  /* Neutros del manual de marca */
  --ink: #17191c;
  --graphite: #343338;
  --mid: #5d5e63;
  --paper: #f2f4f5;
  --white: #ffffff;

  /* Derivados. --orange da ~2.6:1 sobre blanco y falla AA para texto normal.
     Este paso oscurecido es el ÚNICO naranja permitido en texto pequeño. */
  --orange-text: #8a4d00;

  /* Naranja como TEXTO, permitido solo sobre los fondos oscuros del sitio
     (--blue-deep). Ahi da 4.79:1 y cumple AA. Sobre blanco NO se usa nunca:
     para eso esta --orange-text. */
  --accent-dark: #ee9220;
  --blue-deep: #043c63;
  --violet-soft: #f0ecfb;
  --hairline: #dfe4e7;
  --hairline-dark: rgba(255, 255, 255, 0.14);

  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --shell: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --radius: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- Base ---- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--blue-deep);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
}

p { margin: 0; }

a { color: var(--blue); }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--orange);
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ------------------------------------------------------------ Typography - */

.display {
  font-size: clamp(2.4rem, 5.6vw, 4.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700;
}

h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 700;
}

h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 1rem;
}

.eyebrow-dark { color: var(--blue); }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46rem;
}

.section-sub {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: var(--mid);
  max-width: 44rem;
  margin-top: 1rem;
}

/* --------------------------------------------------------------- Buttons - */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
              border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-accent {
  background: var(--orange);
  color: var(--blue-deep);
}

.btn-accent:hover { background: #f5a445; }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-ghost:hover {
  border-color: var(--orange);
}

.btn-sm { padding: 0.65rem 1.15rem; font-size: 0.9375rem; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- Header - */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(4, 60, 99, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(4, 60, 99, 0.97);
  border-bottom-color: var(--hairline-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--white);
  text-decoration: none;
  flex-shrink: 0;
}

/* El logo de INOVA es apaisado (500x301). Se fija la altura y se deja el
   ancho libre; forzar un cuadrado lo deformaria. */
.logo-mark {
  width: auto;
  height: 42px;
}

/* El nombre de la empresa ya lo dice el logotipo. Esta palabra dice de que
   trata ESTE sitio, y se separa con una barra para que no se lea como parte
   de la marca. */
.logo-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  padding-left: 0.7rem;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  line-height: 1.15;
}

@media (max-width: 400px) {
  .logo-word { display: none; }

  /* Con el piso de 2.4rem, "Automatizacion" no cabe en la columna a 320px
     y se sale del h1. Bajo 400px el titular escala con el ancho. */
  .display { font-size: clamp(1.9rem, 9.4vw, 2.4rem); }
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}

.primary-nav a:hover { color: var(--accent-dark); }
.nav-cta { color: var(--blue-deep); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--white);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ Hero - */

.hero {
  position: relative;
  background: var(--blue-deep);
  color: var(--white);
  overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 8.5rem) clamp(4rem, 9vw, 7rem);
}

.hero-field {
  position: absolute;
  inset: 0;
  opacity: 0.75;
  pointer-events: none;
}

.hero-field svg { width: 100%; height: 100%; }


.hero-inner { position: relative; }

.hero .display { color: var(--white); max-width: 17ch; }
.hero .lead { margin-top: 1.5rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.hero-strip li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hero-strip li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

/* -------------------------------------------------------------- Sections - */

.section { padding-block: var(--section-y); }
.section-alt { background: var(--paper); }

.section-navy {
  background: var(--blue-deep);
  color: var(--white);
}

.section-navy h2,
.section-navy h3 { color: var(--white); }

.section-navy .section-sub { color: rgba(255, 255, 255, 0.75); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ----------------------------------------------------------------- Grids - */

.grid { display: grid; gap: 1.5rem; }

/* Paginas interiores ponen el parrafo suelto antes del grid, sin el
   .section-head que en la home aporta el margen. */
.section-sub + .grid { margin-top: clamp(2.5rem, 5vw, 4rem); }

.grid-3 { grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 28%, 320px), 1fr)); }

/* ----------------------------------------------------------------- Cards - */

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  border: 1px solid var(--hairline);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(4, 60, 99, 0.45);
}

.card h3 { margin-bottom: 0.75rem; }
.card p { color: var(--mid); }

.card-index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue2);
  margin-bottom: 1.25rem;
}

.card-bordered { border-top: 3px solid var(--blue2); }

.tag-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink);
}

.tag-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.tag-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.55rem;
  background: var(--orange);
  transform: rotate(45deg);
}

.pull-quote {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 40rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--blue-deep);
  border-top: 2px solid var(--orange);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* -------------------------------------------------------------- Pipeline - */

.pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  counter-reset: stage;
}

.stage {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}

.stage h3 {
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.stage ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9375rem;
  color: var(--mid);
}

/* ----------------------------------------------------------------- Steps - */

.steps .step {
  background: var(--blue-deep);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: 2rem;
}

.step-number {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.9rem;
}

.step h3 { margin-bottom: 0.6rem; }

.step-lead {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 0.75rem;
}

.step p:last-child { color: rgba(255, 255, 255, 0.72); }

/* ----------------------------------------------------------- Measurement - */

.measure-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.measure-note {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  font-size: 0.9375rem;
  color: var(--mid);
}

.metric-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.metric-list li {
  display: grid;
  gap: 0.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
}

.metric-list li:first-child { border-top: 1px solid var(--hairline); }

.metric-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue-deep);
}

.metric-desc {
  font-size: 0.9375rem;
  color: var(--mid);
}

/* ------------------------------------------------------------------ Form - */

.start-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.start-points {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  color: var(--graphite);
}

.start-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.start-points li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 0.6rem;
  background: var(--orange);
  transform: rotate(45deg);
}

.lead-form {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(2, 1fr);
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.field { display: grid; gap: 0.4rem; }
.field-full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-deep);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  width: 100%;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.field textarea { resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue2);
  box-shadow: 0 0 0 3px rgba(10, 107, 168, 0.18);
}

.form-footer { display: grid; gap: 0.75rem; }

.form-note {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--mid);
  min-height: 1.25rem;
}

.form-note.is-visible {
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}

/* ---------------------------------------------------------------- Footer - */

.site-footer {
  background: var(--blue-deep);
  color: rgba(255, 255, 255, 0.7);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer-inner {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
}

.footer-tag {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  margin-top: 1.25rem;
}

.footer-sub {
  font-size: 0.9375rem;
  margin-top: 0.5rem;
}

.footer-nav {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer-nav li,
.footer-nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer-nav a:hover { color: var(--accent-dark); }

/* .footer-bottom y una segunda .footer-legal vivian aqui, heredadas del sitio
   anterior. La primera era un selector huerfano que ningun partial usaba; la
   segunda ponia --graphite sobre fondo oscuro y solo funcionaba porque la
   regla del final la pisaba por orden de cascada. Ambas consolidadas en la
   unica definicion de .footer-legal, mas abajo. */

/* ------------------------------------------------------------ Responsive - */

@media (min-width: 720px) {
  .measure-layout,
  .start-layout { grid-template-columns: 1fr 1fr; }

  .footer-inner { grid-template-columns: 1.4fr 1fr; }
}

/* 1023 y no 900: con Blog en el menu, entre 900 y 1023 px los enlaces no
   caben en una linea y se partian en dos. */
@media (max-width: 1023px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blue-deep);
    border-bottom: 1px solid var(--hairline-dark);
    padding: 1rem var(--gutter) 1.5rem;
    display: none;
  }

  .primary-nav.is-open { display: flex; }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav ul a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--hairline-dark);
  }

  .nav-cta {
    margin-top: 1.25rem;
    text-align: center;
  }
}

@media (max-width: 620px) {
  .lead-form { grid-template-columns: 1fr; }
  .hero-field { opacity: 0.4; }
}

/* --------------------------------------------------------- Reduced motion - */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn:hover,
  .card:hover { transform: none; }
}

/* ------------------------------------------------- Bloques de evidencia -- */

/* --orange como borde y fondo tenue. El texto va en --ink, que si pasa AA.
   Esta es la regla de color del proyecto hecha codigo. */
/* Sin franja lateral de color: el borde completo mas el tinte de fondo hacen
   el mismo trabajo de separar el bloque sin recurrir al acento lateral, que
   es un tic de plantilla. */
.evidence-block {
  border: 1px solid rgba(238, 146, 32, 0.45);
  background: rgba(238, 146, 32, 0.08);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  margin-top: 2rem;
  max-width: 46ch;
}

.evidence-figure {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.evidence-desc {
  margin-top: 0.5rem;
  color: var(--mid);
  font-size: 0.9375rem;
}

/* Sobre fondo oscuro el bloque invierte y el texto pasa a blanco. */
.section-navy .evidence-block,
.hero .evidence-block {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}

.section-navy .evidence-figure,
.hero .evidence-figure { color: var(--white); }

.section-navy .evidence-desc,
.hero .evidence-desc { color: rgba(255, 255, 255, 0.78); }

/* ----------------------------------------------------- Prueba en tarjeta - */

.card-proof {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--violet);
}

.card h3 a {
  color: inherit;
  text-decoration: none;
}

.card h3 a:hover { color: var(--blue); }

/* ------------------------------------------------------------- Logotipo -- */

.logo-word-accent { color: var(--accent-dark); }

/* ------------------------------------------------------------- WhatsApp -- */

/* Deliberadamente subordinado: 52px, esquina, sin btn-accent. Si compite en
   prominencia con el formulario, absorbe el trafico y el formulario muere. */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(4, 60, 99, 0.28);
  transition: transform 0.2s var(--ease);
}

.whatsapp-float:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
  .whatsapp-float:hover { transform: none; }
}

/* ----------------------------------------------------------- CTA final --- */

.cta-final { max-width: 58ch; }
.cta-final .btn { margin-top: 2rem; }

/* --------------------------------------------------------- Pie legal ----- */

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hairline-dark);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------- H1 paginas interiores - */

.display-sm {
  font-size: clamp(2rem, 5vw, 3.25rem);
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

/* ============================================================ HERO IRIS ===
   El campo del hero es la marca convertida en composicion: anillos
   concentricos, arco naranja y pupila. Los nodos viajan hacia el nucleo,
   que es el argumento de la pagina: el trabajo disperso entra y sale
   resuelto. La animacion significa algo; no es un campo de particulas.
   ======================================================================== */

.campo-lineas { opacity: 0.30; }
.campo-anillos { opacity: 0.22; }

.campo-arco {
  transform-box: view-box;
  transform-origin: 690px 300px;
  animation: iris-girar 24s linear infinite;
  opacity: 0.9;
}

.campo-pupila {
  transform-box: view-box;
  transform-origin: 690px 300px;
  animation: iris-latir 6s ease-in-out infinite;
}

.campo-nodos circle { filter: drop-shadow(0 0 6px rgba(238, 146, 32, 0.55)); }

@keyframes iris-girar {
  to { transform: rotate(360deg); }
}

@keyframes iris-latir {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* main.js ademas pausa la linea de tiempo del SVG (animateMotion no se puede
   detener desde CSS). Esto cubre las animaciones declaradas aqui. */
@media (prefers-reduced-motion: reduce) {
  .campo-arco,
  .campo-pupila { animation: none; }
}

/* ======================================================= FRANJA CLIENTES ===
   Prueba social inmediatamente despues del hero. Los logos van en escala de
   grises y recuperan color al pasar el cursor: la franja no debe competir
   con el hero, pero tampoco parecer decoracion muerta.
   ======================================================================== */

.clientes {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}

.clientes-titulo {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mid);
  text-align: center;
  margin-bottom: 2rem;
}

/* ============================================================== CIERRE ====
   El CTA final es una franja propia, no una seccion mas. Lleva las dos
   llamadas que pide el sistema: la directa y la de baja friccion para quien
   todavia no esta listo para dar sus datos.
   ======================================================================== */

.cierre {
  position: relative;
  overflow: hidden;
  background: var(--blue-deep);
  color: var(--white);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.cierre-campo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cierre-campo svg { width: 100%; height: 100%; }

.cierre-inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.cierre h2 {
  color: var(--white);
  max-width: 18ch;
  text-wrap: balance;
}

.cierre-lead {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 54ch;
  line-height: 1.7;
}

.cierre-puntos {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.cierre-puntos li {
  position: relative;
  padding-left: 1.75rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
}

.cierre-puntos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
}

.cierre-acciones {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.btn-lg {
  padding: 1.05rem 2rem;
  font-size: 1.0625rem;
}

/* La CTA transicional es un enlace, no un boton: debe leerse como la opcion
   menor sin desaparecer. */
.cierre-alterna {
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.9375rem;
  text-underline-offset: 4px;
}

.cierre-alterna:hover { color: var(--white); }

@media (min-width: 860px) {
  .cierre-inner { grid-template-columns: 1.35fr 1fr; }
  .cierre-acciones { justify-items: end; }
}

/* ============================================================== FOOTER ====
   El pie es el cajon de sastre: enlaces secundarios que no merecen espacio
   arriba pero que la gente busca abajo.
   ======================================================================== */

/* El texto "INOVA TECH DIGITAL" ocupa poco dentro del dibujo: por debajo de
   ~80px de alto deja de leerse. 96px sigue bajo los 132px nativos. */
.footer-logo {
  width: auto;
  height: 96px;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  .footer-logo { height: 80px; }
}

/* Bajo 375px las dos columnas del pie dejan menos ancho que
   "info@inovasas.com", que no tiene donde partirse. Va despues de la regla
   base de .footer-nav para ganarle en la cascada. */
@media (max-width: 374px) {
  .footer-nav { grid-template-columns: 1fr; }
}

.footer-nav h3 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hairline-dark);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-legal a { color: rgba(255, 255, 255, 0.72); }
.footer-legal a:hover { color: var(--accent-dark); }

/* ================================================================ PASOS ===
   .steps pasa a ser <ol> porque los pasos SI son una secuencia: el orden
   carga informacion que el lector necesita. Se le quita el estilo de lista.
   ======================================================================== */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 28%, 320px), 1fr));
}

/* ================================================== CORRECCIONES DE CAPA ===
   El rebranding mapeo --navy y --navy-soft de la base heredada al MISMO
   token (--blue-deep). Eran dos azules distintos a proposito: el fondo de
   seccion y, encima, una superficie mas clara para las tarjetas. Al
   colapsarlos, las tarjetas de "Tres pasos" quedaron del color exacto de su
   fondo: invisibles salvo por el filete.

   Se restaura la jerarquia con una superposicion translucida en vez de un
   token nuevo: funciona sobre cualquier fondo oscuro del sitio y no depende
   de acertar un segundo azul a mano.
   ======================================================================== */

/* Las tarjetas se HUNDEN, no se elevan. Aclarar el fondo parecia lo natural,
   pero el naranja sobre --blue-deep solo tiene 4.79:1, apenas 0.29 de holgura
   sobre el minimo AA: cualquier aclarado lo tumbaba (al 7%% caia a 3.92:1).
   Oscurecer da mas separacion visual Y mas contraste a la vez. */
.steps .step {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.12);
}

/* La cabecera translucida sobre una seccion clara dejaba el naranja del
   logotipo en 3.42:1. Al hacer scroll pasa a opaca y vuelve a 4.79:1. */
.site-header.is-scrolled {
  background: var(--blue-deep);
}

/* ==================================================== FOOTER: PROPORCION ===
   El pie reparte 1.4fr a la marca y 1fr a la navegacion, y la navegacion
   tiene cuatro grupos. Cuatro columnas dentro de un tercio del ancho es una
   rejilla 2x2 apretada. Se invierte el reparto y se dejan las cuatro en fila
   cuando hay sitio.
   ======================================================================== */

@media (min-width: 720px) {
  .footer-inner { grid-template-columns: 1fr 1.9fr; }
}

@media (min-width: 980px) {
  .footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La marca del pie necesita menos ancho que el texto que la acompana. */
.footer-tag { max-width: 26ch; }
.footer-sub { max-width: 30ch; }

/* ============================================== CABECERA: ESPACIO JUSTO ===
   El logotipo ya dice el nombre de la empresa; la palabra al lado dice de que
   trata este sitio. Entre 900 y 1080 px la barra queda apretada con los cinco
   enlaces mas el boton, asi que la palabra se retira antes de que algo se
   desborde.
   ======================================================================== */

@media (max-width: 1080px) {
  .logo-word { display: none; }
}

/* ============================================ CORRECCIONES TRAS VER LA PAGINA
   Escritas despues de abrir el sitio en Chromium y mirarlo, no de leer el
   codigo. Tres cosas que solo se ven renderizando.
   ======================================================================== */

/* 1. El iris estaba ahi pero casi invisible: 0.22 de opacidad en los anillos
      dentro de un contenedor ya al 0.75 daba un arco naranja suelto en vez de
      una marca. Se sube presencia y se agranda el trazo. */
.hero-field { opacity: 1; }
.campo-lineas { opacity: 0.38; }
.campo-anillos { opacity: 0.42; stroke-width: 1.5; }
.campo-nodos circle { filter: drop-shadow(0 0 10px rgba(238, 146, 32, 0.75)); }

/* 2. El logotipo lleva el nombre escrito dentro. A 42px de alto ese texto era
      ilegible. Necesita altura real para funcionar como logotipo y no como
      mancha. */
.logo-mark { height: 56px; }

@media (max-width: 600px) {
  .logo-mark { height: 46px; }
}

/* ===================================================== EL FOSO CON IMAGEN ===
   Tres secciones seguidas con la misma rejilla de tres tarjetas es el patron
   que delata una pagina generada. Esta seccion pasa a texto + fotografia: la
   imagen ES el argumento, porque muestra la infraestructura que ya operamos.
   ======================================================================== */

.foso-intro {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Sin nada debajo, el margen se sumaria al padding de la seccion. */
.foso-intro:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .foso-intro { grid-template-columns: 1fr 1fr; }
}

.foso-imagen { margin: 0; }

.foso-imagen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.foso-imagen figcaption {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mid);
  max-width: 46ch;
  font-style: italic;
}

/* ================================================ COLISIONES DE CASCADA ===
   Encontradas midiendo el estilo COMPUTADO en el navegador, no leyendo el
   archivo: en la hoja las dos reglas parecen correctas.
   ======================================================================== */

/* .primary-nav a (0,1,1) le ganaba a .nav-cta (0,1,0), asi que el boton
   principal heredaba el blanco al 78% de los enlaces del menu y quedaba en
   1.99:1 sobre el naranja. Practicamente ilegible, y era EL CTA del sitio. */
.primary-nav .nav-cta {
  color: var(--blue-deep);
}

/* La cabecera es sticky y esta EN FLUJO por encima del hero, no superpuesta:
   lo que hay detras a scroll cero es el blanco del body, no el azul del hero.
   Translucida daba rgb(34,83,118) y dejaba el naranja del logotipo en 3.42:1,
   ademas de mostrar dos azules distintos apilados. Opaca resuelve las dos
   cosas; el desenfoque solo importaba al hacer scroll, y ahi ya era opaca. */
.site-header {
  background: var(--blue-deep);
}

/* ===================================================== CINTA DE CLIENTES ===
   Slider infinito CSS puro con los nueve clientes de INOVA: los tres con
   pagina de caso propia y los seis de hosting/web/correo, que no llevan
   pagina individual (servicios de infraestructura, no proyectos con caso).

   RITMO: cada logo vive dentro de un slot de ancho FIJO (--cinta-slot), no
   su ancho natural. Sin esto NOIZ (683x180) ocupa seis veces el espacio de
   CSA (175x180) y el ojo lee la fila como desordenada en vez de como una
   sola familia. object-fit: contain centra cada logo dentro de su slot
   conservando proporcion.

   BUCLE: la pista contiene el set DOS VECES y se anima con translateX. Un
   -50% simple SUBDESPLAZA por gap/2: el gap que separa la copia 1 de la
   copia 2 existe una sola vez en el DOM, pero "mitad del ancho total" lo
   cuenta como si fueran dos medios-gaps. Confirmado midiendo el sitio en
   vivo: el salto en cada vuelta era de exactamente gap/2 (38.5px con un gap
   de 76.8px). La correccion resta medio gap de mas al -50%, y --cinta-gap
   alimenta tanto `gap` como el keyframe para que nunca se desincronicen. */

.cinta {
  --cinta-gap: clamp(2.5rem, 6vw, 5rem);
  --cinta-slot: clamp(96px, 11vw, 140px);
  overflow: hidden;
  /* Difumina el punto exacto donde una imagen entra o sale, para que el
     movimiento se lea como una cinta continua y no como logos que aparecen
     de golpe en el borde. */
  mask-image: linear-gradient(
    to right, transparent, black 8%, black 92%, transparent
  );
  -webkit-mask-image: linear-gradient(
    to right, transparent, black 8%, black 92%, transparent
  );
}

.cinta-pista {
  display: flex;
  align-items: center;
  gap: var(--cinta-gap);
  list-style: none;
  margin: 0;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  width: max-content;
  animation: cinta-desplazar 40s linear infinite;
}

/* Pausa al pasar el cursor o el foco, para poder leer un logo concreto. */
.cinta:hover .cinta-pista,
.cinta:focus-within .cinta-pista {
  animation-play-state: paused;
}

@keyframes cinta-desplazar {
  to { transform: translateX(calc(-50% - var(--cinta-gap) / 2)); }
}

.cinta-pista li {
  flex: 0 0 var(--cinta-slot);
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(48px, 6vw, 64px);
}

.cinta-pista img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  /* contrast(1.15) dejaba el logo de CSA (degradado verde suave) casi
     invisible en escala de grises: su tono medio quedaba demasiado cerca
     del blanco de fondo. brightness(0.85) empuja los tonos claros hacia
     abajo antes del contraste, y el resto de logos (negros/solidos) no
     cambia de forma perceptible con ese ajuste. */
  filter: grayscale(1) brightness(0.85) contrast(1.3);
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}

.cinta-pista li:hover img {
  opacity: 1;
  filter: grayscale(0) brightness(1) contrast(1);
}

@media (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: none; }
}


/* ============================================================ ICONOGRAFIA ==
   Set real de iconos de sistema heredado del proyecto anterior (Guardnetic
   brand assets): grilla 24x24, trazo 2px, extremos y uniones redondeados,
   SIN relleno. Vocabulario deliberado: nodos, trayectorias, campos — no
   objetos literales (nada de carpetas, engranajes ni bombillas).

   Se colocan junto al titulo de cada tarjeta, en linea, sin insignia ni
   circulo de fondo: un icono-badge sobre cada encabezado es el patron que
   delata una pagina generada. Aqui el icono se lee como parte del titulo,
   al mismo tamaño de linea, no como decoracion separada.
   ======================================================================== */

.icono-sistema {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  stroke: var(--blue2);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Sobre fondo navy, el trazo pasa a blanco: la propia guia de marca reserva
   el azul de interaccion solo para claro-sobre-oscuro. Las tarjetas .stage
   del Foso son blancas (viven en una section-alt clara), asi que NO entran
   en esta regla — usan el azul por defecto igual que el resto de tarjetas. */
.section-navy .icono-sistema {
  stroke: var(--white);
}

.metric-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.metric-list .icono-sistema {
  width: 22px;
  height: 22px;
  stroke: var(--blue2);
}

/* -------------------------------------------------------------- Honeypot -- */

/* Fuera de pantalla, no display:none — algunos bots ignoran los campos
   ocultos con display. Este se ve como un campo normal en el DOM. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------- Paginas de caso -- */

.caso-imagen {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius);
}

/* Prosa del caso: p tiene margin 0 en la base, asi que el ritmo entre
   parrafos se declara aqui y el ancho se limita para que se lea comodo. */
.caso-texto {
  max-width: 65ch;
  color: var(--graphite);
}

.caso-texto p + p { margin-top: 1.1rem; }

h2 + .caso-texto,
.section-sub + .caso-texto { margin-top: 1.25rem; }

/* Un articulo lleva varios H2 en la misma seccion; sin esto cada uno queda
   pegado al bloque anterior. */
article.section .shell > h2:not(:first-child) { margin-top: clamp(3rem, 6vw, 4.5rem); }

.caso-texto + .grid { margin-top: clamp(2.5rem, 5vw, 4rem); }

.testimonio { margin: 0; }

.testimonio .pull-quote p { margin: 0; }

.testimonio-autor {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--mid);
}

.caso-lista {
  max-width: 65ch;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------- FAQ -- */

.faq-lista {
  max-width: 48rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--hairline);
}

.faq-item { border-bottom: 1px solid var(--hairline); }

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.2rem);
  font-weight: 700;
  color: var(--blue-deep);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--orange-text);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  padding-bottom: 1.25rem;
  max-width: 65ch;
  color: var(--graphite);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* =========================================================== BANNER ======
   Cabecera fija de toda pagina interna. Es el hero de la home en version
   corta: mismo navy, mismo iris y arco naranja, pero desplazado a la derecha
   y tenue, para que el titulo mande. min-height y no height: con titulos
   largos en movil el contenido crece y no se recorta. */

.banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 30vh;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--blue-deep);
  color: var(--white);
  overflow: hidden;
}

.banner-campo {
  position: absolute;
  inset: 0;
  opacity: 0.85;
  pointer-events: none;
}

.banner-campo svg { width: 100%; height: 100%; }

.banner-inner { position: relative; width: 100%; }

.banner-titulo {
  max-width: 22ch;
  color: var(--white);
  font-size: clamp(1.9rem, 4.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.banner-lead {
  max-width: 44rem;
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.banner .btn { margin-top: 1.75rem; }

@media (max-width: 720px) {
  .banner-campo { opacity: 0.45; }
}

/* ---------------------------------------------- Paginas de servicio (v2) -- */

/* Dos columnas fijas y no auto-fit: con auto-fit, 4 tarjetas en 1100 px
   caian en 3 + 1 con una huerfana. */
.grid-2 { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cuatro pasos: 4 en fila, 2 x 2 en tablet, 1 en movil. Nunca 3 + 1. */
.steps.steps-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .steps.steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .steps.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.section-summary + .grid,
.section-summary + .steps,
.section-summary + .tabla-envoltura { margin-top: clamp(2rem, 4vw, 3rem); }

h2 + .section-summary { margin-top: 1rem; }

.enlace-caso {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
}

/* La tabla no se desplaza en horizontal: con tres columnas y texto que
   envuelve cabe en 320px, y un scroll lateral esconde la columna que importa. */
.tabla-envoltura { max-width: 60rem; }

.tabla-comparativa {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  line-height: 1.5;
}

.tabla-comparativa th,
.tabla-comparativa td {
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.tabla-comparativa thead th {
  font-family: var(--font-display);
  color: var(--blue-deep);
  border-bottom: 2px solid var(--blue-deep);
}

.tabla-comparativa tbody th {
  font-weight: 600;
  color: var(--blue-deep);
  width: 28%;
}

.tabla-comparativa td { color: var(--graphite); }

/* Texto corrido sobre navy: el --graphite y el azul de enlace de la base no
   tienen contraste sobre --blue-deep. */
.section-navy .caso-texto { color: rgba(255, 255, 255, 0.82); }

.section-navy .caso-texto a {
  color: var(--white);
  text-decoration-color: var(--accent-dark);
  text-underline-offset: 0.2em;
}

/* Caso real dentro del cierre: el cliente es prueba del servicio, no su eje.
   Va despues del boton, como respaldo de la decision que se le pide al lector. */
.caso-real {
  max-width: 36rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  text-align: left;
}

.caso-real-etiqueta {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.caso-real-cifra {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  color: var(--blue-deep);
}

.caso-real p:not([class]) {
  margin-top: 0.5rem;
  color: var(--graphite);
}

.caso-real a {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
}

/* Grillas de tres: auto-fit dejaba 2 + 1 en tablet (768 px), con la tercera
   tarjeta huerfana en todas las paginas. Una columna hasta que caben las tres
   en fila; nunca un salto intermedio. Va al final para ganar a .grid-3 y
   .steps por orden de cascada. */
.grid-3,
.steps:not(.steps-4) { grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .grid-3,
  .steps:not(.steps-4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}