@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;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: 'Cinzel Decorative', sans-serif; /* 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:#3b1346; /* Fondo clar  o */
    background-image: url("img/fondo\ pipipi.avif");
}

main { /* Estilo para el elemento main */
    display: grid; /* Activa el grid layout */
    grid-template-columns: 1fr 1fr 1fr; /* Define dos columnas con proporciones 1:2 */
    grid-template-rows: auto auto; /* Define dos filas de altura automática */
    margin-left: 50px; /* Márgen izquierdo de 50px */
    margin-right: 50px; /* Márgen derecho de 50px */
    column-gap: 20px; /* Espacio entre columnas de 20px */
    grid-template-areas: /* Define áreas específicas dentro del grid */
        "title title title" /* Título ocupa ambas columnas */
        "proyectos1 contenido proyectos2"; /* Contenido y proyectos ocupan cada una una columna */
}

#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: proyectos1; /* 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: proyectos2; /* Asigna este elemento al área 'proyectos' */
}

#centra{
    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 'proyectos' */
}

h1 { /* Estilo para el título h1 */
    font-size: 4em; /* Tamaño de fuente grande (4em) */
    font-weight: bold; /* Fuente en negrita */
    color: hsl(66, 100%, 50%); /* Color naranja */
}

h2 { /* Estilo para subtítulos h2 */
    font-size: 1.5em; /* Tamaño de fuente mediano (1.5em) */
}

p { /* Estilo para párrafos p */
    font-size: 18px; /* 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 */
    color: rgb(255, 0, 98);

}

.proyectos { /* Estilo para el contenedor con clase proyectos */
    display: grid; /* Activa el grid layout */
    grid-template-columns: 1fr; /* Tres columnas iguales */
    column-gap: 30px; /* Espacio entre columnas de 30px */
    row-gap: 20px; /* Espacio entre filas de 20px */
    height: 450px; /* Altura fija de 450px */
    overflow-y: auto; /* Activa el scroll vertical si es necesario */
}

.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: 50%; /* Imágenes ocupan todo el ancho del contenedor */
    border-radius: 10px; /* Bordes redondeados */
    margin-bottom: 1ex; /* Margen inferior de 1ex */
    border: 3px solid transparent; /* Borde de 3px invisible */
    justify-content: center;
}

.proyectos nav a:hover img { /* Estilo hover para las imágenes en .proyectos */
    filter: blur(5px); /* Desenfoque de 5px al pasar el ratón */
    opacity: 40%; /* 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(230, 230, 230); /* Color de fondo gris claro */
    font-size: 14px; /* Tamaño de fuente de 14px */
    font-weight: bold; /* Texto en negrita */
    color: hsl(321, 96%, 50%); /* Texto naranja */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor de mano al pasar por encima */
}

button:hover { /* Estilo hover para los botones */
    background-color: #f80597; /* Fondo cambia a naranja */
    color: rgb(96, 242, 235); /* 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: 8fr; /* 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 */
    }
}