/* Media Queries para diseño responsivo */
@media (max-width: 768px) {
    .header, .footer {
        padding: 1rem 2rem;
    }
    .hero-section {
        padding: 6rem 1rem;
    }
    .hero-section h1 {
        font-size: 3rem;
    }
    .hero-buttons {
        flex-direction: column;
    }
    .features-section {
        flex-direction: column;
        align-items: center;
    }
    .feature-card {
        margin-bottom: 1.5rem;
    }
    .header-pages {
        flex-direction: column;
        text-align: center;
    }
    .header-pages .nav a {
        margin: 0 0.5rem;
    }
    .schedule-interface {
        flex-direction: column;
    }
    .hero-main-content {
        flex-direction: column;
        padding: 1rem;
    }
    .role-card-container {
        max-width: 100%;
        margin-bottom: 1rem;
    }
}

/* Media Query para iPhone 13 mini (375px wide viewport) */
@media (max-width: 375px) {
    body {
        font-size: 14px;
    }
    .header, .footer, .main-content {
        padding: 1rem;
    }
    .header-pages {
        flex-direction: column;
        padding: 1rem;
    }
    .header-pages .nav a {
        margin: 0.5rem 0;
    }
    .hero-section h1 {
        font-size: 2.5rem;
    }
    .hero-main-content {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    .role-card-container {
        padding: 1.5rem;
    }
    .role-card p {
        font-size: 1rem;
    }
    .btn, .btn-alumno, .btn-educador, .btn-view-profile, .btn-find-teacher {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    .features-section {
        padding: 2rem 1rem;
        gap: 1rem;
    }
    .feature-card {
        padding: 1.5rem;
    }
    .teachers-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .payment-form, .educator-form-card, .educator-setup-card {
        padding: 1rem;
    }
    .form-field input, .educator-form input, .class-form input {
        padding: 0.6rem;
    }
    .creator-bio {
        padding: 1rem;
    }
    .creator-photo-container {
        width: 150px;
        height: 150px;
    }
}

/* Media Query para dispositivos con anchos de hasta 400px */
@media (max-width: 400px) {
    body {
        font-size: 14px;
    }
    .header-pages {
        padding: 1rem;
    }
    .header-pages .nav a {
        font-size: 1rem;
        margin: 0.5rem 0;
    }
    .hero-section h1 {
        font-size: 2rem;
    }
    .hero-main-content {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    .role-card-container {
        max-width: 100%;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    .logoimagen {
        width: 200px;
        height: 200px;
        min-width: unset;
    }
    .features-section {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .feature-card {
        padding: 1.5rem;
        max-width: 100%;
    }
    .teachers-grid {
        grid-template-columns: 1fr;
    }
    .teacher-card {
        padding: 1rem;
    }
    .payment-form, 
    .educator-form-card, 
    .educator-setup-card, 
    .educator-confirmation-card,
    .contact-section,
    .faq-section {
        padding: 1rem;
    }
    .schedule-interface {
        flex-direction: column;
        gap: 1.5rem;
    }
    .creator-photo-container {
        width: 150px;
        height: 150px;
    }
}

/* Media Queries para diseño responsivo (Optimizado) */
@media (max-width: 768px) {
    .header, .footer, .hero-section {
        padding: 1rem 2rem;
    }
    .hero-section h1 {
        font-size: 3rem;
    }
    .hero-main-content {
        flex-direction: column;
        padding: 1rem;
        gap: 2rem;
    }
    .role-card-container {
        max-width: 100%;
        margin-bottom: 1rem;
    }
    .features-section {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 2rem 1rem;
    }
    .feature-card {
        max-width: 100%;
    }
    .header-pages {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    .header-pages .nav a {
        margin: 0.5rem 0.5rem;
        font-size: 1.1rem;
    }
    .schedule-interface {
        flex-direction: column;
    }
    .logoimagen {
        min-width: unset;
        width: 100%;
        max-width: 250px;
        height: auto;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    h1 {
        font-size: 2rem;
    }
    .header-pages .nav a {
        display: block;
        margin: 0.5rem 0;
    }
    .hero-main-content {
        padding: 1rem;
        flex-direction: column;
        gap: 1.5rem;
    }
    .role-card-container {
        padding: 1rem;
    }
    .role-card p {
        font-size: 0.9rem;
    }
    .features-section {
        padding: 1rem;
    }
    .teachers-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .teacher-card {
        padding: 1rem;
    }
    .payment-form, 
    .educator-form-card, 
    .educator-setup-card, 
    .educator-confirmation-card,
    .contact-section,
    .faq-section {
        padding: 1rem;
    }
    .logoimagen {
        width: 250px;
        height: 250px;
        min-width: unset;
    }
}