/* Estilos específicos para la página dual de Teatino */

/* Estado por defecto: Teatino Maracuyá (Pastel Red / Pink) */
body.teatino-maracuya-active {
    background-color: #FFF0F2;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(231, 76, 60, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(255, 107, 129, 0.05) 0%, transparent 50%);
    color: #3A2A2C;
    transition: background-color 0.5s ease, background-image 0.5s ease, color 0.5s ease;
    
    --color-bg-dark: #FFF0F2;
    --color-bg-card: rgba(255, 255, 255, 0.85);
    --color-bg-card-hover: rgba(255, 255, 255, 1);
    
    --color-gold-rose: #FF4757; 
    --color-gold-light: #2C3E50; 
    --color-gold-accent: #FF6B81; 
    
    --color-text-light: #3A2A2C;
    --color-text-muted: #826B6D;
    
    --glass-border: 1px solid rgba(231, 76, 60, 0.12);
    --glass-shadow: 0 15px 35px rgba(231, 76, 60, 0.06);
    --glass-shadow-hover: 0 20px 45px rgba(231, 76, 60, 0.12);
}

/* Estado alternativo: Teatino Limón (Pastel Green) */
body.teatino-limon-active {
    background-color: #F4FAF5;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(46, 204, 113, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(39, 174, 96, 0.05) 0%, transparent 50%);
    color: #2A3A2C;
    transition: background-color 0.5s ease, background-image 0.5s ease, color 0.5s ease;
    
    --color-bg-dark: #F4FAF5;
    --color-bg-card: rgba(255, 255, 255, 0.85);
    --color-bg-card-hover: rgba(255, 255, 255, 1);
    
    --color-gold-rose: #2ECC71; 
    --color-gold-light: #2C3E50; 
    --color-gold-accent: #27AE60; 
    
    --color-text-light: #2A3A2C;
    --color-text-muted: #6B826D;
    
    --glass-border: 1px solid rgba(46, 204, 113, 0.12);
    --glass-shadow: 0 15px 35px rgba(46, 204, 113, 0.06);
    --glass-shadow-hover: 0 20px 45px rgba(46, 204, 113, 0.12);
}

/* Transición suave para elementos temáticos */
.main-header, .contact-link, .nav-tab-btn, .dropdown-menu, .btn-primary, .btn-secondary, 
.badge, .price-value, .feature-icon-wrapper, .ingredient-badge, .step-number, 
.step-icon-wrapper, .btn-replay-animation, .btn-package, .package-card, 
.toggle-slider-btn, .toggle-slider-knob, .toggle-label, .expert-tip-box {
    transition: all 0.5s ease;
}

body.teatino-maracuya-active .main-header {
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(231, 76, 60, 0.1);
}
body.teatino-limon-active .main-header {
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(46, 204, 113, 0.1);
}

body.teatino-maracuya-active .contact-link { color: #826B6D; }
body.teatino-maracuya-active .contact-link:hover { color: #FF4757; }
body.teatino-limon-active .contact-link { color: #6B826D; }
body.teatino-limon-active .contact-link:hover { color: #2ECC71; }

body.teatino-maracuya-active .nav-tab-btn { color: #826B6D; border-color: rgba(231, 76, 60, 0.15); }
body.teatino-maracuya-active .nav-tab-btn:hover { color: #FF4757; }
body.teatino-maracuya-active .nav-tab-btn.active {
    background: linear-gradient(135deg, #FF4757, #FF6B81);
    color: white;
}

body.teatino-limon-active .nav-tab-btn { color: #6B826D; border-color: rgba(46, 204, 113, 0.15); }
body.teatino-limon-active .nav-tab-btn:hover { color: #2ECC71; }
body.teatino-limon-active .nav-tab-btn.active {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    color: white;
}

body.teatino-maracuya-active .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(231, 76, 60, 0.15);
}
body.teatino-maracuya-active .dropdown-menu a { color: #826B6D; }
body.teatino-maracuya-active .dropdown-menu a:hover { color: #FF4757; background-color: rgba(231, 76, 60, 0.05); }

body.teatino-limon-active .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(46, 204, 113, 0.15);
}
body.teatino-limon-active .dropdown-menu a { color: #6B826D; }
body.teatino-limon-active .dropdown-menu a:hover { color: #2ECC71; background-color: rgba(46, 204, 113, 0.05); }

/* Botones WhatsApp y Hero */
body.teatino-maracuya-active .btn-whatsapp-header,
body.teatino-maracuya-active .btn-primary,
body.teatino-maracuya-active .btn-package-featured,
body.teatino-maracuya-active .btn-whatsapp-footer {
    background: linear-gradient(135deg, #FF4757, #FF6B81);
    color: white;
    border: none;
}
body.teatino-maracuya-active .btn-whatsapp-header:hover,
body.teatino-maracuya-active .btn-primary:hover,
body.teatino-maracuya-active .btn-package-featured:hover,
body.teatino-maracuya-active .btn-whatsapp-footer:hover {
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
    transform: translateY(-2px);
    color: white;
}

body.teatino-limon-active .btn-whatsapp-header,
body.teatino-limon-active .btn-primary,
body.teatino-limon-active .btn-package-featured,
body.teatino-limon-active .btn-whatsapp-footer {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    color: white;
    border: none;
}
body.teatino-limon-active .btn-whatsapp-header:hover,
body.teatino-limon-active .btn-primary:hover,
body.teatino-limon-active .btn-package-featured:hover,
body.teatino-limon-active .btn-whatsapp-footer:hover {
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
    transform: translateY(-2px);
    color: white;
}

/* Badges y Textos */
body.teatino-maracuya-active .badge {
    background: rgba(231, 76, 60, 0.1);
    color: #FF4757;
    border: 1px solid rgba(231, 76, 60, 0.2);
}
body.teatino-maracuya-active .price-value { color: #FF4757; }
body.teatino-maracuya-active .feature-icon-wrapper {
    background: rgba(231, 76, 60, 0.08);
    color: #FF4757;
}

body.teatino-limon-active .badge {
    background: rgba(46, 204, 113, 0.1);
    color: #2ECC71;
    border: 1px solid rgba(46, 204, 113, 0.2);
}
body.teatino-limon-active .price-value { color: #2ECC71; }
body.teatino-limon-active .feature-icon-wrapper {
    background: rgba(46, 204, 113, 0.08);
    color: #2ECC71;
}

/* Ingredientes y Pasos */
body.teatino-maracuya-active .ingredient-badge {
    background: rgba(231, 76, 60, 0.08);
    color: #FF4757;
    border: 1px solid rgba(231, 76, 60, 0.15);
}
body.teatino-maracuya-active .step-number {
    background: rgba(231, 76, 60, 0.1);
    color: #FF4757;
}
body.teatino-maracuya-active .step-icon-wrapper {
    color: #FF4757;
}

body.teatino-limon-active .ingredient-badge {
    background: rgba(46, 204, 113, 0.08);
    color: #2ECC71;
    border: 1px solid rgba(46, 204, 113, 0.15);
}
body.teatino-limon-active .step-number {
    background: rgba(46, 204, 113, 0.1);
    color: #2ECC71;
}
body.teatino-limon-active .step-icon-wrapper {
    color: #2ECC71;
}

/* Replay y Packs */
body.teatino-maracuya-active .btn-replay-animation {
    background: rgba(231, 76, 60, 0.1);
    color: #FF4757;
    border: 1px solid rgba(231, 76, 60, 0.2);
}
body.teatino-maracuya-active .btn-replay-animation:hover {
    background: #FF4757;
    color: white;
}
body.teatino-maracuya-active .btn-package {
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #FF4757;
}
body.teatino-maracuya-active .btn-package:hover {
    background: rgba(231, 76, 60, 0.05);
}
body.teatino-maracuya-active .glow-ring {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.1) 0%, transparent 70%);
}
body.teatino-maracuya-active .package-card.featured {
    border-color: rgba(231, 76, 60, 0.3);
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.08);
}
body.teatino-maracuya-active .featured-badge {
    background: linear-gradient(135deg, #FF4757, #FF6B81);
    color: white;
}

body.teatino-limon-active .btn-replay-animation {
    background: rgba(46, 204, 113, 0.1);
    color: #2ECC71;
    border: 1px solid rgba(46, 204, 113, 0.2);
}
body.teatino-limon-active .btn-replay-animation:hover {
    background: #2ECC71;
    color: white;
}
body.teatino-limon-active .btn-package {
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ECC71;
}
body.teatino-limon-active .btn-package:hover {
    background: rgba(46, 204, 113, 0.05);
}
body.teatino-limon-active .glow-ring {
    background: radial-gradient(circle, rgba(46, 204, 113, 0.1) 0%, transparent 70%);
}
body.teatino-limon-active .package-card.featured {
    border-color: rgba(46, 204, 113, 0.3);
    box-shadow: 0 10px 30px rgba(46, 204, 113, 0.08);
}
body.teatino-limon-active .featured-badge {
    background: linear-gradient(135deg, #2ECC71, #27AE60);
    color: white;
}

/* Tip Experto */
body.teatino-maracuya-active .expert-tip-box {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(231, 76, 60, 0.25);
}
body.teatino-maracuya-active .expert-tip-box strong { color: #FF4757; }
body.teatino-maracuya-active .tip-icon { color: #FF4757; }

body.teatino-limon-active .expert-tip-box {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(46, 204, 113, 0.25);
}
body.teatino-limon-active .expert-tip-box strong { color: #27AE60; }
body.teatino-limon-active .tip-icon { color: #27AE60; }

/* Footer y Separadores */
body.teatino-maracuya-active .main-footer {
    border-top: 1px solid rgba(231, 76, 60, 0.15);
}
body.teatino-limon-active .main-footer {
    border-top: 1px solid rgba(46, 204, 113, 0.15);
}

/* ========================================================
   ESTILOS DEL DESLIZADOR DUAL INTERACTIVO
   ======================================================== */
.teatino-toggle-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 25px;
}

.toggle-slider-container {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.7);
    padding: 8px 18px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.toggle-slider-btn {
    width: 66px;
    height: 34px;
    background: #E0E0E0;
    border-radius: 20px;
    border: none;
    position: relative;
    cursor: pointer;
    outline: none;
}

.toggle-slider-knob {
    width: 26px;
    height: 26px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.toggle-label {
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

/* Efectos de transición del deslizador */
body.teatino-maracuya-active .toggle-label.label-maracuya {
    color: #FF4757;
    transform: scale(1.05);
}
body.teatino-maracuya-active .toggle-label.label-limon {
    color: #826B6D;
    opacity: 0.6;
}
body.teatino-maracuya-active .toggle-slider-btn {
    background: #FF6B81;
}
body.teatino-maracuya-active .toggle-slider-knob {
    transform: translateX(0);
}

body.teatino-limon-active .toggle-label.label-limon {
    color: #27AE60;
    transform: scale(1.05);
}
body.teatino-limon-active .toggle-label.label-maracuya {
    color: #6B826D;
    opacity: 0.6;
}
body.teatino-limon-active .toggle-slider-btn {
    background: #2ECC71;
}
body.teatino-limon-active .toggle-slider-knob {
    transform: translateX(32px);
}

/* Animación de desvanecimiento suave para cambios de contenido */
.fade-transition {
    opacity: 1;
    transition: opacity 0.3s ease;
}
.fade-out {
    opacity: 0;
}