/* ====== MEJORAS RESPONSIVE PARA HOME ====== */

/* Tablets y dispositivos medianos (768px - 1024px) */
@media (max-width: 1024px) {
    .info-inicio {
        max-width: 95%;
        padding: 30px;
        gap: 30px;
    }
    
    .texto-inicio {
        width: 100%;
    }
    
    .boton-seccions {
        width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .inicio-zona1 {
        max-width: 90%;
        padding: 30px;
    }
    
    .cta-cajas {
        flex-direction: column;
        gap: 20px;
    }
    
    .cta-caja {
        max-width: 100%;
    }
}

/* Móviles grandes (481px - 768px) */
@media (max-width: 768px) {
    .carousel-container {
        aspect-ratio: 16 / 9;
        max-width: 95%;
    }
    
    .slide {
        background-size: contain;
    }
    
    .info-inicio {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
        gap: 25px;
    }
    
    .texto-inicio,
    .boton-seccions {
        width: 100%;
        margin-left: 0;
    }
    
    .info-inicio h1 {
        font-size: clamp(24px, 6vw, 35px);
        text-align: center;
    }
    
    .descripcion {
        font-size: clamp(16px, 4vw, 20px);
        text-align: center;
    }
    
    .inicio-login-btn {
        font-size: clamp(18px, 4vw, 24px);
        padding: 10px 20px;
        display: block;
        text-align: center;
        margin: 15px auto;
    }
    
    .boton-seccions {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .boton-mentorias, 
    .boton-comunidad, 
    .boton-marketplace, 
    .boton-freelancers {
        font-size: clamp(16px, 4vw, 20px);
        padding: 18px 15px;
    }
    
    .inicio-zona1 {
        max-width: 95%;
        padding: 25px 20px;
    }
    
    .inicio-zona1 h2 {
        font-size: clamp(24px, 6vw, 32px);
    }
    
    .inicio-zona1 p {
        font-size: clamp(14px, 3.5vw, 18px);
    }
    
    .contenedor-de-tarjetas {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .tarjeta1, .tarjeta2, .tarjeta3, .tarjeta4 {
        margin-bottom: 0;
    }
    
    .cta-final-seccion {
        padding: 50px 20px;
    }
    
    .cta-final-seccion h2 {
        font-size: clamp(28px, 7vw, 42px);
    }
    
    .cta-cajas {
        flex-direction: column;
        gap: 20px;
    }
    
    .cta-caja {
        max-width: 100%;
        padding: 25px;
    }
    
    /* Mentorías responsive */
    .mentorias-hero h1 {
        font-size: clamp(32px, 8vw, 48px);
    }
    
    .mentorias-hero h2 {
        font-size: clamp(16px, 4vw, 22px);
    }
    
    .mentorias-busqueda {
        flex-direction: column;
        width: 95%;
        padding: 15px;
        gap: 12px;
    }
    
    .busqueda-input,
    .busqueda-filtro,
    .busqueda-area {
        width: 100%;
        font-size: 16px;
    }
    
    .mentorias-categorias {
        gap: 10px;
        padding: 0 10px;
    }
    
    .categoria {
        padding: 8px 16px;
        font-size: 15px;
    }
    
    .categoria .texto {
        display: none;
    }
    
    .categoria .emoji {
        font-size: 20px;
        padding-right: 0;
    }
}

/* Móviles pequeños (320px - 480px) */
@media (max-width: 480px) {
    .carousel-container {
        aspect-ratio: 4 / 3;
        margin: 15px auto;
    }
    
    .info-inicio {
        padding: 20px 15px;
        gap: 20px;
    }
    
    .info-inicio h1 {
        font-size: 22px;
        line-height: 1.2;
    }
    
    .descripcion {
        font-size: 15px;
        line-height: 1.4;
    }
    
    .inicio-login-btn {
        font-size: 18px;
        padding: 10px 18px;
    }
    
    .boton-mentorias, 
    .boton-comunidad, 
    .boton-marketplace, 
    .boton-freelancers {
        font-size: 15px;
        padding: 15px 12px;
    }
    
    .inicio-zona1 {
        padding: 20px 15px;
    }
    
    .inicio-zona1 h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .inicio-zona1 p {
        font-size: 14px;
        margin-bottom: 30px;
    }
    
    .tarjeta1 h3, .tarjeta2 h3, .tarjeta3 h3 {
        font-size: 18px;
    }
    
    .tarjeta1 p, .tarjeta2 p, .tarjeta3 p {
        font-size: 14px;
    }
    
    .cta-final-seccion {
        padding: 40px 15px;
    }
    
    .cta-final-seccion h2 {
        font-size: 26px;
        margin-bottom: 30px;
    }
    
    .cta-caja {
        padding: 20px;
    }
    
    .cta-caja h3 {
        font-size: 20px;
    }
    
    .cta-caja p {
        font-size: 15px;
    }
    
    .btn-cta {
        padding: 12px 24px;
        font-size: 15px;
    }
}

/* Mejoras para imágenes responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Mejoras para el carrusel en móviles */
@media (max-width: 768px) {
    .carousel-arrow {
        width: 20%;
        font-size: 1.5rem;
    }
    
    .carousel-dots {
        bottom: 2%;
        gap: 8px;
    }
    
    .dot {
        width: 8px;
        height: 8px;
    }
}

/* Optimización de fuentes para móviles */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    
    h1 {
        line-height: 1.2;
    }
    
    h2 {
        line-height: 1.3;
    }
    
    p {
        line-height: 1.6;
    }
}

/* Mejoras de espaciado para móviles */
@media (max-width: 768px) {
    .contenido-seccion {
        padding-bottom: 80px; /* Espacio para la navegación inferior */
    }
}

/* Mejoras para la navegación inferior móvil */
@media (max-width: 768px) {
    .nav-bottom {
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .nav-bottom-link {
        flex-direction: column;
        gap: 4px;
        padding: 6px 10px;
    }
    
    .nav-bottom-link img {
        width: 24px;
        height: 24px;
    }
    
    .nav-bottom-link span {
        font-size: 11px;
    }
}