/* Grmnrt Hosting — web pública. Paleta Arix, la misma del panel. */
:root{
  --bg:#0C0D21; --bg2:#101129; --card:#1A1A2F; --card2:#22223A; --border:#3C3C5D;
  --line:rgba(139,122,232,.14); --grid:rgba(139,122,232,.07);
  --primary:#4D35EB; --primary-h:#5c46ef; --soft:#8B7AE8; --lilac:#c9c1ff;
  --text:#D5D5DB; --muted:#8282A4; --sub:#b4b4c6; --ok:#4ade80; --bad:#f87171;
  --r:10px; --r-in:7px;
  --font:Rubik, ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark; scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--soft)}
img{max-width:100%; display:block}
h1,h2,h3,h4{color:#fff; line-height:1.15; letter-spacing:-.02em; margin:0}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.i{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--primary); color:#fff; text-decoration:none; font-weight:500; font-size:.97rem; padding:12px 22px; border-radius:var(--r-in); border:1px solid transparent; box-shadow:0 8px 24px -10px rgba(77,53,235,.8); transition:background .15s, border-color .15s, transform .15s}
.btn:hover{background:var(--primary-h); transform:translateY(-1px)}
.btn .i{width:18px; height:18px}
.btn.ghost{background:rgba(26,26,47,.6); border-color:var(--border); box-shadow:none}
.btn.ghost:hover{background:var(--card2); border-color:var(--soft)}
.btn.sm{padding:8px 16px; font-size:.9rem}
.btn.lg{padding:14px 26px; font-size:1.02rem}
.btn.white{background:#fff; color:var(--primary)}

/* barra de pagos */
.promo{display:flex; align-items:center; justify-content:center; gap:8px 10px; flex-wrap:wrap; background:linear-gradient(90deg,#2a1f86,var(--primary),#2a1f86); color:#fff; font-size:.88rem; padding:8px 16px; text-align:center}
.promo a{color:#fff; font-weight:600; text-underline-offset:3px}
.promo .i{width:17px; height:17px}

/* cabecera */
.top{position:sticky; top:0; z-index:50; background:rgba(12,13,33,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:16px; height:68px}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; font-size:1.15rem; line-height:1}
.brand small{display:block; color:var(--muted); font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin-top:4px}
.top nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.top nav a:not(.btn){white-space:nowrap; color:var(--muted); text-decoration:none; font-weight:500; font-size:.95rem; padding:8px 12px; border-radius:var(--r-in); transition:color .15s}
.top nav a:not(.btn):hover, .top nav a[aria-current=page]{color:#fff}
.top nav .btn{margin-left:8px}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid var(--border); color:#fff; border-radius:var(--r-in); padding:8px; cursor:pointer}

/* portada */
.hero{position:relative; padding:84px 0 76px; overflow:hidden; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(620px 420px at 78% 32%, rgba(77,53,235,.34), transparent 70%),
    radial-gradient(520px 320px at 8% 0%, rgba(139,122,232,.13), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:linear-gradient(#000 65%, transparent); mask-image:linear-gradient(#000 65%, transparent)}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:9px; background:rgba(77,53,235,.14); border:1px solid rgba(139,122,232,.35); color:var(--lilac); border-radius:999px; padding:6px 14px; font-size:.85rem; font-weight:500; margin-bottom:22px}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.hero h1{font-size:clamp(2.2rem,5vw,3.55rem); font-weight:700; margin-bottom:20px}
.grad{background:linear-gradient(90deg,#fff,#b8acff 45%,var(--soft)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{font-size:1.15rem; color:var(--sub); max-width:56ch; margin:0 0 30px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.checks{display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; padding:0; margin:30px 0 0; font-size:.93rem; color:var(--sub)}
.checks li{display:flex; align-items:center; gap:8px}
.checks .i{width:18px; height:18px; color:var(--ok)}

/* maqueta del panel */
.visual{position:relative}
.mock{background:linear-gradient(180deg,#1d1d36,#15152a); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 120px -30px rgba(77,53,235,.6)}
.mock-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--border); font-size:.85rem; color:var(--muted)}
.mock-bar i{width:11px; height:11px; border-radius:50%; background:#ff5f57}
.mock-bar i:nth-child(2){background:#febc2e}
.mock-bar i:nth-child(3){background:#28c840}
.mock-bar span{margin-left:8px}
.mock-bar b{margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--ok); font-weight:500}
.mock-bar b::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.mock-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 16px 0}
.mock-stats div{background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px}
.mock-stats small{display:block; color:var(--muted); font-size:.75rem}
.mock-stats strong{color:#fff; font-weight:600}
.meter{display:block; height:4px; border-radius:4px; background:var(--card2); margin-top:8px; overflow:hidden}
.meter i{display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--soft))}
.mock-log{margin:14px 16px 16px; background:#0a0b1c; border:1px solid var(--line); border-radius:8px; padding:14px; font:12.5px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; color:#a9a9c4; white-space:pre-wrap; overflow:hidden}
.mock-log .g{color:var(--ok)} .mock-log .w{color:#fbbf24} .mock-log .p{color:var(--soft)}
.caret{display:inline-block; width:8px; height:15px; background:var(--soft); vertical-align:-3px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.float{position:absolute; display:flex; align-items:center; gap:10px; background:rgba(34,34,58,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:.86rem; color:#fff; box-shadow:0 16px 40px -12px rgba(0,0,0,.6); animation:bob 6s ease-in-out infinite}
.float .ic{display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:rgba(77,53,235,.22); color:var(--lilac)}
.float .ic .i{width:17px; height:17px}
.float small{display:block; color:var(--muted); font-size:.74rem; line-height:1.3}
.f1{left:-30px; bottom:36px}
.f2{right:-18px; top:-24px; animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-8px)}}

/* tarjeta de oferta (portadas de servicio) */
.offer{background:linear-gradient(180deg,#1d1d36,#15152a); border:1px solid var(--border); border-radius:14px; padding:30px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 120px -30px rgba(77,53,235,.6)}
.offer .label{color:var(--muted); font-size:.9rem}
.offer .price .amt{font-size:3.2rem}
.offer ul{margin-bottom:24px}
.offer .btn{width:100%}

/* números */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.stats div{background:var(--bg2); padding:22px 16px; text-align:center}
.stats strong{display:block; color:#fff; font-size:1.65rem; font-weight:700; letter-spacing:-.02em}
.stats span{color:var(--muted); font-size:.9rem}

/* secciones */
section{padding:88px 0}
section.alt{background:linear-gradient(180deg,transparent,rgba(26,26,47,.45) 15%,rgba(26,26,47,.45) 85%,transparent)}
.head{text-align:center; max-width:680px; margin:0 auto 48px}
.kicker{display:inline-block; color:var(--soft); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px}
.head h2{font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:700; margin-bottom:12px}
.head p{color:var(--muted); font-size:1.05rem; margin:0}

/* tarjetas */
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.card{position:relative; background:linear-gradient(180deg,var(--card),#17172b); border:1px solid var(--border); border-radius:var(--r); padding:26px; transition:border-color .2s, transform .2s, box-shadow .2s}
a.card{display:flex; flex-direction:column; text-decoration:none; color:inherit}
a.card:hover{border-color:rgba(139,122,232,.7); transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(77,53,235,.6)}
.card h3{font-size:1.15rem; font-weight:600; margin-bottom:8px}
.card p{margin:0; color:var(--muted); font-size:.95rem}
.ico{display:grid; place-items:center; width:46px; height:46px; border-radius:10px; background:rgba(77,53,235,.16); border:1px solid rgba(139,122,232,.28); color:var(--lilac); margin-bottom:18px}
.ico .i{width:22px; height:22px}
.card .foot{margin-top:auto; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.from{color:var(--muted); font-size:.88rem}
.from b{color:#fff; font-size:1.1rem; font-weight:600}
.pill{display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:500; font-size:.88rem; background:var(--card2); border:1px solid var(--border); padding:7px 14px; border-radius:999px; transition:background .2s, border-color .2s}
.pill .i{width:15px; height:15px}
a.card:hover .pill{background:var(--primary); border-color:var(--primary)}
.mini{display:flex; gap:16px; align-items:flex-start; padding:22px}
.mini .ico{margin:0; width:42px; height:42px}
.mini h3{font-size:1.02rem; margin-bottom:4px}
.mini p{font-size:.92rem}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.step{position:absolute; top:22px; right:24px; font-size:2.4rem; font-weight:700; color:rgba(139,122,232,.18); line-height:1}

/* planes */
.cycles{display:flex; justify-content:center; flex-wrap:wrap; gap:4px; width:max-content; max-width:100%; margin:0 auto 44px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:5px}
.cycles button{display:flex; align-items:center; gap:7px; font:inherit; font-size:.92rem; font-weight:500; color:var(--muted); background:none; border:0; border-radius:999px; padding:9px 18px; cursor:pointer; transition:color .15s, background .15s}
.cycles button:hover{color:#fff}
.cycles button[aria-pressed=true]{background:var(--primary); color:#fff}
.cycles em{font-style:normal; font-size:.72rem; font-weight:600; color:var(--ok); background:rgba(74,222,128,.13); padding:2px 7px; border-radius:999px}
.cycles button[aria-pressed=true] em{color:#fff; background:rgba(255,255,255,.2)}
/* flex y no grid: la última fila queda centrada */
.plans{display:flex; flex-wrap:wrap; justify-content:center; gap:18px}
.plan{flex:0 1 270px; position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--card),#17172b); border:1px solid var(--border); border-radius:12px; padding:26px; transition:border-color .2s, transform .2s}
.plan:hover{border-color:rgba(139,122,232,.6); transform:translateY(-3px)}
.plan.rec{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), 0 24px 60px -24px rgba(77,53,235,.8)}
.tag{position:absolute; top:-12px; left:24px; background:var(--primary); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.08em; padding:4px 10px; border-radius:999px}
.plan-h{display:flex; align-items:center; justify-content:space-between; gap:10px}
.plan h3{font-size:1.2rem}
.badge{font-size:.78rem; font-weight:600; color:var(--lilac); background:rgba(77,53,235,.2); border-radius:6px; padding:3px 8px}
.for{color:var(--muted); font-size:.9rem; margin:6px 0 18px; min-height:2.9em}
.price{display:flex; align-items:baseline; gap:4px; color:#fff}
.price .amt{font-size:2.5rem; font-weight:700; letter-spacing:-.03em; line-height:1.1}
.price small{color:var(--muted); font-size:.95rem}
.price:has(.old){flex-wrap:wrap}
.price .old{flex-basis:100%; color:var(--muted); font-size:.95rem; margin-bottom:-6px}
.off{margin-left:4px; vertical-align:middle; font-size:.72rem; font-weight:700; color:var(--bg); background:var(--ok); border-radius:6px; padding:3px 7px}
.bill{color:var(--muted); font-size:.82rem; min-height:1.4em; margin:4px 0 18px}
.plan ul, .offer ul{list-style:none; padding:18px 0 0; margin:0 0 22px; border-top:1px solid var(--border); display:grid; gap:9px; font-size:.92rem}
.plan li, .offer li{display:flex; align-items:center; gap:10px}
.plan li .i, .offer li .i{width:17px; height:17px; color:var(--soft)}
.plan li b, .offer li b{color:#fff; font-weight:600}
.plan .btn{margin-top:auto}
.note{text-align:center; color:var(--muted); font-size:.9rem; margin:28px auto 0; max-width:70ch}

/* cinta de software */
.marquee{overflow:hidden; margin-top:56px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee ul{display:flex; gap:12px; width:max-content; list-style:none; margin:0; padding:0 6px 0 0; animation:slide 40s linear infinite}
.marquee li{background:var(--card); border:1px solid var(--border); border-radius:999px; padding:9px 18px; font-weight:500; white-space:nowrap; color:var(--sub)}
@keyframes slide{to{transform:translateX(-50%)}}

/* tabla */
.table{overflow-x:auto; border:1px solid var(--border); border-radius:12px}
table{width:100%; border-collapse:collapse; min-width:560px; font-size:.95rem}
th,td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--border); color:var(--text)}
tr:last-child td{border-bottom:0}
thead th{background:var(--card2); color:#fff; font-weight:600}
tbody tr:nth-child(odd){background:rgba(26,26,47,.5)}
.us{background:rgba(77,53,235,.13) !important; color:#fff}
td .i{width:18px; height:18px; vertical-align:-4px; margin-right:6px}
.yes{color:var(--ok)} .no{color:var(--bad)}

/* preguntas */
.faq{max-width:800px; margin:0 auto; display:grid; gap:12px}
details{background:var(--card); border:1px solid var(--border); border-radius:var(--r); transition:border-color .2s}
details[open]{border-color:rgba(139,122,232,.55)}
summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding:18px 22px; font-weight:500; color:#fff}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--soft); font-size:1.4rem; line-height:1; transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0; padding:0 22px 20px; color:var(--muted)}

/* llamado final */
.band{position:relative; overflow:hidden; border-radius:16px; padding:60px 32px; text-align:center; border:1px solid rgba(139,122,232,.5);
  background:radial-gradient(520px 220px at 50% 0%, rgba(255,255,255,.18), transparent 70%), linear-gradient(135deg,#2a1f86,var(--primary) 60%,#6b56f0)}
.band h2{font-size:clamp(1.6rem,3.4vw,2.35rem); margin-bottom:12px}
.band p{color:#e4e0ff; max-width:58ch; margin:0 auto 28px}
.band .cta{justify-content:center}
.band .btn.ghost{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35)}

/* dominio: de IP a nombre */
.addr{display:grid; gap:12px}
.addr div{display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:16px 18px; font:500 1.05rem ui-monospace,SFMono-Regular,Consolas,monospace}
.addr .old{color:var(--muted); text-decoration:line-through}
.addr .new{color:#fff; border-color:rgba(139,122,232,.6); box-shadow:0 0 0 3px rgba(77,53,235,.18)}
.addr .i{color:var(--soft)}
.addr .arrow{justify-content:center; background:none; border:0; padding:0}
.addr .arrow .i{transform:rotate(90deg)}

/* pie */
footer{border-top:1px solid var(--line); background:#0a0b1c; padding:64px 0 28px; color:var(--muted); font-size:.93rem}
.fgrid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px}
footer .brand{margin-bottom:16px}
footer h4{font-size:.95rem; font-weight:600; margin-bottom:14px}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:#fff}
footer p{margin:0 0 10px; max-width:38ch}
.fbottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); margin-top:48px; padding-top:24px; font-size:.85rem}

/* aparición al hacer scroll */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1; transform:none; transition:none}
  .float, .marquee ul, .caret{animation:none}
}

@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr; gap:56px}
  .visual{max-width:580px; width:100%; margin:0 auto}
  .grid.g3{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
/* 1040 y no menos: con Hosting Web, entre 880 y 1000 px el menú se parte en dos líneas */
@media (max-width:1040px){
  .menu-btn{display:inline-flex}
  .top nav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; background:#0f1027; border-bottom:1px solid var(--border); padding:12px 20px 20px}
  .nav-open .top nav{display:flex}
  .top nav a:not(.btn){padding:12px}
  .top nav .btn{margin:8px 0 0}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .plan{flex-basis:100%}
  .hero{padding:52px 0 56px}
  section{padding:64px 0}
  .stats{grid-template-columns:1fr 1fr}
  .grid.g3, .duo{grid-template-columns:1fr}
  .f1{left:-6px; bottom:-22px}
  .f2{right:-6px; top:-26px}
  .mock-stats{grid-template-columns:1fr 1fr}
  .mock-stats div:last-child{display:none}
  .mock-log{font-size:11.5px}
  .band{padding:44px 20px}
  .cycles{border-radius:14px}
  .cycles button{padding:8px 12px}
  /* la tabla entra entera: el scroll horizontal fallaba en el navegador de Instagram */
  table{min-width:0; font-size:.82rem}
  th,td{padding:10px 7px}
  td .i{display:block; margin:0 0 2px}
}