:root{--bg:#070E1E;--bg-2:#0B1630;--card:#0F1F42;--text:#E7F1FF;--muted:#9AB6E6;--primary:#2D6BFF;--primary-2:#00D0FF;--ring:0 0 0 3px rgba(45,107,255,.25)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
img{max-width:100%;display:block} a{text-decoration:none;color:var(--text)} .container{max-width:1180px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:100;background:rgba(7,14,30,.8);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0} .logo{display:flex;align-items:center;gap:10px} .logo img{height:28px}
.nav{display:flex;gap:18px;align-items:center} .nav a{font-size:14px;color:#d8e6ff} .nav .btn{padding:10px 14px}
.burger{display:none;background:none;border:none;padding:8px;cursor:pointer} .burger span{display:block;width:24px;height:2px;background:#cfe3ff;margin:5px 0;border-radius:2px}
@media (max-width:900px){.nav{display:none;position:absolute;top:56px;left:0;right:0;background:#0b1630;padding:12px;border-bottom:1px solid rgba(255,255,255,.08)} .nav.open{display:flex;flex-direction:column} .burger{display:block}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#03122e;font-weight:700;border:none;cursor:pointer;box-shadow:0 10px 30px rgba(0,208,255,.2)} .btn:active{transform:translateY(1px)}
.badge{display:inline-flex;gap:8px;align-items:center;background:#06122c;border:1px solid rgba(255,255,255,.08);color:#8ecbff;padding:6px 10px;border-radius:999px;font-size:12px}
.hero{padding:64px 0;background:radial-gradient(60% 80% at 20% 0%, rgba(0,208,255,.12), transparent 60%),radial-gradient(80% 80% at 90% 10%, rgba(45,107,255,.12), transparent 70%)}
h1{font-size:clamp(28px,4vw,46px);line-height:1.05;margin:10px 0 8px} .lead{color:var(--muted);font-size:clamp(14px,2.3vw,18px);max-width:62ch}
.grid{display:grid;gap:22px} .hero-grid{grid-template-columns:1fr} @media (min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center} @media (max-width:600px){.tags{justify-content:center}}
.tag{display:inline-block;padding:6px 10px;background:#071433;border:1px solid rgba(255,255,255,.06);border-radius:999px;color:#8ecbff;font-size:12px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(2,8,27,.4)}
.section{padding:64px 0} .title{font-size:clamp(22px,3vw,34px);margin:0 0 8px}
.cards{display:grid;grid-template-columns:1fr;gap:16px} @media (min-width:860px){.cards{grid-template-columns:repeat(3,1fr)}} .small{font-size:13px;color:var(--muted)}
.domain{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap} .domain input{flex:1;min-width:220px;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#06122c;color:#cfe3ff;outline:none} .domain input:focus{box-shadow:var(--ring)} .domain .result{width:100%;margin-top:8px;font-size:14px}
.pricing{display:grid;grid-template-columns:1fr;gap:18px} @media (min-width:900px){.pricing{grid-template-columns:repeat(3,1fr)}} .price-card{background:linear-gradient(180deg,#0f2044,#0b1733);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:22px} .price{font-size:clamp(28px,4vw,40px);margin:8px 0} ul{padding-left:18px} .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.table{width:100%;border-collapse:collapse;border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden} .table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left} .table th{background:#0a1836} .table tr:hover td{background:rgba(255,255,255,.02)}
@media (max-width:720px){.table thead{display:none} .table,.table tbody,.table tr,.table td{display:block;width:100%} .table tr{margin-bottom:10px;border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden} .table td{border:none;border-bottom:1px solid rgba(255,255,255,.06);position:relative;padding-left:44%} .table td::before{content:attr(data-label);position:absolute;left:10px;top:10px;font-weight:700;color:#8FB7FF} .table td:last-child{border-bottom:none}}
.faq{max-width:900px;margin:0 auto} .faq-item{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;margin-bottom:12px;overflow:hidden} .faq-q{padding:16px 18px;display:flex;justify-content:space-between;cursor:pointer} .faq-a{padding:0 18px 16px;display:none;color:var(--muted)}
.footer{padding:32px 0;border-top:1px solid rgba(255,255,255,.06);background:var(--bg-2);color:var(--muted)} .footer .contact{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between} @media (max-width:640px){.footer .contact{justify-content:center;text-align:center}}
/* v4.2 header adjustments */
.nav{display:none;position:absolute;top:56px;right:16px;left:auto;background:#0b1630;
  padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.nav.open{display:flex;flex-direction:column;gap:12px}
.burger{display:block} /* visible on desktop too */
.header-inner{position:relative}
/* remove header CTA from desktop */
.nav .btn{display:none}

/* v4.3 fixes */
.nav{z-index:9999}
.burger{z-index:10000}
.header-inner{position:relative}

/* v4.4 hamburger overhaul */
.nav{display:none;position:absolute;top:56px;right:16px;left:auto;background:#0b1630;
  padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.45);
  min-width:220px}
.nav a{padding:8px 6px;color:#d8e6ff}
.nav.open, body.nav-open .nav{display:flex;flex-direction:column;gap:10px}
.burger{display:block;background:none;border:none;padding:8px;cursor:pointer;z-index:10001}
.header{z-index:10000}
.header-inner{position:relative}
/* Backdrop */
.h4e-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);z-index:9998}
body.nav-open .h4e-overlay{display:block}

/* v4.6: logo without text */
.logo img{height:28px}
/* v4.6: TLD price pills */
.tld-section{padding-top:8px}
.tld-pills{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.tld-pill{
  background:linear-gradient(180deg,#0e2044,#0b1530);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px 12px;
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(2,8,27,.3);
}
.tld-pill .tld{font-weight:800;color:#8fbeff}
.tld-pill .per{font-size:12px;color:#9AB6E6;margin-top:2px}
@media (max-width:420px){
  .tld-pills{grid-template-columns:repeat(2,1fr)}
}


/* --- H4E adjustments (Aug 2025) --- */
/* Position mobile dropdown to the right under the burger */
@media (max-width:900px){
  .header-inner{ position: relative; }
  .nav{ display:none; position:absolute; top:56px; right:16px; left:auto; width:240px; margin-left:auto; z-index:9999; }
  .contact-mini{ order: 3; margin-left:auto; }
  .burger{ display:block; order: 4; margin-left:12px; }
}
/* Remove page blur when opening the burger overlay */
.h4e-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:none; z-index:9998 }


/* === Responsive fixes for 'Cómo Funciona' grid === */
.how-grid{display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width: 1024px){
  .how-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 640px){
  .how-grid{grid-template-columns:1fr;}
  .how-grid .card{margin:0 auto; width:100%;}
  .how-grid h3{font-size:1.1rem;}
  .how-grid p{font-size:.95rem;}
}

        @media (max-width: 1024px){ .domain-top{grid-template-columns:repeat(2,minmax(0,1fr));} }
        @media (max-width: 640px){ .domain-top{grid-template-columns:1fr;} }
        

/* ===== Fixes: 'Cómo Funciona' completamente responsive ===== */
.how-grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;justify-items:stretch}
.how-grid .card{width:100%;height:auto;display:block}
@media (max-width: 1024px){
  .how-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 700px){
  .how-grid{grid-template-columns:1fr;}
  .how-grid .card{max-width:100%;margin:0;}
}

#server-map .container{max-width:1100px;margin:0 auto}

/* Force responsive stacking for how-grid */
.how-grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
@media (max-width: 1024px){
  .how-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 700px){
  .how-grid{grid-template-columns:1fr;}
}