/*--------------------------------------------------------------
# Ajustes responsive propios para las páginas públicas (landing)
# No modifica la plantilla Bootslander (main.css); solo la complementa.
--------------------------------------------------------------*/

/* Imágenes del tutorial centradas y fluidas */
.img_tutorial {
    max-width: 900px;
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* La tarjeta de contacto nunca debe desbordar en móvil */
#contacto img {
    max-width: 100%;
    height: auto;
}

/*--------------------------------------------------------------
# Tablet (<= 992px)
--------------------------------------------------------------*/
@media (max-width: 991.98px) {
    /* Reduce la fuente base que la plantilla fija a 1.25rem en línea */
    body.index-page {
        --bs-body-font-size: 1.1rem !important;
        font-size: 1.1rem !important;
    }
}

/*--------------------------------------------------------------
# Móvil (<= 768px)
--------------------------------------------------------------*/
@media (max-width: 768px) {
    body.index-page {
        --bs-body-font-size: 1rem !important;
        font-size: 1rem !important;
    }

    /* Títulos de sección más contenidos en pantallas pequeñas */
    .section-title h2 {
        font-size: 28px;
    }

    .hero h1 {
        font-size: 32px;
        line-height: 1.2;
    }

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

    /* Evita scroll horizontal por imágenes o contenidos anchos */
    .main img {
        max-width: 100%;
        height: auto;
    }

    /* Listas del tutorial con sangría cómoda */
    .details ul {
        padding-left: 20px;
    }
}

/*--------------------------------------------------------------
# Móvil pequeño (<= 480px)
--------------------------------------------------------------*/
@media (max-width: 480px) {
    .header .logo h1.sitename {
        font-size: 22px;
    }

    .section-title h2 {
        font-size: 24px;
    }

    .hero h1 {
        font-size: 26px;
    }

    /* El pie con varios enlaces se lee mejor con algo más de interlineado */
    #footer .copyright p {
        line-height: 1.8;
    }
}