/* ============================================================
   seo-responsive.css - TECNOHOST S.A.S
   ============================================================
   Soluciona problema #14: No se detectaron media queries CSS
   Incluir en el <head> de index.php:
   <link rel="stylesheet" href="/assets/css/seo-responsive.css">
   ============================================================ */

/* ═══ Base responsive ═══ */
*, *::before, *::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ═══ Tablets (max 1024px) ═══ */
@media (max-width: 1024px) {
    .container, .main-container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-section, .slider-section {
        padding: 40px 20px;
    }

    .plans-grid, .pricing-grid, .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stats-row, .stats-grid {
        flex-wrap: wrap;
        gap: 16px;
    }

    .stat-item, .stat-box {
        flex: 1 1 45%;
        min-width: 140px;
    }

    .section-title, .section h2 {
        font-size: 1.8rem;
    }
}

/* ═══ Moviles grandes (max 768px) ═══ */
@media (max-width: 768px) {
    /* Navegacion responsive */
    .navbar, .nav-menu, .main-nav {
        flex-direction: column;
        text-align: center;
    }

    .nav-links, .menu-items {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .nav-links a, .menu-items a {
        display: block;
        padding: 10px 16px;
        width: 100%;
    }

    /* Hero section */
    .hero-section, .slider-section {
        padding: 30px 16px;
        min-height: auto;
    }

    .hero-title, .hero h1 {
        font-size: 1.6rem !important;
        line-height: 1.3;
    }

    .hero-subtitle, .hero p {
        font-size: 0.95rem;
    }

    .hero-buttons, .hero .btn-group {
        flex-direction: column;
        gap: 10px;
    }

    .hero-buttons a, .hero .btn-group a,
    .hero-buttons button, .hero .btn-group button {
        width: 100%;
        text-align: center;
    }

    /* Planes/Pricing */
    .plans-grid, .pricing-grid, .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .plan-card, .pricing-card {
        max-width: 100%;
    }

    /* Estadisticas */
    .stats-row, .stats-grid {
        flex-direction: column;
    }

    .stat-item, .stat-box {
        flex: 1 1 100%;
        text-align: center;
    }

    /* Tablas */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Buscador de dominios */
    .domain-search-form, .search-form {
        flex-direction: column;
        gap: 10px;
    }

    .domain-search-form input,
    .domain-search-form button,
    .search-form input,
    .search-form button {
        width: 100%;
    }

    /* Secciones generales */
    .section-title, .section h2 {
        font-size: 1.5rem;
    }

    section {
        padding: 30px 16px;
    }

    /* Footer */
    .footer-grid, .footer-columns {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }

    /* Contacto */
    .contact-grid, .contact-section {
        grid-template-columns: 1fr;
    }

    /* Formularios */
    .form-row, .form-group {
        flex-direction: column;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100%;
        font-size: 16px; /* Evita zoom en iOS */
    }

    /* Botones */
    .btn, .button, [class*="btn-"] {
        padding: 12px 20px;
        font-size: 0.9rem;
        width: 100%;
        text-align: center;
    }

    /* Cards genericas */
    .card, .feature-card, .service-card {
        margin-bottom: 16px;
    }

    /* Por que elegirnos */
    .why-grid, .benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Precios TLD dominios */
    .tld-grid, .domain-prices {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ═══ Moviles pequenos (max 480px) ═══ */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .hero-title, .hero h1 {
        font-size: 1.3rem !important;
    }

    .section-title, .section h2 {
        font-size: 1.25rem;
    }

    .plan-price, .price-big {
        font-size: 2rem;
    }

    .tld-grid, .domain-prices {
        grid-template-columns: 1fr;
    }

    .stats-number, .stat-value {
        font-size: 1.8rem;
    }

    /* Reducir paddings */
    section {
        padding: 20px 12px;
    }

    .container, .main-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* WhatsApp flotante */
    .whatsapp-float, .wa-float {
        bottom: 16px;
        right: 16px;
        width: 50px;
        height: 50px;
    }
}

/* ═══ Impresion ═══ */
@media print {
    .navbar, .nav-menu, .footer, .whatsapp-float,
    .wa-float, .chat-widget, .cookie-banner {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}