/* Reset básico */
*{
 margin: 0;
 padding: 0; 
 box-sizing: border-box; 
}
/* Variables */ 
:root { 
--color-principal: #df7008c2; 
--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');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Se desactiva en móviles/tablets */
  min-height: 100dvh; /* Altura dinámica compatible con móviles y tablets */
  overflow-x: auto;
}

/* Evita lag en móviles */
@media (max-width: 600px) {
  body {
    background-attachment: scroll;
  }

  header {
    position: sticky;
    top: 0;
  }

  article {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Evita lag en tablets */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    background-attachment: scroll;
  }

  header {
    position: sticky;
    top: 0;
  }

  article {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Mejora rendimiento en todos los dispositivos */
article {
  will-change: transform, opacity;
}
/* Header */ 
header {
  position: sticky;
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 1000;
  backdrop-filter: blur(10px); /* Efecto de desenfoque */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #df7008c2; /* Color de fondo con transparencia */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  height: 120px; /* Altura fija del header */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* 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 { 
  font-size: 32px; 
  font-weight: 600;
  margin: 10px auto;
  text-align: center;
  color: white;
  flex-grow: 1; /* Permite que el título crezca y ocupe espacio disponible */
  padding: 0 20px; /* Espaciado lateral para evitar que el texto toque los bordes */
}
/* Navegación */ 
nav { 
  list-style: none;
  display: flex; 
  align-items: center;
  background-color: #df700800; 
}
/* Estilos de los enlaces de navegación */ 
nav ul { 
  display: flex; 
  gap: 25px; 
  list-style: none; 
}
/* Estilos de los enlaces */
 nav a {
   color: #ffffff; 
   text-decoration: none; 
   font-weight: 500;
   font-size: 16px;
   position: relative;
   padding: 5px 0;
   transition: color 0.3s ease;

  }
/* Línea animada debajo de los enlaces */
.nav-links a::after { 
  content: ''; 
  position: absolute; 
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ecf0f1; 
  transform: scaleX(0); 
  transform-origin: bottom right; 
  transition: transform 0.3s ease-out;  
}
/* Efecto hover en los enlaces */
nav a:hover::after { 
  transform: scaleX(1); 
  transform-origin: bottom left; 
}
/* 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; 
}
/* Subrayado animado en enlaces del footer */
footer a {
  position: relative;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

footer a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background-color: white;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

footer a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* 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; 
} 
}