/* DESIGN SYSTEM 
   Palette: strict Black (#000000) and White (#FFFFFF).
   Grays for subtle borders/bg only.
*/
:root {
    --color-bg: #FFFFFF;
    --color-text: #000000;
    --color-text-light: #333333;
    --color-accent: #000000;
    --color-white: #FFFFFF;
    --color-gray-light: #F5F5F5;
    --border-radius: 999px;
    /* Pill shape for buttons */
    --input-radius: 8px;
    /* Slightly less rounded for inputs */
    --spacing-section: 4rem;
    --font-main: 'Montserrat', sans-serif;
    --nav-height: 70px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
    /* Offset for sticky header */
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: var(--nav-height);
    /* Prevent content hiding behind fixed nav */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    /* filter: grayscale(100%);  Removed to allow color images */
}

.container {
    width: 90%;
    max-width: 1050px;
    /* Reduced by 250px from 1300px */
    margin: 0 auto;
    padding: 0 1rem;
}

section.section {
    padding: var(--spacing-section) 0;
}

h1,
h2,
h3 {
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

h2.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
}

.bg-light {
    background-color: var(--color-gray-light);
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eee;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    text-decoration: none;
    line-height: 0;
    display: block;
}

.logo img {
    height: 40px;
    width: auto;
}

.nav-links {
    list-style: none;
    display: none;
    /* Hidden on mobile by default */
    flex-direction: column;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: var(--color-white);
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}

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

.nav-links li {
    text-align: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    display: block;
    padding: 1rem;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: #666;
}

.mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    transition: 0.3s;
}

/* BUTTONS */
.cta-button {
    display: inline-block;
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: 1rem 2.5rem;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.125rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
    text-align: center;
    cursor: pointer;
}

.cta-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.outline-btn {
    background-color: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-text);
}

.spotify-btn {
    background-color: #1DB954;
    color: var(--color-white);
    padding: 0.8rem 2rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
    margin-top: 1rem;
}

.spotify-btn:hover {
    background-color: #1ed760;
    transform: translateY(-2px);
    color: var(--color-white);
}

.spotify-btn svg {
    fill: currentColor;
}


/* FORMS */
.newsletter-container {
    text-align: center;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
    margin: 2rem auto 0;
}

.newsletter-form input {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 1rem;
}

.contact-container {
    max-width: 600px;
}

.contact-subtitle {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.125rem;
}

.contact-form {
    display: grid;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: var(--input-radius);
    font-family: inherit;
    font-size: 1rem;
    background: var(--color-white);
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-text);
}


/* HERO SECTION */
.hero-section {
    padding: 6rem 0;
    text-align: left;
    position: relative;
    /* Context for absolute background */
    overflow: hidden;
    /* Prevent spillover */
}

/* Subtle Piano Background */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/IMG_6537.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    /* Very subtle - visual noise almost */
    z-index: -1;
    filter: grayscale(100%);
    /* Ensure it stays B&W neutral */
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    position: relative;
    z-index: 1;
    /* Ensure content is above background */
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    /* Tighter line height */
    font-weight: 800;
    /* Bolder */
}

.hero-content .subtitle {
    font-size: 1.25rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: flex-start;
    width: 100%;
    margin-top: 2.5rem;
}

.hero-cta-group .cta-button {
    flex: 1 1 auto;
    width: 100%;
    max-width: 300px;
    min-width: 250px;
    /* Ensure they don't get too small before wrapping */
}


.hero-image img {
    /* Editorial Print Style */
    border: 15px solid #FFFFFF;
    border-radius: 12px;
    /* Suavemente redondeadas */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* Sombra suave flotante */
    transform: rotate(-3deg);
    /* Ligeramente inclinada */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    max-width: 90%;
    /* Prevent overflow with rotation */
    margin: 0 auto;
}

.hero-image img:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.3);
}

/* EMPATHY SECTION */
.empathy-section {
    padding: 4rem 0;
    background-color: var(--color-bg);
}

.empathy-text {
    font-size: 1.5rem;
    font-weight: 400;
    /* Lighter weight for quote feel */
    text-align: center;
    font-style: italic;
    max-width: 800px;
    margin: 0 auto;
}

/* CURRICULUM BACKGROUND */
#curriculum {
    background-color: #000000;
    /* Black opaque background to start, adjust RGBa if we want overlay on something, but user asked for black opacity. 
       If it's on white body, opacity 0.3 just makes it light gray. 
       Usually "black with 30% opacity" implies an overlay. 
       If it is a standalone section, maybe they mean a dark gray (black * 0.3)? 
       Or maybe they want the background image of the body to show through? 
       Assuming bold choice: Black background, but maybe they want it slightly transparent if there was a bg image behind it.
       Given the flow, I will use a solid dark color or actual RGBA if it overlays the body bg.
       Since body is white, rgba(0,0,0,0.3) = gray. Let's do that as requested.
    */
    background-color: var(--color-gray-light);
    color: var(--color-text);
    padding: 4rem 0;
}

/* Override check icon color for this section to be black */
#curriculum .icon-check {
    stroke: var(--color-accent);
}

/* ACHIEVEMENTS */
#achievements {
    position: relative;
    overflow: hidden;
}

#achievements::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/notas.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
}

.achievement-list {
    list-style: none;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.achievement-list li {
    font-size: 1.125rem;
    /* Reduce font size */
    display: flex;
    /* Flex para alinear */
    align-items: center;
    justify-content: flex-start;
    /* Align left */
    text-align: left;
    gap: 1rem;
}

/* Make checks visible in the grid */
.achievement-list .icon-check {
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .achievement-list {
        grid-template-columns: 1fr 1fr;
        /* Dos columnas */
    }
}

/* INCLUDES GRID */
.grid-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.feature-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #e5e5e5;
    text-align: center;
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* TARGET AUDIENCE */
.equal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.audience-col {
    padding: 2rem;
    border-radius: 1rem;
}

.is-for {
    background-color: var(--color-white);
    color: var(--color-text);
    border: 2px solid #eee;
    /* Slight border to define it if white on white/light bg, removing black bg */
}

.is-not-for {
    background-color: var(--color-accent);
    /* Putting black bg here */
    color: var(--color-white);
    /* White text */
    border: 2px solid var(--color-accent);
}

.audience-col h3 {
    margin-bottom: 1.5rem;
}

.audience-col ul {
    list-style: none;
}

.audience-col ul li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.is-for ul li::before {
    content: "✓";
    margin-right: 0.5rem;
}

.is-not-for ul li::before {
    content: "✕";
    margin-right: 0.5rem;
}

/* INSTRUCTOR */
.instructor-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.instructor-image img {
    width: 100%;
    max-width: 400px;
    /* Limit max size on mobile/tablet */
    height: auto;
    object-fit: contain;
    /* Ensure full image is seen */
    border-radius: 12px;
    margin: 0 auto;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* TESTIMONIALS */
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.testimonial-card {
    text-align: center;
    padding: 0 1rem;
}

.student-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
}

.quote {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-style: italic;
}

.student-name {
    font-weight: 600;
}

/* STEPS */
.steps-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.step-item {
    text-align: center;
    max-width: 250px;
}

.step-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: var(--color-accent);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* OFFER */
.offer-section {
    text-align: center;
    background-color: var(--color-accent);
    color: var(--color-white);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.offer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/teclado.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    /* Opacidad 40 */
    z-index: -1;
}

.offer-section .guarantee-badge {
    display: inline-block;
    background: #333;
    padding: 0.25rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.price-box {
    font-size: 3rem;
    font-weight: 700;
    margin: 1.5rem 0 2rem;
}

.big-cta {
    background-color: var(--color-white);
    color: var(--color-accent);
    border-color: var(--color-white);
    font-size: 1.5rem;
    padding: 1.25rem 3rem;
}

.security-text {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    opacity: 0.8;
}

/* FOOTER */
footer {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem;
    border-top: 1px solid #eee;
}

/* DESKTOP MEDIA QUERIES */
@media (min-width: 768px) {
    .nav-links {
        display: flex;
        flex-direction: row;
        position: static;
        width: auto;
        border-bottom: none;
        padding: 0;
    }

    .mobile-toggle {
        display: none;
    }

    .nav-links a {
        padding: 0 1.5rem;
    }

    .newsletter-form {
        flex-direction: row;
        width: 100%;
    }

    .newsletter-form input {
        flex: 1;
    }

    .hero-container {
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: 4rem;
        /* Increased gap */
    }

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

    .hero-content {
        flex: 1;
        z-index: 10;
        /* Ensure text stays readable if overlap */
    }

    .hero-image {
        flex: 1.5;
        /* Give image much more column space */
        display: flex;
        justify-content: center;
    }

    .hero-image img {
        max-width: 120%;
        /* Reduced from 140% to prevent overlap with text */
        width: 120%;
        margin-right: -10%;
    }

    .grid-features {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .instructor-container {
        flex-direction: row;
        text-align: left;
    }

    .instructor-image {
        flex: 0 0 250px;
    }

    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .steps-grid {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
}

/* INSTRUCTOR UPDATE */
.instructor-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    margin-bottom: 4rem;
}

.instructor-info p {
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.instructor-videos h4 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: Stacked */
    gap: 20px;
}

@media (min-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Desktop: 2 Cols x 2 Rows */
    }
}

.video-card {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.video-card:hover {
    transform: translateY(-5px);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.video-card:hover .video-thumbnail img {
    opacity: 0.6;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .instructor-profile {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .instructor-image {
        flex: auto;
        max-width: 100%;
        display: block;
        margin-bottom: 2rem;
    }

    .instructor-image img {
        width: 100%;
        max-width: 300px;
        /* Medium circular crop */
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%;
    }
}

/* VIDEO CLASE PREPARATORIA */
.preparatory-video-section {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.video-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.video-container {
    max-width: 700px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    background: #000;
    line-height: 0;
    position: relative;
}

.preparatory-video {
    width: 100%;
    height: auto;
    display: block;
}

.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.video-play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.play-button-custom {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: #000;
    padding-left: 5px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.video-play-overlay:hover .play-button-custom {
    transform: scale(1.1);
}