.header {
    min-height: 100vh;
    background: var(--color-bg-secondary) url('/src/imagenes/previsualizacionPagina/carretera.jpg') no-repeat bottom/cover;
    /*ka parte de hasta al final de este linea aclaro para que es cada caso, no-repeat es por si la imagen es pequeña y como pedimos que ocupe todo el espacio, le incamos que no se repita, el segundo hace sinergía con el tercero que es que el usar cover hace una especie de un pequeño acercamiento de la imagen y por ende no se verá las partes exteriores completamente, por ello el botton le indicamos que parte queremos que se muestre la que nos interesa más lo cual para la imagen que tengo no hay mucha diferencia pero prefiero un poco más la parte de abajo*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav {
    box-shadow: 0 0 .3rem 0 var(--color-text);
    /* 1. Cuantos pixeles se recorre hacía la derecha o de manera horizontal
    2. Cuántos pixeles se recorre o se va hacía abajo o de manera vertical la sombra
    3. Cuánto quiero que se desenfoque la sombra, o una especie de difuminado
    4. Cánto quiero que la sombra se expanda
    5. El color */
}
.header__content {
    text-align: center;
    padding: var(--space-lg);
}

.header__image {
    width: clamp(12rem, 35vw, 30rem);/*este es para mostrarse la imagen conforme al viewport, pero le indicamos que tenga un minimo que es el primero argumento y un maximo, que es el tercer argumento, y en la medida de lo posible que use 35vw de la vista del cliente, y lo tratará de usar la mayoria de las veces mientras se pueda que es el argumento de en medio*/
    clip-path: ellipse(45% 60% at 50% 50%); /*sólo le colocamos una forma a la imagen para que no se vea literalmente cuadrada*/
    opacity: 0.4;
}

.header__title {
    margin-top: var(--space-md);
    font-size: clamp(1.75rem, 4vw, 3rem);/*pasa lo mismo que el width de arriba, sólo que aquí lo usamos para mostrar la letra*/
    color: var(--color-text);
}

/*aquí agregamos el switch para cambiar a modo dark o light*/

.switch {
    width: 2rem;
    height: 2rem;
    position: fixed;
    right: 0;
    top: 10%;
    z-index: 20;
}