/* Nova planificación y ahorro · hoja única del sitio (14-sep-2026) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Paleta de Nova (banner de marca, 14-sep-2026): azul profundo, azul
     nova, azul brillante y tintes claros. Los nombres de las variables se
     conservan para no tocar cada regla: navy = azules de fondo, gold = acento. */
  --navy: #082B6E; --navy2: #0D3F9C; --navy3: #1652C0;
  --gold: #8FC1FF; --gold2: #BFDCFF; --gold3: #0D3F9C;
  --glow: rgba(143,193,255,.18); --glow-strong: rgba(143,193,255,.38);
  --white: #ffffff; --off: #E9F0FA; --muted: #B7C8E6; --line: rgba(191,220,255,.26);
  --light-bg: #EEF3FA; --light-text: #0B1F44; --light-muted: #4A5E85;
  --serif: 'Poppins', sans-serif; --sans: 'Poppins', sans-serif;
}
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body { background: var(--navy); color: var(--off); font-family: var(--sans); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
.wrap { width: min(1140px, 92vw); margin: 0 auto; }
.eyebrow { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 1rem; }
.h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em; color: var(--white); }
.h2 em { font-style: normal; color: var(--gold2); }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 62ch; margin-top: 1.1rem; }
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; cursor: pointer; font-family: var(--sans); }
.btn svg { width: 18px; height: 18px; }
.btn-gold { background: #1F62D6; color: var(--white); box-shadow: 0 10px 30px rgba(31,98,214,.35); }
.btn-gold:hover { transform: translateY(-2px); background: #2A72EA; }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.22); color: var(--white); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold2); }
section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
.reveal { opacity: 0; transform: translateY(26px); }

/* preloader: la nova que se enciende */
/* ── PRELOADER: la N se dibuja trazo a trazo, se llena de luz, aparece la
   palabra con el tracking cerrándose, una línea de carga y al final la
   cortina sube en diagonal para descubrir el héroe. ── */
#preloader { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(900px 500px at 50% 45%, #0D3F9C 0%, #071F52 65%); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.2rem; clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.77,0,.18,1); }
#preloader.done { clip-path: inset(0 0 100% 0); pointer-events: none; }
#preloader.skip { display: none; }
.pl-logo { width: min(560px, 82vw); overflow: visible; }
.pl-logo .pl-stroke path { fill: none; stroke: #BFDCFF; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.1s cubic-bezier(.6,0,.2,1) forwards; }
.pl-logo .pl-stroke path:nth-child(2) { animation-delay: .12s; } .pl-logo .pl-stroke path:nth-child(3) { animation-delay: .24s; }
.pl-logo .pl-fill path { fill: url(#plGrad); opacity: 0; animation: fillin .7s ease .9s forwards; filter: drop-shadow(0 0 22px rgba(143,193,255,.55)); }
.pl-logo .pl-word { fill: #fff; font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 196px; letter-spacing: 40px; opacity: 0; animation: word 1s cubic-bezier(.2,.8,.2,1) 1s forwards; }
.pl-logo .pl-tag { fill: #BFDCFF; font-family: Poppins, Arial, sans-serif; font-weight: 600; font-size: 30px; opacity: 0; animation: fillin .6s ease 1.5s forwards; }
.pl-logo .pl-rule { stroke: #BFDCFF; stroke-width: 5; transform-origin: center; transform: scaleX(0); animation: rule .6s ease 1.5s forwards; }
.pl-logo .pl-az { opacity: 0; transform-origin: 32px 32px; animation: azin .9s cubic-bezier(.2,.8,.2,1) .2s forwards; }
.pl-logo .pl-az circle { stroke-dasharray: 180; stroke-dashoffset: 180; animation: draw 1s ease .3s forwards; }
.pl-logo .pl-sep { opacity: 0; transform-origin: -60px 115px; transform: scaleY(0); animation: sepin .5s ease 1s forwards; }
@keyframes azin { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes sepin { to { opacity: 1; transform: scaleY(1); } }
.pl-bar { width: min(220px, 40vw); height: 2px; background: rgba(191,220,255,.18); border-radius: 2px; overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6FA8FF, #fff); animation: load 1.9s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes word { from { opacity: 0; letter-spacing: 40px; transform: translateX(20px); } to { opacity: 1; letter-spacing: -6px; transform: translateX(0); } }
@keyframes rule { to { transform: scaleX(1); } }
@keyframes load { to { width: 100%; } }
.nova { width: 110px; height: 110px; filter: drop-shadow(0 0 30px var(--glow-strong)); }
.nova path { fill: var(--gold); transform-origin: 50% 50%; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(.85); opacity: .7 } 50% { transform: scale(1); opacity: 1 } }
#preloader small { color: var(--muted); letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; }

/* nav */
/* Menú FLAT (Enrique, 14-sep-2026): fondo sólido siempre, sin desenfoque
   ni brillo; la luz del héroe empieza debajo de él. */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1rem 0; background: #071F52; border-bottom: 1px solid rgba(191,220,255,.14); }
header.solid { background: #071F52; }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--white); }
.brand svg { width: 30px; height: 30px; }
.brand span { color: var(--gold2); font-weight: 400; }
/* El logo de Nova, en blanco sólido (Enrique, 14-sep-2026) */
.logo { display: block; color: var(--white); fill: currentColor; height: 44px; width: auto; }
.logo svg { height: 100%; width: auto; fill: currentColor; }
.lockup { display: inline-flex; align-items: center; gap: .9rem; color: var(--white); }
.lockup .allianz { height: 40px; width: 40px; flex: none; }
.lockup .allianz svg { width: 100%; height: 100%; fill: currentColor; }
.lockup .sep { width: 1px; height: 40px; background: rgba(255,255,255,.45); flex: none; }
footer .lockup .allianz, footer .lockup .sep { height: 34px; } footer .lockup .allianz { width: 34px; }
@media (max-width: 640px) { .lockup { gap: .6rem; } .lockup .allianz, .lockup .sep { height: 30px; } .lockup .allianz { width: 30px; } }
.logo-hero { height: 84px; margin-bottom: 2rem; }
.logo-foot { height: 40px; }
@media (max-width: 640px) { .logo { height: 36px; } .logo-hero { height: 60px; } }
nav ul { display: flex; align-items: center; gap: 1.6rem; list-style: none; font-size: .88rem; color: var(--off); }
/* Redes: iconos de línea, mínimos; los enlaces los pone el cliente */
.social { display: inline-flex; align-items: center; gap: .6rem; }
.social a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--off); transition: border-color .2s, color .2s, transform .2s; }
.social a:hover { border-color: var(--gold); color: var(--white); transform: translateY(-1px); }
.social svg { width: 16px; height: 16px; fill: currentColor; }
footer .social { margin-top: .4rem; }
nav a:hover { color: var(--gold2); }
.nav-cta { padding: .55rem 1.1rem; }
/* Submenú de productos (menú flat: panel sólido, sin desenfoque) */
nav .has-sub { position: relative; }
nav .sub-toggle { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; color: var(--off); font: inherit; cursor: pointer; padding: 0; }
nav .sub-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
nav .sub-toggle:hover, nav .has-sub.is-open .sub-toggle { color: var(--gold2); }
nav .has-sub.is-open .sub-toggle svg { transform: rotate(180deg); }
nav .sub { position: absolute; left: 50%; top: calc(100% + 1.1rem); transform: translateX(-50%) translateY(6px); min-width: 22rem; background: #071F52; border: 1px solid rgba(191,220,255,.16); border-radius: 16px; padding: .6rem; display: grid; gap: .1rem; list-style: none; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; box-shadow: 0 24px 60px rgba(0,0,0,.35); z-index: 120; }
nav .sub::before { content: ''; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.2rem; }
nav .has-sub:hover .sub, nav .has-sub.is-open .sub, nav .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
nav .sub-group { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; padding: .6rem .8rem .3rem; }
nav .sub a { display: grid; gap: .1rem; padding: .55rem .8rem; border-radius: 10px; color: var(--white); }
nav .sub a b { font-weight: 600; font-size: .9rem; }
nav .sub a span { font-size: .78rem; color: var(--muted); }
nav .sub a:hover { background: rgba(191,220,255,.08); color: var(--white); }
/* ── MÓVIL: hamburguesa y menú a pantalla completa (15-sep-2026) ── */
.nav-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; }
.nav-burger span { display: block; height: 2px; width: 24px; background: var(--white); border-radius: 2px; transition: transform .25s, opacity .25s; }
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
  .nav-burger { display: flex; }
  #site-nav { position: fixed; inset: 0; top: 68px; background: #071F52; padding: 1.2rem 6vw 2rem; overflow-y: auto; display: none; z-index: 99; }
  body.nav-open #site-nav { display: block; }
  body.nav-open { overflow: hidden; }
  #site-nav ul { display: grid; gap: .2rem; align-items: stretch; font-size: 1.05rem; }
  #site-nav ul > li > a { display: block; padding: .9rem 0; border-bottom: 1px solid rgba(191,220,255,.14); }
  #site-nav .sub-toggle { display: none; }
  #site-nav .sub { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0; border-bottom: 1px solid rgba(191,220,255,.14); }
  #site-nav .sub::before { display: none; }
  #site-nav .sub a { display: grid; gap: .15rem; padding: .7rem 0; }
  #site-nav .sub a b { font-size: 1.05rem; }
  #site-nav .sub a span { font-size: .9rem; }
  #site-nav .sub-group { padding: .9rem 0 .2rem; }
  #site-nav .social { padding: 1rem 0; }
  #site-nav .nav-cta { display: inline-flex; margin-top: .6rem; padding: .8rem 1.2rem; }
  .hero-cta .btn, .cta-band .btn { border-radius: 16px; white-space: normal; text-align: left; }
}

/* hero */
#hero { min-height: 100vh; display: flex; align-items: center; padding-top: 6rem; padding-bottom: 11rem; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #071F52 0%, var(--navy) 40%, #0B3A8F 100%); }
/* ── LUZ DEL HÉROE: dos auroras que derivan despacio, un haz diagonal que
   barre cada medio minuto, una retícula fina que se desvanece hacia el
   centro y un grano casi imperceptible. Todo detrás del contenido. ── */
.hero-light { position: absolute; inset: 5.1rem 0 0 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-light .aurora { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9; mix-blend-mode: screen; will-change: transform; }
.hero-light .a1 { width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; right: -18vw; top: -28vw; background: radial-gradient(circle, rgba(111,168,255,.55) 0%, rgba(31,98,214,.28) 35%, transparent 68%); animation: drift1 22s ease-in-out infinite; }
.hero-light .a2 { width: 46vw; height: 46vw; max-width: 700px; max-height: 700px; left: -16vw; bottom: -22vw; background: radial-gradient(circle, rgba(31,98,214,.5) 0%, rgba(13,63,156,.3) 40%, transparent 70%); animation: drift2 26s ease-in-out infinite; }
.hero-light .a3 { width: 30vw; height: 30vw; max-width: 460px; max-height: 460px; left: 42%; top: 8%; background: radial-gradient(circle, rgba(191,220,255,.28) 0%, transparent 65%); animation: drift3 18s ease-in-out infinite; }
.hero-light .beam { position: absolute; top: -20%; left: -30%; width: 60%; height: 160%; background: linear-gradient(100deg, transparent 40%, rgba(191,220,255,.10) 50%, transparent 60%); transform: rotate(8deg); animation: beam 30s linear infinite; mix-blend-mode: screen; }
.hero-light .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(191,220,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(191,220,255,.07) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 20%, #000 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 20%, #000 100%); opacity: .8; }
.hero-light .grain { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
#hero > .wrap, .hero-stats { position: relative; z-index: 1; }
.hero-stats { position: absolute; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw, 5vw) scale(1.08); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vw, -6vw) scale(1.1); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-4vw, 3vw); } }
@keyframes beam { 0% { transform: translateX(-30%) rotate(8deg); } 100% { transform: translateX(260%) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .hero-light .aurora, .hero-light .beam, .hero-art .mark { animation: none !important; } }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-title { font-family: var(--serif); font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.06; font-weight: 700; letter-spacing: -.025em; color: var(--white); }
.hero-title em { font-style: normal; color: var(--gold2); }
.hero-sub { color: var(--muted); font-size: 1.1rem; max-width: 56ch; margin: 1.4rem 0 2rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.hero-cta .btn { padding: .9rem 1.3rem; white-space: nowrap; }
.cta { display: flex; flex-direction: column; gap: .5rem; }
.cta-k { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; padding-left: .2rem; }
.hero-art { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; }
.hero-art .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); }
.hero-art .ring.r2 { inset: 14%; } .hero-art .ring.r3 { inset: 28%; }
/* LA N DE NOVA: primero se dibuja el trazo, luego se llena en oro con brillo
   que la recorre; flota despacio y se inclina siguiendo al mouse. */
.hero-art .mark { position: absolute; left: 22%; top: 24%; width: 56%; height: 56%; overflow: visible; animation: floaty 6s ease-in-out infinite; transform-style: preserve-3d; will-change: transform; }
.hero-art .mark-stroke path { fill: none; stroke: var(--gold2); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.6s cubic-bezier(.6,0,.2,1) .35s forwards; }
.hero-art .mark-fill path { fill: url(#goldGrad); opacity: 0; animation: fillin 1s ease .55s forwards; }
.hero-art .mark-sheen path { fill: url(#sheen); opacity: 0; animation: fillin .6s ease 1.5s forwards; mix-blend-mode: screen; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { opacity: 1; } }
@keyframes floaty { 0%,100% { transform: translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); } 50% { transform: translateY(-10px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); } }
.hero-art { perspective: 900px; }
.hero-art .orbit { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 18px var(--gold); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 18px; background: rgba(13,63,156,.55); backdrop-filter: blur(6px); overflow: hidden; }
.hero-stats { position: absolute; left: 0; right: 0; bottom: 2.4rem; z-index: 1; }
@media (max-width: 860px) { .hero-stats { position: static; margin-top: 2.5rem; } }
.stat { padding: 1.6rem 1.4rem; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.8rem; color: var(--gold2); line-height: 1; }
.stat span { color: var(--muted); font-size: .85rem; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* dos caminos */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.6rem; }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }
/* Dos caminos: cada tarjeta lleva su ilustración arriba (siluetas), con
   velo azul hacia el texto para que el título respire sobre la imagen. */
.path { border: 1px solid var(--line); border-radius: 22px; padding: 0; background: linear-gradient(160deg, var(--navy2), var(--navy)); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.path-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.path-art img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .8s ease; }
.path:hover .path-art img { transform: scale(1.07); }
.path-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--navy2) 100%); }
.path-body { padding: 1.4rem 2.2rem 2.2rem; position: relative; z-index: 1; margin-top: -2.5rem; }
.path h3 { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--white); margin-bottom: .6rem; }
.path p { color: var(--muted); margin-bottom: 1.4rem; }
.path .btn { position: relative; z-index: 1; }

/* motores */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
@media (max-width: 960px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid4 { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--line); border-radius: 18px; padding: 1.8rem; background: var(--navy2); transition: transform .25s, border-color .25s; }
.card:hover { transform: translateY(-4px); border-color: rgba(232,179,74,.4); }
.card .ic { width: 64px; height: 64px; border-radius: 16px; background: var(--glow); display: grid; place-items: center; margin-bottom: 1.1rem; }
.card .ic svg { width: 32px; height: 32px; stroke: var(--gold2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h4 { font-size: 1.05rem; color: var(--white); margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .92rem; }
.quote { margin-top: 2.6rem; border-left: 3px solid var(--gold); padding: .4rem 0 .4rem 1.4rem; font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.45; color: var(--white); max-width: 56ch; }

/* proyector */
#proyector { background: var(--light-bg); color: var(--light-text); }
#proyector .h2 { color: var(--light-text); } #proyector .h2 em { color: var(--gold3); }
#proyector .lead { color: var(--light-muted); }
.proj { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.4rem; margin-top: 2.6rem; align-items: start; }
@media (max-width: 900px) { .proj { grid-template-columns: 1fr; } }
.proj-form { background: var(--white); border-radius: 22px; padding: 2rem; box-shadow: 0 20px 50px rgba(26,32,48,.08); }
.field { margin-bottom: 1.3rem; }
.field label { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; color: var(--light-text); margin-bottom: .5rem; }
.field output { color: #1F62D6; font-weight: 700; }
input[type=range] { width: 100%; accent-color: #1F62D6; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.seg button { padding: .7rem .5rem; border-radius: 12px; border: 1px solid #D5E1F3; background: #F5F8FD; font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--light-muted); cursor: pointer; }
.seg button.on { background: var(--navy2); color: var(--white); border-color: var(--navy2); }
.proj-out { display: grid; gap: 1rem; }
.kpi { background: var(--white); border-radius: 18px; padding: 1.4rem 1.6rem; box-shadow: 0 10px 30px rgba(26,32,48,.06); }
.kpi small { display: block; color: var(--light-muted); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.kpi b { display: block; font-family: var(--serif); font-weight: 700; font-size: 2rem; letter-spacing: -.02em; color: var(--navy); line-height: 1.1; }
.kpi.gold b { color: #1F62D6; }
.kpi p { color: var(--light-muted); font-size: .88rem; margin-top: .3rem; }
.bars { background: var(--white); border-radius: 18px; padding: 1.4rem 1.6rem; box-shadow: 0 10px 30px rgba(26,32,48,.06); }
.bar { margin-top: .8rem; }
.bar span { display: flex; justify-content: space-between; font-size: .82rem; color: var(--light-muted); margin-bottom: .3rem; }
.bar i { display: block; height: 12px; border-radius: 999px; background: #D9E4F5; overflow: hidden; }
.bar i b { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #1F62D6, #6FA8FF); transition: width .6s ease; }
.bar.navy i b { background: linear-gradient(90deg, #4A5E85, #0B1F44); }
.note { font-size: .78rem; color: var(--light-muted); margin-top: 1rem; }

/* fiscal */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } }
.art { border: 1px solid var(--line); border-radius: 18px; padding: 1.8rem; background: var(--navy2); }
.art b { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; color: var(--gold2); display: block; }
.art h4 { color: var(--white); margin: .4rem 0 .6rem; }
.art p { color: var(--muted); font-size: .92rem; }
.art small { display: block; color: var(--muted); font-size: .78rem; margin-top: .8rem; opacity: .8; }

/* flexibilidad */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.list { list-style: none; margin-top: 1.6rem; display: grid; gap: .9rem; }
.list li { display: flex; gap: .9rem; align-items: flex-start; color: var(--off); }
.list li svg { width: 20px; height: 20px; flex: none; stroke: var(--gold2); fill: none; stroke-width: 2; margin-top: .15rem; }
.list li span { color: var(--muted); font-size: .95rem; }
.list li strong { color: var(--white); font-weight: 600; }
.timeline { border: 1px solid var(--line); border-radius: 22px; padding: 2rem; background: var(--navy2); }
.tl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tl div { border-radius: 14px; padding: 1.2rem; background: var(--navy); border: 1px solid var(--line); }
.tl b { display: block; color: var(--gold2); font-family: var(--serif); font-weight: 700; font-size: 1.2rem; }
.tl p { color: var(--muted); font-size: .85rem; margin-top: .3rem; }

/* para quién */
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.6rem; }
@media (max-width: 860px) { .yesno { grid-template-columns: 1fr; } }
.yn { border-radius: 22px; padding: 0; border: 1px solid var(--line); background: var(--navy2); overflow: hidden; display: flex; flex-direction: column; }
.yn-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.yn-art img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .8s ease; }
.yn:hover .yn-art img { transform: scale(1.07); }
.yn-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--navy2) 100%); }
.yn.no .yn-art img { filter: saturate(.6) brightness(.85); }
.yn-body { padding: 2rem; position: relative; z-index: 1; }
.yn-art + .yn-body { padding-top: 1.2rem; margin-top: -2.2rem; }
.yn h3 { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; color: var(--white); margin-bottom: 1rem; }
.yn.no h3 { color: var(--muted); }
.yn ul { list-style: none; display: grid; gap: .6rem; color: var(--muted); font-size: .95rem; }
.yn li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: .7rem; vertical-align: middle; }
.yn.no li::before { background: var(--muted); }

/* proceso */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.6rem; counter-reset: s; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 1.6rem 1.2rem 1.2rem; border-top: 1px solid var(--line); }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--serif); font-weight: 700; color: var(--gold2); font-size: 1.2rem; display: block; margin-bottom: .6rem; }
.step h4 { color: var(--white); font-size: 1rem; margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: .88rem; }

/* red */
#red { background: linear-gradient(180deg, var(--navy2), var(--navy)); }
.red-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 1rem; }
@media (max-width: 900px) { .red-grid { grid-template-columns: 1fr; } }
.pillars { display: grid; gap: 1rem; margin-top: 1.8rem; }
.pillar { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.3rem; background: rgba(255,255,255,.02); }
.pillar svg { width: 24px; height: 24px; flex: none; stroke: var(--gold2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pillar h4 { color: var(--white); font-size: 1rem; margin-bottom: .25rem; }
.pillar p { color: var(--muted); font-size: .9rem; }
.req { border: 1px solid rgba(232,179,74,.35); border-radius: 22px; padding: 2rem; background: var(--glow); }
.req h3 { font-family: var(--serif); font-weight: 700; font-size: 1.45rem; color: var(--white); }
.req ul { list-style: none; margin: 1.2rem 0 1.6rem; display: grid; gap: .6rem; color: var(--off); font-size: .95rem; }
.req li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold2); margin-right: .7rem; vertical-align: middle; }

/* contacto */
#contacto { background: var(--light-bg); color: var(--light-text); }
#contacto .h2 { color: var(--light-text); } #contacto .h2 em { color: var(--gold3); }
#contacto .lead { color: var(--light-muted); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.6rem; align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
form.card-form { background: var(--white); border-radius: 22px; padding: 2rem; box-shadow: 0 20px 50px rgba(26,32,48,.08); display: grid; gap: 1rem; }
.card-form label { font-size: .82rem; font-weight: 600; color: var(--light-text); display: grid; gap: .4rem; }
.card-form input, .card-form select, .card-form textarea { width: 100%; padding: .8rem .95rem; border: 1px solid #D5E1F3; border-radius: 12px; font-family: var(--sans); font-size: .95rem; background: #F5F8FD; color: var(--light-text); }
.card-form textarea { min-height: 96px; resize: vertical; }
.card-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .card-form .row { grid-template-columns: 1fr; } }
.card-form small { color: var(--light-muted); font-size: .78rem; }
.card-form small a { color: #1F62D6; text-decoration: underline; }
.contact-side { display: grid; gap: 1.2rem; }
.contact-side .kpi b { font-size: 1.6rem; }

/* ── PARALLAX EDITORIAL: la foto se mueve al ritmo del scroll, la frase
   flota encima a otro ritmo y se arma palabra por palabra. ── */
.px { position: relative; min-height: 72vh; overflow: hidden; display: grid; place-items: center; padding: 0; isolation: isolate; }
.px-img { position: absolute; inset: -18% 0; width: 100%; height: 136%; object-fit: cover; object-position: center; will-change: transform; z-index: 0; filter: saturate(.92); }
.px::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,43,110,.88) 0%, rgba(8,43,110,.55) 45%, rgba(8,43,110,.25) 100%); }
.px.px-right::before { background: linear-gradient(270deg, rgba(8,43,110,.88) 0%, rgba(8,43,110,.55) 45%, rgba(8,43,110,.25) 100%); }
.px::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--navy) 0%, transparent 18%, transparent 82%, var(--navy) 100%); }
.px-copy { position: relative; z-index: 2; width: min(1140px, 92vw); padding: 6rem 0; will-change: transform; }
.px.px-right .px-copy { text-align: right; }
.px-copy .eyebrow { color: var(--gold); }
.px-quote { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.025em; color: var(--white); max-width: 16ch; text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.px.px-right .px-quote { margin-left: auto; }
.px-quote .w { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); filter: blur(6px); }
.px-quote .hl, .px-quote .w.hl { color: var(--gold2); }
.px-sub { margin-top: 1.2rem; color: var(--off); font-size: 1.05rem; max-width: 46ch; opacity: 0; transform: translateY(14px); }
.px.px-right .px-sub { margin-left: auto; }
.px-line { width: 72px; height: 3px; background: linear-gradient(90deg, var(--gold2), transparent); margin-top: 1.6rem; transform: scaleX(0); transform-origin: left; }
.px.px-right .px-line { margin-left: auto; transform-origin: right; background: linear-gradient(270deg, var(--gold2), transparent); }
/* Transiciones finas al bajar: título con cortina, tarjetas escalonadas, barra de progreso */
.h2.reveal { clip-path: inset(0 0 100% 0); transform: none; opacity: 1; }
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold2), #1F62D6); z-index: 200; }
footer { padding: 3rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; align-items: start; }
footer .foot-main { display: grid; gap: 1rem; }
.office { border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem 1.5rem; display: grid; gap: .9rem; background: rgba(255,255,255,.03); }
.office .eyebrow { margin: 0; }
.office .office-sub { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.office-row { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; color: var(--off); line-height: 1.5; }
.office-row svg { width: 18px; height: 18px; margin-top: .15rem; color: var(--gold2); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.office-row a { color: var(--off); border-bottom: 1px solid transparent; }
.office-row a:hover { color: var(--white); border-bottom-color: var(--gold); }
.office-row[hidden] { display: none; }
@media (max-width: 860px) { footer .wrap { grid-template-columns: 1fr; gap: 2rem; } }
footer p.legal { max-width: 90ch; opacity: .85; }
/* Crédito discreto de OMB Cloud AES: lockup oficial en blanco, atenuado hasta el hover */
footer .powered { display: inline-flex; align-items: center; gap: .6rem; margin-top: .2rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .55; transition: opacity .2s; width: max-content; }
footer .powered img { height: 22px; width: auto; display: block; }
footer .powered:hover { opacity: 1; color: var(--off); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .82rem; }
.legal-nav a { color: var(--off); border-bottom: 1px solid transparent; }
.legal-nav a:hover { color: var(--white); border-bottom-color: var(--gold); }
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 999999; display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s; }
.wa-float svg { width: 30px; height: 30px; }
.wa-glyph { fill: currentColor !important; stroke: none !important; }
.wa-float:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 40px rgba(0,0,0,.36); }
@media (max-width: 640px) { .wa-float { width: 50px; height: 50px; } }
.cookie-bar { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); width: min(1040px, 94vw); z-index: 300; background: rgba(8,43,110,.96); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.cookie-in { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: 1.1rem 1.4rem; }
.cookie-in b { color: var(--white); display: block; margin-bottom: .2rem; }
.cookie-in p { color: var(--muted); font-size: .86rem; max-width: 70ch; }
.cookie-in p a { color: var(--gold2); text-decoration: underline; }
.cookie-acts { display: flex; gap: .6rem; flex: none; }
.cookie-acts .btn { padding: .7rem 1.1rem; font-size: .86rem; }
@media (max-width: 720px) { .cookie-in { flex-direction: column; align-items: stretch; } .cookie-acts { justify-content: flex-end; flex-wrap: wrap; } }

/* ── LANDING DE AGENTES ── */
.hero-title small { display: block; font-size: .42em; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 1rem; line-height: 1.4; }
.pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
@media (max-width: 960px) { .pains { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pains { grid-template-columns: 1fr; } }
.pain { border: 1px solid var(--line); border-radius: 18px; padding: 1.8rem; background: rgba(255,255,255,.03); position: relative; overflow: hidden; }
.pain::before { content: attr(data-n); position: absolute; right: 1rem; top: .4rem; font-family: var(--serif); font-weight: 800; font-size: 4rem; color: rgba(143,193,255,.08); line-height: 1; }
.pain h4 { color: var(--white); font-size: 1.05rem; margin-bottom: .5rem; }
.pain p { color: var(--muted); font-size: .92rem; }
.pain b { display: block; color: var(--gold2); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 1rem; }
.engines { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.6rem; }
@media (max-width: 860px) { .engines { grid-template-columns: 1fr; } }
.engine { border: 1px solid var(--line); border-radius: 22px; padding: 2rem; background: linear-gradient(160deg, var(--navy2), var(--navy)); display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; align-items: start; }
.engine .ic { width: 56px; height: 56px; border-radius: 16px; background: var(--glow); display: grid; place-items: center; }
.engine .ic svg { width: 26px; height: 26px; stroke: var(--gold2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.engine h3 { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--white); margin-bottom: .5rem; }
.engine p { color: var(--muted); font-size: .95rem; }
.engine ul { list-style: none; margin-top: .9rem; display: grid; gap: .4rem; color: var(--off); font-size: .9rem; }
.engine li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: .6rem; vertical-align: middle; }
#cartera { background: var(--light-bg); color: var(--light-text); }
#cartera .h2 { color: var(--light-text); } #cartera .h2 em { color: var(--gold3); } #cartera .lead { color: var(--light-muted); }
.faq { margin-top: 2.6rem; display: grid; gap: .8rem; max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.03); }
.faq summary { cursor: pointer; list-style: none; padding: 1.2rem 1.4rem; font-weight: 600; color: var(--white); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; flex: none; stroke: var(--gold2); fill: none; stroke-width: 2; transition: transform .25s; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq p { padding: 0 1.4rem 1.3rem; color: var(--muted); font-size: .95rem; }
.leader { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 2.6rem; }
@media (max-width: 900px) { .leader { grid-template-columns: 1fr; } }
.leader-card { border: 1px solid var(--line); border-radius: 22px; padding: 2rem; background: var(--navy2); }
.leader-card b { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--white); }
.leader-card span { color: var(--gold2); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.leader-card p { color: var(--muted); margin-top: 1rem; }
.leader-card .office-row { margin-top: 1rem; }
.backing { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--off); font-size: .9rem; }
.backing svg { width: 42px; height: 42px; flex: none; fill: currentColor; color: var(--white); }
#contacto .lead strong { color: var(--light-text); }
#quien .yn { padding: 2rem; }

/* ── PÁGINAS LEGALES ── */
.doc { padding: 8rem 0 4rem; }
.doc .wrap { max-width: 860px; }
.doc h1 { font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.02em; color: var(--white); margin-bottom: .6rem; }
.doc .meta { color: var(--muted); font-size: .85rem; margin-bottom: 2.4rem; }
.doc h2 { font-weight: 700; font-size: 1.15rem; color: var(--gold2); margin: 2.2rem 0 .7rem; }
.doc p, .doc li { color: var(--off); font-size: .97rem; line-height: 1.75; }
.doc ul { padding-left: 1.2rem; display: grid; gap: .4rem; }
.doc table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.doc th, .doc td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); color: var(--off); vertical-align: top; }
.doc th { color: var(--gold2); font-weight: 600; }
.doc a { color: var(--gold2); text-decoration: underline; }
.doc .box { border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.4rem; background: var(--navy2); margin: 1rem 0; }

/* ── SITIO POR PÁGINAS (15-sep-2026) ── */
.page-hero { min-height: 0; padding: 9rem 0 4.5rem; display: block; }
.page-hero .wrap { position: relative; z-index: 1; max-width: 900px; margin-left: auto; margin-right: auto; }
.page-hero .hero-title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.page-hero .hero-cta { margin-top: 1.4rem; }
.cta-band { background: linear-gradient(180deg, var(--navy2), var(--navy)); border-top: 1px solid var(--line); }
.cta-band .lead { max-width: 60ch; }
.page-top { padding-top: 9rem; }
/* Responsive fino: nada se desfasa en 390px */
@media (max-width: 640px) {
  .wrap { width: min(1140px, 90vw); }
  section { padding: 3.6rem 0; }
  #hero { padding-top: 6.5rem; padding-bottom: 3rem; min-height: 0; display: block; }
  #hero .hero-grid { width: min(1140px, 90vw); margin: 0 auto; }
  .hero-title { font-size: 2.1rem; }
  .hero-sub { font-size: 1rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; white-space: normal; }
  .cta { width: 100%; }
  .hero-art { max-width: 260px; }
  .hero-stats { position: static; margin-top: 1.8rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 1.1rem 1rem; }
  .stat b { font-size: 1.4rem; }
  .h2 { font-size: 1.7rem; }
  .px { min-height: 60vh; }
  .px-copy { padding: 4rem 0; }
  .px-quote { font-size: 1.9rem; max-width: none; }
  .path-body, .yn-body, .proj-form, .card-form, .req, .timeline, .office { padding: 1.4rem; }
  .yn-body { padding: 1.4rem; }
  .steps { grid-template-columns: 1fr; }
  .grid4, .grid3 { grid-template-columns: 1fr; }
  .proj, .contact, .two, .red-grid, .leader { grid-template-columns: 1fr; gap: 1.4rem; }
  .legal-nav { gap: .8rem; }
  .faq summary { padding: 1rem 1.1rem; }
  .btn { padding: .85rem 1.2rem; }
  .cookie-bar { width: calc(100vw - 1.5rem); bottom: .75rem; }
  .cookie-acts .btn { flex: 1; justify-content: center; }
  .page-hero { padding: 7rem 0 3rem; }
  .page-top { padding-top: 7rem; }
}

@media (max-width: 860px) { #hero { display: block; min-height: 0; padding-bottom: 3rem; } #hero .hero-grid { width: min(1140px, 92vw); margin: 0 auto; } .hero-stats { position: static; margin-top: 2rem; } }

/* ── BLOQUES CLAROS INTERCALADOS (Enrique, 15-sep-2026: «que no se vea tan azul») ──
   Una sola clase `.light` en la sección voltea los tokens; las tarjetas pasan a blanco. */
section.light { background: var(--light-bg); color: var(--light-text); }
.light .h2 { color: var(--light-text); } .light .h2 em { color: var(--gold3); }
.light .eyebrow { color: #1F62D6; }
.light .lead { color: var(--light-muted); }
.light .card, .light .art, .light .yn, .light .path, .light .pillar, .light .req, .light .timeline, .light .engine, .light .pain, .light .leader-card, .light .faq details { background: #fff; border-color: #D5E1F3; }
.light .tl div { background: var(--light-bg); border-color: #D5E1F3; }
.light .card h4, .light .art h4, .light .yn h3, .light .path h3, .light .pillar h4, .light .step h4, .light .engine h3, .light .pain h4, .light .leader-card b, .light .faq summary, .light .req h3, .light .list li strong, .light .quote { color: var(--light-text); }
.light .card p, .light .art p, .light .art small, .light .yn ul, .light .path p, .light .pillar p, .light .step p, .light .engine p, .light .engine ul, .light .pain p, .light .leader-card p, .light .faq p, .light .req ul, .light .list li span, .light .tl p, .light .backing, .light .office-row, .light .office-row a { color: var(--light-muted); }
.light .card .ic, .light .engine .ic { background: rgba(31,98,214,.1); }
.light .card .ic svg, .light .engine .ic svg, .light .pillar svg, .light .list li svg, .light .faq summary svg, .light .office-row svg { stroke: #1F62D6; }
.light .art b, .light .tl b, .light .step::before, .light .pain b, .light .leader-card span { color: #1F62D6; }
.light .step { border-top-color: #D5E1F3; }
.light .yn li::before, .light .req li::before, .light .engine li::before { background: #1F62D6; }
.light .yn.no h3 { color: var(--light-muted); } .light .yn.no li::before { background: #9AAAC6; }
.light .path-art::after { background: linear-gradient(180deg, transparent 45%, #fff 100%); }
.light .yn-art::after { background: linear-gradient(180deg, transparent 45%, #fff 100%); }
.light .btn-ghost { border-color: rgba(11,31,68,.25); color: var(--light-text); }
.light .btn-ghost:hover { border-color: #1F62D6; color: #1F62D6; }
.light .pain::before { color: rgba(13,63,156,.08); }
.light .backing { border-top-color: #D5E1F3; }
.light .stats { background: #fff; border-color: #D5E1F3; } .light .stat { border-color: #D5E1F3; } .light .stat b { color: #0D3F9C; } .light .stat span { color: var(--light-muted); }

/* Héroe con imagen de fondo (producto y red de agentes): la foto comunica la
   experiencia; el velo azul garantiza contraste del texto y funde con el menú flat. */
#hero.has-bg .hero-light { display: none; }
#hero.has-bg .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#hero.has-bg .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; filter: saturate(.9); }
#hero.has-bg .hero-bg.shift img { transform: scale(1.3); transform-origin: left center; }
#hero.has-bg .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,31,82,.94) 0%, rgba(8,43,110,.7) 42%, rgba(8,43,110,.08) 100%), linear-gradient(180deg, rgba(7,31,82,.65) 0%, transparent 28%, transparent 68%, var(--navy) 100%); }
#hero.has-bg .wrap { position: relative; z-index: 1; }
#hero.has-bg .hero-title, #hero.has-bg .hero-sub { max-width: 620px; text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.page-hero.has-bg { min-height: 72vh; display: flex; align-items: center; padding: 8rem 0 5rem; }
.page-hero.has-bg .wrap { max-width: none; margin: 0 auto; }
/* Red de agentes: la foto de la red ocupa el lado derecho; el arte orbital se retira */
#hero.has-bg .hero-grid { grid-template-columns: 1fr; }
#hero.has-bg .hero-art { display: none; }
@media (max-width: 640px) {
  .page-hero.has-bg { min-height: 0; padding: 7rem 0 3rem; }
  #hero.has-bg .hero-bg::after { background: linear-gradient(180deg, rgba(7,31,82,.9) 0%, rgba(8,43,110,.78) 60%, var(--navy) 100%); }
  #hero.has-bg .hero-bg.shift img { transform: none; }
}