/* ==================== RESPONSIVE OPTIMIZATIONS - MOBILE FIRST ==================== */
/* By LYNDA - Marzo 2026 */

/* ==================== BASE MOBILE (320px+) ==================== */

/* Reset de estilos inline problemáticos */
@media (max-width: 767px) {
    /* CRÍTICO: Prevenir scroll horizontal global */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    body {
        width: 100vw !important;
    }

    /* Asegurar que todos los contenedores respeten el viewport */
    * {
        max-width: 100vw !important;
    }

    /* Forzar grids a 1 columna */
    .grid-premium,
    .grid-premium[style*="1fr 1fr"],
    .grid-premium[style*="repeat"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Forzar divs inline con grid de 2 columnas a 1 columna */
    div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"],
    div[style*="display: grid"][style*="grid-template-columns: 1.2fr"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(400px"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(320px"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Prevenir overflow horizontal en contenedores */
    .section-premium,
    .container-premium {
        overflow-x: hidden !important;
    }

    /* Forzar tablas responsive */
    table[style*="width: 100%"] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table th,
    table td {
        white-space: nowrap;
        min-width: 100px;
        padding: 0.75rem !important;
        font-size: 0.875rem;
    }
}

/* ==================== HEADER RESPONSIVE ==================== */

/* Logo Mobile */
@media (max-width: 767px) {
    .logo img {
        height: 50px !important;
        max-height: 50px !important;
    }

    header.scrolled .logo img {
        height: 45px !important;
        max-height: 45px !important;
    }
}

/* Logo Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .logo img {
        height: 65px !important;
        max-height: 65px !important;
    }

    header.scrolled .logo img {
        height: 55px !important;
        max-height: 55px !important;
    }
}

/* Nav Container Responsive */
@media (max-width: 1023px) {
    .nav-container {
        padding: 1rem 1.5rem !important;
    }
}

@media (max-width: 767px) {
    .nav-container {
        padding: 0.75rem 1rem !important;
    }
}

/* Menu Hamburguesa - Mejoras */
@media (max-width: 992px) {
    .mobile-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .nav-menu {
        padding: 4rem 2rem 2rem;
    }

    .nav-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.125rem !important;
    }
}

/* Lang Switcher Mobile */
@media (max-width: 767px) {
    .lang-switcher {
        flex-direction: row;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(0,0,0,0.1);
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }

    .lang-switcher button {
        min-width: 60px;
        min-height: 44px;
        font-size: 1rem;
    }
}

/* ==================== HERO SECTIONS ==================== */

/* Tablet */
@media (max-width: 1023px) {
    .hero-premium {
        padding-top: 120px;
        min-height: 50vh;
    }

    .hero-content-premium {
        padding: 3rem 2rem !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hero-premium {
        padding-top: 80px !important;
        min-height: auto !important;
        padding-bottom: 2rem !important;
    }

    /* Hero sections con padding-top inline */
    section[style*="padding-top: 180px"],
    section[style*="padding-top: 160px"] {
        padding-top: 80px !important;
    }

    .hero-content-premium {
        padding: 2rem 1.5rem !important;
        max-width: 100% !important;
    }

    .hero-eyebrow {
        font-size: 0.75rem !important;
        padding: 8px 16px !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-title-premium {
        font-size: clamp(1.75rem, 8vw, 3rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-subtitle-premium {
        font-size: clamp(1rem, 4vw, 1.5rem) !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-description-premium {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }

    .hero-cta-group {
        margin-top: 2rem !important;
    }

    /* Stats del hero responsive */
    .stats-premium,
    div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        margin-top: 3rem !important;
        padding-top: 2rem !important;
    }

    .stat-item-premium {
        text-align: center;
    }

    .stat-item-premium > div:first-child {
        font-size: 2.5rem !important;
    }

    .stat-item-premium > div:last-child {
        font-size: 0.75rem !important;
    }
}

/* ==================== SECTIONS & CONTAINERS ==================== */

@media (max-width: 1023px) {
    .section-premium {
        padding: 4rem 2rem !important;
    }

    .container-premium {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 767px) {
    .section-premium {
        padding: 3rem 1.5rem !important;
    }

    .container-premium {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

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

    .section-title-premium {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        margin-bottom: 1rem !important;
    }

    .section-subtitle-premium,
    .section-description {
        font-size: 1rem !important;
    }
}

/* ==================== GRIDS ==================== */

/* Grids generales */
@media (max-width: 767px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .services-grid,
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* Grid responsive - premium.css ya tiene el grid base correcto con minmax(350px) */
@media (max-width: 767px) {
    .grid-premium {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ==================== CARDS ==================== */

@media (max-width: 767px) {
    .card-premium {
        padding: 2rem 1.5rem !important;
    }

    .card-image-wrapper {
        margin: -2rem -1.5rem 1.5rem -1.5rem !important;
    }

    .card-image {
        height: 180px !important;
    }

    .card-title-premium {
        font-size: 1.5rem !important;
    }

    .card-description {
        font-size: 1rem !important;
    }

    .service-card-premium,
    .benefit-card-premium {
        padding: 2rem 1.5rem !important;
    }

    .service-icon-premium,
    .card-icon-premium {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ==================== BUTTONS ==================== */

@media (max-width: 767px) {
    .btn-premium,
    .btn,
    .btn-primary,
    .btn-gold,
    .btn-accent {
        padding: 14px 24px !important;
        font-size: 0.9375rem !important;
        width: 100%;
        justify-content: center;
    }

    .btn-large {
        font-size: 1rem !important;
        padding: 16px 28px !important;
    }

    .btn-small {
        font-size: 0.875rem !important;
        padding: 10px 16px !important;
    }

    /* Grupos de botones */
    .hero-cta,
    .hero-cta-group,
    .cta-buttons {
        flex-direction: column;
        gap: 1rem !important;
        width: 100%;
    }

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

/* Touch targets mínimos */
@media (max-width: 767px) {
    a,
    button,
    .btn,
    .tab-button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==================== TYPOGRAPHY ==================== */

/* Headings responsive */
@media (max-width: 767px) {
    h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    }

    h2 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    h3 {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }

    h4, h5, h6 {
        font-size: 1.125rem !important;
    }

    p {
        font-size: 1rem !important;
        max-width: 100% !important;
        line-height: 1.7 !important;
    }
}

/* ==================== TIMELINE ==================== */

@media (max-width: 767px) {
    .timeline-vertical {
        padding-left: 2.5rem !important;
    }

    .timeline-vertical::before {
        left: 12px !important;
    }

    .timeline-number {
        left: -34px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 0.875rem !important;
    }

    .timeline-item {
        margin-bottom: 2rem !important;
        padding-left: 1rem !important;
    }

    .timeline-content h3,
    .timeline-content h4 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }

    .timeline-content p {
        font-size: 0.9375rem !important;
    }
}

/* ==================== TABS (extranjeros.php) ==================== */

@media (max-width: 767px) {
    .tab-buttons {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    .tab-button {
        width: 100%;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* ==================== TABLAS ==================== */

@media (max-width: 767px) {
    /* Forzar scroll horizontal */
    .section-premium > div > table,
    table[style] {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100%;
    }

    table thead tr {
        display: table-row;
    }

    table th,
    table td {
        white-space: nowrap !important;
        min-width: 100px !important;
        padding: 0.75rem 0.5rem !important;
        font-size: 0.8125rem !important;
    }

    /* Sticky primera columna */
    table th:first-child,
    table td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0,0,0,0.1);
    }

    table thead th:first-child {
        background: var(--navy-deep);
        z-index: 2;
    }
}

/* ==================== IMÁGENES ==================== */

@media (max-width: 767px) {
    img[style*="max-height"] {
        max-height: 220px !important;
    }

    .section-premium img {
        border-radius: 12px !important;
    }

    /* Hero images */
    .hero-premium img {
        max-height: 180px !important;
        object-fit: cover;
    }

    /* Imágenes circulares del equipo */
    div[style*="width: 200px"][style*="height: 200px"] {
        width: 160px !important;
        height: 160px !important;
        margin: 0 auto 1.5rem !important;
    }
}

/* ==================== FORMULARIOS ==================== */

@media (max-width: 767px) {
    .form-grid,
    .calculadora-form .form-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .form-control,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important; /* Prevenir zoom en iOS */
        padding: 0.875rem 1rem !important;
    }

    .calculator-container,
    .calculadora-form,
    div[style*="padding: 3rem"],
    div[style*="padding: 3.5rem"] {
        padding: 1.5rem !important;
    }

    /* Radio/Checkbox groups */
    .radio-group,
    .checkbox-group {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .radio-option label,
    .checkbox-option label {
        padding: 1rem !important;
        font-size: 0.9375rem !important;
    }
}

/* ==================== RESULTADOS CALCULADORA ==================== */

@media (max-width: 767px) {
    .resultado-calculadora,
    .calculator-result {
        padding: 1.5rem !important;
    }

    .linea-calculo,
    .result-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 1rem 0 !important;
    }

    .monto-total,
    .result-value-total {
        font-size: 2rem !important;
    }

    .acciones-resultado {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .acciones-resultado .btn {
        width: 100% !important;
    }
}

/* ==================== FOOTER ==================== */

@media (max-width: 767px) {
    footer {
        padding: 3rem 1.5rem 2rem !important;
    }

    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
    }

    .footer-section h3 {
        font-size: 1.125rem !important;
    }

    .footer-section p,
    .footer-section li {
        font-size: 0.9375rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
}

/* ==================== CTA BOXES ==================== */

@media (max-width: 767px) {
    .cta-box,
    div[style*="background: linear-gradient"][style*="padding: 3rem"] {
        padding: 2rem 1.5rem !important;
        border-radius: 16px !important;
    }

    .cta-box h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    .cta-box p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* ==================== WHATSAPP FLOAT ==================== */

@media (max-width: 767px) {
    /* Override agresivo del botón WhatsApp */
    .whatsapp-float,
    a.whatsapp-float,
    a[class*="whatsapp"] {
        bottom: 10px !important;
        right: 10px !important;
        width: 50px !important;
        height: 50px !important;
        z-index: 99999 !important;
        position: fixed !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .whatsapp-float svg,
    a.whatsapp-float svg {
        width: 26px !important;
        height: 26px !important;
    }
}

/* ==================== FOOTER RESPONSIVE ==================== */

@media (max-width: 767px) {
    /* Centrar el contenedor del logo */
    .footer-premium .footer-section:first-child,
    .footer-section div[style*="margin-bottom: 2.5rem"] {
        text-align: center !important;
        display: block !important;
    }

    /* Override agresivo del logo en footer con múltiples selectores y CENTRADO */
    .footer-premium img[src*="logo.png"],
    .footer-section img[src*="logo.png"],
    footer img[src*="logo.png"],
    img[alt*="Ramírez"][src*="logo"],
    .footer-premium .footer-section div img {
        width: 140px !important;
        max-width: 140px !important;
        min-width: 140px !important;
        height: auto !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Centrar todo el contenido de la primera sección del footer */
    .footer-premium .footer-section:first-child p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Centrar iconos sociales */
    .footer-premium .footer-section:first-child div[style*="display: flex"] {
        justify-content: center !important;
    }

    /* Asegurar que footer-container sea column en mobile */
    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    /* Reducir padding del footer bottom */
    .footer-bottom {
        padding: 2rem 0 !important;
        margin-top: 2rem !important;
    }

    .footer-bottom > div,
    .footer-bottom .container-premium {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* ==================== UTILIDADES RESPONSIVE ==================== */

/* Hide en mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide en desktop */
@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Stack en mobile */
@media (max-width: 767px) {
    .stack-mobile {
        flex-direction: column !important;
    }
}

/* ==================== LANDSCAPE MOBILE ==================== */

@media (max-width: 767px) and (orientation: landscape) {
    .hero-premium {
        min-height: auto !important;
        padding: 2rem 1.5rem !important;
    }

    .hero-title-premium {
        font-size: 1.75rem !important;
    }
}

/* ==================== TABLET ESPECÍFICO (768px-1023px) ==================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-premium {
        grid-template-columns: repeat(2, 1fr) !important;
    }

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

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

    .card-premium {
        padding: 2.5rem;
    }

    h1 {
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
    }

    h2 {
        font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
    }
}

/* ==================== ACCESIBILIDAD ==================== */

/* Foco visible para keyboard navigation */
@media (max-width: 767px) {
    *:focus {
        outline: 2px solid var(--gold-primary) !important;
        outline-offset: 2px !important;
    }

    *:focus:not(:focus-visible) {
        outline: none !important;
    }
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== FIN RESPONSIVE OPTIMIZATIONS ==================== */