:root{
  --bg:#F4F6F7;--surface:#fff;--ink:#0C2233;--muted:#4C6272;--line:#D6DEE3;
  --navy:#0C2233;--navy2:#16384F;--accent:#F2B632;--accent-ink:#0C2233;--link:#16508A;
  --head:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--body:"Figtree","Segoe UI",system-ui,sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#09151E;--surface:#10263A;--ink:#EAF0F3;--muted:#A3B6C4;--line:#23405A;--link:#8DC0F0;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#09151E;--surface:#10263A;--ink:#EAF0F3;--muted:#A3B6C4;--line:#23405A;--link:#8DC0F0;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:#081923}
h1,h2,h3{font-family:var(--head);line-height:1.1;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.nav :focus-visible,.hero :focus-visible,.offer .r :focus-visible,.final :focus-visible,footer :focus-visible{outline-color:var(--accent)}
[hidden]{display:none!important}
.skip-link{position:fixed;top:10px;left:10px;z-index:100;padding:12px 18px;background:var(--surface);color:var(--ink);transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* navbar */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;background:#081923;border-bottom:1px solid rgba(255,255,255,.18);box-shadow:0 4px 18px rgba(0,0,0,.12);color:#fff}
.nav .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{font:700 20px var(--head);text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:500;font-size:15px;opacity:1}
.nav ul a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.menu-toggle svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu-toggle .close-icon{display:none}
.menu-toggle[aria-expanded="true"] .menu-icon{display:none}
.menu-toggle[aria-expanded="true"] .close-icon{display:block}
.menu-toggle:hover{background:rgba(255,255,255,.08)}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font:600 16px var(--body);padding:14px 24px;border-radius:10px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(242,182,50,.35)}
.btn.sm{padding:10px 18px;font-size:15px}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn.ghost:hover{box-shadow:none;border-color:#fff}

/* hero */
.hero{background:radial-gradient(1100px 600px at 85% 20%,#1F4F6E 0%,transparent 60%),linear-gradient(160deg,#0C2233,#0A1B29);color:#fff;padding:150px 0 90px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:700}
.hero p.lead{font-size:19px;color:#C9D8E2;margin:22px 0 32px;max-width:520px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.proof{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);font-size:15px;color:#C9D8E2}
.proof b{color:#fff;font-weight:600}
.hero svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.flow{stroke-dasharray:6 8;animation:dash 2.4s linear 2}
@keyframes dash{to{stroke-dashoffset:-56}}

/* sections */
section{padding:92px 0}
.intro{max-width:680px;margin-bottom:44px}
.intro h2{font-size:clamp(30px,4vw,44px)}
.intro p{color:var(--muted);margin-top:14px;font-size:18px}
.alt{background:var(--surface);border-block:1px solid var(--line)}

/* problema */
.pain{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain div{border-left:4px solid var(--accent);padding:4px 0 4px 20px}
.pain h3{font-size:21px;margin-bottom:8px}
.pain p{color:var(--muted);font-size:16px}

/* sectores */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tab{font:600 16px var(--body);padding:12px 20px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.tab:hover{border-color:var(--navy2)}
.tab[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
:root[data-theme="dark"] .tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}}
.panel{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:36px}
.panel + .panel{margin-top:24px}
.tabs:not([hidden]) ~ .panel{margin-top:0}
.panel h3{font-size:28px;margin-bottom:12px}
.panel .story{color:var(--muted)}
.panel ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.panel li{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.panel li b{display:block;font-family:var(--head);font-size:18px;margin-bottom:2px}
.panel li span{color:var(--muted);font-size:15.5px}
.note{font-size:14px;color:var(--muted);margin-top:16px}
.intro .note{font-size:14px;margin-top:12px}
.sector-contact {
  margin-top: 24px;
  color: var(--ink);
}

.sector-contact a {
  color: var(--link);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* guía */
.guide{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.guide .intro{margin-bottom:0}
.guide .facts{display:grid;gap:18px}
.fact{display:flex;gap:16px;align-items:flex-start}
.fact i{flex:none;width:44px;height:44px;border-radius:12px;background:var(--navy);display:grid;place-items:center}
.fact i svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fact h3{font-size:19px;margin-bottom:2px}
.fact p{color:var(--muted);font-size:16px}

/* plan */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .step {
    background: #09151E;
    border-color: #36546B;
    box-shadow: none;
  }

  :root:not([data-theme="light"]) .step::before {
    background: var(--accent);
    color: var(--accent-ink);
  }
}

:root[data-theme="dark"] .step {
  background: #09151E;
  border-color: #36546B;
  box-shadow: none;
}

:root[data-theme="dark"] .step::before {
  background: var(--accent);
  color: var(--accent-ink);
}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--accent);font:700 18px var(--head);margin-bottom:18px}
.step h3{font-size:22px;margin-bottom:8px}
.step p{color:var(--muted);font-size:16px}

/* oferta */
.offer{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.offer .l{padding:44px;background:var(--surface)}
.offer .r{padding:44px;background:var(--navy);color:#fff}
.offer h2{font-size:clamp(28px,3.6vw,38px);margin-bottom:14px}
.offer .l p{color:var(--muted)}
.offer ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.offer li{padding-left:30px;position:relative}
.offer li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:9px;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)}
.offer .r h3{font-size:24px;margin-bottom:12px}
.offer .r p{color:#C9D8E2;margin-bottom:26px}
.offer .r .btn{width:100%;text-align:center}
.offer .r small{display:block;margin-top:14px;color:#9FB4C3;font-size:14px;text-align:center}

/* preguntas frecuentes */
.faq {
  max-width: 880px;
}

.faq details {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
}

.faq summary::marker {
  color: var(--ink);
}

.faq details p {
  margin-top: 14px;
  color: var(--muted);
}

/* cierre */
.final{background:var(--navy);color:#fff;text-align:center;padding:96px 0}
.final h2{font-size:clamp(30px,4.2vw,48px);max-width:700px;margin:0 auto 16px}
.final p{color:#C9D8E2;max-width:560px;margin:0 auto 32px}
.final .cta-row{justify-content:center}
.final .contact-email{margin:28px auto 0;font-size:15px}
.contact-email a{text-underline-offset:3px;overflow-wrap:anywhere}
footer{background:#08161F;color:#9FB4C3;font-size:14px;padding:30px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}

@media (max-width:900px){
  .nav .wrap{gap:8px}
  .nav .brand{white-space:nowrap}
  .nav .btn.sm{order:2}
  .menu-toggle{display:inline-flex;order:3}
  .nav nav{order:4}
  .nav ul{flex-direction:column;gap:4px}
  .nav ul a{display:block;padding:12px 16px;font-size:16px;opacity:1;border-radius:8px}
  .nav ul a:hover{background:rgba(255,255,255,.08)}
  .nav.menu-ready nav {
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    padding: 12px;
    max-height: calc(100dvh - 84px - env(safe-area-inset-top,0px));
    overflow-y: auto;
    background: var(--navy);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 16px 32px rgba(0,0,0,.25);
  }
  .nav:not(.menu-ready) .wrap{height:auto;min-height:68px;flex-wrap:wrap;padding-block:12px}
  .nav:not(.menu-ready) nav{width:100%}
  .nav:not(.menu-ready) ul{flex-direction:row;flex-wrap:wrap}
  .hero{padding:120px 0 64px}
  .hero .wrap,.guide,.offer,.panel{grid-template-columns:1fr}
  .pain,.steps{grid-template-columns:1fr}
  section{padding:68px 0}
  .offer .l,.offer .r{padding:30px 24px}
  .panel{padding:26px 20px}
}
@media (max-width:600px){
  section{padding:48px 0}
  .hero{padding-bottom:48px}
  .hero .wrap{gap:28px}
  .hero svg{max-width:280px;margin-inline:auto}
  .intro{margin-bottom:28px}
  .proof{margin-top:28px;padding-top:20px}
  .guide{gap:32px}
  .panel{padding:24px 20px;gap:24px}
  .panel ul{gap:0}
  .panel li{padding:16px 0;border:0;border-radius:0;background:transparent}
  .panel li:first-child{padding-top:0}
  .panel li:last-child{padding-bottom:0}
  .panel li + li{border-top:1px solid var(--line)}
  .final{padding:56px 0}
}
@media (max-width:480px){
  .nav .wrap{padding-inline:16px}
  .nav .brand{font-size:18px}
  .nav .btn.sm{padding:10px 14px;white-space:nowrap;flex-shrink:0}
}
@media (prefers-reduced-motion:reduce){.flow{animation:none}html{scroll-behavior:auto}.btn{transition:none}}