/* ====================================================
   OnMedia — Responsive Stylesheet
   Breakpoints: 1200 / 960 / 640 / 420
   ==================================================== */

/* =====================
   Large Desktop (≤1400px)
   ===================== */
@media (max-width: 1400px) {
    .tech-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =====================
   Desktop (≤1200px)
   ===================== */
@media (max-width: 1200px) {
    :root {
        --section-padding: 90px;
    }

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

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

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

    .footer-brand {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    .footer-tagline {
        margin-top: 0;
    }

    /* Hide custom cursor on low-res displays */
    .cursor-dot,
    .cursor-ring {
        display: none;
    }

    body {
        cursor: auto;
    }
}

/* =====================
   Tablet (≤960px)
   ===================== */
@media (max-width: 960px) {
    :root {
        --section-padding: 72px;
        --nav-height: 64px;
    }

    /* Nav: mobile drawer */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        bottom: 0;
        width: 280px;
        background: rgba(12, 12, 12, 0.97);
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
        border-left: 1px solid var(--border-strong);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 40px;
        gap: 36px;
        z-index: 1000;
        transition: right 0.4s var(--ease-out-expo);
    }

    .nav-links.open {
        right: 0;
    }

    .nav-link {
        font-size: 1rem;
        letter-spacing: 0.05em;
    }

    .hamburger {
        display: flex;
    }

    /* Grid lines on mobile are noisy */
    .grid-lines {
        display: none;
    }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .about-image-wrap img {
        height: 380px;
    }

    .image-badge {
        left: -12px;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
}

/* =====================
   Mobile (≤640px)
   ===================== */
@media (max-width: 640px) {
    :root {
        --section-padding: 56px;
        --nav-height: 60px;
    }

    .container {
        padding: 0 20px;
    }

    .nav-container {
        padding: 0 20px;
    }

    /* Hero */
    .hero-content {
        padding: 0 20px;
    }

    .hero-desc br {
        display: none;
    }

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

    .hero-actions .btn {
        justify-content: center;
    }

    .hero-scroll {
        display: none;
    }

    /* Section titles smaller */
    .section-title {
        font-size: 2rem;
    }

    /* About */
    .about-image-wrap img {
        height: 280px;
    }

    .image-badge {
        left: 12px;
        top: auto;
        bottom: -18px;
    }

    .stats-row {
        flex-wrap: wrap;
        gap: 28px;
    }

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

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .service-card {
        padding: 30px 24px;
    }

    /* Tech */
    .tech-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .tech-item {
        padding: 22px 10px;
    }

    .tech-item i {
        font-size: 1.6rem;
    }

    /* Contact */
    .form-row {
        grid-template-columns: 1fr;
    }

    .btn-submit {
        width: 100%;
        justify-content: center;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* =====================
   Small Mobile (≤420px)
   ===================== */
@media (max-width: 420px) {
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .section-title {
        font-size: 1.75rem;
    }

    .service-card {
        padding: 24px 20px;
    }
}

/* =====================
   FAQ Section
   ===================== */
@media (max-width: 900px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================
   Featured Service Sections
   ===================== */
@media (max-width: 1100px) {
    .sf-grid {
        gap: 52px;
    }

    .sf-img-main img {
        height: 380px;
    }

    .sf-mosaic {
        height: 420px;
    }
}

@media (max-width: 960px) {
    .sf-grid,
    .sf-grid--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 48px;
    }

    /* Image stack comes first on mobile for web section */
    .sf-grid .sf-visual { order: -1; }

    .sf-images {
        padding-bottom: 50px;
        padding-right: 40px;
    }

    .sf-img-main img {
        height: 300px;
    }

    .sf-img-float {
        width: 48%;
    }

    .sf-mosaic {
        height: 320px;
    }

    .sf-desc {
        max-width: 100%;
    }

    /* Other services */
    .os-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .sf-images {
        padding-bottom: 44px;
        padding-right: 32px;
    }

    .sf-img-main img {
        height: 240px;
    }

    .sf-img-float {
        width: 52%;
        bottom: 0;
        right: 0;
    }

    .sf-img-float img {
        height: 130px;
    }

    .sf-mosaic {
        height: 260px;
        gap: 8px;
    }

    .sf-badge {
        top: 16px;
        right: 6px;
        padding: 8px 12px;
        font-size: 0.72rem;
    }
}

/* =====================
   Parallax (mobile override)
   ===================== */
@media (max-width: 960px) {
    /* En móvil la imagen queda fija centrada, sin efecto JS */
    .parallax-bg {
        inset: 0;
        background-attachment: scroll;
    }

    .parallax-content {
        padding: 80px 0;
    }

    .parallax-stats {
        gap: 32px;
    }

    .p-stat-divider {
        height: 44px;
    }

    .p-stat-number {
        font-size: 2.4rem;
    }
}

@media (max-width: 640px) {
    .parallax-break {
        min-height: auto;
    }

    .parallax-desc br {
        display: none;
    }

    .p-stat-divider {
        display: none;
    }

    .parallax-stats {
        gap: 36px;
    }
}

/* =====================
   Accessibility: reduce motion
   ===================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}