/*
  Reseteo básico de estilos para HTML y Body
  Este reseteo busca eliminar las inconsistencias entre navegadores
  y proporcionar un punto de partida limpio para tu diseño.
*/

/* Reseteo para todos los elementos */
/* Asegura que el padding y el border se incluyan dentro del ancho y alto */
/* Elimina los márgenes predeterminados */
/* Elimina el relleno predeterminado */
*,
*::before,
*::after {
  box-sizing: border-box; 
  margin: 0;             
  padding: 0;            
}

/* Reseteo específico para el elemento HTML */
/* Establece el tamaño de fuente base al 100% (generalmente 16px) */
/* Permite un desplazamiento suave al hacer clic en enlaces ancla */
html {
  font-size: 100%;       
  scroll-behavior: smooth; 
}

/* Reseteo y estilos básicos para el elemento Body */
/* Establece una fuente genérica como predeterminada */
/* Establece un interlineado legible */
/* Establece un color de texto predeterminado */
/* Establece un color de fondo predeterminado (puedes cambiarlo) */
/* Evita el scroll horizontal innecesario */
body {
  font-family: sans-serif; 
  line-height: 1.5;       
  color: #333;           
  background-color: #f4f4f4; 
  overflow-x: hidden;     
}

/* Reseteo para elementos de texto comunes */
/* Añade un margen inferior para separar los bloques de texto */
h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 1rem;   
}
/* Elimina los estilos de lista predeterminados (puntos o números) */
/* Elimina el padding izquierdo predeterminado de las listas */
ul, ol {
  list-style: none;      
  padding-left: 0;       
}
/* Elimina el subrayado predeterminado de los enlaces */
/* Hereda el color del texto del padre por defecto */
a {
  text-decoration: none; 
  color: inherit;        
}
/* Asegura que las imágenes no excedan el ancho de su contenedor */
/* Mantiene la proporción de aspecto de la imagen */
/* Elimina el espacio extra debajo de las imágenes (comportamiento inline por defecto) */
img {
  max-width: 100%;      
  height: auto;         
  display: block;        
}

/* Reseteo para formularios (puedes extenderlo según tus necesidades) */
/* Hereda la fuente del body */
/* Hereda el tamaño de fuente del body */
/* Elimina los bordes predeterminados */
/* Elimina el contorno al enfocar (puedes añadir un estilo visual personalizado) */
/* Añade un relleno básico */
/* Elimina los márgenes predeterminados */
input,
button,
textarea,
select {
  font-family: inherit;   
  font-size: inherit;     
  border: none;          
  outline: none;         
  padding: 0.5rem;      
  margin: 0;             
}
/* Cambia el cursor al pasar por encima de los botones */
button {
  cursor: pointer;      
}
/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------BACKGROUN PARA TODAS LAS PÁGINAS------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

/* Estilo general para todas las páginas */
body {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh; /* esto asegura que el body no crezca innecesariamente */
  overflow-x: hidden; /* por si hay algún desborde horizontal */
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color:#ede4f5;/*#d4b2f1;/*#C0C0C0; /*#fbe471;*/
  line-height: 1.5;
  text-shadow:
  -1.5px -1.5px 0 #000,
  1.5px -1.5px 0 #000,
  -1.5px 1.5px 0 #000,
  1.5px 1.5px 0 #000;
}

/* Fondo para index.php */
/*body.index {
  background-image: url("../images/dunas-fibra-blue.avif");
}**/

body.index {
  position: relative; /* Necesario para posicionar absolutamente el pseudo-elemento */
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color:#ede4f5;
  line-height: 1.5;
  text-shadow:
  -1.5px -1.5px 0 #000,
  1.5px -1.5px 0 #000,
  -1.5px 1.5px 0 #000,
  1.5px 1.5px 0 #000;
}

body.index::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/dunas-fibra-blue.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.3); /* Aplica el filtro SOLO a la imagen de fondo */
  z-index: -1; /* Coloca el pseudo-elemento detrás del contenido del body */
}

/* Fondo para about.php */
body.about {
  position: relative; /* Necesario para posicionar absolutamente el pseudo-elemento */
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color:#ede4f5;
  line-height: 1.5;
  text-shadow:
  -1.5px -1.5px 0 #000,
  1.5px -1.5px 0 #000,
  -1.5px 1.5px 0 #000,
  1.5px 1.5px 0 #000;
}

body.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/alfombra-fibra.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.3); /* Aplica el filtro SOLO a la imagen de fondo */
  z-index: -1; /* Coloca el pseudo-elemento detrás del contenido del body */
}

/* Fondo para proyecto.php */
body.proyectos {
  position: relative; /* Necesario para posicionar absolutamente el pseudo-elemento */
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color:#ede4f5;
  line-height: 1.5;
  text-shadow:
  -1.5px -1.5px 0 #000,
  1.5px -1.5px 0 #000,
  -1.5px 1.5px 0 #000,
  1.5px 1.5px 0 #000;
}

body.proyectos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/fondo-linea-onda-abstracta-hermoso-efecto-luz_541170-821.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.6); /* Aplica el filtro SOLO a la imagen de fondo */
  z-index: -1; /* Coloca el pseudo-elemento detrás del contenido del body */
}

/* Fondo para certificados.php */
body.certificados {
  background-image: url("../images/fondo-linea-onda-abstracta-hermoso-efecto-luz_541170-821.avif");
}

/* Fondo para contacto.php */
body.proyecto {
  position: relative; /* Necesario para posicionar absolutamente el pseudo-elemento */
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color:#ede4f5;
  line-height: 1.5;
  text-shadow:
  -1.5px -1.5px 0 #000,
  1.5px -1.5px 0 #000,
  -1.5px 1.5px 0 #000,
  1.5px 1.5px 0 #000;
}

body.contacto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/fibra-color-vertical.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.4); /* Aplica el filtro SOLO a la imagen de fondo */
  z-index: -1; /* Coloca el pseudo-elemento detrás del contenido del body */
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------ESTILOS PARA HEADER Y NAV MENU  ------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

.site-header {
  background-color: #222;
  color:#ede4f5;/*#db9adf;/*#C0C0C0; /*#fbe471;*/
  /*color: white;*/
  padding: 10px 0;
  position: fixed; /* Fija el elemento en una posición relativa a la ventana del navegador. Aunque el usuario haga scroll, el footer permanecerá en su lugar. */
  /*bottom: 0;        /* Especifica que el borde inferior del elemento debe estar pegado al borde inferior de la ventana del navegador. */
  /*left: 0;          /* Especifica que el borde izquierdo del elemento debe estar pegado al borde izquierdo de la ventana del navegador. */
  width: 100%;       /* Hace que el ancho del footer ocupe el 100% del ancho de su contenedor padre (en este caso, la ventana del navegador debido a 'position: fixed'). */
  /*background-color: #222; /* Establece el color de fondo del footer a un gris oscuro (código hexadecimal #222). */
  /*color: white;      /* Establece el color del texto dentro del footer a blanco. */
  /*text-align: center; /* Centra horizontalmente el texto y otros elementos en línea dentro del footer. */
  /*padding: 10px 0;    /* Añade un relleno (espacio interior) de 10 píxeles en la parte superior e inferior del footer, y 0 píxeles a la izquierda y a la derecha. */
  /*font-size: 0.9em;   /* Establece el tamaño de la fuente del texto dentro del footer al 90% del tamaño de fuente heredado de su elemento padre. 'em' es una unidad relativa al tamaño de fuente del elemento padre. */
  z-index: 100;      /* Especifica el orden de apilamiento del elemento. Un valor más alto significa que el elemento se mostrará por encima de otros elementos con valores de z-index más bajos. Esto asegura que el footer se mantenga visible incluso si otros elementos se superponen. */

}


.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

.nav-links {
  display: flex;
  justify-content: space-between;  /* Esto asegura que el logo y los links estén a los extremos */
  align-items: center;            /* Centra los elementos verticalmente */
  max-width: 960px;
  margin: auto;
  padding: 0 20px;
}

.logo {
  font-size: 1.5em;
  /*font-weight: bold;*/
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  /*color: white;*/
  color:#ede4f5;/*#e5b0f0;/*#C0C0C0; /*#fbe471;*/
  text-decoration: none;
  font-weight: bold;
}

.nav-links li a:hover {
  text-decoration: underline;
}

.nav-links a {
  text-decoration: none;
  color: #6dd8f3;
  font-weight: bold;
}

.nav-links a:hover {
  text-decoration: underline;
}

.nav-links {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links li {
  display: inline-block;
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------ESTILOS PARA TOGGLE Y COMPORTAMIENTOS EN PANTALLAS GRANDES----------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

.nav-toggle {
  display: none; /* Ocultar por defecto en pantallas grandes */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.nav-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
}

/* Estilos para el menú desplegado (puedes ajustarlos) */
.nav-links.open {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinea los elementos a la izquierda cuando se despliega */
  width: 100%;
  background-color: #333; /* Un fondo para el menú desplegado */
  position: absolute;
  top: 100%; /* Debajo del header */
  left: 0;
  padding: 20px;
  z-index: 99; /* Asegura que esté por encima de otros elementos */
}

.nav-links.open li {
  display: block;
  width: 100%;
}

.nav-links.open li a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #555; /* Separador entre los enlaces */
}

.nav-links.open li:last-child a {
  border-bottom: none;
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------ESTILOS PARA TOGGLE Y OCULTAR EN MENÚ ORIGINAL ---------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

/* Media query para mostrar el botón de toggle y ocultar el menú en pantallas pequeñas */
@media (max-width: 768px) {
  .nav {
      position: relative; /* Necesario para posicionar el menú desplegable */
  }

  .nav-links {
      display: none; /* Ocultar el menú por defecto en pantallas pequeñas */
      flex-direction: column; /* Asegurar que los enlaces se apilen */
      width: 100%;
      align-items: flex-start;
  }

  .nav-toggle {
      display: block; /* Mostrar el botón de toggle */
  }
}


/* Estilos para el botón de toggle cuando el menú está abierto (opcional) */
.nav-toggle.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------ESTILOS PARA FOOTER PARA MANTENERLO AL FINAL PEGADO-----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/


.site-footer {
  position: fixed; /* Fija el elemento en una posición relativa a la ventana del navegador. Aunque el usuario haga scroll, el footer permanecerá en su lugar. */
  bottom: 0;        /* Especifica que el borde inferior del elemento debe estar pegado al borde inferior de la ventana del navegador. */
  left: 0;          /* Especifica que el borde izquierdo del elemento debe estar pegado al borde izquierdo de la ventana del navegador. */
  width: 100%;       /* Hace que el ancho del footer ocupe el 100% del ancho de su contenedor padre (en este caso, la ventana del navegador debido a 'position: fixed'). */
  background-color: #222; /* Establece el color de fondo del footer a un gris oscuro (código hexadecimal #222). */
  color: white;      /* Establece el color del texto dentro del footer a blanco. */
  text-align: center; /* Centra horizontalmente el texto y otros elementos en línea dentro del footer. */
  padding: 10px 0;    /* Añade un relleno (espacio interior) de 10 píxeles en la parte superior e inferior del footer, y 0 píxeles a la izquierda y a la derecha. */
  font-size: 0.9em;   /* Establece el tamaño de la fuente del texto dentro del footer al 90% del tamaño de fuente heredado de su elemento padre. 'em' es una unidad relativa al tamaño de fuente del elemento padre. */
  z-index: 100;      /* Especifica el orden de apilamiento del elemento. Un valor más alto significa que el elemento se mostrará por encima de otros elementos con valores de z-index más bajos. Esto asegura que el footer se mantenga visible incluso si otros elementos se superponen. */
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------TRABAJAMOS CON CLASS CONTAINER DEL MAIN-----------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

 .container {
  display: flex;
  justify-content: center; /* centra verticalmente */
  flex-direction: column;
  align-items: center;     /* centra horizontalmente */
  text-align: center;      /* centra el texto */
  min-height: 100vh;       /* asegura que ocupe toda la altura de la pantalla */
} 

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------        TRABAJAMOS CON CONTENEDOR HERO        ----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/



.hero {
  display: flex;
  flex-direction: column;
/*  padding-top: 25%;
  padding-bottom: 20%;
*/  justify-content: center; /* centra verticalmente */
  align-items: center;     /* centra horizontalmente */
  text-align: center;      /* centra el texto */
  min-height: 100vh;       /* asegura que ocupe toda la altura de la pantalla */
} 

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------TRABAJAMOS CON BTN INDEX PHP ARCHIVO   -----------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/


.btn {
  width: 50%;
  background-color: #6f6fd5;
  color: white;
  text-shadow: -1px -1px 0 black;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  border: 2px solid #064b46; /* borde marrón oscuro */
}


.btn over {
    background-color: #0056b3;

}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------      CUADRÍCULAS PARA ORGANIZAR PROYECT     -----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

.row {
  width: 70%;
  display: flex; /* Convierte el contenedor en un contenedor Flex */
  flex-direction: row; /* Los elementos se organizarán en fila (por defecto) */
  /* Otras propiedades para controlar el espaciado y la alineación: */
  justify-content: space-between; /* Espacio igual entre los elementos */
  align-items: center; /* Centra los elementos verticalmente */
}

.col1, .col2 {
  /* Puedes definir anchos si lo necesitas */
   width: 50%; 
  /* O dejar que los elementos se distribuyan automáticamente */
}


/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------            AJUSTES PARA VER EN  TABLET      -----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/


/* Para tablets (orientación vertical) - Puedes ajustar según necesites */
@media (min-width: 769px) and (max-width: 992px) {

  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 25%;
    padding-bottom: 25%;
    justify-content: center; /* centra verticalmente */
    align-items: center;     /* centra horizontalmente */
    text-align: center;      /* centra el texto */
    min-height: 100vh;       /* asegura que ocupe toda la altura de la pantalla */
  } 

}



/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------   Para pantallas más pequeñas (móviles)     -----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

/* Para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 25%;
    padding-bottom: 25%;
    justify-content: center; /* centra verticalmente */
    align-items: center;     /* centra horizontalmente */
    text-align: center;      /* centra el texto */
    min-height: 100vh;       /* asegura que ocupe toda la altura de la pantalla */
  } 
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------TODOS LOS ESTILOS PARA EL FORMULARIO--------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

  /*position: relative;
  z-index: 1;
*/

.contact-form {
  /*max-width: 1500px;*/
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1%;
}

.contact-form label {
  /*font-weight: bold;*/
  font-size: 1em;
  color: #bcecfe;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  font-size: 1em;
  border: none;
  border-radius: 6px;
  outline: none;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
}

.contact-form button.btn {
  align-self: center; /* Centra el botón horizontalmente dentro de .contact-form */
  background-color: #4a40fa;
  color: white;
  padding: 12px 24px;
  border: 2px solid #0b0699;
  border-radius: 8px;
  font-weight: bold;
  text-shadow: -1px -1px 0 black;
  cursor: pointer;
}

.contact-form button.btn:hover {
  background-color: #abf5a4;
}