/* Tipografía y Utilidades */
 .gradient-text {
     /* Gradiente Naranja Vibrante -> Ligeramente más oscuro para profundidad */
     background: linear-gradient(135deg, #ff751f 0%, #fa8c42 50%, #e66212 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .glass-card {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(42, 45, 50, 0.08);
     /* Borde sutil Charcoal */
 }

 .mesh-gradient {
     background-color: #ffffff;
     background-image:
         /* Bloques de Dark Slate (#151922) y Naranja (#ff751f) muy difuminados */
         radial-gradient(at 0% 0%, hsla(222, 24%, 11%, 0.05) 0px, transparent 50%),
         radial-gradient(at 100% 0%, hsla(24, 100%, 56%, 0.12) 0px, transparent 50%),
         radial-gradient(at 100% 100%, hsla(222, 24%, 11%, 0.05) 0px, transparent 50%),
         radial-gradient(at 0% 100%, hsla(24, 100%, 56%, 0.08) 0px, transparent 50%);
 }

 .noise-bg {
     position: relative;
 }

 .noise-bg::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0.03;
     pointer-events: none;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
     z-index: 0;
 }


 /* Fondo responsivo para el Hero */
 .hero-bg {
     background-image: none;
 }

 @media (min-width: 768px) {
     .hero-bg {
         background-image: url('img/bg-marketing-digital.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         background-position: right;
     }
 }

 /* Interacciones */
 .card-hover {
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .card-hover:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px -10px rgba(21, 25, 34, 0.15);
     /* Sombra Dark Slate */
     border-color: #ff751f;
     /* Borde naranja al hover */
 }

 .input-focus:focus {
     box-shadow: 0 0 0 3px rgba(255, 117, 31, 0.25);
     /* Ring Naranja */
     border-color: #ff751f;
 }

 /* Animaciones GSAP Helper */
 .scroll-reveal {
     opacity: 0;
     transform: translateY(30px);
 }

 /* Animaciones CSS */
 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 .animate-float {
     animation: float 6s ease-in-out infinite;
 }

 @keyframes pulse-slow {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: .8;
     }
 }

 .animate-pulse-slow {
     animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }

 /* CARRUSEL INFINITO (Marquee) */
 .animate-marquee {
     animation: marquee 40s linear infinite;
 }

 .animate-marquee:hover {
     animation-play-state: paused;
 }

 @keyframes marquee {
     0% {
         transform: translateX(0);
     }

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

 /* WhatsApp Floating Component Helpers */
 #wa-form-window.active {
     display: block;
     opacity: 1;
     transform: translateY(0);
 }

 #wa-toggle-btn.active #wa-icon {
     transform: scale(0);
     opacity: 0;
 }

 #wa-toggle-btn.active #wa-close-icon {
     display: block;
     transform: scale(1);
     opacity: 1;
 }

 #wa-label.hidden {
     opacity: 0;
     transform: translateX(20px);
     pointer-events: none;
 }

 /* Triangle Pointer for Label */
 #wa-label::after {
     content: "";
     position: absolute;
     right: -8px;
     top: 50%;
     transform: translateY(-50%);
     border-width: 7px 0 7px 8px;
     border-style: solid;
     border-color: transparent transparent transparent #f8f9fa;
     filter: drop-shadow(3px 0 2px rgba(0, 0, 0, 0.04));
 }