/* ============================================================
   ColegIA — home-v9.css   (Propuesta v9: tema CLARO, inspirada en la
   estructura de Treble.ai — tipografía display marcada, tarjetas con
   sombra dura desplazada, etiquetas "pill", mockups de navegador y una
   banda oscura para el momento WOW). Paleta e identidad de COLEGIA
   (acento CIAN). Sin datos inventados. Mobile-first · mejora progresiva.
   ============================================================ */

:root{
  --bg:#FFFFFF; --bg-soft:#F4F5FA; --band:#0B1220; --band-2:#0E1626;
  --ink:#0E1116; --ink-2:#454C5A; --ink-3:#7A8291;
  --a:#16C5D6; --a-2:#0FB3C4; --a-ink:#04303A; --tint:#E7FBFD;
  --wa:#25D366; --line:#E6E8EF;
  --font-head:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1); --wrap:1180px; --radius:18px;
  --shadow:5px 6px 0 var(--ink);
  --fs-d:clamp(2.6rem, 1rem + 4.6vw, 5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body.v9{ margin:0; background:var(--bg); color:var(--ink-2); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.v9 h1,.v9 h2,.v9 h3,.v9 h4{ margin:0; font-family:var(--font-head); color:var(--ink); line-height:1.1; letter-spacing:-.03em; font-weight:800; }
.v9 p{ margin:0; } .v9 img,.v9 svg{ max-width:100%; }
.v9 a{ color:inherit; text-decoration:none; }
.v9 ul{ margin:0; padding:0; list-style:none; }
.v9 :focus-visible{ outline:3px solid var(--a); outline-offset:3px; border-radius:8px; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.2rem); }
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:1rem; top:-100px; z-index:3000; padding:.7rem 1.1rem; background:var(--ink); color:#fff; border-radius:10px; font-weight:700; transition:top .2s var(--ease); }
.skip-link:focus{ top:1rem; }

/* Etiqueta tipo "pill" negra (firma Treble) */
.tag{ display:inline-flex; align-items:center; gap:.5rem; background:var(--ink); color:#fff; padding:.42rem .82rem; border-radius:9px; font-family:var(--font-head); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.tag--a{ background:var(--a); color:var(--a-ink); }
.accent{ color:var(--a); }

/* Botones con sombra dura desplazada + flecha en círculo */
.btn{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1; padding:.95rem 1.05rem .95rem 1.5rem; border-radius:100px; border:1.6px solid var(--ink); cursor:pointer; transition:transform .14s var(--ease), box-shadow .14s var(--ease); }
.btn .circ{ display:grid; place-content:center; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--ink); flex-shrink:0; }
.btn .circ svg{ width:16px; height:16px; }
.btn--primary{ background:var(--ink); color:#fff; box-shadow:5px 5px 0 var(--a); }
.btn--primary:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--a); }
.btn--ghost{ background:#fff; color:var(--ink); box-shadow:5px 5px 0 var(--ink); }
.btn--ghost .circ{ background:var(--a); color:var(--a-ink); }
.btn--ghost:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn--onDark{ background:var(--a); color:var(--a-ink); border-color:var(--a); box-shadow:5px 5px 0 rgba(255,255,255,.18); }
.btn--onDark .circ{ background:var(--a-ink); color:var(--a); }
.btn--onDark:hover{ transform:translate(-2px,-2px); }
.btn--sm{ font-size:.9rem; padding:.6rem .7rem .6rem 1.1rem; }
.btn--sm .circ{ width:28px; height:28px; }

/* Tarjeta base con sombra dura */
.card{ background:#fff; border:1.6px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow); }

/* ---------- HEADER ---------- */
.h9{ position:sticky; top:0; z-index:200; padding:.8rem 0; transition:background .25s, box-shadow .25s; }
.h9.solid{ background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line); }
.h9__bar{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; background:#fff; border:1.6px solid var(--ink); border-radius:100px; padding:.5rem .6rem .5rem 1.3rem; box-shadow:4px 4px 0 var(--ink); }
.h9__logo{ display:flex; align-items:center; }
.h9__logo img{ height:24px; width:auto; display:block; }
.h9__nav ul{ display:flex; gap:1.6rem; align-items:center; }
.h9__nav a{ color:var(--ink-2); font-family:var(--font-head); font-weight:600; font-size:.92rem; }
.h9__nav a:hover{ color:var(--ink); }
.h9__cta{ display:flex; align-items:center; gap:.7rem; }
.h9__burger{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1.6px solid var(--ink); background:#fff; padding:0; }
.h9__burger i,.h9__burger i::before,.h9__burger i::after{ content:""; display:block; width:18px; height:2.4px; background:var(--ink); border-radius:2px; margin-inline:auto; transition:transform .25s, opacity .25s; }
.h9__burger i{ position:relative; } .h9__burger i::before{ position:absolute; top:-6px; left:0; } .h9__burger i::after{ position:absolute; top:6px; left:0; }
.h9__burger[aria-expanded="true"] i{ background:transparent; }
.h9__burger[aria-expanded="true"] i::before{ transform:translateY(6px) rotate(45deg); }
.h9__burger[aria-expanded="true"] i::after{ transform:translateY(-6px) rotate(-45deg); }
/* drawer */
.dr9{ position:fixed; inset:0; z-index:250; display:none; }
.dr9.open{ display:block; }
.dr9__bg{ position:absolute; inset:0; background:rgba(14,17,22,.5); }
.dr9__p{ position:absolute; top:0; right:0; height:100%; width:min(86vw,340px); background:#fff; border-left:1.6px solid var(--ink); display:flex; flex-direction:column; gap:.3rem; padding:5rem 1.6rem 2rem; }
.dr9__p a{ color:var(--ink); font-family:var(--font-head); font-weight:700; font-size:1.2rem; padding:.6rem 0; border-bottom:1px solid var(--line); }
.dr9__x{ position:absolute; top:1.2rem; right:1.2rem; width:42px; height:42px; border:1.6px solid var(--ink); border-radius:10px; background:#fff; }
.dr9__x::before,.dr9__x::after{ content:""; position:absolute; left:10px; top:19px; width:20px; height:2.4px; background:var(--ink); }
.dr9__x::before{ transform:rotate(45deg); } .dr9__x::after{ transform:rotate(-45deg); }
body.v9.nav-open{ overflow:hidden; }

/* ---------- HERO ---------- */
.hero9{ position:relative; text-align:center; padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem); overflow:hidden; }
.hero9__art{ position:absolute; inset:0; z-index:0; color:#E9EBF2; pointer-events:none; }
.hero9__art svg{ position:absolute; }
.hero9 .wrap{ position:relative; z-index:1; }
.hero9 .tag{ margin-bottom:1.7rem; }
.hero9 h1{ font-size:var(--fs-d); line-height:1.05; max-width:16ch; margin:0 auto 1.7rem; text-wrap:balance; }
.hero9__sub{ color:var(--ink-2); font-size:clamp(1.05rem,1rem + .5vw,1.3rem); max-width:46ch; margin:0 auto 2.6rem; text-wrap:balance; }
.hero9__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
.hero9__micro{ margin-top:1.6rem; color:var(--ink-3); font-size:.9rem; }
/* mockup navegador del hero */
.mock{ margin:clamp(2.5rem,5vw,3.5rem) auto 0; max-width:900px; }
.mock__win{ border:1.6px solid var(--ink); border-radius:16px; overflow:hidden; box-shadow:8px 10px 0 var(--ink); background:#fff; }
.mock__bar{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; background:#F3F4F8; border-bottom:1.6px solid var(--ink); }
.mock__dot{ width:11px; height:11px; border-radius:50%; background:#D4D7E0; border:1.4px solid var(--ink); }
.mock__url{ margin-left:.6rem; font-size:.8rem; color:var(--ink-3); font-family:var(--font-head); }
.mock__flag{ margin-left:auto; font-family:var(--font-head); font-weight:700; font-size:.62rem; letter-spacing:.16em; color:var(--ink-3); border:1.4px solid var(--line); border-radius:100px; padding:.25rem .6rem; }
.mock__body{ padding:clamp(1.2rem,3vw,2rem); text-align:left; }
.mock__body h4{ font-size:1.15rem; margin-bottom:1.2rem; }
.barrow{ display:grid; grid-template-columns:130px 1fr 46px; gap:.8rem; align-items:center; margin-bottom:.85rem; font-size:.9rem; color:var(--ink-2); }
.bartrack{ display:block; width:100%; height:12px; border-radius:7px; background:#EEF0F6; overflow:hidden; }
.barfill{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,var(--a),#67E8F9); transform-origin:left center; }
.barval{ text-align:right; font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:.85rem; }

/* ---------- BANDAS Y SECCIONES ---------- */
.sec{ padding:clamp(3.2rem,7vw,6rem) 0; }
.sec--soft{ background:var(--bg-soft); }
.sec--band{ background:var(--band); color:#C7D0E0; }
.sec--band h2,.sec--band h3{ color:#fff; }
.sec__head{ max-width:60ch; margin-bottom:3rem; }
.sec__head.center{ margin-inline:auto; text-align:center; }
.sec__head .tag{ margin-bottom:1.2rem; }
.sec__head h2{ font-size:clamp(1.9rem,1rem + 2.6vw,3.1rem); margin:0 0 1.1rem; text-wrap:balance; }
.sec__head p{ color:var(--ink-2); font-size:1.08rem; line-height:1.65; }
.sec--band .sec__head p{ color:#AEB9CC; }

/* ---------- CONFIANZA / CANALES ---------- */
.trust{ display:flex; align-items:center; justify-content:center; gap:clamp(1.2rem,4vw,3rem); flex-wrap:wrap; }
.trust__lbl{ font-family:var(--font-head); font-weight:600; color:var(--ink-3); font-size:.92rem; }
.chan{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1.05rem; }
.chan svg{ width:22px; height:22px; color:var(--a); }
.trust__note{ text-align:center; margin-top:1.8rem; color:var(--ink-3); font-size:.92rem; line-height:1.6; }

/* ---------- ECOSISTEMA (grid de tarjetas) ---------- */
.eco9{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.eco9__c{ padding:1.4rem 1.2rem; border-radius:16px; border:1.6px solid var(--ink); background:#fff; box-shadow:4px 5px 0 var(--ink); transition:transform .15s var(--ease); }
.eco9__c:hover{ transform:translate(-2px,-2px); }
.eco9__ic{ width:46px; height:46px; border-radius:12px; display:grid; place-content:center; background:var(--tint); border:1.6px solid var(--ink); margin-bottom:.9rem; }
.eco9__ic svg{ width:24px; height:24px; color:var(--a-2); }
.eco9__c b{ display:block; font-family:var(--font-head); color:var(--ink); font-size:1.02rem; margin-bottom:.4rem; }
.eco9__c span{ font-size:.9rem; color:var(--ink-2); line-height:1.5; }
.eco9__remate{ text-align:center; font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1.15rem; margin-top:4.2rem; }

/* ---------- FEATURE (fila alterna: texto + mockup) ---------- */
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.feat + .feat{ margin-top:clamp(3rem,6vw,5rem); }
.feat--rev .feat__media{ order:-1; }
.feat__n{ display:flex; align-items:center; gap:.8rem; margin:0 0 .9rem; }
.feat__n b{ font-family:var(--font-head); font-weight:800; font-size:2rem; color:var(--line); -webkit-text-stroke:1px var(--ink-3); }
.feat__n span{ font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1.05rem; }
.feat h3{ font-size:clamp(1.6rem,1rem + 2vw,2.4rem); line-height:1.12; }
.feat p{ color:var(--ink-2); margin-top:1rem; font-size:1.05rem; line-height:1.65; max-width:44ch; }
.feat__list{ display:grid; gap:.75rem; margin-top:1.5rem; }
.feat__list li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--ink); font-weight:500; }
.feat__list svg{ width:20px; height:20px; color:var(--a-2); flex-shrink:0; margin-top:3px; }
.feat__media .mock__win{ box-shadow:7px 8px 0 var(--ink); }

/* mini panel de mockup (icono grande) */
.panel{ border:1.6px solid var(--ink); border-radius:16px; box-shadow:7px 8px 0 var(--ink); background:#fff; padding:2rem; min-height:280px; display:grid; place-content:center; text-align:center; gap:1rem; }
.panel--dark{ background:var(--band-2); }
.panel .pill{ width:66px; height:66px; border-radius:16px; background:var(--a); border:1.6px solid var(--ink); display:grid; place-content:center; margin:0 auto; }
.panel .pill svg{ width:34px; height:34px; color:var(--a-ink); }
.panel b{ font-family:var(--font-head); color:var(--ink); font-size:1.1rem; }
.panel--dark b{ color:#fff; }

/* ---------- AI ADMISSIONS (banda oscura) ---------- */
.aifn9{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.4rem; }
.aifn9__c{ background:rgba(255,255,255,.04); border:1.6px solid rgba(255,255,255,.14); border-radius:16px; padding:1.4rem 1.2rem; }
.aifn9__ic{ width:44px; height:44px; border-radius:12px; display:grid; place-content:center; background:rgba(22,197,214,.14); border:1.6px solid rgba(22,197,214,.4); margin-bottom:.9rem; }
.aifn9__ic svg{ width:22px; height:22px; color:var(--a); }
.aifn9__c b{ display:block; font-family:var(--font-head); color:#fff; font-size:1.02rem; margin-bottom:.4rem; }
.aifn9__c span{ font-size:.9rem; color:#AEB9CC; line-height:1.5; }
.sec--band .mock__win{ background:var(--band-2); border-color:rgba(255,255,255,.2); box-shadow:8px 10px 0 rgba(0,0,0,.4); }
.sec--band .mock__bar{ background:#111A2C; border-bottom-color:rgba(255,255,255,.14); }
.sec--band .mock__dot{ background:#2B3550; border-color:rgba(255,255,255,.2); }
.sec--band .mock__body h4{ color:#fff; }
.sec--band .barrow{ color:#AEB9CC; }
.sec--band .bartrack{ background:rgba(255,255,255,.08); }
.sec--band .barval{ color:#fff; }
.sec--band .mock__url,.sec--band .mock__flag{ color:#8592AB; }

/* ---------- DIRECCIÓN (métricas) ---------- */
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.metrics__c{ padding:1.5rem 1.4rem; border-radius:16px; border:1.6px solid var(--ink); background:#fff; box-shadow:4px 5px 0 var(--ink); }
.metrics__c .ic{ width:44px; height:44px; border-radius:12px; display:grid; place-content:center; background:var(--tint); border:1.6px solid var(--ink); margin-bottom:.9rem; }
.metrics__c .ic svg{ width:22px; height:22px; color:var(--a-2); }
.metrics__c b{ display:block; font-family:var(--font-head); color:var(--ink); font-size:1.05rem; margin-bottom:.4rem; }
.metrics__c span{ font-size:.92rem; color:var(--ink-2); line-height:1.55; }

/* ---------- RECORRIDO ---------- */
.jrny9{ display:flex; align-items:flex-start; gap:.4rem; position:relative; }
.jrny9__c{ flex:1 1 0; min-width:0; position:relative; text-align:center; padding-top:.4rem; }
/* línea de flujo que conecta cada paso con el siguiente */
.jrny9__c:not(:last-child)::before{ content:""; position:absolute; top:32px; left:50%; width:100%; border-top:3px dashed #CBD0DC; z-index:0; }
.jrny9__n{ position:relative; z-index:1; display:grid; place-content:center; width:52px; height:52px; border-radius:50%; background:var(--a); border:1.8px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font-family:var(--font-head); font-weight:800; color:var(--a-ink); font-size:1.2rem; margin:0 auto 1rem; }
.jrny9__c b{ display:block; font-family:var(--font-head); color:var(--ink); font-size:.98rem; line-height:1.25; padding-inline:.35rem; }
.jrny9__loop{ text-align:center; color:var(--ink-3); margin-top:3.4rem; font-size:.95rem; }

/* ---------- RESULTADOS / SEGMENTOS ---------- */
.seg9{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.seg9__c{ padding:1.6rem 1.4rem; border-radius:16px; border:1.6px solid var(--ink); background:#fff; box-shadow:4px 5px 0 var(--ink); }
.seg9__ic{ width:50px; height:50px; border-radius:13px; display:grid; place-content:center; background:var(--tint); border:1.6px solid var(--ink); margin-bottom:1rem; }
.seg9__ic svg{ width:26px; height:26px; color:var(--a-2); }
.seg9__c b{ display:block; font-family:var(--font-head); color:var(--ink); font-size:1.15rem; margin-bottom:.4rem; }
.seg9__c span{ color:var(--ink-2); font-size:.95rem; line-height:1.55; }
.measure{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.measure .chip{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1.6px solid var(--ink); border-radius:100px; padding:.55rem 1rem; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--ink); }
.measure .chip svg{ width:16px; height:16px; color:var(--a-2); }

/* ---------- FORMULARIO ---------- */
.formsec{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.form9{ padding:clamp(1.5rem,3vw,2.2rem); border-radius:20px; border:1.6px solid var(--ink); background:#fff; box-shadow:7px 8px 0 var(--ink); }
.form9__grp{ font-family:var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-2); margin:.4rem 0 .9rem; }
.form9__grp + .form9__grp{ margin-top:1.4rem; }
.form9__row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.fld9{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
.fld9.full{ grid-column:1/-1; }
.fld9 label{ font-size:.8rem; font-weight:600; color:var(--ink-2); }
.fld9 input,.fld9 select{ width:100%; padding:.8rem .9rem; border-radius:11px; border:1.6px solid var(--line); background:#fff; color:var(--ink); font:inherit; transition:border-color .15s, box-shadow .15s; }
.fld9 input:focus,.fld9 select:focus{ outline:none; border-color:var(--a); box-shadow:0 0 0 3px rgba(22,197,214,.22); }
.form9 .btn{ width:100%; justify-content:center; margin-top:.5rem; }
.form9__note{ margin-top:.9rem; color:var(--ink-3); font-size:.85rem; }
.form9__ok{ display:none; }
.form9.is-sent .form9__ok{ display:block; margin-top:1rem; padding:1rem; border-radius:12px; background:var(--tint); border:1.6px solid var(--ink); color:var(--ink); font-weight:600; }
.formsec__copy .feat__list{ margin-top:1.4rem; }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:.8rem; }
.faq details{ border:1.6px solid var(--ink); border-radius:14px; background:#fff; box-shadow:3px 4px 0 var(--ink); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-family:var(--font-head); font-weight:700; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ position:relative; width:20px; height:20px; flex-shrink:0; }
.faq summary .pm::before,.faq summary .pm::after{ content:""; position:absolute; background:var(--a-2); border-radius:2px; }
.faq summary .pm::before{ top:9px; left:0; width:20px; height:2.4px; }
.faq summary .pm::after{ left:9px; top:0; width:2.4px; height:20px; transition:transform .2s; }
.faq details[open] summary .pm::after{ transform:scaleY(0); }
.faq details > div{ padding:0 1.3rem 1.2rem; color:var(--ink-2); }

/* ---------- CTA FINAL ---------- */
.cta9{ text-align:center; }
.cta9 h2{ font-size:clamp(2rem,1rem + 3vw,3.4rem); margin-bottom:1rem; text-wrap:balance; }
.cta9 p{ color:#AEB9CC; max-width:50ch; margin:0 auto 2rem; }

/* ---------- FOOTER ---------- */
.f9{ background:var(--band); color:#AEB9CC; padding:clamp(2.5rem,5vw,3.5rem) 0 2rem; }
.f9__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.f9__brand img{ height:30px; width:auto; margin-bottom:1.1rem; }
.f9__brand p{ max-width:34ch; }
.f9 h4{ color:#fff; font-size:.95rem; margin-bottom:.9rem; }
.f9 a{ display:block; color:#AEB9CC; padding:.25rem 0; }
.f9 a:hover{ color:#fff; }
.f9__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); font-size:.86rem; }

/* WhatsApp flotante */
.fab9{ position:fixed; right:clamp(1rem,3vw,1.6rem); bottom:clamp(1rem,3vw,1.6rem); z-index:190; display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.05rem; background:var(--wa); color:#04140a; font-family:var(--font-head); font-weight:700; font-size:.86rem; border-radius:100px; border:1.6px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.fab9 svg{ width:22px; height:22px; fill:currentColor; }
.fab9:hover{ transform:translate(-1px,-1px); }

/* ---------- REVEAL ---------- */
.js-enabled .r9{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js-enabled .r9.in{ opacity:1; transform:none; }
.js-enabled .rg9 > *{ opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.js-enabled .rg9.in > *{ opacity:1; transform:none; }
.js-enabled .rg9.in > *:nth-child(2){ transition-delay:.07s } .js-enabled .rg9.in > *:nth-child(3){ transition-delay:.14s } .js-enabled .rg9.in > *:nth-child(4){ transition-delay:.21s } .js-enabled .rg9.in > *:nth-child(5){ transition-delay:.28s }
.js-enabled .mock.r9 .barfill{ transform:scaleX(0); }
.js-enabled .mock.r9.in .barfill{ transform:scaleX(1); transition:transform 1.1s cubic-bezier(.2,.75,.25,1); }
.barrow:nth-child(3) .barfill{ transition-delay:.1s } .barrow:nth-child(4) .barfill{ transition-delay:.2s } .barrow:nth-child(5) .barfill{ transition-delay:.3s } .barrow:nth-child(6) .barfill{ transition-delay:.4s } .barrow:nth-child(7) .barfill{ transition-delay:.5s }
@media (prefers-reduced-motion: reduce){ .js-enabled .r9,.js-enabled .rg9>*,.js-enabled .mock.r9 .barfill{ opacity:1!important; transform:none!important; transition:none!important; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .eco9{ grid-template-columns:repeat(2,1fr); }
  .aifn9{ grid-template-columns:repeat(2,1fr); }
  .metrics{ grid-template-columns:1fr; }
  .feat,.formsec{ grid-template-columns:1fr; }
  .feat--rev .feat__media{ order:0; }
  .seg9{ grid-template-columns:1fr; }
  .h9__nav{ display:none; } .h9__cta .btn:not(.h9__burger){ display:none; } .h9__burger{ display:inline-flex; }
  .f9__top{ grid-template-columns:1fr 1fr; }
}
/* Recorrido: en pantallas medianas/chicas pasa a línea de tiempo vertical */
@media (max-width:720px){
  .jrny9{ flex-direction:column; gap:0; max-width:360px; margin-inline:auto; align-items:stretch; }
  .jrny9__c{ display:flex; align-items:center; gap:1rem; text-align:left; padding:.55rem 0; padding-top:.55rem; }
  .jrny9__c:not(:last-child)::before{ top:50%; left:26px; width:0; height:100%; border-top:0; border-left:3px dashed #CBD0DC; }
  .jrny9__n{ margin:0; flex-shrink:0; }
  .jrny9__c b{ padding:0; }
}
@media (max-width:560px){
  .eco9,.aifn9{ grid-template-columns:1fr; }
  .form9__row{ grid-template-columns:1fr; }
  .f9__top{ grid-template-columns:1fr; }
  .hero9__cta{ flex-direction:column; align-items:stretch; }
  .hero9__cta .btn{ justify-content:space-between; }
}

/* ============================================================
   WORDPRESS / ELEMENTOR — Fluent Forms + blindaje (tema claro v9)
   ============================================================ */
/* Fluent Forms Free dentro de .form9 */
.form9 .ff-el-group{ margin-bottom:.9rem; }
.form9 .ff-el-input--label label,.form9 label{ font-size:.8rem; font-weight:600; color:var(--ink-2); }
.form9 .ff-el-form-control,.form9 input,.form9 select,.form9 textarea{ width:100%; padding:.8rem .9rem; border-radius:11px; border:1.6px solid var(--line); background:#fff; color:var(--ink); font:inherit; }
.form9 .ff-el-form-control:focus,.form9 input:focus,.form9 select:focus{ outline:none; border-color:var(--a); box-shadow:0 0 0 3px rgba(22,197,214,.22); }
.form9 .ff-btn-submit,.form9 button[type="submit"]{ width:100%; margin-top:.5rem; background:var(--ink); color:#fff; font-family:var(--font-head); font-weight:700; border:1.6px solid var(--ink); border-radius:100px; padding:1rem 1.6rem; box-shadow:5px 5px 0 var(--a); cursor:pointer; }
.form9 .ff-el-section-break{ border:0; padding:0; margin:1rem 0 .6rem; }
.form9 .ff-el-section-break h3,.form9 .ff-el-section-break .ff-el-section-break-title{ font-family:var(--font-head); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-2); margin:0; }
.form9 .ff-el-section-break p{ display:none; }

/* El contenedor del tema no limita ancho ni añade padding */
body.v9 #content, body.v9 .site-main, body.v9 .page-content, body.v9 .entry-content, body.v9 .elementor{ max-width:none!important; width:auto!important; margin:0!important; padding:0!important; }
/* Botones nativos de Elementor con las clases del sistema (color literal, no el verde global) */
.v9 .elementor-button.btn--primary, .v9 a.btn--primary{ background:#0E1116!important; color:#fff!important; }
.v9 .elementor-button.btn--ghost, .v9 a.btn--ghost{ background:#fff!important; color:#0E1116!important; }
.v9 .elementor-button.btn--onDark{ background:#16C5D6!important; color:#04303A!important; }
/* .wrap por si se usa como clase (respiro lateral) */
.v9 .wrap{ max-width:1180px!important; margin-inline:auto!important; width:100%!important; padding-inline:clamp(1.1rem,4vw,2.2rem)!important; box-sizing:border-box; }
/* Tarjetas de igual altura en columnas flex de Elementor */
.v9 .eco9__c, .v9 .aifn9__c, .v9 .metrics__c, .v9 .seg9__c{ height:100%; }
/* Overlay de Elementor detrás del contenido */
.v9 .elementor-background-overlay{ z-index:0!important; }

/* ============================================================
   Estilos para BLOQUES NATIVOS de Elementor (v9 editable)
   ============================================================ */
/* Paneles "media" como Icon Box nativo (tarjeta con sombra dura) */
.v9 .mediabox{ border:1.6px solid var(--ink); border-radius:16px; box-shadow:7px 8px 0 var(--ink); background:#fff; padding:2.6rem 1.5rem; text-align:center; height:100%; display:flex; flex-direction:column; justify-content:center; }
.v9 .mediabox--dark{ background:#0E1626; }
.v9 .mediabox--dark .elementor-icon-box-title, .v9 .mediabox--dark .elementor-icon-box-title *{ color:#fff!important; }
.v9 .mediabox .elementor-icon-box-icon{ margin-bottom:1rem; }
.v9 .mediabox .elementor-icon{ width:66px; height:66px; border-radius:16px; background:var(--a); border:1.6px solid var(--ink); display:inline-grid; place-content:center; color:var(--a-ink); }
.v9 .mediabox .elementor-icon svg, .v9 .mediabox .elementor-icon i{ width:32px; height:32px; font-size:30px; color:var(--a-ink); }

/* FAQ con el widget Acordeón NATIVO de Elementor Free */
.v9 .faq .elementor-accordion .elementor-accordion-item{ border:1.6px solid var(--ink); border-radius:14px; box-shadow:3px 4px 0 var(--ink); margin-bottom:.8rem; overflow:hidden; background:#fff; }
.v9 .faq .elementor-accordion .elementor-tab-title{ font-family:var(--font-head); font-weight:700; color:var(--ink); padding:1.1rem 1.3rem; border:0!important; }
.v9 .faq .elementor-accordion .elementor-tab-title.elementor-active{ color:var(--ink); }
.v9 .faq .elementor-accordion .elementor-tab-content{ color:var(--ink-2); border:0!important; padding:0 1.3rem 1.2rem; }
.v9 .faq .elementor-accordion .elementor-accordion-icon{ color:var(--a-2); }

/* Icon List nativo: chips (inline) y viñetas */
.v9 .chips-inline .elementor-icon-list-items{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.v9 .chips-inline .elementor-icon-list-item{ border:1.6px solid var(--ink); border-radius:100px; padding:.5rem 1rem; }
.v9 .chips-inline .elementor-icon-list-text{ font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--ink); }
.v9 .canales .elementor-icon-list-item{ font-family:var(--font-head); font-weight:700; color:var(--ink); }
.v9 .canales .elementor-icon-list-text{ font-size:1.02rem; }