/* Estilos especificos para responsividad */

/* Breakpoint Pequeño (480px) */
@media (max-width: 480px) {
    .nav-logo h2 {
        font-size: 1.1rem;
    }
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .container {
        padding: 0 15px;
    }
    
    /* Padding reducido en cards */
    .product-card,
    .benefit-card,
    .calculator-card,
    .tip-card {
        padding: 1.5rem;
    }
    
    .contact-form {
        padding: 1.5rem;
    }
    

    
    .calculator-header {
        padding: 1.5rem;
    }
    
    .calculator-form {
        padding: 0 1.5rem 1.5rem;
    }
    
    .calculator-result {
        margin: 0 1.5rem 1.5rem;
    }
    
    .hero-quote {
        margin-top: 2.5rem;
    }
    
    /* Commission rate */
    .commission-rate {
        font-size: 2.5rem;
    }
    
    .affiliate-form .contact-form {
        padding: 1rem;
    }
    
    .step-card {
        padding: 1.5rem;
    }
    
    /* Form badges */
    .form-badge,
    .faqs-badge {
        font-size: 2.5rem;
    }
    
    .sidebar-card,
    .faqs-contact-card,
    .faqs-resources-card {
        padding: 1.5rem;
    }
    
    .sidebar-icon,
    .contact-icon,
    .resources-icon {
        font-size: 2rem;
    }
    
    /* Enhanced FAQ */
    .enhanced-faq .faq-question {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .enhanced-faq .faq-answer {
        padding: 0 1rem;
    }
    
    .enhanced-faq.active .faq-answer {
        padding: 0 1rem 1rem;
    }
}

/* Breakpoint para Formularios (600px) */
@media (max-width: 600px) {
    .enhanced-form {
        padding: 1.2rem 0.5rem;
        max-width: 98vw;
    }
    
    .contact-form input,
    .contact-form textarea {
        font-size: 0.98rem;
        padding: 10px 12px 10px 2.2rem;
    }
    
    .enhanced-btn {
        font-size: 1rem;
        padding: 12px 0;
    }
    
    .calculator-form {
        padding: 0 1rem 1.5rem;
    }
    
    .calculator-result {
        margin: 0 1rem 1.5rem;
    }
    
    .form-container {
        padding: 1.2rem 0.5rem;
        max-width: 98vw;
    }
}

/* Breakpoint Principal (768px) */
@media (max-width: 768px) {
    /* Navegación móvil */
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--background);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
        border-top: 1px solid var(--border);
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-cta {
        display: none;
    }
    
    /* Layout de hero */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-title {
        margin-top: 5rem;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    

    
    /* Layouts responsivos */
    .importance-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Grids responsivos */
    .reasons-grid,
    .companies-grid,
    .products-grid,
    .benefits-grid,
    .calculators-grid,
    .tips-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tamaños de fuente */
    .section-title {
        font-size: 2rem;
    }
    
    /* Cards destacadas */
    .product-card.featured,
    .calculator-card.featured {
        transform: none;
    }
    
    .product-card.featured:hover,
    .calculator-card.featured:hover {
        transform: translateY(-10px);
    }
    
    /* Items de gastos */
    .expense-items {
        grid-template-columns: 1fr;
    }
    
    /* Hero y stats */
    .hero {
        padding-bottom: 2.5rem;
    }
    
    .stat-card {
        margin-bottom: 2rem;
    }
    

    
    /* Language selector */
    .language-selector {
        margin-right: 0.5rem;
    }
    
    .language-btn {
        padding: 0.4rem 0.8rem;
    }
    
    .language-dropdown {
        right: -0.5rem;
    }
    
    /* Utilidades de visibilidad */
    .hide-mobile {
        display: none !important;
    }
    

    
    /* Contact page */
    .contact {
        padding: 60px 0;
        min-height: auto;
    }
    
    .contact-wrapper {
        padding: 0 1rem;
    }
    
    .contact-form-container {
        padding: 1.5rem;
    }
    
    /* Form wrapper y FAQ */
    .form-wrapper,
    .faqs-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .form-sidebar,
    .faqs-sidebar {
        order: -1;
    }
    
    /* Form benefits */
    .form-benefits {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    /* Form rows */
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Stats grid */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    /* Enhanced FAQ */
    .enhanced-faq .faq-question {
        padding: 1.5rem;
    }
    
    .enhanced-faq .faq-answer {
        padding: 0 1.5rem;
    }
    
    .enhanced-faq.active .faq-answer {
        padding: 0 1.5rem 1.5rem;
    }
    
    .faq-icon {
        font-size: 1.2rem;
    }
    
    .enhanced-faq .faq-question h3 {
        font-size: 1rem;
    }
    
    /* Commission grid */
    .commission-grid {
        grid-template-columns: 1fr;
    }
    
    .commission-card.featured {
        transform: none;
    }
    
    .commission-card.featured:hover {
        transform: translateY(-5px);
    }
    
    /* Steps grid */
    .steps-grid {
        grid-template-columns: 1fr;
    }
    
    .affiliate-form .contact-form {
        padding: 1.5rem;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    /* Dropdown navigation */
    .nav-dropdown {
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        display: block;
        opacity: 1;
        transform: none;
        min-width: auto;
        transition: none;
    }
    
    .dropdown-link {
        padding: 0.5rem 1rem 0.5rem 2rem;
        font-size: 0.95rem;
    }
    
    .dropdown-icon {
        display: none;
    }
    
    .nav-item.dropdown:hover .nav-dropdown {
        display: block;
    }
    
    /* Form Row Responsive Animation */
    .form-row {
        animation: none;
    }
    
    .form-row .form-group {
        animation: slideInUp 0.4s ease-out;
    }
    
    .form-row .form-group:nth-child(1) { 
        animation-delay: 0.1s; 
    }
    
    .form-row .form-group:nth-child(2) { 
        animation-delay: 0.2s; 
    }
}

/* Responsive Design para nuevas secciones */
@media (max-width: 1024px) {
    .hamburger {
        display: flex;
    }
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--background);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
        border-top: 1px solid var(--border);
    }
    .nav-menu.active {
        left: 0;
    }
    .nav-cta {
        display: none;
    }
    .hero-quote {
        display: none;
    }
    .form-wrapper,
    .faqs-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .form-sidebar,
    .faqs-sidebar {
        order: -1;
    }
    .hide-tablet {
        display: none !important;
    }
    .show-tablet {
        display: block !important;
    }
    .enhanced-form {
        max-width: 700px;
        padding: 3rem 2.5rem;
      }
      .enhanced-form h3 {
        font-size: 2.2rem;
      }
      .enhanced-form .form-subtitle {
        font-size: 1.2rem;
      }
      .contact-form input,
      .contact-form textarea {
        font-size: 1.15rem;
      }
}

/* Breakpoint Desktop (1025px) */
@media (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
    
    .enhanced-form {
        max-width: 700px;
        padding: 3rem 2.5rem;
    }
    
    .enhanced-form h3 {
        font-size: 2.2rem;
    }
    
    .enhanced-form .form-subtitle {
        font-size: 1.2rem;
    }
    
    .contact-form input,
    .contact-form textarea {
        font-size: 1.15rem;
    }
}