/* =========================================================
 VIX HOSTING — HERO INTERIOR 2026
 Base reusable para servicios y productos internos.
 ========================================================= */
.service-hero-2026{
  position:relative;
  min-height:clamp(430px,31vw,510px);
  overflow:hidden;
  isolation:isolate;
  background:#04142e;
  color:#fff;
}
.service-hero-2026__background{
  position:absolute;
  inset:0;
  z-index:-4;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.service-hero-2026__shade{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(2,14,34,.98) 0%,rgba(3,19,45,.93) 27%,rgba(4,24,56,.68) 45%,rgba(5,28,63,.12) 65%,rgba(4,20,46,0) 100%),
    linear-gradient(180deg,rgba(2,13,31,.12) 0%,rgba(2,13,31,0) 56%,rgba(2,13,31,.08) 100%);
  pointer-events:none;
}
.service-hero-2026__ambient{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 44%,rgba(18,92,255,.16),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 36%);
}
.service-hero-2026__container{
  min-height:inherit;
  display:flex;
  align-items:center;
}
.service-hero-2026__content{
  width:min(100%,720px);
  padding:54px 0 50px;
}
.service-hero-2026__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#60bdff;
  font-size:11px;
  font-weight:850;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.service-hero-2026__eyebrow i{
  width:24px;
  height:1px;
  background:linear-gradient(90deg,#4fc7ff,#1c6bff);
  box-shadow:0 0 9px rgba(79,199,255,.45);
}
.service-hero-2026 h1{
  margin:20px 0 18px;
  max-width:760px;
  color:#fff;
  font-family:Manrope,Inter,system-ui,sans-serif;
  font-size:clamp(48px,4.7vw,74px);
  font-weight:800;
  line-height:.99;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.service-hero-2026__lead{
  max-width:650px;
  margin:0;
  color:#c2d0e3;
  font-size:17px;
  line-height:1.65;
}
.service-hero-2026__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.service-hero-2026__actions .btn{
  min-height:50px;
  padding:0 24px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:13px;
  font-weight:800;
}
.service-hero-2026__actions .btn-primary{
  background:linear-gradient(90deg,#1262ff,#1d79ff);
  border-color:transparent;
  color:#fff;
  box-shadow:0 15px 32px rgba(18,98,255,.22);
}
.service-hero-2026__actions .btn-ghost{
  background:rgba(2,19,45,.52);
  border-color:rgba(126,167,219,.34);
  color:#fff;
  backdrop-filter:blur(10px);
}
.service-hero-2026__actions .btn .icon{
  width:16px;
  height:16px;
}
.service-hero-2026__tags{
  display:flex;
  flex-wrap:wrap;
  gap:16px 26px;
  margin-top:24px;
}
.service-hero-2026__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#eef5ff;
  backdrop-filter:none;
}
.service-hero-2026__tag .icon{
  width:15px;
  height:15px;
  color:#3caaff;
}
.service-hero-2026__tag strong{
  color:#f2f7ff;
  font-size:11.5px;
  font-weight:750;
}

/* WordPress — composición aprobada */
.service-hero-2026--wordpress .service-hero-2026__background{object-position:center center}

@media(max-width:1100px){
  .service-hero-2026{min-height:450px}
  .service-hero-2026__shade{
    background:
      linear-gradient(90deg,rgba(2,14,34,.98) 0%,rgba(3,18,43,.93) 36%,rgba(4,22,51,.54) 60%,rgba(4,20,46,.06) 100%),
      linear-gradient(180deg,rgba(2,13,31,.10),rgba(2,13,31,.06));
  }
  .service-hero-2026__content{width:min(100%,620px)}
  .service-hero-2026 h1{font-size:clamp(48px,6vw,66px)}
}
@media(max-width:820px){
  .service-hero-2026{min-height:500px}
  .service-hero-2026__background{object-position:68% center}
  .service-hero-2026__shade{
    background:
      linear-gradient(90deg,rgba(2,14,34,.98) 0%,rgba(3,18,43,.93) 50%,rgba(4,22,51,.60) 74%,rgba(4,20,46,.16) 100%),
      linear-gradient(180deg,rgba(2,13,31,.10),rgba(2,13,31,.14));
  }
  .service-hero-2026__content{width:min(100%,560px);padding:46px 0}
  .service-hero-2026__lead{font-size:15.5px;max-width:540px}
}
@media(max-width:620px){
  .service-hero-2026{min-height:520px}
  .service-hero-2026__background{object-position:70% center;opacity:.78}
  .service-hero-2026__shade{
    background:
      linear-gradient(90deg,rgba(2,14,34,.98) 0%,rgba(3,18,43,.93) 68%,rgba(4,22,51,.48) 100%),
      linear-gradient(180deg,rgba(2,13,31,.10),rgba(2,13,31,.28));
  }
  .service-hero-2026__content{padding:42px 0 38px}
  .service-hero-2026 h1{font-size:clamp(42px,13vw,54px);max-width:480px}
  .service-hero-2026__lead{font-size:15px;line-height:1.55;max-width:450px}
  .service-hero-2026__actions{display:grid;grid-template-columns:1fr;margin-top:24px;max-width:360px}
  .service-hero-2026__actions .btn{width:100%}
  .service-hero-2026__tags{gap:12px 20px;max-width:430px}
  .service-hero-2026__tag{min-height:auto;padding:0}
}
@media(prefers-reduced-motion:reduce){
  .service-hero-2026__actions .btn{transition:none!important}
}

/* Hosting Web — misma base visual aprobada para WordPress */
.service-hero-2026--hosting-web .service-hero-2026__background{object-position:center center}
@media(max-width:820px){
  .service-hero-2026--hosting-web .service-hero-2026__background{object-position:72% center}
}
@media(max-width:620px){
  .service-hero-2026--hosting-web .service-hero-2026__background{object-position:76% center}
}


/* Reseller Hosting — hero interior aplicado */
.service-hero-2026--reseller .service-hero-2026__background{object-position:center center}
@media(max-width:820px){
  .service-hero-2026--reseller .service-hero-2026__background{object-position:72% center}
}
@media(max-width:620px){
  .service-hero-2026--reseller .service-hero-2026__background{object-position:78% center;opacity:.82}
}


/* Correo Corporativo — composición holográfica sin personaje */
.service-hero-2026--mail .service-hero-2026__background{object-position:center center}
@media(max-width:820px){
  .service-hero-2026--mail .service-hero-2026__background{object-position:76% center}
}
@media(max-width:620px){
  .service-hero-2026--mail .service-hero-2026__background{object-position:82% center;opacity:.84}
}

/* Dominios — búsqueda, DNS y transferencia sin personaje */
.service-hero-2026--domains .service-hero-2026__background{object-position:center center}
@media(max-width:820px){
  .service-hero-2026--domains .service-hero-2026__background{object-position:76% center}
}
@media(max-width:620px){
  .service-hero-2026--domains .service-hero-2026__background{object-position:83% center;opacity:.84}
}


/* Transferir dominio — flujo seguro, EPP, DNS y continuidad */
.service-hero-2026--domain-transfer .service-hero-2026__background{object-position:center center}
@media(max-width:820px){
  .service-hero-2026--domain-transfer .service-hero-2026__background{object-position:77% center}
}
@media(max-width:620px){
  .service-hero-2026--domain-transfer .service-hero-2026__background{object-position:84% center;opacity:.84}
}