/* =======================================================================
   PREMIUM THEME LAYER — Soluciones Integrales DJK
   Capa de refinamiento visual (se carga DESPUÉS de style.css).
   Sombras en capas, glass, degradados sutiles, brillos ambientales
   y micro-interacciones para una imagen de alta gama.
   ======================================================================= */
:root{
  --premium-grad:linear-gradient(135deg,#2563eb 0%,#3b82f6 45%,#22d3ee 100%);
  --shadow:0 30px 64px -30px rgba(15,37,71,.34), 0 8px 22px -16px rgba(15,37,71,.18);
  --shadow-sm:0 20px 44px -26px rgba(15,37,71,.26);
  --glow-blue:0 22px 50px -20px rgba(37,99,235,.45);
  --ring-soft:0 0 0 1px rgba(15,37,71,.05);
}

/* --- Barra de acento premium en el tope (señal visible + detalle de alta gama) --- */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:4px;z-index:200;
  background:linear-gradient(90deg,#2563eb,#22d3ee,#3b82f6,#22d3ee,#2563eb)}

/* --- Render de tipografía más fino --- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.022em}
::selection{background:rgba(37,99,235,.18);color:var(--navy)}

/* --- Scrollbar premium (WebKit) --- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#eef3fb}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2563eb,#22d3ee);border-radius:10px;border:3px solid #eef3fb}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#1d4ed8,#06b6d4)}

/* --- Header: glass más refinado --- */
.header{background:#fff}
.header.scrolled{background:#fff;box-shadow:0 12px 36px -20px rgba(15,37,71,.4)}
.menu>a{transition:color .2s,background .2s}
.menu>a:hover{background:rgba(37,99,235,.07)}

/* --- Botones premium: degradado + brillo de barrido + glow --- */
.btn{letter-spacing:.005em}
.btn-primary{background:var(--premium-grad);box-shadow:var(--glow-blue);position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 28%,rgba(255,255,255,.4) 50%,transparent 72%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-primary:hover{box-shadow:0 28px 60px -20px rgba(37,99,235,.6)}
.btn-dark{background:linear-gradient(135deg,#10295180,#0b1e3b),linear-gradient(135deg,#13315c,#0b1e3b)}
.btn-ghost{background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{box-shadow:0 16px 34px -18px rgba(37,99,235,.4)}

/* --- Brillos ambientales detrás del hero --- */
.hero{position:relative;overflow:hidden;background:radial-gradient(130% 120% at 82% -10%,#e8f1ff 0,#f4f9ff 40%,#ffffff 72%)}
.hero::before{content:"";position:absolute;width:640px;height:640px;right:-140px;top:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.22),transparent 62%);pointer-events:none;z-index:0}
.hero::after{content:"";position:absolute;width:560px;height:560px;left:-180px;bottom:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.15),transparent 60%);pointer-events:none;z-index:0}
.hero .container{position:relative;z-index:1}
.hero-text h1{letter-spacing:-.03em}
.hero-desc{color:#5a6b85}

/* --- Marco premium del slider del hero --- */
.hero-media{position:relative}
.hero-media::after{content:"";position:absolute;inset:-22px;border-radius:34px;z-index:-1;
  background:radial-gradient(60% 60% at 50% 40%,rgba(37,99,235,.20),transparent 70%);filter:blur(6px)}
.hero-swiper{border-radius:26px;box-shadow:0 44px 84px -34px rgba(15,37,71,.55), 0 0 0 1px rgba(255,255,255,.6) inset}
.hero-swiper .swiper-button-prev,.hero-swiper .swiper-button-next{backdrop-filter:blur(6px);background:rgba(255,255,255,.85);box-shadow:0 10px 24px -10px rgba(15,37,71,.5)}

/* --- Tarjetas: hairline + fondo sutil + sombra en capas --- */
.stat-card,.service-card,.plan-card,.project-card,.channel-card,.aside-card,.contact-form,.contact-map{
  border:1px solid rgba(15,37,71,.07);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 22px 46px -28px rgba(15,37,71,.26)
}
.service-card,.project-card,.plan-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.service-card:hover,.project-card:hover{transform:translateY(-10px);box-shadow:0 40px 72px -30px rgba(37,99,235,.34)}
.plan-card:hover{box-shadow:0 40px 72px -30px rgba(37,99,235,.30)}

/* Línea de acento superior al pasar el mouse (servicios) */
.service-card{position:relative}
.service-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:4;
  background:var(--premium-grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.service-card:hover::before{transform:scaleX(1)}

/* Ícono de servicio premium */
.sc-icon{background:var(--premium-grad);color:#fff;border:none;box-shadow:0 16px 28px -10px rgba(37,99,235,.6)}

/* --- Indicadores premium: número en degradado + ícono en chip --- */
.stat-card{padding:28px 26px}
.stat-card h3{background:var(--premium-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-card>i{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;opacity:1;font-size:1.5rem;
  background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(34,211,238,.14));color:var(--blue)}

/* --- Planes: destacado con glow --- */
.plan-card.featured{box-shadow:0 44px 84px -32px rgba(37,99,235,.5);border-color:rgba(37,99,235,.35)}
.plan-badge{box-shadow:0 14px 26px -10px rgba(37,99,235,.6)}

/* --- Fondos de sección con degradado suave y separador superior --- */
.services,.plans,.cta{background:linear-gradient(180deg,#f3f8ff 0%,#eaf2ff 100%);position:relative}
.services::before,.plans::before,.cta::before,.partners::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.25),transparent)}
.partners{background:linear-gradient(180deg,#ffffff,#f7faff);position:relative}

/* --- About: imagen con marco premium --- */
.about-media img{box-shadow:0 40px 80px -34px rgba(15,37,71,.5)}
.about-media::after{content:"";position:absolute;inset:-18px;border-radius:32px;z-index:-1;
  background:radial-gradient(60% 60% at 50% 50%,rgba(34,211,238,.16),transparent 70%);filter:blur(6px)}

/* --- CTA: tarjeta con borde degradado sutil --- */
.cta-inner{background:linear-gradient(180deg,#ffffff,#fbfdff);box-shadow:0 34px 70px -34px rgba(15,37,71,.34);
  border:1px solid rgba(37,99,235,.10)}

/* --- Contacto premium --- */
.contact-list i{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(34,211,238,.12))}
.contact-map,.contact-form{box-shadow:0 32px 64px -32px rgba(15,37,71,.34)}

/* --- Footer premium --- */
.footer{background:linear-gradient(180deg,#ffffff,#f5f9ff);position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--premium-grad);opacity:.85}
.socials a{box-shadow:0 8px 20px -12px rgba(37,99,235,.4)}

/* --- WhatsApp float premium --- */
.whatsapp-float{box-shadow:0 18px 40px -10px rgba(37,211,102,.75)}

/* --- Modal de cotización premium --- */
.qmodal-box{box-shadow:0 40px 100px -30px rgba(3,10,26,.6);border:1px solid rgba(255,255,255,.6)}
.qmodal-backdrop{background:rgba(3,10,26,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* --- Page hero (tickets) premium --- */
.page-hero{box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.ticket-form-head{background:linear-gradient(135deg,#13315c,#0b1e3b)}

/* --- Micro-interacción global de tarjetas con ícono --- */
.channel-card:hover,.stat-card:hover{box-shadow:0 34px 64px -30px rgba(37,99,235,.30)}

/* =======================================================================
   EXOTIC LAYER — hero oscuro con aurora animada, neón y degradados vivos
   ======================================================================= */
/* Barra superior más viva */
body::before{height:5px;background:linear-gradient(90deg,#2563eb,#22d3ee,#a855f7,#22d3ee,#2563eb)}

/* --- HERO OSCURO + AURORA --- */
.hero{background:#070b22;overflow:hidden;color:#fff;padding-bottom:120px}
.hero::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;filter:blur(34px);
  background:
    radial-gradient(38% 48% at 18% 28%, rgba(37,99,235,.60), transparent 60%),
    radial-gradient(34% 44% at 82% 18%, rgba(34,211,238,.50), transparent 60%),
    radial-gradient(46% 56% at 72% 82%, rgba(168,85,247,.45), transparent 62%),
    radial-gradient(40% 50% at 28% 80%, rgba(14,165,233,.42), transparent 60%);
  }
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(125,211,252,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.08) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(circle at 40% 50%,#000,transparent 80%);-webkit-mask-image:radial-gradient(circle at 40% 50%,#000,transparent 80%)}
.hero .container{position:relative;z-index:2}

/* Texto del hero en claro */
.hero .eyebrow{color:#7dd3fc;background:rgba(125,211,252,.08);border:1px solid rgba(125,211,252,.32);padding:7px 16px;border-radius:999px;backdrop-filter:blur(6px)}
.hero-text h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero-desc{color:#c7d6f2}

/* Headline con degradado ANIMADO */
.grad{background:linear-gradient(90deg,#60a5fa,#22d3ee,#a855f7,#22d3ee,#60a5fa);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Slider con borde neón y halo vivo */
.hero-swiper{border-radius:26px;
  box-shadow:0 0 0 1px rgba(125,211,252,.45), 0 34px 80px -30px rgba(0,0,0,.75), 0 0 70px -8px rgba(34,211,238,.45)}
.hero-media::after{content:"";position:absolute;inset:-34px;border-radius:40px;z-index:-1;filter:blur(26px);
  background:radial-gradient(60% 60% at 45% 40%, rgba(168,85,247,.5), rgba(34,211,238,.32) 55%, transparent 75%)}

/* Botones exóticos */
.hero .btn-dark{background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28);color:#fff;
  box-shadow:0 0 34px -8px rgba(34,211,238,.55)}
.hero .btn-dark:hover{background:rgba(255,255,255,.18);box-shadow:0 0 44px -6px rgba(34,211,238,.8)}
.hero .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff;backdrop-filter:blur(10px)}
.btn-primary{box-shadow:0 0 0 1px rgba(125,211,252,.3), 0 18px 44px -12px rgba(34,211,238,.6)}

/* Escudo y anillos con más glow */
.hero-shield{filter:drop-shadow(0 0 40px rgba(34,211,238,.6)) drop-shadow(0 20px 40px rgba(168,85,247,.4))}
.hero-rings{border-color:rgba(125,211,252,.6);box-shadow:0 0 0 14px rgba(34,211,238,.14),0 0 50px rgba(34,211,238,.4)}

/* Indicadores: chip con glow al pasar */
.stat-card:hover>i{box-shadow:0 0 26px -6px rgba(37,99,235,.5)}

/* Encabezados de sección: subrayado de luz */
.section-head h2,.about-text h2{position:relative}

/* Tarjetas: borde degradado vivo al hover */
.service-card:hover,.plan-card:hover,.project-card:hover{box-shadow:0 30px 70px -28px rgba(37,99,235,.4),0 0 0 1px rgba(34,211,238,.25)}

/* Ícono de servicio con glow */
.sc-icon{box-shadow:0 14px 30px -8px rgba(37,99,235,.65),0 0 24px -6px rgba(34,211,238,.5)}

/* WhatsApp con halo más vivo */
.whatsapp-float{box-shadow:0 0 0 0 rgba(37,211,102,.5),0 18px 40px -8px rgba(37,211,102,.8)}

/* Foto fija del hero: mismo halo neón que tenía el slider */
.hero-photo{box-shadow:0 0 0 1px rgba(125,211,252,.45), 0 34px 80px -30px rgba(0,0,0,.75), 0 0 70px -8px rgba(34,211,238,.45)!important}

/* =======================================================================
   RENDIMIENTO MÓVIL — recorta los efectos que más cargan el hilo principal
   (style/layout/paint) en CPU móvil throttleada. El look se mantiene casi
   idéntico: los degradados radiales ya van suaves sin el filter:blur en vivo,
   y backdrop-filter es de lo más caro de pintar en móvil.
   ======================================================================= */
@media (max-width:900px){
  /* backdrop-filter -> fondo sólido translúcido (mismo aspecto, sin coste de blur) */
  .btn-ghost,.hero .btn-dark,.hero .btn-ghost,.hero .eyebrow{backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero .btn-dark{background:rgba(255,255,255,.12)}
  .hero .btn-ghost{background:rgba(255,255,255,.10)}
  .hero .eyebrow{background:rgba(125,211,252,.12)}
  .qmodal-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(3,10,26,.82)}

  /* Aurora del hero: el filter:blur(34px) sobre un área gigante es carísimo.
     En su lugar, degradados radiales ya difuminados por sus paradas (sin filter). */
  .hero::before{filter:none;inset:0;
    background:
      radial-gradient(60% 50% at 20% 25%, rgba(37,99,235,.42), transparent 60%),
      radial-gradient(55% 45% at 85% 15%, rgba(34,211,238,.30), transparent 60%),
      radial-gradient(60% 55% at 75% 85%, rgba(168,85,247,.28), transparent 62%)}
  /* Rejilla con máscara: aporta poco en móvil y cuesta paint -> fuera */
  .hero::after{display:none}
  /* Halos blur detrás del hero/about: el filter:blur en vivo es caro; lo suavizamos */
  .hero-media::after,.about-media::after{filter:none}
}