:root {
    --brand-orange: #ed8b2a;
    --brand-orange-dark: #d47a1c;
    /* For button hovers */
    --brand-orange-ring: rgba(237, 139, 42, 0.4);
    /* For focus rings */
    --brand-pink: #fdf2e9;
    --stone-50: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --text-placeholder: #6b7280;
    /* For form placeholders */
    --white: #ffffff;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Lexend, "Noto Sans", sans-serif;
    /* From current inline style on wrapper */
    background-color: var(--stone-50);
    /* From current body class bg-stone-50 */
    color: var(--stone-800);
    /* A sensible default */
    margin: 0;
}

* {
    box-sizing: border-box;
}

/* Styles moved from index2.html <style> block AND augmented for header */
.nav-link {
    color: var(--white);
    /* MODIFIED: Initially white */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
    line-height: 1.25rem;
    /* leading-normal (for text-sm) */
    text-decoration: none;
    transition: color 0.15s ease-in-out;
    /* transition-colors */
}

.active-nav-link {
    color: var(--white);
    /* MODIFIED: Initially white */
    font-weight: 700;
}

.nav-link:hover {
    color: var(--brand-orange);
}

/* Header Styles */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    padding: 1rem 2.5rem;
    /* py-4 px-10 */
    background-color: transparent;
    /* MODIFIED: Initially transparent */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 990;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* ADDED: For smooth transition */
}

.site-header.scrolled {

    /* Text and icon colors revert to normal when scrolled */
    .nav-link {
        color: var(--stone-700);
    }

    .active-nav-link {
        color: var(--brand-orange);
    }

    .logo-container {
        color: var(--stone-800);
    }

    .mobile-menu-toggle {
        color: var(--stone-800);
    }

    .logo-text {
        color: var(--stone-800);
    }

    background-color: var(--white);
}

/* Styles to force scrolled appearance when mobile menu is open at page top */
.site-header.menu-forced-scrolled {
    background-color: var(--white);
    border-bottom: 1px solid var(--stone-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.site-header.menu-forced-scrolled .nav-link {
    color: var(--stone-700);
}

.site-header.menu-forced-scrolled .active-nav-link {
    color: var(--brand-orange);
}

.site-header.menu-forced-scrolled .logo-container .logo-text {
    color: var(--stone-800);
}

.site-header.menu-forced-scrolled .mobile-menu-toggle {
    color: var(--stone-800);
}

.site-header.header-bg-synced .nav-link {
    color: var(--stone-700);
}

.site-header.header-bg-synced .active-nav-link {
    color: var(--brand-orange);
}

.site-header.header-bg-synced .logo-container .logo-text {
    color: var(--stone-800);
}

.site-header.header-bg-synced .mobile-menu-toggle {
    color: var(--stone-800);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* gap-3 */
    color: var(--white);
    /* MODIFIED: Initially white */
}

.logo-icon {
    width: 2rem;
    /* w-8 */
    height: 2rem;
    /* h-8 */
    color: var(--brand-orange);
    /* text-[#ed8b2a] */
}

.logo-text {
    color: var(--white);
    /* MODIFIED: Initially white */
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 700;
    /* font-bold */
    line-height: 1.25;
    /* leading-tight (approx for text-xl) */
    letter-spacing: -0.025em;
    /* tracking-tight (approx for text-xl) */
}

.main-nav {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
    /* gap-8 */
}

.enroll-button {
    display: flex;
    min-width: 84px;
    /* max-w-[480px] - can be omitted or set if strictly needed */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.5rem;
    /* rounded-lg */
    height: 2.5rem;
    /* h-10 */
    padding-left: 1.25rem;
    /* px-5 */
    padding-right: 1.25rem;
    /* px-5 */
    background-color: var(--brand-orange);
    color: var(--white);
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 700;
    /* font-bold */
    line-height: 1.25rem;
    /* leading-normal (for text-sm) */
    letter-spacing: 0.025em;
    /* tracking-wide */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* shadow-sm */
    transition: background-color 0.15s ease-in-out;
    /* transition-colors */
    border: none;
    text-decoration: none;
}

.enroll-button a {
    text-decoration: none;
    color: var(--white);
}

.enroll-button:hover {
    background-color: var(--brand-orange-dark);
}

/* Hero Section Styles */
.hero-section {
    position: relative;
    /* 'relative' class */
    min-height: 100vh;
    /* UPDATED - Was min-height: 560px; */
    display: flex;
    /* 'flex' class */
    flex-direction: column;
    /* ADDED - For vertical centering */
    align-items: center;
    /* 'items-center' class */
    justify-content: center;
    /* 'justify-center' class */
    text-align: center;
    /* 'text-center' class */
    background-size: cover;
    /* 'bg-cover' class */
    background-position: center;
    /* 'bg-center' class */
    background-repeat: no-repeat;
    /* 'bg-no-repeat' class */
    padding: 4rem 1rem;
    /* 'px-4 py-16' -> py-16 is 4rem, px-4 is 1rem */
    color: var(--white);
    /* text-white is applied to children, so set it here */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%), url("imgs/banner_no_text.jpg");
    background-position: 50% 25%;
    /* centro */
}

.hero-content {
    max-width: 48rem;
    /* 'max-w-3xl' */
    margin-left: auto;
    /* 'mx-auto' class */
    margin-right: auto;
    /* 'mx-auto' class */
}

.hero-title {
    /* text-white is inherited from .hero-section */
    font-size: 3rem;
    /* 'text-5xl' (5xl is 3rem) */
    font-weight: 900;
    /* 'font-black' class */
    line-height: 1;
    /* 'leading-tight' (usually 1 for large text) */
    letter-spacing: -0.05em;
    /* 'tracking-tighter' (approx for 5xl) */
    margin-bottom: 1.5rem;
    /* 'mb-6' class */
}

.hero-subtitle {
    /* text-white is inherited from .hero-section */
    font-size: 1.125rem;
    /* 'text-lg' class */
    font-weight: 400;
    /* 'font-normal' class */
    line-height: 1.625;
    /* 'leading-relaxed' (approx for text-lg) */
    margin-bottom: 2rem;
    /* 'mb-8' class */
}

.hero-button {
    display: flex;
    min-width: 84px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.5rem;
    /* rounded-lg */
    height: 3rem;
    /* h-12 */
    padding-left: 1.5rem;
    /* px-6 */
    padding-right: 1.5rem;
    /* px-6 */
    background-color: var(--brand-orange);
    color: var(--white);
    font-size: 1rem;
    /* text-base */
    font-weight: 700;
    /* font-bold */
    line-height: 1.5rem;
    /* leading-normal (for text-base) */
    letter-spacing: 0.025em;
    /* tracking-wide */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* shadow-md */
    transition: background-color 0.15s ease-in-out;
    /* transition-colors */
    border: none;
    text-decoration: none;
    margin-left: auto;
    /* mx-auto */
    margin-right: auto;
    /* mx-auto */
}

.hero-button:hover {
    background-color: var(--brand-orange-hover);
}

/* About Us Section Styles */
.about-us-section {
    padding: 4rem 1.5rem;
    /* px-6 py-16 */
    background-color: var(--white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-us-content-wrapper {
    max-width: 48rem;
    /* 'max-w-2xl' (adjust as needed) */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.about-us-title {
    font-size: 2.25rem;
    /* 'text-4xl' */
    font-weight: 800;
    /* 'font-extrabold' */
    color: var(--stone-900);
    margin-bottom: 1.5rem;
    /* 'mb-6' */
}

.about-us-text {
    font-size: 1rem;
    /* 'text-base' or 'text-lg' */
    line-height: 1.75;
    /* 'leading-relaxed' */
    color: var(--stone-700);
    margin-bottom: 1.5rem;
}

.about-us-text:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments for About Us section padding */
@media (min-width: 768px) {

    /* 'md:' prefix */
    .about-us-section {
        padding-left: 2.5rem;
        /* md:px-10 */
        padding-right: 2.5rem;
    }
}

/* Responsive adjustments for hero title and subtitle */
@media (min-width: 768px) {

    /* 'md:' prefix */
    .hero-title {
        font-size: 3.75rem;
        /* 'md:text-6xl' (6xl is 3.75rem) */
    }

    .hero-subtitle {
        font-size: 1.25rem;
        /* 'md:text-xl' */
    }
}

/* Our Programs Section Styles */
.programs-section {
    padding: 4rem 1.5rem;
    /* px-6 py-16 */
    background-color: var(--white);
    min-height: 100vh;
    /* ADDED */
    display: flex;
    /* ADDED */
    flex-direction: column;
    /* ADDED */
    justify-content: center;
    /* ADDED */
}

.programs-content-wrapper {
    max-width: 64rem;
    /* max-w-5xl */
    margin-left: auto;
    margin-right: auto;
}

.programs-header {
    text-align: center;
    margin-bottom: 3rem;
    /* mb-12 */
}

.programs-title {
    color: var(--stone-800);
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    line-height: 1.25;
    /* leading-tight */
    letter-spacing: -0.025em;
    /* tracking-tight */
    margin-bottom: 1rem;
    /* mb-4 */
}

.programs-subtitle {
    color: var(--stone-600);
    font-size: 1.125rem;
    /* text-lg */
    line-height: 1.625;
    /* leading-relaxed */
    max-width: 42rem;
    /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* grid-cols-1 */
    gap: 2rem;
    /* gap-8 */
    margin-bottom: 3rem;
    /* mb-12 */
}

.program-card {
    display: flex;
    flex-direction: column;
    /* flex-col */
    gap: 1rem;
    /* gap-4 */
    background-color: var(--stone-50);
    padding: 1.5rem;
    /* p-6 */
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    transition: box-shadow 0.3s ease-in-out;
    /* transition-shadow duration-300 */
}

.program-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* hover:shadow-xl */
}

.program-card-image {
    width: 100%;
    /* w-full */
    height: 14rem;
    /* h-56 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.5rem;
    /* rounded-lg */
}

.program-card-title {
    color: var(--stone-800);
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 600;
    /* font-semibold */
    line-height: 1.5;
    /* leading-normal */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

.program-card-description {
    color: var(--stone-600);
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 400;
    /* font-normal */
    line-height: 1.625;
    /* leading-relaxed */
}

.programs-cta-container {
    text-align: center;
}

/* Responsive adjustments */
@media (min-width: 768px) {

    /* 'md:' prefix */
    .programs-section {
        padding-left: 2.5rem;
        /* md:px-10 */
        padding-right: 2.5rem;
    }

    .programs-title {
        font-size: 3rem;
        /* md:text-5xl */
    }

    .programs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* md:grid-cols-2 */
    }
}

@media (min-width: 1024px) {

    /* 'lg:' prefix */
    .programs-section {
        padding-left: 5rem;
        /* lg:px-20 */
        padding-right: 5rem;
    }

    .programs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* lg:grid-cols-3 */
    }
}

/* Daily Schedule Section Styles */
.daily-schedule-section {
    padding: 4rem 1.5rem;
    /* px-6 py-16 */
    background-color: var(--stone-50);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.daily-schedule-content-wrapper {
    max-width: 56rem;
    /* 'max-w-3xl' or adjust as needed */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.daily-schedule-title {
    font-size: 2.25rem;
    /* 'text-4xl' */
    font-weight: 800;
    /* 'font-extrabold' */
    color: var(--stone-900);
    margin-bottom: 1rem;
    /* 'mb-4' */
}

.daily-schedule-intro {
    font-size: 1rem;
    /* 'text-base' */
    line-height: 1.75;
    /* 'leading-relaxed' */
    color: var(--stone-700);
    margin-bottom: 2rem;
    /* 'mb-8' */
    max-width: 48rem;
    /* Para que no sea demasiado ancho si el contenedor es más grande */
    margin-left: auto;
    margin-right: auto;
}

.schedule-table-container {
    overflow-x: auto;
    /* Para responsive en tablas anchas */
    margin-top: 1.5rem;
    border: 1px solid var(--stone-200);
    border-radius: 0.5rem;
    /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* shadow-md */
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    /* Para eliminar espacios entre celdas */
    text-align: left;
}

.schedule-table th,
.schedule-table td {
    padding: 0.75rem 1rem;
    /* py-3 px-4 */
    border-bottom: 1px solid var(--stone-200);
}

.schedule-table th {
    background-color: var(--stone-100);
    color: var(--stone-800);
    font-weight: 600;
    /* font-semibold */
    font-size: 0.875rem;
    /* text-sm */
}

.schedule-table td {
    color: var(--stone-700);
    font-size: 0.875rem;
    /* text-sm */
}

.schedule-table tbody tr:last-child td {
    border-bottom: none;
    /* Eliminar borde inferior de la última fila */
}

.schedule-table tbody tr:nth-child(even) {
    background-color: var(--stone-50);
    /* Rayado para las filas */
}

.schedule-table tbody tr:hover {
    background-color: var(--stone-100);
    /* Efecto hover */
}


/* Responsive adjustments for Daily Schedule section padding */
@media (min-width: 768px) {

    /* 'md:' prefix */
    .daily-schedule-section {
        padding-left: 2.5rem;
        /* md:px-10 */
        padding-right: 2.5rem;
    }
}

/* Meet Our Team Section Styles */
.team-section {
    padding: 4rem 1.5rem;
    /* px-6 py-16 */
    background-color: var(--white);
    /* bg-stone-50 */
    min-height: 100vh;
    /* ADDED */
    display: flex;
    /* ADDED */
    flex-direction: column;
    /* ADDED */
    justify-content: center;
    /* ADDED */
}

.team-description {
    font-size: 1rem;
    /* 'text-base' or 'text-lg' */
    line-height: 1.75;
    /* 'leading-relaxed' */
    color: var(--stone-700);
    margin-bottom: 1.5rem;
}

.team-content-wrapper {
    max-width: 64rem;
    /* max-w-5xl */
    margin-left: auto;
    margin-right: auto;
}

.team-title {
    color: var(--stone-800);
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    line-height: 1.25;
    /* leading-tight */
    letter-spacing: -0.025em;
    /* tracking-tight */
    text-align: center;
    /* text-center */
    margin-bottom: 3rem;
    /* mb-12 */
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    /* gap-10 */
}

.team-member-card {
    display: flex;
    flex-direction: column;
    /* flex-col */
    align-items: center;
    /* items-center */
    gap: 1rem;
    /* gap-4 */
    text-align: center;
    /* text-center */
    padding: 2rem; /* Aumentado de 1.5rem a 2rem */
    /* p-6 */
    width: 100%; /* Asegurar que ocupe el espacio disponible */
    max-width: 360px; /* Ancho máximo para la tarjeta */
    background-color: var(--white);
    /* bg-white */
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    transition: box-shadow 0.3s ease-in-out;
    /* transition-shadow duration-300 */
}

.team-member-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* hover:shadow-xl */
}

.team-member-image-wrapper {
    /* To handle border and spacing for the image */
    margin-bottom: 1rem;
    /* mb-4 */
}

.team-member-image {
    object-fit: cover; /* Ensures the image covers the area without distortion */
    aspect-ratio: 1 / 1;
    /* aspect-square */
    border-radius: 9999px;
    /* rounded-full */
    width: 10rem; /* Aumentado de 8rem a 10rem */
    /* w-32 */
    height: 10rem; /* Aumentado de 8rem a 10rem */
    /* h-32 */
    border: 4px solid var(--stone-200);
    /* border-4 border-stone-200 */
}

.team-member-name {
    color: var(--stone-800);
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    /* font-semibold */
    line-height: 1.5;
    /* leading-normal */
}

.team-member-title {
    color: var(--brand-orange);
    /* text-[#ed8b2a] */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
    line-height: 1.5;
    /* leading-normal */
}

#lina-photo {
    object-position: 25% 25%;
}

#maria-photo {
    object-position: 25% 25%;
}

#heivy-photo {
    object-position: 25% 25%;
}

/* Responsive adjustments for team section */
@media (min-width: 640px) {

    /* 'sm:' prefix */
    /* The flex container will handle wrapping, so no specific column count is needed. */
}

@media (min-width: 768px) {

    /* 'md:' prefix */
    .team-section {
        padding-left: 2.5rem;
        /* md:px-10 */
        padding-right: 2.5rem;
    }

    .team-title {
        font-size: 3rem;
        /* md:text-5xl */
    }
}

@media (min-width: 1024px) {

    /* 'lg:' prefix */
    .team-section {
        padding-left: 5rem;
        /* lg:px-20 */
        padding-right: 5rem;
    }

    /* The flex container will handle wrapping, so no specific column count is needed. */
}

/* Testimonials Section Styles */
.testimonials-section {
    padding: 4rem 1.5rem;
    /* px-6 py-16 */
    background-color: var(--white);
    /* bg-white */
    min-height: 100vh;
    /* ADDED */
    display: flex;
    /* ADDED */
    flex-direction: column;
    /* ADDED */
    justify-content: center;
    /* ADDED */
}

.testimonials-content-wrapper {
    max-width: 64rem;
    /* max-w-5xl */
    margin-left: auto;
    margin-right: auto;
}

.testimonials-main-title {
    /* Reusing team-title styling for consistency */
    color: var(--stone-800);
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    line-height: 1.25;
    /* leading-tight */
    letter-spacing: -0.025em;
    /* tracking-tight */
    text-align: center;
    /* text-center */
    margin-bottom: 3rem;
    /* mb-12 */
}


/* Gallery Collage Section Styles */
.gallery-section {
    padding: 4rem 1.5rem;
    background-color: var(--stone-50); 
    text-align: center;
}

.gallery-content-wrapper {
    max-width: 72rem; 
    margin-left: auto;
    margin-right: auto;
}

.gallery-title {
    color: var(--stone-800);
    font-size: 2.25rem; 
    font-weight: 700; 
    line-height: 1.25; 
    letter-spacing: -0.025em; 
    margin-bottom: 3rem; 
}

/* NEW: Collage Styles */
.collage-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Adjust gap as needed */
    justify-content: center; /* Center items if they don't fill the row */
    margin-top: 2rem; /* Space below the title */
}

.collage-item {
    flex-basis: calc(33.333% - 1rem); /* Example: 3 items per row, accounting for gap */
    /* Adjust flex-basis for different numbers of columns or responsive behavior */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
    overflow: hidden; /* Ensures images respect border radius */
}

.collage-item img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
    object-fit: cover; /* Cover the area, might crop */
    aspect-ratio: 1 / 1; /* Example: Square images, adjust as needed */
}

/* Responsive adjustments for Collage */
@media (max-width: 767.98px) {
    .collage-item {
        flex-basis: calc(50% - 1rem); /* 2 items per row on smaller screens */
    }
}

@media (max-width: 480px) {
    .collage-item {
        flex-basis: 100%; /* 1 item per row on very small screens */
    }
}
/* End of NEW Collage Styles */

.testimonial-card {
    background-size: cover;
    /* bg-cover */
    background-position: center;
    /* bg-center */
    display: flex;
    flex-direction: column;
    /* flex-col */
    align-items: flex-start;
    /* items-start */
    justify-content: flex-end;
    /* justify-end */
    border-radius: 0.75rem;
    /* rounded-xl */
    min-height: 350px;
    /* min-h-[350px] */
    padding: 2rem;
    /* p-8 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    /* The background-image with gradient will remain inline style */
}

.testimonial-text-content {
    max-width: 28rem;
    /* max-w-md */
}

.testimonial-title {
    color: var(--white);
    /* text-white */
    font-size: 1.875rem;
    /* text-3xl */
    font-weight: 700;
    /* font-bold */
    line-height: 1.25;
    /* leading-tight */
    margin-bottom: 0.75rem;
    /* mb-3 */
}

.testimonial-quote {
    color: var(--white);
    /* text-white */
    font-size: 1rem;
    /* text-base */
    font-weight: 500;
    /* font-medium */
    line-height: 1.625;
    /* leading-relaxed */
}

/* Responsive adjustments for testimonials section */
@media (min-width: 768px) {

    /* 'md:' prefix */
    .testimonials-section {
        padding-left: 2.5rem;
        /* md:px-10 */
        padding-right: 2.5rem;
    }

    .testimonials-main-title {
        font-size: 3rem;
        /* md:text-5xl */
    }
}

@media (min-width: 1024px) {

    /* 'lg:' prefix */
    .testimonials-section {
        padding-left: 5rem;
        /* lg:px-20 */
        padding-right: 5rem;
    }
}

/* Contact Us Section Styles */
.contact-section {
    padding: 4rem 1.5rem;
    background-color: var(--white);
    min-height: 100vh;
    /* ADDED */
    display: flex;
    /* ADDED */
    flex-direction: column;
    /* ADDED */
    justify-content: center;
    /* ADDED */
}

.contact-content-wrapper {
    max-width: 42rem;
    /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
}

.contact-title {
    /* Similar to .testimonials-main-title */
    color: var(--stone-800);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-align: center;
    margin-bottom: 3rem;
}


.contact-info-container {
    margin-top: 1.5rem; /* Add some space below the title */
    text-align: center; /* Center the contact info block */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75;
    color: var(--stone-700);
}

.contact-info-item {
    margin-bottom: 0.75rem; /* space-y-3 if items were direct children */
}

.contact-info-item strong {
    font-weight: 600; /* font-semibold */
    color: var(--stone-800);
}

.contact-label {
    font-weight: 500; /* font-medium */
    color: var(--stone-600);
    margin-right: 0.5rem;
}

.contact-info-item a {
    color: var(--brand-orange);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.contact-info-item a:hover {
    color: var(--brand-orange-dark);
    text-decoration: underline;
}

/* New styles for contact section layout */
.contact-layout-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column for mobile */
    gap: 2rem; /* Space between map and info block */
    align-items: flex-start; /* Align items to the top */
    margin-top: 2rem; /* Space below the title */
}

.map-container {
    width: 100%; /* Allow it to be responsive */
    max-width: 450px; /* Set a maximum width to control size */
    margin-left: auto; /* Center the container */
    margin-right: auto; /* Center the container */
    aspect-ratio: 1 / 1; /* Make it a square */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden; /* Ensures iframe respects border-radius */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

.contact-map { /* Styles for the iframe itself */
    width: 100%;
    height: 100%;
}

.whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    background-color: #25D366; /* WhatsApp green */
    color: var(--white);
    font-weight: 600; /* font-semibold */
    text-decoration: none;
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-top: 1.5rem; /* Space above the button */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.whatsapp-button:hover {
    background-color: #1DAE54; /* Darker WhatsApp green */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.whatsapp-icon {
    width: 1.25em; /* Adjust size as needed */
    height: 1.25em;
    margin-right: 0.5rem;
}

/* Responsive adjustments for the new grid layout */
@media (min-width: 768px) { /* md breakpoint */
    .contact-layout-grid {
        grid-template-columns: 1fr 1fr; /* Two equal columns */
    }
    .contact-info-container {
        text-align: left; /* Align text to left on larger screens */
        margin-top: 0; /* Reset margin-top if it was set for single column */
    }

    .map-container {
        margin-right: 0;
    }
}


/* Adjustments for the map iframe if needed */
.contact-content-wrapper iframe {
    width: 100%;
    max-width: 600px; /* Or your preferred max width */
    height: 350px; /* Adjust height as needed */
    border-radius: 0.5rem; /* rounded-lg */
    margin-bottom: 2rem; /* Space between map and contact info */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

/* Responsive adjustments for contact section title */
@media (min-width: 768px) {

    /* 'md:' prefix */
    .contact-section {
        /* Match padding from other sections */
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .contact-title {
        font-size: 3rem;
        /* md:text-5xl */
    }
}

@media (min-width: 1024px) {

    /* 'lg:' prefix */
    .contact-section {
        /* Match padding from other sections */
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* Footer Styles */
.site-footer {
    background-color: var(--stone-800);
    color: var(--stone-300);
    padding: 3rem 1.5rem;
    /* py-12 px-6 */
}

.footer-content-wrapper {
    max-width: 64rem;
    /* max-w-5xl */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.footer-nav-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* Tailwind gap-x-8 is 2rem, gap-y-4 is 1rem */
    /* CSS gap property: row-gap column-gap */
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
    /* mb-6 */
}

.footer-nav-link {
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 400;
    /* font-normal */
    line-height: 1.25rem;
    /* leading-normal (assuming 1.25rem for text-sm) */
    transition: color 0.2s ease-in-out;
    text-decoration: none;
    color: inherit;
    /* Inherits --stone-300 from .site-footer */
}

.footer-nav-link:hover {
    color: var(--brand-orange);
}

.footer-copyright {
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 400;
    /* font-normal */
    line-height: 1.25rem;
    /* leading-normal */
}

/* Responsive adjustments for footer padding */
@media (min-width: 768px) {

    /* 'md:' prefix */
    .site-footer {
        padding-left: 2.5rem;
        /* md:px-10 */
        padding-right: 2.5rem;
    }
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none;
    /* Hidden by default, shown in media query */
    background: none;
    border: none;
    color: var(--white);
    /* MODIFIED: Initially white for mobile menu toggle */
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
    /* Ensure it's above other header content if needed */
}

.mobile-menu-toggle .hamburger-icon {
    display: block;
    /* Default: hamburger visible */
    width: 1.5rem;
    /* 24px */
    height: 1.5rem;
    /* 24px */
}

.mobile-menu-toggle .close-icon {
    display: none;
    /* Default: close icon hidden */
    width: 1.5rem;
    /* 24px */
    height: 1.5rem;
    /* 24px */
}

/* Styles for when the mobile menu is open */
.mobile-menu-active .main-nav {
    display: flex;
}

/* Change nav link color when mobile menu is active */
.site-header.mobile-menu-active .main-nav {
    display: flex;
}

.site-header.mobile-menu-active .nav-link {
    color: var(--stone-800);
}

.mobile-menu-active .mobile-menu-toggle .hamburger-icon {
    /* When active: hamburger hidden */
    display: none;
}

.mobile-menu-active .mobile-menu-toggle .close-icon {
    /* When active: close icon shown */
    display: block;
}

/* --- Estilos para el Modal de la Galería --- */
.collage-item img {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.collage-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.modal {
    display: none; /* Cambiado a flex por JS */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /* Usar Flexbox para centrar */
    align-items: center;
    justify-content: center;
    overflow-y: auto; /* Permitir scroll vertical si la imagen es muy alta */
}

.modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 900px;
    animation-name: zoom;
    animation-duration: 0.6s;
    transition: opacity 0.3s ease-in-out;
}

/* Animación de zoom */
@keyframes zoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close-button:hover,
.close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Botones de navegación del modal */
.prev-button, .next-button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s ease;
    border-radius: 0 3px 3px 0;
    user-select: none; /* Evita que el texto se seleccione */
}

.next-button {
    right: 1rem;
    border-radius: 3px 0 0 3px;
}

.prev-button {
    left: 1rem;
}

.prev-button:hover, .next-button:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Responsive para pantallas pequeñas */
@media (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* Responsive adjustments for navigation */
@media (max-width: 767.98px) {

    /* Styles for screens smaller than 768px */
    .site-header {
        position: fixed;
        /* MODIFIED - Was relative */
        top: 0;
        /* ADDED */
        left: 0;
        /* ADDED */
        width: 100%;
        /* ADDED */
        z-index: 990;
        /* ADDED - Ensures header is above page content, below mobile menu components */
        /* Global padding: 1rem 2.5rem and background-color: var(--white) still apply */
    }

    .mobile-menu-toggle {
        display: block;
        /* Show the hamburger button */
        position: absolute;
        /* Position it relative to the header */
        top: 50%;
        right: 1.5rem;
        /* Adjust as needed */
        transform: translateY(-50%);
    }

    .main-nav {
        display: none;
        /* Hide nav by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 100%;
        /* Position below the header */
        left: 0;
        width: 100%;
        background-color: var(--white);
        /* Or your preferred mobile menu background */
        border-top: 1px solid var(--stone-200);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1rem 0;
        /* Add some padding */
        z-index: 1000;
        /* Ensure it's above other content */
    }

    .main-nav .nav-link,
    .main-nav .enroll-button {
        width: 100%;
        text-align: left;
        padding: 0.75rem 1.5rem;
        /* Adjust padding for mobile links */
        border-bottom: 1px solid var(--stone-100);
        /* Separator for links */
    }

    .main-nav .nav-link:last-of-type {
        /* Remove border from last link if enroll button is next */
        border-bottom: none;
    }

    .main-nav .enroll-button {
        margin: 0.5rem 1.5rem;
        /* Adjust margin for mobile button */
        width: auto;
        /* Allow button to size to content + padding */
        justify-content: center;
        /* Center text in button */
    }
}