/* FLOW Talent HUB · web comercial
   Tokens → base → componentes → secciones → responsive → movimiento */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0068E8;
  --blue-700: #0052BA;
  --navy: #071B48;
  --navy-2: #12306E;
  --sky: #EAF6FF;
  --sky-2: #D5EAFF;
  --ink-2: #435570;
  --ink-3: #5D6E88;
  --line: #DCE6F2;
  --white: #FFFFFF;
  /* acentos del logotipo: solo para estados */
  --red: #D8131B;
  --amber: #F2A900;
  --green: #1E9E4A;
  --green-ink: #12703A;
  --amber-ink: #7A5200;

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-soft: 0 1px 2px rgba(7, 27, 72, .06), 0 12px 32px -12px rgba(7, 27, 72, .18);
  --shadow-lift: 0 2px 4px rgba(7, 27, 72, .06), 0 30px 60px -24px rgba(0, 72, 170, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 72px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 750; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ink-3); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
[hidden] { display: none !important; }

/* ---------- botones ---------- */
.btn {
  --bg: var(--blue); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2;
  color: var(--fg); background: var(--bg);
  border: 1.5px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), color .2s;
}
.btn:hover { color: var(--fg); }
.btn--primary { box-shadow: 0 8px 20px -10px rgba(0, 104, 232, .8); }
.btn--primary:hover { --bg: var(--blue-700); transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(0, 82, 186, .9); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { --bg: transparent; --fg: var(--navy); border-color: var(--line); background: rgba(255,255,255,.7); }
.btn--ghost:hover { --fg: var(--blue-700); border-color: var(--blue); background: #fff; }
.btn--light { --bg: #fff; --fg: var(--navy); }
.btn--light:hover { --bg: var(--sky); --fg: var(--navy); }
.btn--sm { min-height: 42px; padding: 9px 18px; font-size: .95rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .7; cursor: progress; transform: none; }
.link-btn {
  font: inherit; font-weight: 650; font-size: .95rem; color: var(--blue);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.link-btn:hover { color: var(--blue-700); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(7,27,72,.4); }
.utility { background: var(--sky); font-size: .85rem; }
.utility__row { display: flex; justify-content: flex-end; align-items: center; gap: 20px; min-height: 34px; color: var(--ink-2); }
.utility a { color: var(--navy); font-weight: 600; text-decoration: none; white-space: nowrap; }
.utility a:hover { color: var(--blue); text-decoration: underline; }
.nav { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand img { width: 128px; height: auto; }
.nav__main { margin-left: auto; }
.nav__list { display: flex; gap: 4px; list-style: none; align-items: center; }
.nav__list > li > a, .nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font: inherit; font-size: .98rem; font-weight: 600; color: var(--navy);
  background: none; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.nav__actions .btn { white-space: nowrap; }
/* con 7 opciones el menú se compacta antes de pasar al botón de menú */
@media (max-width: 1360px) {
  .nav { gap: 16px; }
  .nav__list { gap: 0; }
  .nav__list > li > a, .nav__trigger { padding: 10px 9px; font-size: .94rem; }
  .nav__actions .btn--sm { padding-inline: 16px; }
}
.nav__list > li > a:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { background: var(--sky); color: var(--blue-700); }
.nav__trigger svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s var(--ease); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 290px; list-style: none;
  padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lift);
  animation: menu-in .18s var(--ease);
}
.menu--right { left: auto; right: 0; }
.menu a { display: block; padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none; }
.menu a strong { display: block; color: var(--navy); font-weight: 650; }
.menu a span { display: block; color: var(--ink-3); font-size: .9rem; line-height: 1.35; }
.menu a:hover, .menu a:focus-visible { background: var(--sky); }
.menu a:hover strong { color: var(--blue-700); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* menú en celular: tarjetas + desplegables; Portal de empleos y «Agenda una demo» fijos abajo */
.mobile-nav { border-top: 1px solid var(--line); background: #fff; height: calc(100vh - var(--mnav-top, var(--header-h))); height: calc(100dvh - var(--mnav-top, var(--header-h))); }
.mnav { display: flex; flex-direction: column; height: 100%; }
.mnav__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--gutter) 12px; }
.mnav__i { display: block; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mnav__grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; padding: 0; }
.mnav__grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mnav__tile { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border-radius: 14px; background: #F5F9FE; border: 1px solid var(--line); color: var(--navy); font-weight: 650; text-decoration: none; line-height: 1.2; }
.mnav__tile .mnav__i { color: var(--blue); }
.mnav__tile:hover, .mnav__tile:focus-visible { border-color: var(--blue); background: var(--sky); }
.mnav__acc { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; }
.mnav__acc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px; font-weight: 700; color: var(--navy); cursor: pointer; list-style: none; }
.mnav__acc summary::-webkit-details-marker { display: none; }
.mnav__acc summary .mnav__i { color: var(--ink-3); transition: transform .25s var(--ease); }
.mnav__acc[open] summary .mnav__i { transform: rotate(180deg); color: var(--blue); }
.mnav__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.mnav__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--sky); color: var(--blue-700); font-weight: 650; font-size: .93rem; text-decoration: none; }
.mnav__chip:hover, .mnav__chip:focus-visible { background: var(--sky-2); }
.mnav__foot { display: grid; gap: 10px; padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -12px 24px -20px rgba(7,27,72,.45); }
.mnav__foot .btn { min-height: 52px; }
.mnav__jobs { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; color: #fff; text-decoration: none; background: radial-gradient(70% 90% at 100% 0%, rgba(0,104,232,.75), transparent 70%), var(--navy); }
.mnav__jobs-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(255,255,255,.12); }
.mnav__jobs-t { display: grid; gap: 2px; }
.mnav__jobs strong { font-size: 1rem; }
.mnav__jobs small { display: flex; align-items: center; gap: 6px; color: #C9D6EE; font-size: .82rem; }
.mnav__jobs small i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 3px rgba(61,220,132,.25); }
.mnav__jobs > .mnav__i:last-child { margin-left: auto; color: #8EC4FF; }
.mnav__jobs:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- secciones ---------- */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section__head p { font-size: 1.125rem; max-width: 640px; }
.kicker { font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 700; letter-spacing: -.01em; color: var(--blue); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 30px; height: 3px; background: currentColor; border-radius: 2px; }
.kicker--light { color: #8EC4FF; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.6; }
.illus-note { font-size: .8rem; color: var(--ink-3); margin-top: 14px; }
.illus-note--center { text-align: center; margin-top: 24px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); overflow: hidden; isolation: isolate; }
.hero__ambient { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 70% at 85% 30%, rgba(0,104,232,.13), transparent 70%),
  radial-gradient(50% 60% at 10% 100%, rgba(120,190,255,.18), transparent 70%),
  linear-gradient(180deg, #fff 0%, var(--sky) 100%); }
.hero__ambient::after { content: ""; position: absolute; width: 520px; height: 520px; right: -120px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,104,232,.16), transparent 65%); animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-60px,50px,0) scale(1.08); } }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.35rem, 5.2vw, 4.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin-bottom: 24px; }
.hero h1 span { display: block; color: var(--blue); }
.hero .lead { max-width: 560px; margin-bottom: 32px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.hero__note { font-size: .95rem; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; max-width: 460px; }
.hero__note::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(30,158,74,.15); }
.hero__visual { margin: 0; position: relative; }

/* tablero ilustrativo */
.board { position: relative; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.9); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 22px 22px 72px; font-size: .9rem; }
.board::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(0,104,232,.35), rgba(255,255,255,0) 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.board__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.board__eyebrow { font-size: .78rem; color: var(--ink-3); margin: 0 0 2px; }
.board__title { font-size: 1.15rem; font-weight: 750; color: var(--navy); margin: 0; letter-spacing: -.01em; }
.pill { font-size: .75rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.pill--blue { background: var(--sky); color: var(--blue-700); }

/* la vía de etapas: motivo de marca */
.rail { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0 0 18px; counter-reset: s; }
.rail li { position: relative; padding-top: 22px; font-size: .72rem; font-weight: 650; color: var(--ink-3); text-align: center; }
.rail li::before { content: ""; position: absolute; top: 5px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--line); z-index: 1; }
.rail li::after { content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.rail li:first-child::after { display: none; }
.rail .is-done { color: var(--navy); }
.rail .is-done::before { background: var(--blue); border-color: var(--blue); }
.rail .is-done::after, .rail .is-now::after { background: var(--blue); }
.rail .is-now { color: var(--blue-700); font-weight: 750; }
.rail .is-now::before { border-color: var(--blue); box-shadow: 0 0 0 5px rgba(0,104,232,.15); }
.board__body { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.cands { width: 100%; border-collapse: collapse; }
.cands th { text-align: left; font-size: .72rem; font-weight: 650; color: var(--ink-3); padding: 10px 12px; background: #F7FAFE; border-bottom: 1px solid var(--line); }
.cands td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--navy); white-space: nowrap; font-size: .84rem; }
.cands tr:last-child td { border-bottom: 0; }
.cands td:first-child { font-weight: 650; }
.av { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--sky-2); color: var(--blue-700); font-style: normal; font-size: .66rem; font-weight: 750; vertical-align: middle; }
.meter { display: inline-block; width: 52px; height: 6px; margin-right: 8px; border-radius: 4px; background: var(--sky-2); vertical-align: middle; position: relative; overflow: hidden; }
.meter::after { content: ""; position: absolute; inset: 0; width: var(--v); background: var(--blue); border-radius: inherit; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.dot--g { background: var(--green); } .dot--y { background: var(--amber); } .dot--b { background: var(--blue); }
.board__float { position: absolute; left: -28px; bottom: -30px; width: 250px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--shadow-soft); }
.board__float p { margin: 0; font-size: .84rem; color: var(--navy); }
.board__float .muted { font-size: .78rem; margin-top: 2px; color: var(--ink-3); }
.board__float { animation: float-card 6s ease-in-out infinite; will-change: transform; }
/* flota: sube 6 px y la sombra se abre y se aleja, como si ganara altura */
@keyframes float-card {
  0%, 100% { transform: translateY(0); box-shadow: 0 1px 2px rgba(7,27,72,.06), 0 12px 32px -12px rgba(7,27,72,.18); }
  50% { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(7,27,72,.04), 0 22px 40px -14px rgba(7,27,72,.16); }
}
.hero__visual .illus-note { margin-top: 48px; text-align: right; }

/* ---------- confianza ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.trust__row { display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); padding-top: 26px; padding-bottom: 26px; }
.trust__title { flex: none; font-size: .95rem; font-weight: 650; color: var(--ink-2); margin: 0; letter-spacing: 0; max-width: 150px; line-height: 1.3; }
.trust__logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 5vw, 64px); }
.trust__logos img { height: 34px; width: auto; filter: grayscale(1); opacity: .72; transition: filter .25s, opacity .25s; }
.trust__logos li:hover img { filter: none; opacity: 1; }
/* cinta de logos: se activa desde JS; sin JS o con movimiento reducido queda estática */
.marquee { flex: 1; min-width: 0; }
.marquee.is-running { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; }
.marquee.is-running .trust__logos { flex-wrap: nowrap; padding-right: clamp(24px, 5vw, 64px); }
.marquee.is-running .trust__logos li { flex: none; }
.marquee.is-running .marquee__track { animation: marquee var(--marquee-dur, 30s) linear infinite; }
.marquee:hover .marquee__track, .marquee.is-paused .marquee__track, .trust__row:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
.marquee__toggle { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s; }
.marquee__toggle:hover { border-color: var(--blue); color: var(--blue-700); }
.marquee__toggle svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marquee__toggle .i-play, .marquee__toggle[aria-pressed="true"] .i-pause { display: none; }
.marquee__toggle[aria-pressed="true"] .i-play { display: block; }

/* ---------- problema ---------- */
.ledger { position: relative; list-style: none; border-top: 2px solid var(--navy); }
/* isotipo de la lupa que acompaña la lectura: se ubica junto al «Con FLOW» de la fila que se lee */
.ledger__lupa { position: absolute; top: 0; left: var(--lx, 50%); width: 38px; height: 38px; margin: 0; padding: 0; pointer-events: none; z-index: 2; opacity: 0;
  transform: translate(0, var(--ly, 0px)); transition: transform .6s cubic-bezier(.34, 1.3, .64, 1), opacity .3s; filter: drop-shadow(0 6px 10px rgba(0,72,170,.3)); }
.ledger__lupa.is-on { opacity: 1; }
.ledger__lupa svg { display: block; width: 100%; height: 100%; }

.ledger__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); padding: 32px 0; border-bottom: 1px solid var(--line); }
.ledger__label { font-size: .85rem; font-weight: 700; color: var(--ink-3); margin-bottom: 8px; }
.ledger__now h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin-bottom: 8px; }
.ledger__now p:last-child { margin: 0; }
.ledger__flow { position: relative; padding-left: 24px; border-left: 3px solid var(--blue); }
.ledger__flow .ledger__label { color: var(--blue-700); font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -.01em; }
.ledger__flow p { color: var(--navy); margin-bottom: 10px; }

/* ---------- proceso ---------- */
.process { background: linear-gradient(180deg, var(--sky) 0%, #fff 100%); }
.stages-nav { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-bottom: 14px; }
/* el indicador «Etapa n de 5» solo se anuncia a lectores de pantalla */
.stages-nav__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stages-nav__status span { color: var(--blue-700); }
.stages-nav__arrows { display: flex; gap: 8px; }
.arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--navy); cursor: pointer;
  box-shadow: 0 6px 16px -10px rgba(7,27,72,.45); transition: background-color .18s, border-color .18s, color .18s, transform .18s var(--ease), opacity .18s; }
.arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
.arrow:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.arrow[data-stage-next]:hover:not(:disabled) svg { transform: translateX(2px); }
.arrow[data-stage-prev]:hover:not(:disabled) svg { transform: translateX(-2px); }
.arrow:active:not(:disabled) { transform: scale(.94); }
.arrow:disabled { opacity: .4; cursor: default; box-shadow: none; }
.stages { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); overflow: hidden; }
.stages__tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); background: #FBFDFF; position: relative; }
.stages__tabs [role="tab"] {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 8px 18px; font: inherit; font-weight: 650; font-size: .98rem; color: var(--ink-2);
  background: none; border: 0; cursor: pointer; transition: color .2s, background-color .2s;
}
.stages__tabs [role="tab"]::after { content: ""; position: absolute; top: 43px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.stages__tabs [role="tab"]:last-child::after { display: none; }
/* número dentro del anillo segmentado (el mismo de Beneficios) */
.stages__tabs .n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: .95rem; font-weight: 800; color: var(--blue-700); box-shadow: 0 0 0 5px #FBFDFF; transition: color .25s, transform .3s var(--ease); }
.stages__tabs .n::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/anillo-pasos.svg?v=3") center / 100% 100% no-repeat; opacity: .55; transition: opacity .25s, transform .6s var(--ease); }
.stages__tabs .n::after { content: ""; position: absolute; inset: 9px; z-index: -1; border-radius: 50%; background: #fff; transition: background-color .25s; }
.stages__tabs [role="tab"]:hover { color: var(--navy); background: var(--sky); }
.stages__tabs [role="tab"]:hover .n::before { opacity: 1; transform: rotate(72deg); }
.stages__tabs [role="tab"][aria-selected="true"] { color: var(--navy); }
.stages__tabs [role="tab"][aria-selected="true"] .n { color: var(--navy); font-size: 1.05rem; transform: scale(1.3); }
.stages__tabs [role="tab"][aria-selected="true"] .n::before { opacity: 1; transform: rotate(72deg); filter: drop-shadow(0 4px 8px rgba(0,104,232,.4)); }
/* etapa actual: el anillo crece y lleva una sombra azul suave; el centro sigue blanco */
.stages__tabs [role="tab"].is-past .n::before { opacity: 1; }
.stages__tabs [role="tab"].is-past::after { background: var(--blue); }
.stages__tabs [role="tab"].is-past .n { border-color: var(--blue); color: var(--blue-700); }
.stages__tabs [role="tab"]:focus-visible { outline-offset: -4px; }
.stage { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 48px); }
.stage:focus-visible { outline-offset: -4px; }
.stage.is-entering .stage__text, .stage.is-entering .stage__visual { animation: stage-in .4s var(--ease) both; }
.stage.is-entering .stage__visual { animation-delay: .06s; }
@keyframes stage-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stage h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: 22px; }
.stage__facts { margin: 0; display: grid; gap: 18px; }
.stage__facts div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.stage__facts dt { font-weight: 700; color: var(--navy); font-size: .95rem; }
.stage__facts dd { margin: 0; }
.stage__visual { display: flex; align-items: center; }

/* pantallas ilustrativas */
.mock { width: 100%; background: linear-gradient(180deg, #F7FBFF, #fff); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; font-size: .88rem; color: var(--navy); box-shadow: 0 20px 40px -30px rgba(0,72,170,.5); }
.mock__h { font-weight: 700; margin-bottom: 14px; }
.mock__h--sub { margin-top: 18px; margin-bottom: 8px; font-size: .82rem; color: var(--ink-3); }
.mock__field { display: grid; gap: 6px; margin-bottom: 12px; }
.mock__field span { font-size: .75rem; color: var(--ink-3); }
.mock__field i { display: block; height: 9px; width: var(--w); background: var(--sky-2); border-radius: 5px; }
.mock__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.mock__chips span { padding: 5px 10px; border-radius: 999px; background: var(--sky); color: var(--blue-700); font-size: .76rem; font-weight: 650; }
.mock__chips .is-soft { background: #FFF6DE; color: var(--amber-ink); }
.mock__assist { font-size: .78rem; padding: 10px 12px; border-radius: var(--r-sm); background: var(--navy); color: #fff; display: flex; gap: 8px; align-items: center; }
.mock__assist::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7CC0FF; }
.mock__options { display: grid; gap: 8px; }
.mock__options span { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; font-weight: 600; }
.mock__options .is-on { border-color: var(--blue); background: var(--sky); color: var(--blue-700); }
.mock__list { list-style: none; display: grid; gap: 6px; }
.mock__list li { padding-left: 18px; position: relative; }
.mock__list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--blue); }
.mock__rows { list-style: none; display: grid; gap: 8px; }
.mock__rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tag { font-style: normal; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #EEF2F7; color: var(--ink-2); white-space: nowrap; }
.tag--g { background: #E5F6EC; color: var(--green-ink); }
.tag--y { background: #FFF3D6; color: var(--amber-ink); }
.tag--b { background: var(--sky); color: var(--blue-700); }
.mock__quote { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--blue); background: #fff; font-size: .82rem; color: var(--ink-2); }
.mock__bars, .mock__timeline { list-style: none; display: grid; gap: 14px; }
.mock__bars li { display: grid; grid-template-columns: 1fr 44px; gap: 6px 10px; align-items: center; }
.mock__bars span { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-2); }
.mock__bars b, .mock__timeline b { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--blue) var(--v), var(--sky-2) var(--v)); }
.mock__bars em { font-style: normal; font-weight: 700; text-align: right; }
.mock__timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; font-size: .8rem; }
.mock__foot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 650; font-size: .82rem; }

/* ---------- soluciones ---------- */
.segment { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 88px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; }
.segment + .segment { border-top: 1px solid var(--line); }
.segment--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.segment--flip .segment__media { order: 2; }
.segment__media { position: relative; }
.segment__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
.segment__media::after { content: ""; position: absolute; inset: auto -14px -14px auto; width: 45%; height: 45%; border-radius: var(--r-lg); background: var(--sky); z-index: -1; }
.segment--flip .segment__media::after { inset: auto auto -14px -14px; }
.segment { position: relative; z-index: 0; }
.segment__who, .segment__body > .segment__who { font-weight: 700; color: var(--blue-700); margin-bottom: 12px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -.01em; }
.segment h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 16px; }
.segment__body > p { font-size: 1.1rem; max-width: 560px; }
.segment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--blue-700); text-decoration: none; }
.link-more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
.link-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-more:hover::after { transform: translateX(3px) rotate(45deg); }
.ticks { list-style: none; display: grid; gap: 10px; margin: 22px 0 28px; }
.ticks li { position: relative; padding-left: 30px; color: var(--navy); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4 7.8 12 13 6.5' fill='none' stroke='%230052BA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* ---------- profundidad ---------- */
.depth { background: var(--navy); color: #C9D6EE; position: relative; overflow: hidden; }
.depth::before { content: ""; position: absolute; width: 700px; height: 700px; left: -300px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(0,104,232,.35), transparent 65%); }
.depth h2, .depth h3 { color: #fff; }
.depth__grid { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.depth__copy { position: sticky; top: calc(var(--header-h) + 48px); }
.depth__copy p { font-size: 1.1rem; }
.depth__copy .kicker { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.depth .fine { font-size: .85rem; color: #9FB2D3; margin-top: 24px; }
.dossier { list-style: none; position: relative; display: grid; gap: 14px; }
.dossier::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(180deg, var(--blue), rgba(0,104,232,.15)); }
.dossier li { position: relative; padding: 20px 22px 20px 64px; border-radius: var(--r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.dossier li::before { content: ""; position: absolute; left: 14px; top: 24px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 3px solid var(--blue); }
.dossier li:first-child { background: rgba(255,255,255,.1); }
.dossier__step { display: block; font-size: 1rem; font-weight: 650; color: #8EC4FF; margin-bottom: 4px; }
.dossier h3 { font-size: 1.15rem; margin-bottom: 4px; }
.dossier p { margin: 0; font-size: .97rem; }

/* ---------- visibilidad ---------- */
.vis__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.vis__copy > p { font-size: 1.1rem; }
.vis__list { margin: 28px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.vis__list div { padding-top: 14px; border-top: 2px solid var(--blue); }
.vis__list dt { font-weight: 750; color: var(--navy); margin-bottom: 4px; }
.vis__list dd { margin: 0; font-size: .97rem; }
.vis__visual { margin: 0; }
.pipeline { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.pipeline__head { display: flex; justify-content: space-between; padding: 16px 20px; font-weight: 750; color: var(--navy); background: linear-gradient(180deg, #F7FBFF, #fff); border-bottom: 1px solid var(--line); }
.pipeline ul { list-style: none; }
.pipeline li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pipeline li:last-child { border-bottom: 0; }
.pipeline strong { display: block; color: var(--navy); font-size: .95rem; }
.pipeline li div span { font-size: .82rem; color: var(--ink-3); }
.stagechip { font-size: .75rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--sky); color: var(--blue-700); }
.stagechip--done { background: #E5F6EC; color: var(--green-ink); }
.who { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 700; }

/* ---------- integraciones ---------- */
.integrations { background: #FBFDFF; border-top: 1px solid var(--line); }
.int__list { list-style: none; border-top: 1px solid var(--line); }
.int__list li { display: grid; grid-template-columns: 180px 1fr auto; gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.int__list img { max-height: 40px; width: auto; max-width: 150px; }
.int__list h3 { font-size: 1.08rem; margin-bottom: 2px; }
.int__list p { margin: 0; font-size: .97rem; }
.status { font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--sky); color: var(--blue-700); white-space: nowrap; }
.status--paid { background: #FFF3D6; color: var(--amber-ink); }
.status--infra { background: #EEF2F7; color: var(--ink-2); }
.status--credit { background: #E5F6EC; color: var(--green-ink); }

/* ---------- acompañamiento ---------- */
.onboarding { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.onb__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.onb__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: onb; }
.onb__steps li { counter-increment: onb; padding: 22px 14px 18px 0;
  /* línea base y línea azul que se completa al pasar el mouse, como en «Lo que nos guía» */
  background: linear-gradient(var(--blue), var(--blue)) top left / 0% 3px no-repeat, linear-gradient(var(--navy), var(--navy)) top left / 100% 3px no-repeat, linear-gradient(180deg, var(--sky), rgba(234,246,255,0)) top left / 100% 0% no-repeat;
  transition: background-size .55s var(--ease); }
.onb__steps li:hover { background-size: 100% 3px, 100% 3px, 100% 100%; }
.onb__steps li::before { content: counter(onb); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--sky); color: var(--blue-700); font-weight: 800; transition: background-color .3s, color .3s, transform .3s var(--ease); }
.onb__steps li:hover::before { background: var(--blue); color: #fff; transform: scale(1.06); }
.onb__steps h3 { font-size: 1.1rem; transition: color .3s; }
.onb__steps li:hover h3 { color: var(--blue); }
.onb__steps p { margin: 0; font-size: .97rem; }

/* ---------- demo y formulario ---------- */
.demo { background: linear-gradient(160deg, var(--sky) 0%, #fff 60%); border-top: 1px solid var(--line); }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.demo__copy { padding-top: 12px; }
.demo__support { font-weight: 650; color: var(--navy); padding: 14px 18px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); }
.demo__expect { list-style: none; display: grid; gap: 8px; margin: 24px 0; }
.demo__expect li { padding-left: 26px; position: relative; color: var(--navy); }
.demo__expect li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 10px; height: 2px; background: var(--blue); }
.demo__alt { font-size: .95rem; }
.formcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3.5vw, 36px); box-shadow: var(--shadow-lift); }
.formcard__title { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 22px; }
.field { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.field > label, .field legend { display: block; font-weight: 650; color: var(--navy); font-size: .95rem; margin-bottom: 8px; padding: 0; }
.req { color: var(--red); }
.opt { font-weight: 500; color: var(--ink-3); }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--navy);
  background: #fff; border: 1.5px solid #C9D6E6; border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #7A8AA3; }
input:hover, textarea:hover { border-color: #9FB4CF; }
input:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,104,232,.16); }
[aria-invalid="true"] { border-color: var(--red) !important; }
.err { margin: 6px 0 0; font-size: .87rem; color: #B0101A; font-weight: 600; }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice--4 { grid-template-columns: repeat(4, 1fr); }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px; text-align: center; font-weight: 650; font-size: .95rem; color: var(--navy); border: 1.5px solid #C9D6E6; border-radius: 10px; background: #fff; transition: all .15s; }
.choice label:hover span { border-color: var(--blue); }
.choice input:checked + span { background: var(--sky); border-color: var(--blue); color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue); }
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.field--choice.is-invalid .choice span { border-color: var(--red); }
.field--check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.field--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.field--check label { font-weight: 500; font-size: .92rem; color: var(--ink-2); margin: 0; }
.field--check .err { grid-column: 2; }
.reveal-more { animation: stage-in .35s var(--ease) both; }
.form__status { margin: 4px 0 16px; padding: 12px 14px; border-radius: 10px; font-size: .95rem; background: #FDECEC; color: #8A0E15; border: 1px solid #F5C2C5; }
.form__status.is-ok { background: #E5F6EC; color: var(--green-ink); border-color: #BDE5CC; }
.form__fine { margin: 12px 0 0; font-size: .85rem; color: var(--ink-3); text-align: center; }
.spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.handoff { animation: stage-in .35s var(--ease) both; }
.handoff h4 { font-size: 1.3rem; }
.handoff__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px; }
.handoff__fine { font-size: .87rem; color: var(--ink-3); margin-bottom: 8px; }
.handoff__fine:empty { display: none; }
.handoff:focus { outline: none; }
.captcha { margin-bottom: 16px; min-height: 78px; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; position: relative; padding: 22px 48px 22px 0; cursor: pointer; font-weight: 700; font-size: 1.1rem; color: var(--navy); transition: color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10M14 9v10' stroke='%230052BA' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue-700); }
.faq summary:focus-visible { outline-offset: 2px; }
.faq details > div { padding: 0 48px 22px 0; }
.faq details[open] > div { animation: stage-in .3s var(--ease) both; }
.faq details p { margin: 0; }

/* ---------- cierre y pie ---------- */
.closing { background: var(--blue); color: #fff; background-image: radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(120deg, #0068E8, #0052BA); }
.closing__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 56px; padding-bottom: 56px; }
.closing h2 { color: #fff; margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 720px; }
.closing .btn--light:focus-visible { outline-color: #fff; }
.footer { background: #F5F9FE; border-top: 1px solid var(--line); font-size: .95rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.footer__brand img { width: 120px; margin-bottom: 12px; }
.footer address { font-style: normal; color: var(--ink-2); line-height: 1.7; font-size: .9rem; }
.footer h2 { font-size: .95rem; letter-spacing: 0; margin-bottom: 12px; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--blue-700); text-decoration: underline; }
.footer__bottom { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 20px; padding-bottom: 28px; font-size: .87rem; }
.footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.footer__bottom p { margin: 0; }
.footer__social { display: flex; gap: 18px; }

/* ---------- aparición al entrar ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__main, .nav__access { display: none; }
  .burger { display: inline-block; }
  .nav__actions { margin-left: auto; }
  .board__float { left: 12px; }
}
@media (max-width: 960px) {
  .hero__grid, .vis__grid, .demo__grid, .depth__grid, .faq__grid, .onb__grid { grid-template-columns: 1fr; }
  .depth__copy { position: static; }
  .stage { grid-template-columns: 1fr; }
  .segment { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .segment--flip { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .onb__steps { grid-template-columns: 1fr 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --header-h: 64px; }
  body { font-size: 1rem; }
  .utility__row { justify-content: center; gap: 14px; font-size: .8rem; }
  .utility__row > span { display: none; }
  .nav { gap: 12px; }
  .brand img { width: 108px; }
  .nav__actions .btn--sm { padding: 8px 14px; min-height: 42px; font-size: .9rem; }
  .ledger__row { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .stages__tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .stages__tabs::-webkit-scrollbar { display: none; }
  .stages__tabs [role="tab"] { flex: 0 0 31%; scroll-snap-align: start; font-size: .9rem; }
  .stage__facts div { grid-template-columns: 1fr; gap: 4px; }
  .segment, .segment--flip { grid-template-columns: 1fr; }
  .segment--flip .segment__media { order: 0; }
  .segment__media img { aspect-ratio: 16 / 11; object-position: center 30%; }
  .segment__media::after { display: none; }
  .vis__list { grid-template-columns: 1fr; }
  .int__list li { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .int__list li > div { grid-column: 1 / -1; grid-row: 2; }
  .onb__steps { grid-template-columns: 1fr; }
  .trust__row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .trust__title { max-width: none; }
  .trust__logos { gap: 20px 32px; }
  .trust__logos img { height: 28px; }
  .marquee { align-self: stretch; }
  .marquee__toggle { position: absolute; right: var(--gutter); top: 22px; }
  .trust__row { position: relative; }
  .closing__row { flex-direction: column; align-items: flex-start; }
  .choice--4 { grid-template-columns: 1fr 1fr; }
  .faq details > div { padding-right: 0; }
  .board { padding: 16px; }
  .segment--flip { grid-template-columns: 1fr; }
  .cands th:nth-child(3), .cands td:nth-child(3) { display: none; }
  .board__float { position: relative; left: auto; bottom: auto; width: auto; margin-top: 12px; }
  .hero__visual .illus-note { margin-top: 12px; text-align: left; }
}
@media (max-width: 420px) {
  .rail li { font-size: 0; }
  .rail .is-now { font-size: .7rem; }
  .hero__ctas .btn { width: 100%; }
  .stages__tabs [role="tab"] { flex-basis: 40%; }
  .choice { grid-template-columns: 1fr; }
  .choice--4 { grid-template-columns: 1fr 1fr; }
  .brand img { width: 96px; }
  .nav__actions .btn--sm { padding: 8px 12px; font-size: .85rem; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .stages__tabs .n, .stages__tabs .n::before { transition: none; }
  .ledger__lupa { transition: opacity .3s; }
  .onb__steps li, .onb__steps li::before, .onb__steps h3 { transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero__ambient::after { animation: none; }
}

/* palabra destacada en azul dentro de un título */
.hl { color: var(--blue); }

/* segmento sin foto: tarjeta ilustrada sobre un fondo de la marca */
.segment__media--card { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-lg);
  background: radial-gradient(80% 60% at 80% 10%, rgba(0,104,232,.22), transparent 70%), linear-gradient(160deg, var(--sky) 0%, #fff 100%); border: 1px solid var(--line); }
.segment__media--card .bv-card { width: 100%; }
@media (max-width: 760px) { .segment__media--card { aspect-ratio: auto; } }

/* tarjeta de datos azul, con el mismo fondo del panel de acceso */
.navy-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; color: #C9D6EE;
  background: radial-gradient(60% 50% at 100% 0%, rgba(0,104,232,.55), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(0,104,232,.3), transparent 70%), var(--navy);
  box-shadow: 0 30px 60px -36px rgba(7,27,72,.7); }
.navy-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); }
.navy-card a { color: #fff; text-decoration: none; }
.navy-card a:hover { color: #8EC4FF; text-decoration: underline; }
.navy-card a:focus-visible { outline: 3px solid #8EC4FF; outline-offset: 2px; }

/* selector de idioma */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 10px 3px 7px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .82rem; font-weight: 700; color: var(--navy); cursor: pointer; }
.lang__btn:hover { border-color: var(--blue); }
.lang__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.lang-flag { width: 20px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lang__caret { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.lang__btn[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }
.lang__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; list-style: none; min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); animation: menu-in .18s var(--ease); }
.lang__menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 7px 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: .95rem; font-weight: 500; color: var(--navy); text-align: left; cursor: pointer; }
.lang__menu button:hover, .lang__menu button:focus-visible { background: var(--sky); outline: none; }
.lang__menu button[aria-current] { background: var(--sky-2); color: var(--blue-700); font-weight: 700; }
.lang__menu .lang-flag { width: 24px; height: 16px; }
.utility__row .lang { margin-left: 4px; }
/* ocultar la barra y los globos del traductor de Google */
.goog-te-banner-frame, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
.goog-text-highlight, [class*="VIpgJd-yAWNEb-VIpgJd"] { background: none !important; background-color: transparent !important; box-shadow: none !important; }
[class*="VIpgJd-yAWNEb-L7lbkb"] { display: none !important; }
body { top: 0 !important; }

/* «El CV es solo el comienzo»: núcleo de IA (decorativo) */
.depth__copy { container-type: inline-size; }
.ai-core { position: relative; height: 330px; max-width: 520px; margin-top: 8px; }
.ai-core__orbit, .ai-core__ring, .ai-core__ball { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
/* el centro va un poco a la izquierda: las etiquetas de la derecha son más largas */
.ai-core__orbit, .ai-core__ring, .ai-core__ball { left: 44%; }
.ai-core__orbit { width: 270px; height: 270px; border: 1px dashed rgba(142,196,255,.35); animation: ai-spin 40s linear infinite; }
.ai-core__ring { width: 130px; height: 130px; border: 1px solid rgba(142,196,255,.45); animation: ai-pulse 3.6s ease-out infinite; }
.ai-core__ring--2 { animation-delay: 1.8s; }
.ai-core__ball { display: grid; place-items: center; width: 86px; height: 86px; background: radial-gradient(circle at 35% 30%, #7CC0FF, var(--blue) 60%, #0A2E8A);
  box-shadow: 0 0 60px 10px rgba(0,104,232,.5), inset 0 0 20px rgba(255,255,255,.25); animation: ai-breathe 5s ease-in-out infinite; }
.ai-core__ball svg { width: 42px; height: 42px; fill: #fff; animation: ai-twinkle 2.8s ease-in-out infinite; }
.ai-chip { position: absolute; padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 700; font-size: .8rem; white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(0,0,0,.6); }
/* tres a cada lado */
.ai-chip--1 { left: 5%; top: 8%; } .ai-chip--2 { left: 0; top: calc(50% - 17px); } .ai-chip--3 { left: 5%; bottom: 8%; }
.ai-chip--4 { right: 5%; top: 8%; } .ai-chip--5 { right: 0; top: calc(50% - 17px); } .ai-chip--6 { right: 5%; bottom: 8%; }
/* aparecen una a una al llegar a la sección; luego quedan quietas */
.js .ai-core .ai-chip { opacity: 0; }
.js .ai-core.is-in .ai-chip { animation: ai-chip-in .6s var(--ease) forwards; }
.ai-core.is-in .ai-chip--1 { animation-delay: .2s; } .ai-core.is-in .ai-chip--2 { animation-delay: .45s; }
.ai-core.is-in .ai-chip--3 { animation-delay: .7s; } .ai-core.is-in .ai-chip--4 { animation-delay: .95s; }
.ai-core.is-in .ai-chip--5 { animation-delay: 1.2s; } .ai-core.is-in .ai-chip--6 { animation-delay: 1.45s; }
.js .ai-core .ai-chip.is-ready { animation: none; opacity: 1; }
/* efecto magnético al pasar el mouse: la etiqueta se acerca al cursor y vuelve con un rebote suave */
.ai-chip { --mx: 0px; --my: 0px; transform: translate(var(--mx), var(--my)); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s, color .3s; }
.ai-chip.is-hover { transform: translate(var(--mx), var(--my)) scale(1.07); transition: transform .12s linear, box-shadow .3s, color .3s; color: var(--blue-700);
  box-shadow: 0 0 0 4px rgba(142,196,255,.35), 0 16px 30px -12px rgba(0,104,232,.8); }
.ai-pill { display: inline-flex; align-items: center; gap: 8px; margin: 32px 0 0; padding: 8px 16px; border-radius: 999px; background: rgba(142,196,255,.12); border: 1px solid rgba(142,196,255,.35); color: #CFE4FF; font-weight: 700; font-size: .92rem; }
.depth__copy .ai-pill { font-size: .92rem; }
.ai-pill svg { width: 15px; height: 15px; fill: #8EC4FF; }
@keyframes ai-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ai-pulse { from { opacity: .8; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } }
@keyframes ai-breathe { 50% { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 80px 14px rgba(0,104,232,.6), inset 0 0 20px rgba(255,255,255,.25); } }
@keyframes ai-twinkle { 50% { transform: scale(.88) rotate(12deg); } }
@keyframes ai-chip-in { from { opacity: 0; transform: translateY(8px) scale(.95); } to { opacity: 1; transform: none; } }
/* si la columna es angosta: el núcleo arriba y las seis etiquetas en dos columnas debajo */
@container (max-width: 429px) {
  .ai-core { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 230px; }
  .ai-core__orbit { width: 210px; height: 210px; top: 110px; }
  .ai-core__ring { top: 110px; } .ai-core__ball { top: 110px; }
  .ai-core__orbit, .ai-core__ring, .ai-core__ball { left: 50%; }
  .ai-core { grid-auto-rows: 1fr; }
  .ai-chip, .ai-chip--1, .ai-chip--2, .ai-chip--3, .ai-chip--4, .ai-chip--5, .ai-chip--6 { position: static; display: flex; align-items: center; justify-content: center; min-height: 48px; text-align: center; white-space: normal; line-height: 1.25; font-size: .8rem; padding: 8px 12px; border-radius: 16px; }
  .ai-chip--1 { grid-area: 1 / 1; } .ai-chip--2 { grid-area: 2 / 1; } .ai-chip--3 { grid-area: 3 / 1; }
  .ai-chip--4 { grid-area: 1 / 2; } .ai-chip--5 { grid-area: 2 / 2; } .ai-chip--6 { grid-area: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-core__orbit, .ai-core__ring, .ai-core__ball, .ai-core__ball svg { animation: none; }
  .ai-core__ring { opacity: .5; }
  .js .ai-core .ai-chip, .js .ai-core.is-in .ai-chip { opacity: 1; animation: none; }
  .ai-chip, .ai-chip.is-hover { transition: none; transform: none; }
}

/* tres pilares de FLOW (inicio y beneficios para empresas) */
.pillars { padding-top: 0; }
.pillars__card { padding: clamp(32px, 5vw, 56px); border-radius: 28px; }
.pillars__card h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.03em; margin-bottom: clamp(24px, 3.5vw, 36px); }
.hl-light { color: #8EC4FF; }
.pillars__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar { position: relative; display: grid; gap: 16px; align-content: start; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(142,196,255,.22);
  transition: background-color .3s, border-color .3s, transform .3s var(--ease); }
.pillar:hover { background: rgba(255,255,255,.11); border-color: rgba(142,196,255,.55); transform: translateY(-4px); }
.pillar__n { position: absolute; top: 16px; right: 22px; font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1; letter-spacing: -.02em; color: rgba(142,196,255,.75); }
.pillar__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(140deg, var(--blue), #4DA3FF); box-shadow: 0 12px 24px -10px rgba(0,104,232,.9); }
.pillar__ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pillar p { margin: 0; color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 700; line-height: 1.35; }
@media (max-width: 860px) { .pillars__list { grid-template-columns: 1fr; } .pillar { grid-template-columns: 52px 1fr; align-items: center; padding-right: 64px; } .pillar__n { top: 12px; right: 14px; font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .pillar { transition: none; } .pillar:hover { transform: none; } }
.pillars__card .kicker, .ent__copy .kicker { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: 14px; }
.pillars__card .kicker::before, .ent__copy .kicker::before { width: 36px; }
.pillars__card .kicker { line-height: 1.25; }
@media (max-width: 600px) {
  .pillars__card { padding: 28px 18px; border-radius: 22px; }
  .pillars__card .kicker { gap: 10px; }
  .pillars__card .kicker::before { width: 24px; flex: none; }
  .pillar { gap: 14px; padding: 18px 56px 18px 16px; grid-template-columns: 46px 1fr; }
  .pillar__ic { width: 46px; height: 46px; border-radius: 14px; }
}
.ledger__lupa::before { content: ""; position: absolute; inset: 3px 6px 6px 3px; border-radius: 50%; background: #fff; z-index: -1; }

/* tablet y celular: el núcleo de IA va después del expediente (debajo de «Cierre») */
@media (max-width: 960px) {
  .depth__grid { display: flex; flex-direction: column; gap: 0; container-type: inline-size; }
  .depth__copy { display: contents; container-type: normal; }
  .depth__copy > * { order: 1; }
  .depth .dossier { order: 2; margin-top: 12px; }
  .depth .ai-pill { order: 3; align-self: flex-start; margin-top: 44px; }
  .depth .ai-core { order: 4; width: 100%; margin-left: auto; margin-right: auto; }
  .depth .fine { order: 5; }
}

/* correos y teléfonos: nunca se parten en dos líneas */
a[href^="mailto:"], a[href^="tel:"], .nw { white-space: nowrap; }

/* pilares justo debajo del hero (inicio) */
.hero + .pillars, .trust + .pillars { padding: clamp(40px, 5vw, 64px) 0; }

/* crédito, igual que el sitio actual */
.powered { margin-left: .6em; color: var(--ink-3); white-space: nowrap; }
.auth-legal .powered { margin-left: 0; }
@media (max-width: 600px) { .footer__bottom .powered { display: block; margin: 6px 0 0; } }

/* opciones y casillas: sin halo cuadrado al hacer clic; con teclado conservan el foco visible */
input[type="radio"]:focus, input[type="checkbox"]:focus { box-shadow: none; }
input[type="radio"]:focus:not(:focus-visible), input[type="checkbox"]:focus:not(:focus-visible) { outline: none; }

/* etiquetas de segmento más grandes; «Método tradicional» del mismo tamaño que «Con FLOW» */
.segment__who, .segment__body > .segment__who { font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -.015em; margin-bottom: 14px; }
.ledger__label { font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -.01em; }
.segment__body strong { color: var(--navy); font-weight: 700; }

/* respuestas de preguntas frecuentes con más de un párrafo */
details > div p + p { margin-top: 10px; }

/* sesión abierta: «Mi cuenta · Nombre» */
.sess { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 650; color: var(--navy); text-decoration: none; white-space: nowrap; transition: border-color .2s, box-shadow .2s; }
.sess:hover { border-color: var(--blue); color: var(--blue-700); box-shadow: 0 6px 16px -10px rgba(0,104,232,.6); }
.sess__av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--navy-2)); color: #fff; font-size: .78rem; font-weight: 800; }
.sess--bar { padding: 2px 10px 2px 2px; font-size: .88rem; }
.sess--bar .sess__av { width: 22px; height: 22px; font-size: .7rem; }
.sess--nav { padding: 4px 14px 4px 4px; }
.sess--nav .sess__av { width: 32px; height: 32px; font-size: .85rem; }
.sess-out { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.sess-out:hover { color: var(--navy); background: rgba(255,255,255,.7); }
.sess-out svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sess-m { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.sess--m { border: 0; padding-left: 0; }
.sess--m .sess__av { width: 36px; height: 36px; }
@media (max-width: 1080px) { .nav__actions .sess--nav .sess__t { display: none; } .nav__actions .sess--nav { padding: 3px; } }
.sess-m { flex-wrap: wrap; }
.sess-m .sess { min-width: 0; }
.sess-m .sess__t { overflow: hidden; text-overflow: ellipsis; }
/* en celular la cuenta va en la cabecera y en el menú; la barra superior no se satura */
@media (max-width: 760px) { .utility .sess, .utility .sess-out { display: none; } }
@media (max-width: 860px) { .p-top__actions .sess__t, .p-top__actions .sess-out span { display: none; } .p-top__actions .sess--nav { padding: 3px; } }
/* escritorio: la cuenta solo en la barra superior; en celular, en la cabecera */
@media (min-width: 761px) { .nav__actions .sess--nav { display: none; } }

/* barra superior: letra 2 puntos más grande e íconos para el portal y el acceso */
.utility { font-size: .975rem; }
.utility__row { min-height: 40px; gap: 22px; }
.utility a { display: inline-flex; align-items: center; gap: 7px; }
.utility__ic { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.utility a:hover .utility__ic { stroke: var(--blue-700); }
@media (max-width: 760px) { .utility__row { font-size: .82rem; gap: 10px; } .utility a { gap: 4px; } .utility__ic { width: 15px; height: 15px; } }
@media (max-width: 380px) { .utility__ic--user { display: none; } }

/* Potenciado por IA: ocho etiquetas, cuatro por lado */
.ai-core { height: 400px; }
.ai-chip--1 { left: 6%; top: 4%; bottom: auto; } .ai-chip--2 { left: 0; top: calc(30% - 17px); bottom: auto; }
.ai-chip--3 { left: 0; top: calc(64% - 17px); bottom: auto; } .ai-chip--4 { left: 6%; top: auto; bottom: 4%; }
.ai-chip--5 { right: 6%; left: auto; top: 4%; bottom: auto; } .ai-chip--6 { right: 0; left: auto; top: calc(30% - 17px); bottom: auto; }
.ai-chip--7 { right: 0; left: auto; top: calc(64% - 17px); bottom: auto; } .ai-chip--8 { right: 6%; left: auto; top: auto; bottom: 4%; }
.ai-core.is-in .ai-chip--7 { animation-delay: 1.7s; } .ai-core.is-in .ai-chip--8 { animation-delay: 1.95s; }
.ai-core.is-in .ai-chip--4 { animation-delay: .95s; } .ai-core.is-in .ai-chip--5 { animation-delay: 1.2s; } .ai-core.is-in .ai-chip--6 { animation-delay: 1.45s; }
@container (max-width: 429px) {
  .ai-core { height: auto; }
  .ai-chip--7, .ai-chip--8 { position: static; display: flex; align-items: center; justify-content: center; min-height: 48px; text-align: center; white-space: normal; line-height: 1.25; font-size: .8rem; padding: 8px 12px; border-radius: 16px; }
  .ai-chip--1 { grid-area: 1 / 1; } .ai-chip--2 { grid-area: 2 / 1; } .ai-chip--3 { grid-area: 3 / 1; } .ai-chip--4 { grid-area: 4 / 1; }
  .ai-chip--5 { grid-area: 1 / 2; } .ai-chip--6 { grid-area: 2 / 2; } .ai-chip--7 { grid-area: 3 / 2; } .ai-chip--8 { grid-area: 4 / 2; }
}
.ai-chip--4 { left: 0; } .ai-chip--8 { right: 0; } .ai-chip--1 { left: 3%; } .ai-chip--5 { right: 3%; }
@container (max-width: 429px) { .ai-chip--1, .ai-chip--4, .ai-chip--5, .ai-chip--8 { left: auto; right: auto; } }
.ai-chip--1, .ai-chip--2, .ai-chip--3, .ai-chip--4 { right: auto; }

/* Potenciado por IA: las ocho etiquetas en órbita alrededor del núcleo */
.ai-core { height: 360px; }
.ai-core__orbit, .ai-core__ring, .ai-core__ball { left: 46%; }
.ai-chip { translate: -50% -50%; }
.ai-chip--1 { left: calc(46% - 85px); right: auto; top: calc(50% + -131px); bottom: auto; }
.ai-chip--5 { left: calc(46% + 85px); right: auto; top: calc(50% + -131px); bottom: auto; }
.ai-chip--2 { left: calc(46% - 139px); right: auto; top: calc(50% + -55px); bottom: auto; }
.ai-chip--6 { left: calc(46% + 139px); right: auto; top: calc(50% + -55px); bottom: auto; }
.ai-chip--3 { left: calc(46% - 139px); right: auto; top: calc(50% + 55px); bottom: auto; }
.ai-chip--7 { left: calc(46% + 139px); right: auto; top: calc(50% + 55px); bottom: auto; }
.ai-chip--4 { left: calc(46% - 85px); right: auto; top: calc(50% + 131px); bottom: auto; }
.ai-chip--8 { left: calc(46% + 85px); right: auto; top: calc(50% + 131px); bottom: auto; }
@container (max-width: 429px) { .ai-core { height: auto; } .ai-chip { translate: none; } .ai-core__orbit, .ai-core__ring, .ai-core__ball { left: 50%; } }

/* etiquetas de segmento: un punto más */
.segment__who, .segment__body > .segment__who { font-size: clamp(1.4rem, 2.05vw, 1.72rem); }

/* ---------- Inicio · tres perfiles en pestañas (perfiles.js) ---------- */
.has-pf .section__head { margin-bottom: 26px; }
.pf-tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); padding: 6px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.pf-tabs__thumb { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 16px; background: var(--navy); box-shadow: 0 12px 26px -14px rgba(7,27,72,.9); transition: transform .5s var(--ease), width .5s var(--ease); }
.pf-tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 16px; background: none; font: inherit; color: var(--navy); cursor: pointer; text-align: left; transition: color .35s; }
.pf-tab:hover:not([aria-selected="true"]) { background: var(--sky); }
.pf-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.pf-tab__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--sky); transition: background-color .35s; }
.pf-tab__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--blue-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.pf-tab strong { display: block; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.pf-tab small { display: block; font-size: .82rem; color: var(--ink-3); font-weight: 600; transition: color .35s; }
.pf-tab[aria-selected="true"] { color: #fff; }
.pf-tab[aria-selected="true"] .pf-tab__ic { background: rgba(255,255,255,.14); }
.pf-tab[aria-selected="true"] .pf-tab__ic svg { stroke: #8EC4FF; }
.pf-tab[aria-selected="true"] small { color: #9FB2D3; }

.pf-stage { --dir: 1; position: relative; display: grid; }
.pf-stage > .pf-panel { grid-area: 1 / 1; padding: 0; border: 0; visibility: hidden; opacity: 0; }
.pf-stage > .pf-panel + .pf-panel { border-top: 0; }
.pf-stage > .pf-panel.is-on { visibility: visible; opacity: 1; }
.pf-stage > .pf-panel.is-leave { visibility: visible; animation: pf-out .26s ease-in both; }
.pf-panel.is-enter .segment__media img { animation: pf-img .7s .08s var(--ease) both; }
.pf-panel.is-enter .segment__media::after { animation: pf-fade .7s .1s var(--ease) both; }
.pf-panel.is-enter .segment__body > * { animation: pf-in .55s .14s var(--ease) both; }
.pf-panel.is-enter .segment__body > :nth-child(2) { animation-delay: .2s; }
.pf-panel.is-enter .segment__body > :nth-child(3) { animation-delay: .26s; }
.pf-panel.is-enter .segment__body > :nth-child(4) { animation-delay: .32s; }
.pf-panel.is-enter .segment__body > :nth-child(5) { animation-delay: .38s; }
@keyframes pf-in { from { opacity: 0; transform: translateX(calc(var(--dir) * 28px)); } to { opacity: 1; transform: none; } }
@keyframes pf-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(calc(var(--dir) * -24px)); } }
@keyframes pf-img { from { opacity: .2; transform: scale(1.04); clip-path: inset(0 0 0 calc(var(--dir) * 18%) round 22px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 22px); } }
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }

.pf-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; box-shadow: var(--shadow-soft); transition: border-color .2s, color .2s, transform .25s var(--ease); }
.pf-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pf-arrow--prev { left: -72px; } .pf-arrow--next { right: -72px; }
.pf-arrow:hover { border-color: var(--blue); color: var(--blue-700); }
.pf-arrow--prev:hover { transform: translateX(-3px); } .pf-arrow--next:hover { transform: translateX(3px); }
.pf-arrow:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 1340px) { .pf-arrow--prev { left: -12px; } .pf-arrow--next { right: -12px; } .pf-arrow { top: 34%; } }
@media (max-width: 760px) {
  .pf-tabs { gap: 4px; padding: 4px; border-radius: 18px; }
  .pf-tabs__thumb { top: 4px; bottom: 4px; border-radius: 14px; }
  .pf-tab { flex-direction: column; gap: 6px; min-height: 76px; padding: 8px 4px; text-align: center; }
  .pf-tab strong { font-size: .95rem; }
  .pf-tab small { display: none; }
  .pf-tab__ic { width: 34px; height: 34px; }
  .pf-arrow { top: 150px; width: 40px; height: 40px; margin-top: 0; }
  .pf-arrow--prev { left: 8px; } .pf-arrow--next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-tabs__thumb, .pf-tab, .pf-arrow { transition: none; }
  .pf-stage > .pf-panel.is-leave { animation: none; visibility: hidden; }
}
.pf-tabs { scroll-margin-top: calc(var(--header-h) + 64px); }

/* hero: frase nueva en 4 líneas y visual alineado arriba con el título */
@media (min-width: 1081px) { .hero__grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); align-items: start; } }
.hero h1 { font-size: clamp(2.2rem, 4.3vw, 3.55rem); line-height: 1.04; }
.hero__visual { margin-top: clamp(24px, 3.2vw, 48px); }
@media (max-width: 1080px) { .hero__visual { margin-top: 0; } }
@media (max-width: 600px) { .hero h1 { font-size: clamp(1.75rem, 8.4vw, 2.1rem); letter-spacing: -.03em; } }
@media (min-width: 601px) and (max-width: 1080px) { .hero h1 { font-size: clamp(2.6rem, 5.8vw, 3.1rem); } }

/* hero: la etapa actual late (mismo latido que Beneficios y Nosotros) y las barras crecen una tras otra */
.rail .is-now::before { animation: rail-beat 2.2s 1.6s ease-out infinite; }
@keyframes rail-beat { 0% { box-shadow: 0 0 0 0 rgba(0,104,232,.5); } 60%, 100% { box-shadow: 0 0 0 8px rgba(0,104,232,0); } }
.cands .meter::after { transform-origin: left center; animation: meter-in 1.1s cubic-bezier(.25,.8,.25,1) both; }
.cands tbody tr:nth-child(1) .meter::after { animation-delay: .5s; }
.cands tbody tr:nth-child(2) .meter::after { animation-delay: .85s; }
.cands tbody tr:nth-child(3) .meter::after { animation-delay: 1.2s; }
@keyframes meter-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .rail .is-now::before, .cands .meter::after { animation: none; } }

/* órbita con textos largos: más separación arriba y abajo */
.ai-core { height: 380px; }
.ai-chip { font-size: .78rem; }
.ai-chip--1 { left: calc(46% - 116px); top: calc(50% + -134px); }
.ai-chip--5 { left: calc(46% + 116px); top: calc(50% + -134px); }
.ai-chip--2 { left: calc(46% - 148px); top: calc(50% + -51px); }
.ai-chip--6 { left: calc(46% + 148px); top: calc(50% + -51px); }
.ai-chip--3 { left: calc(46% - 148px); top: calc(50% + 51px); }
.ai-chip--7 { left: calc(46% + 148px); top: calc(50% + 51px); }
.ai-chip--4 { left: calc(46% - 116px); top: calc(50% + 134px); }
.ai-chip--8 { left: calc(46% + 116px); top: calc(50% + 134px); }
@container (max-width: 429px) { .ai-core { height: auto; } .ai-chip { font-size: .8rem; } }



/* línea de colores del isotipo sobre el pie de página (como en la web de FLOW) */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #2179DD 0 25%, #1A8E2E 25% 50%, #FCBD13 50% 75%, #DF0B17 75% 100%); }

/* menú: la opción de la página actual en azul con una línea debajo (como en la web de FLOW) */
.nav__list > li > a[aria-current="page"], .nav__list > li > .nav__trigger.is-current { position: relative; color: var(--blue); }
.nav__list > li > a[aria-current="page"]::after, .nav__list > li > .nav__trigger.is-current::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -8px; height: 3px; border-radius: 3px; background: var(--blue); }
.nav__list > li > .nav__trigger.is-current::after { right: 22px; }