/* ===========================
   Ajustes globales mobile
   =========================== */
@media (max-width: 640px) {
    html {
        scroll-padding-top: 70px; /* evita que el sticky tape contenido */
    }

    /* Tipografía y legibilidad */
    h1, h2, h3 {
        line-height: 1.3;
    }

    p {
        line-height: 1.5;
    }

    /* Safe area iOS */
    body {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* ===========================
   Hero y beneficios
   =========================== */
@media (max-width: 640px) {
    #hero h1 {
        font-size: 1.9rem;
    }

    #hero p {
        font-size: 1rem;
    }

    .beneficio span {
        font-size: 1.6rem;
    }

    .beneficio h3 {
        font-size: 1rem;
    }

    .beneficio p {
        font-size: 0.9rem;
    }
}

/* ===========================
   Atención al cliente
   =========================== */
@media (max-width: 640px) {
    .atencion-cliente-section .grid {
        gap: 1.25rem;
    }

    .card-info {
        padding: 1rem;
    }
}

/* ===========================
   Filtros
   =========================== */
@media (max-width: 640px) {
    form[method="get"].sticky {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

        form[method="get"].sticky select,
        form[method="get"].sticky button {
            width: 100%;
        }
}

/* ===========================
   Productos destacados y catálogo
   =========================== */
@media (max-width: 640px) {
    .producto-card img {
        height: auto;
        aspect-ratio: 4/3;
    }

    .acciones {
        flex-direction: column;
        gap: 0.5rem;
    }

    #contenedor-productos {
        gap: 1.25rem;
    }
}

/* Loader skeletons */
#loader .animate-pulse {
    border-radius: 0.75rem;
}

/* ===========================
   Botón WhatsApp
   =========================== */
@media (max-width: 480px) {
    .whatsapp-tooltip {
        display: none;
    }

    .whatsapp-float-btn {
        right: 68px;
    }
}

/* ===========================
   Footer premium
   =========================== */
@media (max-width: 640px) {
    .footer-premium .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .newsletter .nl-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .newsletter .nl-input,
    .newsletter .nl-btn {
        width: 100%;
    }

    .social {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

        .social .pill {
            flex: 1 1 calc(50% - 0.5rem);
            justify-content: center;
        }

    .pay-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pay-badge {
        flex: 1 1 calc(50% - 0.5rem);
        justify-content: center;
    }
}





@media (max-width: 640px) {
    #cta-btn {
        margin-bottom: 1.5rem; /* separación clara con beneficios */
    }

    .beneficio {
        padding: 0.6rem;
        border-radius: 0.5rem;
    }

        .beneficio span {
            font-size: 1.2rem;
        }

        .beneficio h3 {
            font-size: 0.8rem;
        }

        .beneficio p {
            font-size: 0.7rem;
            line-height: 1.2;
        }
}