/* VARIABLES GENERALES COLOR */
:root {
   --color-bottom-stroke: #D29E2E;
   --color-bottoms: #ffcc66;
   --color-bottoms-light: #FEF5E6;
   --color-background-grey: #C4C4C4;
   --color-background-black: #2B2B2B;
   --color-background-white: #ffffff; 
   /***************FONT SIZES**************/
   --font-size-h1: 36px;
   --font-size-h2: 28px;
   --font-size-h3: 24px;
   --font-size-h4: 20px;
   --font-size-h5: 18px;
   --font-size-p: 16px;
   /*FONTS */
   --font-primary: 'Montserrat', sans-serif;
   --font-secondary: 'Libre Baskerville', serif;
}

* {
   box-sizing: border-box;
}

body, html{
   background-color: var(--color-background-white); 
   color: var(--color-background-black);
   font-size: var(--font-size-p);
   line-height: 1.5;
   height: 100%;
   margin: 0;
}

/* HEADER - NAV */
.--main-header{
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-family: var(--font-primary);
   padding: 16px 32px;
   background-color: var(--color-background-white);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombreado header-nav */
   overflow-x: hidden; 
}

/*LOGO BLACK NAV*/
.--logo-nav {
   width: 120px;
   height: 110px;
}
/* BURGER */
.burger-menu {
   display: none;
   font-size: var(--font-size-h2);
   background: none;
   border: none;
   cursor: pointer;
}
/* ADAPTATION */
@media (max-width: 768px) {
   .nav-links {
       display: none;
       flex-direction: column;
       position: absolute;
       top: 80px;
       right: 0;
       background: var(--color-background-white);
       width: 100%;
       padding: 20px 0;
       text-align: center;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   }

   .nav-links.active {
       display: flex;
   }

   .burger-menu {
       display: block;
   }
}

/*LINKS BARRA DE NAVEGACION*/
.nav-links {
   list-style: none;
   display: flex;
   gap: 60px;
}

.nav-links li a {
   text-decoration: none;
   color: var(--color-background-black);
   font-weight:normal;
   transition: color 0.3s;
}

.nav-links li a:hover {
   color: var(--color-bottom-stroke);
}

/*MAIN PART*/

 #--contacto-contenedor {
   width: 80%; /* Para que se adapte mejor a distintos tamaños de pantalla */
   max-width: 800px; /* Limita el ancho máximo */
   height: auto; /* Ajusta la altura según el contenido */
   margin: 40px auto; /* Centra horizontalmente */
   display: flex;
   flex-direction: column; /* Alinea los elementos en columna */
   align-items: center; /* Centra el contenido horizontalmente */
   justify-content: center; /* Centra verticalmente */
   text-align: center;
} 

h2{
   font-family: var(--font-secondary);
   font-size: var(--font-size-h2);
}


.--text-container {
   width: 50%;
   margin: 50px auto;
   text-align: center;
}



form {
   display: flex;
   flex-direction: column; /* Los elementos del formulario en columna */
   align-items: center; /* Centra los inputs */
   width: 100%;/*Ocupará el ancho del contenedor*/
   overflow-x: hidden; 
}
.input-container{
   display: flex;
   flex-direction: column; /* Pone el label arriba del input */
   align-items: flex-start; /* Alinea a la izquierda */
   margin-left: 100px; /* Aplica margen a todo el bloque */
   width: 90%; /* Ajusta el ancho del contenedor */
   max-width: 500px; /* Limita el ancho máximo */
   font-size: var(--font-size-h3);
}

input {
   width: 100%; /* Ajustable para pantallas más pequeñas */
   max-width: 500px; /* No excede el ancho definido */
   height: 86px;
   border-radius: 10px;
   padding: 10px;
   font-size: 24px;
   border:1px solid #ccc;
   margin-top: 20px; 
   margin-bottom: 20px;
   text-align: left;
}

label {
   font-size: var(--font-size-h5);
   margin-top: 10px;
   font-family: var(--font-primary);
}

input::placeholder {
   font-size: var(--font-size-h5); 
   color:var(--color-background-grey);
}

#mensaje {
   width: 100%;
   max-width: 700px;
   height: 355px;
   margin-bottom: 65px;
}

.--form-button {
   font-family: var(--font-primary);
   background-color:  var(--color-bottoms);
   color: var(--color-background-black);
   border: 2px solid var(--color-bottoms);
   border-radius: 10 px;
   max-width: 100px;
   font-size: 18px;
   transition: 0.3s;
   margin-top: 20px;
   cursor: pointer;
   text-align: center;
   width: 138px;
   height: 40px;

}
.--form-button:hover {
   background-color: var(--color-background-white);
   color: var(--color-background-black);
}

.--logo-form {

   margin-top: 10px;
   width: 120px;
   padding-right:500px;  
}
#ok-mesaje{
   display: none;
   font-size: 36px; 
   color:var(--color-bottom-stroke); 
   text-align: center;
}
 
 /*FOOTER*/

.--main-footer {
   background-color: var(--color-background-black);
   display: flex;
   justify-content: space-between; /* Distribuye los elementos horizontalmente */
   align-items: center; /* Alinea los elementos verticalmente */
   flex-wrap: wrap; /* Permite que los elementos se acomoden si no caben en una línea */
   color: var(--color-background-white);
   padding: 20px;
   overflow-x: hidden; 
 }
 .--logo-footer {
   display: flex;
   align-items: center; /* Alinea logo y dirección en una línea */
   gap: 60px; /* Espacio entre el logo y el address */
   
}
 
 .--logo-footer img {
   max-width: 120px; /* Ajusta el tamaño del logo */
 }
 
 .--address {
   display: flex;
   flex-direction: column; /* Coloca los textos en columna */
   font-style: normal;
   gap: 5px; /* Espaciado entre líneas de dirección */
   list-style: none;
}

 .--footer-links ul {
   list-style: none;
   padding: 30px;
   display:block;
   gap: 30px; /* Espaciado entre enlaces */
 }
 
 .--footer-links ul li a {
   color: var(--color-background-white);
   text-decoration: none;
   transition: color 0.3s;
 }
 
 .--footer-links ul li a:hover {
   color: var(--color-bottom-stroke);
 }
 
 .--main-footer p {
   text-align: center;
   width: 100%; /* Asegura que el copyright ocupe toda la fila */
   margin-top: 10px;
 }
 .--rrss-footer i {
 line-height: 100px;
 color:var(--color-background-white);
 font-size: 2rem;
 padding: 50px 50px;
}
.--rrss-footer i:hover{
   color:var(--color-bottom-stroke)
}
 
/* Media queries */


/* Pantallas pequeñas (móviles) */
@media (max-width: 768px) {
   /* Cambiar la alineación del logo en el header */
   .--logo-nav {
       width: 100px; /* Reduce tamaño del logo */
       height: 80px;
   }

   .nav-links {
       flex-direction: column; /* Alineo los links en una columna */
       gap: 20px;
       text-align: center;
       display: none;
   }
      .nav-links.active {
      display: block;

      }

   /* Modificar tamaño de la fuente en los inputs */
   input {
       font-size: 20px; /* Reducir tamaño de la fuente para pantallas pequeñas */
   }

   /* Ajustar márgenes y tamaños de los formularios */
   .input-container {
       width: 90%; /* Los campos del formulario ocupan el 100% */
       margin-left: 0; /* Eliminar márgenes laterales */
   }

   .--form-button {
      
       max-width: none; /* Eliminar límite de tamaño */
   }

   .--logo-form {
       width: 100px;
       margin-top: 20px; /* Añadir espacio entre el logo y el formulario */
       align-self: center; /* Centrar el logo */
   }

   .--text-container {
       width: 90%; /* Reducir el ancho de los textos en el formulario */
   }

   /* Ajustar el pie de página */
   .--main-footer {
       flex-direction: column;
       text-align: center;
   }

   .--logo-footer {
       gap: 20px; /* Reducir espacio entre el logo y la dirección */
       flex-direction: column;
       align-items: center;
   }

   .--address {
       gap: 10px;
   }

   .--rrss-footer i {
       font-size: 1.5rem; /* Reducir tamaño de los iconos */
       padding: 30px;
   }
}

/* Pantallas grandes (tabletas y PCs) */
@media (min-width: 768px) and (max-width: 1200px) {
   /* Logo y enlaces del header */
   .--logo-nav {
       width: 150px;
       height: 120px;
   }

   .nav-links {
       flex-direction: row;
       gap: 60px;
      display: none;
   }
      .nav-links.active {
         display: block;
   
      }

   .input-container {
       width: 90%; /* Usar el 90% del ancho en pantallas más grandes */
   }

   .--form-button {
       width: 150px;
       max-width: 150px; /* Asegura que el botón no se expanda demasiado */
   }

   /* Logo en el formulario */
   .--logo-form {
       align-self: flex-end; /* Mover el logo a la derecha */
   }

   .--main-footer {
       flex-direction: row; /* Mostrar los elementos del footer en fila */
       justify-content: space-between; /* Espacio entre los elementos */
   }

   .--logo-footer {
       gap: 60px;
       flex-direction: row;
   }
}