/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================ */

/* Tablets y pantallas medianas (1024px y menos) */
@media (max-width: 1024px) {
    .navbar .container {
        padding: 1rem 1.5rem;
    }

    .navbar-menu {
        gap: 0.75rem;
    }

    .nav-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    .brand-text {
        font-size: 1.2rem;
    }

    .btn-access {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .libros-content,
    .revista-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .libros-features {
        grid-template-columns: 1fr;
    }
}

/* Móviles (768px y menos) */
@media (max-width: 768px) {

    /* Navbar móvil */
    .navbar .container {
        padding: 0.75rem 1rem;
        flex-wrap: nowrap;
    }

    .navbar-brand {
        gap: 0.5rem;
    }

    .navbar-brand img,
    .navbar-brand .logo {
        height: 32px;
        width: 32px;
    }

    .brand-text {
        font-size: 1rem;
    }

    .navbar-menu {
        gap: 0.4rem;
        flex-wrap: nowrap;
    }

    .nav-link {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }

    .nav-link i {
        font-size: 0.85rem;
    }

    .navbar-actions {
        gap: 0.5rem;
    }

    .theme-toggle {
        padding: 0.4rem;
        font-size: 0.9rem;
    }

    .btn-access {
        padding: 0.4rem 0.7rem;
        font-size: 0.7rem;
        gap: 0.3rem;
    }

    .btn-access i {
        font-size: 0.8rem;
    }

    /* Hero móvil */
    .hero {
        padding: 8rem 0 4rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Secciones móvil */
    .section-title {
        font-size: 1.75rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .revista-content,
    .libros-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .libros-features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .libros-subtitle,
    .revista-subtitle {
        font-size: 1.2rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Botones móvil */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .libros-cta,
    .revista-cta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .libros-cta .btn,
    .revista-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Móviles pequeños (480px y menos) */
@media (max-width: 480px) {

    /* Navbar muy compacto */
    .navbar .container {
        padding: 0.5rem 0.75rem;
    }

    .navbar-brand {
        gap: 0.4rem;
    }

    .navbar-brand img,
    .navbar-brand .logo {
        height: 28px;
        width: 28px;
    }

    .brand-text {
        font-size: 0.85rem;
    }

    .navbar-menu {
        gap: 0.2rem;
    }

    .nav-link {
        padding: 0.25rem 0.35rem;
        font-size: 0.65rem;
    }

    .nav-link i {
        font-size: 0.75rem;
    }

    .theme-toggle {
        padding: 0.3rem;
        font-size: 0.8rem;
    }

    .btn-access {
        padding: 0.3rem 0.5rem;
        font-size: 0.6rem;
    }

    .btn-access i {
        font-size: 0.7rem;
    }

    /* Hero muy pequeño */
    .hero {
        padding: 7rem 0 3rem;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    /* Secciones muy pequeñas */
    .section-title {
        font-size: 1.5rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    .libros-subtitle,
    .revista-subtitle {
        font-size: 1rem;
    }

    .libros-description,
    .revista-description {
        font-size: 0.95rem;
    }

    .libros-features .feature-item {
        padding: 1rem;
    }

    .libros-features .feature-item i {
        font-size: 1.2rem;
    }

    .libros-features .feature-item strong {
        font-size: 0.9rem;
    }

    .libros-features .feature-item p {
        font-size: 0.8rem;
    }

    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }

    /* Formulario móvil */
    .contact-form {
        padding: 1.5rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 0.9rem;
    }
}

/* Móviles extra pequeños (360px y menos) */
@media (max-width: 360px) {
    .navbar .container {
        padding: 0.4rem 0.5rem;
    }

    .brand-text {
        font-size: 0.75rem;
    }

    .nav-link {
        padding: 0.2rem 0.25rem;
        font-size: 0.6rem;
    }

    .nav-link i {
        display: none;
        /* Ocultar iconos en pantallas muy pequeñas */
    }

    .btn-access {
        padding: 0.25rem 0.4rem;
        font-size: 0.55rem;
    }

    .btn-access i {
        display: none;
    }
}