:root {
  --font-primary: 'Nunito', sans-serif;
  --color-primary: #024287;
  --color-primary-200: #0B7FFB;
  --calor-primary-400: #012C5A;
  --color-secondary: #F6B432;
  --color-secondary-200: #FBDA98;
  --color-secondary-400: #BD8108;
  --color-background: #FFFFFB;
  --color-gris-100: #F7F7F9;
  --button-know-more-color:#0F6CBD;
  --primary-color: #1B2D72;
  --secondary-color: #FDD97E;
  --tertiary-color: #AA0000;
  --quaternary-color: #A05F3C;
  --background-color: #FFFFFB;
  --background-color-card:#EEE4E4;
  --color-text-card: #2E2A25;
  --button-hero-color:#62D9F4;
  --button-know-more-color:#0F6CBD;
  --white: #fff;
  --gray:#E0D8D7;
  --gray-200:#DCDEE3;
  --gray-300: #CCCFD8;
  --text-color: #333;
  --light-text: #666;
  --max-width: 1200px;
  --header-height: 80px;
  --section-padding: 4rem;
  --border-radius: 8px;
  --transition: 0.3s ease;
  --font-family-title: 'Merriweather Sans', sans-serif;
  --font-family-text: 'Montserrat', sans-serif;

}

.newsletter{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: var(--font-primary); */
}

.contactos {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 3rem 0;
  padding: 1rem;
  /* background-color: var(--background-color-card); */
}

.contactos-title {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
}


.container-message-form {
  width: 100%;
  height: auto;
  min-height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-gris-100);
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  flex-wrap: wrap;
  padding: 2rem 0;
}

.form-message {
  width: 50%;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.form-paragraph {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  font-size: 2rem;
  font-weight: 500;
  padding: 1rem 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  
}
.negrita{
  font-weight: 700;
  padding-left: .5rem;
  display: flex;
  width: auto;
  height: auto;
}
.form-logo-icon {
  padding-top: 5rem;
  width: 10rem;
}

.container-form {
  width: 50%;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.contact-form {
  border: 1px solid var(--color-secondary-200);
  width: 90%;
  max-width: 700px;
  height: auto;
  min-height: 700px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--color-primary-400);
  gap: 1rem;
  border-radius: 16px;
}

.form-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}



input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-family: var(--font-family-text);
}

.form-group label {
  color: var(--color-background);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none;
  background-color: var(--color-background);
  transition: all 1s ease;
}

input[type="text"]:focus::placeholder,
input[type="email"]:focus::placeholder,
input[type="tel"]:focus::placeholder,
textarea:focus::placeholder {
  color: rgba(255, 255, 255, 0);
  opacity: 0;
}

textarea {
  width: 100%;
  height: 150px;
  resize: none;
  overflow-y: auto;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.contacto-container-button {
  display: flex;
  justify-content: end;
}

.form-button-submit {
  min-width: 150px;
  background-color: var(--color-secondary);
  color: var(--color-primary-200);
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.form-button-submit:hover {
  color: var(--color-background)
}

.contactos-subtitle {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 400;
  padding-top: 2rem;
  padding-left: 5rem;
  margin-bottom: 2rem;
}

.form-footer {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: baseline;
  padding: 2rem 0;
  margin-top: 1rem;
  margin-bottom: 5rem;
}

.form-footer-title {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  /* var(--font-family) */
  font-family:var(--font-family-text)
}

.container-contact-buttons {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding-top: 2rem; */
  gap: 2rem;
  flex-wrap: wrap;
}

.contact-button {
  width: 20%;  
  min-width: 300px;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: .5rem 0;
  text-align: center;
}

.icon-link {
  display: flex;
  align-items: center;
}

.icon {
  width: 2rem;
  height: 2rem;
}

.boton-mail {
  background-color: white;
  color: var(--color-primary);
}

.boton-mail:hover {
  background-color: var(--color-gris-100);
  color: white;
}

.boton-linkedin {
  background-color: var(--color-primary);
  color: white;
}

.boton-linkedin:hover {
  background-color: var(--calor-primary-400);
}

.evento-alerta {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-background);
  font-size: 1.2rem;
}

.form-footer{
  display: flex;
  flex-direction: row;
}

.clear{
  display: flex;
  justify-content: end;
  align-items: end;
}
.foot{
  display: flex;
  justify-content: end;
  align-items: end;
}




@media (max-width: 1024px) {
  /* .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  } */

  .container-text,
  .container-form {
    width: 50%;
  }
  .contact-button{
    min-width: 300px;
  }
  .form-footer{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  /* .contactos{
    margin: 0 auto;
    padding:2.5rem 5rem;
        max-width: 1440px;
  } */
}


.contactos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.container-form {
  flex: 1 1 100%;
  max-width: 100%;
}

.form-sidebar {
  flex: 1 1 100%;
  max-width: 100%;
  display: flex;
      flex-direction: column;
      align-items: center;
      gap:2rem;
}

@media (min-width: 768px) {
  .contactos{
    /* flex-direction: row; */
  }
  .container-form, .form-sidebar {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5rem;
  }
}

.form-group {
  /* margin-bottom: 1rem; */
}

/* .checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
} */

.checkbox-group input[type="checkbox"] {
  margin-top: 0.3rem;
}

.contacto-container-button {
  margin-top: 1rem;
}

.contact-button {
  display: inline-block;
  margin-right: 0.5rem;
}

/* .icon {
  width: 32px;
  height: 32px;
} */

/* newsletter */
:root{
  --font-family: 'Nunito', sans-serif;
  --color-primary: #024287;
  --color-primary-400: #012C5A;
  --color-gris-500: #595D69;
}

/* Accesibilidad: oculta visualmente pero accesible para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Ocultar el honeypot */
.hidden-field {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

/* Sección general del newsletter */
.newsletter-section {
  padding: 2rem;
  background-color: #f8f8f8;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

/* Título y descripción */
.newsletter-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #222;
}

.newsletter-description {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: #555;
}

/* Formulario */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Campo de entrada */
.newsletter-input-wrapper {
  display: flex;
  flex-direction: column;
}

.newsletter-input {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.newsletter-input:focus {
  border-color: #007bff;
  outline: none;
}

/* Botón de envío */
.newsletter-button {
  padding: 0.75rem 1.5rem;
  background-color: #007bff;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.newsletter-button:hover {
  background-color: #0056b3;
}

.subscribe-button {
  background-color: var(blue); /* Color llamativo (puedes ajustarlo a tu paleta) */
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  padding: .5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
}

.subscribe-button:hover,
.subscribe-button:focus {
  background-color: var(--button-know-more-color); /* Versión más oscura en hover */
  outline: none;
}

/* pisamos estilos */
.newsletter-section {
  background-color: #fff;
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
  font-family: Helvetica, Arial, sans-serif;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.newsletter-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.newsletter-description {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.email-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.email-input {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.subscribe-button {
  background-color: var(--button-know-more-color);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: fit-content;
  align-self: flex-start;
  transition: background-color 0.3s ease;
  height: 37px;
}

.subscribe-button:hover {
  background-color: var(--color-primary);
}

.newsletter-message {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  display: none;
}

.newsletter-message.success {
  background-color: #d4edda;
  color: #155724;
}

.newsletter-message.error {
  background-color: #f8d7da;
  color: #721c24;
}

.newsletter-message[hidden] {
  display: none !important;
}
.checkbox-group{
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 1rem;
  justify-content: flex-start;
}
/* piso estilos newsletter */
:root{
  --font-family: 'Nunito', sans-serif;
  --color-primary: #024287;
  --calor-primary-400: #012C5A;
  --color-gris-500: #595D69;
}

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width: 100%;}
#mc_embed_signup form {
  display:block;
  position:relative;
  text-align:left;
}

#mc_embed_signup h2 {
  font-weight:bold; 
  padding:0; 
  margin:15px 0; 
  font-size:1.5rem;
  font-family: var(--font-family-text);}
#mc_embed_signup input {border: 1px solid #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#mc_embed_signup input[type=checkbox]{
-webkit-appearance: checkbox;
appearance: checkbox;
}
#mc_embed_signup input[type=radio]{
-webkit-appearance: radio;
appearance: radio;
}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both; background-color: var(--color-primary); border: 0 none; border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: fit-content; width: -moz-fit-content;}
#mc_embed_signup .button:hover {background-color: var(--calor-primary-400);}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}

#mc_embed_signup .mc-field-group {clear:left; position:relative; width:100%; padding-bottom:0%; min-height:37px; display:grid;}
#mc_embed_signup .size1of2 {clear:none; float:left; width:46%; margin-right:4%;}
* html #mc_embed_signup .size1of2 {margin-right:2%; }
#mc_embed_signup .mc-field-group label {display:block; margin-bottom:0px; font-family: var(--font-family); font-size: 1rem; color: var(--color-gris-500);}
#mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;}
#mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:0px;}
#mc_embed_signup .mc-address-fields-group {display:flex; flex-direction:row; justify-content:space-evenly; width:96%; gap:15px;}
#mc_embed_signup .mc-sms-phone-group {display:flex; flex-direction:row; justify-content:space-evenly; width:96%; gap:15px; padding-top:5px;}

#mc_embed_signup .datefield, #mc_embed_signup .phonefield-us{padding:5px 0;}
#mc_embed_signup .datefield input, #mc_embed_signup .phonefield-us input{display:inline; width:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;}
#mc_embed_signup .phonefield-us .phonearea input, #mc_embed_signup .phonefield-us .phonedetail1 input{width:40px;}
#mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{width:30px;}
#mc_embed_signup .datefield label, #mc_embed_signup .phonefield-us label{display:none;}

#mc_embed_signup .indicates-required {text-align:right; font-size:11px; margin-right:4%;}
#mc_embed_signup .asterisk {color:#e85c41; font-size:150%; font-weight:normal; position:relative; top:5px;}     
#mc_embed_signup .clear {clear:both;}
#mc_embed_signup .foot { width:100%; align-items: center;}
@media screen and (max-width:400px) {#mc_embed_signup .foot {display:grid; grid-template-columns: 1fr; width:100%; align-items: center;}}

@media screen and (max-width:400px) {#mc_embed_signup .referralBadge {width:50%;}}

#mc_embed_signup .brandingLogo {justify-self:right;}
@media screen and (max-width:400px) {#mc_embed_signup .brandingLogo {justify-self:left;}}

#mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;}
#mc_embed_signup .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;}
#mc_embed_signup .mc-field-group.input-group label {display:inline;}
#mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%; margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none; width: 100%;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
#mc_embed_signup .helper_text {color: #8d8985; margin-top: 2px; display: inline-block; padding: 3px; background-color: rgba(255,255,255,0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; font-weight: normal; z-index: 1;}

#mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}
#mc_embed_signup #num-subscribers {font-size:1.1em;}
#mc_embed_signup #num-subscribers span {padding:.5em; border:1px solid #ccc; margin-right:.5em; font-weight:bold;}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
  display:block; /* Lo cambiamos a block para que ocupe todo el ancho disponible si es necesario */
  position:absolute; /* <-- CAMBIAR ESTO */
  bottom: -25px; /* <-- AÑADIR ESTO: Lo posiciona en la parte inferior del contenedor relativo */
  left: 0; /* <-- AÑADIR ESTO: Lo alinea a la izquierda del contenedor relativo */
  width: 100%; /* <-- AÑADIR ESTO: Para que ocupe todo el ancho del input */
  margin:0; /* <-- CAMBIAR ESTO: Quitar márgenes que puedan desplazar */
  padding:3px; 
  background-color:rgba(255,255,255,0.85); 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  font-size:14px; 
  font-weight:normal; 
  z-index:1; 
  color:#e85c41;
}
#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {border:2px solid #e85c41;}

.container-form-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.contactos-title{
  font-family: var(--font-family-title);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tertiary-color);
    margin: 0 auto;
    padding: 1.688rem 0;
    text-transform: uppercase;
}
.contactos-subtitle{
  width: 100%;
  text-align: start;
  padding: 0;
  font-family: var(--font-family-text);
}
.container-form{
  align-items: center;
}
.form-button-submit{
  font-weight: 700;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  font-family: var(--font-family-text);
  font-size: 1rem;
  text-transform: uppercase;
}
.form-button-submit:hover{
  background-color: var(--color-secondary);
  color: var(--primary-color);
}
.contact-form{
  font-family: var(--font-family-text);
  background-color: var(--primary-color);
}
.subscribe-button{
  font-family: var(--font-family-text);
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: .5rem 1rem;
  font-weight: 600;
}
.subscribe-button:hover{
  background-color: var(--color-secondary);
  
}
.contact-button{
  border-radius: 8px;
  width: 100%;
  margin: 0;
  padding: .2rem 0;
  display: flex;
}

@media (min-width: 768px){
  .contactos{
      padding: 1rem 2rem;
  }
  .contactos-title {
      font-size: 1.5rem; /* 24px */
  }

}

@media (min-width: 1024px){
  .contactos{
      margin: 0 auto;
      padding:2.5rem 5rem;
      max-width: 1440px;
      padding-top: 0;
  }
  .contactos-title {
      width: 100%;
      margin:0;
      text-align: left;
      padding: 2rem ;
      align-self: flex-start;
  }
  #title-contacto{
    display: flex;
    width: 100%;
    height: auto;
    margin:0;
    text-align: left;
    padding: 2rem 0;
    align-self: flex-start;
    justify-content: flex-start;
  }
  #mc_embed_signup h2{
    width: 450px;
  }
  .container-form{
    align-items: center;
  }
}
.container-redes-icons{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 2rem;
  padding: 1rem;
}
.politicas-link{
  color: #32ADE6;
  transition: all .1s;
  text-decoration: none;
}
.politicas-link:hover{
  color: var(--secondary-color);
  text-decoration: underline;
}
.container-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px
}
.redes-text{
  font-family: var(--font-family-text);
  font-size: 1.5rem;
  font-weight: 600;
}
.redes-link{
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap :12px;
  color: inherit;
}
.redes-link:hover{
  text-decoration: underline;
}