/*
 * Ajustes para celular de las paginas del sitio (se carga despues de main.css).
 *
 * Problemas que corrige:
 *  - Titulos fijos de 50-56 px en cualquier pantalla: palabras largas ("Profesionales", "Desarrolladores")
 *    no cabian y se partian a media palabra o provocaban scroll horizontal.
 *  - Android/iOS inflaban el texto de algunos bloques (text-size-adjust).
 *  - body, section y .page-content tenian min-width: 360px, asi que en pantallas de 320-359 px habia scroll horizontal.
 *  - Elementos decorativos que se salian unos pixeles (cinta "Popular", tarjeta ampliada, filas con gutters).
 */

/* Que el navegador del celular no agrande el texto por su cuenta */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Pantallas mas angostas que el minimo que fijaba main.css */
@media (max-width: 359.98px) {
    body,
    section,
    .page-content {
        min-width: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Titulos: crecen con el ancho de la pantalla y nunca pasan del tamaño de escritorio */
    h1 {
        font-size: clamp(3rem, 10.5vw, 5rem) !important;
        line-height: 1.12 !important;
    }

    h2 {
        font-size: clamp(2.8rem, 10vw, 5.6rem) !important;
        line-height: 1.12 !important;
    }

    /* h2 con tamaño propio escrito en la pagina: main.css los forzaba a 56 px en celular */
    h2[style*="3.5rem"] {
        font-size: min(3.5rem, 9vw) !important;
    }

    h2[style*="2.5rem"] {
        font-size: min(2.5rem, 7vw) !important;
    }

    /* Subtitulos con tamaño escrito en la propia pagina (5rem en el inicio) */
    h3[style*="font-size"],
    h4[style*="font-size"] {
        font-size: min(5rem, 9vw) !important;
        line-height: 1.15 !important;
    }

    /* main.css fija h3 en 34 px con !important */
    h3 {
        font-size: min(3.4rem, 7.5vw) !important;
    }

    /* Una palabra que aun asi no quepa se parte con guion en vez de salirse de la pantalla */
    h1,
    h2,
    h3,
    h4 {
        overflow-wrap: anywhere;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    /* Tarjetas de planes (hospedaje): sin ampliar la tarjeta popular y con la cinta dentro de la tarjeta */
    .rgb-feature-card {
        transform: none !important;
    }

    .popular-ribbon {
        top: 14px !important;
        right: 14px !important;
        padding: 4px 14px !important;
        border-radius: 999px;
        transform: none !important;
    }

    /* Red de seguridad: lo que se salga unos pixeles del ancho de la pantalla se recorta en vez de crear scroll
       horizontal (clip, a diferencia de hidden, no rompe los elementos fijos ni los pegajosos). */
    .page-content {
        overflow-x: clip;
    }
}