/* =============================================
   RESPONSIVE — MOBILE FIRST
   ============================================= */

/* Tablet & Large Desktop adjustments */
@media (max-width: 1024px) {
    .nav-links a { font-size: 0.78rem; padding: 0.35rem 0.5rem; }
    .solutions-grid { grid-template-columns: 1fr 1fr; }
    .process-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 968px) {
    .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
        gap: 0.25rem;
        box-shadow: 0 20px 40px rgba(15,23,42,0.12);
        border-radius: 1.5rem;
        border: 1px solid #e2e8f0;
    }

    .nav-links.active { display: flex; }

    .nav-links a {
        font-size: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
    }

    .nav-links a::after { display: none; }

    .nav-toggle { display: flex; align-items: center; justify-content: center; }

    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {

    /* Section spacing */
    .section   { padding: 56px 0; }
    .container { padding: 0 1.25rem; }

    /* Section headers */
    .section-header       { margin-bottom: 2rem; padding: 0 0.5rem; }
    .section-header h2    { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.15; max-width: 18ch; margin-left: auto; margin-right: auto; }
    .section-header p     { font-size: 0.95rem; }

    /* Hero — imagen ABAJO del texto, botones en fila */
    .hero                 { padding: 90px 0 50px; text-align: center; overflow: hidden; }
    .hero-grid            { grid-template-columns: 1fr; gap: 2rem; }
    .hero h1              { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.15; }
    .hero-subtitle        { font-size: 1rem; max-width: 100%; margin-bottom: 1.5rem; }
    .hero-btns            { flex-direction: column; gap: 0.75rem; align-items: stretch; max-width: 320px; margin: 0 auto; }
    .hero-btns .btn       { width: 100%; text-align: center; justify-content: center; padding: 1rem; font-size: 1rem; white-space: nowrap; }
    .hero-visual          { order: 1; max-width: 320px; margin: 0 auto; }
    .hero-visual img      { max-height: 380px; object-fit: contain; }

    /* Metrics — 2 columnas */
    .metrics-container-wrapper { margin: -1.5rem auto 0; width: calc(100% - 2rem); }
    .metrics-row-simple   { padding: 1.5rem 1rem; gap: 1rem; display: grid; grid-template-columns: 1fr 1fr; }
    .metric-item          { width: 100%; }
    .metric-item h4       { font-size: 1.8rem; }

    /* Brands */
    .brands-grid-simple   { gap: 1rem 1.5rem; justify-content: center; }
    .brands-grid-simple div { font-size: 1rem; }

    /* About */
    .about-grid           { display: grid; grid-template-columns: 1fr; gap: 0; }
    .about-content        { display: contents; }
    .about-content > .hero-badge-tag { order: 1; justify-self: center; margin-bottom: 0.5rem; }
    .about-content > h2   { order: 2; margin-bottom: 1.25rem !important; text-align: center; }
    .image-stack          { order: 3; max-width: 360px; margin: 1rem auto 1.75rem; }
    .about-content > p    { order: 4; margin-bottom: 1.75rem !important; text-align: center; margin-left: auto; margin-right: auto; }
    .about-stats-row      { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 2rem; }
    .stat-item            { gap: 0.5rem; }
    .stat-item h4         { font-size: 1rem; }
    .stat-item p          { font-size: 0.75rem; }
    .stat-icon            { width: 40px; height: 40px; }
    .experience-badge     { bottom: 10px; right: 10px; padding: 1rem; }
    .experience-badge h4  { font-size: 1.8rem; }
    .about-content > a    { order: 6; justify-self: center; }

    /* Solutions */
    .solutions-grid       { grid-template-columns: 1fr; gap: 1.5rem; }
    .solution-full-card { grid-template-columns: 1fr; }
    .sfcard-img { min-height: 240px; }
    .sfcard-body { padding: 2rem 1.5rem; gap: 1rem; }
    .sfcard-body h3 { font-size: 1.3rem; }
    .solution-tabs { gap: 0.5rem; }
    .sol-tab { padding: 0.6rem 1.4rem; font-size: 0.9rem; }

    /* Process */
    .process-grid         { grid-template-columns: 1fr; gap: 1rem; }
    .step-icon-circle     { width: 44px; height: 44px; }

    /* How it works */
    .how-it-works-grid    { grid-template-columns: 1fr; gap: 2rem; }
    .how-it-works-container { padding: 1.5rem 0; margin-top: 0; }
    .how-it-works-visual img { height: 380px; }

    /* 6 Values */
    .values-grid          { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .value-item           { padding: 1.5rem 1rem; }

    /* Payments */
    .payment-grid         { grid-template-columns: 1fr; gap: 1.5rem; }
    .payment-card         { padding: 2rem; }

    /* Testimonials */
    .testimonial-card {
        min-width: 280px;
        flex: 0 0 280px;
    }

    /* Resources */
    .resources-grid       { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
    .res-content          { padding: 1.5rem; }
    .resource-card img    { height: 180px; }

    /* FAQ */
    .faq-item summary     { font-size: 0.9rem; padding: 1.25rem 1.25rem; }
    .faq-item p           { padding: 0 1.25rem 1.25rem; font-size: 0.88rem; }

    /* Form */
    .form-row             { grid-template-columns: 1fr; gap: 0; }
    .contact-form-container { padding: 2rem 1.5rem; }


    /* Footer */
    .footer-cta h2        { font-size: clamp(1.4rem, 6vw, 1.8rem); }
    .main-footer          { padding: 4rem 0 2rem; }

    /* Nav mobile — Botón completo */
    .nav-cta-btn span     { display: inline; font-size: 0.75rem; }
    .nav-cta-btn          { width: auto; height: auto; padding: 0.5rem 0.7rem !important; border-radius: 2rem !important; }
    .nav-cta-btn i        { width: 14px; height: 14px; margin-right: 0.2rem; }
    .nav-toggle           { padding: 0.4rem; }
    .values-grid          { grid-template-columns: 1fr; }
}

/* Small phones */
@media (max-width: 480px) {
    .logo                 { display: flex; align-items: center; }
    .logo-text            { display: none; }
    .logo-img             { display: block; height: 26px; }
    .hero h1              { font-size: 1.7rem; }
    .metrics-row-simple   { flex-direction: column; align-items: center; }
    .metric-item          { width: 100%; }
    .values-grid          { grid-template-columns: 1fr; }

    .hero-badge           { font-size: 0.75rem; padding: 0.5rem 1rem; }
    nav.glass             { width: calc(100% - 1.5rem); padding: 0.5rem 0.8rem; }
    .nav-cta-btn          { padding: 0.45rem 0.6rem !important; }
    .nav-cta-btn span     { font-size: 0.7rem; }
    .nav-cta-btn i        { width: 12px; height: 12px; }
    .nav-toggle           { padding: 0.3rem; }

    /* Formulario en Móvil */
    .contact-form-container { padding: 1.75rem 1.25rem; }
    .form-group           { margin-bottom: 1.25rem; }
    .form-control         { padding: 0.85rem 1rem; font-size: 0.95rem; }
    .form-check label     { font-size: 0.85rem; }
    #btnSubmit            { padding: 1rem; font-size: 1rem; }
}