/* ============================================================
   Nova · estilos del sitio
   Los colores, tipografía y medidas viven en las variables de
   :root. Cambiar un valor aquí lo cambia en todo el sitio.
   ============================================================ */

:root {
  /* Color */
  --marino: #070B1E;          /* fondo principal: azul marino casi negro */
  --marino-panel: #0E1230;    /* paneles sobre el fondo */
  --indigo: #4A4FE5;          /* color principal de la marca */
  --indigo-medio: #7B7FF5;
  --indigo-claro: #9EA1F8;
  --indigo-suave: #DADBFF;
  --naranja: #FF8A3D;         /* acento */
  --naranja-claro: #FFB27A;
  --durazno: #FFD6B3;
  --naranja-oscuro: #E06A12;
  --blanco: #FFFFFF;
  --texto-suave: #A9A8C8;
  --texto-tenue: #8A89B0;
  --texto-apagado: #5E5D80;
  --borde: #2E2D5C;
  --linea: rgba(255, 255, 255, 0.14);

  /* Tipografía */
  --fuente: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Medidas */
  --ancho: 1440px;
  --margen: clamp(20px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--marino);
  color: var(--blanco);
  font-family: var(--fuente);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a:hover { color: var(--naranja); }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }

.contenedor { position: relative; max-width: var(--ancho); margin: 0 auto; padding-left: var(--margen); padding-right: var(--margen); }
.seccion { position: relative; overflow: hidden; background: var(--marino); }
.etiqueta { margin: 0; font-family: var(--fuente-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--indigo-claro); }
.h2 { margin: 0; font-size: clamp(36px, 4.4vw, 66px); line-height: 1.05; font-weight: 300; letter-spacing: -0.025em; }
.resaltado { color: var(--indigo-claro); }
.resaltado-naranja { color: var(--naranja); }
.texto { margin: 0; font-size: 17px; line-height: 1.5; color: var(--texto-suave); }

.boton { display: inline-block; text-decoration: none; padding: 14px 22px; border-radius: 3px; font-size: 15px; font-weight: 400; transition: opacity .2s; }
.boton:hover { opacity: .88; }
.boton--blanco { background: var(--blanco); color: var(--marino); }
.boton--blanco:hover { color: var(--marino); }
.boton--naranja { background: var(--naranja); color: var(--marino); }
.boton--naranja:hover { color: var(--marino); }
.boton--vidrio { background: rgba(255, 255, 255, 0.1); color: var(--blanco); }
.botones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Menú ---------- */
.menu { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.menu__barra { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; }
.marca { text-decoration: none; font-weight: 500; font-size: 26px; letter-spacing: -0.02em; color: var(--blanco); }
.menu__enlaces { display: flex; flex-wrap: wrap; gap: 28px; font-size: 14px; font-weight: 400; }
.menu__enlaces a { text-decoration: none; color: var(--texto-suave); }
.menu__enlaces a.menu__cta { color: var(--naranja); }

/* ---------- Portada ---------- */
.portada { min-height: 880px; }
.nova-astro { position: absolute; border-radius: 50%; pointer-events: none; }
.portada .nova-astro { left: 50%; top: 110px; width: 740px; height: 740px; margin-left: -60px; opacity: .85;
  background-image: radial-gradient(circle at 38% 36%, #FFC89A 0%, var(--naranja) 14%, #CF5F55 30%, var(--indigo) 52%, #1A1966 72%, rgba(7,11,30,0) 100%); }
.reticula-piso { position: absolute; left: -20%; right: -20%; pointer-events: none; transform-origin: center top;
  background-image: linear-gradient(rgba(123,127,245,.38) 1px, transparent 1px), linear-gradient(90deg, rgba(123,127,245,.38) 1px, transparent 1px); }
.portada .reticula-piso { bottom: -140px; height: 560px; background-size: 80px 80px; transform: perspective(700px) rotateX(64deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%); mask-image: linear-gradient(to bottom, transparent 0%, #000 35%); }
.panel-flotante { position: absolute; right: 7%; top: 300px; width: min(500px, 42vw); transform: perspective(1200px) rotateY(-16deg) rotateX(6deg);
  background: rgba(10,12,36,.88); border: 1px solid #3A3A78; border-radius: 10px; padding: 20px 22px;
  box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 80px rgba(74,79,229,.35); }
.panel__cabecera { display: flex; justify-content: space-between; font-family: var(--fuente-mono); font-size: 11px; letter-spacing: .1em; color: var(--texto-tenue); padding-bottom: 12px; border-bottom: 1px solid #23224A; }
.panel__cabecera span:last-child { color: var(--indigo-claro); }
.panel__fila { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid #1C1B3E; font-size: 13px; font-weight: 400; }
.panel__fila:last-child { border-bottom: none; }
.panel__monto { font-family: var(--fuente-mono); color: #C9C8E3; text-align: right; }
.panel__estado { color: var(--indigo-claro); }
.panel__estado--revision { color: var(--naranja); }
.portada__contenido { display: flex; flex-direction: column; gap: 20px; padding-top: 220px; }
.portada__titulo { margin: 0; font-size: clamp(52px, 7vw, 104px); line-height: 1; font-weight: 300; letter-spacing: -0.035em; }
.portada__texto { margin: 0; max-width: 440px; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: #D9D8EE; }
.portada__contenido .botones { margin-top: 18px; }
.flujo { margin-top: 220px; padding-bottom: 56px; }
.flujo__lista { border-top: 1px solid var(--linea); padding-top: 28px; display: flex; flex-wrap: wrap; gap: 28px 48px; font-family: var(--fuente-mono); font-size: 13px; letter-spacing: .32em; color: #C9C8E3; }
.flujo__flecha { color: var(--indigo-claro); }

/* ---------- Problema (lista interactiva) ---------- */
.problema .nova-astro { right: -14%; top: 50%; width: 800px; height: 800px; margin-top: -400px; opacity: .95; transition: background-image .5s; }
.problema__contenido { display: flex; flex-direction: column; gap: 28px; padding-top: 200px; padding-bottom: 200px; }
.problema .h2 { max-width: 620px; font-size: clamp(40px, 4.6vw, 68px); }
.problema__lista { max-width: 640px; margin-top: 24px; border-top: 1px solid var(--linea); }
.problema__punto { width: 100%; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 20px 0; background: transparent; border: none; border-bottom: 1px solid var(--linea); text-align: left; cursor: pointer; font-family: var(--fuente); color: var(--texto-apagado); transition: color .25s; }
.problema__nombre { font-size: 13px; font-weight: 400; }
.problema__texto { font-size: 17px; font-weight: 300; line-height: 1.45; }
.problema__punto[aria-pressed="true"] { color: var(--blanco); }
.problema__punto[aria-pressed="true"] .problema__nombre { color: var(--naranja); }
.problema__cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-top: 20px; }
.problema__numero { font-size: clamp(64px, 8vw, 120px); line-height: 1; font-weight: 300; letter-spacing: -0.04em; transition: color .3s; }
.problema__detalle { max-width: 280px; font-size: 15px; line-height: 1.4; color: var(--texto-suave); }

/* ---------- Integraciones ---------- */
.reticula-fondo { position: absolute; inset: 0; pointer-events: none; background-size: 56px 56px;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }
.integraciones__contenido { display: flex; flex-direction: column; gap: 64px; padding-top: 180px; padding-bottom: 180px; }
.integraciones__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.integraciones__titulo { max-width: 640px; display: flex; flex-direction: column; gap: 20px; }
.integraciones__cabecera .texto { max-width: 380px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tarjeta { background: rgba(16,16,42,.9); border: 1px solid var(--borde); border-top: 2px solid var(--indigo); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 230px; }
.tarjeta__numero { font-family: var(--fuente-mono); font-size: 12px; color: var(--indigo-claro); }
.tarjeta h3 { margin: 0; font-size: 28px; font-weight: 300; }
.tarjeta p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
.tarjeta--destacada { background: var(--indigo); border-color: var(--indigo); box-shadow: 0 0 60px rgba(74,79,229,.4); }
.tarjeta--destacada .tarjeta__numero { color: var(--indigo-suave); }
.tarjeta--destacada p { color: #E8E8FF; }
.logos { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; opacity: .8; }
.logos img { height: 28px; width: auto; filter: grayscale(1) brightness(2); }

/* ---------- Franja con imagen ---------- */
.franja { height: 620px; }
.franja__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.franja__velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,11,30,.95) 0%, rgba(7,11,30,.2) 55%, rgba(7,11,30,.6) 100%); }
.franja .contenedor { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 64px; }
.franja .h2 { max-width: 760px; }

/* ---------- Modelo ---------- */
.modelo__contenido { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 80px; align-items: end; padding-top: 160px; padding-bottom: 160px; }
.cifras-columna { display: flex; flex-direction: column; gap: 52px; }
.cifra { display: flex; flex-direction: column; gap: 6px; }
.cifra__numero { font-size: clamp(56px, 6vw, 88px); line-height: 1; font-weight: 300; letter-spacing: -0.03em; }
.cifra__texto { font-size: 15px; color: var(--texto-suave); }
.tono-indigo { color: var(--indigo-claro); }
.tono-naranja { color: var(--naranja); }
.barras { height: 460px; display: flex; align-items: flex-end; justify-content: center; gap: clamp(28px, 5vw, 64px); border-bottom: 1px solid rgba(255,255,255,.2); }
.barra { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 12px; }
.barra span { font-size: 12px; color: var(--texto-tenue); white-space: nowrap; }
.barra div { width: 64px; }
.barra--hoy div { background: #1C1B3E; border: 1px solid var(--borde); }
.barra--ahorro span { color: var(--naranja); }
.barra--ahorro div { background-image: linear-gradient(to top, var(--indigo), var(--naranja)); }
.barra--nova span { color: var(--indigo-claro); }
.barra--nova div { background: var(--indigo); box-shadow: 0 0 50px rgba(74,79,229,.6); }

/* ---------- Tracción ---------- */
.traccion { background: var(--indigo); }
.traccion__contenido { display: flex; flex-direction: column; gap: 56px; padding-top: 120px; padding-bottom: 120px; }
.traccion .etiqueta { color: var(--indigo-suave); }
.traccion .h2 { max-width: 760px; font-size: clamp(34px, 3.8vw, 56px); }
.traccion__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; border-top: 1px solid rgba(255,255,255,.3); padding-top: 40px; }
.traccion .cifra__numero { font-size: clamp(48px, 5vw, 76px); }
.traccion .cifra__texto { color: #E3E4FF; }
.traccion .cifra--destacada .cifra__numero { color: var(--durazno); }

/* ---------- Control ---------- */
.control { min-height: 840px; }
.control .reticula-piso { left: -10%; right: -10%; bottom: -80px; height: 520px; background-size: 72px 72px; transform: perspective(800px) rotateX(62deg);
  background-image: linear-gradient(rgba(123,127,245,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(123,127,245,.22) 1px, transparent 1px); }
.control__panel { position: absolute; left: 50%; bottom: 150px; width: min(760px, 86vw); transform: translateX(-50%) perspective(1000px) rotateX(48deg);
  background: #EEEDF8; border-radius: 8px; padding: 28px 32px; color: #100F24;
  box-shadow: 0 60px 90px rgba(0,0,0,.7), 0 0 80px rgba(255,138,61,.25); }
.control__panel-cabecera { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid #CFCDE0; }
.control__panel-cabecera span:last-child { color: var(--naranja-oscuro); }
.control__panel-fila { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #CFCDE0; font-size: 14px; font-weight: 400; }
.control__panel-fila:last-child { border-bottom: none; }
.control__panel-fila span:last-child { font-family: var(--fuente-mono); }
.control__contenido { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; padding-top: 170px; }
.control .h2 { max-width: 820px; font-size: clamp(40px, 4.8vw, 72px); }
.reglas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
.regla { padding: 10px 16px; border: 1px solid #3A3A78; border-radius: 999px; font-size: 14px; font-weight: 400; color: #D9D8EE; }
.regla--destacada { border-color: var(--naranja); color: var(--naranja-claro); }

/* ---------- Comparación ---------- */
.comparacion__contenido { display: flex; flex-direction: column; gap: 56px; padding-top: 160px; padding-bottom: 160px; }
.comparacion__titulo { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.comparacion__tabla { border-top: 1px solid var(--linea); }
.comparacion__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--linea); color: #6E6D96; }
.comparacion__fila strong { font-size: 17px; font-weight: 400; }
.comparacion__fila span { font-size: 16px; }
.comparacion__fila--nova { padding: 26px 20px; background: rgba(74,79,229,.16); border-left: 2px solid var(--indigo); border-bottom: none; color: var(--blanco); }
.comparacion__fila--nova strong { font-size: 20px; font-weight: 500; }
.comparacion__fila--nova span { font-size: 17px; }

/* ---------- Equipo ---------- */
.equipo { border-top: 1px solid rgba(255,255,255,.08); }
.equipo__contenido { display: flex; flex-direction: column; gap: 64px; padding-top: 160px; padding-bottom: 160px; }
.equipo__titulo { display: flex; flex-direction: column; gap: 16px; }
.equipo .h2 { font-size: clamp(36px, 4vw, 60px); line-height: 1.08; }
.equipo .h2 span { color: var(--texto-tenue); }
.personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.persona { display: flex; flex-direction: column; gap: 18px; }
.persona__foto { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); background: #141826; }
.persona__nombre { display: flex; flex-direction: column; gap: 6px; }
.persona__nombre strong { font-size: 20px; font-weight: 400; }
.persona__nombre span { font-family: var(--fuente-mono); font-size: 12px; letter-spacing: .14em; color: var(--indigo-claro); }
.persona p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texto-suave); }
.persona:not(:has(.persona__foto)) { border-top: 1px solid var(--linea); padding-top: 24px; }

/* ---------- Cierre ---------- */
.cierre .nova-astro { left: 50%; bottom: -560px; width: 1100px; height: 1100px; margin-left: -550px;
  background-image: radial-gradient(circle at 50% 30%, #FFC89A 0%, var(--naranja) 12%, #CF5F55 26%, var(--indigo) 46%, #1A1966 68%, rgba(7,11,30,0) 100%); }
.cierre__contenido { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; padding-top: 200px; padding-bottom: 300px; }
.cierre__titulo { margin: 0; font-size: clamp(44px, 6vw, 88px); line-height: 1; font-weight: 300; letter-spacing: -0.03em; }
.cierre__contenido .texto { max-width: 620px; font-size: 18px; color: #D9D8EE; }
.cierre__contenido .botones { justify-content: center; margin-top: 12px; }
.cierre__correo { background: rgba(7,11,30,.5); }

/* ---------- Pie ---------- */
.pie { background: var(--marino); border-top: 1px solid rgba(255,255,255,.1); }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding-top: 32px; padding-bottom: 32px; font-size: 12px; font-weight: 400; color: var(--texto-tenue); }

/* ---------- Celular y tableta ---------- */
@media (max-width: 900px) {
  .portada { min-height: 0; }
  .menu__enlaces a:not(.menu__cta) { display: none; }
  .portada .nova-astro { width: 560px; height: 560px; left: auto; right: -300px; top: 430px; margin-left: 0; opacity: .7; }
  .flujo__lista { gap: 14px 18px; letter-spacing: .16em; font-size: 12px; }
  .problema .nova-astro { width: 460px; height: 460px; right: -260px; top: auto; bottom: -140px; margin-top: 0; opacity: .55; }
  .panel-flotante { position: relative; right: auto; top: auto; width: auto; margin: 56px var(--margen) 0; transform: none; }
  .portada__contenido { padding-top: 150px; }
  .flujo { margin-top: 72px; }
  .problema__contenido, .integraciones__contenido, .modelo__contenido, .comparacion__contenido, .equipo__contenido { padding-top: 110px; padding-bottom: 110px; }
  .problema__punto { grid-template-columns: 1fr; gap: 6px; }
  .franja { height: 460px; }
  .barras { height: 340px; }
  .barra div { width: 44px; }
  .control { min-height: 0; padding-bottom: 60px; }
  .control__contenido { padding-top: 110px; }
  .control__panel { position: relative; left: auto; bottom: auto; width: auto; margin: 56px var(--margen) 0; transform: none; }
  .control .reticula-piso { height: 360px; }
  .comparacion__fila { grid-template-columns: 1fr; gap: 6px; }
  .cierre__contenido { padding-top: 120px; padding-bottom: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}