/*==============================================================================
    RyC SOLUCIONES INFORMÁTICAS
    responsive.css — Adaptaciones responsivas
    ---------------------------------------------------------------------------
    Responsabilidad de este archivo:
    - Ajustes por breakpoint
    - Reordenamiento de layout
    - Navegación móvil
    - Tipografía y espaciado adaptativos

    No contiene animaciones ni estilos base de componentes.
==============================================================================*/


/*==============================================================================
    1. PANTALLAS GRANDES — 1600px
==============================================================================*/

@media (max-width: 1600px) {
    .container {
        width: min(92%, 1320px);
    }

    .hero-visual,
    #three-container {
        min-height: 560px;
        height: 560px;
    }
}


/*==============================================================================
    2. ESCRITORIO — 1400px
==============================================================================*/

@media (max-width: 1400px) {
    :root {
        --space-8: 6rem;
    }

    .container {
        width: min(92%, 1220px);
    }

    .nav-menu {
        gap: 1.45rem;
    }

    .hero-grid {
        gap: 4rem;
    }

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

    .tech-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/*==============================================================================
    3. NOTEBOOKS — 1200px
==============================================================================*/

@media (max-width: 1200px) {
    :root {
        --space-7: 4rem;
        --space-8: 5.5rem;
    }

    .container {
        width: min(92%, 1080px);
    }

    .nav-menu {
        gap: 1.1rem;
    }

    .nav-menu a {
        font-size: 0.9rem;
    }

    .nav-buttons .btn {
        padding-inline: 1.25rem;
    }

    .hero-grid {
        grid-template-columns: 1fr 0.85fr;
        gap: 3rem;
    }

    .hero-visual,
    #three-container {
        min-height: 500px;
        height: 500px;
    }

    .service-grid,
    .products-grid,
    .ia-grid,
    .benefits-grid,
    .cases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2.5rem;
    }

    .timeline::before {
        display: none;
    }

    .testimonial-card {
        flex-basis: calc(50% - 0.75rem);
    }

    .footer-grid {
        grid-template-columns: 1.6fr repeat(3, 1fr);
        gap: 2rem;
    }
}


/*==============================================================================
    4. TABLETS HORIZONTALES — 992px
==============================================================================*/

@media (max-width: 992px) {
    html {
        scroll-padding-top: 82px;
    }

    section {
        padding-block: 5rem;
    }

    .navbar {
        min-height: 78px;
    }

    .logo img {
        width: 160px;
    }

    .nav-menu,
    .nav-buttons {
        display: none;
    }

    .mobile-menu {
        display: grid;
        place-items: center;
    }

    .nav-menu.active {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem 4%;
        border-bottom: 1px solid var(--color-border);
        background: rgba(5, 8, 22, 0.98);
        box-shadow: var(--shadow-sm);
    }

    .nav-menu.active li {
        width: 100%;
    }

    .nav-menu.active a {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    .nav-menu.active li:last-child a {
        border-bottom: 0;
    }

    .nav-menu.active a::after {
        display: none;
    }

    #hero {
        min-height: auto;
        padding-top: 130px;
        padding-bottom: 5rem;
    }

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

    .hero-content {
        max-width: 860px;
        text-align: center;
        margin-inline: auto;
    }

    .hero-content > p {
        margin-inline: auto;
    }

    .hero-buttons,
    .hero-badges {
        justify-content: center;
    }

    .hero-visual,
    #three-container {
        min-height: 460px;
        height: 460px;
    }

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

    .business-card {
        padding: 3rem;
    }

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

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

    .contact-info {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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


/*==============================================================================
    5. TABLETS VERTICALES — 768px
==============================================================================*/

@media (max-width: 768px) {
    :root {
        --space-6: 2.5rem;
        --space-7: 3.5rem;
        --space-8: 4.5rem;
    }

    .container {
        width: min(92%, 680px);
    }

    section {
        padding-block: 4.5rem;
    }

    .section-header {
        margin-bottom: 3rem;
    }

    .section-header p,
    .business-header p,
    .cta-box p {
        font-size: 1rem;
    }

    .hero-tag {
        font-size: 0.8rem;
    }

    .hero-content h1 {
        font-size: clamp(2.8rem, 10vw, 4.2rem);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-badges {
        gap: 0.7rem;
    }

    .hero-badges span {
        width: 100%;
        justify-content: center;
    }

    .hero-visual,
    #three-container {
        min-height: 390px;
        height: 390px;
    }

    .stats-grid,
    .service-grid,
    .products-grid,
    .ia-grid,
    .benefits-grid,
    .cases-grid,
    .timeline,
    .tech-grid,
    .contact-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-card {
        padding: 1.8rem 1rem;
    }

    .business-card {
        padding: 2.4rem;
    }

    .testimonial-card {
        flex-basis: 100%;
    }

    .contact-form {
        padding: 2rem;
    }

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

    .cta-box {
        padding: 3.5rem 2rem;
    }
}


/*==============================================================================
    6. MÓVILES GRANDES — 576px
==============================================================================*/

@media (max-width: 576px) {
    :root {
        --space-5: 1.6rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 4rem;

        --radius-lg: 1.2rem;
        --radius-xl: 1.5rem;
    }

    body {
        font-size: 0.97rem;
    }

    .container {
        width: min(92%, 520px);
    }

    section {
        padding-block: 4rem;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }

    .section-subtitle {
        font-size: 0.72rem;
        letter-spacing: 0.1em;
    }

    .logo img {
        width: 145px;
    }

    #hero {
        padding-top: 115px;
    }

    .hero-content h1 {
        font-size: clamp(2.45rem, 12vw, 3.6rem);
    }

    .hero-content > p {
        font-size: 1rem;
    }

    .hero-visual,
    #three-container {
        min-height: 320px;
        height: 320px;
        border-radius: 1.25rem;
    }

    .stats-grid,
    .service-grid,
    .products-grid,
    .ia-grid,
    .benefits-grid,
    .cases-grid,
    .timeline,
    .tech-grid,
    .contact-info,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .glass-card,
    .service-item,
    .product-card,
    .contact-form {
        padding: 1.7rem;
    }

    .business-card {
        padding: 2rem 1.5rem;
    }

    .timeline-item {
        padding: 0.5rem;
    }

    .timeline-icon {
        width: 68px;
        height: 68px;
    }

    .tech-item {
        min-height: 84px;
    }

    .testimonial-card {
        min-height: auto;
        padding: 1.8rem;
    }

    .faq-question {
        padding: 1.3rem 1.2rem;
    }

    .faq-answer p {
        padding: 0 1.2rem 1.3rem;
    }

    .cta-box {
        padding: 3rem 1.5rem;
    }

    .contact-card {
        align-items: flex-start;
    }

    .contact-form button {
        width: 100%;
    }

    footer {
        padding-top: 4rem;
    }

    .footer-grid {
        gap: 2.2rem;
    }

    .whatsapp,
    .back-top {
        right: 1rem;
    }

    .whatsapp {
        bottom: 1rem;
        width: 56px;
        height: 56px;
    }

    .back-top {
        bottom: 5.7rem;
        width: 46px;
        height: 46px;
    }
}


/*==============================================================================
    7. MÓVILES MEDIANOS — 430px
==============================================================================*/

@media (max-width: 430px) {
    .container {
        width: min(92%, 400px);
    }

    .navbar {
        min-height: 72px;
    }

    .mobile-menu {
        width: 42px;
        height: 42px;
    }

    .hero-content h1 {
        font-size: clamp(2.3rem, 13vw, 3.2rem);
    }

    .hero-tag {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-visual,
    #three-container {
        min-height: 280px;
        height: 280px;
    }

    .stat-card span {
        font-size: 2.35rem;
    }

    .glass-card i,
    .service-item i,
    .contact-card i {
        width: 52px;
        height: 52px;
    }

    .business-badge {
        font-size: 0.7rem;
    }

    .slider-btn {
        width: 46px;
        height: 46px;
    }
}


/*==============================================================================
    8. MÓVILES PEQUEÑOS — 375px
==============================================================================*/

@media (max-width: 375px) {
    .container {
        width: 90%;
    }

    .logo img {
        width: 132px;
    }

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

    .hero-content > p {
        font-size: 0.95rem;
    }

    .btn {
        min-height: 48px;
        padding-inline: 1.2rem;
        font-size: 0.92rem;
    }

    .hero-visual,
    #three-container {
        min-height: 250px;
        height: 250px;
    }

    .business-card,
    .glass-card,
    .service-item,
    .product-card,
    .testimonial-card,
    .contact-form {
        padding: 1.4rem;
    }

    .contact-card {
        padding: 1.2rem;
    }

    .faq-question h3 {
        font-size: 1rem;
    }

    .cta-box {
        padding: 2.5rem 1.25rem;
    }

    .whatsapp {
        width: 52px;
        height: 52px;
        font-size: 1.45rem;
    }

    .back-top {
        bottom: 5.2rem;
        width: 44px;
        height: 44px;
    }
}


/*==============================================================================
    9. ORIENTACIÓN HORIZONTAL EN MÓVILES
==============================================================================*/

@media (max-height: 520px) and (orientation: landscape) {
    #hero {
        min-height: auto;
        padding-top: 110px;
    }

    .hero-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 2rem;
    }

    .hero-content {
        text-align: left;
    }

    .hero-content > p {
        margin-inline: 0;
    }

    .hero-buttons,
    .hero-badges {
        justify-content: flex-start;
    }

    .hero-visual,
    #three-container {
        min-height: 280px;
        height: 280px;
    }
}


/*==============================================================================
    FIN DE RESPONSIVE.CSS
==============================================================================*/