/*
Theme Name: pwrGrow — Growth Marketing & Web Solutions
Theme URI: https://pwrgrow.com/
Author: pwrGrow Team
Author URI: https://pwrgrow.com/
Description: Tema nativo de alto rendimiento para pwrGrow. Incluye todas las 22 páginas preinstaladas automáticamente en WordPress sin necesidad de importar archivos, Mega Menú multinivel, suite de diseño UX, integración con Contact Form 7, motor SMTP nativo, sincronización automática con Yoast SEO y Rank Math, y panel de personalización global.
Version: 2.8.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: pwrgrow
*/

/* Reset & Safeguards */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  background-color: #0c0d0e;
  color: #f1f5f9;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

/* ============================================================
   ORIGINAL STYLES FROM PWRGROW HOME & SERVICES
   ============================================================ */


/* ============================================================
   PWR GROW SIGNATURE BUTTON STYLES & SHINE SWEEP ANIMATION
   ============================================================ */
.btn-red,
.btn-primary,
a[class*="bg-brand-red"],
button[class*="bg-brand-red"],
a[class*="bg-[#e23d3d]"],
button[class*="bg-[#e23d3d]"],
a[class*="bg-red-600"],
button[class*="bg-red-600"] {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.btn-red::after,
.btn-primary::after,
a[class*="bg-brand-red"]::after,
button[class*="bg-brand-red"]::after,
a[class*="bg-[#e23d3d]"]::after,
button[class*="bg-[#e23d3d]"]::after,
a[class*="bg-red-600"]::after,
button[class*="bg-red-600"]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 55% !important;
  height: 100% !important;
  transform: skewX(-20deg) !important;
  pointer-events: none !important;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%) !important;
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.btn-red:hover::after,
.btn-primary:hover::after,
a[class*="bg-brand-red"]:hover::after,
button[class*="bg-brand-red"]:hover::after,
a[class*="bg-[#e23d3d]"]:hover::after,
button[class*="bg-[#e23d3d]"]:hover::after,
a[class*="bg-red-600"]:hover::after,
button[class*="bg-red-600"]:hover::after {
  left: 150% !important;
}

.btn-red:hover,
.btn-primary:hover,
a[class*="bg-brand-red"]:hover,
button[class*="bg-brand-red"]:hover,
a[class*="bg-[#e23d3d]"]:hover,
button[class*="bg-[#e23d3d]"]:hover,
a[class*="bg-red-600"]:hover,
button[class*="bg-red-600"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 14px 34px rgba(226, 61, 61, 0.45) !important;
}

.btn-wa,
a[class*="bg-[#25D366]"],
button[class*="bg-[#25D366]"],
a[class*="bg-brand-green"],
button[class*="bg-brand-green"] {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.btn-wa::after,
a[class*="bg-[#25D366]"]::after,
button[class*="bg-[#25D366]"]::after,
a[class*="bg-brand-green"]::after,
button[class*="bg-brand-green"]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 55% !important;
  height: 100% !important;
  transform: skewX(-20deg) !important;
  pointer-events: none !important;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%) !important;
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.btn-wa:hover::after,
a[class*="bg-[#25D366]"]:hover::after,
button[class*="bg-[#25D366]"]:hover::after,
a[class*="bg-brand-green"]:hover::after,
button[class*="bg-brand-green"]:hover::after {
  left: 150% !important;
}

.btn-wa:hover,
a[class*="bg-[#25D366]"]:hover,
button[class*="bg-[#25D366]"]:hover,
a[class*="bg-brand-green"]:hover,
button[class*="bg-brand-green"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.45) !important;
}







      :root {



        --color-accent: #e23d3d;



        --color-green: #25D366;



        --color-bg: #0c0d0e;



      }



      html, body {



        background-color: #0c0d0e;



        color: #f1f5f9;



        font-family: 'Plus Jakarta Sans', sans-serif;



        font-size: 18px;



        line-height: 1.8;



        overflow-x: hidden;



      }







      /* Custom Scrollbar */



      ::-webkit-scrollbar {



        width: 10px;



      }



      ::-webkit-scrollbar-track {



        background: #0c0d0e;



      }



      ::-webkit-scrollbar-thumb {



        background: #2b2e34;



        border-radius: 5px;



      }



      ::-webkit-scrollbar-thumb:hover {



        background: #e23d3d;



      }







      /* HERO BACKGROUND WITH MASK */



      .hero-bg-wrapper {



        position: absolute;



        inset: 0;



        width: 100%;



        height: 100%;



        z-index: 1;



        overflow: hidden;



        pointer-events: none;



      }







      .hero-bg-img {



        position: absolute;



        inset: 0;



        width: 100%;



        height: 100%;



        object-fit: cover;



        object-position: right center;



        opacity: 0.58;



        mix-blend-mode: luminosity;



        filter: contrast(120%) brightness(92%);



      }







      .hero-bg-mask {



        position: absolute;



        inset: 0;



        width: 100%;



        height: 100%;



        background: 



          linear-gradient(90deg, #0c0d0e 0%, rgba(12, 13, 14, 0.96) 35%, rgba(12, 13, 14, 0.7) 65%, rgba(12, 13, 14, 0.25) 85%, rgba(12, 13, 14, 0.75) 100%),



          linear-gradient(180deg, rgba(12, 13, 14, 0.85) 0%, transparent 20%, transparent 80%, #0c0d0e 100%);



      }







      /* HERO FLECHA UNIQUE ANIMATION */



      @keyframes flechaFloatGlow {



        0% {



          transform: translate3d(0, 0, 0) scale(1) rotate(0deg);



          filter: drop-shadow(0 0 18px rgba(226, 61, 61, 0.55)) drop-shadow(0 0 35px rgba(226, 61, 61, 0.3));



        }



        50% {



          transform: translate3d(-14px, -18px, 0) scale(1.035) rotate(-0.6deg);



          filter: drop-shadow(0 0 32px rgba(226, 61, 61, 0.9)) drop-shadow(0 0 65px rgba(226, 61, 61, 0.5));



        }



        100% {



          transform: translate3d(0, 0, 0) scale(1) rotate(0deg);



          filter: drop-shadow(0 0 18px rgba(226, 61, 61, 0.55)) drop-shadow(0 0 35px rgba(226, 61, 61, 0.3));



        }



      }







      .hero-flecha-animated {



        animation: flechaFloatGlow 6.5s ease-in-out infinite;



        transform-origin: center right;



        will-change: transform, filter;



      }







      /* Subtle Grid Background */



      .bg-grid {



        background-size: 40px 40px;



        background-image: 



          linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),



          linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);



      }







      /* Infinite Marquee Animation */



      @keyframes marquee {



        0% { transform: translateX(0%); }



        100% { transform: translateX(-50%); }



      }



      .animate-marquee {



        display: flex;



        width: 200%;



        animation: marquee 25s linear infinite;



      }



      .animate-marquee:hover {



        animation-play-state: paused;



      }







      /* Vertical Tool Stack Animations */



      @keyframes scrollUp {



        from { transform: translateY(0); }



        to { transform: translateY(calc(-50% - 12px)); }



      }



      @keyframes scrollDown {



        from { transform: translateY(calc(-50% - 12px)); }



        to { transform: translateY(0); }



      }



      .animate-scroll-up {



        animation: scrollUp 22s linear infinite;



      }



      .animate-scroll-down {



        animation: scrollDown 22s linear infinite;



      }



      .animate-scroll-up:hover, .animate-scroll-down:hover {



        animation-play-state: paused;



      }







      /* 3D GLOBE & ORBIT SYSTEM (Grand Scale, High-Definition & Fully Responsive) */



      







      







      



      



      



      



      @media (min-width: 640px) {



        



      }







      /* 3D GLOBE CANVAS CONTAINER */



      



      .globe-3d-sphere:active {



        cursor: grabbing;



      }







      /* Glowing Card Borders */



      .card-glow {



        position: relative;



        transition: all 0.3s ease;



      }



      .card-glow:hover {



        border-color: rgba(226, 61, 61, 0.45);



        box-shadow: 0 0 35px rgba(226, 61, 61, 0.15);



        transform: translateY(-5px);



      }



    

      /* SEAMLESS INFINITE LOGO MARQUEE */

      @keyframes marquee-scroll {

        0% { transform: translateX(0%); }

        100% { transform: translateX(-50%); }

      }

      .animate-marquee-infinite {

        display: flex;

        width: max-content;

        animation: marquee-scroll 32s linear infinite;

      }

      .animate-marquee-infinite:hover {

        animation-play-state: paused;

      }



    
      /* 3D GLOBE & ORBITAL SYSTEM HIGH-PERFORMANCE ENGINE */
      .orbit-system-wrapper {
        position: relative;
        width: 100%;
        max-width: 820px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: pan-y;
      }

      .circle-orbit {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        pointer-events: none;
      }

      /* Outer Main Orbital Ring passing right through the node centers */
      .circle-orbit-outer {
        width: 80%;
        height: 80%;
        border: 2px dashed rgba(255, 255, 255, 0.35);
        box-shadow: 0 0 35px rgba(226, 61, 61, 0.2), inset 0 0 35px rgba(226, 61, 61, 0.08);
      }

      /* Middle Guide Ring */
      .circle-orbit-middle {
        width: 62%;
        height: 62%;
        border: 1.5px dashed rgba(255, 255, 255, 0.18);
      }

      /* Inner Glow Ring surrounding the 3D sphere */
      .circle-orbit-inner {
        width: 48%;
        height: 48%;
        border: 2px solid rgba(226, 61, 61, 0.5);
        box-shadow: 0 0 45px rgba(226, 61, 61, 0.35), inset 0 0 30px rgba(226, 61, 61, 0.25);
      }

      .globe-3d-sphere {
        position: absolute;
        z-index: 15;
        width: 46%;
        height: 46%;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 
          0 0 60px rgba(226, 61, 61, 0.5),
          0 0 120px rgba(226, 61, 61, 0.25);
        background: transparent;
        cursor: grab;
      }
      .globe-3d-sphere:active {
        cursor: grabbing;
      }

      .orbit-node {
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 25;
        cursor: pointer;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        text-decoration: none;
      }

      .orbit-node:hover {
        transform: translate(-50%, -50%) scale(1.15);
        z-index: 35;
      }

      .orbit-icon-box {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(145deg, #1c1e22, #111215);
        border: 2px solid rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
      }

      @media (min-width: 640px) {
        .orbit-icon-box {
          width: 58px;
          height: 58px;
        }
      }

      @media (min-width: 768px) {
        .orbit-icon-box {
          width: 66px;
          height: 66px;
        }
      }

      .orbit-node:hover .orbit-icon-box {
        background: #0c0d0e;
        border-color: #e23d3d;
        color: #e23d3d;
        box-shadow: 0 0 35px rgba(226, 61, 61, 0.9), 0 10px 30px rgba(0, 0, 0, 0.85);
      }

      .orbit-legend-pill {
        margin-top: 6px;
        background: rgba(18, 20, 23, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 9999px;
        padding: 3px 10px;
        font-size: 11px;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: 0.02em;
        white-space: nowrap;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(8px);
        transition: all 0.3s ease;
        text-align: center;
      }

      @media (min-width: 640px) {
        .orbit-legend-pill {
          padding: 4px 12px;
          font-size: 12px;
          margin-top: 8px;
        }
      }

      @media (min-width: 768px) {
        .orbit-legend-pill {
          padding: 5px 14px;
          font-size: 13px;
        }
      }

      .orbit-node:hover .orbit-legend-pill {
        background: rgba(226, 61, 61, 0.25);
        border-color: #e23d3d;
        color: #ffffff;
        box-shadow: 0 0 25px rgba(226, 61, 61, 0.6);
      }

/* ============================================================
   ORIGINAL STYLES FROM PWRGROW SALES LANDING (DISEÑO WEB)
   ============================================================ */


/* ============================================================
   PWR GROW SIGNATURE BUTTON STYLES & SHINE SWEEP ANIMATION
   ============================================================ */
.btn-red,
.btn-primary,
a[class*="bg-brand-red"],
button[class*="bg-brand-red"],
a[class*="bg-[#e23d3d]"],
button[class*="bg-[#e23d3d]"],
a[class*="bg-red-600"],
button[class*="bg-red-600"] {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.btn-red::after,
.btn-primary::after,
a[class*="bg-brand-red"]::after,
button[class*="bg-brand-red"]::after,
a[class*="bg-[#e23d3d]"]::after,
button[class*="bg-[#e23d3d]"]::after,
a[class*="bg-red-600"]::after,
button[class*="bg-red-600"]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 55% !important;
  height: 100% !important;
  transform: skewX(-20deg) !important;
  pointer-events: none !important;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%) !important;
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.btn-red:hover::after,
.btn-primary:hover::after,
a[class*="bg-brand-red"]:hover::after,
button[class*="bg-brand-red"]:hover::after,
a[class*="bg-[#e23d3d]"]:hover::after,
button[class*="bg-[#e23d3d]"]:hover::after,
a[class*="bg-red-600"]:hover::after,
button[class*="bg-red-600"]:hover::after {
  left: 150% !important;
}

.btn-red:hover,
.btn-primary:hover,
a[class*="bg-brand-red"]:hover,
button[class*="bg-brand-red"]:hover,
a[class*="bg-[#e23d3d]"]:hover,
button[class*="bg-[#e23d3d]"]:hover,
a[class*="bg-red-600"]:hover,
button[class*="bg-red-600"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 14px 34px rgba(226, 61, 61, 0.45) !important;
}

.btn-wa,
a[class*="bg-[#25D366]"],
button[class*="bg-[#25D366]"],
a[class*="bg-brand-green"],
button[class*="bg-brand-green"] {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.btn-wa::after,
a[class*="bg-[#25D366]"]::after,
button[class*="bg-[#25D366]"]::after,
a[class*="bg-brand-green"]::after,
button[class*="bg-brand-green"]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 55% !important;
  height: 100% !important;
  transform: skewX(-20deg) !important;
  pointer-events: none !important;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%) !important;
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.btn-wa:hover::after,
a[class*="bg-[#25D366]"]:hover::after,
button[class*="bg-[#25D366]"]:hover::after,
a[class*="bg-brand-green"]:hover::after,
button[class*="bg-brand-green"]:hover::after {
  left: 150% !important;
}

.btn-wa:hover,
a[class*="bg-[#25D366]"]:hover,
button[class*="bg-[#25D366]"]:hover,
a[class*="bg-brand-green"]:hover,
button[class*="bg-brand-green"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.45) !important;
}

:root{
  --rojo:#E23D3D; --rojo-deep:#C22E2E;
  --tinta:#1A1A1D; --char:#4D4D4D; --gris:#6B6B72;
  --fondo:#FFFFFF; --mist:#F6F6F8; --linea:#E5E5EA;
  --dark:#141417; --dark-2:#0E0E10;
  --nav-h:82px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:"Inter",system-ui,sans-serif;color:var(--tinta);background:var(--fondo);line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.num,.price{font-family:"Space Grotesk",sans-serif}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--rojo);color:#fff;padding:12px 18px;font-weight:600;border-radius:0 0 10px 0}
.skip:focus{left:0}
h2{font-size:clamp(1.85rem,3.4vw,2.75rem);line-height:1.14;letter-spacing:-.5px;font-weight:700}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-weight:600;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rojo);margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--rojo)}
.lead{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--gris);max-width:640px;margin-top:16px}
.s-light{padding:clamp(72px,9vw,118px) 0}
.s-mist{padding:clamp(72px,9vw,118px) 0;background:var(--mist)}
.s-dark{padding:clamp(72px,9vw,118px) 0;background:radial-gradient(120% 90% at 50% 0%,#26262b 0%,var(--dark) 48%,var(--dark-2) 100%);color:#EDEDF0}
.s-dark h2,.s-dark h3{color:#fff}
.s-dark .lead{color:#A9A9B4}
.s-dark .eyebrow{color:#FF6B6B}
.s-dark .eyebrow::before{background:#FF6B6B}

/* NAV */
.nav{position:fixed;top:0;left:0;width:100%;z-index:100;height:var(--nav-h);display:flex;align-items:center;transition:background .4s var(--ease),box-shadow .4s var(--ease),height .4s var(--ease)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px}
.logo{position:relative;display:block;line-height:0}
.logo img{height:34px;width:auto;transition:height .4s var(--ease),opacity .35s}
.logo .lg-color{position:absolute;inset:0;opacity:0}
.nav.scrolled{background:rgba(255,255,255,.97);box-shadow:0 6px 30px rgba(20,20,23,.09);height:68px;backdrop-filter:saturate(140%) blur(6px)}
.nav.scrolled .logo .lg-white{opacity:0}
.nav.scrolled .logo .lg-color{opacity:1}
.nav.scrolled .logo img{height:30px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-family:"Space Grotesk";font-weight:500;font-size:15px;color:#fff;position:relative;padding:6px 0;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--rojo);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav.scrolled .nav-links a{color:#26262b}
.nav.scrolled .nav-links a:hover{color:var(--rojo)}
.nav .btn-wa{padding:12px 22px;font-size:.93rem;box-shadow:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none}
.burger span{width:26px;height:2.5px;background:#fff;border-radius:2px;transition:.3s}
.nav.scrolled .burger span{background:var(--tinta)}

/* BOTONES */
.btn-red,.btn-ghost,.btn-wa,.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:"Space Grotesk";font-weight:600;font-size:1rem;padding:16px 34px;border-radius:60px;cursor:pointer;border:none;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn-red{background:var(--rojo);color:#fff;box-shadow:0 14px 34px rgba(226,61,61,.3)}
.btn-red:hover{background:var(--rojo-deep);transform:translateY(-3px)}
.btn-dark{background:var(--tinta);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-3px)}
.btn-ghost{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 14px 34px rgba(37,211,102,.28)}
.btn-wa:hover{background:#1EBE5B;transform:translateY(-3px)}
.btn-red svg,.btn-ghost svg{transition:transform .35s var(--ease)}
.btn-red:hover svg,.btn-ghost:hover svg{transform:translateX(4px)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* HERO */
.hero{position:relative;min-height:min(100vh,860px);padding-top:110px;display:flex;align-items:center;overflow:hidden;background:var(--dark-2)}
.hero-bg{position:absolute;inset:-8% 0 -8% 0;z-index:0;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(10,10,12,.96) 0%,rgba(10,10,12,.90) 34%,rgba(10,10,12,.62) 55%,rgba(10,10,12,.25) 78%,rgba(10,10,12,.15) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:var(--nav-h)}
.hero-copy{max-width:660px;color:#fff}
.hero h1{font-weight:700;font-size:clamp(2.25rem,5vw,3.85rem);line-height:1.07;letter-spacing:-1px;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--rojo);display:block}
.hero p{font-size:clamp(1.03rem,1.5vw,1.22rem);color:#C9C9D2;max-width:540px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:26px;font-size:.9rem;color:#8E8E99}

/* BARRA DE DATOS */
.stats{background:var(--tinta);color:#fff;padding:30px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat b{display:block;font-family:"Space Grotesk";font-size:1.5rem;font-weight:700;color:#fff;line-height:1.2}
.stat span{font-size:.9rem;color:#A0A0AA}

/* BLOQUES ALTERNADOS */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.split+.split{margin-top:clamp(60px,8vw,110px)}
.split.rev .split-media{order:-1}
.split h3{font-size:clamp(1.45rem,2.5vw,2rem);font-weight:700;line-height:1.2;letter-spacing:-.4px;margin-bottom:16px}
.split p{color:var(--gris)}
.split ul{list-style:none;margin-top:20px;display:grid;gap:11px}
.split li{display:flex;gap:11px;align-items:flex-start;font-size:1rem}
.split li svg{flex:0 0 20px;margin-top:3px;color:var(--rojo)}
.split-media{border-radius:18px;overflow:hidden;background:var(--mist);border:1px solid var(--linea)}
.split-media svg{width:100%;height:auto;display:block}

/* PLANES */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;margin-top:52px}
.plan{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:36px 30px 32px;display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .4s,background .4s;position:relative}
.plan:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.075)}
.plan.top{border-color:var(--rojo);background:rgba(226,61,61,.09)}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--rojo);color:#fff;font-family:"Space Grotesk";font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 18px;border-radius:40px;white-space:nowrap}
.plan h3{font-size:1.35rem;font-weight:700;margin-bottom:6px}
.plan .who{font-size:.94rem;color:#A9A9B4;min-height:48px}
.price{display:flex;align-items:baseline;gap:6px;margin:20px 0 4px}
.price .cur{font-size:1.05rem;font-weight:500;color:#C9C9D2}
.price .val{font-size:3rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-1.5px}
.price .from{font-size:.85rem;color:#A9A9B4;margin-left:2px}
.plan .terms{font-size:.83rem;color:#8E8E99;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:22px}
.plan ul{list-style:none;display:grid;gap:12px;margin-bottom:28px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:#DCDCE2}
.plan li svg{flex:0 0 18px;margin-top:4px;color:var(--rojo)}
.plan .btn-red,.plan .btn-ghost{width:100%}

/* TABLA COMPARATIVA */
.table-scroll{overflow-x:auto;margin-top:44px;border:1px solid var(--linea);border-radius:16px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:.95rem}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
thead th{background:var(--tinta);color:#fff;font-family:"Space Grotesk";font-weight:600;font-size:1rem;position:sticky;top:0}
thead th:first-child{border-radius:0}
thead th small{display:block;font-family:"Inter";font-weight:500;font-size:.82rem;color:#A0A0AA;margin-top:2px}
tbody th{font-weight:600;font-size:.95rem;width:30%;background:var(--mist)}
tbody th small{display:block;font-weight:400;color:var(--gris);font-size:.83rem;margin-top:2px}
td{color:var(--char);text-align:center;width:23.3%}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
.yes{color:var(--rojo);font-weight:700}
.no{color:#C2C2CA}
.tnote{font-size:.86rem;color:var(--gris);margin-top:18px;max-width:820px}

/* ADICIONALES */
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.addon{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:24px 22px;transition:transform .35s var(--ease),box-shadow .35s}
.addon:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,20,23,.08)}
.addon h4{font-size:1.02rem;font-weight:600;margin-bottom:8px}
.addon .p{font-family:"Space Grotesk";font-weight:700;color:var(--rojo);font-size:1.15rem}
.addon p{font-size:.9rem;color:var(--gris)}

/* PROCESO */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.step{position:relative;padding:30px 24px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.04);transition:transform .4s var(--ease),border-color .4s}
.step:hover{transform:translateY(-6px);border-color:var(--rojo)}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--rojo);color:#fff;font-weight:700;font-size:1.1rem;margin-bottom:18px}
.step h3{font-size:1.1rem;font-weight:600;margin-bottom:9px}
.step p{font-size:.94rem;color:#A9A9B4}

/* FAQ */
.faq{max-width:860px;margin:44px auto 0;border-top:1px solid var(--linea)}
.q{border-bottom:1px solid var(--linea)}
.q button{width:100%;background:none;border:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;cursor:pointer;text-align:left;font-family:"Space Grotesk";font-weight:600;font-size:1.08rem;color:var(--tinta)}
.q button svg{flex:0 0 20px;color:var(--rojo);transition:transform .4s var(--ease)}
.q.open button svg{transform:rotate(45deg)}
.a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease),padding .45s var(--ease)}
.q.open .a{max-height:340px;padding-bottom:24px}
.a p{color:var(--gris);font-size:1rem;padding-right:40px}

/* CONTACTO */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,70px);align-items:start}
form{display:grid;gap:16px;margin-top:26px}
.field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1.5px solid var(--linea);border-radius:11px;font-family:"Inter";font-size:1rem;background:#fff;color:var(--tinta);transition:border-color .25s,box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--rojo);box-shadow:0 0 0 4px rgba(226,61,61,.12)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--gris)}
.check input{margin-top:4px;accent-color:var(--rojo);width:17px;height:17px;flex:0 0 17px}
.hp{position:absolute;left:-9999px;opacity:0;height:0}
.msg{display:none;padding:15px 18px;border-radius:11px;font-size:.95rem}
.msg.ok{display:block;background:#E9F8EF;color:#17683C;border:1px solid #B7E4CA}
.msg.err{display:block;background:#FDECEC;color:#A02121;border:1px solid #F5C4C4}
.contact-side{background:var(--mist);border:1px solid var(--linea);border-radius:18px;padding:34px 30px}
.contact-side h3{font-size:1.2rem;font-weight:700;margin-bottom:14px}
.contact-side p{color:var(--gris);font-size:.97rem;margin-bottom:22px}
.cline{display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--linea);font-size:.97rem}
.cline svg{color:var(--rojo);flex:0 0 20px}

/* FOOTER */
.footer{background:var(--dark-2);color:#9A9AA4;padding:60px 0 28px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand{max-width:300px}
.foot-brand img{height:34px;margin-bottom:16px}
.foot-brand p{font-size:.93rem}
.foot-col h4{font-family:"Space Grotesk";color:#fff;font-size:.98rem;margin-bottom:15px;font-weight:600}
.foot-col a,.foot-col p{display:block;color:#9A9AA4;font-size:.94rem;margin-bottom:10px;transition:color .25s}
.foot-col a:hover{color:var(--rojo)}
.copy{text-align:center;padding-top:24px;font-size:.87rem;color:#6E6E78}

/* WhatsApp flotante */
.float-wa{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff;box-shadow:0 12px 30px rgba(37,211,102,.42);transition:transform .3s var(--ease)}
.float-wa:hover{transform:scale(1.08)}

/* Foco visible (accesibilidad) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
.s-dark a:focus-visible,.s-dark button:focus-visible{outline-color:#FF6B6B}

/* Comparativa — selector de plan (se activa en móvil) */
.cmp-tabs{display:none;gap:8px;margin-top:44px}
.cmp-tab{flex:1;background:#fff;border:1.5px solid var(--linea);border-radius:12px;padding:11px 8px 10px;font-family:"Space Grotesk";font-weight:600;font-size:.92rem;color:var(--gris);cursor:pointer;display:flex;flex-direction:column;gap:2px;line-height:1.12;transition:border-color .25s,color .25s,background .25s}
.cmp-tab small{font-family:"Inter";font-weight:500;font-size:.72rem;color:var(--gris)}
.cmp-tab.on{border-color:var(--rojo);background:rgba(226,61,61,.05);color:var(--tinta)}
.cmp-tab.on small{color:var(--rojo)}

/* Portafolio / prueba social */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.work{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--linea);transition:transform .4s var(--ease),box-shadow .4s}
.work:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(20,20,23,.10)}
.work-shot{aspect-ratio:16/10;background:var(--mist);border-bottom:1px solid var(--linea);overflow:hidden}
.work-shot svg,.work-shot img{width:100%;height:100%;object-fit:cover;display:block}
.work-cap{padding:18px 20px}
.work-cap .tag{font-family:"Space Grotesk";font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo)}
.work-cap h3{font-size:1.06rem;font-weight:600;margin-top:5px}
.work-cap p{font-size:.9rem;color:var(--gris);margin-top:5px}
.works-cta{text-align:center;margin-top:40px}

/* Jerarquía del plan destacado (solo desktop) */
@keyframes glowPulse{0%,100%{box-shadow:0 26px 60px rgba(226,61,61,.18)}50%{box-shadow:0 32px 78px rgba(226,61,61,.34)}}
@media(min-width:1001px){
  .plan.top{transform:scale(1.045);box-shadow:0 28px 64px rgba(226,61,61,.20);z-index:2;animation:glowPulse 4.5s var(--ease) infinite}
  .plan.top:hover{transform:scale(1.045) translateY(-8px);animation-play-state:paused}
  .plan.top .price .val{font-size:3.3rem}
}

/* ============ REALCE VISUAL ============ */

/* Barra de progreso de scroll */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rojo),#FF6B6B);box-shadow:0 0 12px rgba(226,61,61,.65)}

/* Profundidad en secciones oscuras: glows sutiles */
.s-dark{position:relative;isolation:isolate}
.s-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(42% 62% at 10% -5%,rgba(226,61,61,.13),transparent 70%),
  radial-gradient(34% 55% at 95% 105%,rgba(226,61,61,.11),transparent 72%)}

/* Glow rojo detrás del headline del hero */
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;left:-8%;top:8%;width:460px;height:460px;max-width:78vw;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(226,61,61,.20),transparent 62%);filter:blur(12px)}

/* Subrayado animado del acento del hero */
.hero h1 em{position:relative;width:fit-content}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--rojo),#FF6B6B);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .5s}
.hero h1 em.lit::after{transform:scaleX(1)}

/* Barra de datos: acento, divisores, degradado y hover */
.stats{position:relative}
.stats::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--rojo),transparent)}
.stat{position:relative;transition:transform .3s var(--ease)}
.stat:hover{transform:translateY(-3px)}
.stat+.stat::before{content:"";position:absolute;left:-12px;top:20%;height:60%;width:1px;background:rgba(255,255,255,.12)}
.stat b{background:linear-gradient(180deg,#fff,#C6C6D0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Botón rojo: destello diagonal al hover */
.btn-red{position:relative;overflow:hidden}
.btn-red::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);transition:left .65s var(--ease)}
.btn-red:hover::after{left:150%}

/* Complementos: barra de acento que crece */
.addon{position:relative;overflow:hidden}
.addon::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rojo);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.addon:hover::before{transform:scaleY(1)}
.addon h4{transition:color .3s}
.addon:hover h4{color:var(--rojo)}

/* Proceso: el número reacciona */
.step .num{transition:transform .4s var(--ease),box-shadow .4s}
.step:hover .num{transform:scale(1.08) rotate(-4deg);box-shadow:0 10px 26px rgba(226,61,61,.45)}

/* Portafolio: zoom sutil del mockup */
.work-shot svg{transition:transform .6s var(--ease)}
.work:hover .work-shot svg{transform:scale(1.045)}

@media(max-width:1000px){
  .plans{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .steps{grid-template-columns:repeat(2,1fr)}
  .addons{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media(max-width:760px){
  .wrap{padding:0 22px}
  .nav-links{position:fixed;inset:0 0 0 auto;width:76%;max-width:320px;height:100vh;background:#fff;flex-direction:column;justify-content:center;gap:28px;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.18);z-index:99}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:1.22rem;color:#26262b}
  .nav .btn-wa{display:none}
  .burger{display:flex;z-index:100}
  .burger.x span{background:var(--tinta)}
  .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .hero-bg img{object-position:80% center}
  .hero-bg::after{background:linear-gradient(180deg,rgba(10,10,12,.90) 0%,rgba(10,10,12,.72) 40%,rgba(10,10,12,.44) 72%,rgba(10,10,12,.30) 100%)}
  .hero-cta .btn-red,.hero-cta .btn-wa{flex:1 1 100%}
  .row{grid-template-columns:1fr}
  .addons{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .works{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  /* Comparativa: de scroll horizontal a selector de una columna */
  .cmp-tabs{display:flex}
  .cmp .table-scroll{margin-top:14px;overflow-x:visible}
  .cmp table{min-width:0}
  .cmp thead th{position:static}
  .cmp tbody th{width:auto}
  .cmp thead th:not(:first-child){text-align:center}
  .cmp[data-active="1"] thead th:nth-child(3),.cmp[data-active="1"] thead th:nth-child(4),.cmp[data-active="1"] tbody td:nth-child(3),.cmp[data-active="1"] tbody td:nth-child(4){display:none}
  .cmp[data-active="2"] thead th:nth-child(2),.cmp[data-active="2"] thead th:nth-child(4),.cmp[data-active="2"] tbody td:nth-child(2),.cmp[data-active="2"] tbody td:nth-child(4){display:none}
  .cmp[data-active="3"] thead th:nth-child(2),.cmp[data-active="3"] thead th:nth-child(3),.cmp[data-active="3"] tbody td:nth-child(2),.cmp[data-active="3"] tbody td:nth-child(3){display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* BUTTON SHINE ANIMATION & ELEVATION */
.btn-red, a[class*="bg-brand-red"], button[class*="bg-brand-red"] {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.btn-red::after, a[class*="bg-brand-red"]::after, button[class*="bg-brand-red"]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 55% !important;
  height: 100% !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent) !important;
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.btn-red:hover::after, a[class*="bg-brand-red"]:hover::after, button[class*="bg-brand-red"]:hover::after {
  left: 150% !important;
}
.btn-red:hover, a[class*="bg-brand-red"]:hover, button[class*="bg-brand-red"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 34px rgba(226, 61, 61, 0.45) !important;
}

.btn-wa, a[class*="bg-[#25D366]"], a[class*="bg-brand-green"] {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.btn-wa::after, a[class*="bg-[#25D366]"]::after, a[class*="bg-brand-green"]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 55% !important;
  height: 100% !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent) !important;
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.btn-wa:hover::after, a[class*="bg-[#25D366]"]:hover::after, a[class*="bg-brand-green"]:hover::after {
  left: 150% !important;
}
.btn-wa:hover, a[class*="bg-[#25D366]"]:hover, a[class*="bg-brand-green"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.4) !important;
}