/* root */
:root {
    --blue-color: #282659;
    --blue-light-color: #ccc;
    --bg-blue-light-color: #F6FAFE;
    --bg-blue-color: #f0f8ff;
    --bg-blue-dark-color: #DDE9F4;
    --bg-silver-color: #C9D8E6;
    --dark-green-color: #52774b;
    --green-color: #54b046;
    --green-alter-color: #a8e0b5;
    --black-color: #000;
    --black-light-color: #333336;
    --gray-color: #efefef;
    --dark-gray-color: #86868b;
    --darker-gray-color: #515154;
    --gray-alter-color: #d2d2d7;
    --white-color: #ffffff;
    --white-little-color: #fafafa;
    --facebook-color: #1877f2;
    --whatsapp-color: #25d366;
    --vanilla-color: #f5f5f7;
    --blue-pill-color: #1a73e8;
    --green-pill-color: #1e8e3e;
    --gray-pill-color: #5f6368;
    --blue-dot-color: #7ba9e6;
    --pink-dot-color: #e67bb9;
    --yellow-dot-color: #e0da79;
    --white-dot-color: #fff;
    --black-minus-color: #1d1d1f;
    --blue-cake-color: #E8F0FE;
    --pink-cake-color: #FCE8E6;
    --green-cake-color: #E6F4EA;
    --yellow-cake-color: #FEF7E0;
    --blue-apple-color: #0066cc;
    --red-color: #ff3b30;
}

/* =========================================
   MODO OSCURO (APPLE PREMIUM DARK MODE)
   ========================================= */
body.dark-mode {
    /* 1. Fondos principales (Del blanco al negro) */
    --bg-blue-color: #000000;
    --bg-blue-light-color: #121212;
    --bg-blue-dark-color: #1c1c1e;
    
    /* 2. Tarjetas y Cajas */
    --white-color: #1c1c1e; 
    --white-little-color: #2c2c2e;
    --vanilla-color: #2c2c2e; 
    --bg-silver-color: #2c2c2e; 
    
    /* 3. Textos Principales */
    --blue-color: #f5f5f7; 
    --black-color: #ffffff;
    --black-light-color: #ebebf5;
    --black-minus-color: #f5f5f7;
    
    /* 4. Textos Secundarios */
    --dark-gray-color: #98989d;
    --darker-gray-color: #ebebf5;
    
    /* 5. Líneas y Bordes invisibles */
    --gray-alter-color: #38383a; 
    
    /* 6. Colores de Acento */
    --green-color: #32d74b; 
    --blue-apple-color: #2997ff; 
    
    /* 7. Colores pasteles de las tarjetas */
    --blue-cake-color: #0a1f3f;
    --pink-cake-color: #3f1118;
    --green-cake-color: #0d2b16;
    --yellow-cake-color: #3d330c;
}

/* ==============================================================
   LOGO EN MODO OSCURO (ALTERNANCIA)
   ============================================================== */
body.dark-mode .logo-light {
  display: none;
  opacity: 0;
}

body.dark-mode .logo-dark {
  display: block;
  opacity: 1;
}

/* ==============================================================
   PARCHES DE CRISTAL ESMERILADO (MODO OSCURO)
   ============================================================== */
/* Obligamos a todos los menús flotantes a usar cristal oscuro */
body.dark-mode nav,
body.dark-mode nav .sub-menu,
body.dark-mode .sticky-services-nav,
body.dark-mode .legal-sticky-nav {
    background-color: rgba(28, 28, 30, 0.85) !important; /* El gris oscuro de Apple con 85% de opacidad */
    border-color: rgba(255, 255, 255, 0.1) !important; /* Línea divisoria muy sutil */
}

/* ==============================================================
   PARCHE SECCIÓN EXPERIENCIA (EVITAR INVERSIÓN)
   ============================================================== */
/* Obligamos a la sección a quedarse en la oscuridad absoluta */
body.dark-mode .section-experience {
    background-color: #000000 !important; /* Fondo negro puro */
}

/* Forzamos el texto a ser blanco y gris respectivamente */
body.dark-mode .experience-header h2 {
    color: #ffffff !important;
}

body.dark-mode .experience-header p,
body.dark-mode .stat-label {
    color: #98989d !important; /* Gris secundario clásico de Apple */
}

/* Devolvemos el brillo esmeralda a los números gigantes */
body.dark-mode .stat-number {
    background: linear-gradient(135deg, #ffffff 0%, var(--green-color) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0px 10px 25px rgba(50, 215, 75, 0.15)) !important; /* Un halo verde estilo radiación muy sutil */
}

/* ==============================================================
   PARCHES: TARJETAS Y SWITCH IOS (MODO OSCURO)
   ============================================================== */
/* 1. Rescatando el texto de las tarjetas Bento (Visión) */
body.dark-mode .bento-card p {
    color: var(--dark-gray-color) !important; /* Un gris claro súper legible */
}

/* 2. Dándole límites y volumen al Switch iOS */
body.dark-mode .switch-track {
    background: rgba(255, 255, 255, 0.05) !important; /* Fondo súper sutil translúcido */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Línea delicada para marcar el límite */
}

body.dark-mode .switch-glider {
    background: #38383a !important; /* El gris exacto que usa Apple para pastillas elevadas */
    box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; /* Sombra profunda para que flote */
}

/* 3. Textos del Switch */
body.dark-mode .switch-btn {
    color: #98989d !important; /* Texto apagado cuando no está seleccionado */
}

body.dark-mode .switch-btn.active {
    color: #ffffff !important; /* Blanco puro cuando está seleccionado */
}

/* ==============================================================
   PARCHE MAESTRO: SERVICIOS Y CONTACTO (MODO OSCURO)
   ============================================================== */

/* 1. TEXTOS SOBRE VIDEOS OSCUROS (Té, Cápsulas, Impresión) */
body.dark-mode .scrub-title,
body.dark-mode .scrub-step h3,
body.dark-mode .cinema-giant-title,
body.dark-mode .print-giant-title {
    color: #ffffff !important; /* Forzamos a que el texto siempre sea blanco puro */
}

/* 2. VIDEOS CLAROS (Tabletas y Capletas) */
body.dark-mode .dual-standard-video {
    filter: brightness(0.4) contrast(1.2) !important; /* Oscurecemos el video como si le pusiéramos lentes de sol */
}
body.dark-mode .half-title {
    color: #ffffff !important; /* El texto ahora será blanco y brillará sobre el video oscuro */
}

/* 3. SECCIÓN POLVOS (Slider Líquido y Acordeón) */
body.dark-mode .liquid-interface {
    background-color: #000000 !important; /* El contenedor se vuelve negro puro */
}
body.dark-mode .lq-item {
    background: rgba(28, 28, 30, 0.85) !important; /* Las pastillas del acordeón se vuelven gris Apple */
}
body.dark-mode .lq-trigger {
    color: #ffffff !important; /* Títulos del acordeón en blanco */
}
body.dark-mode .lq-content p, 
body.dark-mode .lq-content ul {
    color: #ffffff !important;
}
body.dark-mode .liquid-giant-title {
    color: #ffffff !important;
}
body.dark-mode .liquid-section-desc {
    color: #ffffff !important;
}

/* 4. BOTONES OSCUROS (Para que la letra no se vuelva gris) */
body.dark-mode .lq-quote-btn,
body.dark-mode .btn-dark-pill {
    color: #ffffff !important;
}

/* 5. FORMULARIO DE CONTACTO Y MAPA MÁGICO */
/* Invertimos el mapa para que sea como un "rayo X" y brille en la oscuridad */
body.dark-mode .base-map,
body.dark-mode .floating-map {
    filter: invert(1) hue-rotate(180deg) brightness(1.5) drop-shadow(0 15px 15px rgba(255,255,255,0.05)) !important; 
}

/* Contenedor principal del Formulario */
body.dark-mode .contact-form-wrapper {
    background: #1c1c1e !important; /* Gris elegante */
    border-color: #38383a !important; /* Borde sutil */
}

/* Campos de texto donde el usuario escribe */
body.dark-mode .apple-form input,
body.dark-mode .apple-form textarea {
    background-color: #2c2c2e !important; /* Gris un poco más claro para los inputs */
    border-color: #38383a !important;
    color: #ffffff !important; /* Letra blanca al escribir */
}
body.dark-mode .apple-form input::placeholder,
body.dark-mode .apple-form textarea::placeholder {
    color: #86868b !important; /* Placeholder en gris */
}

/* ==============================================================
   PARCHE 2: TEXTOS SECUNDARIOS EN VIDEOS (MODO OSCURO)
   ============================================================== */

/* 1. SECCIÓN TÉ (Párrafos, Listas y Píldoras) */
body.dark-mode .scrub-step p,
body.dark-mode .clean-list,
body.dark-mode .clean-list li,
body.dark-mode .specs-note {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; /* Extra legibilidad */
}

/* Píldoras del Té (Ej. Bolsas de celofán) */
body.dark-mode .pill {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* 2. SECCIÓN CÁPSULAS (Distribución y Especificaciones) */
/* Los botones de empaque (Ej. A granel, En frascos) */
body.dark-mode .dist-list li {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Textos de "Obtén un producto terminado..." */
body.dark-mode .dist-note {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Los números gigantes inferiores (500mg, 15 millares) */
body.dark-mode .spec-value {
    color: #ffffff !important;
}

body.dark-mode .spec-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ==============================================================
   PARCHE 3: PÁGINA PRODUCTOS (TEXTOS SOBRE IMÁGENES)
   ============================================================== */

/* 1. Heroes Principales (Cabeceras de Té, Malteadas, Proteína) */
body.dark-mode .cinema-eyebrow,
body.dark-mode .cinema-title,
body.dark-mode .cinema-desc {
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.6) !important; /* Extra sombra para legibilidad */
}

/* 2. Slider del Té (Tarjetas de Vidrio Esmerilado) */
body.dark-mode .full-card-content h3,
body.dark-mode .full-card-content p {
    color: #ffffff !important;
    text-shadow: 0 2px 15px rgba(0,0,0,0.5) !important;
}

/* 3. Milky Shake (Póster Central y Sabores flotantes) */
body.dark-mode .poster-content-top h3,
body.dark-mode .poster-text-main,
body.dark-mode .poster-item h4 {
    color: #ffffff !important;
    text-shadow: 0 2px 15px rgba(0,0,0,0.5) !important;
}

body.dark-mode .poster-item p {
    color: rgba(255, 255, 255, 0.85) !important; /* Un blanco más suave para los descriptores */
}

/* Rescate del párrafo ninja de Milky Shake */
body.dark-mode .poster-content-top p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 15px rgba(0,0,0,0.6) !important;
}

/* 4. Whey Power Pro (Efecto Inmersivo y Explosión) */
body.dark-mode .immersive-hero-text h2,
body.dark-mode .immersive-hero-text p,
body.dark-mode .immersive-text-container h3,
body.dark-mode .immersive-text-container p,
body.dark-mode .whey-explosion-banner .impact-headline,
body.dark-mode .whey-explosion-banner .impact-desc {
    color: #ffffff !important;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
}

/* ==============================================================
   PARCHE 4: PÁGINA NOSOTROS (TEXTO SOBRE VIDEO HERO)
   ============================================================== */

body.dark-mode .corp-eyebrow,
body.dark-mode .corp-hero-content h1 {
    color: #ffffff !important; /* Forzamos el blanco puro */
    text-shadow: 0 4px 30px rgba(0,0,0,0.6) !important; /* Mantenemos la sombra para legibilidad */
}

/* ==============================================================
   PARCHE SLIDER PRINCIPAL INDEX (MODO OSCURO)
   ============================================================== */

/* 1. Forzamos los textos del Hero a blanco puro sobre la imagen */
body.dark-mode .hero-subtitle,
body.dark-mode .layer.texto-hero h2,
body.dark-mode .hero-desc {
    color: #ffffff !important;
}

/* 2. Rescatamos el texto del botón verde relleno */
body.dark-mode .btn-hero {
    color: #ffffff !important;
}

/* 3. Rescatamos el borde y texto del botón outline (Contacto) */
body.dark-mode .btn-hero.outline {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* 4. Rescatamos el hover del botón outline */
body.dark-mode .btn-hero.outline:hover {
    background-color: #ffffff !important;
    color: var(--green-color) !important;
}

/* Parche para las pastillas de Acondicionamiento (Modo Oscuro) */
body.dark-mode .packaging-pill-list li {
    background-color: #1c1c1e !important;
    color: #ebebf5 !important;
    border-color: #38383a !important;
}