07 Haga lo que hicimos

/* Definición de variables en :root */
:root {
    --color-fondo: #f1f1f1; /* Color de fondo principal */
    --color-principal: #4e73df; /* Color primario */
    --color-secundario: #eb94bd; /* Color secundario */
    --color-texto: #333333; /* Color de texto */
    --color-enlaces: #ff6347; /* Color de los enlaces */
    --color-enlaces-hover: #ff4500; /* Hover color para los enlaces */
    --fuente-principal: 'Roboto', sans-serif; /* Fuente principal */
    --tamano-fuente: 16px; /* Tamaño de fuente general */
    --tamano-titulo: 2rem; /* Tamaño del título */
    --peso-fuente: 400; /* Peso de la fuente */
}

/* Estilos generales */
body {
    background-color: var(--color-fondo);
    font-family: var(--fuente-principal);
    color: var(--color-texto);
    font-size: var(--tamano-fuente);
    margin: 0;
    padding: 0;
}

header {
    background-color: var(--color-principal);
    padding: 20px;
    text-align: center;
}

header h1 {
    font-size: var(--tamano-titulo);
    color: #ffffff;
}

/* Estilos para los enlaces */
a {
    text-decoration: none;
    color: var(--color-enlaces);
    font-weight: bold;
}

a:hover {
    color: var(--color-enlaces-hover);
}

/* Estilos de la sección principal */
main {
    padding: 40px;
    text-align: center;
}

footer {
    background-color: var(--color-secundario);
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

/* Ajustes para la clase presentacion */
.presentacion {
    padding: 10%;
}

.presentacion__contenido {
    width: auto;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    header h1 {
        font-size: 1.5rem;
    }

    main {
        padding: 20px;
    }

    .presentacion {
        padding: 5%; /* Espaciado reducido para mejor visualización */
    }

    .presentacion__contenido {
        width: 100%; /* Ajuste del ancho del contenido */
    }
}