/* =============================================================================
   propuesta-impacto.css — Home Cuantic "PASEO POR EL ERP"
   -----------------------------------------------------------------------------
   Idea: las capturas del software son las protagonistas. Cada imagen vive
   dentro de una "ventana" de aplicación con barra de título; en MÓDULOS un
   visor fijo a gran tamaño va cambiando de pantalla mientras se recorre la
   lista completa de características (scrollytelling). Un raíl lateral marca
   las paradas del paseo.

   Tokens
   ------
   Tinta    #0D1B2E   fondo oscuro (hero, IA, CTAs)
   Papel    #F6F8FB   fondo claro alternativo
   Cobalto  #1750E0   acción / marca
   Verde    #16A06C   checks (lo que el ERP "ya hace")
   Ámbar    #F5A524   acento puntual (IA, parada activa del raíl)

   Tipografía
   ----------
   Toda la tipografía unificada a "Hind" (var(--font-base)), la fuente
   corporativa auto-alojada del proyecto. Sin Google Fonts: sin dependencia
   de red, mejor privacidad/RGPD y coherencia con el resto de la web.
   ========================================================================== */

/* Sin @import de Google Fonts: se usa Hind, ya auto-alojada vía fuentes.css. */

.v-impacto {
  --i-tinta:        #0D1B2E;
  --i-tinta-2:      #13253F;
  --i-tinta-3:      #1B3358;
  --i-papel:        #F6F8FB;
  --i-blanco:       #FFFFFF;
  --i-cobalto:      #1750E0;
  --i-cobalto-osc:  #0E3AAB;
  --i-cobalto-cl:   #3D74FF;
  --i-verde:        #16A06C;
  --i-ambar:        #F5A524;
  --i-texto:        #21314A;
  --i-texto-suave:  #5A6B85;
  --i-borde:        rgba(13, 27, 46, .10);
  --i-radio:        16px;
  --i-sombra:       0 1px 2px rgba(13,27,46,.06), 0 12px 32px -12px rgba(13,27,46,.22);
  --i-sombra-lg:    0 2px 4px rgba(13,27,46,.08), 0 32px 72px -24px rgba(13,27,46,.38);
  --i-display:      var(--font-base);   /* Hind — auto-alojada (antes Bricolage Grotesque) */
  --i-texto-f:      var(--font-base);   /* Hind (antes Instrument Sans) */
  --i-mono:         var(--font-base);   /* Hind (antes JetBrains Mono) */

  font-family: var(--i-texto-f);
  color: var(--i-texto);
  background: var(--i-blanco);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .v-impacto { scroll-behavior: auto; }
}

/* ------------------------------------------------------------- Base ------ */
.v-impacto h1, .v-impacto h2, .v-impacto h3, .v-impacto h4, .v-impacto h5 {
  font-family: var(--i-display);
  color: var(--i-tinta);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.v-impacto .wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.i-tc { text-align: center; }

.i-sec { padding-block: clamp(64px, 9vw, 128px); }
/* ENC-NUE-24 · trama global de fondos claros */
.i-sec--soft { background-color: var(--i-papel); background-image: var(--trama); background-size: var(--trama-paso) var(--trama-paso); }

.i-sec-titulo {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  max-width: 21em;
  margin: 0 auto 18px;
}

/* Eyebrows en mono: el "lenguaje de software" de la página */
.i-eyebrow,
.i-eyebrow-light {
  font-family: var(--i-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--i-cobalto);
}
.i-eyebrow--center { text-align: center; }
.i-eyebrow-light { color: rgba(255,255,255,.75); }

/* Botones (refinan el .btn global) */
.v-impacto .i-btn {
  font-family: var(--i-texto-f);
  font-weight: 600;
  border-radius: 999px;
  padding: 14px 28px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.v-impacto .btn--primary.i-btn {
  background: var(--i-cobalto);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px -10px rgba(23, 80, 224, .65);
}
.v-impacto .btn--primary.i-btn:hover {
  background: var(--i-cobalto-cl);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(23, 80, 224, .70);
}
.v-impacto .i-btn--lg { padding: 18px 38px; font-size: 18px; }
.v-impacto .btn--dark.i-btn { background: var(--i-tinta); color: #fff; border: 0; }
.v-impacto .btn--dark.i-btn:hover { background: var(--i-tinta-3); transform: translateY(-2px); }
.v-impacto .btn--ghost.i-btn {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
}
.v-impacto .btn--ghost.i-btn:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.i-btn-link {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid var(--i-ambar);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.i-btn-link:hover { color: var(--i-ambar); }

/* Checks */
.i-ic { color: var(--i-verde); flex: 0 0 auto; display: inline-flex; }
.i-ic svg { width: 18px; height: 18px; }

/* Foco visible (teclado) */
.v-impacto a:focus-visible,
.v-impacto button:focus-visible {
  outline: 3px solid var(--i-cobalto-cl);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------- La "ventana" de aplicación --- */
/* Pieza central del diseño: toda captura del ERP vive dentro de un marco de
   ventana con su barra de título. La barra nombra el módulo, como si el
   visitante estuviera cambiando de ventana dentro del propio programa. */
.i-frame {
  margin: 0;
  border-radius: var(--i-radio);
  overflow: hidden;
  background: var(--i-tinta-2);
  border: 1px solid rgba(13,27,46,.16);
  box-shadow: var(--i-sombra-lg);
}
.i-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #16283F, #101F33);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.i-frame-bar i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.i-frame-bar i:nth-child(1) { background: #FF5F57; }
.i-frame-bar i:nth-child(2) { background: #FEBC2E; }
.i-frame-bar i:nth-child(3) { background: #28C840; }
.i-frame-bar b {
  font-family: var(--i-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.66);
  margin-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* ENC-NUE-52 · Sin `min-width: 0` el ellipsis NO llega a aplicarse: como
     ítem flex, su mínimo automático es el min-content, y el título más largo
     ("Cuantic ® Terminal de punto de venta (TPV) Dual (TÁCTIL + CDB)") medía
     368px con `nowrap`. Eso inflaba la columna del paseo a 398px dentro de un
     hueco de 350 y era el scroll horizontal que quedaba en la home a 390px. */
  min-width: 0;
}
.i-frame img, .i-frame video { display: block; width: 100%; height: auto; }
.i-frame img { cursor: zoom-in; }
.i-frame--lightbox img { cursor: default; }

.i-frame-pie {
  font-family: var(--i-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  text-align: right;
  margin: 10px 4px 0;
}

/* ---------------------------------------------------- Raíl del recorrido -- */
.i-rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 22px;
  padding: 6px 0;
}
@media (min-width: 1400px) { .i-rail { display: flex; } }

.i-rail-linea {
  position: absolute;
  top: 8px; bottom: 8px;
  right: 5px;
  width: 2px;
  background: rgba(13,27,46,.12);
  border-radius: 2px;
  overflow: hidden;
}
.i-rail-progreso {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--i-cobalto);
  transform: scaleY(0);
  transform-origin: top;
}
.i-rail-parada {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  text-decoration: none;
}
.i-rail-punto {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--i-blanco);
  border: 2px solid rgba(13,27,46,.30);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.i-rail-label {
  font-family: var(--i-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--i-texto-suave);
  background: rgba(255,255,255,.92);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--i-borde);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.i-rail-parada:hover .i-rail-label,
.i-rail-parada.is-activa .i-rail-label { opacity: 1; transform: none; }
.i-rail-parada.is-activa .i-rail-punto {
  background: var(--i-ambar);
  border-color: var(--i-ambar);
  transform: scale(1.25);
}

/* ------------------------------------------------------------- 1 · HERO --- */
.i-hero {
  position: relative;
  background: var(--i-tinta);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 130px) clamp(88px, 10vw, 150px);
}
.i-hero-fondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(23,80,224,.34), transparent 62%),
    radial-gradient(700px 460px at 8% 92%, rgba(23,80,224,.16), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 96px);
}
.i-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.i-hero h1 {
  color: #fff;
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  margin: 0 0 22px;
}
.i-hero h1 em {
  font-style: normal;
  color: var(--i-cobalto-cl);
  text-decoration: underline;
  text-decoration-color: var(--i-ambar);
  text-decoration-thickness: 4px;
  text-underline-offset: 7px;
}
.i-hero-sub { font-size: clamp(17px, 1.6vw, 20px); margin: 0 0 14px; color: rgba(255,255,255,.95); }
.i-hero-text { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.74); margin: 0 0 30px; max-width: 56ch; }
.i-hero-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 34px; }

.i-hero-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.i-hero-tags li {
  font-family: var(--i-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  padding: 5px 12px;
}

.i-hero-shot { position: relative; }
.i-frame--hero {
  transform: perspective(1400px) rotateY(-5deg) rotateX(1.5deg);
  transition: transform .5s ease;
}
.i-frame--hero:hover { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
@media (prefers-reduced-motion: reduce) {
  .i-frame--hero, .i-frame--hero:hover { transform: none; transition: none; }
}

.i-hero-scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  width: max-content;
  text-decoration: none;
  font-family: var(--i-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  transition: color .2s ease;
}
.i-hero-scroll:hover { color: #fff; }
.i-hero-flecha { display: inline-flex; animation: i-bote 1.8s ease-in-out infinite; }
.i-hero-flecha svg { width: 18px; height: 18px; }
@keyframes i-bote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .i-hero-flecha { animation: none; } }

/* ----------------------------------------------------------- 2 · VÍDEOS --- */
.i-videos { background: var(--i-papel); }
.i-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}

/* --------------------------------------------------------- 3 · CTA DEMO --- */
.i-cta-demo {
  background:
    radial-gradient(720px 380px at 84% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(115deg, var(--i-cobalto-osc), var(--i-cobalto) 55%, var(--i-cobalto-cl));
  color: #fff;
  text-align: center;
  padding-block: clamp(64px, 8vw, 110px);
}
.i-cta-demo h2 {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 32px;
}

/* -------------------------------------------------- 4 · FUNCIONALIDADES --- */
.i-func .i-sec-titulo { margin-bottom: clamp(40px, 5vw, 64px); }
.i-func-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.i-func-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--i-blanco);
  border: 1px solid var(--i-borde);
  border-radius: var(--i-radio);
  padding: 28px 26px 34px;
  box-shadow: var(--i-sombra);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.i-func-card:hover {
  transform: translateY(-6px);
  border-color: rgba(23,80,224,.35);
  box-shadow: var(--i-sombra-lg);
}
.i-func-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(22,160,108,.12);
  color: var(--i-verde);
}
.i-func-check svg { width: 20px; height: 20px; }
.i-func-body h5 { font-size: 19px; font-weight: 700; margin: 2px 0 6px; }
.i-func-body p { margin: 0; color: var(--i-texto-suave); }
.i-func-num {
  position: absolute;
  right: 14px; bottom: -14px;
  font-family: var(--i-mono);
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  color: rgba(23,80,224,.10);
  user-select: none;
}

/* --------------------------------------------------------------- 5 · IA --- */
.i-ia {
  position: relative;
  background: var(--i-tinta);
  color: #fff;
  overflow: hidden;
}
.i-ia-fondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(640px 360px at 50% -10%, rgba(245,165,36,.14), transparent 65%),
    radial-gradient(820px 480px at 50% 115%, rgba(23,80,224,.30), transparent 62%);
}
.i-ia .wrap { position: relative; }
.i-ia .i-sec-titulo { color: #fff; }
.i-ia-spark {
  font-size: 18px;
  letter-spacing: .55em;
  color: var(--i-ambar);
  margin: 0 0 clamp(36px, 4vw, 52px);
}
.i-ia-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 30px);
}
.i-ia-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--i-radio);
  padding: 28px 26px;
  backdrop-filter: blur(4px);
  transition: border-color .22s ease, background-color .22s ease, transform .22s ease;
}
.i-ia-card:hover {
  border-color: rgba(245,165,36,.55);
  background: rgba(255,255,255,.08);
  transform: translateY(-4px);
}
.i-ia-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(245,165,36,.55);
  color: var(--i-ambar);
  margin-bottom: 16px;
}
.i-ia-arrow svg { width: 16px; height: 16px; }
.i-ia-card p { margin: 0; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.88); }

/* --------------------------------------------- 6 · MÓDULOS (el paseo) ----- */
.i-modulos { background: var(--i-blanco); }
.i-modulos-intro { margin-bottom: clamp(40px, 5vw, 72px); }
.i-modulos-guia {
  font-family: var(--i-mono);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--i-texto-suave);
  margin: 6px 0 0;
}

.i-paseo {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}

/* Columna de texto: cada módulo con su lista COMPLETA */
.i-modulo {
  padding-block: clamp(36px, 5vh, 64px);
  border-top: 1px solid var(--i-borde);
  scroll-margin-top: 90px;
}
.i-modulo:first-child { border-top: 0; padding-top: 0; }

.i-modulo-head { margin-bottom: 20px; }
.i-modulo-num {
  display: inline-block;
  font-family: var(--i-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--i-cobalto);
  background: rgba(23,80,224,.08);
  border: 1px solid rgba(23,80,224,.18);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.i-modulo h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  margin: 0;
}

.i-lista-check {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.i-lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 16px;
  line-height: 1.55;
}
.i-lista-check .i-ic { margin-top: 3px; }

.i-modulo-btn { display: inline-block; }

/* Captura en móvil / tablet: dentro del propio módulo */
.i-modulo-shot-movil { margin: 4px 0 26px; }

/* Visor fijo de capturas (escritorio) */
.i-paseo-visor {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
.i-visor {
  position: relative;
  width: 100%;
  border-radius: var(--i-radio);
  overflow: hidden;
  background: var(--i-tinta-2);
  border: 1px solid rgba(13,27,46,.16);
  box-shadow: var(--i-sombra-lg);
}
.i-visor .i-frame-bar b { transition: opacity .25s ease; }
.i-visor-pantallas {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: calc(100vh - 170px);
  width: 100%;
}
.i-visor-pantallas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .5s ease, transform .9s ease;
  cursor: zoom-in;
  pointer-events: none;
}
.i-visor-pantallas img.is-activa {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .i-visor-pantallas img { transition: none; transform: none; }
}
.i-visor-contador {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-family: var(--i-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #fff;
  background: rgba(13,27,46,.72);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 6px 13px;
  backdrop-filter: blur(3px);
}

/* En pantallas estrechas: fuera visor, capturas dentro de cada módulo */
@media (max-width: 980px) {
  /* ENC-NUE-52 · `minmax(0,1fr)` y no `1fr`: con `1fr` la columna nunca baja
     del min-content de su contenido y cualquier texto sin puntos de corte la
     ensancha por encima del viewport. */
  .i-paseo { grid-template-columns: minmax(0, 1fr); }
  .i-paseo-visor { display: none; }
}
@media (min-width: 981px) {
  .i-modulo-shot-movil { display: none; }
  .i-modulo { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
}

/* ------------------------------------------------------- 7 · CONEXIONES --- */
.i-conexiones .i-sec-titulo { margin-bottom: clamp(36px, 4vw, 56px); }
.i-conexiones-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.i-conexiones-texto p { line-height: 1.75; margin: 0 0 16px; }
.i-socios {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.i-socios li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.i-socios .i-ic { margin-top: 3px; }
.i-conexiones-img img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(13,27,46,.18));
}

/* ------------------------------------------------------- 8 · CTA PROBAR --- */
.i-cta-probar {
  background:
    radial-gradient(800px 420px at 18% 110%, rgba(23,80,224,.35), transparent 60%),
    var(--i-tinta);
  color: #fff;
  padding-block: clamp(64px, 8vw, 110px);
}
.i-cta-probar h2 {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  max-width: 22em;
  margin: 0 auto 32px;
}

/* -------------------------------------------------------------- 9 · FAQ --- */
.i-faq .i-sec-titulo { margin-bottom: clamp(36px, 4vw, 56px); }
.i-faq-wrap { max-width: 880px; }
.i-faq-lista { display: grid; gap: 14px; }
.i-faq-item {
  background: var(--i-blanco);
  border: 1px solid var(--i-borde);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.i-faq-item.is-open {
  border-color: rgba(23,80,224,.35);
  box-shadow: var(--i-sombra);
}
.i-faq-pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--i-display);
  font-size: 17.5px;
  font-weight: 600;
  color: var(--i-tinta);
  padding: 20px 24px;
}
.i-faq-ic {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--i-cobalto);
  transition: transform .25s ease;
}
.i-faq-ic svg { width: 16px; height: 16px; }
.i-faq-item.is-open .i-faq-ic { transform: rotate(180deg); }
.i-faq-respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.i-faq-item.is-open .i-faq-respuesta { grid-template-rows: 1fr; }
.i-faq-respuesta p {
  overflow: hidden;
  margin: 0;
  padding: 0 24px;
  line-height: 1.7;
  color: var(--i-texto-suave);
}
.i-faq-item.is-open .i-faq-respuesta p { padding-bottom: 22px; }
@media (prefers-reduced-motion: reduce) {
  .i-faq-respuesta, .i-faq-ic { transition: none; }
}

/* ------------------------------------------------------ 10 · FORMULARIO --- */
.i-formulario { background-color: var(--i-papel); background-image: var(--trama); background-size: var(--trama-paso) var(--trama-paso); }
.i-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.i-form-intro h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 18px;
}
.i-form-intro p { line-height: 1.75; color: var(--i-texto-suave); margin: 0 0 12px; }

.i-form-contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--i-blanco);
  border: 1px solid var(--i-borde);
  border-radius: var(--i-radio);
  box-shadow: var(--i-sombra);
  padding: clamp(24px, 3vw, 36px);
}
.i-campo { display: grid; gap: 0; }
.i-campo--full { grid-column: 1 / -1; }
.i-campo label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.i-campo input,
.i-campo textarea {
  font: inherit;
  width: 100%;
  border: 1px solid rgba(13,27,46,.18);
  border-radius: 10px;
  padding: 13px 15px;
  background: var(--i-blanco);
  color: var(--i-texto);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.i-campo input:focus,
.i-campo textarea:focus {
  outline: none;
  border-color: var(--i-cobalto);
  box-shadow: 0 0 0 3px rgba(23,80,224,.16);
}
.i-campo textarea { resize: vertical; min-height: 120px; }
.i-campo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--i-texto-suave);
  cursor: pointer;
}
.i-campo-check input { margin-top: 3px; accent-color: var(--i-cobalto); }
.i-campo-check a { color: var(--i-cobalto); }

/* ------------------------------------------------------ 11 · BLOQUES CTA -- */
.i-bloques-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.i-bloque-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 300px;
  padding: 56px 32px;
  text-align: center;
  text-decoration: none;
  background:
    radial-gradient(620px 320px at 50% 120%, rgba(61,116,255,.35), transparent 65%),
    var(--i-cobalto-osc);
  transition: filter .2s ease;
}
.i-bloque-cta--alt {
  background:
    radial-gradient(620px 320px at 50% 120%, rgba(23,80,224,.45), transparent 65%),
    var(--i-tinta);
}
.i-bloque-cta:hover { filter: brightness(1.12); }
.i-bloque-cta h2 {
  color: #fff;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 700;
  margin: 0;
}

/* ----------------------------------------------------- 12 · 4 COLUMNAS ---- */
.i-ayuda-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
.i-ayuda-col h5 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.i-ayuda-col p { color: var(--i-texto-suave); line-height: 1.65; margin: 0 0 14px; }
.i-enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--i-cobalto);
  text-decoration: none;
}
.i-enlace-flecha svg { width: 15px; height: 15px; transition: transform .18s ease; }
.i-enlace-flecha:hover svg { transform: translateX(4px); }
.i-ayuda-descarga img {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--i-borde);
  box-shadow: var(--i-sombra);
  transition: transform .2s ease;
}
.i-ayuda-descarga:hover img { transform: translateY(-4px); }

/* -------------------------------------------------------------- Lightbox -- */
.i-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 15, 26, .86);
  backdrop-filter: blur(6px);
}
.i-lightbox[hidden] { display: none; }
.i-frame--lightbox {
  max-width: min(1500px, 100%);
  max-height: 100%;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.7);
}
.i-frame--lightbox img {
  max-height: calc(100vh - 160px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-inline: auto;
}
.i-lightbox-cerrar {
  position: absolute;
  top: 18px; right: 22px;
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.i-lightbox-cerrar:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }

/* ------------------------------------------- Aparición al hacer scroll ---- */
/* Solo si hay JS (clase i-js en <html>): sin JS todo es visible. */
.i-js .i-rev {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.i-js .i-rev.is-vis { opacity: 1; transform: none; }
.i-js .i-func-card.i-rev:nth-child(2),
.i-js .i-ia-card.i-rev:nth-child(2) { transition-delay: .08s; }
.i-js .i-func-card.i-rev:nth-child(3),
.i-js .i-ia-card.i-rev:nth-child(3) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .i-js .i-rev { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ Responsive -- */
@media (max-width: 980px) {
  .i-hero-grid,
  .i-videos-grid,
  .i-func-grid,
  .i-ia-grid,
  .i-conexiones-grid,
  .i-form-grid,
  .i-bloques-cta { grid-template-columns: 1fr; }
  .i-ayuda-cols { grid-template-columns: 1fr 1fr; }
  .i-frame--hero { transform: none; }
  .i-form-contacto { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .i-ayuda-cols { grid-template-columns: 1fr; }
  .i-hero-cta { gap: 18px; }
}