*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#06142d;--panel:rgba(255,255,255,.08);--panel-strong:rgba(255,255,255,.12);
  --text:#eef8ff;--muted:#a9c4d8;--blue:#003b8f;--cyan:#00a8f0;--green:#75c900;--orange:#ff9200;
  --white:#fff;--shadow:0 28px 70px rgba(0,0,0,.28)
}
html[data-theme="light"]{
  --bg:#eef9ff;--panel:rgba(255,255,255,.86);--panel-strong:rgba(255,255,255,.95);
  --text:#092543;--muted:#55708a;--shadow:0 18px 46px rgba(0,91,150,.11)
}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 10% 5%,rgba(0,168,240,.30),transparent 30%),radial-gradient(circle at 85% 10%,rgba(117,201,0,.16),transparent 25%),linear-gradient(135deg,var(--bg),#09264d 55%,var(--bg));color:var(--text);min-height:100vh;overflow-x:hidden}
html[data-theme="light"] body{background:radial-gradient(circle at 10% 5%,rgba(0,168,240,.24),transparent 30%),radial-gradient(circle at 85% 10%,rgba(117,201,0,.18),transparent 25%),linear-gradient(135deg,#f8fdff,#eaf8ff 55%,#f7fdff)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,168,240,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,168,240,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%)}
.bg-orb{position:fixed;border-radius:50%;filter:blur(8px);pointer-events:none;opacity:.55}.orb-one{width:360px;height:360px;right:-140px;top:120px;background:rgba(0,168,240,.22)}.orb-two{width:280px;height:280px;left:-120px;bottom:20%;background:rgba(117,201,0,.14)}
.topbar{position:sticky;top:16px;z-index:9999;max-width:1180px;margin:18px auto 0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:26px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow);backdrop-filter:blur(16px)}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.82);border-color:rgba(0,168,240,.18)}
.brand img{width:205px;display:block}.nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}.nav-links a{color:var(--text);text-decoration:none;font-size:14px;font-weight:700;padding:9px 11px;border-radius:999px;transition:.2s}.nav-links a:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.top-actions{display:flex;gap:10px;align-items:center}.theme-toggle{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:var(--text);cursor:pointer;font-size:18px}.nav-cta{white-space:nowrap;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));padding:12px 16px;border-radius:999px;font-weight:800;box-shadow:0 14px 28px rgba(0,168,240,.20)}
main{max-width:1180px;margin:0 auto;padding:30px 18px 42px}
.hero{min-height:760px;display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;padding:46px;border-radius:38px;margin-top:22px;background:radial-gradient(circle at 90% 0,rgba(0,168,240,.20),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow);position:relative;overflow:hidden}
html[data-theme="light"] .hero{background:radial-gradient(circle at 90% 0,rgba(0,168,240,.20),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.94),rgba(232,248,255,.94));border-color:rgba(0,168,240,.14)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 20%,rgba(255,255,255,.09) 20% 21%,transparent 21% 100%),linear-gradient(145deg,transparent 0 62%,rgba(0,168,240,.13) 62% 63%,transparent 63% 100%);pointer-events:none}
.hero>*{position:relative;z-index:1}.eyebrow{display:inline-block;margin-bottom:18px;padding:9px 15px;border-radius:999px;background:rgba(0,168,240,.13);border:1px solid rgba(0,168,240,.25);color:#64d7ff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.8px}
h1{font-size:clamp(40px,6vw,72px);line-height:.95;letter-spacing:-2.2px;margin-bottom:20px}h2{font-size:clamp(30px,4.2vw,48px);line-height:1.05;margin-bottom:12px}h3{font-size:24px;margin-bottom:10px}
p{color:var(--muted);line-height:1.65}.hero-copy>p{font-size:19px;max-width:660px}
.domain-search{margin-top:26px;max-width:650px}.domain-search label{display:block;margin-bottom:10px;color:var(--text);font-weight:900}.domain-box{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:10px;border-radius:24px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}html[data-theme="light"] .domain-box{background:rgba(255,255,255,.85);border-color:rgba(0,168,240,.18)}
.domain-box input,.domain-box select,.domain-box button{border:0;outline:0;border-radius:17px;font:inherit;font-weight:800}.domain-box input,.domain-box select{background:rgba(255,255,255,.13);color:var(--text);padding:15px}.domain-box option{color:#092543}.domain-box button{padding:15px 20px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#18b743,#85df39)}
.domain-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.domain-tags span,.feature-tags span,.hero-badges div{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);font-weight:700;color:var(--text);font-size:13px}
html[data-theme="light"] .domain-tags span, html[data-theme="light"] .feature-tags span, html[data-theme="light"] .hero-badges div{background:#eef9ff;border-color:rgba(0,168,240,.16)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.center{justify-content:center}.btn{display:inline-block;text-decoration:none;padding:15px 21px;border-radius:999px;font-weight:900;transition:.22s}.btn:hover{transform:translateY(-3px)}.btn-primary,.btn-plan{background:linear-gradient(135deg,var(--blue),var(--cyan));color:white;box-shadow:0 16px 34px rgba(0,168,240,.22)}.btn-whatsapp{background:linear-gradient(135deg,#18b743,#85df39);color:white}.hero-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:25px}.hero-badges strong{display:block}.hero-badges span{color:var(--muted);font-size:12px}
.hero-visual{position:relative;min-height:500px;display:grid;place-items:center}.datacenter{position:relative;width:460px;height:430px;display:grid;place-items:center;transform:perspective(900px) rotateY(-8deg) rotateX(4deg)}.main-rack{width:280px;padding:23px;border-radius:32px;background:linear-gradient(145deg,#052760,#005fc5 60%,#00a8f0);box-shadow:0 38px 80px rgba(0,0,0,.35);position:relative;z-index:4}.rack-glow{position:absolute;inset:-30px;background:radial-gradient(circle,rgba(0,168,240,.45),transparent 68%);filter:blur(10px);z-index:-1}.server-row{height:72px;margin-bottom:14px;padding:20px;border-radius:18px;background:rgba(255,255,255,.16);display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.20)}.server-row:last-child{margin-bottom:0}.server-row span{width:15px;height:15px;background:#9dff72;border-radius:50%;box-shadow:0 0 18px #9dff72}.server-row b{height:8px;width:70px;border-radius:999px;background:rgba(255,255,255,.76)}.server-row b:last-child{width:38px}.rack{position:absolute;width:86px;height:230px;border-radius:24px;background:linear-gradient(145deg,#071f48,#006bd4);padding:18px 12px;box-shadow:0 28px 55px rgba(0,0,0,.22)}.rack i{display:block;height:30px;margin-bottom:13px;border-radius:10px;background:rgba(255,255,255,.18)}.rack-left{left:0;bottom:75px}.rack-right{right:0;bottom:75px}.cloud-card,.floating-pill,.dashboard-card{position:absolute;z-index:8;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(10px);box-shadow:0 18px 38px rgba(0,0,0,.18);border-radius:22px;color:var(--text);font-weight:900}.cloud-card{top:40px;padding:16px 24px;border-radius:999px}.pill-dns{left:28px;top:84px;padding:14px}.pill-ssl{right:40px;top:112px;padding:18px;color:#9dff72}.pill-mail{left:65px;bottom:84px;padding:14px}.dashboard-card{right:35px;bottom:54px;padding:16px 18px}.dashboard-card span{display:block;width:46px;height:8px;background:#9dff72;border-radius:999px;margin-bottom:10px}.fiber-lines{position:absolute;inset:auto 18px 28px;height:90px}.fiber-lines em{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--green),transparent);box-shadow:0 0 16px rgba(0,168,240,.75)}.fiber-lines em:nth-child(1){top:18px;transform:rotate(7deg)}.fiber-lines em:nth-child(2){top:46px}.fiber-lines em:nth-child(3){top:74px;transform:rotate(-7deg)}
.section-title{text-align:center;max-width:820px;margin:70px auto 28px}.section-title span{color:#64d7ff;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.8px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.plan,.split-section,.solutions,.final-cta,.service-grid article{background:var(--panel);border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow);backdrop-filter:blur(12px)}html[data-theme="light"] .plan,html[data-theme="light"] .split-section,html[data-theme="light"] .solutions,html[data-theme="light"] .final-cta,html[data-theme="light"] .service-grid article{border-color:rgba(0,168,240,.14)}
.plan{border-radius:30px;padding:28px;position:relative;transition:.22s}.plan:hover{transform:translateY(-7px)}.plan:before{content:"";position:absolute;inset:0;height:7px;border-radius:30px 30px 0 0;background:linear-gradient(90deg,var(--cyan),var(--green))}.featured{transform:translateY(-14px);background:linear-gradient(180deg,rgba(0,168,240,.18),var(--panel))}.ribbon{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#18b743,#85df39);color:white;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:900}.price{font-size:38px;font-weight:900;margin:20px 0;color:var(--text)}.price span{font-size:15px;color:var(--muted)}ul{list-style:none;margin:18px 0}li{margin-bottom:10px;color:var(--muted)}li:before{content:"✓ ";color:#64d7ff;font-weight:900}.combo{padding-top:15px;border-top:1px solid rgba(255,255,255,.12);margin-bottom:18px}.combo p{display:flex;justify-content:space-between;gap:10px;font-size:14px}.combo strong{color:var(--text)}
.split-section,.solutions,.final-cta{margin-top:34px;padding:42px;border-radius:34px}.split-section{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.feature-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.web-visual{position:relative;min-height:315px;display:grid;place-items:center}.browser{width:340px;border-radius:26px;overflow:hidden;background:linear-gradient(145deg,#052760,#005fc5 60%,#00a8f0);box-shadow:0 30px 70px rgba(0,0,0,.28);transform:perspective(800px) rotateY(-8deg)}.browser-top{height:48px;background:rgba(255,255,255,.14);display:flex;gap:8px;align-items:center;padding:0 18px}.browser-top span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.8)}.browser-body{padding:26px}.web-title{width:165px;height:22px;border-radius:999px;background:#9dff72;margin-bottom:20px}.web-lines i{display:block;height:9px;border-radius:999px;background:rgba(255,255,255,.78);margin-bottom:12px}.web-lines i:nth-child(1){width:210px}.web-lines i:nth-child(2){width:145px}.web-lines i:nth-child(3){width:185px}.web-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.web-cards b{height:58px;border-radius:15px;background:rgba(255,255,255,.18)}.phone{position:absolute;right:55px;bottom:30px;width:74px;height:120px;border-radius:24px;background:linear-gradient(145deg,#061f48,#005fc5);border:3px solid rgba(255,255,255,.35)}
.solution-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:26px}.solution-flow div{position:relative;text-align:center;padding:22px 14px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.solution-flow div:after{content:"";position:absolute;right:-14px;top:50%;width:14px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--green))}.solution-flow div:last-child:after{display:none}.solution-flow strong{display:block;font-size:34px;margin-bottom:10px}.solution-flow span{font-weight:900}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}.service-grid article{text-align:center;padding:28px;border-radius:28px}.service-grid strong{display:block;font-size:36px}.service-grid span{color:var(--muted)}
.final-cta{text-align:center}.final-cta p{max-width:720px;margin:0 auto}.footer{max-width:1180px;margin:0 auto 32px;padding:38px;border-radius:34px;background:linear-gradient(135deg,#031b40,#003b8f);display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:28px;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow)}.footer img{width:210px}.footer a{display:block;color:#d8f4ff;text-decoration:none;margin-top:8px}.footer h3{color:white}
.floating-actions{position:fixed;right:24px;bottom:24px;z-index:99999;display:grid;gap:12px}.floating-btn{width:54px;height:54px;border:none;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:white;text-decoration:none;box-shadow:0 14px 32px rgba(0,91,150,.25);transition:.22s}.floating-btn:hover{transform:translateY(-3px) scale(1.04)}.floating-btn svg{width:26px;height:26px;fill:currentColor}.whatsapp-btn{background:linear-gradient(135deg,#18b743,#85df39)}.back-top-btn{background:linear-gradient(135deg,var(--blue),var(--cyan));opacity:0;visibility:hidden}.back-top-btn.visible{opacity:1;visibility:visible}
.infra-visual{position:relative;min-height:440px;display:grid;place-items:center}.infra-scene{position:relative;width:430px;height:430px;transform:perspective(900px) rotateX(8deg) rotateY(-8deg)}.infra-glow{position:absolute;inset:40px;border-radius:50%;background:radial-gradient(circle,rgba(0,168,240,.32),transparent 68%);filter:blur(12px)}.infra-rack{position:absolute;left:135px;top:92px;width:160px;height:230px;border-radius:26px;padding:18px;background:linear-gradient(145deg,#062a63,#005fc5 60%,#00a8f0);box-shadow:0 32px 60px rgba(0,59,143,.28);z-index:5}.unit{height:34px;margin-bottom:12px;border-radius:12px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;gap:8px;padding:0 10px}.unit:before{content:"";width:10px;height:10px;border-radius:50%;background:#9dff72;box-shadow:0 0 14px #9dff72}.unit:after{content:"";flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.65)}
.device{position:absolute;z-index:4;display:grid;place-items:center;color:white;font-weight:900;text-align:center;box-shadow:0 20px 40px rgba(0,91,150,.18);font-size:13px}.firewall{left:166px;top:26px;width:98px;height:58px;border-radius:18px;background:linear-gradient(135deg,#ff9200,#ffb13b)}.switch-core{left:110px;top:336px;width:210px;height:52px;border-radius:18px;background:linear-gradient(135deg,#003b8f,#00a8f0)}.nas{left:14px;top:180px;width:92px;height:92px;border-radius:24px;background:linear-gradient(135deg,#003b8f,#00a8f0)}.wifi{right:12px;top:178px;width:92px;height:92px;border-radius:24px;background:linear-gradient(135deg,#75c900,#9dff72);color:#003b8f}.nvr{left:34px;bottom:34px;width:108px;height:64px;border-radius:20px;background:linear-gradient(135deg,#003b8f,#00a8f0)}.remote{right:44px;bottom:18px;width:76px;height:112px;border-radius:24px;background:linear-gradient(145deg,#061f48,#005fc5);border:3px solid rgba(255,255,255,.35)}
.camera{position:absolute;width:86px;height:58px;border-radius:20px;background:rgba(255,255,255,.9);border:1px solid rgba(0,168,240,.18);box-shadow:0 18px 35px rgba(0,91,150,.14);z-index:6}.camera:before{content:"";position:absolute;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#003b8f,#00a8f0);left:12px;top:12px}.camera:after{content:"";position:absolute;width:32px;height:16px;border-radius:0 14px 14px 0;background:#003b8f;right:8px;top:21px}.camera-one{left:42px;top:78px;transform:rotate(-8deg)}.camera-two{right:42px;top:78px;transform:rotate(8deg)}
.infra-line{position:absolute;height:2px;background:linear-gradient(90deg,transparent,#00a8f0,#75c900,transparent);box-shadow:0 0 16px rgba(0,168,240,.75);z-index:2;transform-origin:center}.line-1{left:206px;top:84px;width:2px;height:84px;background:linear-gradient(180deg,#00a8f0,#75c900)}.line-2{left:76px;top:154px;width:140px;transform:rotate(20deg)}.line-3{right:70px;top:154px;width:140px;transform:rotate(-20deg)}.line-4{left:104px;top:224px;width:82px;transform:rotate(-10deg)}.line-5{right:104px;top:224px;width:82px;transform:rotate(10deg)}.line-6{left:150px;top:316px;width:140px;transform:rotate(90deg)}.line-7{left:72px;bottom:104px;width:96px;transform:rotate(-28deg)}.line-8{right:76px;bottom:102px;width:96px;transform:rotate(28deg)}.infra-label{position:absolute;z-index:7;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(0,168,240,.18);color:#003b8f;font-size:12px;font-weight:800;box-shadow:0 12px 28px rgba(0,91,150,.12)}.label-internet{left:160px;top:0}.label-cam{left:300px;top:42px}.label-rack{left:160px;top:178px}.label-cell{right:0;bottom:0}
@media(max-width:1050px){.topbar{align-items:flex-start;flex-direction:column}.hero,.split-section,.footer{grid-template-columns:1fr}.plans,.service-grid{grid-template-columns:1fr 1fr}.solution-flow{grid-template-columns:repeat(3,1fr)}.solution-flow div:after{display:none}.featured{transform:none}}
@media(max-width:680px){main{padding:20px 12px}.hero,.split-section,.solutions,.final-cta{padding:26px;border-radius:28px}.plans,.service-grid,.solution-flow{grid-template-columns:1fr}.domain-box{grid-template-columns:1fr}.brand img{width:190px}.datacenter{transform:scale(.75);width:320px}.infra-scene{transform:scale(.72);width:320px}.footer{padding:28px}.hero-badges{grid-template-columns:1fr 1fr}.top-actions{width:100%;justify-content:space-between}}


/* ================================
   PAUTAR NEXT v4.1 - Design System
================================ */

.design-token-panel {
  margin: 34px 0;
  padding: 36px;
  border-radius: 34px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.token-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 20px;
}

.color-token {
  min-height: 118px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
  font-weight: 800;
}

.color-token span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  opacity: .85;
}

.token-blue-dark { background: #003B8F; }
.token-blue { background: #005FC5; }
.token-cyan { background: #00A8F0; }
.token-green { background: #75C900; }
.token-orange { background: #FF9200; }

.case-preview {
  margin-top: 34px;
  padding: 42px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 0, rgba(0,168,240,.18), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(117,201,0,.16), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .case-preview,
html[data-theme="light"] .design-token-panel {
  border-color: rgba(0,168,240,.14);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.case-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: .22s;
}

html[data-theme="light"] .case-card {
  background: rgba(255,255,255,.72);
  border-color: rgba(0,168,240,.14);
}

.case-card:hover {
  transform: translateY(-6px);
}

.case-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  margin-bottom: 16px;
  font-size: 28px;
}

.system-link {
  display: inline-block;
  margin-top: 18px;
  color: #64d7ff;
  font-weight: 900;
  text-decoration: none;
}

@media(max-width:900px){
  .token-grid,
  .case-grid {
    grid-template-columns: 1fr;
  }
}


/* =======================================
   PAUTAR NEXT v4.2 - Home definitiva
   Hero premium, comparador y animaciones
======================================= */

.hero.v42-hero {
  min-height: 820px;
  background:
    radial-gradient(circle at 88% 7%, rgba(0,168,240,.26), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(117,201,0,.12), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
}

html[data-theme="light"] .hero.v42-hero {
  background:
    radial-gradient(circle at 88% 7%, rgba(0,168,240,.22), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(117,201,0,.16), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,248,255,.96));
}

.hero.v42-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 55% 42%, rgba(0,168,240,.10), transparent 24%),
    linear-gradient(90deg, transparent, rgba(0,168,240,.08), transparent);
  pointer-events: none;
  animation: heroGlow 7s ease-in-out infinite;
}

@keyframes heroGlow {
  0%,100% { opacity: .65; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(14px); }
}

.v42-visual {
  min-height: 560px;
}

.v42-datacenter {
  width: 520px;
  height: 500px;
}

.v42-datacenter .main-rack {
  width: 300px;
  animation: rackFloat 5s ease-in-out infinite;
}

@keyframes rackFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.v42-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,168,240,.18);
  box-shadow: inset 0 0 30px rgba(0,168,240,.08);
  z-index: 0;
}

.v42-orbit.one { width: 455px; height: 455px; }
.v42-orbit.two { width: 340px; height: 340px; transform: rotate(22deg); }

.v42-node {
  position: absolute;
  z-index: 9;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-weight: 900;
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

html[data-theme="light"] .v42-node,
html[data-theme="light"] .cloud-card,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .floating-pill {
  background: rgba(255,255,255,.86);
  border-color: rgba(0,168,240,.18);
}

.v42-node.cloud { top: 22px; left: 50%; transform: translateX(-50%); width: 150px; border-radius: 999px; }
.v42-node.web { left: 24px; bottom: 80px; }
.v42-node.backup { right: 22px; bottom: 92px; }
.v42-node.sec { right: 32px; top: 86px; color: #9dff72; }

.v42-fiber {
  position: absolute;
  inset: 60px 22px 35px;
  pointer-events: none;
  z-index: 1;
}

.v42-fiber i {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00a8f0, #75c900, transparent);
  box-shadow: 0 0 18px rgba(0,168,240,.75);
  animation: fiberPulse 3.2s ease-in-out infinite;
}

.v42-fiber i:nth-child(1){ left: 40px; right: 60px; top: 105px; transform: rotate(12deg); }
.v42-fiber i:nth-child(2){ left: 20px; right: 35px; top: 245px; }
.v42-fiber i:nth-child(3){ left: 70px; right: 30px; bottom: 98px; transform: rotate(-10deg); }
.v42-fiber i:nth-child(4){ left: 250px; width: 2px; top: 45px; bottom: 80px; background: linear-gradient(180deg, #00a8f0, #75c900); }

@keyframes fiberPulse {
  0%,100% { opacity: .45; filter: blur(0); }
  50% { opacity: 1; filter: blur(.4px); }
}

.domain-search.v42-search {
  max-width: 700px;
  padding: 18px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 26px 56px rgba(0,0,0,.20);
  backdrop-filter: blur(14px);
}

html[data-theme="light"] .domain-search.v42-search {
  background: rgba(255,255,255,.92);
  border-color: rgba(0,168,240,.18);
  box-shadow: 0 18px 42px rgba(0,91,150,.13);
}

.v42-search .domain-box {
  padding: 12px;
  border-radius: 24px;
}

.v42-search .domain-box input {
  font-size: 18px;
}

.v42-search-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.hosting-compare {
  margin-top: 34px;
  padding: 38px;
  border-radius: 34px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

html[data-theme="light"] .hosting-compare {
  border-color: rgba(0,168,240,.14);
}

.compare-wrap {
  overflow-x: auto;
  margin-top: 24px;
}

.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  text-align: center;
}

html[data-theme="light"] .compare-table th,
html[data-theme="light"] .compare-table td {
  border-bottom-color: rgba(0,168,240,.14);
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  color: var(--text);
  font-weight: 800;
}

.compare-table th {
  color: var(--text);
  font-size: 15px;
}

.compare-table .recommended-col {
  background: rgba(0,168,240,.10);
  color: #64d7ff;
}

.compare-table .check {
  color: #9dff72;
  font-weight: 900;
}

.compare-table .price-cell {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
}

.experience-strip {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.experience-strip article {
  padding: 24px;
  border-radius: 28px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .experience-strip article {
  border-color: rgba(0,168,240,.14);
}

.experience-strip strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 18px;
}

.experience-strip span {
  color: var(--muted);
  line-height: 1.55;
}

@media(max-width:1050px){
  .v42-datacenter {
    width: 390px;
    transform: scale(.86);
  }
  .experience-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:680px){
  .hero.v42-hero {
    min-height: auto;
  }
  .v42-datacenter {
    width: 320px;
    transform: scale(.72);
  }
  .experience-strip {
    grid-template-columns: 1fr;
  }
}


/* ==================================================
   PAUTAR v4.2 - Corrección Hero Ciudad de la Costa
   No elimina elementos. Reacomoda proporciones.
================================================== */

main {
  max-width: 1420px !important;
}

.topbar {
  max-width: 1420px !important;
}

/* Más ancho general para que texto e ilustración respiren */
.hero.v42-hero {
  grid-template-columns: minmax(740px, 1fr) minmax(360px, .58fr) !important;
  gap: 20px !important;
  padding-left: 54px !important;
  padding-right: 28px !important;
}

/* El bloque de texto no invade la zona visual */
.hero-copy {
  max-width: 820px !important;
  min-width: 0 !important;
}

.hero-copy h1,
.hero.v42-hero h1 {
  font-size: clamp(34px, 3vw, 46px) !important;
  line-height: 1.12 !important;
  letter-spacing: -1.2px !important;
  white-space: nowrap !important;
  max-width: 820px !important;
  margin-bottom: 20px !important;
}

.hero-copy > p,
.hero.v42-hero .hero-copy > p {
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  max-width: 820px !important;
  margin-bottom: 22px !important;
}

/* Mantiene servidores/datacenter, pero dentro de su zona */
.hero-visual.v42-visual {
  justify-self: end !important;
  width: 100% !important;
  min-width: 360px !important;
  overflow: visible !important;
}

.v42-datacenter {
  transform: perspective(900px) rotateY(-8deg) rotateX(4deg) scale(.88) !important;
  transform-origin: center right !important;
}

.v42-node.cloud {
  right: 6px !important;
  left: auto !important;
  transform: none !important;
}

.v42-orbit.one {
  width: 390px !important;
  height: 390px !important;
}

.v42-orbit.two {
  width: 300px !important;
  height: 300px !important;
}

/* En responsive se permite salto para evitar desbordes */
@media (max-width: 1100px) {
  main,
  .topbar {
    max-width: 1180px !important;
  }

  .hero.v42-hero {
    grid-template-columns: 1fr !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .hero-copy h1,
  .hero.v42-hero h1,
  .hero-copy > p,
  .hero.v42-hero .hero-copy > p {
    white-space: normal !important;
  }

  .hero-visual.v42-visual {
    justify-self: center !important;
  }

  .v42-datacenter {
    transform: perspective(900px) rotateY(-8deg) rotateX(4deg) scale(.82) !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 680px) {
  .hero-copy h1,
  .hero.v42-hero h1 {
    font-size: 36px !important;
  }

  .hero-copy > p,
  .hero.v42-hero .hero-copy > p {
    font-size: 17px !important;
  }
}


/* ==================================================
   PAUTAR v4.2.4
   Ajuste solicitado:
   1) Menú superior más compacto
   2) Datacenter desplazado hacia la izquierda
================================================== */

/* Menú superior: se compacta solo el bloque de enlaces */
.nav-links {
  gap: 14px !important;
  flex: 0 1 auto !important;
  justify-content: center !important;
}

.nav-links a {
  font-size: 13px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  white-space: nowrap !important;
}

/* Mantiene logo y botón; solo evita que el menú se estire */
.topbar {
  column-gap: 18px !important;
}

/* Datacenter: mismo tamaño, solo desplazado hacia la izquierda */
.hero-visual.v42-visual {
  transform: translateX(-48px) !important;
}

/* En tablet/móvil se evita desplazar demasiado */
@media (max-width: 1100px) {
  .hero-visual.v42-visual {
    transform: translateX(0) !important;
  }

  .nav-links {
    gap: 12px !important;
  }
}


/* ==================================================
   PAUTAR v4.2.5
   Ajuste solicitado: menú principal como bloque compacto
================================================== */

.nav-links {
  flex: 0 0 720px !important;
  max-width: 720px !important;
  width: 720px !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 12px !important;
}

.nav-links a {
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  .nav-links {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
}


/* ==================================================
   PAUTAR v4.2.6
   Header al ancho del contenido de la pagina
================================================== */

.topbar {
  width: calc(100% - 54px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* El menu queda como bloque compacto, sin estirar todo el header */
.nav-links {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 680px) {
  .topbar {
    width: calc(100% - 24px) !important;
  }
}


/* ==================================================
   PAUTAR v4.2.7
   Ajuste solicitado: Hero más compacto
================================================== */

.hero.v42-hero {
  min-height: 690px !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  align-items: center !important;
}

.hero-copy {
  transform: translateY(-26px) !important;
}

.hero-visual.v42-visual {
  transform: translate(-48px, -26px) !important;
}

.domain-search.v42-search {
  margin-top: 18px !important;
}

.v42-search-note {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
}

.hero-actions {
  margin-top: 14px !important;
}

.hero-badges {
  margin-top: 18px !important;
}

@media (max-width: 1100px) {
  .hero.v42-hero {
    min-height: auto !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .hero-copy,
  .hero-visual.v42-visual {
    transform: none !important;
  }
}


/* PAUTAR v4.2.8 - Ajuste inferior del Hero */
.hero.v42-hero {
  padding-bottom: 12px !important;
  min-height: 660px !important;
}

@media (max-width: 1100px) {
  .hero.v42-hero {
    padding-bottom: 24px !important;
  }
}


/* PAUTAR v4.2.9 - Nuevos nodos en servidores */
.v42-node.mail {
  top: 125px;
  right: 18px;
}

.v42-node.mysql {
  bottom: 105px;
  right: 28px;
  width: 76px;
  height: 56px;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .v42-node.mail,
  .v42-node.mysql {
    display: none;
  }
}


/* v4.2.10 Reubicación de nodos */
.v42-node.cloud{top:18px!important;left:50%!important;transform:translateX(-50%)!important;}
.v42-node.sec{top:110px!important;left:110px!important;right:auto!important;}
.v42-node.mail{top:110px!important;right:95px!important;left:auto!important;}
.v42-node.web{left:-35px!important;top:290px!important;}
.v42-node.backup{right:-35px!important;top:300px!important;left:auto!important;}
.v42-node.mysql{left:50%!important;bottom:-8px!important;transform:translateX(-50%)!important;width:92px!important;}


/* v4.2.11 balanceo de nodos */
.v42-node.cloud{
 top:55px!important;
 left:50%!important;
 transform:translateX(-50%)!important;
}
.v42-node.sec{
 top:155px!important;
 left:135px!important;
}
.v42-node.mail{
 top:155px!important;
 right:135px!important;
 color:#FF9A1F!important;
}
.v42-node.web{
 left:-10px!important;
 top:315px!important;
}
.v42-node.backup{
 left:120px!important;
 right:auto!important;
 bottom:45px!important;
 top:auto!important;
}
.v42-node.mysql{
 left:50%!important;
 bottom:18px!important;
 top:auto!important;
 transform:translateX(-50%)!important;
 width:95px!important;
}

/* v4.2.12 */
.v42-node{z-index:20!important}
.v42-node.cloud{top:78px!important;left:50%!important;transform:translateX(-50%)!important;}
.v42-node.sec{top:165px!important;left:165px!important;}
.v42-node.mail{top:165px!important;right:165px!important;left:auto!important;color:#F28C28!important;}
.v42-node.web{top:285px!important;left:95px!important;}
.v42-node.backup{top:345px!important;left:165px!important;right:auto!important;bottom:auto!important;}
.v42-node.mysql{bottom:35px!important;left:50%!important;top:auto!important;transform:translateX(-50%)!important;width:90px!important;}

/* v4.2.13 - nodos corregidos sin superposición */
.hero-visual.v42-visual {
  overflow: visible !important;
}

.v42-node {
  z-index: 30 !important;
  transform: none !important;
}

.v42-node.cloud {
  top: 38px !important;
  left: 250px !important;
  right: auto !important;
  bottom: auto !important;
  width: 170px !important;
  height: 62px !important;
}

.v42-node.sec {
  top: 125px !important;
  left: 65px !important;
  right: auto !important;
  bottom: auto !important;
  width: 72px !important;
  height: 72px !important;
}

.v42-node.mail {
  top: 125px !important;
  left: 185px !important;
  right: auto !important;
  bottom: auto !important;
  width: 82px !important;
  height: 72px !important;
  color: #F28C28 !important;
}

.v42-node.web {
  top: 270px !important;
  left: 20px !important;
  right: auto !important;
  bottom: auto !important;
  width: 76px !important;
  height: 70px !important;
}

.v42-node.backup {
  top: 370px !important;
  left: 105px !important;
  right: auto !important;
  bottom: auto !important;
  width: 76px !important;
  height: 70px !important;
}

.v42-node.mysql {
  top: 450px !important;
  left: 230px !important;
  right: auto !important;
  bottom: auto !important;
  width: 92px !important;
  height: 58px !important;
}


/* v4.2.16 - quitar solo el cartel Uptime */
.floating-pill {
  display: none !important;
}


/* v4.2.18 - Se elimina el bloque de comparador de planes */
.compare-section,
.comparison-section,
.plan-comparison,
.comparison-table,
.compare-table,
.comparador,
.hosting-compare {
  display: none !important;
}


/* v4.2.20 - Venta de computadoras e impresoras */
.equipment-section {
  margin-top: 34px;
  padding: 42px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 28px;
}

.equipment-card {
  padding: 28px;
  border-radius: 28px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

.equipment-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  margin-bottom: 18px;
  font-size: 34px;
  background: rgba(0,168,240,.13);
  border: 1px solid rgba(0,168,240,.25);
}

.equipment-card ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.equipment-card li {
  margin: 9px 0;
  color: var(--muted);
}

.equipment-card li::before {
  content: "✓ ";
  color: #75c900;
  font-weight: 900;
}

.equipment-cta {
  margin-top: 26px;
  text-align: center;
}

html[data-theme="light"] .equipment-section,
html[data-theme="light"] .equipment-card {
  background: rgba(255,255,255,.86);
  border-color: rgba(0,168,240,.14);
}

@media (max-width: 780px) {
  .equipment-section {
    padding: 28px;
  }

  .equipment-grid {
    grid-template-columns: 1fr;
  }
}

/* v4.2.22 badge */
.equipment-section .section-head .section-kicker{
display:inline-flex;
align-items:center;
padding:14px 22px;
border-radius:999px;
background:rgba(0,149,255,.12);
border:1px solid rgba(0,180,255,.35);
color:#67d2ff;
font-size:.95rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:22px;
}
.equipment-section .section-head>span:not(.section-kicker){display:none;}

.footer-copyright{
margin-top:24px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.12);
text-align:center;
font-size:13px;
color:#94A3B8;
}


/* RC1 polish */
.section-head > span,
.equipment-section .section-kicker{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:10px 18px;
  border-radius:999px;
}

.cloud-card,.case-card,.equipment-card,.dashboard-card{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.cloud-card:hover,.case-card:hover,.equipment-card:hover,.dashboard-card:hover{
  transform:translateY(-4px);
}

.btn,.btn-primary,.btn-plan{
 transition:background-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.btn:hover,.btn-primary:hover,.btn-plan:hover{
 transform:translateY(-2px);
}

.section-head h2{margin-top:14px;}
.section-head p{margin-top:10px;}


/* RC2 polish */
:root{
 --transition-fast:280ms cubic-bezier(.2,.8,.2,1);
 --card-shadow:0 14px 34px rgba(0,0,0,.12);
}
.service-card,.plan-card,.equipment-card,.feature-card{
 transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast);
 box-shadow:var(--card-shadow);
}
.service-card:hover,.plan-card:hover,.equipment-card:hover,.feature-card:hover{
 transform:translateY(-4px);
 box-shadow:0 18px 40px rgba(0,0,0,.16);
}
.btn{
 transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
.btn:hover{transform:translateY(-2px);}
.section-head>span,.section-kicker{
 margin-bottom:18px!important;
}
.section-head h2{margin-top:0;margin-bottom:14px;}
.section-head p{margin-top:0;}

/* RC3 responsive polish */
@media (max-width:1366px){
.container,.wrapper,.content{max-width:1180px;margin:auto;padding-left:20px;padding-right:20px;}
}
@media (max-width:1024px){
.hero,.hero-grid{gap:32px}
section{scroll-margin-top:90px}
}
@media (hover:hover){
.card:hover,.service-card:hover,.plan-card:hover{transform:translateY(-4px);transition:.28s ease}
.btn{transition:.25s ease}
}
img{max-width:100%;height:auto}


/* RC4 polish */
:root{
 --transition-fast:.28s ease;
}
a,button,.btn,.card,[class*="card"]{
 transition:all var(--transition-fast);
}
.btn:focus-visible,a:focus-visible{
 outline:2px solid #4cc3ff;
 outline-offset:3px;
}
[class*="card"]:hover{
 transform:translateY(-4px);
}


/* PAUTAR HOME v1.0 - final accessibility */
:focus-visible {
  outline: 3px solid rgba(100, 215, 255, .95);
  outline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* ==================================================
   PAUTAR HOME v1.1 - Corrección responsive móvil
================================================== */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  main {
    width: 100%;
    max-width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box;
  }

  /* Header móvil contenido dentro de la pantalla */
  .topbar {
    position: relative !important;
    top: 0 !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto 0 !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .brand {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .brand img {
    width: min(230px, 78vw) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .nav-links {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 8px !important;
    margin: 0 !important;
  }

  .nav-links a {
    min-width: 0 !important;
    padding: 9px 5px !important;
    font-size: 13px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .top-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .theme-toggle {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
  }

  .nav-cta {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 12px !important;
    text-align: center !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  /* Hero móvil */
  .hero.v42-hero,
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 24px 18px !important;
    margin-top: 14px !important;
    border-radius: 26px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .eyebrow,
  .section-head > span,
  .section-kicker {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }

  .hero-copy h1,
  .hero.v42-hero h1,
  h1 {
    max-width: 100% !important;
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .hero-copy > p,
  .hero.v42-hero .hero-copy > p,
  .split-section p,
  .section-head p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .domain-search,
  .domain-search.v42-search {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px !important;
    box-sizing: border-box !important;
  }

  .domain-box,
  .v42-search .domain-box {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .domain-box input,
  .domain-box select,
  .domain-box button {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .domain-tags {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .domain-tags span {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero-actions .btn,
  .hero-actions a {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  .hero-badges {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero-badges div {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ilustración del servidor sin desbordes */
  .hero-visual.v42-visual,
  .hero-visual {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 440px !important;
    transform: none !important;
    justify-self: center !important;
    overflow: hidden !important;
  }

  .v42-datacenter,
  .datacenter {
    width: 420px !important;
    max-width: none !important;
    transform: perspective(900px) rotateY(-8deg) rotateX(4deg) scale(.68) !important;
    transform-origin: center center !important;
  }

  .v42-node {
    transform: scale(.82) !important;
    transform-origin: center !important;
  }

  /* Secciones internas */
  .split-section,
  .solutions,
  .final-cta,
  .equipment-section,
  .footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .split-section {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .split-section h2,
  .section-head h2,
  h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  .feature-tags {
    width: 100% !important;
    gap: 8px !important;
  }

  .feature-tags span {
    max-width: 100% !important;
    white-space: normal !important;
  }

  .browser,
  .infra-scene,
  .web-visual {
    max-width: 100% !important;
  }

  .browser {
    width: min(340px, 92vw) !important;
    transform: none !important;
  }

  .plans,
  .service-grid,
  .equipment-grid,
  .solution-flow {
    grid-template-columns: 1fr !important;
  }

  /* Botones flotantes dentro del viewport */
  .whatsapp-float,
  .back-to-top,
  .scroll-top {
    right: 14px !important;
  }
}

@media (max-width: 420px) {
  .nav-links {
    grid-template-columns: 1fr 1fr !important;
  }

  .nav-links a {
    font-size: 12px !important;
  }

  .hero-badges {
    grid-template-columns: 1fr !important;
  }

  .hero-visual.v42-visual,
  .hero-visual {
    min-height: 380px !important;
  }

  .v42-datacenter,
  .datacenter {
    transform: perspective(900px) rotateY(-8deg) rotateX(4deg) scale(.58) !important;
  }
}


/* ==================================================
   PAUTAR HOME v1.2 - Ajuste móvil sección Diseño Web
================================================== */
@media (max-width: 768px) {
  #diseno-web,
  .web-design-section,
  .web-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #diseno-web .split-section,
  .web-design-section .split-section,
  .web-section .split-section {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #diseno-web .section-copy,
  #diseno-web .content,
  .web-design-section .section-copy,
  .web-section .section-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #diseno-web h2,
  .web-design-section h2,
  .web-section h2 {
    font-size: clamp(34px, 8.5vw, 46px) !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  #diseno-web p,
  .web-design-section p,
  .web-section p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word !important;
  }

  #diseno-web .feature-tags,
  .web-design-section .feature-tags,
  .web-section .feature-tags {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  #diseno-web .feature-tags span,
  .web-design-section .feature-tags span,
  .web-section .feature-tags span {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  #diseno-web .btn,
  .web-design-section .btn,
  .web-section .btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
  }

  #diseno-web .browser,
  #diseno-web .web-visual,
  .web-design-section .browser,
  .web-section .browser {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #diseno-web .browser *,
  .web-design-section .browser *,
  .web-section .browser * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 420px) {
  #diseno-web .feature-tags,
  .web-design-section .feature-tags,
  .web-section .feature-tags {
    grid-template-columns: 1fr !important;
  }
}