@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
  --color_text-primary: #024CAA;
  --color_text-secundary: #024CAA; /* 101E2C */
  --color_text-tertiary: #024CAA;
  --main_color-primary: #024CAA;
  --main_color-secundary: write; /* FAFBFE */
  --background-color: #D8C4B6;
  --lowText_font_size: 16px;
  --text_size_title: 40px;
  --text_title_card: 24px;
  --text_title_cardv2: 20px;
  --text_paragraph: 16px;
  --box_shadow-primary: 0px 6px 50px -20px #213555;
}

header{
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: #fff; /* Asegura que el fondo del header sea visible */
}

.container__header{
  max-width: 1200px;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
}

.logo{
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.logo img{
  width: 70px;
  max-width: 200px; /* Establece un tamaño máximo */
  height: auto;
}

.menu{
  display: flex;
  align-items: center;
}

.menu nav{
  margin: 0px 20px;
}

.menu nav ul{
  display: flex;
}

.menu nav ul li{
  list-style: none;
  margin: 20px 16px;
}

.menu nav ul li a{
  color: var(--color_text-secundary); /*Variable*/
  font-size: var(--lowText_font_size); /*Variable*/
  position: relative;
}

.menu nav ul li a:hover{
  color: var(--color_text-primary); /*Variable*/
}

.btn__quote{
  display: block;
  padding: 8px 40px;
  border: 2px solid var(--main_color-primary); /*Variable*/
  border-radius: 8px;
  font-weight: 500;
  margin: 0px 20px;
  transition: all 300ms;
  color: #192655;
}

.btn__quote:hover{
  color: white;
  background: var(--main_color-primary); /*Variable*/
}

/* Estilos del formulario */

/* Reset básico (opcional) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
  }
  
  /* Fuente base y color de fondo */
  body {
    font-family: Arial, sans-serif;
    background-color: write; /* Tonalidad beige aproximada */
    color: var(--color_text-primary);  
  }
  
  /* Sección principal */
  .contact-section {
    position: relative;
    min-height: 100vh;
    padding: 2rem;
  }
  
  /* Título de fondo grande ("Contact") */
  .contact-background {
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-size: 5rem;
    font-weight: 700;
    padding-top: 4rem;
    padding-left: 10rem;
    color: #192655; /* Muy claro para simular un texto de fondo #07385456*/
    pointer-events: none;       /* Para que no interfiera con clics */
  }
  
  /* Contenedor del formulario y la barra lateral */
  .form-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 15rem; /* Deja espacio para que el título no se superponga */

  }
  
  /* Columna izquierda: botones + dirección */
  .sidebar {
    flex: 1 1 250px;
    max-width: 250px;
    margin-right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .sidebar h1{
    color: var(--main_color-primary);
  }
  
  /* Dirección */
  .address-info p {
    line-height: 1.6;
  }
  
  /* Estilos de los botones */
  .btn-black,
  .btn-light {
    border: none;
    cursor: pointer;
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    transition: background-color 0.3s ease;
  }
  
  .btn-black {
    background-color: var(--color_text-secundary);
    color: #fff;
  }
  
  .btn-black:hover {
    background-color: var(--color_text-primary);
  }
  
  .btn-light {
    background-color: #f9f9f9;
    color: #192655;
    border: 1px solid #ccc;
  }
  
  .btn-light:hover {
    background-color: #eee;
  }
  
  /* Formulario principal */
  .contact-form {
    flex: 2 1 500px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  /* Agrupar elementos en línea (Name/Category, Email/Phone) */
 /* Fila con dos columnas (Name/Category y Email/Phone) */
.inline-group {
  display: flex;        /* Coloca los elementos en fila */
  gap: 2rem;            /* Espacio horizontal entre columnas */
  margin-bottom: 1rem;  /* Separación entre filas */
}

.inline-group .form-group {
  flex: 1;              /* Cada .form-group ocupa el mismo ancho dentro de la fila */
}

/* Ajusta la anchura de los inputs para que no se limiten al 35% */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;          /* Ocupan todo el ancho disponible dentro del form-group */
  margin-bottom: 0.5rem;
  border: none;
  border-bottom: 1px solid #192655 !important;
  outline: none;
  background-color: transparent;
  font-size: 1rem;
  padding: 0.6rem 0;
  resize: none;
}

textarea,
input{
  color: #192655;
}


/* 2. Mantener los labels arriba y en negrita */
label {
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 0.2rem; /* Asegurar pequeña separación entre label y el input */
  display: inline-block;
}

/* 3. Opcional: si quieres una línea horizontal que abarque cada “grupo” 
   (por ejemplo, Name/Category como en la imagen), puedes usar esta regla: 
.inline-group > div {
  border-bottom: 1px solid #333; 
  padding-bottom: 1rem; 
  margin-bottom: 1rem;
}*/

/* Pero en este caso, si haces esto, recuerda quitar el border-bottom al input 
   (porque sino tendrías dos líneas). Elije uno u otro según el estilo que quieras. */
  
/* 4. Ajustes generales */
.contact-form {
  gap: 1rem;  /* Un poco más de espacio entre grupos si lo deseas */
}

  /* Estilo del botón de enviar */
  .contact-form button[type="submit"] {
    align-self: flex-start;
    margin-top: 1rem;
    display: block;
    padding: 8px 40px;
  
    border-radius: 8px;
    font-weight: 500;
    margin: 0px 20px;
    transition: all 300ms;
  }

  .contact-form.button:hover{
    color: white;
    background: var(--color_text-primary); /*Variable*/
  }
  
  
  /* Estilo del autocompletado */
/* Desactivar el fondo azul de los campos autocompletados */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  /* Sobrescribe color de fondo y texto */
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #192655 !important;

  /* Opcional: puedes ajustar el color del borde si lo necesitas */
  border-bottom: 1px solid #192655 !important; 
}

  /* Footer 
  .footer-section {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #666;
  }*/
  

  /* Lista de íconos sociales
.social-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    list-style: none;
    margin-bottom: 1rem;
  } */
  
  /* Enlaces de redes sociales */
  /*.social-icons a {
    font-size: 1.2rem;   /* Ajusta el tamaño del ícono 
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .social-icons a:hover {
    color: #000;         /* Cambia de color al pasar el cursor */
  /*}*/
  

  /* animacion del formulario */

/* Ajuste general: cada hijo inicia sin desplazamiento y con opacidad completa */
.contact-form > * {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Al agregar la clase .stagger al formulario, 
   cada hijo se moverá a la izquierda y se volverá opaco */
.contact-form.stagger > * {
  transform: translateX(-100%);
  opacity: 0;
}

/* Establecer retrasos escalonados para cada hijo */
/* Ajusta los delays según la cantidad de elementos */
.contact-form.stagger > *:nth-child(1) {
  transition-delay: 0s;       /* El primero inicia de inmediato */
}
.contact-form.stagger > *:nth-child(2) {
  transition-delay: 0.1s;
}
.contact-form.stagger > *:nth-child(3) {
  transition-delay: 0.2s;
}
.contact-form.stagger > *:nth-child(4) {
  transition-delay: 0.3s;
}
.contact-form.stagger > *:nth-child(5) {
  transition-delay: 0.4s;
}
.contact-form.stagger > *:nth-child(6) {
  transition-delay: 0.5s;     /* Si tienes más campos, añade más .nth-child(...) */
}

/* .contact-background.stagger, */
.sidebar.stagger {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}


/* contenedor del agradeciemiento al enviar el formulario */

.thank-you-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
  z-index: 1000;
  display: none; /* Oculto inicialmente */
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.thank-you-container h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #024CAA;
}

.thank-you-container .btn-black {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #192655;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.thank-you-container .btn-black:hover {
  background-color: #192655;
}

/* media queries de "contact-section" */

/* Mantener el diseño original para pantallas grandes */
.contact-section {
  position: relative;
  min-height: 100vh;
  padding: 2rem;
}

.contact-background {
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-size: 5rem;
  font-weight: 700;
  padding-top: 4rem;
  padding-left: 10rem;
  color: #192655;
  pointer-events: none;
}

.form-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 15rem;
}

.sidebar {
  flex: 1 1 250px;
  max-width: 250px;
  margin-right: 2rem;
}

.contact-form {
  flex: 2 1 500px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  .contact-section {
    padding: 1rem;
  }

  .contact-background {
    font-size: 3rem;
    padding-top: 2rem;
    padding-left: 1rem;
  }

  .form-container {
    flex-direction: column;
    padding-top: 5rem;
  }

  .sidebar {
    margin-right: 0;
    margin-bottom: 2rem;
    max-width: 100%;
    flex: 1 1 auto;
  }

  .contact-form {
    flex: 1 1 auto;
    width: 100%;
  }

  .inline-group {
    flex-direction: column;
    gap: 1rem;
  }

  .inline-group .form-group {
    width: 100%;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    font-size: 1rem;
  }

  button[type="submit"] {
    align-self: center;
  }
}

/* media queries para pantallas pequeñas del texto del h2 y h1 */

/* Estilo predeterminado para pantallas grandes */
.contact-background h1 {
  margin-left: 0; /* Asegúrate de que no tenga margen adicional por defecto */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
  .contact-background h1 {
    margin-left: -60px; /* Ajusta este valor según la cantidad de desplazamiento */
  }
}

/* Estilo original para pantallas grandes */
.contact-background h2,
.sidebar h1 {
  margin-top: 0; /* O el valor que tienen actualmente */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
  .contact-background h2 {
    margin-top: 20px; /* Ajusta este valor según lo que necesites */
  }

  .sidebar h1 {
    margin-top: 80px; /* Ajusta este valor también */
  }
}

/* ========= Estilos para pantallas pequeñas menu ======== */

/* Estilos del menú original (para pantallas grandes) */
.menu {
  display: flex;
  align-items: center;
}

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

.menu nav ul li {
  margin: 0;
}

.menu nav ul li a {
  color: var(--color_text-secundary);
  font-size: var(--lowText_font_size);
  text-decoration: none;
}

.menu nav ul li a:hover {
  color: var(--color_text-primary);
}

/* Menú hamburguesa oculto en pantallas grandes */
.burger-toggle {
  display: none;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
  /* Ocultar menú original */
  .menu {
      display: none;
  }

  /* Mostrar botón del menú hamburguesa */
  .burger-toggle {
      display: block;
      cursor: pointer;
      font-size: 24px;
      color: var(--color_text-secundary);
      z-index: 101;
  }

  /* Estilos del menú hamburguesa */
  .menu-hamburguesa {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100vh;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: right 0.3s ease;
      z-index: 100;
      padding: 20px;
  }

  .menu-hamburguesa.active {
      right: 0;
  }

  .menu-hamburguesa nav ul {
      list-style: none;
      text-align: center;
      padding: 0;
      margin: 0;
      width: 100%;
  }

  .menu-hamburguesa nav ul li {
      margin: 20px 0;
  }

  .menu-hamburguesa nav ul li a {
      color: #024CAA;
      font-size: 20px;
      font-weight: 500;
      text-decoration: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      gap: 8px; /* Un pequeño espacio entre texto y flecha */
  }

     /* 2) Color para las flechas (íconos <i>) dentro del enlace */
.menu-hamburguesa nav ul li a i {
  color: #192655; /* Color que quieres para los íconos */
  font-size: 30px; /* ¡Aumenta aquí lo que necesites: 20px, 24px, 32px, etc.! */
}

  .menu-hamburguesa nav ul li a:hover {
      color: #192655;
  }

  /* Botón "Get Started" */

  .get-started {
      margin-top: 20px;
      background: #024CAA;
      color: #fff;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      text-transform: uppercase;
  }

  .get-started:hover {
      background: #024CAA;
  }

  /* Redes sociales al final */
  .social-links {
      margin-top: 40px;
      display: flex;
      gap: 20px;
      font-size: 14px;
      color: #192655;
  }

  .social-links a {
      text-decoration: none;
      color: #192655;
  }

  .social-links a:hover {
      color: #192655;
  }

  /* Botón de cerrar el menú hamburguesa */
  .close-menu {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 24px;
      cursor: pointer;
      color: #024CAA;
  }
}

/* Menú hamburguesa oculto inicialmente */
.menu-hamburguesa {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: right 0.3s ease;
  z-index: 100;
  padding: 20px;
}

.menu-hamburguesa.active {
  right: 0; /* Muestra el menú hamburguesa */
}

/* Reglas para pantallas pequeñas */
@media (max-width: 768px) {
  .menu {
      display: none; /* Oculta el menú original */
  }

  .burger-menu {
      display: block; /* Muestra el botón del menú hamburguesa */
      cursor: pointer;
      font-size: 24px;
      color: #024CAA;
      z-index: 101;
  }

  .menu-hamburguesa {
      display: flex; /* Muestra el menú hamburguesa en pantallas pequeñas */
  }
}

.burger-toggle i {
  color: #024CAA;
  font-size: 30px !important; /* Ajusta el tamaño que prefieras */
  margin-top: -2px;
}

 /* colores de los a */

 #color-dorado{
  color: #024CAA;
  font-weight: bold;
}

 /* colores de los a del burguer menu */

 #color-azul{
  color: #192655;
  font-weight: bold;
}