/* ════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE-FIX.CSS                                                   */
/* Correcciones móvil: Hero subtítulo + Equipos C.A.P.M.A Visi-ON     */
/* Añadir al final de style.css o como <link> DESPUÉS de style.css     */
/* ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════ */
/* 1. HERO — CONTENCIÓN HORIZONTAL GARANTIZADA                          */
/* ════════════════════════════════════════════════════════════════════ */

.hero {
    overflow-x: hidden;         /* evita desbordamiento lateral */
}

.hero-container {
    /* Asegura que el grid nunca supere el viewport */
    max-width: 100%;
    box-sizing: border-box;
}

/* El subtítulo puede contener frases largas sin salirse */
.hero-subtitle {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;     /* fallback para Safari antiguo */
    hyphens: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* El título también se contiene */
.hero-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

/* El contenido del hero no desborda */
.hero-content {
    min-width: 0;               /* clave para que el grid hijo no rompa el contenedor */
    max-width: 100%;
    box-sizing: border-box;
}


/* ════════════════════════════════════════════════════════════════════ */
/* 2. HERO — BREAKPOINTS MÓVIL                                          */
/* ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .hero-container {
        grid-template-columns: 1fr !important;
        padding: 0 20px !important;
        gap: 28px !important;
        width: 100% !important;
    }

    .hero-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
        line-height: 1.25 !important;
    }

    .hero-subtitle {
        font-size: clamp(0.9rem, 4vw, 1rem) !important;
        line-height: 1.65 !important;
    }

    .hero-visual {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {

    .hero-container {
        padding: 0 16px !important;
    }

    .hero-title {
        font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important;
    }

    .hero-subtitle {
        font-size: 0.9rem !important;
    }
}


/* ════════════════════════════════════════════════════════════════════ */
/* 3. EQUIPOS C.A.P.M.A VISI-ON (.trust-section) — MÓVIL               */
/* ════════════════════════════════════════════════════════════════════ */

/*
 *  El problema:
 *  - .trust-container tiene padding: 80px 60px !important  → en móvil deja muy poco espacio útil
 *  - .trust-grid usa minmax(280px, 1fr) → en pantallas <360px las tarjetas se salen
 *  - h2 tiene font-size: 2.8rem !important → no escala en pantallas pequeñas
 */

@media (max-width: 1024px) {

    .trust-section {
        padding: 80px 20px !important;
    }

    .trust-container {
        padding: 60px 30px !important;
    }
}

@media (max-width: 768px) {

    .trust-section {
        padding: 60px 16px !important;
        overflow-x: hidden;
    }

    .trust-container {
        padding: 40px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    /* Título adaptable */
    .trust-section h2 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    /* Texto intro */
    .trust-intro {
        font-size: 0.95rem !important;
        padding: 20px !important;
    }

    /* Grid: una sola columna en móvil */
    .trust-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Tarjetas: padding reducido para que quepan */
    .trust-item {
        padding: 25px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .trust-item h3 {
        font-size: 1rem !important;
    }

    .trust-item p {
        font-size: 0.88rem !important;
    }
}

@media (max-width: 480px) {

    .trust-section {
        padding: 50px 12px !important;
    }

    .trust-container {
        padding: 30px 16px !important;
    }

    .trust-section h2 {
        font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important;
    }

    .trust-grid {
        gap: 16px !important;
    }

    .trust-item {
        padding: 20px 16px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════ */
/* 4. PREVENCIÓN GLOBAL: nada desborda horizontalmente                  */
/* ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Todos los contenedores principales respetan el ancho del viewport */
    .hero-container,
    .trust-container,
    .trust-grid,
    .trust-item {
        max-width: 100% !important;
        overflow-x: hidden;
    }
}