:root{
  --navy:#0d1b4c; --ink:#0f172a; --mut:#475569; --bg:#f4f6fb;
  --card:#ffffff; --line:#e2e8f0; --acc:#2563eb; --acc2:#38bdf8;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px}
h1{font-size:2.6rem;line-height:1.15;margin:.4em 0}
h2{font-size:1.9rem;margin:0 0 .3em}
section{padding:64px 0}
.alt{background:var(--bg)}
.sub{color:var(--mut);margin-top:0}
/* nav */
.nav{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{color:#fff;font-weight:800;font-size:1.3rem;text-decoration:none;letter-spacing:.5px}
.nav nav a{color:#dbe4ff;text-decoration:none;margin-left:18px;font-size:.95rem}
.nav nav a:hover{color:#fff}
/* hero estilo GoDaddy Airo: morado noche con brillos violeta */
.hero{color:#fff;padding:88px 0;background:
  radial-gradient(900px 480px at 85% 15%,rgba(139,92,246,.45),transparent 60%),
  radial-gradient(700px 420px at 8% 90%,rgba(56,189,248,.28),transparent 60%),
  radial-gradient(500px 300px at 50% 50%,rgba(109,40,217,.25),transparent 65%),
  linear-gradient(160deg,#12082b 0%,#1b0f3a 45%,#0d1b4c 100%)}
.hero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center}
.hero-logo{width:100%;max-width:330px;justify-self:center;filter:drop-shadow(0 0 45px rgba(139,92,246,.55));animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:760px){.hero-in{grid-template-columns:1fr}.hero-logo{max-width:220px}}
.nav{background:#150a33}
footer{background:#150a33}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px;width:34px;object-fit:contain}
.kicker{color:var(--acc2);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.8rem}
.lede{font-size:1.15rem;color:#dbe4ff;max-width:640px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 10px}
.micro{color:#9fb0d0;font-size:.85rem}
.btn{display:inline-block;background:var(--acc);color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:700;border:0;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;border:2px solid var(--acc);color:var(--acc)}
.hero .btn.ghost{color:#fff;border-color:#fff}
.btn-sm{padding:8px 16px}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.card h3{margin-top:0}
.card ul{padding-left:20px;color:var(--mut)}
.alt .card{box-shadow:0 2px 10px rgba(13,27,76,.06)}
.price.hot{border:2px solid var(--acc)}
.perp{margin-top:22px;background:#e8f0fe;border-left:4px solid var(--acc);padding:14px 18px;border-radius:0 8px 8px 0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chips span{background:var(--navy);color:#fff;padding:8px 16px;border-radius:999px;font-size:.9rem}
.dl-note{margin-top:18px;background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:12px 16px;font-size:.9rem;color:#57534e}
/* faq */
details{border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:10px 0;background:#fff}
summary{font-weight:700;cursor:pointer}
/* form */
form{display:grid;gap:12px;margin-top:18px}
input,textarea{padding:12px;border:1px solid var(--line);border-radius:8px;font:inherit}
/* footer */
footer{background:var(--navy);color:#9fb0d0;padding:22px 0;font-size:.9rem}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.foot a{color:#dbe4ff}
@media(max-width:640px){h1{font-size:1.9rem}.nav nav a:not(.btn){display:none}section{padding:44px 0}}
/* ===== movimiento / aparicion ===== */
html{scroll-behavior:smooth}
.hero{background-size:200% 200%;animation:heroPan 14s ease-in-out infinite alternate}
@keyframes heroPan{from{background-position:0% 0%}to{background-position:100% 100%}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero{animation:none}html{scroll-behavior:auto}}
.card{transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(13,27,76,.14)}
.btn{transition:transform .15s ease,filter .15s ease}
.btn:hover{transform:translateY(-2px)}
.chips span{transition:transform .2s ease}
.chips span:hover{transform:scale(1.07)}