/* ==============================================================================
   MAPS LEAD EXTRACTOR PRO - ESTILOS RESPONSIVE
   ==============================================================================
   
   Descripción: Hoja de estilos responsive para la landing page de ventas de 
                Maps Lead Extractor Pro
   Autor: SociosCoders - SociosDigitales.pro
   Versión: 1.0
   Fecha: Marzo 2026
   
   Estructura de Breakpoints:
   - xs: hasta 480px (móviles pequeños)
   - sm: 641px-768px (móviles grandes)
   - md: 769px-1024px (tablets)
   - lg: 1025px-1200px (laptops)
   - xl: 1201px+ (escritorio grande)
   
   Componentes:
   1. Layout General
   2. Hero Section
   3. Proceso en 3 Pasos
   4. Sección de Comparación
   5. Funcionalidades
   6. Demo en Vivo
   7. Cómo Funciona
   8. Precios
   9. FAQ
   10. Footer
   11. Pop-up de Video
   13. Componentes Reutilizables
   
   ============================================================================== */

/* ==============================================================================
   1. LAYOUT GENERAL
   ============================================================================== */

/* Tablet y menor (1024px y menos) */
@media (max-width: 1024px) {
    :root {
        --spacing-2xl: 3rem;
        --spacing-xl: 2.5rem;
        --spacing-lg: 2rem;
    }
    
    body {
        background-size: 30px 30px;
    }
    
    .container {
        padding: 100px 20px 40px;
    }
    
    /* Ajuste de formas de fondo animadas */
    .bg-shape-1 {
        width: 300px;
        height: 300px;
        top: 5%;
        left: 5%;
    }
    
    .bg-shape-2 {
        width: 280px;
        height: 280px;
        top: 55%;
        right: 10%;
    }
    
    .bg-shape-3 {
        width: 250px;
        height: 250px;
        bottom: 10%;
        left: 15%;
    }
    
    .bg-shape-4 {
        width: 220px;
        height: 220px;
        top: 25%;
        right: 30%;
    }
}

/* Móviles grandes (768px y menos) */
@media (max-width: 768px) {
    :root {
        --spacing-2xl: 2.5rem;
        --spacing-xl: 2rem;
        --spacing-lg: 1.5rem;
    }
    
    .container {
        padding: 80px 16px 40px;
    }
    
    /* Formas de fondo más pequeñas en móvil */
    .bg-shape {
        filter: blur(60px);
        opacity: 0.08;
    }
    
    .bg-shape-1 {
        width: 200px;
        height: 200px;
        top: 0%;
        left: 0%;
    }
    
    .bg-shape-2 {
        width: 180px;
        height: 180px;
        top: 50%;
        right: 5%;
    }
    
    .bg-shape-3 {
        width: 160px;
        height: 160px;
        bottom: 5%;
        left: 10%;
    }
    
    .bg-shape-4 {
        width: 140px;
        height: 140px;
        display: none; /* Ocultar en móvil para mejor rendimiento */
    }
}

/* Móviles pequeños (480px y menos) */
@media (max-width: 480px) {
    .container {
        padding: 60px 12px 30px;
    }
    
    .bg-shape-3 {
        display: none; /* Menos formas en pantallas muy pequeñas */
    }
}

/* ==============================================================================
   2. HERO SECTION RESPONSIVE
   ============================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .hero-buttons {
        gap: var(--spacing-sm);
    }
    
    .btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 0.95rem;
    }
    
    .logos-container {
        gap: var(--spacing-md);
    }
}

/* Móviles grandes */
@media (max-width: 768px) {
    .header-badge {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.75rem;
    }
    
    .hero-content h1 {
        font-size: clamp(2rem, 8vw, 2.75rem);
        margin-bottom: var(--spacing-sm);
    }
    
    .hero-content p {
        font-size: 1.125rem;
        margin-bottom: var(--spacing-lg);
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .trust-badge {
        flex-direction: column;
        gap: var(--spacing-xs);
        text-align: center;
    }
    
    .logos-container {
        gap: var(--spacing-sm);
        justify-content: center;
    }
    
    .logos-container i,
    .logos-container span {
        font-size: 1.25rem;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: clamp(1.75rem, 9vw, 2.25rem);
    }
    
    .hero-content p {
        font-size: 1rem;
        margin-bottom: var(--spacing-md);
    }
    
    .header-badge {
        font-size: 0.7rem;
        padding: 6px var(--spacing-sm);
    }
    
    .logos-container {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    .logos-container i,
    .logos-container span {
        font-size: 1.125rem;
    }
}

/* ==============================================================================
   3. PROCESO EN 3 PASOS RESPONSIVE
   ============================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .process-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        max-width: 500px;
        margin: 0 auto;
    }
    
    .process-step {
        padding: var(--spacing-lg);
    }
    
    .step-number {
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Móviles */
@media (max-width: 768px) {
    .process-section {
        padding: var(--spacing-xl) 16px;
    }
    
    .process-container {
        gap: var(--spacing-md);
    }
    
    .process-step {
        padding: var(--spacing-md);
    }
    
    .step-icon {
        font-size: 2.5rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .process-step h3 {
        font-size: 1.25rem;
    }
}

/* ==============================================================================
   4. SECCIÓN DE COMPARACIÓN RESPONSIVE
   ============================================================================== */

/* Tablet y móvil */
@media (max-width: 1024px) {
    .comparison-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        max-width: 500px;
        margin: 0 auto;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .comparison-section {
        padding: var(--spacing-xl) 16px;
    }
    
    .comparison-card {
        padding: var(--spacing-lg);
    }
    
    .comparison-card h3 {
        font-size: 1.25rem;
    }
    
    .comparison-card li {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-sm);
    }
}

/* ==============================================================================
   5. FUNCIONALIDADES RESPONSIVE
   ============================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .creations-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }
}

/* Móviles grandes */
@media (max-width: 768px) {
    .creations-section {
        padding: var(--spacing-xl) 16px;
    }
    
    .creations-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        max-width: 400px;
        margin: 0 auto;
    }
    
    .creation-card {
        padding: var(--spacing-lg);
    }
    
    .creation-card i {
        font-size: 2.5rem;
    }
    
    .creation-card h3 {
        font-size: 1.125rem;
    }
}

/* ==============================================================================
   6. DEMO EN VIVO RESPONSIVE
   ============================================================================== */

/* Tablet y menor */
@media (max-width: 1024px) {
    .demo-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }
    
    .demo-screen {
        width: 250px;
        height: 160px;
    }
    
    .demo-icon {
        font-size: 3rem;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .demo-section {
        padding: var(--spacing-xl) 16px;
    }
    
    .demo-content h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .demo-content p {
        font-size: 1rem;
    }
    
    .btn-demo {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .demo-screen {
        width: 200px;
        height: 120px;
    }
    
    .demo-icon {
        font-size: 2.5rem;
    }
    
    .screen-content p {
        font-size: 1rem;
    }
}

/* ==============================================================================
   7. CÓMO FUNCIONA RESPONSIVE
   ============================================================================== */

/* Tablet y menor */
@media (max-width: 1024px) {
    .componentization-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .componentization-diagram {
        order: -1; /* Mostrar diagrama primero en móvil */
    }
}

/* Móviles */
@media (max-width: 768px) {
    .componentization-section {
        padding: var(--spacing-xl) 16px;
    }
    
    .componentization-text h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .componentization-text h3 {
        font-size: 1.25rem;
    }
    
    .componentization-diagram {
        padding: var(--spacing-lg);
    }
    
    .diagram-row {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .diagram-block,
    .diagram-component,
    .diagram-list-item {
        font-size: 0.75rem;
        padding: var(--spacing-xs);
    }
    
    .diagram-small-item {
        font-size: 0.625rem;
        padding: 3px 6px;
    }
    
    .small-components {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-xs);
    }
}

/* ==============================================================================
   8. PRECIOS RESPONSIVE
   ============================================================================== */

/* Móviles */
@media (max-width: 768px) {
    .pricing-section {
        padding: var(--spacing-xl) 16px;
    }
    
    .pricing-header p {
        font-size: 1rem;
    }
    
    .pricing-card {
        padding: var(--spacing-xl);
        margin: 0 16px;
    }

    .recommended-badge {
        position: static;
        transform: none;
        display: inline-block;
        margin-bottom: var(--spacing-md);
    }

    .price-section {
        margin-bottom: var(--spacing-lg);
        line-height: 1.2;
    }
    
    .amount {
        font-size: 2.5rem;
        display: block;
        margin: var(--spacing-xs) 0;
    }
    
    .currency {
        font-size: 1rem;
        display: inline-block;
        margin-right: var(--spacing-xs);
    }
    
    .period {
        font-size: 0.875rem;
        display: block;
        margin-top: var(--spacing-xs);
    }
    
    .pricing-card.recommended {
        transform: none;
    }
    
    .pricing-card:hover {
        transform: translateY(-2px);
    }
    
    .comparison-table {
        padding: var(--spacing-md);
    }
    
    .comparison-header {
        font-size: 0.875rem;
    }
    
    .amount {
        font-size: 3rem;
    }
    
    .currency {
        font-size: 1rem;
    }
    
    .period {
        font-size: 0.875rem;
    }
}

/* ==============================================================================
   9. FAQ RESPONSIVE
   ============================================================================== */

/* Móviles */
@media (max-width: 768px) {
    .faq-section {
        padding: var(--spacing-xl) 16px;
    }
    
    .faq-container {
        margin: 0;
    }
    
    .faq-header p {
        font-size: 1rem;
    }
    
    .faq-question {
        padding: var(--spacing-md);
        font-size: 0.875rem;
    }
    
    .faq-answer {
        padding: 0 var(--spacing-md) var(--spacing-md);
        font-size: 0.875rem;
    }
    
    .faq-contact {
        padding: var(--spacing-lg);
    }
    
    .faq-contact-text {
        font-size: 1rem;
    }
    
    .faq-contact-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ==============================================================================
   10. FOOTER RESPONSIVE
   ============================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    .footer-brand {
        grid-column: span 2;
        text-align: center;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .main-footer {
        padding: var(--spacing-xl) 16px var(--spacing-md);
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .footer-brand {
        grid-column: span 1;
    }
    
    .footer-description {
        max-width: none;
        margin: 0 auto;
    }
    
    .footer-contact {
        align-items: center;
    }
    
    .footer-bottom {
        font-size: 0.7rem;
        padding-top: var(--spacing-md);
    }
}

/* ==============================================================================
   12. COMPONENTES REUTILIZABLES RESPONSIVE
   ============================================================================== */

/* Botones en móvil */
@media (max-width: 768px) {
    .btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 0.875rem;
    }
    
    .btn-pricing {
        padding: var(--spacing-md);
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .btn {
        padding: 10px var(--spacing-md);
        font-size: 0.875rem;
    }
}

/* ==============================================================================
   13. OPTIMIZACIONES DE RENDIMIENTO PARA MÓVIL
   ============================================================================== */

/* Reducir animaciones en dispositivos de bajo rendimiento */
@media (prefers-reduced-motion: reduce) {
    .bg-shape {
        animation: none;
    }
    
    .animate-on-scroll {
        transition: none;
    }
    
    .btn:hover {
        transform: none;
    }
    
    .creation-card:hover,
    .faq-item,
    .pricing-card:hover {
        transform: none;
    }
}

/* Optimizaciones para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .bg-shape {
        filter: blur(40px);
    }
}

/* ==============================================================================
   14. UTILIDADES RESPONSIVE
   ============================================================================== */

/* Ocultar/mostrar elementos por tamaño de pantalla */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
    
    .show-mobile {
        display: block;
    }
}

/* Espaciado responsive */
.spacing-responsive {
    padding: var(--spacing-xl) var(--spacing-lg);
}

@media (max-width: 768px) {
    .spacing-responsive {
        padding: var(--spacing-lg) var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .spacing-responsive {
        padding: var(--spacing-md) var(--spacing-sm);
    }
}

/* Texto responsive */
.text-responsive {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    line-height: 1.6;
}

/* Grid responsive automático */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .auto-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* ==============================================================================
   15. ORIENTACIÓN LANDSCAPE EN MÓVIL
   ============================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .container {
        padding: 40px 20px 30px;
    }
    
    .hero-content h1 {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }
    
    .video-container {
        height: 180px;
    }
    
    .demo-screen {
        width: 180px;
        height: 100px;
    }
}

/* ==============================================================================
   FIN DE ESTILOS RESPONSIVE
   ============================================================================== */