:root {
  /* V3: gama cálida / tecnológica basada en verdes, grafito, blanco cálido y gris. */
  --hl-green: #72bf44;
  --hl-green-dark: #3f7f32;
  --hl-green-soft: #e7f4df;
  --hl-olive: #dfe8d4;
  --hl-warm: #f4f1e7;
  --hl-warm-light: #fbfaf4;
  --hl-yellow: #f2c94c;
  --hl-cyan: #27aeb6;
  --hl-charcoal: #25313a;
  --hl-charcoal-2: #182329;
  --hl-slate: #43505a;
  --hl-muted: #69746d;
  --hl-border: #d9ddd0;
  --hl-bg: #ffffff;
  --hl-shadow: 0 24px 70px rgba(37, 49, 58, .13);
  --hl-shadow-soft: 0 14px 36px rgba(37, 49, 58, .08);
  --hl-radius: 26px;
  --hl-radius-sm: 16px;
  --hl-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--hl-charcoal);
  background: var(--hl-bg);
  line-height: 1.58;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--hl-green-dark); }
.container { width: min(var(--hl-container), calc(100% - 40px)); margin-inline: auto; }
.screen-reader-text, .skip-link {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link:focus { width: auto; height: auto; padding: 10px 16px; background: #fff; z-index: 10000; clip: auto; }

/* Header */
.topbar { background: var(--hl-charcoal-2); color: #fff; font-size: 14px; }
.topbar__inner { min-height: 40px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.topbar__links { display: flex; gap: 18px; }
.topbar a { color: rgba(255,255,255,.84); }
.topbar a:hover { color: #fff; }
.navbar { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--hl-border); position: sticky; top: 0; z-index: 99; backdrop-filter: blur(14px); }
.navbar__inner { min-height: 82px; display: flex; align-items: center; gap: 26px; }
.brand { flex: 0 0 auto; }
.custom-logo { max-width: 220px; height: auto; display: block; }
.brand__text { font-weight: 950; font-size: 24px; color: var(--hl-charcoal); letter-spacing: -.035em; }
.primary-nav { margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.primary-nav__list a { display: block; padding: 12px 10px; color: var(--hl-charcoal); font-weight: 800; font-size: 14.5px; }
.primary-nav__list a:hover { color: var(--hl-green-dark); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; margin-left: auto; }
.menu-toggle span:not(.screen-reader-text) { display: block; width: 26px; height: 2px; background: var(--hl-charcoal); margin: 5px 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 24px; border-radius: 999px; font-weight: 900; border: 1px solid transparent; transition: .2s ease; cursor: pointer; }
.btn--accent { background: var(--hl-green); color: var(--hl-charcoal); box-shadow: 0 14px 28px rgba(114,191,68,.26); }
.btn--accent:hover { background: #80cf50; color: var(--hl-charcoal); transform: translateY(-1px); }
.btn--outline { background: #fff; color: var(--hl-charcoal); border-color: var(--hl-border); }
.btn--outline:hover { border-color: var(--hl-green); color: var(--hl-green-dark); box-shadow: var(--hl-shadow-soft); transform: translateY(-1px); }
.btn--soft { background: var(--hl-warm); color: var(--hl-charcoal); border-color: var(--hl-border); }
.btn--soft:hover { background: var(--hl-green-soft); color: var(--hl-green-dark); border-color: var(--hl-green); }
.btn--small { min-height: 42px; padding: 10px 16px; font-size: 14px; }
.btn--block { width: 100%; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero--servers {
  color: var(--hl-charcoal);
  background:
    radial-gradient(circle at 88% 8%, rgba(114,191,68,.30), transparent 25%),
    radial-gradient(circle at 5% 82%, rgba(242,201,76,.22), transparent 28%),
    linear-gradient(135deg, #fff 0%, var(--hl-warm-light) 44%, var(--hl-warm) 100%);
  padding: 86px 0 72px;
}
.hero--servers::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,49,58,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,49,58,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.8), transparent 75%);
  pointer-events: none;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); gap: 54px; align-items: center; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 12px; color: var(--hl-green-dark); font-weight: 950; text-transform: uppercase; letter-spacing: .13em; font-size: 13px; }
.eyebrow--warm { color: var(--hl-green-dark); }
.eyebrow--light { color: #b9f28f; }
.hero h1 { margin: 0; font-size: clamp(42px, 5.8vw, 74px); line-height: .98; letter-spacing: -.06em; max-width: 800px; }
.hero__lead { color: var(--hl-slate); font-size: clamp(18px, 2vw, 23px); max-width: 720px; margin: 24px 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-bullets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; max-width: 790px; }
.hero-bullets span { background: rgba(255,255,255,.8); border: 1px solid var(--hl-border); padding: 14px 15px; border-radius: var(--hl-radius-sm); color: var(--hl-muted); box-shadow: 0 8px 18px rgba(37,49,58,.04); }
.hero-bullets strong { display: block; color: var(--hl-charcoal); }
.hero__visual { position: relative; }
.hero-slider { position: relative; min-height: 420px; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s ease, transform .45s ease; }
.hero-slide.is-active { opacity: 1; transform: translateY(0) scale(1); }
.hero-slide img { width: 100%; filter: drop-shadow(0 34px 50px rgba(37,49,58,.18)); }
.hero-slider__dots { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); display: flex; gap: 8px; background: #fff; border: 1px solid var(--hl-border); border-radius: 999px; padding: 8px; box-shadow: var(--hl-shadow-soft); }
.hero-slider__dots button { width: 11px; height: 11px; border-radius: 50%; border: 0; background: var(--hl-border); padding: 0; cursor: pointer; }
.hero-slider__dots button.is-active { background: var(--hl-green); width: 28px; border-radius: 999px; }

/* Sections */
.section { padding: 86px 0; }
.section--intro { padding: 28px 0; background: var(--hl-charcoal); }
.section--warm { background: var(--hl-warm); }
.section--warm-light { background: var(--hl-warm-light); }
.section--dark-soft { background: var(--hl-charcoal); color: #fff; }
.section-heading { max-width: 780px; margin-bottom: 38px; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading h2, .split-grid h2, .managed-grid h2, .final-cta h2, .page-header h1 { margin: 0; font-size: clamp(34px, 5vw, 54px); line-height: 1.04; letter-spacing: -.052em; }
.section-heading p, .split-grid p, .managed-grid p, .final-cta p { color: var(--hl-muted); font-size: 18px; }
.section--dark-soft p { color: rgba(255,255,255,.78); }

.intro-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: var(--hl-radius); overflow: hidden; }
.intro-strip div { padding: 24px; background: rgba(255,255,255,.04); }
.intro-strip strong { display: block; color: var(--hl-green); font-size: 18px; }
.intro-strip span { display: block; color: rgba(255,255,255,.78); margin-top: 3px; }

/* Server plans */
.server-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.server-card { background: #fff; border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 24px; box-shadow: var(--hl-shadow-soft); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.server-card::after { content: ""; position: absolute; inset: auto 20px 0 20px; height: 5px; background: var(--hl-green); border-radius: 999px 999px 0 0; opacity: .6; }
.server-card--featured { border-color: rgba(114,191,68,.75); box-shadow: var(--hl-shadow); transform: translateY(-6px); }
.server-card h3 { margin: 0 0 12px; font-size: 24px; letter-spacing: -.03em; }
.server-card__price { color: var(--hl-muted); margin-bottom: 12px; }
.server-card__price span { color: var(--hl-charcoal); font-size: 36px; font-weight: 950; letter-spacing: -.055em; }
.server-card p { color: var(--hl-muted); margin: 0 0 18px; }
.server-card ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.server-card li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px dashed var(--hl-border); font-weight: 700; }
.server-card li::before { content: "✓"; position: absolute; left: 0; color: var(--hl-green-dark); font-weight: 950; }
.badge { display: inline-flex; width: fit-content; background: var(--hl-yellow); color: var(--hl-charcoal); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 950; margin-bottom: 14px; }
.plans-note { max-width: 900px; text-align: center; margin: 30px auto 0; color: var(--hl-muted); font-weight: 700; }

/* Split layouts */
.split-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.split-grid--reverse { grid-template-columns: 1.05fr .95fr; }
.split-grid__media img { border-radius: var(--hl-radius); box-shadow: var(--hl-shadow-soft); }
.comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.comparison-grid div { background: rgba(255,255,255,.75); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); padding: 20px; }
.comparison-grid strong { display: block; color: var(--hl-charcoal); font-size: 18px; }
.comparison-grid span { display: block; color: var(--hl-muted); margin-top: 6px; }

/* Feature showcase */
.feature-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.feature-showcase article { background: #fff; border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 30px; box-shadow: var(--hl-shadow-soft); }
.feature-showcase h3 { margin: 12px 0 8px; font-size: 24px; letter-spacing: -.03em; }
.feature-showcase p { margin: 0; color: var(--hl-muted); }
.feature-icon { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border-radius: 18px; background: var(--hl-green-soft); font-size: 28px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 26px; }
.pill-row span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 9px 13px; border-radius: 999px; font-weight: 900; color: #fff; }

/* Managed */
.managed-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.managed-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.managed-list div { background: var(--hl-warm-light); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); padding: 24px; }
.managed-list strong { display: block; font-size: 19px; color: var(--hl-charcoal); }
.managed-list span { display: block; margin-top: 6px; color: var(--hl-muted); }

/* FAQ and CTA */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.faq-grid details { background: #fff; border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 26px; box-shadow: var(--hl-shadow-soft); }
details summary { cursor: pointer; font-weight: 950; color: var(--hl-charcoal); }
details p { color: var(--hl-muted); margin-bottom: 0; }
.final-cta { padding-top: 0; }
.final-cta__box { background: linear-gradient(135deg, var(--hl-charcoal), #2f3d3a); color: #fff; border-radius: calc(var(--hl-radius) + 8px); padding: 60px; text-align: center; box-shadow: var(--hl-shadow); position: relative; overflow: hidden; }
.final-cta__box::before { content: ""; position: absolute; inset: -120px auto auto -80px; width: 240px; height: 240px; background: rgba(114,191,68,.22); border-radius: 50%; }
.final-cta__box::after { content: ""; position: absolute; inset: auto -70px -90px auto; width: 240px; height: 240px; background: rgba(242,201,76,.18); border-radius: 50%; }
.final-cta__box > * { position: relative; z-index: 1; }
.final-cta__box .eyebrow { color: #b9f28f; }
.final-cta p { color: rgba(255,255,255,.80); max-width: 740px; margin: 16px auto 26px; }

/* Footer */
.site-footer { background: var(--hl-charcoal-2); color: #fff; padding-top: 70px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.site-footer h2, .site-footer h3 { margin-top: 0; }
.site-footer p, .site-footer li, .site-footer a { color: rgba(255,255,255,.74); }
.site-footer a:hover { color: #fff; }
.site-footer ul { padding: 0; margin: 0; list-style: none; }
.site-footer li { margin-bottom: 9px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding: 22px 0; }
.footer-bottom__inner { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.footer-nav { display: flex; gap: 16px; list-style: none; padding: 0; margin: 0; }

/* Content pages */
.content-narrow { max-width: 860px; }
.page-header { margin-bottom: 34px; }
.entry-content { font-size: 18px; }
.entry-content a { color: var(--hl-green-dark); text-decoration: underline; }
.featured-image { margin-bottom: 28px; border-radius: var(--hl-radius); overflow: hidden; }
.post-list { display: grid; gap: 22px; }
.post-card { background: #fff; border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 28px; box-shadow: var(--hl-shadow-soft); }
.post-meta { color: var(--hl-muted); }

@media (max-width: 1100px) {
  .hero__grid, .split-grid, .split-grid--reverse, .managed-grid { grid-template-columns: 1fr; }
  .hero-slider { min-height: 520px; max-width: 760px; margin: 0 auto; }
  .server-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-cta { display: none; }
}
@media (max-width: 860px) {
  .topbar__inner, .topbar__links { flex-wrap: wrap; justify-content: center; }
  .navbar__inner { min-height: 70px; }
  .menu-toggle { display: block; }
  .primary-nav { display: none; position: absolute; left: 0; right: 0; top: 70px; background: #fff; border-bottom: 1px solid var(--hl-border); box-shadow: var(--hl-shadow); }
  .primary-nav.is-open { display: block; }
  .primary-nav__list { flex-direction: column; align-items: stretch; padding: 12px 20px; }
  .primary-nav__list a { padding: 14px 0; }
  .hero--servers { padding: 62px 0 64px; }
  .hero-bullets, .intro-strip, .feature-showcase, .comparison-grid, .managed-list, .faq-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-slider { min-height: 420px; }
  .server-plan-grid { grid-template-columns: 1fr; }
  .server-card--featured { transform: none; }
  .final-cta__box { padding: 38px 24px; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .container { width: min(var(--hl-container), calc(100% - 28px)); }
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; }
  .hero-slider { min-height: 300px; }
  .section { padding: 66px 0; }
  .server-card, .feature-showcase article, .faq-grid details { padding: 22px; }
}


/* =========================================================
   V4 HERO - Enfoque VPS / Linux / Windows Server
   Hero estático, más comercial, más tecnológico y sin slider.
   ========================================================= */
:root {
  --hl-green: #74bd43;
  --hl-green-dark: #347d35;
  --hl-green-deep: #1f6430;
  --hl-green-soft: #eaf6e2;
  --hl-warm: #f4f1e7;
  --hl-warm-light: #fbfaf4;
  --hl-paper: #ffffff;
  --hl-graphite: #25313a;
  --hl-graphite-2: #182329;
  --hl-soft-gray: #eef0e9;
  --hl-muted: #667069;
  --hl-border: #d8ddd0;
  --hl-yellow: #f2c94c;
  --hl-cyan: #27aeb6;
}

.hero--v4 {
  color: var(--hl-graphite);
  background:
    radial-gradient(circle at 82% 12%, rgba(116,189,67,.26), transparent 25%),
    radial-gradient(circle at 8% 78%, rgba(242,201,76,.18), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #fbfaf4 48%, #f2f6ec 100%);
  padding: 94px 0 86px;
}
.hero--v4::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,49,58,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,49,58,.045) 1px, transparent 1px),
    radial-gradient(circle, rgba(116,189,67,.18) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 24px 24px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.38) 55%, transparent 95%);
  pointer-events: none;
}
.hero--v4::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 52px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 72px solid rgba(116,189,67,.15);
  pointer-events: none;
}
.hero__grid--v4 {
  grid-template-columns: minmax(0, 1.02fr) minmax(440px, .98fr);
  gap: 60px;
}
.hero--v4 .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--hl-border);
  border-radius: 999px;
  padding: 9px 14px;
  box-shadow: 0 8px 22px rgba(37,49,58,.06);
}
.hero--v4 .eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hl-green);
  box-shadow: 0 0 0 7px rgba(116,189,67,.14);
}
.hero--v4 h1 {
  margin-top: 22px;
  color: var(--hl-graphite);
  text-wrap: balance;
}
.hero--v4 .hero__lead {
  max-width: 735px;
  color: #4b5750;
  font-weight: 500;
}
.btn--hero {
  min-height: 56px;
  padding-inline: 30px;
  font-size: 16px;
  box-shadow: 0 18px 36px rgba(116,189,67,.32);
}
.hero-proof-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
  max-width: 820px;
}
.hero-proof-row div {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(216,221,208,.95);
  border-radius: 18px;
  padding: 17px 18px 16px;
  box-shadow: 0 10px 24px rgba(37,49,58,.055);
  position: relative;
  overflow: hidden;
}
.hero-proof-row div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
  background: var(--hl-green);
  border-radius: 0 999px 999px 0;
}
.hero-proof-row strong {
  display: block;
  color: var(--hl-graphite);
  font-size: 17px;
  letter-spacing: -.01em;
}
.hero-proof-row span {
  display: block;
  margin-top: 4px;
  color: var(--hl-muted);
  font-size: 14.5px;
  line-height: 1.42;
}

.hero__visual--v4 {
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.server-command {
  width: min(100%, 560px);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(216,221,208,.9);
  border-radius: 34px;
  box-shadow: 0 34px 86px rgba(37,49,58,.17);
  padding: 22px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.server-command::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(circle at 80% 10%, rgba(116,189,67,.20), transparent 30%),
    radial-gradient(circle at 12% 92%, rgba(39,174,182,.13), transparent 30%);
  pointer-events: none;
}
.server-command > * { position: relative; z-index: 1; }
.server-command__top,
.server-command__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--hl-muted);
  font-size: 13px;
  font-weight: 900;
}
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hl-green-deep);
  background: var(--hl-green-soft);
  border-radius: 999px;
  padding: 7px 11px;
}
.live-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hl-green);
  box-shadow: 0 0 0 7px rgba(116,189,67,.16);
}
.server-command__body {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 18px;
  margin: 22px 0;
}
.rack-panel {
  background: linear-gradient(180deg, var(--hl-graphite) 0%, #172228 100%);
  border-radius: 24px;
  padding: 18px;
  min-height: 340px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 18px 34px rgba(37,49,58,.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rack-panel__header {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
}
.rack-panel__header span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
}
.rack-panel__header span:first-child { background: var(--hl-green); }
.rack-unit {
  height: 50px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  margin: 9px 0;
  display: grid;
  grid-template-columns: 14px repeat(3, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0 12px;
}
.rack-unit i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hl-green);
  box-shadow: 0 0 18px rgba(116,189,67,.85);
}
.rack-unit b {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.rack-unit--active {
  background: rgba(116,189,67,.18);
  border-color: rgba(116,189,67,.44);
}
.rack-base {
  margin-top: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  padding: 12px;
  text-align: center;
}
.metric-stack {
  display: grid;
  gap: 12px;
  align-content: stretch;
}
.metric-card {
  background: #fff;
  border: 1px solid var(--hl-border);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 12px 26px rgba(37,49,58,.07);
}
.metric-card--green {
  background: linear-gradient(135deg, var(--hl-green-soft), #fff);
  border-color: rgba(116,189,67,.34);
}
.metric-card small {
  display: block;
  color: var(--hl-green-dark);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-bottom: 5px;
}
.metric-card strong {
  display: block;
  color: var(--hl-graphite);
  font-size: 20px;
  letter-spacing: -.03em;
}
.metric-card span {
  display: block;
  margin-top: 4px;
  color: var(--hl-muted);
  font-size: 13.5px;
  line-height: 1.35;
}
.server-command__footer {
  justify-content: center;
  flex-wrap: wrap;
}
.server-command__footer span {
  background: var(--hl-warm-light);
  border: 1px solid var(--hl-border);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--hl-graphite);
}
.floating-tech {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 1px solid var(--hl-border);
  border-radius: 999px;
  padding: 11px 15px;
  color: var(--hl-graphite);
  font-weight: 950;
  box-shadow: 0 16px 38px rgba(37,49,58,.12);
  white-space: nowrap;
}
.floating-tech::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hl-green);
  margin-right: 8px;
}
.floating-tech--one { left: -8px; top: 54px; }
.floating-tech--two { right: -14px; top: 130px; }
.floating-tech--three { left: 34px; bottom: 62px; }

.intro-v4 {
  background: var(--hl-graphite);
  padding: 30px 0;
}
.intro-strip--v4 {
  background: transparent;
  border: 0;
  gap: 16px;
  overflow: visible;
}
.intro-strip--v4 div {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 24px;
  position: relative;
}
.intro-strip--v4 .intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--hl-green);
  color: var(--hl-graphite);
  font-weight: 950;
  margin-bottom: 14px;
}
.intro-strip--v4 strong {
  color: #fff;
  font-size: 19px;
}
.intro-strip--v4 div > span:last-child {
  color: rgba(255,255,255,.72);
  line-height: 1.42;
}

/* Desactivar estilos del slider V3 cuando no existe slider */
.hero--v4 .hero-slider,
.hero--v4 .hero-slide,
.hero--v4 .hero-slider__dots { display: none; }

@media (max-width: 1100px) {
  .hero__grid--v4 { grid-template-columns: 1fr; }
  .hero__visual--v4 { min-height: auto; }
  .server-command { max-width: 760px; }
}
@media (max-width: 860px) {
  .hero--v4 { padding: 64px 0 58px; }
  .hero-proof-row,
  .server-command__body,
  .intro-strip--v4 { grid-template-columns: 1fr; }
  .floating-tech { display: none; }
  .rack-panel { min-height: 300px; }
}
@media (max-width: 560px) {
  .hero--v4 .eyebrow { font-size: 11px; letter-spacing: .08em; }
  .server-command { padding: 16px; border-radius: 24px; }
  .server-command__top { align-items: flex-start; flex-direction: column; }
  .rack-panel { min-height: 280px; }
  .metric-card { padding: 15px; }
}


/* ==============================
   V5 HERO REDESIGN
   ============================== */
.hero--v5 {
  padding: 52px 0 42px;
  background:
    radial-gradient(circle at 92% 10%, rgba(114,191,68,.22), transparent 20%),
    radial-gradient(circle at 8% 90%, rgba(242,201,76,.18), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #fbfaf4 46%, #f4f1e7 100%);
}
.hero--v5::before {
  mask-image: linear-gradient(90deg, rgba(0,0,0,.95), rgba(0,0,0,.35) 62%, transparent 88%);
}
.hero__grid--v5 {
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr);
  gap: 42px;
  align-items: start;
}
.hero__content--v5 { padding-top: 6px; }
.hero__content--v5 h1 { font-size: clamp(42px, 5.6vw, 76px); line-height: .96; margin-bottom: 0; }
.hero__content--v5 .hero__lead { margin-top: 20px; max-width: 720px; }
.hero-brand-strip {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px;
}
.brand-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px;
  background: rgba(255,255,255,.92); border: 1px solid var(--hl-border); border-radius: 999px;
  box-shadow: var(--hl-shadow-soft); font-weight: 900; color: var(--hl-charcoal);
}
.brand-chip b {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; font-size: 13px; line-height: 1; font-family: Inter, system-ui, sans-serif;
}
.brand-chip--linux b { background: #e8f4df; color: #356d28; }
.brand-chip--windows b { background: #eaf4fb; color: #15639b; }
.brand-chip--cpanel b { background: #fff0e5; color: #ba5a16; font-size: 11px; }
.hero-points-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px;
}
.hero-points-grid div {
  position: relative; background: rgba(255,255,255,.74); border: 1px solid var(--hl-border);
  border-radius: 20px; padding: 18px 18px 18px 48px; box-shadow: var(--hl-shadow-soft);
}
.hero-points-grid div::before {
  content: ""; position: absolute; left: 18px; top: 22px; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--hl-green), var(--hl-yellow)); box-shadow: 0 0 0 6px rgba(114,191,68,.14);
}
.hero-points-grid strong { display: block; font-size: 16.5px; line-height: 1.2; }
.hero-points-grid span { display: block; color: var(--hl-muted); margin-top: 6px; font-size: 14px; }
.hero__actions--v5 { margin-top: 26px; }
.hero-mini-proof {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.hero-mini-proof span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 12px;
  border-radius: 999px; background: rgba(37,49,58,.06); color: var(--hl-slate); font-size: 13.5px; font-weight: 700;
}
.hero-mini-proof strong { color: var(--hl-charcoal); }
.hero__visual--v5 { padding-top: 0; }
.hero-stage {
  position: relative; min-height: 560px; isolation: isolate;
}
.hero-stage__grid {
  position: absolute; inset: 18px 14px 50px 40px; border-radius: 32px;
  background:
    linear-gradient(rgba(37,49,58,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,49,58,.04) 1px, transparent 1px);
  background-size: 26px 26px;
  background-color: rgba(255,255,255,.35);
  border: 1px solid rgba(37,49,58,.06);
}
.hero-stage::before {
  content: ""; position: absolute; inset: 90px 0 auto auto; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(114,191,68,.16); filter: blur(10px); z-index: 0;
}
.hero-stage::after {
  content: ""; position: absolute; inset: auto auto 70px 10px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(242,201,76,.14); filter: blur(14px); z-index: 0;
}
.hero-stack-card {
  position: absolute; inset: 44px 36px 82px 24px; z-index: 2;
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.75);
  border-radius: 30px; box-shadow: 0 30px 80px rgba(37,49,58,.14);
  backdrop-filter: blur(14px); overflow: hidden;
}
.hero-stack-card__top,
.hero-stack-card__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 16px 22px; font-size: 13px; font-weight: 800; color: var(--hl-slate);
}
.hero-stack-card__top { border-bottom: 1px solid rgba(37,49,58,.08); }
.hero-stack-card__bottom { border-top: 1px solid rgba(37,49,58,.08); flex-wrap: wrap; }
.hero-stack-card__bottom span {
  display: inline-flex; min-height: 30px; align-items: center; padding: 6px 10px; border-radius: 999px;
  background: rgba(37,49,58,.05); color: var(--hl-charcoal); font-weight: 800;
}
.live-status { display: inline-flex; align-items: center; gap: 8px; color: var(--hl-green-dark); }
.live-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--hl-green); box-shadow: 0 0 0 6px rgba(114,191,68,.15); }
.hero-stack-card__body {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; padding: 22px;
}
.hero-rack-visual {
  display: flex; align-items: center; justify-content: center; min-height: 100%;
  padding: 18px; border-radius: 24px; background: linear-gradient(180deg, #f8f8f2, #eef2e7);
}
.hero-rack-visual img { width: 100%; max-width: 250px; filter: drop-shadow(0 18px 32px rgba(37,49,58,.18)); }
.hero-stack-metrics { display: grid; gap: 14px; align-content: center; }
.hero-metric {
  border: 1px solid var(--hl-border); border-radius: 20px; background: #fff; padding: 16px 18px; box-shadow: 0 10px 22px rgba(37,49,58,.05);
}
.hero-metric--primary { background: linear-gradient(135deg, #eff8e7, #ffffff); border-color: rgba(114,191,68,.34); }
.hero-metric small { display: block; color: var(--hl-green-dark); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }
.hero-metric strong { display: block; margin-top: 4px; font-size: 20px; letter-spacing: -.02em; }
.hero-metric span { display: block; color: var(--hl-muted); margin-top: 5px; font-size: 14px; }
.hero-float {
  position: absolute; z-index: 3; background: rgba(255,255,255,.96); border: 1px solid rgba(37,49,58,.08); border-radius: 22px;
  box-shadow: 0 22px 44px rgba(37,49,58,.12); padding: 16px 18px;
}
.hero-float small { display: block; color: var(--hl-green-dark); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 900; }
.hero-float strong { display: block; margin-top: 6px; font-size: 18px; line-height: 1.15; }
.hero-float span { display: block; margin-top: 6px; color: var(--hl-muted); font-size: 13.5px; }
.hero-float--brands { left: -6px; top: 0; width: 210px; }
.hero-float__label { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--hl-muted); font-weight: 900; margin-bottom: 10px; }
.hero-logo-pills { display: flex; flex-direction: column; gap: 8px; }
.hero-logo-pill {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px;
  border-radius: 14px; background: rgba(37,49,58,.04); font-weight: 900; color: var(--hl-charcoal);
}
.hero-logo-pill b {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 8px; line-height: 1; font-size: 12px; font-family: Inter, system-ui, sans-serif;
}
.hero-logo-pill em { font-style: normal; }
.hero-logo-pill--linux b { background: #e8f4df; color: #356d28; }
.hero-logo-pill--windows b { background: #eaf4fb; color: #15639b; }
.hero-logo-pill--cpanel b { background: #fff0e5; color: #ba5a16; }
.hero-float--speed { right: 0; top: 30px; width: 230px; }
.hero-float--support { right: 8px; bottom: 14px; width: 250px; }
.intro-v5 { padding: 0 0 28px; margin-top: -12px; position: relative; z-index: 4; background: transparent; }
.intro-v5__wrap {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.intro-v5__wrap article {
  background: #fff; border: 1px solid var(--hl-border); border-radius: 24px; padding: 24px; box-shadow: var(--hl-shadow-soft);
}
.intro-v5__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px;
  border-radius: 16px; background: linear-gradient(135deg, var(--hl-green-soft), #fff8df); font-size: 22px;
}
.intro-v5__wrap strong { display: block; margin-top: 14px; font-size: 20px; letter-spacing: -.02em; }
.intro-v5__wrap p { margin: 8px 0 0; color: var(--hl-muted); }
@media (max-width: 1100px) {
  .hero__grid--v5 { grid-template-columns: 1fr; }
  .hero-stage { min-height: 600px; max-width: 760px; margin: 0 auto; }
  .intro-v5__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero--v5 { padding: 36px 0 30px; }
  .hero-points-grid,
  .intro-v5__wrap { grid-template-columns: 1fr; }
  .hero-stage { min-height: 540px; }
  .hero-stack-card { inset: 48px 12px 110px; }
  .hero-stack-card__body { grid-template-columns: 1fr; }
  .hero-rack-visual img { max-width: 190px; }
  .hero-float--brands { position: relative; left: auto; top: auto; width: auto; margin: 0 14px 12px 14px; }
  .hero-float--speed { right: 12px; top: 16px; width: 210px; }
  .hero-float--support { right: 12px; bottom: 14px; width: 220px; }
}
@media (max-width: 560px) {
  .hero__content--v5 h1 { font-size: clamp(34px, 9vw, 46px); }
  .hero-brand-strip { gap: 8px; }
  .brand-chip { font-size: 13px; padding: 9px 12px; }
  .hero-mini-proof { display: grid; }
  .hero-stage { min-height: 560px; }
  .hero-stack-card { inset: 88px 0 118px; border-radius: 24px; }
  .hero-float { padding: 14px 15px; }
  .hero-float--speed { width: 180px; }
  .hero-float--support { width: 190px; }
}


/* ==============================
   V6 HERO AND HOSTING FLOW
   ============================== */
.hero--v6 { padding: 42px 0 34px; }
.hero__grid--v6 { align-items: center; gap: 46px; }
.hero__content--v6 .hero__lead { max-width: 730px; }
.hero-feature-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; max-width: 760px; }
.hero-feature-card { position: relative; background: rgba(255,255,255,.86); border: 1px solid var(--hl-border); border-radius: 24px; padding: 18px 18px 18px 54px; box-shadow: var(--hl-shadow-soft); overflow: hidden; }
.hero-feature-card::before { content: ""; position: absolute; left: 20px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--hl-green), var(--hl-yellow)); box-shadow: 0 0 0 7px rgba(114,191,68,.14); }
.hero-feature-card::after { content: ""; position: absolute; right: -22px; bottom: -22px; width: 84px; height: 84px; border-radius: 50%; background: rgba(114,191,68,.07); }
.hero-feature-card small { display: block; color: var(--hl-green-dark); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; }
.hero-feature-card strong { display: block; margin-top: 5px; font-size: 18px; line-height: 1.18; letter-spacing: -.02em; }
.hero-feature-card p { margin: 7px 0 0; color: var(--hl-muted); font-size: 14px; line-height: 1.45; }
.hero-feature-card--cpanel { transform: translateY(10px); }
.hero-feature-card--speed { transform: translateY(-4px); }
.hero-feature-card--security { transform: translateY(14px); }
.hero__actions--v6 { justify-content: center; margin-top: 28px; gap: 16px; }
.btn--hero-lg { min-height: 62px; min-width: 240px; padding: 16px 30px; font-size: 17px; }
.hero-stage--v6 { min-height: 560px; }
.intro-v6 { margin-top: 4px; }
.hosting-home-section .section-heading { max-width: 900px; }
.hosting-card { background: linear-gradient(180deg, #ffffff 0%, #fbfaf4 100%); }
.hosting-card::after { background: var(--hl-cyan); opacity: .42; }
.hosting-home-section .plans-note { margin-top: 26px; }
@media (max-width: 1100px) { .hero-feature-map { max-width: none; } }
@media (max-width: 860px) { .hero--v6 { padding: 34px 0 26px; } .hero-feature-map { grid-template-columns: 1fr; } .hero-feature-card, .hero-feature-card--cpanel, .hero-feature-card--speed, .hero-feature-card--security { transform: none; } .hero__actions--v6 { flex-direction: column; } .btn--hero-lg { width: 100%; } }


/* ==============================
   V7 HOSTING LEON ORIGINAL PALETTE + DATACENTER ANIMATION
   ============================== */
:root {
  --hl-green: #8cc63f;
  --hl-green-dark: #4f8f2f;
  --hl-green-soft: #edf7e4;
  --hl-olive: #e6eed9;
  --hl-warm: #f6f5ef;
  --hl-warm-light: #ffffff;
  --hl-yellow: #f7b731;
  --hl-cyan: #1ba6b1;
  --hl-charcoal: #30383d;
  --hl-charcoal-2: #20292e;
  --hl-slate: #4d595f;
  --hl-muted: #6d7771;
  --hl-border: #dfe5d6;
}
.hero--servers,
.hero--v5,
.hero--v6 {
  background:
    radial-gradient(circle at 90% 8%, rgba(140,198,63,.24), transparent 22%),
    radial-gradient(circle at 10% 88%, rgba(247,183,49,.16), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #fafaf4 45%, #f3f5ec 100%);
}
.btn--accent {
  background: linear-gradient(135deg, var(--hl-green), #a7dc58);
  color: #243033;
}
.btn--accent:hover {
  background: linear-gradient(135deg, #9bd34e, #b7e66d);
}
.btn--soft {
  background: #ffffff;
  border-color: rgba(140,198,63,.45);
  color: var(--hl-charcoal);
}
.brand-chip,
.hero-feature-card,
.hero-stack-card,
.intro-v5__wrap article,
.server-card {
  border-color: rgba(140,198,63,.22);
}
.hero-feature-card::before,
.server-card::after {
  background: linear-gradient(135deg, var(--hl-green), var(--hl-yellow));
}
.hero-feature-card small,
.hero-metric small,
.eyebrow {
  color: var(--hl-green-dark);
}

/* Datacenter animated section */
.datacenter-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(140,198,63,.12), transparent 24%),
    radial-gradient(circle at 86% 82%, rgba(247,183,49,.12), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #f6f5ef 100%);
}
.datacenter-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 58px;
  align-items: center;
}
.datacenter-copy h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -.052em;
}
.datacenter-copy p {
  color: var(--hl-muted);
  font-size: 18px;
}
.datacenter-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.datacenter-points span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hl-border);
  box-shadow: var(--hl-shadow-soft);
  font-weight: 850;
}
.datacenter-map {
  position: relative;
  min-height: 470px;
  border-radius: 34px;
  background:
    linear-gradient(rgba(48,56,61,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,56,61,.045) 1px, transparent 1px),
    radial-gradient(circle at 52% 45%, rgba(140,198,63,.17), transparent 32%),
    rgba(255,255,255,.78);
  background-size: 28px 28px, 28px 28px, auto, auto;
  border: 1px solid rgba(140,198,63,.24);
  box-shadow: 0 26px 70px rgba(48,56,61,.11);
  overflow: hidden;
}
.map-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 210px;
  min-height: 150px;
  border-radius: 26px;
  background: linear-gradient(135deg, #30383d, #20292e);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
  box-shadow: 0 26px 56px rgba(32,41,46,.24);
  z-index: 4;
}
.map-core small {
  color: #bfe98f;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
}
.map-core strong {
  margin-top: 5px;
  font-size: 28px;
  line-height: 1;
}
.map-core span {
  color: rgba(255,255,255,.75);
  margin-top: 8px;
  font-size: 13px;
}
.map-node {
  position: absolute;
  width: 124px;
  min-height: 78px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(140,198,63,.28);
  box-shadow: 0 20px 44px rgba(48,56,61,.10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  z-index: 3;
  animation: nodeFloat 4.8s ease-in-out infinite;
}
.map-node strong {
  color: var(--hl-green-dark);
  font-size: 24px;
  line-height: 1;
}
.map-node span {
  color: var(--hl-muted);
  font-size: 13px;
  margin-top: 4px;
  font-weight: 800;
}
.map-node--mx { left: 8%; top: 20%; animation-delay: .1s; }
.map-node--us { right: 8%; top: 18%; animation-delay: .7s; }
.map-node--eu { left: 12%; bottom: 16%; animation-delay: 1.1s; }
.map-node--global { right: 12%; bottom: 14%; animation-delay: 1.6s; }
.map-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(140,198,63,.85), transparent);
  transform-origin: left center;
  z-index: 2;
  opacity: .8;
}
.map-line::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hl-yellow);
  box-shadow: 0 0 0 5px rgba(247,183,49,.16);
  animation: packetMove 2.8s linear infinite;
}
.map-line--a { width: 290px; left: 22%; top: 35%; transform: rotate(14deg); }
.map-line--b { width: 300px; left: 25%; top: 60%; transform: rotate(-20deg); }
.map-line--c { width: 280px; left: 46%; top: 50%; transform: rotate(34deg); }
.map-line--b::after { animation-delay: .6s; }
.map-line--c::after { animation-delay: 1.2s; }
.map-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(140,198,63,.28);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}
.map-orbit--one { width: 330px; height: 330px; animation: orbitPulse 5.6s ease-in-out infinite; }
.map-orbit--two { width: 430px; height: 430px; animation: orbitPulse 6.8s ease-in-out infinite reverse; }
@keyframes packetMove {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 10px); opacity: 0; }
}
@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes orbitPulse {
  0%, 100% { opacity: .35; transform: translate(-50%,-50%) scale(.98); }
  50% { opacity: .75; transform: translate(-50%,-50%) scale(1.02); }
}
@media (max-width: 1100px) {
  .datacenter-grid { grid-template-columns: 1fr; }
  .datacenter-map { max-width: 760px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .datacenter-map { min-height: 560px; }
  .map-core { width: 190px; min-height: 130px; }
  .map-node { width: 112px; min-height: 70px; padding: 13px; }
  .map-node--mx { left: 4%; top: 12%; }
  .map-node--us { right: 4%; top: 12%; }
  .map-node--eu { left: 4%; bottom: 12%; }
  .map-node--global { right: 4%; bottom: 12%; }
  .map-line { display: none; }
}


/* ==============================
   V8 MARKETING REDESIGN
   ============================== */
:root {
  --hl-green: #8dc63f;
  --hl-green-dark: #5aa02c;
  --hl-green-soft: #eef8de;
  --hl-yellow: #ffc533;
  --hl-cyan: #12b7c9;
  --hl-charcoal: #2f3438;
  --hl-charcoal-2: #1f2528;
  --hl-slate: #536168;
  --hl-muted: #68757a;
  --hl-border: #d8e3cb;
  --hl-warm: #f7f8ef;
  --hl-warm-light: #fffef9;
}
body { background: #fffef9; }
.eyebrow { color: var(--hl-green-dark); }
.hero--servers, .hero--v5, .hero--v6 {
  background:
    radial-gradient(circle at 86% 10%, rgba(18,183,201,.20), transparent 22%),
    radial-gradient(circle at 16% 90%, rgba(255,197,51,.16), transparent 24%),
    radial-gradient(circle at 88% 76%, rgba(141,198,63,.18), transparent 18%),
    linear-gradient(135deg, #ffffff 0%, #fbfff5 42%, #f7f8ef 100%);
}
.brand-chip--linux b { background: #edf8df; color: #5aa02c; }
.brand-chip--windows b { background: #e6f7fb; color: #11859a; }
.brand-chip--cpanel b { background: #fff4dd; color: #db8b00; }
.btn--accent {
  background: linear-gradient(135deg, var(--hl-green) 0%, #b5dd57 100%);
  color: #253034;
  box-shadow: 0 18px 30px rgba(141,198,63,.32);
}
.btn--accent:hover {
  background: linear-gradient(135deg, #95ce45 0%, #c6eb6b 100%);
}
.btn--soft {
  background: linear-gradient(135deg, #ffffff 0%, #f3f8ea 100%);
  border-color: rgba(141,198,63,.4);
}
.hero-feature-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,255,245,.94));
}
.hero-feature-card::after { background: rgba(18,183,201,.08); }
.hero-stack-card { border: 1px solid rgba(141,198,63,.20); }
.hero-stack-card__top { background: linear-gradient(90deg, rgba(141,198,63,.10), rgba(18,183,201,.07)); }
.intro-v5__wrap article {
  background: linear-gradient(180deg, #ffffff 0%, #fbfff5 100%);
}

/* Datacenter vivid section */
.datacenter-section--v8 {
  background: linear-gradient(135deg, #2f3438 0%, #374247 60%, #22333a 100%);
  color: #fff;
}
.datacenter-copy--v8 .eyebrow { color: #bde96a; }
.datacenter-copy--v8 h2 { margin: 0; font-size: clamp(34px, 5vw, 54px); line-height: 1.03; letter-spacing: -.05em; }
.datacenter-copy--v8 p { color: rgba(255,255,255,.82); font-size: 18px; }
.datacenter-grid--v8 { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: center; }
.datacenter-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 28px; }
.datacenter-stats article {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 18px 18px 16px;
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
}
.datacenter-stats strong { display: block; color: var(--hl-yellow); font-size: 30px; line-height: 1; }
.datacenter-stats span { display: block; margin-top: 8px; color: rgba(255,255,255,.84); font-weight: 800; }
.datacenter-map--v8 {
  min-height: 500px;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(141,198,63,.14), rgba(18,183,201,.10));
  background-size: 28px 28px, 28px 28px, auto;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 26px 80px rgba(0,0,0,.22);
}
.map-core--v8 { background: linear-gradient(135deg, #8dc63f 0%, #12b7c9 100%); color: #253034; }
.map-core--v8 small { color: rgba(37,48,52,.80); }
.map-core--v8 span { color: rgba(37,48,52,.76); }
.map-node {
  background: linear-gradient(180deg, #ffffff 0%, #f6fff0 100%);
  border-color: rgba(141,198,63,.35);
}
.map-node strong { color: var(--hl-green-dark); }
.map-node--global strong { font-size: 18px; }
.map-glow {
  position: absolute; border-radius: 50%; filter: blur(28px); z-index: 0; opacity: .7;
}
.map-glow--a { width: 180px; height: 180px; background: rgba(18,183,201,.28); right: 6%; top: 8%; animation: glowMove 5s ease-in-out infinite; }
.map-glow--b { width: 160px; height: 160px; background: rgba(255,197,51,.24); left: 4%; bottom: 8%; animation: glowMove 6s ease-in-out infinite reverse; }
.map-pulse {
  position: absolute; left: 50%; top: 50%; border: 2px solid rgba(141,198,63,.18); border-radius: 50%; transform: translate(-50%,-50%); z-index: 1;
}
.map-pulse--one { width: 240px; height: 240px; animation: mapPulse 2.8s ease-out infinite; }
.map-pulse--two { width: 300px; height: 300px; animation: mapPulse 2.8s ease-out 1.2s infinite; }
.map-line { height: 3px; background: linear-gradient(90deg, transparent, rgba(255,197,51,.92), rgba(18,183,201,.92), transparent); opacity: 1; }
.map-line::after {
  width: 12px; height: 12px; top: -5px; background: #fff; box-shadow: 0 0 0 7px rgba(18,183,201,.18); animation-duration: 2.3s;
}
.map-line--a { width: 310px; left: 20%; top: 32%; transform: rotate(13deg); }
.map-line--b { width: 320px; left: 22%; top: 62%; transform: rotate(-18deg); }
.map-line--c { width: 260px; left: 48%; top: 46%; transform: rotate(31deg); }
.map-line--d { width: 250px; left: 45%; top: 56%; transform: rotate(-30deg); }
.map-line--d::after { animation-delay: .9s; }
@keyframes glowMove {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(8px,-12px) scale(1.08); }
}
@keyframes mapPulse {
  0% { opacity: .0; transform: translate(-50%,-50%) scale(.7); }
  25% { opacity: .7; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.35); }
}

/* Showcases */
.showcase-section { overflow: hidden; }
.showcase-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 52px; align-items: center; }
.showcase-grid--reverse { grid-template-columns: 1.06fr .94fr; }
.showcase-copy h2 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.04; letter-spacing: -.05em; }
.showcase-copy p { color: var(--hl-muted); font-size: 18px; }
.showcase-points { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 28px; }
.showcase-points span {
  display: inline-flex; min-height: 40px; align-items: center; padding: 9px 13px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(141,198,63,.28); box-shadow: var(--hl-shadow-soft); font-weight: 850;
}
.showcase-section--hosting { background: linear-gradient(135deg, #eef8de 0%, #ffffff 100%); }
.showcase-section--vps { background: linear-gradient(135deg, #263136 0%, #334248 100%); color: #fff; }
.showcase-section--vps .showcase-copy .eyebrow { color: #bde96a; }
.showcase-section--vps .showcase-copy p { color: rgba(255,255,255,.80); }
.showcase-points--dark span { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.14); }
.showcase-visual { position: relative; min-height: 390px; }
.showcase-visual__back {
  position: absolute; inset: 24px 12px 18px 22px; border-radius: 34px;
  background: linear-gradient(135deg, rgba(141,198,63,.28), rgba(18,183,201,.18));
  border: 1px solid rgba(141,198,63,.18); box-shadow: 0 26px 60px rgba(47,52,56,.10);
}
.showcase-visual img {
  position: absolute; inset: 30px auto auto 40px; width: calc(100% - 80px); max-width: 440px; z-index: 2;
  filter: drop-shadow(0 26px 46px rgba(47,52,56,.18));
}
.showcase-float {
  position: absolute; z-index: 3; background: #fff; border: 1px solid rgba(141,198,63,.28); border-radius: 20px; padding: 14px 16px;
  box-shadow: 0 20px 36px rgba(47,52,56,.14);
}
.showcase-float strong { display: block; color: var(--hl-charcoal); font-size: 18px; }
.showcase-float span { display: block; color: var(--hl-muted); margin-top: 4px; font-size: 13px; font-weight: 800; }
.showcase-float--hosting-a { left: 0; bottom: 52px; }
.showcase-float--hosting-b { right: 12px; top: 26px; }
.showcase-float--vps-a { left: 6px; top: 34px; }
.showcase-float--vps-b { right: 12px; bottom: 44px; }

/* Pricing sections separation */
.hosting-home-section--v8 {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbef 100%);
  border-top: 1px solid rgba(141,198,63,.16);
  border-bottom: 1px solid rgba(141,198,63,.16);
}
.plans-section--v8 {
  background: linear-gradient(135deg, #f5f8fa 0%, #eef4f7 100%);
  border-top: 1px solid rgba(18,183,201,.14);
}
.hosting-home-section--v8 .server-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfff5 100%);
}
.plans-section--v8 .server-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}
.hosting-home-section--v8 .server-card::after { background: linear-gradient(90deg, var(--hl-green), var(--hl-yellow)); }
.plans-section--v8 .server-card::after { background: linear-gradient(90deg, var(--hl-cyan), var(--hl-green)); }
.performance-section {
  background: linear-gradient(135deg, #ffffff 0%, #fbfff5 52%, #f6f8fb 100%);
}
.feature-showcase article { background: linear-gradient(180deg, #ffffff 0%, #fbfff5 100%); }
.feature-icon { background: linear-gradient(135deg, rgba(141,198,63,.18), rgba(18,183,201,.12)); }
.section--warm.os-section { background: linear-gradient(135deg, #fffef9 0%, #f6f8ef 100%); }
.faq-section--v8 { background: linear-gradient(135deg, #2f3438 0%, #394348 100%); color: #fff; }
.faq-section--v8 .section-heading p,
.faq-section--v8 .section-heading .eyebrow { color: #bde96a; }
.faq-section--v8 .faq-grid details { background: rgba(255,255,255,.92); }
.final-cta__box { background: linear-gradient(135deg, #8dc63f 0%, #1ea8b8 100%); }
.final-cta__box .eyebrow, .final-cta__box h2, .final-cta__box p { color: #203033; }
.final-cta__box p { color: rgba(32,48,51,.85); }
.site-footer { background: #20272b; }

@media (max-width: 1100px) {
  .datacenter-grid--v8, .showcase-grid, .showcase-grid--reverse { grid-template-columns: 1fr; }
  .showcase-visual { max-width: 720px; width: 100%; margin: 0 auto; }
}
@media (max-width: 780px) {
  .datacenter-stats { grid-template-columns: 1fr; }
  .showcase-visual { min-height: 340px; }
  .showcase-visual img { left: 20px; width: calc(100% - 40px); }
}
@media (max-width: 560px) {
  .datacenter-map--v8 { min-height: 560px; }
  .showcase-visual { min-height: 300px; }
  .showcase-float { padding: 12px 14px; }
  .showcase-float strong { font-size: 16px; }
}


/* ==============================
   V9 HEADER / MENU REDESIGN
   ============================== */
.topbar {
  background: linear-gradient(90deg, rgba(9,18,20,.96) 0%, rgba(19,34,28,.96) 38%, rgba(10,26,24,.96) 100%);
  color: #dce8dd;
  border-bottom: 1px solid rgba(141,198,63,.18);
}
.topbar__inner { min-height: 42px; }
.topbar a { color: rgba(220,232,221,.85); font-weight: 700; }
.topbar a:hover { color: #b7ea57; }
.navbar {
  position: relative;
  background:
    radial-gradient(circle at 8% 50%, rgba(141,198,63,.18), transparent 26%),
    radial-gradient(circle at 82% 48%, rgba(18,183,201,.15), transparent 22%),
    linear-gradient(90deg, #0f1718 0%, #182125 42%, #121a1e 100%);
  border-bottom: 1px solid rgba(141,198,63,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(141,198,63,.04), transparent 35%, rgba(18,183,201,.03) 72%, transparent);
}
.navbar__inner {
  min-height: 94px;
  position: relative;
  z-index: 1;
}
.brand {
  position: relative;
  padding-right: 18px;
  margin-right: 10px;
}
.brand::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, transparent, rgba(141,198,63,.45), transparent);
}
.custom-logo { max-width: 260px; filter: drop-shadow(0 0 18px rgba(141,198,63,.16)); }
.brand__text { color: #f5fff8; }
.primary-nav__list { gap: 8px; }
.primary-nav__list a {
  position: relative;
  display: block;
  padding: 12px 14px;
  color: rgba(236,244,237,.92);
  font-weight: 850;
  font-size: 14px;
  letter-spacing: .01em;
  border-radius: 999px;
  transition: all .22s ease;
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(141,198,63,.18), rgba(18,183,201,.14));
  box-shadow: inset 0 0 0 1px rgba(141,198,63,.24), 0 8px 18px rgba(0,0,0,.18);
}
.primary-nav__list a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hl-green), var(--hl-cyan));
  opacity: 0;
  transform: scaleX(.45);
  transition: .22s ease;
}
.primary-nav__list a:hover::after,
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .current_page_item > a::after {
  opacity: 1;
  transform: scaleX(1);
}
.menu-toggle span:not(.screen-reader-text) { background: #eaf4ee; }
.header-cta {
  margin-left: 14px;
  background: linear-gradient(135deg, #8dc63f 0%, #b5dc5b 100%);
  color: #223032;
  box-shadow: 0 18px 26px rgba(141,198,63,.26);
}
.header-cta:hover {
  background: linear-gradient(135deg, #9bd24b 0%, #c1e76e 100%);
  color: #1f2e30;
}
@media (max-width: 980px) {
  .navbar__inner { min-height: 84px; }
  .custom-logo { max-width: 220px; }
  .primary-nav {
    background: linear-gradient(180deg, rgba(16,24,25,.98), rgba(24,33,37,.98));
    border: 1px solid rgba(141,198,63,.18);
    box-shadow: 0 18px 30px rgba(0,0,0,.22);
  }
  .primary-nav__list a { color: #eef6ef; }
}


/* ==============================
   V10 HEADER POLISH
   ============================== */
.topbar {
  background: linear-gradient(90deg, #8dc63f 0%, #9fd74a 45%, #7fb637 100%);
  color: #243032;
  border-bottom: 0;
}
.topbar__inner--v10 {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar__links--v10 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}
.topbar__links--v10 a {
  color: #243032;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.topbar__links--v10 a:hover { color: #0d1719; }
.navbar {
  background:
    radial-gradient(circle at 10% 50%, rgba(141,198,63,.20), transparent 22%),
    radial-gradient(circle at 86% 48%, rgba(18,183,201,.17), transparent 18%),
    linear-gradient(90deg, #091214 0%, #13201e 38%, #0d1618 100%);
}
.navbar__inner {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}
.brand {
  padding-right: 22px;
  margin-right: 0;
}
.brand::after {
  height: 58px;
  background: linear-gradient(180deg, transparent, rgba(141,198,63,.55), transparent);
}
.brand__default-logo,
.custom-logo {
  display: block;
  width: auto;
  max-width: 330px;
  max-height: 62px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(109,214,88,.14));
}
.primary-nav {
  margin-left: 0;
  min-width: 0;
}
.primary-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
}
.primary-nav__list li { flex: 0 0 auto; }
.primary-nav__list a {
  white-space: nowrap;
  padding: 11px 10px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .01em;
}
.header-cta {
  margin-left: 0;
  white-space: nowrap;
  min-height: 48px;
  padding: 11px 18px;
}
@media (max-width: 1180px) {
  .navbar__inner {
    grid-template-columns: auto auto;
    grid-template-areas: 'brand toggle' 'nav nav' 'cta cta';
    gap: 14px;
  }
  .brand { grid-area: brand; }
  .menu-toggle { grid-area: toggle; justify-self: end; display: block; }
  .primary-nav {
    grid-area: nav;
    margin-left: 0;
    width: 100%;
    display: none;
    background: linear-gradient(180deg, rgba(10,19,20,.98), rgba(19,30,32,.98));
    border: 1px solid rgba(141,198,63,.18);
    border-radius: 20px;
    padding: 10px;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .primary-nav__list a {
    white-space: normal;
    font-size: 14px;
    line-height: 1.2;
    padding: 12px 14px;
  }
  .header-cta {
    grid-area: cta;
    justify-self: start;
  }
}
@media (max-width: 680px) {
  .topbar__links--v10 {
    gap: 12px;
    padding: 6px 0;
  }
  .topbar__links--v10 a {
    font-size: 12px;
  }
  .brand__default-logo,
  .custom-logo {
    max-width: 250px;
    max-height: 52px;
  }
}


/* ==============================
   V11 HEADER VISUAL HIERARCHY FIX
   ============================== */
.topbar {
  background: linear-gradient(90deg, #1f2a2d 0%, #293438 100%);
  color: rgba(233,244,236,.82);
  border-top: 2px solid var(--hl-green);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.topbar__inner--v10 {
  min-height: 34px;
}
.topbar__links--v10 {
  gap: 18px;
}
.topbar__links--v10 a {
  color: rgba(233,244,236,.72);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topbar__links--v10 a:hover {
  color: #bde96a;
}
.navbar {
  background:
    radial-gradient(circle at 10% 50%, rgba(141,198,63,.22), transparent 21%),
    radial-gradient(circle at 86% 48%, rgba(18,183,201,.18), transparent 18%),
    linear-gradient(90deg, #081214 0%, #12211f 38%, #0c1618 100%);
}
.navbar__inner {
  min-height: 96px;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
}
.brand {
  padding-right: 26px;
}
.brand a {
  display: flex;
  align-items: center;
}
.brand__default-logo,
.custom-logo {
  max-width: 360px;
  max-height: 70px;
  filter: drop-shadow(0 0 18px rgba(141,198,63,.18));
}
.primary-nav__list {
  gap: 6px;
}
.primary-nav__list a {
  color: rgba(246,252,247,.94);
  padding: 11px 9px;
  font-size: 12.5px;
  font-weight: 800;
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a {
  background: linear-gradient(135deg, rgba(141,198,63,.22), rgba(18,183,201,.15));
  box-shadow: inset 0 0 0 1px rgba(141,198,63,.20), 0 8px 16px rgba(0,0,0,.16);
}
.header-cta {
  min-height: 52px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 18px 30px rgba(141,198,63,.34);
}
@media (max-width: 1280px) {
  .brand__default-logo,
  .custom-logo { max-width: 310px; }
  .primary-nav__list a { font-size: 12px; padding: 11px 8px; }
}
@media (max-width: 1180px) {
  .navbar__inner {
    grid-template-columns: auto auto;
    grid-template-areas: 'brand toggle' 'nav nav' 'cta cta';
    min-height: 88px;
  }
  .brand__default-logo,
  .custom-logo {
    max-width: 290px;
    max-height: 60px;
  }
  .topbar__links--v10 {
    gap: 14px;
  }
}
@media (max-width: 680px) {
  .topbar__inner--v10 { min-height: 38px; }
  .topbar__links--v10 a { font-size: 11px; }
  .brand__default-logo,
  .custom-logo {
    max-width: 235px;
    max-height: 50px;
  }
}


/* ==============================
   V12 HEADER FINAL TUNING
   ============================== */
.topbar {
  background: linear-gradient(90deg, #8dc63f 0%, #9fd74a 48%, #84bc38 100%);
  color: #ffffff;
  border-top: 0;
  border-bottom: 0;
}
.topbar__inner--v10 {
  min-height: 40px;
  justify-content: flex-end;
}
.topbar__links--v10 {
  justify-content: flex-end;
  gap: 24px;
}
.topbar__links--v10 a {
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}
.topbar__links--v10 a:hover {
  color: #f5fff0;
  opacity: .88;
}
.navbar {
  border-bottom: 4px solid var(--hl-green);
}
.brand__default-logo,
.custom-logo {
  max-width: 360px;
  max-height: 70px;
}
@media (max-width: 680px) {
  .topbar__links--v10 {
    justify-content: center;
    gap: 14px;
  }
  .topbar__links--v10 a {
    font-size: 11px;
  }
}


/* ==============================
   V13 HEADER LINK REFINEMENT
   ============================== */
.topbar__links--v10 {
  gap: 26px;
}
.topbar__links--v10 a {
  font-size: 12px;
  font-weight: 900;
}
.primary-nav__list {
  gap: 10px;
}
.primary-nav__list a {
  font-size: 14px;
  padding: 12px 12px;
}
@media (max-width: 1280px) {
  .primary-nav__list a {
    font-size: 13px;
    padding: 11px 10px;
  }
}
@media (max-width: 680px) {
  .topbar__links--v10 {
    gap: 10px;
  }
  .topbar__links--v10 a {
    font-size: 10.5px;
  }
}


/* ==============================
   V14 MENU SIZE + CLEANER LOGO
   ============================== */
.brand__default-logo,
.custom-logo {
  max-width: 350px;
  max-height: 68px;
  image-rendering: auto;
  filter: brightness(1.28) contrast(1.12) saturate(1.03) drop-shadow(0 0 14px rgba(141,198,63,.12));
}
.primary-nav__list {
  gap: 12px;
}
.primary-nav__list a {
  font-size: 15px;
  font-weight: 850;
  padding: 12px 12px;
  line-height: 1;
}
@media (max-width: 1320px) {
  .brand__default-logo,
  .custom-logo {
    max-width: 320px;
    max-height: 64px;
  }
  .primary-nav__list {
    gap: 10px;
  }
  .primary-nav__list a {
    font-size: 14px;
    padding: 12px 10px;
  }
}
@media (max-width: 1180px) {
  .brand__default-logo,
  .custom-logo {
    max-width: 285px;
    max-height: 58px;
  }
}


/* ==============================
   V15 LOGO AREA EMPHASIS + BIGGER MENU
   ============================== */
.brand {
  position: relative;
  padding: 14px 22px 14px 16px;
  margin-right: 6px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 50%, rgba(141,198,63,.22), transparent 28%),
    linear-gradient(90deg, rgba(24,42,39,.96) 0%, rgba(18,35,33,.94) 50%, rgba(17,33,31,.88) 100%);
  box-shadow: inset 0 0 0 1px rgba(141,198,63,.14), 0 12px 26px rgba(0,0,0,.18);
}
.brand::after {
  right: -14px;
  height: 62px;
  background: linear-gradient(180deg, transparent, rgba(141,198,63,.42), transparent);
}
.brand a {
  display: flex;
  align-items: center;
}
.brand__default-logo,
.custom-logo {
  max-width: 355px;
  max-height: 68px;
  image-rendering: auto;
  filter: brightness(1.02) contrast(1.04) saturate(1.02) drop-shadow(0 0 10px rgba(141,198,63,.10));
}
.primary-nav__list {
  gap: 12px;
}
.primary-nav__list a {
  font-size: 16px;
  font-weight: 850;
  padding: 13px 12px;
  line-height: 1;
}
@media (max-width: 1380px) {
  .brand__default-logo,
  .custom-logo { max-width: 330px; max-height: 64px; }
  .primary-nav__list a { font-size: 15px; padding: 12px 10px; }
}
@media (max-width: 1180px) {
  .brand {
    padding: 12px 16px;
    border-radius: 16px;
  }
  .brand__default-logo,
  .custom-logo { max-width: 285px; max-height: 58px; }
}


/* ==============================
   V16 STRONGER LOGO PANEL + LARGER MENU
   ============================== */
.brand {
  position: relative;
  padding: 12px 18px 12px 14px;
  margin-right: 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, #17332f 0%, #1f433c 55%, #14312d 100%);
  border: 1px solid rgba(141,198,63,.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 14px 28px rgba(0,0,0,.22),
    0 0 0 4px rgba(141,198,63,.06);
}
.brand::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(141,198,63,.12), transparent 34%, rgba(18,183,201,.10) 72%, transparent);
  opacity: .9;
}
.brand::after {
  right: -16px;
  height: 62px;
  background: linear-gradient(180deg, transparent, rgba(141,198,63,.55), transparent);
}
.brand a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}
.brand__default-logo,
.custom-logo {
  max-width: 355px;
  max-height: 68px;
  image-rendering: auto;
  filter: brightness(1.08) contrast(1.10) saturate(1.05) drop-shadow(0 0 10px rgba(141,198,63,.12));
}
.primary-nav__list {
  gap: 10px;
}
.primary-nav__list a {
  font-size: 17px;
  font-weight: 850;
  padding: 13px 10px;
  line-height: 1;
}
@media (max-width: 1400px) {
  .brand__default-logo,
  .custom-logo { max-width: 330px; max-height: 64px; }
  .primary-nav__list a { font-size: 16px; padding: 12px 9px; }
}
@media (max-width: 1280px) {
  .primary-nav__list { gap: 8px; }
  .primary-nav__list a { font-size: 15px; padding: 12px 8px; }
}
@media (max-width: 1180px) {
  .brand { padding: 10px 14px; }
  .brand__default-logo,
  .custom-logo { max-width: 285px; max-height: 58px; }
}


/* ==============================
   V17 REMOVE LOGO PANEL + WHITE HOSTING
   ============================== */
.brand {
  position: relative;
  padding: 0 24px 0 0;
  margin-right: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.brand::before {
  display: none;
}
.brand::after {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 62px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(141,198,63,.60), transparent);
}
.brand a {
  display: flex;
  align-items: center;
}
.brand__default-logo,
.custom-logo {
  max-width: 360px;
  max-height: 70px;
  image-rendering: auto;
  filter: none;
}
.primary-nav__list {
  gap: 8px;
}
.primary-nav__list a {
  font-size: 18px;
  font-weight: 850;
  padding: 13px 10px;
  line-height: 1;
}
@media (max-width: 1400px) {
  .brand__default-logo,
  .custom-logo { max-width: 335px; max-height: 66px; }
  .primary-nav__list a { font-size: 16px; padding: 12px 9px; }
}
@media (max-width: 1280px) {
  .primary-nav__list a { font-size: 15px; padding: 12px 8px; }
}
@media (max-width: 1180px) {
  .brand {
    padding-right: 18px;
  }
  .brand__default-logo,
  .custom-logo { max-width: 290px; max-height: 58px; }
}


/* ==============================
   V20 HERO REDESIGN
   ============================== */
.hero--v20 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f7fff8;
  padding: 76px 0 74px;
  background:
    radial-gradient(circle at 78% 15%, rgba(141,198,63,.24), transparent 22%),
    radial-gradient(circle at 92% 82%, rgba(18,183,201,.18), transparent 24%),
    linear-gradient(135deg, #071111 0%, #10201e 43%, #0c1719 100%);
}
.hero--v20::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 60%, transparent 92%);
  z-index: -2;
}
.hero--v20::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--hl-green), var(--hl-yellow), var(--hl-cyan));
}
.hero-v20__decor {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: .75;
  z-index: -1;
}
.hero-v20__decor--one {
  width: 240px;
  height: 240px;
  left: 4%;
  top: 12%;
  background: rgba(141,198,63,.18);
}
.hero-v20__decor--two {
  width: 320px;
  height: 320px;
  right: 8%;
  bottom: 4%;
  background: rgba(18,183,201,.15);
}
.hero-v20__grid {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(430px, 1.02fr);
  gap: 54px;
  align-items: center;
}
.hero-v20__copy h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(44px, 5.8vw, 76px);
  line-height: .96;
  letter-spacing: -.062em;
  text-shadow: 0 22px 46px rgba(0,0,0,.26);
}
.hero-v20__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hero-v20__kicker span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hl-green), #b7e85d);
  color: #132020;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}
.hero-v20__kicker em {
  font-style: normal;
  color: rgba(246,255,247,.76);
  font-weight: 850;
}
.hero-v20__lead {
  max-width: 740px;
  margin: 22px 0 0;
  color: rgba(246,255,247,.82);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.5;
}
.hero-v20__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}
.hero-v20__actions .btn--hero-lg {
  min-height: 64px;
  min-width: 235px;
  font-size: 17px;
}
.hero-v20__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}
.hero-v20__benefits article {
  min-height: 154px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}
.hero-v20__benefits span {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(141,198,63,.18);
  color: #bdf06d;
  font-weight: 950;
}
.hero-v20__benefits strong {
  display: block;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.18;
}
.hero-v20__benefits p {
  margin: 8px 0 0;
  color: rgba(246,255,247,.68);
  font-size: 14px;
  line-height: 1.45;
}
.hero-v20__visual {
  position: relative;
  min-height: 560px;
}
.cloud-console {
  position: absolute;
  inset: 38px 18px 40px 12px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,250,235,.90));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 34px 90px rgba(0,0,0,.30);
  overflow: hidden;
}
.cloud-console::before {
  content: "";
  position: absolute;
  inset: -80px -50px auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(141,198,63,.24);
}
.cloud-console__top {
  position: relative;
  z-index: 1;
  min-height: 58px;
  padding: 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #243033;
  font-weight: 900;
  border-bottom: 1px solid rgba(36,48,51,.09);
}
.console-dots {
  display: flex;
  gap: 7px;
}
.console-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--hl-green);
}
.console-dots i:nth-child(2) { background: var(--hl-yellow); }
.console-dots i:nth-child(3) { background: var(--hl-cyan); }
.cloud-console__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 22px;
  padding: 24px;
}
.server-core {
  min-height: 330px;
  border-radius: 26px;
  padding: 20px;
  background: linear-gradient(180deg, #142023, #263238);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.server-core__header {
  margin-bottom: 18px;
  color: #bdf06d;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
}
.server-core__rack {
  display: grid;
  grid-template-columns: 22px 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
}
.server-core__rack i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
}
.server-core__rack b {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.server-core__rack--active {
  background: linear-gradient(135deg, rgba(141,198,63,.32), rgba(18,183,201,.18));
}
.server-core__rack--active i { background: var(--hl-green); box-shadow: 0 0 0 7px rgba(141,198,63,.14); }
.console-metrics {
  display: grid;
  gap: 14px;
  align-content: center;
}
.console-metrics div {
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(141,198,63,.18);
  box-shadow: 0 12px 28px rgba(36,48,51,.06);
}
.console-metrics small {
  display: block;
  color: var(--hl-green-dark);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 950;
  font-size: 11px;
}
.console-metrics strong {
  display: block;
  margin-top: 5px;
  color: #243033;
  font-size: 22px;
}
.console-metrics span {
  display: block;
  margin-top: 5px;
  color: var(--hl-muted);
  font-size: 14px;
}
.cloud-console__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 24px 24px;
}
.cloud-console__bottom span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(36,48,51,.06);
  color: #243033;
  font-weight: 900;
}
.hero-v20__float {
  position: absolute;
  z-index: 4;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.56);
  box-shadow: 0 22px 48px rgba(0,0,0,.22);
  animation: heroFloatV20 4.8s ease-in-out infinite;
}
.hero-v20__float small {
  display: block;
  color: var(--hl-green-dark);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 950;
  font-size: 11px;
}
.hero-v20__float strong {
  display: block;
  margin-top: 5px;
  color: #243033;
  font-size: 18px;
}
.hero-v20__float--speed { right: 0; top: 4px; }
.hero-v20__float--secure { left: -8px; bottom: 48px; animation-delay: .8s; }
.hero-v20__float--email { right: 26px; bottom: 10px; animation-delay: 1.4s; }
@keyframes heroFloatV20 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 1120px) {
  .hero-v20__grid { grid-template-columns: 1fr; }
  .hero-v20__visual { max-width: 780px; width: 100%; margin: 0 auto; }
}
@media (max-width: 820px) {
  .hero--v20 { padding: 54px 0 58px; }
  .hero-v20__benefits { grid-template-columns: 1fr; }
  .hero-v20__visual { min-height: 680px; }
  .cloud-console { inset: 52px 0 80px; }
  .cloud-console__body { grid-template-columns: 1fr; }
  .server-core { min-height: auto; }
  .hero-v20__float--speed { right: 8px; top: 0; }
  .hero-v20__float--secure { left: 8px; bottom: 42px; }
  .hero-v20__float--email { right: 8px; bottom: 0; }
}
@media (max-width: 560px) {
  .hero-v20__copy h1 { font-size: clamp(36px, 10vw, 48px); }
  .hero-v20__actions .btn--hero-lg { width: 100%; min-width: 0; }
  .hero-v20__visual { min-height: 620px; }
  .cloud-console__top { font-size: 13px; }
  .cloud-console__body { padding: 18px; }
  .console-metrics strong { font-size: 19px; }
}


/* ==============================
   V21 HERO TUNING
   ============================== */
.hero--v20 {
  background:
    radial-gradient(circle at 76% 16%, rgba(141,198,63,.22), transparent 20%),
    radial-gradient(circle at 92% 82%, rgba(18,183,201,.10), transparent 22%),
    linear-gradient(135deg, #21443d 0%, #2d554b 36%, #355d51 100%);
}
.hero--v20::before {
  opacity: .45;
}
.hero-v20__grid {
  align-items: start;
}
.hero-v20__lead {
  max-width: 700px;
}
.hero-v20__visual {
  min-height: 520px;
  margin-left: -26px;
}
.cloud-console {
  inset: 6px 34px 42px 0;
}
.cloud-console__body--terminal {
  grid-template-columns: 1.06fr .94fr;
  align-items: stretch;
}
.terminal-panel {
  min-height: 340px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, #111a1b 0%, #0a1213 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.24);
}
.terminal-panel__top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  background: linear-gradient(180deg, #223033 0%, #182326 100%);
  color: #d5e6d8;
  font-size: 13px;
  font-weight: 800;
}
.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.terminal-dot--red { background: #ff6f61; }
.terminal-dot--yellow { background: #f8c84d; }
.terminal-dot--green { background: #67d57a; }
.terminal-panel__screen {
  padding: 18px 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  color: #d8fbe0;
  font-size: 14px;
  line-height: 1.55;
}
.terminal-panel__screen p {
  margin: 0 0 8px;
}
.terminal-prompt {
  color: #8fe261;
  font-weight: 800;
}
.terminal-ok {
  color: #6ee7a2;
}
.console-metrics {
  align-content: start;
  padding-top: 4px;
}
.hero-v20__float--speed {
  right: 14px;
  top: -12px;
}
.hero-v20__float--secure {
  left: 4px;
  bottom: 58px;
}
.hero-v20__float--email {
  right: 42px;
  bottom: 6px;
}
@media (max-width: 1120px) {
  .hero-v20__visual {
    margin-left: 0;
  }
}
@media (max-width: 820px) {
  .hero-v20__visual {
    min-height: 700px;
  }
  .cloud-console {
    inset: 18px 0 76px;
  }
  .cloud-console__body--terminal {
    grid-template-columns: 1fr;
  }
  .terminal-panel {
    min-height: 280px;
  }
}


/* ==============================
   V22 HERO SUBTITLE + TRUST BAND
   ============================== */
.hero-v20__lead {
  max-width: 740px;
}
.hero-trustband {
  position: relative;
  z-index: 3;
  margin-top: -34px;
  padding: 0 0 36px;
}
.hero-trustband__box {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 24px;
  align-items: center;
  padding: 30px 34px;
  border-radius: 30px;
  background: linear-gradient(135deg, #ffffff 0%, #fbfff6 100%);
  border: 1px solid rgba(141,198,63,.16);
  box-shadow: 0 24px 56px rgba(28,43,40,.12);
}
.hero-trustband__lead h2 {
  margin: 0;
  color: #1d2b2a;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.hero-trustband__lead p {
  margin: 12px 0 0;
  color: var(--hl-muted);
  font-size: 17px;
  line-height: 1.55;
}
.hero-trustband__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.hero-trustband__stats article {
  min-height: 176px;
  padding: 18px 16px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(36,48,51,.08);
  box-shadow: 0 12px 26px rgba(28,43,40,.08);
}
.hero-trustband__stats small {
  display: block;
  color: var(--hl-green-dark);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: 11px;
}
.hero-trustband__stats strong {
  display: block;
  margin-top: 10px;
  color: #1d2b2a;
  font-size: 28px;
  line-height: 1.05;
}
.hero-trustband__stats span {
  display: block;
  margin-top: 8px;
  color: var(--hl-muted);
  font-size: 14px;
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .hero-trustband__box { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hero-trustband { margin-top: -12px; }
  .hero-trustband__box { padding: 24px 20px; }
  .hero-trustband__stats { grid-template-columns: 1fr; }
  .hero-trustband__stats article { min-height: auto; }
}


/* ==============================
   V23 POST-HERO CLEANUP
   ============================== */
.intro-v5__wrap article {
  text-align: center;
}
.intro-v5__icon {
  margin: 0 auto;
}
.intro-v5__wrap strong,
.intro-v5__wrap p {
  text-align: center;
}


/* ==============================
   V24 INTRO SECTION + HOSTING SHOWCASE REWORK
   ============================== */
.intro-v5 {
  position: relative;
  overflow: hidden;
  padding: 26px 0 40px;
  margin-top: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(141,198,63,.12), transparent 24%),
    radial-gradient(circle at 90% 80%, rgba(18,183,201,.10), transparent 24%),
    linear-gradient(135deg, #f4f9ec 0%, #fbfff8 52%, #eef7f1 100%);
}
.intro-v5::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(29,43,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,43,42,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .45;
  pointer-events: none;
}
.intro-v5 .container {
  position: relative;
  z-index: 1;
}
.intro-v5__wrap article {
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.98) 100%);
  border: 1px solid rgba(141,198,63,.18);
  box-shadow: 0 16px 34px rgba(28,43,40,.08);
}
.intro-v5__icon {
  width: 62px;
  height: 62px;
  font-size: 28px;
  background: linear-gradient(135deg, rgba(141,198,63,.18), rgba(255,197,51,.18));
}

.showcase-section--hosting {
  background: linear-gradient(135deg, #cfeea0 0%, #e5f7c8 30%, #f8fff0 100%);
}
.showcase-copy--hosting p {
  max-width: 640px;
}
.showcase-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.showcase-cta-wrap .btn {
  min-width: 260px;
}
.showcase-visual--hosting {
  min-height: 430px;
}
.showcase-visual--hosting .showcase-visual__back {
  inset: 18px 18px 18px 18px;
  background: linear-gradient(135deg, rgba(141,198,63,.34), rgba(255,255,255,.40));
}
.cpanel-scene {
  position: absolute;
  inset: 28px 34px 24px 34px;
  z-index: 2;
}
.cpanel-window {
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbf2 100%);
  border: 1px solid rgba(141,198,63,.20);
  box-shadow: 0 26px 52px rgba(28,43,40,.16);
}
.cpanel-window__bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: linear-gradient(180deg, #eff7e5 0%, #e6f1d8 100%);
  color: #243033;
  font-weight: 900;
  border-bottom: 1px solid rgba(36,48,51,.08);
}
.cpanel-window__layout {
  display: grid;
  grid-template-columns: 70px 1fr;
  min-height: 300px;
}
.cpanel-sidebar {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px 14px;
  background: linear-gradient(180deg, #243033 0%, #1d2b2a 100%);
}
.cpanel-sidebar span {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(141,198,63,.32), rgba(18,183,201,.15));
}
.cpanel-content {
  padding: 20px;
}
.cpanel-topstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.cpanel-topstats article {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(141,198,63,.14);
  box-shadow: 0 10px 22px rgba(28,43,40,.06);
}
.cpanel-topstats small {
  display: block;
  color: var(--hl-green-dark);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}
.cpanel-topstats strong {
  display: block;
  margin-top: 8px;
  color: #203033;
  font-size: 24px;
}
.cpanel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}
.cpanel-grid div {
  min-height: 92px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfff8 100%);
  border: 1px solid rgba(36,48,51,.08);
}
.cpanel-grid b {
  display: block;
  color: #203033;
  font-size: 17px;
}
.cpanel-grid span {
  display: block;
  margin-top: 8px;
  color: var(--hl-muted);
  font-size: 13px;
  line-height: 1.4;
}
@media (max-width: 820px) {
  .cpanel-scene { inset: 20px 14px 18px; }
  .cpanel-window__layout { grid-template-columns: 58px 1fr; }
  .cpanel-topstats,
  .cpanel-grid { grid-template-columns: 1fr; }
  .showcase-cta-wrap .btn { width: 100%; min-width: 0; }
}


/* ==============================
   V25 REAL CPANEL IMAGE
   ============================== */
.hosting-real-shot {
  position: absolute;
  inset: 26px 30px 20px 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hosting-real-shot img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  border: 1px solid rgba(141,198,63,.22);
  background: #fff;
  box-shadow: 0 26px 52px rgba(28,43,40,.16);
}
@media (max-width: 820px) {
  .hosting-real-shot {
    inset: 16px 12px 14px 12px;
  }
}


/* ==============================
   V26 HOSTING PLANS REFINEMENT
   ============================== */
.hosting-home-section--v8 .section-heading h2 {
  text-transform: none;
}
.hosting-plan-grid--equal {
  align-items: stretch;
  margin-top: 18px;
}
.hosting-card--equal {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 24px;
}
.hosting-card--equal .badge--top {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 30px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .08em;
  z-index: 3;
  box-shadow: 0 10px 22px rgba(28,43,40,.16);
}
.hosting-card--equal.server-card--featured {
  background: linear-gradient(180deg, #d8f3a6 0%, #f8fff0 100%);
  border: 2px solid #8dc63f;
  box-shadow: 0 22px 44px rgba(121,170,46,.18);
}
.hosting-card--equal.server-card--featured .badge--top {
  background: linear-gradient(135deg, #6cae16 0%, #8dc63f 60%, #aee25b 100%);
  color: #ffffff;
}
.hosting-card--equal.server-card--featured .server-card__price span,
.hosting-card--equal.server-card--featured h3 {
  color: #2a5f0a;
}
.hosting-features-list {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  gap: 0;
}
.hosting-features-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(36,48,51,.10);
}
.hosting-features-list li:first-child {
  border-top: 1px solid rgba(36,48,51,.10);
}
.hosting-features-list strong {
  color: #203033;
  font-size: 14px;
  line-height: 1.35;
}
.hosting-features-list span {
  color: var(--hl-muted);
  font-size: 14px;
  line-height: 1.35;
  text-align: right;
}
.hosting-card--equal .btn {
  margin-top: auto;
}
@media (max-width: 820px) {
  .hosting-features-list li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .hosting-features-list span {
    text-align: left;
  }
}


/* ==============================
   V27 HOSTING TABLE FIXES
   ============================== */
.hosting-card--equal {
  overflow: visible;
}
.hosting-card--equal .badge--top {
  top: -18px;
  padding: 7px 16px;
  min-height: 34px;
  align-items: center;
}
.hosting-features-list {
  margin-top: 14px;
}
.hosting-features-list li {
  padding: 11px 0;
  padding-left: 0;
}
.hosting-features-list li::before {
  content: none !important;
  display: none !important;
}
.hosting-features-list strong {
  padding-right: 8px;
}


/* ==============================
   V28 OS SECTION REFINEMENT
   ============================== */
.section--warm.os-section {
  background: linear-gradient(135deg, #fffef9 0%, #f6f8ef 100%);
}
.split-grid--os-narrow {
  max-width: 1120px;
  margin: 0 auto;
  grid-template-columns: .86fr .94fr;
  gap: 40px;
}
.split-grid__media--os {
  align-self: stretch;
}
.os-logo-panel {
  height: 100%;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, #f8fff0 0%, #ffffff 100%);
  border: 1px solid rgba(141,198,63,.18);
  box-shadow: 0 18px 36px rgba(28,43,40,.08);
}
.os-logo-grid {
  display: grid;
  gap: 14px;
}
.os-logo-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(28,43,40,.06);
}
.os-section .comparison-grid {
  margin-top: 22px;
}
.os-section .comparison-grid div {
  padding: 18px;
}
@media (max-width: 920px) {
  .split-grid--os-narrow {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   V29 VPS FLOW + DUAL VISUAL
   ============================== */
.vps-dual-scene {
  position: absolute;
  inset: 24px 26px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  z-index: 2;
}
.vps-scene-card {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(0,0,0,.18);
}
.vps-scene-card--linux {
  background: linear-gradient(180deg, #121a1c 0%, #0b1112 100%);
  color: #dffbe4;
}
.vps-scene-card--windows {
  background: linear-gradient(180deg, #f6fbff 0%, #eef6ff 100%);
  color: #1f2e30;
}
.vps-scene-card__top {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
}
.vps-scene-card--linux .vps-scene-card__top {
  background: linear-gradient(180deg, #243033 0%, #182224 100%);
  color: #effff2;
}
.vps-scene-card--windows .vps-scene-card__top {
  background: linear-gradient(180deg, #dbeafe 0%, #cfe3fb 100%);
  color: #1f2e30;
}
.vps-scene-card__label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.vps-terminal {
  padding: 16px 16px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
}
.vps-terminal p { margin: 0 0 8px; }
.vps-terminal span { color: #91e25f; font-weight: 800; }
.vps-terminal .ok { color: #6ee7a2; }
.windows-panel {
  padding: 16px;
}
.windows-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.windows-panel__stats article {
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 18px rgba(31,46,48,.08);
}
.windows-panel__stats small {
  display: block;
  color: #0f766e;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 900;
}
.windows-panel__stats b {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  color: #1f2e30;
}
.windows-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
.windows-panel__grid div {
  min-height: 90px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(31,46,48,.08);
}
.windows-panel__grid strong {
  display: block;
  color: #1f2e30;
}
.windows-panel__grid span {
  display: block;
  margin-top: 6px;
  color: var(--hl-muted);
  font-size: 13px;
  line-height: 1.35;
}
.plans-group + .plans-group {
  margin-top: 34px;
}
.plans-group__header {
  margin: 0 0 18px;
  text-align: center;
}
.plans-group__header h3 {
  margin: 6px 0 0;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--hl-charcoal);
}
.vps-plan-grid {
  align-items: stretch;
}
.vps-plan-grid .server-card {
  display: flex;
  flex-direction: column;
}
.vps-plan-grid .server-card .btn {
  margin-top: auto;
}
@media (max-width: 960px) {
  .vps-dual-scene {
    grid-template-columns: 1fr;
    inset: 18px 12px 18px;
  }
  .showcase-visual--vps {
    min-height: 720px;
  }
}
@media (max-width: 640px) {
  .windows-panel__stats,
  .windows-panel__grid {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   V30 PRICE FORMAT + VPS TABLE REFINEMENT
   ============================== */
.server-card__top {
  text-align: center;
  align-items: center;
}
.server-card__top h3 {
  width: 100%;
}
.server-card__price {
  width: 100%;
  text-align: center;
  color: #2b5f0b;
  justify-content: center;
}
.server-card__price span {
  color: #2b5f0b;
}
.server-card__tax-note {
  display: block;
  margin-top: 6px;
  color: rgba(36,48,51,.62);
  font-size: 11px;
  line-height: 1.2;
}
.vps-card--equal,
.vps-plan-grid .server-card {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding-top: 26px;
}
.vps-plan-grid .server-card .badge--top {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  min-height: 34px;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(28,43,40,.16);
}
.vps-plan-grid .server-card--featured {
  background: linear-gradient(180deg, #d8f3a6 0%, #f8fff0 100%);
  border: 2px solid #8dc63f;
  box-shadow: 0 22px 44px rgba(121,170,46,.18);
}
.vps-plan-grid .server-card--featured .badge--top {
  background: linear-gradient(135deg, #6cae16 0%, #8dc63f 60%, #aee25b 100%);
  color: #ffffff;
}
.server-card--storage-highlight {
  border: 2px solid rgba(255,197,51,.72);
  box-shadow: 0 20px 38px rgba(255,197,51,.16);
}
.server-card--storage-highlight .badge--top {
  background: linear-gradient(135deg, #f0b200 0%, #ffc533 100%);
  color: #1f2e30;
}
.server-card--storage-premium {
  border: 2px solid rgba(18,183,201,.34);
}
.plans-group__header--linux {
  max-width: 980px;
  margin: 0 auto 20px;
}
.plans-group__intro {
  max-width: 860px;
  margin: 10px auto 0;
  color: var(--hl-muted);
  font-size: 16px;
  line-height: 1.55;
}
.os-availability-table {
  max-width: 760px;
  margin: 18px auto 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(141,198,63,.18);
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(28,43,40,.08);
}
.os-availability-table__head,
.os-availability-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.os-availability-table__head {
  background: linear-gradient(135deg, #ecf8d7 0%, #f7fff0 100%);
  color: #1f2e30;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.os-availability-table__row {
  border-top: 1px solid rgba(36,48,51,.08);
  color: #203033;
  font-size: 14px;
}
.os-availability-table__row span:last-child {
  color: var(--hl-muted);
}
.vps-features-list {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  gap: 0;
}
.vps-features-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(36,48,51,.10);
}
.vps-features-list li:first-child {
  border-top: 1px solid rgba(36,48,51,.10);
}
.vps-features-list li::before {
  content: none !important;
  display: none !important;
}
.vps-features-list strong {
  color: #203033;
  font-size: 14px;
  line-height: 1.35;
}
.vps-features-list span {
  color: var(--hl-muted);
  font-size: 14px;
  line-height: 1.35;
  text-align: right;
}
.vps-plan-grid--linux {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vps-plan-grid--linux .server-card:nth-child(4),
.vps-plan-grid--linux .server-card:nth-child(5) {
  grid-column: span 1;
}
.vps-plan-grid--linux::after {
  content: "";
}
.vps-plan-grid--linux .server-card:nth-child(4) {
  margin-left: calc(50% + 10px);
}
.vps-plan-grid--linux .server-card:nth-child(5) {
  margin-right: calc(50% + 10px);
}
@media (max-width: 1180px) {
  .vps-plan-grid--linux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vps-plan-grid--linux .server-card:nth-child(4),
  .vps-plan-grid--linux .server-card:nth-child(5) {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 820px) {
  .os-availability-table__head,
  .os-availability-table__row,
  .vps-features-list li {
    grid-template-columns: 1fr;
  }
  .vps-features-list span,
  .os-availability-table__row span:last-child {
    text-align: left;
  }
  .vps-plan-grid--linux,
  .vps-plan-grid--windows {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   V31 PREMIUM VPS CARD FIXES
   ============================== */
.server-card__price {
  margin-bottom: 0;
}
.server-card__price span {
  line-height: 1;
}
.server-card__tax-note {
  margin-top: 2px;
}

/* Linux VPS 5-card layout fixed */
.vps-plan-grid--linux {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.vps-plan-grid--linux .server-card {
  min-width: 0;
  width: auto;
  margin: 0 !important;
}
.vps-plan-grid--linux .server-card:nth-child(1) { grid-column: 1 / span 2; }
.vps-plan-grid--linux .server-card:nth-child(2) { grid-column: 3 / span 2; }
.vps-plan-grid--linux .server-card:nth-child(3) { grid-column: 5 / span 2; }
.vps-plan-grid--linux .server-card:nth-child(4) { grid-column: 2 / span 2; }
.vps-plan-grid--linux .server-card:nth-child(5) { grid-column: 4 / span 2; }

/* Premium storage cards: soft yellow, not full-card highlight */
.server-card--storage-highlight,
.server-card--storage-premium {
  background: linear-gradient(180deg, #fffef7 0%, #ffffff 100%);
  border: 2px solid rgba(244, 191, 32, .58);
  box-shadow: 0 18px 36px rgba(231, 179, 17, .12);
}
.server-card--storage-highlight .badge--top,
.server-card--storage-premium .badge--top {
  background: linear-gradient(135deg, #d8a400 0%, #f2c63d 100%);
  color: #243033;
  font-weight: 900;
}
.server-card--storage-highlight .badge--top::before,
.server-card--storage-premium .badge--top::before {
  content: "👑";
  margin-right: 6px;
}
.server-card--storage-highlight::before,
.server-card--storage-premium::before {
  content: "👑";
  position: absolute;
  top: -18px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5cf59, #fff0b2);
  box-shadow: 0 10px 24px rgba(229, 181, 16, .24);
  z-index: 5;
  font-size: 18px;
}
/* Highlight only storage row */
.server-card--storage-highlight .vps-features-list li:nth-child(3),
.server-card--storage-premium .vps-features-list li:nth-child(3) {
  background: linear-gradient(135deg, rgba(255, 234, 163, .52), rgba(255, 247, 215, .92));
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(244, 191, 32, .45);
  margin: 8px 0;
}
.server-card--storage-highlight .vps-features-list li:nth-child(3) strong,
.server-card--storage-premium .vps-features-list li:nth-child(3) strong,
.server-card--storage-highlight .vps-features-list li:nth-child(3) span,
.server-card--storage-premium .vps-features-list li:nth-child(3) span {
  color: #7a5a00;
  font-weight: 800;
}
.server-card--storage-highlight .vps-features-list li:nth-child(2),
.server-card--storage-premium .vps-features-list li:nth-child(2) {
  border-bottom-color: transparent;
}
.server-card--storage-highlight .vps-features-list li:nth-child(4),
.server-card--storage-premium .vps-features-list li:nth-child(4) {
  border-top-color: transparent;
}

@media (max-width: 1180px) {
  .vps-plan-grid--linux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vps-plan-grid--linux .server-card:nth-child(1),
  .vps-plan-grid--linux .server-card:nth-child(2),
  .vps-plan-grid--linux .server-card:nth-child(3),
  .vps-plan-grid--linux .server-card:nth-child(4),
  .vps-plan-grid--linux .server-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 820px) {
  .vps-plan-grid--linux {
    grid-template-columns: 1fr;
  }
  .server-card--storage-highlight::before,
  .server-card--storage-premium::before {
    right: 12px;
  }
}


/* ==============================
   V32 LINUX VPS TEXT + STORAGE HIGHLIGHT
   ============================== */
.vps-plan-grid--linux .server-card:nth-child(1) p {
  max-width: 270px;
  margin-left: auto;
  margin-right: auto;
}

.vps-plan-grid--linux .server-card:nth-child(-n+3) .vps-features-list li:nth-child(3) {
  background: linear-gradient(135deg, rgba(141,198,63,.10), rgba(255,255,255,.95));
  border-radius: 14px;
  padding: 12px 12px;
  margin: 8px 0;
  border: 1px solid rgba(70,110,22,.18);
}
.vps-plan-grid--linux .server-card:nth-child(-n+3) .vps-features-list li:nth-child(3) strong,
.vps-plan-grid--linux .server-card:nth-child(-n+3) .vps-features-list li:nth-child(3) span {
  color: #2f5f12;
  font-weight: 900;
}
.vps-plan-grid--linux .server-card:nth-child(-n+3) .vps-features-list li:nth-child(2) {
  border-bottom-color: transparent;
}
.vps-plan-grid--linux .server-card:nth-child(-n+3) .vps-features-list li:nth-child(4) {
  border-top-color: transparent;
}


/* ==============================
   V33 VPS FINAL TUNING
   ============================== */
.vps-plan-grid--linux .server-card:nth-child(1) p {
  max-width: 235px;
}

/* Premium storage plan buttons in yellow */
.server-card--storage-highlight .btn,
.server-card--storage-premium .btn {
  background: linear-gradient(135deg, #f0b200 0%, #ffd24d 100%);
  color: #243033;
  border-color: #e0ad00;
  box-shadow: 0 12px 24px rgba(240, 178, 0, .18);
}
.server-card--storage-highlight .btn:hover,
.server-card--storage-premium .btn:hover {
  background: linear-gradient(135deg, #e0a500 0%, #ffc933 100%);
  color: #243033;
}

/* Highlight "Incluye cPanel" in orange and bold in all VPS tables */
.vps-features-list li:nth-child(5) span {
  color: #d97706;
  font-weight: 900;
}


/* ==============================
   V34 TITLE CASE + CPANEL + CTA LABELS
   ============================== */
/* Hosting tables: highlight cPanel in orange and bold */
.hosting-features-list li:first-child span {
  color: #d97706;
  font-weight: 900;
}


/* ==============================
   V35 HOSTING DIFFERENTIATORS
   ============================== */
/* Resaltar lo que más vende en hosting: almacenamiento, ancho de banda y correos */
.hosting-features-list li:nth-child(2),
.hosting-features-list li:nth-child(3),
.hosting-features-list li:nth-child(4) {
  background: linear-gradient(135deg, rgba(141,198,63,.10), rgba(255,255,255,.96));
  border-radius: 14px;
  padding: 12px 12px;
  margin: 8px 0;
  border: 1px solid rgba(70,110,22,.14);
}
.hosting-features-list li:nth-child(2) strong,
.hosting-features-list li:nth-child(2) span,
.hosting-features-list li:nth-child(3) strong,
.hosting-features-list li:nth-child(3) span,
.hosting-features-list li:nth-child(4) strong,
.hosting-features-list li:nth-child(4) span {
  color: #2f5f12;
  font-weight: 900;
}
.hosting-features-list li:nth-child(1) { border-bottom-color: transparent; }
.hosting-features-list li:nth-child(5) { border-top-color: transparent; }

/* Plan WordPress con menor protagonismo */
.hosting-card--wordpress {
  background: linear-gradient(180deg, #f4f5f7 0%, #fbfbfc 100%);
  border: 1px solid rgba(148,163,184,.36);
  box-shadow: 0 14px 30px rgba(100,116,139,.08);
}
.hosting-card--wordpress .server-card__top h3,
.hosting-card--wordpress .server-card__price,
.hosting-card--wordpress .server-card__price span {
  color: #334155;
}
.hosting-card--wordpress .btn {
  background: #e5e7eb;
  color: #1f2937;
  border-color: #cbd5e1;
}
.hosting-card--wordpress .btn:hover {
  background: #dbe0e7;
  color: #111827;
}
.hosting-card--wordpress .hosting-features-list li:nth-child(2),
.hosting-card--wordpress .hosting-features-list li:nth-child(3),
.hosting-card--wordpress .hosting-features-list li:nth-child(4) {
  background: linear-gradient(135deg, rgba(226,232,240,.75), rgba(255,255,255,.98));
  border-color: rgba(148,163,184,.26);
}
.hosting-card--wordpress .hosting-features-list li:nth-child(2) strong,
.hosting-card--wordpress .hosting-features-list li:nth-child(2) span,
.hosting-card--wordpress .hosting-features-list li:nth-child(3) strong,
.hosting-card--wordpress .hosting-features-list li:nth-child(3) span,
.hosting-card--wordpress .hosting-features-list li:nth-child(4) strong,
.hosting-card--wordpress .hosting-features-list li:nth-child(4) span {
  color: #475569;
}


/* ==============================
   V36 HOSTING + OS SECTION TUNING
   ============================== */
/* Remove WordPress card specific styling no longer needed, and keep 3-card hosting balanced */
.hosting-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Stronger yellow for "Tu servidor, tus reglas" section */
.section--warm.os-section {
  background: linear-gradient(135deg, #fff7d8 0%, #fff3c4 52%, #fff9e7 100%);
}
.os-logo-panel {
  background: linear-gradient(180deg, #fff8dc 0%, #ffffff 100%);
  border: 1px solid rgba(232, 177, 23, .24);
}

@media (max-width: 980px) {
  .hosting-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .hosting-plan-grid {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   V37 WINDOWS VPS SECTION
   ============================== */
.plans-group--windows {
  margin-top: 42px;
  padding: 28px 24px 30px;
  border-radius: 32px;
  background: linear-gradient(180deg, #f1f4f7 0%, #e9edf2 100%);
  border: 1px solid rgba(148,163,184,.26);
}
.plans-group__header--windows {
  max-width: 980px;
  margin: 0 auto 20px;
}
.plans-group__header--windows .eyebrow {
  color: #3569a8;
}
.plans-group__header--windows h3 {
  color: #1f344c;
}
.vps-plan-grid--windows {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.vps-card--windows {
  background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
  border: 1px solid rgba(100,149,237,.18);
  box-shadow: 0 16px 30px rgba(80,110,150,.08);
}
.vps-card--windows .server-card__price,
.vps-card--windows .server-card__price span {
  color: #315b86;
}
.vps-card--windows .btn.btn--soft {
  background: linear-gradient(135deg, #e8f2ff 0%, #d7e8ff 100%);
  color: #21476d;
  border-color: #bfd7fb;
}
.vps-card--windows .btn.btn--soft:hover {
  background: linear-gradient(135deg, #dcebff 0%, #cbe0ff 100%);
}
.vps-plan-grid--windows .server-card--featured {
  background: linear-gradient(180deg, #d9ecff 0%, #f6fbff 100%);
  border: 2px solid #7fb1ea;
  box-shadow: 0 20px 38px rgba(98,146,205,.16);
}
.vps-plan-grid--windows .server-card--featured .badge--top {
  background: linear-gradient(135deg, #3b82c4 0%, #66a8ea 100%);
  color: #fff;
}
.vps-features-list--windows li:nth-child(1),
.vps-features-list--windows li:nth-child(3),
.vps-features-list--windows li:nth-child(5) {
  background: linear-gradient(135deg, rgba(201,225,255,.42), rgba(255,255,255,.96));
  border-radius: 12px;
  padding: 11px 10px;
  margin: 7px 0;
  border: 1px solid rgba(127,177,234,.18);
}
.vps-features-list--windows li:nth-child(1) strong,
.vps-features-list--windows li:nth-child(1) span,
.vps-features-list--windows li:nth-child(3) strong,
.vps-features-list--windows li:nth-child(3) span,
.vps-features-list--windows li:nth-child(5) strong,
.vps-features-list--windows li:nth-child(5) span {
  color: #335981;
  font-weight: 800;
}
.vps-features-list--windows li:nth-child(2),
.vps-features-list--windows li:nth-child(4),
.vps-features-list--windows li:nth-child(6) {
  border-top-color: transparent;
}
@media (max-width: 1180px) {
  .vps-plan-grid--windows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .plans-group--windows {
    padding: 22px 14px 24px;
  }
  .vps-plan-grid--windows {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   V38 DATACENTERS WORLD MAP REWORK
   ============================== */
.datacenter-map--v9 {
  min-height: 520px;
  background:
    radial-gradient(circle at 82% 18%, rgba(18,183,201,.14), transparent 20%),
    radial-gradient(circle at 15% 82%, rgba(255,197,51,.12), transparent 18%),
    linear-gradient(135deg, #26353a 0%, #22333a 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 80px rgba(0,0,0,.24);
}
.world-map-graphic {
  position: absolute;
  inset: 34px 26px auto 26px;
  width: calc(100% - 52px);
  max-width: none;
  z-index: 1;
  opacity: .98;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.18));
}
.world-route {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,197,51,.0), rgba(255,197,51,.95), rgba(18,183,201,.95), rgba(255,197,51,.0));
  z-index: 2;
  opacity: .92;
}
.world-route::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(18,183,201,.18);
  animation: worldPacket 3.1s linear infinite;
}
.world-route--mx-us { width: 215px; left: 25%; top: 44%; transform: rotate(-5deg); }
.world-route--mx-eu { width: 305px; left: 33%; top: 39%; transform: rotate(-18deg); }
.world-route--mx-latam { width: 185px; left: 28%; top: 56%; transform: rotate(38deg); }
.world-route--us-eu { width: 200px; left: 53%; top: 34%; transform: rotate(-5deg); }
.world-route--mx-eu::after { animation-delay: .7s; }
.world-route--mx-latam::after { animation-delay: 1.3s; }
.world-route--us-eu::after { animation-delay: 1.9s; }

.world-checkpoint {
  position: absolute;
  z-index: 3;
}
.checkpoint-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8dc63f;
  border: 3px solid #fff;
  box-shadow: 0 0 0 10px rgba(141,198,63,.14);
  animation: checkpointPulse 2.8s ease-out infinite;
}
.checkpoint-card {
  position: relative;
  min-width: 136px;
  padding: 12px 14px 12px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(141,198,63,.22);
  box-shadow: 0 16px 30px rgba(0,0,0,.18);
}
.checkpoint-card::before {
  content: "✓";
  position: absolute;
  left: -10px;
  top: 14px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #8dc63f, #bfe96a);
  color: #243033;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(141,198,63,.28);
}
.checkpoint-card strong {
  display: block;
  color: #2f3438;
  font-size: 15px;
  line-height: 1.1;
}
.checkpoint-card small {
  display: block;
  margin-top: 4px;
  color: #6b757c;
  font-size: 12px;
  font-weight: 800;
}
.world-checkpoint--mx { left: 23%; top: 40%; }
.world-checkpoint--mx .checkpoint-dot { left: -4px; top: 20px; }
.world-checkpoint--us { right: 21%; top: 30%; }
.world-checkpoint--us .checkpoint-dot { left: -4px; top: 22px; }
.world-checkpoint--eu { right: 8%; top: 23%; }
.world-checkpoint--eu .checkpoint-dot { left: -4px; top: 20px; }
.world-checkpoint--latam { left: 33%; bottom: 18%; }
.world-checkpoint--latam .checkpoint-dot { left: -4px; top: 22px; }

.map-core--v9 {
  background: linear-gradient(135deg, #8dc63f 0%, #12b7c9 100%);
  color: #253034;
  width: 220px;
  min-height: 154px;
  z-index: 4;
}
.map-core--v9 small { color: rgba(37,48,52,.82); }
.map-core--v9 span { color: rgba(37,48,52,.78); }

@keyframes worldPacket {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 11px); opacity: 0; }
}
@keyframes checkpointPulse {
  0% { box-shadow: 0 0 0 0 rgba(141,198,63,.28); }
  70% { box-shadow: 0 0 0 14px rgba(141,198,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(141,198,63,0); }
}

@media (max-width: 900px) {
  .datacenter-map--v9 { min-height: 600px; }
  .world-map-graphic { inset: 54px 18px auto 18px; width: calc(100% - 36px); }
  .world-route--mx-us,
  .world-route--mx-eu,
  .world-route--mx-latam,
  .world-route--us-eu { display: none; }
  .world-checkpoint--mx { left: 10%; top: 26%; }
  .world-checkpoint--us { right: 8%; top: 20%; }
  .world-checkpoint--eu { right: 5%; top: 48%; }
  .world-checkpoint--latam { left: 14%; bottom: 12%; }
}
@media (max-width: 640px) {
  .datacenter-map--v9 { min-height: 630px; }
  .world-map-graphic { inset: 90px 12px auto 12px; width: calc(100% - 24px); }
  .map-core--v9 {
    width: 190px;
    min-height: 130px;
    top: 18%;
  }
  .world-checkpoint--mx,
  .world-checkpoint--us,
  .world-checkpoint--eu,
  .world-checkpoint--latam {
    position: absolute;
  }
  .world-checkpoint--mx { left: 8%; top: 34%; }
  .world-checkpoint--us { right: 6%; top: 28%; }
  .world-checkpoint--eu { right: 6%; top: 58%; }
  .world-checkpoint--latam { left: 8%; bottom: 10%; }
  .checkpoint-card { min-width: 124px; padding-right: 12px; }
}


/* ==============================
   V39 CLEANER DATACENTER MAP
   ============================== */
.datacenter-map--v10 {
  min-height: 540px;
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 85%, rgba(141,198,63,.10), transparent 20%),
    radial-gradient(circle at 86% 12%, rgba(18,183,201,.10), transparent 20%),
    linear-gradient(135deg, #21333a 0%, #27424b 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 80px rgba(0,0,0,.24);
}
.world-map-graphic--v10 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 36px;
  width: calc(100% - 60px);
  max-width: none;
  opacity: .9;
  z-index: 1;
}
.map-core--v10 {
  position: absolute;
  right: 34px;
  bottom: 34px;
  width: 240px;
  min-height: 150px;
  border-radius: 28px;
  background: linear-gradient(135deg, #8dc63f 0%, #12b7c9 100%);
  color: #203033;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  box-shadow: 0 22px 44px rgba(0,0,0,.22);
  z-index: 4;
}
.map-core--v10 small {
  color: rgba(32,48,51,.82);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
}
.map-core--v10 strong {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.0;
}
.map-core--v10 span {
  margin-top: 8px;
  color: rgba(32,48,51,.82);
  font-size: 13px;
}
.map-point {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #bde96a;
  border: 3px solid #fff;
  box-shadow: 0 0 0 10px rgba(141,198,63,.14);
  z-index: 3;
  animation: mapPointPulse 2.8s ease-out infinite;
}
.map-point--mx { left: 23%; top: 43%; }
.map-point--us { left: 43%; top: 35%; }
.map-point--eu { left: 68%; top: 33%; }
.map-point--latam { left: 34%; top: 64%; }
.map-link {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,197,51,.0), rgba(255,197,51,.95), rgba(18,183,201,.95));
  transform-origin: left center;
  z-index: 2;
  opacity: .88;
}
.map-link::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(18,183,201,.18);
  animation: mapTravel 3.2s linear infinite;
}
.map-link--mx { width: 240px; left: 24%; top: 45%; transform: rotate(17deg); }
.map-link--us { width: 186px; left: 44%; top: 37%; transform: rotate(29deg); }
.map-link--eu { width: 96px; left: 69%; top: 35%; transform: rotate(58deg); }
.map-link--latam { width: 150px; left: 35%; top: 66%; transform: rotate(-2deg); }
.map-link--us::after { animation-delay: .7s; }
.map-link--eu::after { animation-delay: 1.4s; }
.map-link--latam::after { animation-delay: 2s; }
.region-chip {
  position: absolute;
  min-width: 160px;
  padding: 13px 15px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(141,198,63,.20);
  box-shadow: 0 16px 30px rgba(0,0,0,.16);
  z-index: 3;
}
.region-chip::before {
  content: "✓";
  position: absolute;
  left: -10px;
  top: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8dc63f, #bde96a);
  color: #203033;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(141,198,63,.30);
}
.region-chip strong {
  display: block;
  color: #203033;
  font-size: 16px;
  line-height: 1.05;
}
.region-chip span {
  display: block;
  margin-top: 4px;
  color: #68757a;
  font-size: 12px;
  font-weight: 800;
}
.region-chip--mx { left: 28px; top: 54px; }
.region-chip--us { right: 190px; top: 54px; }
.region-chip--eu { right: 28px; top: 190px; }
.region-chip--latam { left: 56px; bottom: 46px; }

@keyframes mapTravel {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 10px); opacity: 0; }
}
@keyframes mapPointPulse {
  0% { box-shadow: 0 0 0 0 rgba(141,198,63,.28); }
  70% { box-shadow: 0 0 0 16px rgba(141,198,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(141,198,63,0); }
}

@media (max-width: 980px) {
  .datacenter-map--v10 {
    min-height: 620px;
  }
  .world-map-graphic--v10 {
    left: 18px;
    right: 18px;
    top: 112px;
    width: calc(100% - 36px);
  }
  .map-link { display: none; }
  .map-core--v10 {
    right: 18px;
    bottom: 18px;
  }
  .region-chip--mx { left: 18px; top: 18px; }
  .region-chip--us { right: 18px; top: 18px; }
  .region-chip--eu { right: 18px; top: 108px; }
  .region-chip--latam { left: 18px; top: 108px; bottom: auto; }
}
@media (max-width: 640px) {
  .datacenter-map--v10 {
    min-height: 700px;
  }
  .region-chip {
    min-width: 130px;
    padding: 11px 12px;
  }
  .region-chip strong {
    font-size: 14px;
  }
  .region-chip span {
    font-size: 11px;
  }
  .map-core--v10 {
    width: calc(100% - 36px);
    right: 18px;
    left: 18px;
    bottom: 18px;
    min-height: 120px;
  }
  .world-map-graphic--v10 {
    top: 170px;
  }
  .map-point--mx { left: 20%; top: 42%; }
  .map-point--us { left: 43%; top: 37%; }
  .map-point--eu { left: 70%; top: 35%; }
  .map-point--latam { left: 33%; top: 63%; }
}


/* ==============================
   V40 DATACENTERS USER IMAGE
   ============================== */
.datacenter-map--image {
  min-height: auto;
  padding: 0;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(135deg, #10191c 0%, #182428 100%);
  border: 1px solid rgba(141,198,63,.16);
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.datacenter-showcase-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;
}


/* ==============================
   V41 FAQ + FOOTER REDESIGN
   ============================== */
.faq-section--v8 .faq-grid {
  align-items: stretch;
}
.faq-section--v8 .faq-grid details {
  border: 1px solid rgba(141,198,63,.18);
}

.site-footer--v41 {
  background:
    radial-gradient(circle at 10% 20%, rgba(141,198,63,.13), transparent 22%),
    radial-gradient(circle at 88% 76%, rgba(18,183,201,.10), transparent 24%),
    linear-gradient(135deg, #131d20 0%, #20272b 100%);
  padding-top: 64px;
}
.footer-main-v41 {
  display: grid;
  grid-template-columns: minmax(260px, .95fr) minmax(0, 2.05fr);
  gap: 42px;
  align-items: start;
}
.footer-brand--v41 h2 {
  display: none;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
}
.footer-logo img {
  display: block;
  width: min(330px, 100%);
  height: auto;
}
.footer-brand--v41 p {
  max-width: 380px;
  color: rgba(255,255,255,.76);
  font-size: 16px;
  line-height: 1.58;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.footer-social a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #ffffff;
  font-weight: 850;
}
.footer-social a:hover {
  background: linear-gradient(135deg, rgba(141,198,63,.24), rgba(18,183,201,.16));
  color: #ffffff;
}
.footer-menus-v41 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 34px;
}
.footer-menus-v41 h3 {
  margin: 0 0 14px;
  color: #bde96a;
  font-size: 16px;
  line-height: 1.15;
}
.footer-menus-v41 ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer-menus-v41 li {
  margin-bottom: 9px;
}
.footer-menus-v41 a {
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.35;
}
.footer-menus-v41 a:hover {
  color: #ffffff;
}
.footer-bottom--v41 {
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 48px;
}
.footer-contact-mini {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.footer-contact-mini a,
.footer-contact-mini span {
  color: rgba(255,255,255,.72);
}

@media (max-width: 1100px) {
  .footer-main-v41 {
    grid-template-columns: 1fr;
  }
  .footer-menus-v41 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .footer-menus-v41 {
    grid-template-columns: 1fr;
  }
  .footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ==============================
   V42 FOOTER LEGAL + SOCIAL ICONS
   ============================== */
.footer-menus-v41 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.footer-social--icons {
  gap: 14px;
}
.social-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}
.social-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.social-icon--facebook:hover {
  background: linear-gradient(135deg, #1877f2, #62a3ff);
  border-color: transparent;
}
.social-icon--instagram:hover {
  background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #515bd4);
  border-color: transparent;
}
.footer-bottom--v41 p:first-child {
  max-width: 720px;
  color: rgba(255,255,255,.82);
}

@media (max-width: 1200px) {
  .footer-menus-v41 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .footer-menus-v41 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .footer-menus-v41 {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   V43 FOOTER SERVICES + SOCIAL ICONS
   ============================== */
.social-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 30px rgba(0,0,0,.18);
}
.social-icon svg {
  width: 28px;
  height: 28px;
}
.social-icon--facebook {
  color: #ffffff;
}
.social-icon--facebook:hover {
  background: linear-gradient(135deg, #1877f2, #5da2ff);
  transform: translateY(-2px);
}
.social-icon--instagram {
  color: #ffffff;
}
.social-icon--instagram:hover {
  background: linear-gradient(135deg, #f58529, #dd2a7b 48%, #8134af 72%, #515bd4 100%);
  transform: translateY(-2px);
}
.footer-social--icons {
  gap: 16px;
}


/* ==============================
   V44 INTERNAL VPS LANDING
   ============================== */
.vps-landing-page {
  background: #fffef9;
}
.vps-inner-hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0 76px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(141,198,63,.22), transparent 22%),
    radial-gradient(circle at 20% 92%, rgba(18,183,201,.14), transparent 24%),
    linear-gradient(135deg, #152326 0%, #243239 54%, #172428 100%);
}
.vps-inner-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--hl-green), var(--hl-yellow), var(--hl-cyan));
}
.vps-inner-hero__grid {
  display: grid;
  grid-template-columns: minmax(0,.96fr) minmax(430px,1.04fr);
  gap: 54px;
  align-items: center;
}
.vps-inner-hero__copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 6vw, 76px);
  line-height: .96;
  letter-spacing: -.06em;
}
.vps-inner-hero__copy p {
  max-width: 760px;
  color: rgba(255,255,255,.82);
  font-size: clamp(18px,2vw,23px);
  line-height: 1.52;
}
.vps-inner-hero__copy .eyebrow {
  color: #bde96a;
}
.vps-inner-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.vps-inner-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.vps-inner-hero__badges span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-weight: 850;
}
.vps-inner-hero__visual {
  min-height: 500px;
  position: relative;
}
.vps-page-dual-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.vps-page-terminal,
.vps-page-windows-panel {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.26);
}
.vps-page-terminal {
  background: linear-gradient(180deg,#111a1b,#0a1112);
}
.vps-page-terminal__top {
  min-height: 50px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg,#243033,#182326);
}
.vps-page-terminal__top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6f61;
}
.vps-page-terminal__top span:nth-child(2) { background: #f8c84d; }
.vps-page-terminal__top span:nth-child(3) { background: #67d57a; }
.vps-page-terminal__top strong {
  margin-left: 8px;
  color: #d6f5db;
  font-size: 13px;
}
.vps-page-terminal__screen {
  padding: 18px;
  color: #d8fbe0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
}
.vps-page-terminal__screen p {
  margin: 0 0 9px;
}
.vps-page-terminal__screen b {
  color: #8fe261;
}
.vps-page-terminal__screen .ok {
  color: #6ee7a2;
}
.vps-page-windows-panel {
  background: linear-gradient(180deg,#f6fbff,#e9f3ff);
  color: #1f2e30;
  padding: 20px;
}
.vps-page-windows-panel__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
.vps-page-windows-panel__top strong {
  font-size: 20px;
}
.vps-page-windows-panel__top span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #d9ecff;
  color: #315b86;
  font-weight: 900;
  font-size: 12px;
}
.vps-page-windows-panel__grid {
  display: grid;
  gap: 14px;
}
.vps-page-windows-panel__grid article {
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(31,46,48,.07);
}
.vps-page-windows-panel__grid small {
  color: #3569a8;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.vps-page-windows-panel__grid b {
  display: block;
  margin-top: 7px;
  font-size: 22px;
  color: #1f2e30;
}
.vps-value-section {
  background: linear-gradient(135deg,#ffffff 0%,#f4f9ec 100%);
}
.vps-value-grid,
.vps-use-cases-grid,
.vps-support-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.vps-value-grid article,
.vps-use-cases-grid article,
.vps-support-grid article {
  background: #fff;
  border: 1px solid rgba(141,198,63,.16);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 14px 30px rgba(28,43,40,.07);
}
.vps-value-grid span {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(141,198,63,.20),rgba(255,197,51,.16));
  font-size: 24px;
  margin-bottom: 16px;
}
.vps-value-grid h3,
.vps-use-cases-grid h3 {
  margin: 0 0 10px;
  color: #203033;
  font-size: 20px;
}
.vps-value-grid p,
.vps-use-cases-grid p {
  color: var(--hl-muted);
  margin: 0;
}
.vps-compare-section {
  background: linear-gradient(135deg,#25333a 0%,#172428 100%);
  color: #fff;
}
.vps-compare-section .section-heading h2 {
  color: #fff;
}
.vps-compare-section .section-heading p,
.vps-compare-section .eyebrow {
  color: #bde96a;
}
.vps-compare-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
}
.vps-compare-card {
  padding: 34px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 42px rgba(0,0,0,.18);
}
.vps-compare-card h3 {
  color: #fff;
  margin-top: 0;
  font-size: 34px;
}
.vps-compare-card p {
  color: rgba(255,255,255,.80);
  font-size: 17px;
}
.vps-compare-card--linux {
  background: linear-gradient(135deg,rgba(141,198,63,.18),rgba(255,255,255,.06));
}
.vps-compare-card--windows {
  background: linear-gradient(135deg,rgba(18,183,201,.18),rgba(255,255,255,.06));
}
.plans-section--vps-page {
  background: linear-gradient(135deg,#ffffff 0%,#f7fbef 100%);
}
.vps-page-os-table {
  margin-bottom: 12px;
}
.vps-page-note {
  max-width: 820px;
  margin: 10px auto 30px;
  text-align: center;
  color: var(--hl-muted);
  font-size: 14px;
}
.vps-page-windows-section {
  background: linear-gradient(180deg,#f1f4f7 0%,#e9edf2 100%);
}
.vps-use-cases-section {
  background: #fffef9;
}
.vps-use-cases-grid {
  grid-template-columns: repeat(5,minmax(0,1fr));
}
.vps-page-datacenter-section {
  background: linear-gradient(135deg,#2f3438 0%,#22333a 100%);
  color: #fff;
}
.vps-page-datacenter-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 46px;
  align-items: center;
}
.vps-page-datacenter-grid h2 {
  color: #fff;
  margin: 0;
  font-size: clamp(34px,5vw,54px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.vps-page-datacenter-grid p {
  color: rgba(255,255,255,.80);
  font-size: 18px;
}
.vps-page-datacenter-image img {
  display: block;
  width: 100%;
  border-radius: 30px;
  box-shadow: 0 24px 58px rgba(0,0,0,.24);
}
.vps-support-section {
  background: linear-gradient(135deg,#ffffff 0%,#f4f9ec 100%);
}
.vps-support-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.vps-support-grid strong {
  display: block;
  color: #203033;
  font-size: 20px;
}
.vps-support-grid span {
  display: block;
  margin-top: 8px;
  color: var(--hl-muted);
}
.faq-section--vps-page {
  background: linear-gradient(135deg,#2f3438 0%,#394348 100%);
  color: #fff;
}
.faq-section--vps-page .section-heading h2 {
  color: #fff;
}
.faq-section--vps-page .eyebrow {
  color: #bde96a;
}
.vps-final-cta-section {
  background: #fffef9;
}
.vps-final-cta-box {
  text-align: center;
  border-radius: 34px;
  padding: 58px 34px;
  background: linear-gradient(135deg,#8dc63f 0%,#12b7c9 100%);
  color: #203033;
  box-shadow: 0 24px 58px rgba(28,43,40,.14);
}
.vps-final-cta-box h2 {
  margin: 0;
  font-size: clamp(34px,5vw,56px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.vps-final-cta-box p {
  max-width: 760px;
  margin: 16px auto 26px;
  color: rgba(32,48,51,.82);
  font-size: 18px;
}
.vps-final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
@media (max-width: 1200px) {
  .vps-value-grid,
  .vps-use-cases-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .vps-inner-hero__grid,
  .vps-page-datacenter-grid {
    grid-template-columns: 1fr;
  }
  .vps-inner-hero__visual {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 820px) {
  .vps-page-dual-panel,
  .vps-compare-grid,
  .vps-support-grid,
  .vps-value-grid,
  .vps-use-cases-grid {
    grid-template-columns: 1fr;
  }
  .vps-inner-hero__visual {
    min-height: 760px;
  }
  .vps-inner-hero__actions .btn {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .vps-inner-hero {
    padding: 52px 0 58px;
  }
  .vps-inner-hero__visual {
    min-height: 700px;
  }
  .vps-final-cta-actions .btn {
    width: 100%;
  }
}


/* ==============================
   V46 EMAIL CORPORATIVO LANDING
   ============================== */
.email-landing-page {
  background: #fffef9;
}
.email-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 78px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 16%, rgba(141,198,63,.23), transparent 22%),
    radial-gradient(circle at 16% 88%, rgba(18,183,201,.16), transparent 24%),
    linear-gradient(135deg, #172427 0%, #27343a 58%, #18272b 100%);
}
.email-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--hl-green), var(--hl-yellow), var(--hl-cyan));
}
.email-hero__grid {
  display: grid;
  grid-template-columns: minmax(0,.98fr) minmax(430px,1.02fr);
  gap: 56px;
  align-items: center;
}
.email-hero__copy .eyebrow {
  color: #bde96a;
}
.email-hero__copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px,6vw,76px);
  line-height: .96;
  letter-spacing: -.06em;
}
.email-hero__copy p {
  max-width: 760px;
  color: rgba(255,255,255,.82);
  font-size: clamp(18px,2vw,23px);
  line-height: 1.52;
}
.email-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.email-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.email-hero__badges span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-weight: 850;
}
.email-hero__visual {
  min-height: 520px;
  position: relative;
}
.email-dashboard {
  position: absolute;
  inset: 20px 0 20px 0;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg,#ffffff 0%,#f4fbef 100%);
  box-shadow: 0 32px 78px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.42);
}
.email-dashboard__top {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: linear-gradient(180deg,#eef8de,#e6f2d8);
  color: #203033;
  font-weight: 900;
}
.email-dashboard__top span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--hl-green);
}
.email-dashboard__top span:nth-child(2) { background: var(--hl-yellow); }
.email-dashboard__top span:nth-child(3) { background: var(--hl-cyan); }
.email-dashboard__top strong {
  margin-left: 10px;
}
.email-dashboard__body {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 420px;
}
.email-sidebar {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 16px;
  background: linear-gradient(180deg,#203033,#172327);
}
.email-sidebar b {
  display: block;
  padding: 12px 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-size: 13px;
}
.email-main-panel {
  padding: 22px;
}
.email-search {
  height: 42px;
  border-radius: 999px;
  background: #eef5e8;
  margin-bottom: 18px;
}
.email-main-panel article {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(141,198,63,.16);
  margin-bottom: 12px;
  box-shadow: 0 10px 22px rgba(28,43,40,.06);
}
.email-main-panel article strong {
  display: block;
  color: #203033;
}
.email-main-panel article span {
  display: block;
  color: var(--hl-muted);
  margin-top: 5px;
  font-size: 13px;
}
.email-security-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(141,198,63,.18), rgba(18,183,201,.12));
  color: #203033;
}
.email-security-card b,
.email-security-card span {
  display: block;
}
.email-security-card span {
  margin-top: 6px;
  color: var(--hl-muted);
}
.email-float {
  position: absolute;
  z-index: 3;
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(141,198,63,.22);
  box-shadow: 0 20px 40px rgba(0,0,0,.20);
  padding: 15px 17px;
}
.email-float strong {
  display: block;
  color: #203033;
  font-size: 20px;
}
.email-float span {
  display: block;
  color: var(--hl-muted);
  font-size: 13px;
  margin-top: 4px;
  font-weight: 800;
}
.email-float--one {
  left: -14px;
  bottom: 46px;
}
.email-float--two {
  right: 20px;
  top: 0;
}
.email-value-section {
  background: linear-gradient(135deg,#ffffff 0%,#f4f9ec 100%);
}
.email-value-grid,
.email-use-grid,
.email-support-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.email-value-grid article,
.email-use-grid article,
.email-support-grid article {
  background: #fff;
  border: 1px solid rgba(141,198,63,.16);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 14px 30px rgba(28,43,40,.07);
}
.email-value-grid span {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(141,198,63,.20),rgba(255,197,51,.16));
  font-size: 24px;
  margin-bottom: 16px;
}
.email-value-grid h3,
.email-use-grid h3 {
  margin: 0 0 10px;
  color: #203033;
  font-size: 20px;
}
.email-value-grid p,
.email-use-grid p {
  color: var(--hl-muted);
  margin: 0;
}
.email-productivity-section {
  background: linear-gradient(135deg,#25333a 0%,#172428 100%);
  color: #fff;
}
.email-productivity-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 42px;
  align-items: center;
}
.email-productivity-copy .eyebrow {
  color: #bde96a;
}
.email-productivity-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px,5vw,56px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.email-productivity-copy p {
  color: rgba(255,255,255,.80);
  font-size: 18px;
}
.email-mini-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.email-mini-points span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 850;
}
.email-productivity-cards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
.email-productivity-cards article {
  min-height: 148px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}
.email-productivity-cards strong {
  display: block;
  color: #fff;
  font-size: 20px;
}
.email-productivity-cards span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.76);
}
.email-plans-section {
  background: linear-gradient(135deg,#ffffff 0%,#f7fbef 100%);
}
.email-table-wrap {
  overflow-x: auto;
  border-radius: 28px;
  box-shadow: 0 20px 44px rgba(28,43,40,.10);
}
.email-comparison-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
}
.email-comparison-table th {
  padding: 20px 18px;
  background: linear-gradient(135deg,#203033 0%,#2f4347 100%);
  color: #fff;
  text-align: left;
}
.email-comparison-table th:nth-child(2),
.email-comparison-table th:nth-child(3),
.email-comparison-table td:nth-child(2),
.email-comparison-table td:nth-child(3) {
  text-align: center;
}
.email-comparison-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(36,48,51,.08);
  color: #203033;
}
.email-comparison-table tr:nth-child(even) td {
  background: #fbfff6;
}
.email-comparison-table td:nth-child(2),
.email-comparison-table td:nth-child(3) {
  font-weight: 900;
  color: #2f5f12;
}
.email-comparison-table td:nth-child(3) {
  background: rgba(141,198,63,.08);
}
.email-plan-cards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  margin-top: 26px;
}
.email-plan-cards article {
  border-radius: 26px;
  padding: 26px;
  background: #fff;
  border: 1px solid rgba(141,198,63,.16);
  box-shadow: 0 14px 30px rgba(28,43,40,.07);
}
.email-plan-cards span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(141,198,63,.16);
  color: #2f5f12;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.email-plan-cards h3 {
  margin: 14px 0 8px;
  color: #203033;
  font-size: 26px;
}
.email-plan-cards p {
  margin: 0;
  color: var(--hl-muted);
}
.email-plan-card--featured {
  background: linear-gradient(180deg,#eaf8d6 0%,#ffffff 100%) !important;
  border: 2px solid #8dc63f !important;
}
.email-use-section {
  background: #fffef9;
}
.email-support-section {
  background: linear-gradient(135deg,#ffffff 0%,#f4f9ec 100%);
}
.email-support-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.email-support-grid strong {
  display: block;
  color: #203033;
  font-size: 20px;
}
.email-support-grid span {
  display: block;
  margin-top: 8px;
  color: var(--hl-muted);
}
.faq-section--email-page {
  background: linear-gradient(135deg,#2f3438 0%,#394348 100%);
  color: #fff;
}
.faq-section--email-page .section-heading h2 {
  color: #fff;
}
.faq-section--email-page .eyebrow {
  color: #bde96a;
}
@media (max-width: 1200px) {
  .email-hero__grid,
  .email-productivity-grid {
    grid-template-columns: 1fr;
  }
  .email-hero__visual {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
  }
  .email-value-grid,
  .email-use-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 820px) {
  .email-hero__visual {
    min-height: 720px;
  }
  .email-dashboard__body,
  .email-productivity-cards,
  .email-plan-cards,
  .email-support-grid,
  .email-value-grid,
  .email-use-grid {
    grid-template-columns: 1fr;
  }
  .email-hero__actions .btn {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .email-hero {
    padding: 54px 0 58px;
  }
  .email-hero__visual {
    min-height: 640px;
  }
  .email-sidebar {
    display: none;
  }
  .email-dashboard__body {
    min-height: auto;
  }
}


/* ==============================
   V47 GLOBAL WHATSAPP CTA + EMAIL REAL OX + HOSTING LANDING
   ============================== */
a[href*="wa.me"] {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #ffffff !important;
  border-color: rgba(37,211,102,.72) !important;
  box-shadow: 0 16px 30px rgba(37,211,102,.24) !important;
}
a[href*="wa.me"]:hover {
  background: linear-gradient(135deg, #20bf5a 0%, #0f766e 100%) !important;
  color: #ffffff !important;
}

/* Real OX image in email hero */
.email-real-ox-shot {
  position: absolute;
  inset: 34px 10px 36px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid rgba(255,255,255,.44);
  box-shadow: 0 32px 78px rgba(0,0,0,.28);
  overflow: hidden;
}
.email-real-ox-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 760px;
  object-fit: contain;
}

/* Hosting Web Landing */
.hosting-landing-page {
  background: #fffef9;
}
.hosting-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 78px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 16%, rgba(141,198,63,.25), transparent 22%),
    radial-gradient(circle at 18% 90%, rgba(255,197,51,.12), transparent 22%),
    linear-gradient(135deg, #152326 0%, #26343a 55%, #172428 100%);
}
.hosting-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--hl-green), var(--hl-yellow), var(--hl-cyan));
}
.hosting-hero__grid {
  display: grid;
  grid-template-columns: minmax(0,.98fr) minmax(430px,1.02fr);
  gap: 56px;
  align-items: center;
}
.hosting-hero__copy .eyebrow {
  color: #bde96a;
}
.hosting-hero__copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px,6vw,76px);
  line-height: .96;
  letter-spacing: -.06em;
}
.hosting-hero__copy p {
  max-width: 760px;
  color: rgba(255,255,255,.82);
  font-size: clamp(18px,2vw,23px);
  line-height: 1.52;
}
.hosting-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.hosting-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.hosting-hero__badges span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-weight: 850;
}
.hosting-hero__visual {
  position: relative;
  min-height: 500px;
}
.hosting-cpanel-real {
  position: absolute;
  inset: 38px 10px 36px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: linear-gradient(180deg,#ffffff 0%,#f7fff0 100%);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 32px 78px rgba(0,0,0,.28);
  overflow: hidden;
}
.hosting-cpanel-real img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
}
.hosting-float {
  position: absolute;
  z-index: 3;
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(141,198,63,.22);
  box-shadow: 0 20px 40px rgba(0,0,0,.20);
  padding: 15px 17px;
}
.hosting-float strong {
  display: block;
  color: #203033;
  font-size: 20px;
}
.hosting-float span {
  display: block;
  color: var(--hl-muted);
  font-size: 13px;
  margin-top: 4px;
  font-weight: 800;
}
.hosting-float--one {
  left: -14px;
  bottom: 46px;
}
.hosting-float--two {
  right: 20px;
  top: 0;
}
.hosting-value-section {
  background: linear-gradient(135deg,#ffffff 0%,#f4f9ec 100%);
}
.hosting-value-grid,
.hosting-use-grid,
.hosting-support-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.hosting-value-grid article,
.hosting-use-grid article,
.hosting-support-grid article {
  background: #fff;
  border: 1px solid rgba(141,198,63,.16);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 14px 30px rgba(28,43,40,.07);
}
.hosting-value-grid span {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(141,198,63,.20),rgba(255,197,51,.16));
  font-size: 24px;
  margin-bottom: 16px;
}
.hosting-value-grid h3,
.hosting-use-grid h3 {
  margin: 0 0 10px;
  color: #203033;
  font-size: 20px;
}
.hosting-value-grid p,
.hosting-use-grid p {
  color: var(--hl-muted);
  margin: 0;
}
.hosting-page-plans-section {
  background: linear-gradient(135deg,#ffffff 0%,#f7fbef 100%);
}
.hosting-page-plan-grid {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.hosting-cpanel-section {
  background: linear-gradient(135deg,#25333a 0%,#172428 100%);
  color: #fff;
}
.hosting-cpanel-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 42px;
  align-items: center;
}
.hosting-cpanel-grid .eyebrow {
  color: #bde96a;
}
.hosting-cpanel-grid h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px,5vw,56px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.hosting-cpanel-grid p {
  color: rgba(255,255,255,.80);
  font-size: 18px;
}
.hosting-mini-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hosting-mini-points span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 850;
}
.hosting-cpanel-image img {
  width: 100%;
  display: block;
  border-radius: 30px;
  box-shadow: 0 24px 58px rgba(0,0,0,.24);
  background: #fff;
}
.hosting-use-section {
  background: #fffef9;
}
.hosting-support-section {
  background: linear-gradient(135deg,#ffffff 0%,#f4f9ec 100%);
}
.hosting-support-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.hosting-support-grid strong {
  display: block;
  color: #203033;
  font-size: 20px;
}
.hosting-support-grid span {
  display: block;
  margin-top: 8px;
  color: var(--hl-muted);
}
.faq-section--hosting-page {
  background: linear-gradient(135deg,#2f3438 0%,#394348 100%);
  color: #fff;
}
.faq-section--hosting-page .section-heading h2 {
  color: #fff;
}
.faq-section--hosting-page .eyebrow {
  color: #bde96a;
}
@media (max-width: 1200px) {
  .hosting-hero__grid,
  .hosting-cpanel-grid {
    grid-template-columns: 1fr;
  }
  .hosting-hero__visual {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
  }
  .hosting-value-grid,
  .hosting-use-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 820px) {
  .hosting-hero__visual,
  .email-hero__visual {
    min-height: 620px;
  }
  .hosting-support-grid,
  .hosting-value-grid,
  .hosting-use-grid {
    grid-template-columns: 1fr;
  }
  .hosting-hero__actions .btn {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .hosting-hero {
    padding: 54px 0 58px;
  }
  .hosting-hero__visual,
  .email-hero__visual {
    min-height: 540px;
  }
}


/* ==============================
   V48 DOMAINS LANDING
   ============================== */
.domains-landing-page {
  background: #fffef9;
}
.domains-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 78px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 14%, rgba(141,198,63,.26), transparent 22%),
    radial-gradient(circle at 18% 92%, rgba(18,183,201,.18), transparent 24%),
    linear-gradient(135deg, #152326 0%, #26343a 55%, #172428 100%);
}
.domains-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--hl-green), var(--hl-yellow), var(--hl-cyan));
}
.domains-hero__grid {
  display: grid;
  grid-template-columns: minmax(0,.94fr) minmax(430px,1.06fr);
  gap: 56px;
  align-items: center;
}
.domains-hero__copy .eyebrow {
  color: #bde96a;
}
.domains-hero__copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px,6vw,76px);
  line-height: .96;
  letter-spacing: -.06em;
}
.domains-hero__copy p {
  max-width: 760px;
  color: rgba(255,255,255,.82);
  font-size: clamp(18px,2vw,23px);
  line-height: 1.52;
}
.domains-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.domains-hero__badges span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-weight: 850;
}
.domains-search-card {
  position: relative;
  border-radius: 34px;
  padding: 34px;
  background: linear-gradient(180deg,#ffffff 0%,#f7fff0 100%);
  box-shadow: 0 32px 78px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.40);
}
.domains-search-card::before {
  content: "";
  position: absolute;
  inset: auto 30px -18px 30px;
  height: 38px;
  border-radius: 50%;
  background: rgba(141,198,63,.22);
  filter: blur(18px);
}
.domains-search-card h2 {
  margin: 0;
  color: #203033;
  font-size: clamp(32px,4vw,48px);
  line-height: 1;
  letter-spacing: -.05em;
}
.domains-search-card p {
  color: var(--hl-muted);
  font-size: 17px;
}
.domain-search-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  margin-top: 22px;
  position: relative;
  z-index: 2;
}
.domain-search-form input[type="text"] {
  width: 100%;
  min-height: 62px;
  border-radius: 999px;
  border: 2px solid rgba(141,198,63,.28);
  background: #fff;
  padding: 0 22px;
  color: #203033;
  font-size: 18px;
  font-weight: 800;
  outline: none;
}
.domain-search-form input[type="text"]:focus {
  border-color: #8dc63f;
  box-shadow: 0 0 0 5px rgba(141,198,63,.12);
}
.domain-search-form button {
  min-height: 62px;
  border: 0;
  border-radius: 999px;
  padding: 0 24px;
  background: linear-gradient(135deg,#8dc63f 0%,#bde96a 100%);
  color: #203033;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(141,198,63,.28);
}
.domains-search-card small {
  display: block;
  margin-top: 12px;
  color: var(--hl-muted);
}
.domains-featured-section,
.domains-pricing-section {
  background: linear-gradient(135deg,#ffffff 0%,#f7fbef 100%);
}
.domain-featured-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.domain-pricing-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 16px;
}
.domain-price-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 22px;
  background: linear-gradient(180deg,#ffffff 0%,#fbfff6 100%);
  border: 1px solid rgba(141,198,63,.16);
  box-shadow: 0 14px 30px rgba(28,43,40,.07);
}
.domain-price-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg,var(--hl-green),var(--hl-yellow));
}
.domain-price-card__term {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(141,198,63,.14);
  color: #2f5f12;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.domain-price-card h3 {
  margin: 16px 0 10px;
  color: #203033;
  font-size: clamp(28px,3vw,38px);
  line-height: 1;
  letter-spacing: -.04em;
}
.domain-price-card__price {
  display: grid;
  gap: 4px;
}
.domain-price-card__price del {
  color: #87939a;
  font-weight: 800;
  font-size: 14px;
}
.domain-price-card__price strong {
  display: block;
  color: #2f5f12;
  font-size: 22px;
  line-height: 1.1;
}
.domain-price-card small {
  display: block;
  margin-top: 10px;
  color: var(--hl-muted);
  font-size: 12px;
  line-height: 1.35;
}
.domain-price-card--featured {
  min-height: 190px;
}
.domain-price-card.popular {
  border-color: rgba(141,198,63,.38);
}
.domain-price-card.sale {
  background: linear-gradient(180deg,#fff8df 0%,#ffffff 100%);
  border-color: rgba(255,197,51,.42);
}
.domain-price-card.sale::after {
  background: linear-gradient(90deg,#ffc533,#8dc63f);
}
.domain-price-card.mx-special {
  background: linear-gradient(180deg,#eaf8d6 0%,#ffffff 100%);
}
.domain-price-card.premium {
  background: linear-gradient(180deg,#f1f6ff 0%,#ffffff 100%);
  border-color: rgba(18,183,201,.28);
}
.domains-benefits-section {
  background: #fffef9;
}
.domains-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.domains-benefits-grid article {
  background: #fff;
  border: 1px solid rgba(141,198,63,.16);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 14px 30px rgba(28,43,40,.07);
}
.domains-benefits-grid span {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(141,198,63,.20),rgba(255,197,51,.16));
  font-size: 24px;
  margin-bottom: 16px;
}
.domains-benefits-grid h3 {
  margin: 0 0 10px;
  color: #203033;
  font-size: 20px;
}
.domains-benefits-grid p {
  color: var(--hl-muted);
  margin: 0;
}
.domains-transfer-section {
  background: linear-gradient(135deg,#25333a 0%,#172428 100%);
  color: #fff;
}
.domains-transfer-grid {
  display: grid;
  grid-template-columns: .96fr 1.04fr;
  gap: 42px;
  align-items: center;
}
.domains-transfer-grid .eyebrow {
  color: #bde96a;
}
.domains-transfer-grid h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px,5vw,56px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.domains-transfer-grid p {
  color: rgba(255,255,255,.80);
  font-size: 18px;
}
.domains-mini-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.domains-mini-points span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 850;
}
.domains-transfer-card {
  padding: 34px;
  border-radius: 30px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 42px rgba(0,0,0,.18);
}
.domains-transfer-card strong {
  display: block;
  color: #fff;
  font-size: 30px;
  line-height: 1;
}
.domains-transfer-card .btn {
  margin-top: 14px;
}
.faq-section--domains-page {
  background: linear-gradient(135deg,#2f3438 0%,#394348 100%);
  color: #fff;
}
.faq-section--domains-page .section-heading h2 {
  color: #fff;
}
.faq-section--domains-page .eyebrow {
  color: #bde96a;
}
@media (max-width: 1240px) {
  .domain-pricing-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
@media (max-width: 1100px) {
  .domains-hero__grid,
  .domains-transfer-grid {
    grid-template-columns: 1fr;
  }
  .domain-featured-grid,
  .domains-benefits-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 900px) {
  .domain-pricing-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
@media (max-width: 680px) {
  .domain-search-form {
    grid-template-columns: 1fr;
  }
  .domain-featured-grid,
  .domains-benefits-grid,
  .domain-pricing-grid {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   V50 INTERIOR SERVICE PAGES
   ============================== */
.hl-inner-page {
  background: #fffef9;
}
.inner-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 78px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 14%, rgba(141,198,63,.25), transparent 22%),
    radial-gradient(circle at 18% 92%, rgba(18,183,201,.16), transparent 24%),
    linear-gradient(135deg, #152326 0%, #26343a 55%, #172428 100%);
}
.inner-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--hl-green), var(--hl-yellow), var(--hl-cyan));
}
.inner-hero__grid {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(350px,1.05fr);
  gap: 54px;
  align-items: center;
}
.inner-hero .eyebrow {
  color: #bde96a;
}
.inner-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(42px,6vw,72px);
  line-height: .98;
  letter-spacing: -.06em;
}
.inner-hero p {
  max-width: 760px;
  color: rgba(255,255,255,.82);
  font-size: clamp(18px,2vw,22px);
  line-height: 1.52;
}
.inner-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.inner-visual-card,
.contact-card-main {
  border-radius: 34px;
  padding: 34px;
  background: linear-gradient(180deg,#ffffff 0%,#f7fff0 100%);
  box-shadow: 0 32px 78px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.40);
  color: #203033;
}
.inner-visual-card strong,
.contact-card-main h2 {
  display: block;
  margin: 0;
  font-size: clamp(30px,4vw,44px);
  line-height: 1.04;
  letter-spacing: -.04em;
  color: #203033;
}
.inner-visual-card span {
  display: block;
  margin-top: 14px;
  color: var(--hl-muted);
  font-size: 18px;
  line-height: 1.5;
}
.inner-visual-card--warning {
  background: linear-gradient(180deg,#fff6d6 0%,#ffffff 100%);
}
.contact-card-main ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.contact-card-main li {
  color: #203033;
  font-size: 16px;
}
.contact-card-main a {
  color: #2f5f12;
  font-weight: 900;
}
.contact-options-section,
.inner-features-section,
.inner-process-section {
  background: linear-gradient(135deg,#ffffff 0%,#f4f9ec 100%);
}
.contact-options-grid,
.inner-features-grid,
.inner-steps-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}
.inner-steps-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.contact-options-grid article,
.inner-features-grid article,
.inner-steps-grid article {
  background: #fff;
  border: 1px solid rgba(141,198,63,.16);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 14px 30px rgba(28,43,40,.07);
}
.contact-options-grid span {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(141,198,63,.20),rgba(255,197,51,.16));
  font-size: 24px;
  margin-bottom: 16px;
}
.contact-options-grid h3,
.inner-features-grid h3,
.inner-steps-grid h3 {
  margin: 0 0 10px;
  color: #203033;
  font-size: 20px;
}
.contact-options-grid p,
.inner-features-grid p,
.inner-steps-grid p {
  color: var(--hl-muted);
  margin: 0 0 12px;
}
.contact-options-grid a {
  color: #2f5f12;
  font-weight: 950;
}
.inner-steps-grid b {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg,#8dc63f,#bde96a);
  color: #203033;
  margin-bottom: 16px;
}
.inner-disclaimer {
  text-align: center;
  max-width: 820px;
  margin: 24px auto 0;
  color: var(--hl-muted);
}
.inner-faq-section,
.inner-service-cta {
  background: #fffef9;
}
.inner-service-cta__box {
  text-align: center;
  border-radius: 34px;
  padding: 58px 34px;
  background: linear-gradient(135deg,#8dc63f 0%,#12b7c9 100%);
  color: #203033;
  box-shadow: 0 24px 58px rgba(28,43,40,.14);
}
.inner-service-cta__box h2 {
  margin: 0;
  font-size: clamp(34px,5vw,56px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.inner-service-cta__box p {
  max-width: 760px;
  margin: 16px auto 26px;
  color: rgba(32,48,51,.82);
  font-size: 18px;
}
@media (max-width: 1080px) {
  .inner-hero__grid {
    grid-template-columns: 1fr;
  }
  .inner-steps-grid,
  .contact-options-grid,
  .inner-features-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 700px) {
  .inner-steps-grid,
  .contact-options-grid,
  .inner-features-grid {
    grid-template-columns: 1fr;
  }
  .inner-hero__actions .btn {
    width: 100%;
  }
}


/* ==============================
   V51 INTERIOR HERO IMAGES
   ============================== */
.inner-image-card {
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(180deg,#101916 0%,#07100b 100%);
  border: 1px solid rgba(141,198,63,.22);
  box-shadow: 0 32px 78px rgba(0,0,0,.28);
}
.inner-image-card img {
  display: block;
  width: 100%;
  height: auto;
}
.inner-image-card--transfer img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.inner-image-card--restore {
  background: linear-gradient(180deg,#0a1410 0%,#07100b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.inner-image-card--restore img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 24px;
}
.inner-image-card--service {
  background: #e9f1ff;
}
.inner-image-card--service img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}


/* ==============================
   V53 SERVICE PRODUCT TABLES + HERO ART
   ============================== */
.inner-image-card--service {
  background: linear-gradient(180deg,#101916 0%,#07100b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.inner-image-card--service img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 24px;
}
.inner-image-card--service-filtro-spam img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}
.service-pricing-section {
  background: linear-gradient(135deg,#ffffff 0%,#f7fbef 100%);
}
.service-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  align-items: stretch;
}
.service-pricing-grid--count-1 {
  max-width: 560px;
  margin: 0 auto;
  grid-template-columns: 1fr;
}
.service-price-card {
  position: relative;
  overflow: visible;
  border-radius: 28px;
  padding: 30px;
  background: linear-gradient(180deg,#ffffff 0%,#fbfff6 100%);
  border: 1px solid rgba(141,198,63,.18);
  box-shadow: 0 18px 38px rgba(28,43,40,.09);
}
.service-price-card--featured {
  background: linear-gradient(180deg,#eaf8d6 0%,#ffffff 100%);
  border: 2px solid #8dc63f;
  box-shadow: 0 22px 46px rgba(141,198,63,.18);
}
.service-price-card__badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg,#8dc63f,#bde96a);
  color: #203033;
  font-weight: 950;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 0 10px 22px rgba(141,198,63,.24);
  white-space: nowrap;
}
.service-price-card h3 {
  margin: 0;
  color: #203033;
  font-size: clamp(26px,3vw,36px);
  line-height: 1;
  letter-spacing: -.04em;
  text-align: center;
}
.service-price-card__price {
  margin: 20px 0 18px;
  text-align: center;
}
.service-price-card__price strong {
  display: block;
  color: #2f5f12;
  font-size: clamp(34px,4vw,48px);
  line-height: 1;
}
.service-price-card__price span {
  display: block;
  margin-top: 6px;
  color: var(--hl-muted);
  font-size: 13px;
  font-weight: 900;
}
.service-price-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-price-card li {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(36,48,51,.10);
}
.service-price-card li:first-child {
  border-top: 1px solid rgba(36,48,51,.10);
}
.service-price-card li b {
  color: #203033;
  font-size: 14px;
}
.service-price-card li span {
  color: var(--hl-muted);
  font-size: 14px;
  line-height: 1.35;
  text-align: right;
  font-weight: 800;
}
.service-landing-page--certificados-ssl .service-price-card li:nth-child(3),
.service-landing-page--ip-privada-2 .service-price-card li:nth-child(1),
.service-landing-page--dns-personalizados .service-price-card li:nth-child(1),
.service-landing-page--almacenamiento-adicional .service-price-card li:nth-child(1) {
  background: linear-gradient(135deg, rgba(141,198,63,.10), rgba(255,255,255,.96));
  border-radius: 14px;
  padding: 12px;
  margin: 8px 0;
  border: 1px solid rgba(70,110,22,.14);
}
.service-landing-page--certificados-ssl .service-price-card li:nth-child(3) b,
.service-landing-page--certificados-ssl .service-price-card li:nth-child(3) span,
.service-landing-page--ip-privada-2 .service-price-card li:nth-child(1) b,
.service-landing-page--ip-privada-2 .service-price-card li:nth-child(1) span,
.service-landing-page--dns-personalizados .service-price-card li:nth-child(1) b,
.service-landing-page--dns-personalizados .service-price-card li:nth-child(1) span,
.service-landing-page--almacenamiento-adicional .service-price-card li:nth-child(1) b,
.service-landing-page--almacenamiento-adicional .service-price-card li:nth-child(1) span {
  color: #2f5f12;
  font-weight: 950;
}
@media (max-width: 1100px) {
  .service-pricing-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .service-pricing-grid--count-1 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .service-pricing-grid {
    grid-template-columns: 1fr;
  }
  .service-price-card li {
    grid-template-columns: 1fr;
  }
  .service-price-card li span {
    text-align: left;
  }
}


/* ==============================
   V55 ABOUT / PROMOTIONS / FAVICON READY
   ============================== */
.about-landing-page .inner-visual-card,
.promotions-landing-page .inner-visual-card {
  background: linear-gradient(180deg,#ffffff 0%,#f7fff0 100%);
}


/* ==============================
   V56 QUIENES SOMOS REWORK
   ============================== */
.about-hero-v56 .inner-hero__grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
}
.about-brand-card-v56 {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  padding: 34px;
  min-height: 410px;
  background:
    radial-gradient(circle at 70% 20%, rgba(141,198,63,.22), transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f7fff0 100%);
  box-shadow: 0 32px 78px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.40);
  color: #203033;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-brand-card-v56::before {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 26px;
  border: 1px solid rgba(141,198,63,.20);
  pointer-events: none;
}
.about-brand-card-v56__logo {
  position: relative;
  z-index: 2;
  padding: 24px;
  border-radius: 26px;
  background: linear-gradient(135deg,#1d2b30 0%,#2f4146 100%);
  box-shadow: 0 18px 42px rgba(28,43,40,.16);
}
.about-brand-card-v56__logo img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}
.about-brand-card-v56__timeline {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin: 28px 0 20px;
}
.about-brand-card-v56__timeline span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg,#8dc63f,#bde96a);
  color: #203033;
  font-weight: 950;
}
.about-brand-card-v56__timeline b {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,#8dc63f,#ffc533,#12b7c9);
}
.about-brand-card-v56 strong {
  position: relative;
  z-index: 2;
  display: block;
  color: #203033;
  font-size: 26px;
  line-height: 1.1;
  text-align: center;
}
.about-brand-card-v56 small {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 8px;
  color: var(--hl-muted);
  font-weight: 900;
  text-align: center;
  font-size: 14px;
}
.about-story-section-v56 {
  background: linear-gradient(135deg,#ffffff 0%,#f4f9ec 100%);
}
.about-story-grid-v56 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.86fr);
  gap: 42px;
  align-items: center;
}
.about-story-grid-v56 h2,
.about-legal-box-v56 h2 {
  margin: 0;
  color: #203033;
  font-size: clamp(34px,5vw,56px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.about-story-grid-v56 p {
  color: var(--hl-muted);
  font-size: 18px;
  line-height: 1.65;
}
.about-story-card-v56 {
  padding: 30px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(141,198,63,.18);
  box-shadow: 0 18px 38px rgba(28,43,40,.09);
}
.about-story-card-v56 h3 {
  margin: 0 0 16px;
  color: #203033;
  font-size: 28px;
}
.about-story-card-v56 ul {
  margin: 0;
  padding-left: 20px;
  color: var(--hl-muted);
  line-height: 1.65;
}
.about-mission-section-v56 {
  background: #fffef9;
}
.about-services-section-v56 {
  background: linear-gradient(135deg,#25333a 0%,#172428 100%);
  color: #fff;
}
.about-services-section-v56 .section-heading h2 {
  color: #fff;
}
.about-services-section-v56 .section-heading p,
.about-services-section-v56 .eyebrow {
  color: #bde96a;
}
.about-services-grid-v56 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.about-services-grid-v56 article {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}
.about-services-grid-v56 span {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(141,198,63,.22),rgba(255,197,51,.16));
  font-size: 24px;
  margin-bottom: 16px;
}
.about-services-grid-v56 h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 20px;
}
.about-services-grid-v56 p {
  color: rgba(255,255,255,.76);
  margin: 0;
}
.about-legal-section-v56 {
  background: linear-gradient(135deg,#ffffff 0%,#f4f9ec 100%);
}
.about-legal-box-v56 {
  text-align: center;
  max-width: 980px;
  border-radius: 34px;
  padding: 54px 34px;
  background: linear-gradient(135deg,#8dc63f 0%,#12b7c9 100%);
  color: #203033;
  box-shadow: 0 24px 58px rgba(28,43,40,.14);
}
.about-legal-box-v56 p {
  max-width: 760px;
  margin: 16px auto 0;
  color: rgba(32,48,51,.82);
  font-size: 18px;
}
@media (max-width: 1100px) {
  .about-hero-v56 .inner-hero__grid,
  .about-story-grid-v56 {
    grid-template-columns: 1fr;
  }
  .about-services-grid-v56 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 700px) {
  .about-services-grid-v56 {
    grid-template-columns: 1fr;
  }
  .about-brand-card-v56 {
    padding: 24px;
    min-height: 340px;
  }
}