/* =============================
    ADAPTACIÓN RESPONSIVE BALANCE
   ============================= */

@media (max-width: 600px) {

  /* Contenedor principal sin centrado vertical */
    body {
        display: block;
        padding: 1rem;
        height: auto;
        align-items: flex-start;
    }

    /* Espaciado superior del contenido */
    .container {
        margin-top: 1rem;
    }

    /* Título principal adaptado al móvil */
    .titulo {
        font-size: 2rem;
        text-align: center;
        padding: 0 1rem;
        margin-bottom: 1.5rem;
    }

    /* Caja informativa con scroll si el contenido es largo */
    .card {
        max-width: 320px;
        max-height: 60vh;              /* limita verticalmente la tarjeta */
        overflow-y: auto;              /* activa scroll solo si hace falta */
        margin: 0 auto 1.5rem auto;
        padding: 1rem;
        font-size: 0.95rem;
        line-height: 1.6;
        border-radius: 10px;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
        scroll-behavior: smooth;
        scrollbar-width: thin;         /* Scroll fino para Firefox */
    }

    .card p {
        text-align: left;
    }

    /* Estilo personalizado para el scroll en Chrome/Safari */
    .card::-webkit-scrollbar {
        width: 6px;
    }
    
    .card::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    /* Botones centrados, separados y más compactos */
    .botones {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
    }

    /* Botón adaptado al ancho de pantalla */
    .btn {
        width: 100%;
        max-width: 280px;
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
        text-align: center;
    }
}