/* Reset básico */
*{
 margin: 0;
 padding: 0; 
 box-sizing: border-box; 
}
/* Variables */ 
:root { 
--color-principal: #df7008; 
--color-secundario: #ecf0f1; 
--fuente: "Segoe UI", sans-serif; 
}

/* General */ 
body { 
font-family: var(--fuente);
background-color: var(--color-secundario); 
color: var(--color-principal); 
line-height: 1.6;
/* Imagen de fondo */
background-image: url('img/fondo.webp'); /*ruta a la imagen*/
background-size: cover; /* Asegura que la imagen cubra toda el área */
background-attachment: fixed; /* Hace que la imagen de fondo sea fija */
background-position: center; /* Centra la imagen de fondo */
background-repeat: no-repeat; /* Evita que la imagen se repita */
min-height: 100vh; /* Asegura que el cuerpo ocupa al menos toda la altura de la ventana */
overflow-x: auto; /* Evita el desbordamiento horizontal */
min-height: 100dvh; /* dvh = dynamic viewport height */
}
/* Elimina background-attachment: fixed en móviles */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
}
/* Desactiva las animaciones en pantallas pequeñas para mejorar el rendimiento */
@media (max-width: 600px) {
  article {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* Header */ 
header { 
  position: sticky; /* Fijo en la parte superior. sticky y no fixed */
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 1000; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  background-color: var(--color-principal); 
  color: white; 
  padding: 10px 20px;
  /* Aceleración por hardware en el header para eliminar el LAG/JANK */
  transform: translate3d(0, 0, 0);
  z-index: 9999; /* Asegura que el header esté por encima de otros elementos */
  will-change: transform; /* Indica al navegador que este elemento cambiará */
 
}
/* Estilos del logotipo*/ 
.logo-img { 
height: 50px; /*Ajusta según sea necesario*/ 
width: auto;
}
/* Contenedor del logotipo y el título*/
.logo-link{
  display: flex; 
  align-items: center; 
  text-decoration: none; /*Elimina el subrayado del enlace*/ 
  color: white; /*Color del texto del enlace */
}
/* Estilos del título en el header (Bruno Delgado Centrado) */ 
.header-title {
  margin: 0 auto; 
  font-size: 30px; 
  font-weight: normal;
}

/* Navegación */ 
nav { 
  background-color: var(--color-principal); 
}
/* Estilos de los enlaces de navegación */ 
nav ul { 
  display: flex; 
  gap: 15px; 
  list-style: none; 
}
/* Estilos de los enlaces */
 nav a {
   color: white; 
   text-decoration: none; 
  }
/* Efecto hover en los enlaces */ 
nav a:hover { 
  text-decoration: underline; 
  color: #ffffff; 
}
/* Estilos de los enlaces visitados */ 
nav a:visited { 
  color: #02eeff; 
}
/* Contenido principal*/
main { 
  padding-top: 80px; /*Espacio para el header fijo */ 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 20px;
}
/* Secciones */ 
section { 
  border-radius: 8px; 
  background-color: white; 
  padding: 20px; 
  margin-bottom: 60px; 
  margin-top: 20px; /*Espacio entre secciones*/
  padding-top: 40px; /*Espacio para el header fijo */
  
}
/* Hero*/ 
.hero { 
  margin-top: 100px; /*Ajusta según la altura del header */ 
  text-align: left; 
  margin: 40px 0; 
}
/* Portafolio con Grid */ 
.galeria { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 20px; 
}
/* Asegura que todos los artículos tengan la misma altura*/ 
article { 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: flex-start; /*Alineación izquierda*/ 
  text-align: left; 
  background-color: white; 
  padding: 10px; 
  border: 1px solid #ccc; 
  min-height: 350px; /*Ajusta según el contenido*/ 
  opacity: 0; /*Animación de entrada */ 
  transform: translateY(20px); 
  animation: fadeInUp 0.6s ease forwards; 
}
/* Establece altura fija para la imagen*/ 
article img { 
  height: 200px; 
  width: 100%; 
  object-fit: contain; /*Muestra toda la imagen sin recortarla*/ 
  margin-bottom: 10px; 
  background-color: #ffffff; /*Opcional: para rellenar el espacio vacío */ 
}
/* Espaciado entre los elementos del artículo */ 
article h3 { 
  margin-bottom: 10px; 
}
/* Asegura que el párrafo ocupe el espacio disponible */ 
article p { 
  flex-grow: 1; 
  margin-bottom: 10px; 
}
/* Estilos del botón*/ 
article a { 
  align-self: flex-start; /*Alinea el botón a la izquierda */ 
  padding: 8px 12px; 
  background-color: var(--color-principal); 
  color: white; 
  text-decoration: none; 
  border-radius: 4px; 
}
/* Efecto hover en el botón */ 
article a:hover { 
  background-color: #34495e; }
/* Retraso en la animación para cada artículo */ 
article:nth-child(1) { 
  animation-delay: 0.1s; 
} 
article:nth-child(2) { 
  animation-delay: 0.2s; 
} 
article:nth-child(3) { 
  animation-delay: 0.3s; 
} 
article:nth-child(4) { 
  animation-delay: 0.4s; 
} 
article:nth-child(5) { 
  animation-delay: 0.5s; 
} 
article:nth-child(6) { 
  animation-delay: 0.6s; 
} 
article:nth-child(7) { 
  animation-delay: 0.7s; 
} 
article:nth-child(8) { 
  animation-delay: 0.8s; 
} 
article:nth-child(9) { 
  animation-delay: 0.9s; 
} 
article:nth-child(10) { 
  animation-delay: 1s; 
}
/* Definición de la animación */
@keyframes 
fadeInUp { to { 
  opacity: 1; 
  transform: translateY(0); 
  } }
/* Estilos del pie de página */ 
footer { 
  text-align: center; 
  padding: 20px; 
  background-color: var(--color-principal); 
  color: white; 
  margin-top: 40px; 
}
/* Estilos de los enlaces en el pie de página */ 
footer a { 
  color: white; 
  text-decoration: none; 
}
/* Efecto hover en los enlaces del pie de página */ 
footer a:hover { 
  text-decoration: underline; 
  color: #bdc3c7; 
}
/* Estilos de los enlaces visitados en el pie de página */ 
footer a:visited { 
  color: #95a5a6; 
}
/* Formulario */ 
label { 
  display: block; 
  margin-bottom: 5px; 
  font-weight: bold; 
}
/* Estilos de los campos del formulario */ 
input, textarea { 
  padding: 10px; 
  border: 1px solid #ccc; 
  font-family: var(--fuente); 
  font-size: 16px; 
}
/* Estilos al enfocar los campos del formulario */ 
input:focus, textarea:focus { 
  border-color: var(--color-principal); 
  outline: none; 
}
/* Asegura que los campos del formulario ocupen todo el ancho */ 
input { 
  width: 100%; 
  margin-bottom: 10px; 
}
/* Estilos específicos para el textarea */ 
textarea { 
  resize: vertical; 
  min-height: 100px; 
}
/* Estilos del botón */ 
button { 
  padding: 10px; 
  background-color: var(--color-principal); 
  color: white; 
  border: none; 
  cursor: pointer; 
  font-size: 16px; 
}
/* Efecto hover en el botón */ 
button:hover { 
  background-color: #34495e; 
}
/* Espaciado entre los elementos del formulario */ 
form { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}
/* Responsive */ 
@media (max-width: 600px) { 
  nav ul { 
    flex-direction: column; 
    gap: 10px;
}
/* Ajusta la galería a una sola columna en pantallas pequeñas */ 
.galeria { 
  grid-template-columns: 1fr; 
} 
/* Centrar el nombre también en móviles */
.header-title {
    margin: 10px auto; 
    text-align: center;
}
}