@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"); /* Importa la fuente 'Open Sans' */

*, html { /* Aplica a todos los elementos y al elemento html */
  box-sizing: border-box; /* Incluye padding y border en el tamaño total */
  font-family: "Merriweather", serif;
  font-style: italic; /* Define 'Open Sans' como la fuente base */
}

html, body { /* Estilos para el html y el body */
    margin: 0; /* Elimina el margen por defecto */
    padding: 0; /* Elimina el padding por defecto */
    background-color: #cbfcff; /* Fondo claro */
}

main { /* Estilo para el elemento main */
    position: relative; /* Necesario para el posicionamiento del pseudo-elemento */
    display: grid; /* Activa el grid layout */
    grid-template-columns: 1fr; /* Cambia a una sola columna */
    grid-template-rows: auto auto auto; /* Define tres filas de altura automática */
    margin: 0 5cm; /* Márgenes a los costados de 5 cm */
    grid-template-areas: /* Define áreas específicas dentro del grid */
        "title" /* Título ocupa la primera fila */
        "contenido" /* Contenido ocupa la segunda fila */
        "proyectos"; /* Proyectos ocupa la tercera fila */
    justify-items: center; /* Centra todo el contenido dentro del main */
}

body {
    margin: 0; /* Elimina el margen por defecto */
    padding: 0; /* Elimina el padding por defecto */
    background-color: #cbfcff; /* Fondo claro */
    position: relative; /* Necesario para el posicionamiento del pseudo-elemento */
}

body::before { /* Pseudo-elemento para el efecto de difuminado */
    content: ""; /* Necesario para que se muestre el pseudo-elemento */
    position: absolute; /* Posicionamiento absoluto */
    top: 0; /* Desde la parte superior */
    left: 0; /* Desde la parte izquierda */
    right: 0; /* Hasta la parte derecha */
    bottom: 0; /* Hasta la parte inferior */
    background: radial-gradient(circle, rgba(106, 27, 154, 0.6) 60%, rgba(203, 252, 255, 0) 100%); /* Efecto difuminado morado */
    pointer-events: none; /* Permite la interacción con los elementos debajo */
}



#left { /* Estilo para el elemento con id left */
    padding: 30px; /* Padding de 30px en todos los lados */
    padding-top: 0; /* Sin padding en la parte superior */
    grid-area: contenido; /* Asigna este elemento al área 'contenido' */
}

#right { /* Estilo para el elemento con id right */
    padding: 30px; /* Padding de 30px en todos los lados */
    padding-top: 0; /* Sin padding en la parte superior */
    grid-area: proyectos; /* Asigna este elemento al área 'proyectos' */
}

h1 { /* Estilo para el título h1 */
    font-size: 4em; /* Tamaño de fuente grande (4em) */
    font-weight: 900; /* Fuente en negrita */
    color: #5a185c; /* Color  */
    font-style: normal;
    display: flex; /* Activa flexbox en el título */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
    padding: 20px 0; /* Padding en la parte superior e inferior para un espaciado adecuado */
    background: url('ruta-a-tu-imagen.jpg') no-repeat center center; /* Fondo centrado */
    background-size: cover; /* Asegura que el fondo cubra todo el área */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra con desplazamiento y difuminado */
    backdrop-filter: blur(10px) brightness(90%); /* Efecto de fondo */
}



h2 { /* Estilo para subtítulos h2 */
    font-size: 1.5em; /* Tamaño de fuente mediano (1.5em) */
    color: #0d1216;
    font-weight: 700;
    font-style: normal;
}

p { /* Estilo para párrafos p */
    font-size: 16px; /* Tamaño de fuente de 18px */
}

.title { /* Estilo para el elemento con clase title */
    grid-area: title; /* Asigna este elemento al área 'title' */
    padding-left: 30px; /* Padding izquierdo de 30px */
}

.content { /* Estilo para el elemento con clase content */
    padding: 0; /* Sin padding */
    text-align: justify; /* Justifica el texto */
    word-break: normal; /* Permite el corte de palabras natural */
}

.proyectos { /* Estilo para el contenedor con clase proyectos */
    display: grid; /* Activa el grid layout */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Aumenta un poco el tamaño de las imágenes */
    column-gap: 20px; /* Espacio entre columnas de 10px */
    row-gap: 10px; /* Espacio entre filas de 10px */
    justify-items: center; /* Centra las imágenes dentro del grid */
}

.proyectos nav { /* Estilo para el elemento nav dentro de .proyectos */
    display: contents; /* Los hijos se comportan como si estuvieran directamente en el grid */
}

.proyectos a { /* Estilo para los enlaces dentro de .proyectos */
    display: block; /* El enlace ocupa toda la columna */
}

.proyectos nav a img { /* Estilo para las imágenes dentro de los enlaces en .proyectos */
    width: 100%; /* Imágenes ocupan todo el ancho del contenedor */
    border-radius: 30px; /* Bordes redondeados */
    margin-bottom: 3ex; /* Margen inferior de 1ex */
    border: 5px solid transparent; /* Borde de 3px invisible */
}

.proyectos nav a:hover img { /* Estilo hover para las imágenes en .proyectos */
    filter: blur(2px); /* Desenfoque de 5px al pasar el ratón */
    opacity: 90%; /* Reducción de la opacidad al 90% */
}

button { /* Estilo para los botones */
    border-radius: 20px; /* Bordes redondeados */
    padding: 10px 20px; /* Padding de 10px arriba y abajo, 20px a los lados */
    background-color: rgb(204, 209, 255); /* Color de fondo azul claro */
    font-size: 14px; /* Tamaño de fuente de 14px */
    font-weight: bold; /* Texto en negrita */
    color: #6900f3; /* Texto morado */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor de mano al pasar por encima */
}

button:hover { /* Estilo hover para los botones */
    background-color: #350053; /* Fondo cambia a naranja */
    color: black; /* Texto cambia a negro */
    font-weight: bold; /* Mantiene el texto en negrita */
}

@media (max-width: 900px) { /* Estilo responsivo para pantallas pequeñas */
    main { /* Ajustes en el elemento main */
        display: grid; /* Activa el grid layout */
        grid-template-columns: 1fr; /* Una sola columna */
        grid-template-rows: auto auto auto; /* Tres filas automáticas */
        grid-template-areas: /* Reorganiza las áreas del grid */
            "title" /* Título ocupa la primera fila */
            "contenido" /* Contenido ocupa la segunda fila */
            "proyectos"; /* Proyectos ocupa la tercera fila */
        margin: 0 10px; /* Márgenes laterales reducidos a 10px */
    }
    
    h1 { /* Ajustes en el título h1 */
        font-size: 3em; /* Reduce el tamaño de fuente a 3em */
    }
}

/* 5 cosas nuevas*/

h1 {
    grid-area: title;
    padding-left: 100px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra con desplazamiento y difuminado */
}

p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra de texto sutil */
}

img:hover {
    transform: scale(1.1); /* Aumenta el tamaño de la imagen al pasar el ratón */
}

p {
    text-align:left; /* Alinea el texto */
    letter-spacing: 0.5px; /* Añade espaciado entre letras */
}

h1 {
    backdrop-filter: blur(10px) brightness(90%);/* Fondo al titulo*/
    align-items: center;
}