/* ============================================
   IMPORTS Y RESET
   ============================================ */

   @import url('https://unpkg.com/aos@2.3.1/dist/aos.css');

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   :root {
       /* Colores principales */
       --color-primary: #000000;
       --color-secondary: #ffffff;
       --color-accent: #d4af37;
       --color-accent-hover: #b8941f;
       --color-accent-light: #f4e4b8;
       
       /* Colores de fondo */
       --color-bg-dark: #0a0a0a;
       --color-bg-light: #f8f8f8;
       --color-bg-gray: #1a1a1a;
       --color-bg-white: #ffffff;
       --color-bg-cream: #faf8f3;
       
       /* Colores de texto */
       --color-text-primary: #000000;
       --color-text-secondary: #ffffff;
       --color-text-gray: #555555;
       --color-text-light-gray: #888888;
       
       /* Colores de estado */
       --color-success: #27ae60;
       --color-danger: #e74c3c;
       --color-warning: #f39c12;
       --color-info: #3498db;
       
       /* Gradientes */
       --gradient-dark: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
       --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f4e4b8 100%);
       --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
       
       /* Sombras */
       --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.1);
       --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
       --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.2);
       --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.3);
       --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.4);
       
       /* Tipografía */
       --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       --font-heading: 'Georgia', 'Times New Roman', serif;
       
       /* Espaciado */
       --spacing-xs: 0.5rem;
       --spacing-sm: 1rem;
       --spacing-md: 2rem;
       --spacing-lg: 4rem;
       --spacing-xl: 6rem;
       --spacing-xxl: 8rem;
       
       /* Transiciones */
       --transition-fast: 0.2s ease;
       --transition-normal: 0.3s ease;
       --transition-slow: 0.5s ease;
       
       /* Z-index */
       --z-preloader: 10000;
       --z-header: 1000;
       --z-whatsapp: 999;
       --z-overlay: 100;
   }
   
   html {
       scroll-behavior: smooth;
   }
   
   body {
       font-family: var(--font-primary);
       font-size: 16px;
       line-height: 1.6;
       color: var(--color-text-primary);
       background-color: var(--color-bg-white);
       overflow-x: hidden;
   }
   
   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   img {
       max-width: 100%;
       height: auto;
       display: block;
   }
   
   a {
       text-decoration: none;
       color: inherit;
       transition: var(--transition-fast);
   }
   
   ul {
       list-style: none;
   }
   
   /* ============================================
      PRELOADER
      ============================================ */
   
   .preloader {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--gradient-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: var(--z-preloader);
       transition: opacity 0.5s ease, visibility 0.5s ease;
   }
   
   .preloader.hidden {
       opacity: 0;
       visibility: hidden;
   }
   
   .preloader-content {
       text-align: center;
       color: var(--color-secondary);
   }
   
   .loader {
       width: 50px;
       height: 50px;
       border: 4px solid rgba(255, 255, 255, 0.1);
       border-top-color: var(--color-accent);
       border-radius: 50%;
       animation: spin 1s linear infinite;
       margin: 0 auto 1rem;
   }
   
   .preloader-content p {
       font-size: 1rem;
       color: rgba(255, 255, 255, 0.8);
   }
   
   @keyframes spin {
       to { transform: rotate(360deg); }
   }
   
   /* ============================================
      TIPOGRAFÍA PREMIUM
      ============================================ */
   
   h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-heading);
       font-weight: 700;
       line-height: 1.2;
       margin-bottom: 1rem;
   }
   
   .section-title-big {
       font-size: clamp(2rem, 5vw, 3rem);
       color: var(--color-primary);
       margin-bottom: 1rem;
   }
   
   .section-title-alt {
       font-size: clamp(1.75rem, 4vw, 2.5rem);
       color: var(--color-primary);
       margin-bottom: 1rem;
   }
   
   .section-intro-alt {
       font-size: 1.125rem;
       color: var(--color-text-gray);
       margin-bottom: 3rem;
   }
   
   .section-header-center {
       text-align: center;
       margin-bottom: 4rem;
   }
   
   .text-highlight {
       color: var(--color-accent);
       position: relative;
       display: inline-block;
   }
   
   .text-highlight::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 8px;
       background: var(--color-accent-light);
       z-index: -1;
   }
   
   .large-text {
       font-size: 1.25rem;
       line-height: 1.8;
       margin-bottom: 1.5rem;
   }
   
   /* ============================================
      BOTONES PREMIUM
      ============================================ */
   
   .btn {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 1rem 2rem;
       font-size: 1rem;
       font-weight: 600;
       text-align: center;
       border: none;
       border-radius: 6px;
       cursor: pointer;
       transition: all var(--transition-normal);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       position: relative;
       overflow: hidden;
   }
   
   .btn::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }
   
   .btn:hover::before {
       width: 300px;
       height: 300px;
   }
   
   .btn-primary {
       background-color: var(--color-primary);
       color: var(--color-secondary);
       border: 2px solid var(--color-primary);
   }
   
   .btn-primary:hover {
       background-color: var(--color-accent);
       border-color: var(--color-accent);
       transform: translateY(-3px);
       box-shadow: var(--shadow-large);
   }
   
   .btn-secondary {
       background-color: transparent;
       color: var(--color-primary);
       border: 2px solid var(--color-primary);
   }
   
   .btn-secondary:hover {
       background-color: var(--color-primary);
       color: var(--color-secondary);
       transform: translateY(-3px);
   }
   
   .btn-large {
       padding: 1.25rem 2.5rem;
       font-size: 1.125rem;
   }
   
   .btn-hero {
       padding: 1.5rem 3rem;
       font-size: 1.25rem;
       border-radius: 50px;
       box-shadow: var(--shadow-large);
   }
   
   .btn-service {
       width: 100%;
       justify-content: center;
       margin-top: 1.5rem;
   }
   
   .btn-block-immersive {
       width: 100%;
       justify-content: center;
   }
   
   .btn-header {
       font-size: 0.875rem;
       padding: 0.75rem 1.5rem;
   }
   
   /* Efecto glow */
   .glow {
       box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
   }
   
   .glow:hover {
       box-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
   }
   
   /* Efecto pulse */
   @keyframes pulse {
       0%, 100% {
           transform: scale(1);
       }
       50% {
           transform: scale(1.05);
       }
   }
   
   .pulse {
       animation: pulse 2s infinite;
   }
   
   /* ============================================
      HEADER
      ============================================ */
   
   .header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       background-color: rgba(255, 255, 255, 0.98);
       backdrop-filter: blur(10px);
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       z-index: var(--z-header);
       transition: all var(--transition-normal);
   }
   
   .header.scrolled {
       box-shadow: var(--shadow-medium);
   }
   
   .header-container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1rem 20px;
       gap: 2rem;
   }
   
   .logo img {
       height: 50px;
       width: auto;
       transition: var(--transition-normal);
   }
   
   .logo img:hover {
       transform: scale(1.05);
   }
   
   .nav-list {
       display: flex;
       gap: 2.5rem;
       align-items: center;
   }
   
   .nav-link {
       font-size: 0.9375rem;
       font-weight: 500;
       color: var(--color-text-primary);
       position: relative;
       padding: 0.5rem 0;
   }
   
   .nav-link::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 0;
       height: 2px;
       background: var(--gradient-gold);
       transition: var(--transition-normal);
   }
   
   .nav-link:hover::after {
       width: 100%;
   }
   
   .mobile-menu-toggle {
       display: none;
       flex-direction: column;
       gap: 5px;
       background: none;
       border: none;
       cursor: pointer;
       padding: 8px;
   }
   
   .mobile-menu-toggle span {
       width: 25px;
       height: 3px;
       background-color: var(--color-primary);
       transition: var(--transition-fast);
       border-radius: 2px;
   }
   
   .mobile-menu-toggle.active span:nth-child(1) {
       transform: rotate(45deg) translate(7px, 7px);
   }
   
   .mobile-menu-toggle.active span:nth-child(2) {
       opacity: 0;
   }
   
   .mobile-menu-toggle.active span:nth-child(3) {
       transform: rotate(-45deg) translate(6px, -6px);
   }
   
   /* ============================================
      HERO INMERSIVO
      ============================================ */
   
   .hero-immersive {
       position: relative;
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 120px 20px 80px;
       overflow: hidden;
   }
   
   .hero-background {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--gradient-dark);
       z-index: -2;
   }
   
   .hero-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 50%);
       z-index: -1;
   }
   
   .hero-particles {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-image: 
           radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
       background-size: 50px 50px;
       animation: particlesFloat 20s linear infinite;
       z-index: -1;
   }
   
   @keyframes particlesFloat {
       0% {
           transform: translateY(0);
       }
       100% {
           transform: translateY(-50px);
       }
   }
   
   .hero-content-immersive {
       max-width: 900px;
       margin: 0 auto;
       text-align: center;
       color: var(--color-secondary);
   }
   
   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(10px);
       padding: 0.75rem 1.5rem;
       border-radius: 50px;
       border: 1px solid rgba(255, 255, 255, 0.2);
       font-size: 0.9375rem;
       margin-bottom: 2rem;
       animation: fadeInDown 0.8s ease-out;
   }
   
   .badge-icon {
       font-size: 1.25rem;
   }
   
   .hero-title-immersive {
       font-size: clamp(2.5rem, 6vw, 4.5rem);
       margin-bottom: 1.5rem;
       line-height: 1.1;
   }
   
   .hero-line {
       display: block;
   }
   
   .hero-highlight {
       background: var(--gradient-gold);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       font-weight: 900;
   }
   
   .hero-subtitle-immersive {
       font-size: clamp(1.125rem, 2vw, 1.5rem);
       margin-bottom: 3rem;
       color: rgba(255, 255, 255, 0.9);
       line-height: 1.6;
   }
   
   .hero-stats {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 2rem;
       margin: 3rem 0;
       padding: 2rem 0;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   
   .stat-box {
       text-align: center;
   }
   
   .stat-number-animated {
       font-size: 3rem;
       font-weight: 700;
       color: var(--color-accent);
       display: block;
       margin-bottom: 0.5rem;
   }
   
   .stat-label {
       font-size: 0.9375rem;
       color: rgba(255, 255, 255, 0.7);
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   
   .hero-cta {
       margin-bottom: 2rem;
   }
   
   .hero-urgency {
       margin-top: 1rem;
       font-size: 0.9375rem;
       color: var(--color-accent);
       font-weight: 600;
       animation: pulse 2s infinite;
   }
   
   .hero-trust-badges {
       display: flex;
       gap: 1.5rem;
       justify-content: center;
       flex-wrap: wrap;
   }
   
   .trust-badge {
       font-size: 0.875rem;
       color: rgba(255, 255, 255, 0.8);
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .scroll-indicator {
       position: absolute;
       bottom: 30px;
       left: 50%;
       transform: translateX(-50%);
       text-align: center;
       color: rgba(255, 255, 255, 0.7);
       animation: bounce 2s infinite;
   }
   
   .mouse {
       width: 24px;
       height: 40px;
       border: 2px solid rgba(255, 255, 255, 0.5);
       border-radius: 12px;
       margin: 0 auto 10px;
       position: relative;
   }
   
   .wheel {
       width: 4px;
       height: 8px;
       background: rgba(255, 255, 255, 0.7);
       border-radius: 2px;
       position: absolute;
       top: 8px;
       left: 50%;
       transform: translateX(-50%);
       animation: wheelScroll 1.5s infinite;
   }
   
   @keyframes wheelScroll {
       0% {
           top: 8px;
           opacity: 1;
       }
       100% {
           top: 24px;
           opacity: 0;
       }
   }
   
   @keyframes bounce {
       0%, 100% {
           transform: translateX(-50%) translateY(0);
       }
       50% {
           transform: translateX(-50%) translateY(-10px);
       }
   }
   
   @keyframes fadeInDown {
       from {
           opacity: 0;
           transform: translateY(-30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* ============================================
      PROBLEMA EMOCIONAL
      ============================================ */
   
   .problem-emotional {
       padding: var(--spacing-xl) 20px;
       background-color: var(--color-bg-light);
   }
   
   .problem-intro {
       text-align: center;
       margin-bottom: 4rem;
   }
   
   .problem-timeline {
       max-width: 900px;
       margin: 0 auto;
   }
   
   .timeline-item {
       display: grid;
       grid-template-columns: 80px 1fr;
       gap: 2rem;
       margin-bottom: 3rem;
       padding: 2rem;
       background: var(--color-bg-white);
       border-radius: 12px;
       box-shadow: var(--shadow-small);
       transition: var(--transition-normal);
   }
   
   .timeline-item:hover {
       transform: translateX(10px);
       box-shadow: var(--shadow-medium);
   }
   
   .timeline-icon {
       width: 80px;
       height: 80px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2.5rem;
       flex-shrink: 0;
   }
   
   .timeline-icon.pain {
       background: linear-gradient(135deg, #e74c3c, #c0392b);
       box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3);
   }
   
   .timeline-content h3 {
       font-size: 1.5rem;
       margin-bottom: 0.75rem;
       color: var(--color-primary);
   }
   
   .timeline-content p {
       color: var(--color-text-gray);
       line-height: 1.7;
       font-size: 1.0625rem;
   }
   
   .problem-climax {
       margin-top: 4rem;
       padding: 3rem;
       background: var(--gradient-dark);
       color: var(--color-secondary);
       border-radius: 12px;
       text-align: center;
       box-shadow: var(--shadow-large);
   }
   
   .climax-content h2 {
       color: var(--color-secondary);
       margin-bottom: 1rem;
       font-size: clamp(1.75rem, 4vw, 2.5rem);
   }
   
   .climax-content p {
       font-size: 1.125rem;
       line-height: 1.7;
       color: rgba(255, 255, 255, 0.9);
   }
   
   /* ============================================
      REVELACIÓN / SOLUCIÓN
      ============================================ */
   
   .revelation-section {
       padding: var(--spacing-xl) 20px;
       background-color: var(--color-bg-white);
   }
   
   .revelation-content {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 4rem;
       align-items: start;
   }
   
   .revelation-badge {
       display: inline-block;
       background: var(--gradient-gold);
       color: var(--color-primary);
       padding: 0.5rem 1.25rem;
       border-radius: 50px;
       font-size: 0.9375rem;
       font-weight: 600;
       margin-bottom: 1.5rem;
   }
   
   .revelation-benefits {
       margin: 2rem 0;
   }
   
   .benefit-card {
       display: flex;
       gap: 1.5rem;
       padding: 1.5rem;
       background: var(--color-bg-light);
       border-radius: 8px;
       margin-bottom: 1rem;
       transition: var(--transition-normal);
   }
   
   .benefit-card:hover {
       transform: translateX(10px);
       box-shadow: var(--shadow-small);
   }
   
   .benefit-icon {
       width: 50px;
       height: 50px;
       background: var(--gradient-gold);
       color: var(--color-primary);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       font-weight: 700;
       flex-shrink: 0;
   }
   
   .benefit-text h4 {
       font-size: 1.125rem;
       margin-bottom: 0.5rem;
       color: var(--color-primary);
   }
   
   .benefit-text p {
       color: var(--color-text-gray);
       line-height: 1.6;
   }
   
   .revelation-proof {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 2rem;
       margin-top: 3rem;
       padding: 2rem;
       background: var(--color-bg-cream);
       border-radius: 8px;
   }
   
   .proof-stat {
       text-align: center;
   }
   
   .proof-number {
       display: block;
       font-size: 2.5rem;
       font-weight: 700;
       color: var(--color-accent);
       margin-bottom: 0.5rem;
   }
   
   .proof-label {
       display: block;
       font-size: 0.875rem;
       color: var(--color-text-gray);
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   
   .visual-card {
       background: var(--color-bg-white);
       border-radius: 12px;
       box-shadow: var(--shadow-large);
       overflow: hidden;
       position: sticky;
       top: 100px;
   }
   
   .visual-header {
       background: var(--gradient-dark);
       color: var(--color-secondary);
       padding: 1rem 1.5rem;
       text-align: center;
   }
   
   .visual-badge {
       background: var(--color-accent);
       color: var(--color-primary);
       padding: 0.5rem 1rem;
       border-radius: 4px;
       font-size: 0.875rem;
       font-weight: 600;
       text-transform: uppercase;
   }
   
   .visual-body {
       padding: 2rem;
   }
   
   .case-before,
   .case-after {
       text-align: center;
       padding: 1.5rem;
   }
   
   .case-before h4,
   .case-after h4 {
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: var(--color-text-gray);
       margin-bottom: 1rem;
   }
   
   .case-debt {
       font-size: 2rem;
       font-weight: 700;
       color: var(--color-danger);
       margin-bottom: 1rem;
   }
   
   .case-problems {
       text-align: left;
       margin: 1rem 0;
   }
   
   .case-problems li {
       padding: 0.5rem 0;
       color: var(--color-text-gray);
       border-bottom: 1px solid var(--color-bg-light);
   }
   
   .case-arrow {
       text-align: center;
       margin: 1rem 0;
   }
   
   .case-arrow svg {
       margin: 0 auto;
       color: var(--color-accent);
   }
   
   .case-result {
       font-size: 2rem;
       font-weight: 700;
       color: var(--color-success);
       margin-bottom: 1rem;
   }
   
   .case-success {
       font-size: 1rem;
       color: var(--color-text-gray);
       line-height: 1.6;
   }
   
   .visual-footer {
       background: var(--color-bg-light);
       padding: 1rem 1.5rem;
       text-align: center;
       font-size: 0.9375rem;
       color: var(--color-text-gray);
   }
   
   /* ============================================
      TESTIMONIOS
      ============================================ */
   
   .testimonials-section {
       padding: var(--spacing-xl) 20px;
       background: var(--color-bg-cream);
   }
   
   .testimonials-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 2rem;
       margin-bottom: 3rem;
   }
   
   .testimonial-card {
       background: var(--color-bg-white);
       padding: 2rem;
       border-radius: 12px;
       box-shadow: var(--shadow-medium);
       transition: var(--transition-normal);
       position: relative;
   }
   
   .testimonial-card::before {
       content: '"';
       position: absolute;
       top: -20px;
       left: 20px;
       font-size: 6rem;
       color: var(--color-accent-light);
       font-family: Georgia, serif;
       line-height: 1;
   }
   
   .testimonial-card:hover {
       transform: translateY(-10px);
       box-shadow: var(--shadow-large);
   }
   
   .testimonial-header {
       display: flex;
       align-items: center;
       gap: 1rem;
       margin-bottom: 1.5rem;
   }
   
   .testimonial-avatar {
       width: 50px;
       height: 50px;
       background: var(--gradient-gold);
       color: var(--color-primary);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       font-size: 1.125rem;
   }
   
   .testimonial-info {
       flex: 1;
   }
   
   .testimonial-info h4 {
       font-size: 1.125rem;
       margin-bottom: 0.25rem;
       color: var(--color-primary);
   }
   
   .testimonial-info p {
       font-size: 0.875rem;
       color: var(--color-text-gray);
   }
   
   .testimonial-stars {
       color: var(--color-accent);
       font-size: 1.125rem;
   }
   
   .testimonial-body p {
       line-height: 1.7;
       color: var(--color-text-gray);
       font-size: 1.0625rem;
       margin-bottom: 1.5rem;
   }
   
   .testimonial-result {
       text-align: center;
   }
   
   .result-badge {
       display: inline-block;
       padding: 0.5rem 1rem;
       border-radius: 4px;
       font-size: 0.875rem;
       font-weight: 600;
   }
   
   .result-badge.success {
       background: rgba(39, 174, 96, 0.1);
       color: var(--color-success);
       border: 1px solid var(--color-success);
   }
   
   .testimonials-cta {
       text-align: center;
       margin-top: 3rem;
   }
   
   .cta-text-large {
       font-size: 1.5rem;
       margin-bottom: 1.5rem;
       color: var(--color-primary);
       font-weight: 600;
   }
   
   /* ============================================
      SERVICIOS INMERSIVOS
      ============================================ */
   
   .services-immersive {
       padding: var(--spacing-xl) 20px;
       background: var(--color-bg-white);
   }
   
   .services-cards {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 2rem;
   }
   
   .service-card-immersive {
       background: var(--color-bg-white);
       border: 2px solid var(--color-bg-light);
       border-radius: 12px;
       padding: 2.5rem;
       text-align: center;
       transition: var(--transition-normal);
       position: relative;
       overflow: hidden;
   }
   
   .service-card-immersive::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 4px;
       background: var(--gradient-gold);
       transform: scaleX(0);
       transition: var(--transition-normal);
   }
   
   .service-card-immersive:hover::before {
       transform: scaleX(1);
   }
   
   .service-card-immersive:hover {
       transform: translateY(-10px);
       box-shadow: var(--shadow-large);
       border-color: var(--color-accent);
   }
   
   .service-card-immersive.featured {
       border-color: var(--color-accent);
       box-shadow: var(--shadow-medium);
   }
   
   .featured-badge {
       position: absolute;
       top: 20px;
       right: -30px;
       background: var(--color-accent);
       color: var(--color-primary);
       padding: 0.5rem 2rem;
       font-size: 0.75rem;
       font-weight: 700;
       text-transform: uppercase;
       transform: rotate(45deg);
   }
   
   .service-icon-immersive {
       font-size: 4rem;
       margin-bottom: 1.5rem;
   }
   
   .service-card-immersive h3 {
       font-size: 1.5rem;
       margin-bottom: 1rem;
       color: var(--color-primary);
   }
   
   .service-description {
       color: var(--color-text-gray);
       line-height: 1.7;
       margin-bottom: 1.5rem;
   }
   
   .service-includes {
       text-align: left;
       margin: 1.5rem 0;
       padding: 1.5rem;
       background: var(--color-bg-light);
       border-radius: 8px;
   }
   
   .service-includes li {
       padding: 0.5rem 0;
       color: var(--color-text-gray);
       font-size: 0.9375rem;
   }
   
   .service-price {
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--color-accent);
       margin: 1.5rem 0;
   }
   
   /* ============================================
      PROCESO VISUAL
      ============================================ */
   
   .process-visual {
       padding: var(--spacing-xl) 20px;
       background: var(--color-bg-light);
   }
   
   .process-steps-visual {
       max-width: 900px;
       margin: 0 auto 4rem;
   }
   
   .step-visual {
       display: grid;
       grid-template-columns: 100px 1fr;
       gap: 2rem;
       margin-bottom: 2rem;
       padding: 2rem;
       background: var(--color-bg-white);
       border-radius: 12px;
       box-shadow: var(--shadow-small);
       transition: var(--transition-normal);
   }
   
   .step-visual:hover {
       transform: scale(1.02);
       box-shadow: var(--shadow-medium);
   }
   
   .step-visual-number {
       width: 100px;
       height: 100px;
       background: var(--gradient-dark);
       color: var(--color-secondary);
       font-size: 3rem;
       font-weight: 700;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: var(--shadow-large);
       position: relative;
   }
   
   .step-visual-number::after {
       content: '';
       position: absolute;
       width: 120px;
       height: 120px;
       border: 2px solid var(--color-accent);
       border-radius: 50%;
       animation: pulse-ring 2s infinite;
   }
   
   @keyframes pulse-ring {
       0% {
           transform: scale(0.9);
           opacity: 1;
       }
       100% {
           transform: scale(1.1);
           opacity: 0;
       }
   }
   
   .step-visual-content h3 {
       font-size: 1.5rem;
       margin-bottom: 0.75rem;
       color: var(--color-primary);
   }
   
   .step-visual-content p {
       color: var(--color-text-gray);
       line-height: 1.7;
       margin-bottom: 1rem;
   }
   
   .step-time {
       display: inline-block;
       background: var(--color-accent-light);
       color: var(--color-primary);
       padding: 0.5rem 1rem;
       border-radius: 4px;
       font-size: 0.875rem;
       font-weight: 600;
   }
   
   .process-cta {
       text-align: center;
   }
   
   .cta-box-dark {
       background: var(--gradient-dark);
       color: var(--color-secondary);
       padding: 3rem;
       border-radius: 12px;
       max-width: 700px;
       margin: 0 auto;
   }
   
   .cta-box-dark h3 {
       color: var(--color-secondary);
       margin-bottom: 1rem;
       font-size: 1.75rem;
   }
   
   .cta-box-dark p {
       font-size: 1.125rem;
       margin-bottom: 2rem;
       color: rgba(255, 255, 255, 0.9);
   }
   
   /* ============================================
      URGENCIA / ESCASEZ
      ============================================ */
   
   .urgency-section {
       padding: var(--spacing-lg) 20px;
       background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
       color: var(--color-secondary);
   }
   
   .urgency-content {
       text-align: center;
       max-width: 800px;
       margin: 0 auto;
   }
   
   .urgency-icon {
       font-size: 4rem;
       margin-bottom: 1rem;
   }
   
   .urgency-content h2 {
       color: var(--color-secondary);
       margin-bottom: 1rem;
       font-size: clamp(1.75rem, 4vw, 2.5rem);
   }
   
   .urgency-text {
       font-size: 1.25rem;
       margin-bottom: 2rem;
       line-height: 1.7;
   }
   
   .urgency-counter {
       margin: 2rem 0;
       padding: 2rem;
       background: rgba(0, 0, 0, 0.2);
       border-radius: 8px;
   }
   
   .counter-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.5rem;
   }
   
   .counter-number {
       font-size: 3rem;
       font-weight: 700;
       color: var(--color-secondary);
   }
   
   .counter-label {
       font-size: 1rem;
       color: rgba(255, 255, 255, 0.9);
   }
   
   .urgency-cta-text {
       font-size: 1.125rem;
       margin-bottom: 1.5rem;
       font-weight: 600;
   }
   
   /* ============================================
      ARTÍCULO INMERSIVO
      ============================================ */
   
   .article-section-immersive {
       padding: var(--spacing-xl) 20px;
       background: var(--color-bg-white);
   }
   
   .article-immersive {
       max-width: 800px;
       margin: 0 auto;
       padding: 3rem;
       background: var(--color-bg-cream);
       border-left: 6px solid var(--color-accent);
       border-radius: 12px;
       box-shadow: var(--shadow-medium);
   }
   
   .article-badge-immersive {
       display: inline-block;
       background: var(--color-accent);
       color: var(--color-primary);
       padding: 0.5rem 1rem;
       border-radius: 4px;
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 1.5rem;
   }
   
   .article-immersive h2 {
       font-size: 1.75rem;
       margin-bottom: 1.5rem;
       color: var(--color-primary);
   }
   
   .article-immersive p {
       margin-bottom: 1.5rem;
       line-height: 1.8;
       color: var(--color-text-primary);
       font-size: 1.0625rem;
   }
   
   .article-highlight {
       background: rgba(212, 175, 55, 0.1);
       border-left: 4px solid var(--color-accent);
       padding: 1.5rem;
       margin: 2rem 0;
   }
   
   .article-highlight p {
       margin: 0;
       font-weight: 600;
   }
   
   /* ============================================
      FAQ INMERSIVO
      ============================================ */
   
   .faq-immersive {
       padding: var(--spacing-xl) 20px;
       background: var(--color-bg-light);
   }
   
   .faq-container-immersive {
       max-width: 900px;
       margin: 0 auto;
   }
   
   .faq-item-immersive {
       background: var(--color-bg-white);
       border-radius: 12px;
       margin-bottom: 1rem;
       overflow: hidden;
       box-shadow: var(--shadow-small);
       transition: var(--transition-normal);
   }
   
   .faq-item-immersive:hover {
       box-shadow: var(--shadow-medium);
   }
   
   .faq-question-immersive {
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 1rem;
       padding: 1.5rem 2rem;
       background: none;
       border: none;
       font-size: 1.125rem;
       font-weight: 600;
       color: var(--color-primary);
       text-align: left;
       cursor: pointer;
       transition: var(--transition-fast);
   }
   
   .faq-question-immersive:hover {
       background: var(--color-bg-light);
   }
   
   .faq-question-immersive svg {
       flex-shrink: 0;
       transition: var(--transition-fast);
       color: var(--color-accent);
   }
   
   .faq-item-immersive.active .faq-question-immersive {
       background: var(--color-bg-light);
   }
   
   .faq-item-immersive.active .faq-question-immersive svg {
       transform: rotate(180deg);
   }
   
   .faq-answer-immersive {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.4s ease;
   }
   
   .faq-item-immersive.active .faq-answer-immersive {
       max-height: 600px;
   }
   
   .faq-answer-immersive p {
       padding: 0 2rem 2rem;
       line-height: 1.8;
       color: var(--color-text-gray);
       font-size: 1.0625rem;
   }
   
   /* ============================================
      FORMULARIO INMERSIVO
      ============================================ */
   
   .contact-immersive {
       padding: var(--spacing-xl) 20px;
       background: var(--color-bg-white);
   }
   
   .contact-wrapper-immersive {
       display: grid;
       grid-template-columns: 1fr 1.3fr;
       gap: 4rem;
       align-items: start;
   }
   
   .contact-guarantees {
       margin: 2rem 0;
   }
   
   .guarantee-item {
       display: flex;
       gap: 1rem;
       margin-bottom: 1.5rem;
       padding: 1rem;
       background: var(--color-bg-light);
       border-radius: 8px;
   }
   
   .guarantee-icon {
       width: 40px;
       height: 40px;
       background: var(--gradient-gold);
       color: var(--color-primary);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       flex-shrink: 0;
   }
   
   .guarantee-text h4 {
       font-size: 1.125rem;
       margin-bottom: 0.25rem;
       color: var(--color-primary);
   }
   
   .guarantee-text p {
       font-size: 0.9375rem;
       color: var(--color-text-gray);
   }
   
   .contact-trust-seal {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1.5rem;
       background: rgba(39, 174, 96, 0.05);
       border: 1px solid var(--color-success);
       border-radius: 8px;
       margin-top: 2rem;
   }
   
   .seal-badge {
       font-size: 2rem;
   }
   
   .contact-trust-seal p {
       font-size: 0.9375rem;
       line-height: 1.5;
       color: var(--color-text-gray);
   }
   
   .contact-form-immersive {
       background: var(--color-bg-white);
       padding: 3rem;
       border-radius: 12px;
       box-shadow: var(--shadow-large);
       border: 2px solid var(--color-accent-light);
   }
   
   .form-header {
       text-align: center;
       margin-bottom: 2rem;
   }
   
   .form-header h3 {
       font-size: 1.75rem;
       margin-bottom: 0.5rem;
       color: var(--color-primary);
   }
   
   .form-urgency {
       color: var(--color-danger);
       font-weight: 600;
       font-size: 0.9375rem;
   }
   
   .form-group-immersive {
       margin-bottom: 1.5rem;
   }
   
   .form-group-immersive label {
       display: block;
       font-weight: 600;
       margin-bottom: 0.5rem;
       color: var(--color-primary);
       font-size: 0.9375rem;
   }
   
   .form-group-immersive input,
   .form-group-immersive select,
   .form-group-immersive textarea {
       width: 100%;
       padding: 1rem;
       border: 2px solid var(--color-bg-light);
       border-radius: 8px;
       font-size: 1rem;
       font-family: var(--font-primary);
       transition: var(--transition-fast);
   }
   
   .form-group-immersive input:focus,
   .form-group-immersive select:focus,
   .form-group-immersive textarea:focus {
       outline: none;
       border-color: var(--color-accent);
       box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
   }
   
   .form-group-immersive textarea {
       resize: vertical;
       min-height: 100px;
   }
   
   .form-row-immersive {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1.5rem;
   }
   
   .checkbox-group-immersive {
       margin: 2rem 0;
   }
   
   .checkbox-label-immersive {
       display: flex;
       align-items: start;
       gap: 0.75rem;
       cursor: pointer;
       font-size: 0.9375rem;
   }
   
   .checkbox-label-immersive input[type="checkbox"] {
       margin-top: 4px;
       cursor: pointer;
       width: 20px;
       height: 20px;
       flex-shrink: 0;
   }
   
   .checkbox-label-immersive a {
       color: var(--color-accent);
       text-decoration: underline;
   }
   
   .form-note-immersive {
       text-align: center;
       font-size: 0.875rem;
       color: var(--color-text-gray);
       margin-top: 1rem;
   }
   
   .form-success-immersive {
       display: none;
       text-align: center;
       padding: 3rem;
   }
   
   .form-success-immersive.active {
       display: block;
   }
   
   .success-icon-immersive {
       width: 100px;
       height: 100px;
       background: var(--color-success);
       color: white;
       font-size: 4rem;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 1.5rem;
       box-shadow: 0 4px 20px rgba(39, 174, 96, 0.3);
   }
   
   .form-success-immersive h3 {
       color: var(--color-primary);
       margin-bottom: 1rem;
       font-size: 1.75rem;
   }
   
   .form-success-immersive p {
       color: var(--color-text-gray);
       line-height: 1.7;
       margin-bottom: 1rem;
   }
   
   .success-next {
       margin-top: 2rem;
       padding: 1rem;
       background: var(--color-bg-light);
       border-radius: 8px;
   }
   
   /* ============================================
      GARANTÍAS FINALES
      ============================================ */
   
   .final-guarantees {
       padding: var(--spacing-lg) 20px;
       background: var(--color-bg-cream);
   }
   
   .guarantees-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 2rem;
   }
   
   .guarantee-box {
       text-align: center;
       padding: 2rem;
       background: var(--color-bg-white);
       border-radius: 12px;
       box-shadow: var(--shadow-small);
       transition: var(--transition-normal);
   }
   
   .guarantee-box:hover {
       transform: translateY(-5px);
       box-shadow: var(--shadow-medium);
   }
   
   .guarantee-icon-large {
       font-size: 3.5rem;
       margin-bottom: 1rem;
   }
   
   .guarantee-box h4 {
       font-size: 1.125rem;
       margin-bottom: 0.75rem;
       color: var(--color-primary);
   }
   
   .guarantee-box p {
       color: var(--color-text-gray);
       line-height: 1.6;
       font-size: 0.9375rem;
   }
   
   /* ============================================
      FOOTER INMERSIVO
      ============================================ */
   
   .footer-immersive {
       background: var(--gradient-dark);
       color: var(--color-secondary);
       padding: var(--spacing-lg) 20px 2rem;
   }
   
   .footer-content-immersive {
       display: grid;
       grid-template-columns: 2fr 1fr 1fr 1fr;
       gap: 3rem;
       margin-bottom: 3rem;
   }
   
   .footer-column-main {
       max-width: 400px;
   }
   
   .footer-logo-immersive {
       max-width: 200px;
       margin-bottom: 1rem;
   }
   
   .footer-description-immersive {
       color: rgba(255, 255, 255, 0.8);
       line-height: 1.7;
       margin-bottom: 1.5rem;
       font-size: 0.9375rem;
   }
   
   .footer-contact p {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 0.75rem;
       color: rgba(255, 255, 255, 0.9);
   }
   
   .footer-contact svg {
       flex-shrink: 0;
       color: var(--color-accent);
   }
   
   .footer-contact a:hover {
       color: var(--color-accent);
   }
   
   .footer-column h4 {
       color: var(--color-secondary);
       margin-bottom: 1.5rem;
       font-size: 1.125rem;
   }
   
   .footer-links-immersive li {
       margin-bottom: 0.75rem;
   }
   
   .footer-links-immersive a {
       color: rgba(255, 255, 255, 0.8);
       transition: var(--transition-fast);
       font-size: 0.9375rem;
   }
   
   .footer-links-immersive a:hover {
       color: var(--color-accent);
       padding-left: 5px;
   }
   
   .footer-bottom-immersive {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       padding-top: 2rem;
       text-align: center;
   }
   
   .footer-bottom-immersive p {
       color: rgba(255, 255, 255, 0.6);
       font-size: 0.875rem;
       margin-bottom: 0.5rem;
   }
   
   .footer-disclaimer {
       font-size: 0.75rem;
       color: rgba(255, 255, 255, 0.5);
       font-style: italic;
   }
   
   /* ============================================
      BOTÓN FLOTANTE WHATSAPP
      ============================================ */
   
   .whatsapp-float {
       position: fixed;
       bottom: 30px;
       right: 30px;
       width: 60px;
       height: 60px;
       background: #25D366;
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
       z-index: var(--z-whatsapp);
       transition: var(--transition-normal);
       animation: bounce 2s infinite;
   }
   
   .whatsapp-float:hover {
       transform: scale(1.1);
       box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
   }
   
   /* ============================================
      RESPONSIVE
      ============================================ */
   
   @media (max-width: 992px) {
       .revelation-content,
       .contact-wrapper-immersive {
           grid-template-columns: 1fr;
           gap: 3rem;
       }
       
       .footer-content-immersive {
           grid-template-columns: 1fr 1fr;
       }
       
       .hero-stats {
           grid-template-columns: 1fr;
           gap: 1.5rem;
       }
       
       .services-cards {
           grid-template-columns: 1fr;
       }
       
       .visual-card {
           position: static;
       }
   }
   
   @media (max-width: 768px) {
       .nav {
           position: fixed;
           top: 71px;
           left: 0;
           right: 0;
           background-color: var(--color-bg-white);
           padding: 2rem;
           transform: translateY(-100%);
           opacity: 0;
           visibility: hidden;
           transition: all var(--transition-normal);
           box-shadow: var(--shadow-large);
       }
       
       .nav.active {
           transform: translateY(0);
           opacity: 1;
           visibility: visible;
       }
       
       .nav-list {
           flex-direction: column;
           gap: 1.5rem;
       }
       
       .btn-header {
           display: none;
       }
       
       .mobile-menu-toggle {
           display: flex;
       }
       
       .hero-immersive {
           padding: 100px 20px 60px;
           min-height: auto;
       }
       
       .timeline-item,
       .step-visual {
           grid-template-columns: 1fr;
           gap: 1.5rem;
       }
       
       .timeline-icon,
       .step-visual-number {
           margin: 0 auto;
       }
       
       .form-row-immersive {
           grid-template-columns: 1fr;
       }
       
       .contact-form-immersive {
           padding: 2rem 1.5rem;
       }
       
       .footer-content-immersive {
           grid-template-columns: 1fr;
       }
       
       .testimonials-grid {
           grid-template-columns: 1fr;
       }
       
       .proof-stat,
       .revelation-proof {
           grid-template-columns: 1fr;
       }
       
       .whatsapp-float {
           width: 50px;
           height: 50px;
           bottom: 20px;
           right: 20px;
       }
   }
   
   @media (max-width: 480px) {
       :root {
           --spacing-xl: 4rem;
       }
       
       .hero-title-immersive {
           font-size: 2rem;
       }
       
       .section-title-big {
           font-size: 1.75rem;
       }
       
       .stat-number-animated {
           font-size: 2rem;
       }
       
       .contact-form-immersive {
           padding: 1.5rem 1rem;
       }
   }
   
   /* ============================================
      ANIMACIONES ADICIONALES
      ============================================ */
   
   @keyframes fadeIn {
       from {
           opacity: 0;
       }
       to {
           opacity: 1;
       }
   }
   
   @keyframes slideInUp {
       from {
           opacity: 0;
           transform: translateY(50px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   @keyframes slideInLeft {
       from {
           opacity: 0;
           transform: translateX(-50px);
       }
       to {
           opacity: 1;
           transform: translateX(0);
       }
   }
   
   @keyframes slideInRight {
       from {
           opacity: 0;
           transform: translateX(50px);
       }
       to {
           opacity: 1;
           transform: translateX(0);
       }
   }
   
   /* Smooth transitions para AOS */
   [data-aos] {
       opacity: 0;
       transition-property: opacity, transform;
   }
   
   [data-aos].aos-animate {
       opacity: 1;
   }

   /* =========================================================
   AJUSTE PREMIUM: COLORES + ICONOS ELEGANTES
   ========================================================= */

    :root {
        --color-primary: #050505;
        --color-secondary: #ffffff;
        --color-accent: #c9a227;
        --color-accent-hover: #a9841d;
        --color-accent-light: #ead9a1;

        --color-bg-dark: #050505;
        --color-bg-light: #f6f5f2;
        --color-bg-gray: #171717;
        --color-bg-white: #ffffff;
        --color-bg-cream: #f8f5ec;

        --color-text-primary: #050505;
        --color-text-gray: #5f5f5f;

        --color-success: #2f8f5b;
        --color-danger: #b64236;

        --gradient-dark: linear-gradient(135deg, #050505 0%, #171717 100%);
        --gradient-gold: linear-gradient(135deg, #c9a227 0%, #ead9a1 100%);
        --shadow-glow: 0 0 30px rgba(201, 162, 39, 0.35);
    }

    /* Iconos elegantes reutilizables */
    .timeline-icon,
    .service-icon-immersive,
    .guarantee-icon-large,
    .urgency-icon,
    .seal-badge {
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 42px 42px !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    /* Problemas: fuera rojo agresivo */
    .timeline-icon.pain {
        background-color: #f8f5ec !important;
        background-image: none;
        border: 1px solid rgba(201, 162, 39, 0.35);
        box-shadow: 0 8px 24px rgba(201, 162, 39, 0.13);
    }

    /* SVG icons */
    .icon-moon {
        background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5Z' stroke='%23c9a227' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    .icon-phone {
        background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 16.92v2.1a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.4 19.4 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 1.1h2.1a2 2 0 0 1 2 1.72c.13.96.35 1.9.66 2.81a2 2 0 0 1-.45 2.11L7.5 8.66a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45c.91.31 1.85.53 2.81.66A2 2 0 0 1 22 16.92Z' stroke='%23c9a227' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    .icon-home {
        background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.5 12 3l9 7.5' stroke='%23c9a227' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 9.5V21h14V9.5' stroke='%23c9a227' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 21v-6h5v6' stroke='%23c9a227' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    .icon-family {
        background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z' stroke='%23c9a227' stroke-width='1.7'/%3E%3Cpath d='M17 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z' stroke='%23c9a227' stroke-width='1.7'/%3E%3Cpath d='M3 21a4 4 0 0 1 8 0' stroke='%23c9a227' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M13 21a4 4 0 0 1 8 0' stroke='%23c9a227' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    .icon-scale {
        background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18' stroke='%23c9a227' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M5 7h14' stroke='%23c9a227' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M6 7 3 14h6L6 7Z' stroke='%23c9a227' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M18 7l-3 7h6l-3-7Z' stroke='%23c9a227' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 21h6' stroke='%23c9a227' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    .icon-building {
        background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v16' stroke='%23c9a227' stroke-width='1.6'/%3E%3Cpath d='M17 9h1a2 2 0 0 1 2 2v10' stroke='%23c9a227' stroke-width='1.6'/%3E%3Cpath d='M8 7h2M8 11h2M8 15h2M13 7h1M13 11h1M13 15h1M3 21h18' stroke='%23c9a227' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    .icon-file {
        background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l4 4v14H7V3Z' stroke='%23c9a227' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M14 3v5h5' stroke='%23c9a227' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M10 12h6M10 16h6' stroke='%23c9a227' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    .icon-warning {
        background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 2 21h20L12 3Z' stroke='%23c9a227' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M12 9v5' stroke='%23c9a227' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M12 17h.01' stroke='%23c9a227' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    .icon-lock {
        background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3' stroke='%23c9a227' stroke-width='1.7'/%3E%3Cpath d='M5 11h14v10H5V11Z' stroke='%23c9a227' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    .icon-shield {
        background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 20 6v5c0 5-3.4 8.6-8 10-4.6-1.4-8-5-8-10V6l8-3Z' stroke='%23c9a227' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    .icon-check {
        background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%23c9a227' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    /* Servicios más alineados y elegantes */
    .service-card-immersive {
        display: flex;
        flex-direction: column;
        min-height: 620px;
    }

    .service-description {
        min-height: 78px;
    }

    .service-includes {
        min-height: 190px;
    }

    .service-price {
        min-height: 36px;
    }

    .service-card-immersive .btn-service {
        margin-top: auto;
    }

    .service-icon-immersive {
        width: 76px;
        height: 76px;
        margin: 0 auto 1.5rem;
        border-radius: 50%;
        background-color: #f8f5ec;
        border: 1px solid rgba(201, 162, 39, 0.35);
    }

    /* Botones laterales igual de cuidados que el central */
    .service-card-immersive .btn-service {
        background: #050505;
        color: #ffffff;
        border: 2px solid #050505;
    }

    .service-card-immersive .btn-service:hover {
        background: #c9a227;
        border-color: #c9a227;
        color: #050505;
    }

    /* Cinta "Más solicitado" más fina */
    .featured-badge {
        background: #c9a227;
        color: #050505;
        box-shadow: 0 6px 18px rgba(201, 162, 39, 0.25);
    }

    /* Sección urgencia: quitar rojo fuerte */
    .urgency-section {
        background: linear-gradient(135deg, #050505 0%, #171717 100%) !important;
        color: #ffffff;
        position: relative;
        overflow: hidden;
    }

    .urgency-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 50% 0%, rgba(201, 162, 39, 0.22), transparent 42%),
            linear-gradient(90deg, rgba(201, 162, 39, 0.05), transparent, rgba(201, 162, 39, 0.05));
        pointer-events: none;
    }

    .urgency-content {
        position: relative;
        z-index: 1;
    }

    .urgency-icon {
        width: 74px;
        height: 74px;
        margin: 0 auto 1.25rem;
        border-radius: 50%;
        border: 1px solid rgba(201, 162, 39, 0.45);
        background-color: rgba(201, 162, 39, 0.08);
    }

    .urgency-counter {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(201, 162, 39, 0.25);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }

    .counter-number {
        color: #ead9a1;
    }

    /* Caso real: dar más fuerza visual sin romper estilo */
    .visual-card {
        border: 1px solid rgba(201, 162, 39, 0.25);
    }

    .visual-header {
        background: #050505;
    }

    .case-debt {
        color: #b64236;
    }

    .case-result {
        color: #2f8f5b;
    }

    .visual-body {
        background:
            linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    }

    /* Garantías finales sin emojis */
    .guarantee-icon-large {
        width: 76px;
        height: 76px;
        margin: 0 auto 1rem;
        border-radius: 50%;
        background-color: #f8f5ec;
        border: 1px solid rgba(201, 162, 39, 0.35);
    }

    .guarantee-box {
        border: 1px solid rgba(201, 162, 39, 0.15);
    }

    .guarantee-box:hover {
        border-color: rgba(201, 162, 39, 0.5);
    }

    /* Badges sin emoji, más premium */
    .revelation-badge,
    .article-badge-immersive {
        background: #050505;
        color: #ead9a1;
        border: 1px solid rgba(201, 162, 39, 0.35);
    }

    /* Ajuste texto urgencia formulario sin emoji */
    .form-urgency,
    .hero-urgency {
        color: #c9a227;
    }

    /* Quitar emojis de step-time visualmente si los dejas en HTML */
    .step-time {
        background: #f8f5ec;
        border: 1px solid rgba(201, 162, 39, 0.25);
        color: #050505;
    }

    /* WhatsApp un poco menos chillón */
    .whatsapp-float {
        background: #1faa59;
        box-shadow: 0 4px 20px rgba(31, 170, 89, 0.35);
    }

    /* ============================================
   REDES SOCIALES FOOTER
   ============================================ */

    .footer-social {
        margin-top: 2rem;
    }

    .footer-social h4 {
        color: var(--color-secondary);
        margin-bottom: 1rem;
        font-size: 1.125rem;
    }

    .social-links {
        display: flex;
        gap: 1rem;
    }

    .social-links a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transition: var(--transition-normal);
        color: rgba(255, 255, 255, 0.8);
    }

    .social-links a:hover {
        background: var(--color-accent);
        color: var(--color-primary);
        transform: translateY(-3px);
    }

    .footer-contact a {
        transition: var(--transition-fast);
    }

    .footer-contact a:hover {
        color: var(--color-accent);
    }

    /* ============================================
    PÁGINAS LEGALES
    ============================================ */

    .legal-page {
        padding: 120px 20px 80px;
        background-color: var(--color-bg-white);
    }

    .legal-container {
        max-width: 900px;
        margin: 0 auto;
    }

    .legal-page h1 {
        font-size: clamp(2rem, 4vw, 2.5rem);
        margin-bottom: 1rem;
        color: var(--color-primary);
    }

    .legal-page .last-updated {
        color: var(--color-text-gray);
        font-size: 0.9375rem;
        margin-bottom: 3rem;
        font-style: italic;
    }

    .legal-page h2 {
        font-size: 1.75rem;
        margin: 3rem 0 1rem;
        color: var(--color-primary);
    }

    .legal-page h3 {
        font-size: 1.375rem;
        margin: 2rem 0 1rem;
        color: var(--color-primary);
    }

    .legal-page p {
        margin-bottom: 1.5rem;
        line-height: 1.8;
        color: var(--color-text-primary);
    }

    .legal-page ul,
    .legal-page ol {
        margin: 1.5rem 0;
        padding-left: 2rem;
    }

    .legal-page li {
        margin-bottom: 0.75rem;
        line-height: 1.7;
        color: var(--color-text-primary);
        list-style: disc;
    }

    .legal-page strong {
        color: var(--color-primary);
    }

    .legal-page a {
        color: var(--color-accent);
        text-decoration: underline;
    }

    .legal-page a:hover {
        color: var(--color-accent-hover);
    }

    .legal-back {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 2rem;
        color: var(--color-accent);
        font-weight: 600;
        transition: var(--transition-fast);
    }

    .legal-back:hover {
        gap: 1rem;
    }

    .legal-section {
        background: var(--color-bg-light);
        padding: 2rem;
        border-radius: 8px;
        margin: 2rem 0;
        border-left: 4px solid var(--color-accent);
    }