/* --- Paleta de Colores Oficiales Wellness@EDP --- */
        :root {
            var(--edp-purple): #7e4892;
            --wellness-teal-dark: #0b666b;
            --wellness-teal-light: #158a96;
            --wellness-cyan: #29adb4;
            --edp-purple: #7e4892;
            
            --dark-text: #2c3e50;
            --light-text: #7f8c8d;
            --white: #FFFFFF;
            --light-bg: #f4f7f6;
            --border-color: #e9ecef;

            --header-bg: var(--white);
            --footer-bg: var(--wellness-teal-dark);
            
            --font-primary: 'Montserrat', sans-serif;
            --font-secondary: 'Open Sans', sans-serif;
            
            --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 15px 40px rgba(126, 72, 146, 0.1);
            --border-radius: 16px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-secondary); line-height: 1.8; color: var(--dark-text); background-color: var(--light-bg); overflow-x: hidden; }
        .container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

        .progress-container { width: 100%; height: 5px; background: transparent; position: fixed; top: 85px; z-index: 1001; }
        .progress-bar { height: 5px; background: linear-gradient(90deg, var(--wellness-cyan), var(--edp-purple)); width: 0%; transition: width 0.1s; border-radius: 0 5px 5px 0;}

        .main-header { background-color: var(--header-bg); padding: 15px 0; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 1002; }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .logo-container { display: flex; align-items: center; gap: 15px; text-decoration: none; }
        .logo-img { height: 55px; }
        .title-container { display: flex; flex-direction: column; }
        .site-title { font-family: var(--font-primary); font-weight: 800; font-size: 1.5em; color: var(--wellness-teal-dark); line-height: 1.1; }
        .site-subtitle { font-family: var(--font-primary); font-size: 0.7em; font-weight: 600; color: var(--wellness-teal-light); margin-top: -2px; }
        
        .mobile-nav-toggle { display: none; font-size: 1.8rem; color: var(--wellness-teal-dark); background: transparent; border: none; cursor: pointer; }
        .main-nav ul { list-style: none; display: flex; align-items: center; gap: 5px; }
        .main-nav a { color: var(--dark-text); text-decoration: none; font-family: var(--font-primary); font-weight: 700; font-size: 0.95em; padding: 10px 15px; border-radius: 8px; transition: color 0.3s ease; }
        .main-nav a:hover { color: var(--wellness-teal-dark); background-color: rgba(11, 102, 107, 0.05); }

        .hero-section { 
            background: linear-gradient(-45deg, var(--wellness-teal-dark), var(--wellness-teal-light), var(--edp-purple), var(--wellness-teal-dark));
            background-size: 400% 400%;
            animation: gradientHero 15s ease infinite;
            color: var(--white); 
            text-align: center; 
            padding: 110px 20px 130px;
            position: relative;
        }
        @keyframes gradientHero {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
        .hero-content h1 { font-family: var(--font-primary); font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 800; margin-bottom: 15px; line-height: 1.2; text-shadow: 0 4px 10px rgba(0,0,0,0.3); }
        .hero-content p { font-size: clamp(1.1rem, 2.5vw, 1.3rem); font-weight: 500; max-width: 700px; margin: 0 auto; opacity: 0.95; }

        .custom-shape-divider-bottom { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
        .custom-shape-divider-bottom svg { position: relative; display: block; width: calc(100% + 1.3px); height: 70px; }
        .custom-shape-divider-bottom .shape-fill { fill: var(--light-bg); }

        .quick-nav {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: -30px;
            margin-bottom: 40px;
            position: sticky;
            top: 100px;
            z-index: 10;
        }
        .quick-nav a {
            background: var(--white);
            color: var(--wellness-teal-dark);
            padding: 12px 25px;
            border-radius: 50px;
            text-decoration: none;
            font-family: var(--font-primary);
            font-weight: 700;
            font-size: 0.9em;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .quick-nav a:hover, .quick-nav a.active-pill {
            background: var(--edp-purple);
            color: var(--white);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(126, 72, 146, 0.3);
        }

        .legal-container { position: relative; z-index: 5; padding-bottom: 60px; }

        .legal-card { 
            background-color: var(--white); 
            padding: clamp(40px, 6vw, 60px); 
            border-radius: var(--border-radius); 
            box-shadow: var(--shadow-md); 
            border-top: 6px solid var(--wellness-teal-light);
            margin-bottom: 40px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .legal-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

        .card-privacidad { border-top-color: var(--wellness-cyan); }
        .card-cookies { border-top-color: var(--edp-purple); }
        .card-terminos { border-top-color: var(--wellness-teal-dark); }

        .legal-card h2 { 
            font-family: var(--font-primary); 
            font-weight: 800; 
            font-size: clamp(1.8rem, 4vw, 2.4rem); 
            color: var(--wellness-teal-dark); 
            margin-bottom: 30px; 
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .card-cookies h2 { color: var(--edp-purple); }
        .card-terminos h2 { color: var(--wellness-teal-dark); }

        .date-badge {
            display: inline-block;
            background: rgba(126, 72, 146, 0.08);
            color: var(--edp-purple);
            padding: 6px 15px;
            border-radius: 50px;
            font-size: 0.85em;
            font-weight: 700;
            margin-bottom: 25px;
            border: 1px solid rgba(126, 72, 146, 0.15);
        }

        .legal-card h3 {
            font-family: var(--font-primary);
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--dark-text);
            margin-top: 30px;
            margin-bottom: 15px;
        }

        .legal-card p { font-size: 1.05rem; color: var(--dark-text); margin-bottom: 25px; text-align: justify; }

        .legal-card a {
            color: var(--wellness-cyan);
            text-decoration: none;
            font-weight: 700;
            transition: color 0.3s;
            position: relative;
        }
        .legal-card a::after {
            content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px;
            bottom: -2px; left: 0; background-color: var(--wellness-teal-dark);
            transform-origin: bottom right; transition: transform 0.25s ease-out;
        }
        .legal-card a:hover { color: var(--wellness-teal-dark); }
        .legal-card a:hover::after { transform: scaleX(1); transform-origin: bottom left; }

        .highlight {
            background: linear-gradient(120deg, rgba(126, 72, 146, 0.12) 0%, rgba(126, 72, 146, 0.12) 100%);
            background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 88%;
            font-weight: 600; color: var(--edp-purple);
        }

        .main-footer { background-color: var(--footer-bg); color: rgba(255, 255, 255, 0.8); padding: 50px 0; text-align: center; }
        .footer-logo { height: 60px; margin-bottom: 20px; opacity: 0.9; }

        .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .fade-in.is-visible { opacity: 1; transform: translateY(0); }

        @media (min-width: 992px) { .mobile-nav-toggle { display: none; } }
        @media (max-width: 991px) {
            .progress-container { top: 82px; }
            .mobile-nav-toggle { display: block; }
            .main-nav { 
                position: absolute; top: 85px; right: 0; left: 0; background: var(--white); 
                box-shadow: var(--shadow-sm); visibility: hidden; opacity: 0; transform: translateY(-20px);
                transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s; 
            }
            .main-nav.nav-active { visibility: visible; opacity: 1; transform: translateY(0); }
            .main-nav ul { flex-direction: column; align-items: center; gap: 0; width: 100%; }
            .main-nav li { width: 100%; text-align: center; }
            .main-nav a { display: block; padding: 20px; width: 100%; border-radius: 0; border-bottom: 1px solid var(--border-color); }
            .main-nav li:last-child a { border-bottom: none; }
            .quick-nav { flex-direction: column; gap: 10px; padding: 0 20px; position: static; margin-top: -20px;}
        }