/* 1. Reseteo Básico */
body {
    font-family: "Fira Code", monospace; 
    font-size: small;
    margin: 0;
    padding: 20px; /* Un poco de padding para que no se pegue a los bordes de la ventana */
    background-color: #f4f4f4; /* Fondo claro para contraste */
    display: flex;
    justify-content: center; /* Centra el contenido en el centro de la pantalla */
}

/* 2. Contenedor Principal (Límite de 500px) */
.contenedor-principal {
    max-width: 500px; /* Límite de ancho solicitado */
    width: 100%; /* Asegura que ocupe todo el ancho disponible hasta el max-width */
    background-color: #fff; /* Fondo blanco para el contenido */
    padding: 30px;
    box-sizing: border-box; /* Incluye padding en el ancho total */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave para destacar el recuadro */
    text-align: center; /* Centra todo el contenido (título, párrafo, logo) */
}

/* 3. Estilo del Título */
.titulo-pequeno {
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.8em; /* Tamaño de fuente reducido */
    color: #333;
    margin-bottom: 20px;
}

/* 4. Estilo de la Sección del Párrafo */
.seccion-parrafo {
    /* Define el "cuadro" para el párrafo */
    padding: 20px;
    margin-bottom: 30px;
    text-align: justify /* Alinea el texto del párrafo a la izquierda (o puedes usar 'justify') */
}

/* 5. Estilo del Logo y Enlace a Instagram */
.seccion-logo {
    margin-bottom: 30px;
}

.logo-placeholder {
    /* Estilo del placeholder/logo para que se vea como un elemento visual */
    display: inline-block;
    width: 250px; /* Tamaño del logo */
    height: 80px;
    line-height: 80px;
    background-color: #e85d85; /* Color que evoca Instagram/creatividad */
    color: #fff;
    font-weight: bold;
    border-radius: 50%; /* Hace que el área del logo sea circular */
    text-decoration: none; /* Quita el subrayado si es un enlace */
}

/* 6. Estilo del Footer */
.derechos {
    font-size: 0.8em;
    color: #666;
}