html {
    font-family: Arial, Helvetica, sans-serif;
}
body {
    background-color: rgb(123, 167, 137);
    margin: 20px;
}
h1 {
    color: rgb(83, 54, 26);
    margin: 10px;
}

/* CONTENEDOR PRINCIPAL (PC por defecto) */
.celulares {
    display: flex;
    flex-direction: row; /* En PC van uno al lado del otro */
    align-items: flex-start;
    gap: 20px; /* Despeja las cajas para que no colisionen */
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
}

/* CORRECCIÓN DE LA IMAGEN */
img {
    width: 100%;
    max-width: 350px; /* Limita el tamaño de la imagen en PC para que no sea gigante */
    height: auto; 
    border-left: solid 5px rgb(0, 0, 66);
    border-radius: 5px;
    object-fit: cover;
}

/* CONTENEDOR DE TEXTO (Caja con scroll) */
.contenido {
    background-color: rgb(158, 219, 199);
    flex: 1; /* Ocupa el espacio restante sin colisionar */
    max-width: 600px; /* Evita que el texto se estire infinito en pantallas enormes */
    height: 300px; /* Altura fija para que el scroll manual funcione bien */
    padding: 1em;
    color: rgb(7, 7, 61);
    font-weight: 600;
    border-radius: 5px;
    border-left: solid 5px rgb(27, 27, 71);
    text-align: justify;
    word-wrap: break-word;
    overflow-y: auto;
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch;
    cursor: grab;     
    user-select: none;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE */
}

.contenido::-webkit-scrollbar {
    display: none;                  /* Safari y Chrome */
}

/* SECCIÓN DE ENLACES */
.important {
    background-color: rgba(225, 255, 196, 0.801);
    border-radius: 5px;
    max-width: fit-content;
    padding: 5px 15px;
}
.link {
    background-color: rgb(158, 219, 199);
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    padding: 10px 0;
    border-radius: 5px;
    border-left: solid 5px rgb(7, 7, 59);
    margin-bottom: 10px;
    max-width: 970px; /* Para que los links no crucen toda la pantalla en PC */
}
a {
    color: rgb(6, 82, 6);
    text-decoration: none;
}
.button {
    background: none;
    border: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    transition: 0.3s;
    font-size: large;
    cursor: pointer;
}
.button:hover {
    background-color: rgb(123, 167, 137);
    border-radius: 5px;
}

/* RESPONSIVE: ADAPTACIÓN PARA CELULARES */
@media screen and (max-width: 767px) {
    .celulares {
        flex-direction: column; /* Se apilan verticalmente (Imagen arriba, texto abajo) */
        align-items: center;
    }
    img {
        max-width: 90%; /* En celulares toma casi todo el ancho de la pantalla */
        margin-right: 0;
    }
    .contenido {
        max-width: 90%;
        height: 250px;
    }
}