/* Estilos personalizados para DemoFisio */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --primary-color: #5d87ff;
    --secondary-color: #13deb9;
    --text-color: #2c3e50;
    /* Darker for better contrast */
    --light-bg: #f8f9fa;
    --white: #ffffff;
    --dark-overlay: rgba(0, 0, 0, 0.4);
    /* Lighter overlay */
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* Smoother transition */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 20px 25px rgba(0, 0, 0, 0.15);
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.7;
    /* Increased line height */
    color: var(--text-color);
    background: linear-gradient(to bottom, var(--white) 0%, #f0f4f8 100%);
    /* Soft gradient */
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: var(--transition);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.5px;
}

.logo img {
    height: 45px;
}

.nav-links {
    display: flex;
    gap: 40px;
    /* Increased gap */
}

.nav-links a {
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    padding-bottom: 5px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-links a:hover::after {
    width: 100%;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    letter-spacing: 0.5px;
}

.btn-primary:hover {
    background: #4a70e0;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    background: var(--secondary-color);
    color: var(--white);
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-secondary:hover {
    background: #0fc2a1;
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: var(--transition);
}

/* Hero Section */
.hero {
    background: linear-gradient(var(--dark-overlay), var(--dark-overlay)), url('assets/img/hero-bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax Effect */
    height: 85vh;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--white);
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 1;
    animation: fadeIn Up 1s ease-out;
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 25px;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* About Section */
.about {
    padding: 100px 0;
    background: linear-gradient(to right, var(--white) 0%, #f9fbfd 100%);
    /* Soft gradient */
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-img {
    position: relative;
}

.about-img::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--secondary-color);
    border-radius: 20px;
    z-index: 0;
}

.about-img img {
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
    transition: var(--transition);
}

.about-img:hover img {
    transform: translate(10px, 10px);
}

.about-text h2 {
    color: var(--primary-color);
    font-size: 2.8rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.about-text p {
    margin-bottom: 20px;
    color: #555;
    font-size: 1.1rem;
}

/* Services Section */
.services {
    padding: 100px 0;
    background: linear-gradient(180deg, #f8f9fa 0%, #eef2f5 100%);
    /* Soft gradient */
}

.section-title {
    text-align: center;
    margin-bottom: 70px;
}

.section-title h2 {
    color: var(--primary-color);
    font-size: 2.8rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.section-title p {
    color: #666;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

.service-card {
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.service-card:hover {
    transform: translateY(-15px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.service-icon {
    font-size: 3.5rem;
    color: var(--secondary-color);
    margin-bottom: 25px;
    transition: var(--transition);
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    color: var(--primary-color);
}

.service-card h3 {
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 600;
}

.service-card p {
    color: #666;
}

/* Testimonials/Graphics Section */
.testimonials {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, #4a70e0 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIiBmaWxsLW9wYWNpdHk9IjAuMDUiIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0wIDBoNDB2NDBIMHoiLz48L3N2Zz4=');
    opacity: 0.1;
}

.testimonials .section-title h2 {
    color: var(--white);
}

.testimonials .section-title p {
    color: rgba(255, 255, 255, 0.9);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

.stat-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    transition: var(--transition);
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.stat-item h3 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--secondary-color);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-item p {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Reservation Section */
.reservation {
    padding: 100px 0;
    background: linear-gradient(to bottom, var(--white) 0%, #f0f4f8 100%);
    /* Soft gradient */
}

.iframe-container {
    width: 100%;
    min-height: 600px;
    /* Reduced height */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--white);
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    min-height: 600px;
    /* Reduced height */
}

/* Footer */
footer {
    background: #1a252f;
    color: var(--white);
    padding: 80px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 60px;
    margin-bottom: 60px;
}

.footer-col h3 {
    color: var(--secondary-color);
    margin-bottom: 25px;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.footer-col p {
    color: #bdc3c7;
    margin-bottom: 15px;
}

.footer-col ul li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-col ul li a {
    color: #bdc3c7;
    transition: var(--transition);
}

.footer-col ul li a:hover {
    color: var(--secondary-color);
}

.footer-col ul li i {
    color: var(--secondary-color);
    width: 20px;
    text-align: center;
}

.copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #7f8c8d;
    font-size: 0.9rem;
}

/* Contact Section */
.contact-section {
    padding: 100px 0;
    background: #fff;
    position: relative;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.contact-form-wrapper {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(93, 135, 255, 0.1);
}

.map-wrapper {
    height: 100%;
    min-height: 450px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .navbar {
        /* Keep logo and toggle in a row */
        flex-direction: row;
        flex-wrap: wrap;
    }

    .menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        background: #fff;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 20px;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        border-top: 1px solid #eee;
        animation: slideDown 0.3s ease forwards;
    }

    .nav-links.active {
        display: flex;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-links a {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .nav-links a::after {
        display: none;
        /* Remove underline effect on mobile */
    }

    .btn-primary {
        /* Move "Reservar Cita" button nicely if needed, or keep as part of navbar flow */
        display: none;
        /* Often hidden inside menu or handled differently. Let's hide it from header and assume checking link in menu or hero is enough? 
         Or better, move it to the bottom of the opened menu? 
         For now, the structure has .btn-primary OUTSIDE .nav-links. 
         So it will sit next to menu-toggle or wrap. 
         Let's keep it simple: make .navbar wrap.
         */
    }

    /* Re-structure navbar for mobile: Logo | Toggle */
    /* The .btn-primary is a direct child of .navbar, after nav-links. */

    .navbar .btn-primary {
        display: none;
        /* Hide top CTA on mobile to save space, user can use Hero CTA */
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-img::before {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        /* Stack visually to avoid clipping */
        gap: 20px;
    }

    .stat-item {
        padding: 20px;
    }

    .stat-item h3 {
        font-size: 2.5rem;
        /* Reduce size for mobile */
    }

    .section-title h2 {
        font-size: 2.2rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .map-wrapper {
        min-height: 300px;
    }
}