:root{--bg:#f6f9fc;--bg2:#eaf3fa;--card:#fff;--ink:#0d1b2a;--mu:#53657a;--line:#d8e3ec;--brand:#0f5f94;--brand2:#0a4a75;--sky:#29a8e0;--coral:#ff6b4a;--shadow:0 18px 44px rgba(13,40,70,.14);--nav:rgba(246,249,252,.86)}
html[data-t=dark]{--bg:#0a141d;--bg2:#0e1c29;--card:#111f2c;--ink:#e8f1f8;--mu:#9db1c4;--line:#223548;--brand:#4cb4ec;--brand2:#8fd3f6;--sky:#4cb4ec;--coral:#ff8a6e;--shadow:0 18px 44px rgba(0,0,0,.45);--nav:rgba(10,20,29,.86)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:Outfit,Inter,sans-serif;margin:0;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
.material-symbols-outlined{font-size:22px;vertical-align:middle;flex:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.3rem}
.sp{flex:1}
.top{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:.8rem;min-height:70px}
.logo{display:flex;align-items:center;gap:.7rem;flex:none}
.logo img{border-radius:11px}
.logo span{display:grid;line-height:1.1}
.logo b{font-family:Outfit,sans-serif;font-size:1.12rem;white-space:nowrap}
.logo small{color:var(--mu);font-size:.76rem;letter-spacing:.04em}
#menu{display:flex;gap:1.5rem;margin-left:1.6rem}
#menu a{font-weight:600;font-size:.95rem;color:var(--mu);transition:color .15s}
#menu a:hover{color:var(--brand)}
.ico{width:42px;height:42px;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--card);border-radius:12px;color:var(--ink);cursor:pointer;transition:.15s}
.ico:hover{border-color:var(--brand);color:var(--brand)}
.burger{display:none}
.menu-tema{display:none;align-items:center;gap:.5rem;padding:.8rem 0;border:0;background:none;color:var(--mu);font:inherit;font-weight:600;cursor:pointer;text-align:left}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.5rem 1.15rem;border-radius:12px;font-weight:700;border:1.5px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;white-space:nowrap}
.btn.solid{background:var(--brand);color:#fff}
html[data-t=dark] .btn.solid{color:#06202f}
.btn.solid:hover{background:var(--brand2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,95,148,.32)}
html[data-t=dark] .btn.solid:hover{background:#8fd3f6}
.btn.ghost{border-color:var(--line);background:var(--card);color:var(--ink)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn.big{min-height:54px;padding:.7rem 1.5rem;font-size:1.02rem;border-radius:14px}
.hero{position:relative;overflow:hidden;isolation:isolate;padding:3.6rem 0 4rem;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.lanes{position:absolute;inset:0;z-index:-1;background:repeating-radial-gradient(ellipse 120% 90% at 105% 115%,transparent 0 46px,rgba(15,95,148,.07) 46px 48px);animation:lane 24s linear infinite alternate}
html[data-t=dark] .lanes{background:repeating-radial-gradient(ellipse 120% 90% at 105% 115%,transparent 0 46px,rgba(76,180,236,.09) 46px 48px)}
@keyframes lane{to{background-position:30px -24px}}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero-in>*{min-width:0}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:.85rem;color:var(--mu);margin-bottom:1.2rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,74,.55)}70%{box-shadow:0 0 0 9px rgba(255,107,74,0)}100%{box-shadow:0 0 0 0 rgba(255,107,74,0)}}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.7rem);font-weight:800}
.mov{position:relative;display:inline-block;color:var(--brand)}
.mov svg{position:absolute;left:0;right:0;bottom:-.22em;width:100%;height:.3em;overflow:visible}
.mov path,.chip svg path{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:ecg 4.5s ease-in-out infinite}
.chip svg path{stroke-width:2.4;stroke-dasharray:160;stroke-dashoffset:160}
@keyframes ecg{0%{stroke-dashoffset:420}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}
.chip svg path{animation-name:ecg2}
@keyframes ecg2{0%{stroke-dashoffset:160}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-160}}
.lead{font-size:1.18rem;color:var(--mu);max-width:34rem;margin:1.6rem 0 1.7rem}
.acts{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem}
.ticks{display:flex;gap:.6rem 1.4rem;flex-wrap:wrap;color:var(--mu);font-weight:600;font-size:.92rem}
.ticks li{display:inline-flex;gap:.4rem;align-items:center}
.ticks .material-symbols-outlined{color:var(--brand);font-size:20px}
.hero-pic{position:relative;max-width:460px;margin-left:auto;width:100%}
.frame{border-radius:28px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;background:var(--bg2);transform:rotate(1.5deg);transition:transform .5s}
.hero-pic:hover .frame{transform:rotate(0)}
.frame img{width:100%;height:100%;object-fit:cover}
.chip{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);animation:hov 5.5s ease-in-out infinite}
.chip .material-symbols-outlined{color:var(--coral)}
.chip b{display:block;font-size:.9rem;line-height:1.2}
.chip small{color:var(--mu);font-size:.78rem}
.chip svg{display:block;width:96px;height:18px;margin-top:2px;overflow:visible}
.c1{left:-1.6rem;top:2.2rem}
.c2{right:-.8rem;bottom:2.4rem;animation-delay:-2.6s}
.c2 .material-symbols-outlined{color:var(--brand)}
@keyframes hov{50%{translate:0 -9px}}
.sec{padding:5rem 0;position:relative}
.sec.alt{background:var(--bg2)}
.kick{display:block;font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:.7rem}
.sec h2{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:1rem;font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center}
.two>*{min-width:0}
.two p{color:var(--mu);margin-bottom:1rem;font-size:1.05rem}
.photo{position:relative;border-radius:26px;overflow:visible}
.photo img{border-radius:26px;box-shadow:var(--shadow);width:100%;height:auto;aspect-ratio:3/2.4;object-fit:cover}
.photo:before{content:"";position:absolute;inset:auto auto -16px -16px;width:62%;height:62%;border-radius:26px;background:repeating-linear-gradient(135deg,var(--brand) 0 2px,transparent 2px 12px);opacity:.25;z-index:-1}
.badge{position:absolute;left:1rem;bottom:1rem;display:inline-flex;gap:.4rem;align-items:center;background:var(--card);padding:.45rem .85rem;border-radius:99px;font-weight:700;font-size:.85rem;box-shadow:var(--shadow)}
.badge .material-symbols-outlined{color:var(--brand)}
.check{display:grid;gap:.6rem;margin-top:1.2rem}
.check li{display:flex;gap:.6rem;align-items:flex-start;font-weight:600}
.check .material-symbols-outlined{color:var(--brand)}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.5rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--brand)}
.card .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:1rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--sky));transition:transform .3s}
.card:hover .ic{transform:rotate(-8deg) scale(1.08)}
.card .ic .material-symbols-outlined{font-size:28px}
.a2 .ic{background:linear-gradient(135deg,#ff6b4a,#ff9d6e)}
.a3 .ic{background:linear-gradient(135deg,#1c9c9a,#4cc9c0)}
.a4 .ic{background:linear-gradient(135deg,#7a5af8,#a78bfa)}
.a5 .ic{background:linear-gradient(135deg,#e8a21a,#f6c64f)}
.a6 .ic{background:linear-gradient(135deg,#d6457f,#f27aa5)}
.card h3{font-size:1.22rem;margin-bottom:.4rem}
.card p{color:var(--mu);font-size:.97rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.2rem;counter-reset:s}
.step{position:relative}
.step b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;font-family:Outfit,sans-serif;font-size:1.2rem;margin-bottom:1rem;animation:npulse 3.2s ease-in-out infinite}
html[data-t=dark] .step b{color:#06202f}
.step:nth-child(2) b{animation-delay:-.8s}.step:nth-child(3) b{animation-delay:-1.6s}.step:nth-child(4) b{animation-delay:-2.4s}
@keyframes npulse{0%,100%{box-shadow:0 0 0 0 rgba(41,168,224,.45)}50%{box-shadow:0 0 0 10px rgba(41,168,224,0)}}
.step:not(:last-child):after{content:"";position:absolute;top:23px;left:58px;right:-.6rem;height:2px;background:repeating-linear-gradient(90deg,var(--brand) 0 6px,transparent 6px 12px);background-size:24px 2px;opacity:.5;animation:dash 1.2s linear infinite}
@keyframes dash{to{background-position:24px 0}}
.step h3{font-size:1.15rem;margin-bottom:.35rem}
.step p{color:var(--mu);font-size:.96rem}
.contact{background:#0b1a28;color:#e8f1f8;overflow:hidden;isolation:isolate}
.contact .kick{color:#7fd0f5}
.contact p{color:#a9bdd0;font-size:1.08rem}
.orb{position:absolute;right:-120px;top:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(41,168,224,.4),transparent 68%);z-index:-1;animation:glow 10s ease-in-out infinite alternate}
@keyframes glow{to{transform:translate(-40px,30px) scale(1.12)}}
.cta{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.cta>*{min-width:0}
.cta-b{display:grid;gap:.8rem}
.contact .btn.solid{background:#29a8e0;color:#06202f}
.contact .btn.solid:hover{background:#6cc4ee}
.contact .btn.ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.contact .btn.ghost:hover{border-color:#7fd0f5;color:#7fd0f5}
.foot{background:#08121d;color:#9fb3c6;padding:1.6rem 0;font-size:.92rem}
.foot .wrap{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
.foot a:hover{color:#7fd0f5}
.credit{display:inline-flex;gap:.35rem;align-items:center}
html.rr .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
html.rr .rv.vis{opacity:1;transform:none}
@media(max-width:960px){
  .hero-in,.two,.cta{grid-template-columns:1fr}
  .hero{padding:2.2rem 0 3rem}
  .hero-pic{margin:1rem auto 0;max-width:420px}
  .areas{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .step:after{display:none}
  .c1{left:-.4rem}
  #menu{display:none}
  #menu.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;margin:0;background:var(--card);border-bottom:1px solid var(--line);padding:.6rem 1.3rem}
  #menu.open a{padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
  #menu.open .menu-tema{display:flex}
  .burger{display:inline-grid}
  .sec{padding:3.6rem 0}
}
@media(max-width:640px){
  .hide-s{display:none}
  .bar{gap:.5rem;min-height:62px}
  #menu.open{top:62px}
  .logo small{display:none}
  .logo img{width:34px;height:34px}
  .logo b{font-size:1rem}
  .areas,.steps{grid-template-columns:1fr}
  .acts .btn{width:100%}
  .c1{top:1rem}
  .c2{right:.2rem;bottom:1rem}
  .contact .cta-b .btn{white-space:normal;text-align:center}
}
@media(max-width:420px){
  #tema{display:none}
  .bar .btn.solid .lbl{display:none}
  .bar .btn.solid{width:44px;padding:0}
}
@media(max-width:360px){
  .logo b{font-size:.86rem}
  .logo img{width:30px;height:30px}
  .bar .btn{padding:.5rem .8rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.rr .rv{opacity:1;transform:none}
  .mov path,.chip svg path{stroke-dashoffset:0}
}
.aviso{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1rem + env(safe-area-inset-bottom));width:min(600px,calc(100vw - 2rem));display:flex;gap:.8rem;align-items:center;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;box-shadow:var(--shadow);z-index:80;font-size:.9rem}
.aviso p{flex:1}
.aviso a{color:var(--brand);text-decoration:underline}
.aviso>.material-symbols-outlined{color:var(--brand)}
@media(max-width:560px){.aviso{flex-wrap:wrap}.aviso .btn{width:100%}}
button{font:inherit;color:inherit;background:none}
:root{color-scheme:light}
html[data-t=dark]{color-scheme:dark}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:10px}
.saltar{position:absolute;left:1rem;top:-60px;z-index:100;background:var(--brand);color:#fff;padding:.6rem 1rem;border-radius:10px}
.saltar:focus{top:.6rem}