/* ============================================
   MARKET IA RETAIL — RESPONSIVE V4
   First Mobile · Tablets · Desktop
   ============================================ */

/* ============================================
   MOBILE FIRST (hasta 767px)
   ============================================ */

@media (max-width: 360px) {
    .hero__title {
        font-size: 1.75rem;
    }
    
    .btn--large {
        padding: 0.7rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .business-desk__options {
        grid-template-columns: 1fr 1fr;
    }
    
    .manufacturing__grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .markets__grid {
        grid-template-columns: 1fr;
    }
    
    .subnav-item {
        font-size: 0.55rem;
        padding: 0.2rem 0.5rem;
    }
    
    .subnav__label {
        font-size: 0.5rem;
    }
    
    .main-nav__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .header {
        height: 56px;
    }
    
    .header__logo img {
        height: 48px;
    }
    
    .header__cta {
        display: none;
    }
    
    .hero {
        min-height: 96vh;
        padding: 4.5rem 0 0.5rem;
    }
    
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero__actions .btn {
        justify-content: center;
        width: 100%;
    }
    
    .hero__scroll {
        display: none;
    }
    
    .hero__subnav {
        padding: 0.75rem 0 0;
        margin-top: 0.25rem;
    }
    
    .hero__subnav-inner {
        gap: 0.2rem 0.4rem;
    }
    
    .subnav-item {
        padding: 0.2rem 0.5rem;
        font-size: 0.55rem;
        border-radius: 50px;
    }
    
    .subnav__icon {
        font-size: 0.6rem;
    }
    
    .subnav__label {
        font-size: 0.5rem;
    }
    
    .positioning__pillars {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .pillar {
        padding: 1rem;
    }
    
    .markets__grid {
        grid-template-columns: 1fr;
    }
    
    .manufacturing__grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .manufacturing__flow {
        flex-direction: column;
        gap: 0.1rem;
        padding: 0.75rem;
    }
    
    .flow__arrow {
        transform: rotate(90deg);
    }
    
    .sourcing__timeline {
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem;
    }
    
    .commerce__grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .ai-section__grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .advisory__grid {
        grid-template-columns: 1fr;
    }
    
    .business-model__sequence {
        grid-template-columns: 1fr 1fr;
    }
    
    .business-desk__options {
        grid-template-columns: 1fr 1fr;
    }
    
    .company-presence__inner {
        text-align: center;
    }
    
    .company-presence__text {
        margin-left: auto;
        margin-right: auto;
    }
    
    .company-presence__address {
        margin-left: auto;
        margin-right: auto;
    }
    
    .final-cta__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .final-cta__actions .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    
    .whatsapp-float {
        width: 48px;
        height: 48px;
        bottom: 1rem;
        right: 1rem;
    }
    
    .whatsapp-float svg {
        width: 24px;
        height: 24px;
    }
    
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 1rem;
    }
    
    .footer__col--brand {
        grid-column: 1 / -1;
    }
    
    .footer__legal {
        text-align: center;
    }
    
    .footer__legal nav {
        justify-content: center;
    }
    
    .footer__credit {
        flex-direction: column;
        gap: 0.2rem;
        text-align: center;
    }
    
    /* Menú móvil */
    .main-nav__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .main-nav__sublist.open {
        max-height: 800px;
    }
    
    .main-nav__group {
        padding-left: 0.5rem;
    }
    
    .main-nav__group a {
        font-size: 0.8125rem;
        padding: 0.25rem 0;
    }
    
    .main-nav__label {
        font-size: 0.5rem;
    }
    
    .main-nav__info {
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
        text-align: center;
    }
}

/* ============================================
   TABLETS (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-nav__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .markets__grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .manufacturing__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .commerce__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ai-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .advisory__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .business-desk__options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    
    .footer__col--brand {
        grid-column: 1 / -1;
    }
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */
@media (min-width: 1024px) {
    .main-nav__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .main-nav__inner {
        padding: 2rem;
    }
}

/* ============================================
   PREFERS REDUCED 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 !important;
        transform: none !important;
    }
    
    .hero__scroll {
        animation: none !important;
    }
    
    .globe-placeholder::before {
        animation: none !important;
    }
    
    .btn:hover {
        transform: none !important;
    }
    
    .market-card:hover {
        transform: none !important;
    }
    
    .btn--glow {
        animation: none !important;
    }
    
    .ai-card__icon {
        animation: none !important;
    }
    
    .hero__bg-image {
        transition: none !important;
    }
    
    .market-card__icon-glow {
        animation: none !important;
    }
    
    .btn--primary .btn__shine {
        display: none !important;
    }
}

/* ============================================
   SAFE AREA INSETS (iOS)
   ============================================ */
@supports (padding: max(0px)) {
    .whatsapp-float {
        bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
        right: max(1.5rem, env(safe-area-inset-right, 1.5rem));
    }
    
    .header {
        padding-left: max(var(--container-padding), env(safe-area-inset-left));
        padding-right: max(var(--container-padding), env(safe-area-inset-right));
    }
}

/* ============================================
   IMPRESIÓN
   ============================================ */
@media print {
    .header,
    .hero__subnav,
    .whatsapp-float,
    .hero__scroll,
    .footer__credit,
    .main-nav,
    .main-nav__overlay {
        display: none !important;
    }
    
    .hero {
        min-height: 40vh !important;
        padding: 3rem 0 !important;
    }
    
    .hero__bg-image {
        filter: brightness(0.8) !important;
    }
    
    .positioning--light,
    .manufacturing--light,
    .commerce--light,
    .advisory--light,
    .business-desk--light,
    .company-presence--light {
        background: #fff !important;
        border: none !important;
    }
    
    .section-title--dark,
    .pillar__title--dark,
    .manuf-card__title--dark,
    .commerce-card__title--dark,
    .advisory-card__title--dark {
        color: #000 !important;
    }
    
    .section-desc--dark,
    .pillar__desc--dark,
    .manuf-card__desc--dark,
    .commerce-card__desc--dark,
    .advisory-card__desc--dark {
        color: #444 !important;
    }
}