.contacto-section {width:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; flex-shrink:0; position:relative; }
.contacto-row { background:#ffffff; padding:55px 55px 23px 55px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap: 40px; flex-wrap: wrap; }
.contacto-col {max-width:380px; flex-shrink:0; }
.contacto-preguntas { display:flex; flex-direction:column; gap:24px;  align-items:center; justify-content:flex-end; }
.contactenos-box {max-width:380px; }
.contact-input-group {max-width: 440px; font-family:'Montserrat',sans-serif; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-content: center; padding: 30px; background: #d5e2fa; border-radius: 22px; border-style: solid; border-color: transparent; border-width: 1px; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); }
.contactenos-row {max-width:380px; display:flex; flex-direction:column; gap:30px; align-items:flex-start; justify-content:flex-start; }
.contactenos-title {display:flex; flex-direction:column; gap:20px; align-items:flex-start; justify-content:flex-start; flex-shrink:0; position:relative; }
.contactenos-text {max-width:300px; color:#0e357a; text-align:left; font-size:36px; line-height:46px; font-weight:700; font-family:'Montserrat-Bold', sans-serif; }
.contactenos-preguntas { height:78px;  color:var(--color-tokens-content-dark-secondary, #727272); text-align:left; font-family:'Montserrat-Medium', sans-serif; font-size:16px; line-height:26px; font-weight:500; position:relative; }
.contactenos-info-box {display:flex; flex-direction:column; gap:15px; align-items:flex-start; justify-content:flex-start; position:relative; }
.contactenos-info-row {display:flex; flex-direction:row; gap:10px; align-items:flex-start; justify-content:flex-start; position:relative; }
.san-jos-costa-rica { color:var(--globalcolors-neutral-90, #4b4b4b); text-align:left; font-size:18px; line-height:26px; font-family:'Montserrat-Bold', sans-serif; font-weight:700; position:relative; }
.contactenos-telefono-row {display:flex; flex-direction:column; gap:33px; align-items:flex-start; justify-content:flex-start; flex-shrink:0; position:relative; }
.contactenos-telefono-box {display:flex; flex-direction:row; gap:10px; align-items:center; justify-content:flex-start; flex-shrink:0; position:relative; }
.contactenos-telefono-image {flex-shrink:0; width:24px; height:24px; position:relative; overflow:visible; }
.whats-app-phone {height:29px; text-align:left; font-family:"-", sans-serif; font-size:18px; line-height:26px; font-weight:400; position:relative; flex:1;}
.whats-app-phone-span {color:var(--globalcolors-neutral-90, #4b4b4b); font-family:'Montserrat-Bold', sans-serif; font-size:18px; line-height:26px; font-weight:700; }
.whats-app-phone-span2 {color:var(--dark-blue-main-logo, #011334); font-family:'Montserrat-Regular', sans-serif; font-size:18px; line-height:26px; font-weight:400; }
.contactenos-email-row {display:flex; flex-direction:row; gap:8px; align-items:flex-start; justify-content:flex-start; flex-shrink:0; width:256px; position:relative; }
.contactenos-email-image-box {flex-shrink:0; width:26px; height:26px; position:relative; overflow:hidden; }
.contactenos-email-image {width:87%; height:60%;  }
.info-cumplimiento-online {color:var(--globalcolors-neutral-90, #4b4b4b); text-align:left; font-family:'Montserrat-Bold', sans-serif; font-size:18px; line-height:26px; font-weight:700; position:relative; width:256px; }
.seccion-contacto {min-height:300px; display:flex; flex-direction:column; gap:0px; align-items:center; justify-content:flex-start; flex-shrink:0; width:100%; position:relative; }
.seccion {display:flex; flex-direction:row; gap:317px; align-items:flex-start; justify-content:center; flex-shrink:0; position:relative; }
.texto {display:flex; flex-direction:row; gap:261px; align-items:center; justify-content:flex-start; flex-shrink:0; position:relative; }
.group-old {background:#0e357a; border-radius:28px; padding:12px 24px 12px 24px; display:flex; flex-direction:row; gap:10px; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:hidden; }
.group2 {background:#55e6a5; border-radius:28px; padding:12px 24px 12px 24px; display:flex; flex-direction:row; gap:10px; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:hidden; }
.map-box {padding:4px 5px 0px 0px; display:flex; flex-direction:row; gap:10px; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
.map-image {flex-shrink:0; width:16px; height:24px; position:relative; overflow:visible; }
.nuestros-servicios-box {max-width:332px; min-height:110px; background:var(--primary-8, #d5e2fa); border-radius:25px; padding:34px 18px 34px 18px; display:flex; flex-direction:row; gap:10px; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
.nuestros-servicios {max-width:332px; color:var(--neutral-1000, #2f4255); text-align:center; font-family:"-", sans-serif; font-size:16px; font-weight:400; position:relative; }
.nuestros-servicios-span {color:var(--neutral-1000, #2f4255); font-family:'Montserrat-Medium', sans-serif; font-size:16px; font-weight:500; }
.nuestros-servicios-span2 {color:var(--neutral-1000, #2f4255); font-family:'Montserrat-Bold', sans-serif; font-size:16px; font-weight:700; }
.email-form { min-height:557px; background:var(--white, #ffffff); border-radius:10px; border-style:solid; border-color:var(--gray-4, #bdbdbd); border-width:1px; padding:50px; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; flex-shrink:0; position:relative; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); }
@media (max-width:800px) { 
.contacto-preguntas {justify-content: center;}
.contactenos-box {justify-content: center;display: contents;align-content: center;}
.contactenos-row {align-items: center;justify-content: center;}
.contactenos-title {text-align: center; align-items: center;justify-content: center;padding-bottom: 16px;width: 200px;    line-height: 33px;}
.contactenos-preguntas {max-width: 272px;font-size: 12px;line-height: 19px;align-content: center;justify-content: center;text-align: center;}
.nuestros-servicios-box {max-width: 256px;min-height: 169px;border-radius: 44px;gap: 16px;}
.nuestros-servicios {font-size: 12px;}
.nuestros-servicios-span {font-size: 12px;}
.nuestros-servicios-span2 {font-size: 12px;}
.page-form-button {margin-bottom: 50px;}
.page-form-ok-box {text-align: center;max-width: 214px;}
.contactenos-text{ font-size: 25px;line-height: 35px;justify-content: center;text-align: center;display: contents;}
}
@media only screen and (max-width:500px) {
.contacto-preguntas {justify-content: center;}
.contactenos-box {justify-content: center;display: contents;align-content: center;}
.contactenos-row {align-items: center;justify-content: center;}
.contactenos-title {text-align: center; align-items: center;justify-content: center;padding-bottom: 16px;width: 200px;    line-height: 33px;}
.contactenos-preguntas {max-width: 272px;font-size: 12px;line-height: 19px;align-content: center;justify-content: center;text-align: center;}
.nuestros-servicios-box {max-width: 256px;min-height: 169px;border-radius: 44px;gap: 16px;}
.nuestros-servicios {font-size: 12px;}
.nuestros-servicios-span {font-size: 12px;}
.nuestros-servicios-span2 {font-size: 12px;}
.page-form-button {margin-bottom: 50px;}
.page-form-ok-box {text-align: center;max-width: 214px;}
.contact-input-group {border-radius: 0px; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);}
.contactenos-text{ font-size: 25px;line-height: 35px;justify-content: center;text-align: center;display: contents;}
}


input::placeholder {  color: #6c757d;   font-size: 16px;   font-family: 'Arial', sans-serif;   opacity: 0.6; }
input.success {  border: 1px solid #2ecc71; /* Verde para éxito */}

/* Contenedor principal del formulario */
.contact-container {  display: flex;  justify-content: center;  gap: 30px;  padding: 15px;  background-color: #f4f7f9;  display: flex;  flex-wrap: ;  width: 100%;  flex-direction: row;  flex-wrap: wrap;}


/* Contenedor del formulario */
.form-container {  background-color: #ffffff;  border-radius: 8px;  padding: 30px;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);   display: flex;  flex-direction: column;  max-width: 500px;  flex-wrap: wrap;}


/* Cabecera del formulario */
.form-header h2 {    font-size: 24px;    color: #2d3a3a;    margin-bottom: 10px;}
.form-header p {    font-size: 16px;    color: #5a6268; margin-bottom: 15px;}

/* Secciones del formulario */
.form-section {    margin-bottom: 20px;}
.form-section h3 {  font-size: 20px;  color: #2d3a3a;  margin-bottom: 15px;  font-weight: 600;  text-align: left;  color: #1347a4;}
.form-group {    margin-bottom: 20px;}
.form-group input,.form-group textarea,.form-group select {  padding-right: 10px;  border: 1px solid #ccc;  border-radius: 5px;  padding: 10px;  width: 100%;}
.form-header > h1:nth-child(1) {  margin-bottom: 10px;}


/* Etiquetas del formulario */
label {    font-size: 14px;    color: #333;    display: block;    margin-bottom: 5px;}

/* Campos del formulario */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {    width: 100%;    padding: 12px;    border: 1px solid #ddd;    border-radius: 5px;    font-size: 14px;    color: #555;    box-sizing: border-box;    transition: border-color 0.3s ease;}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {    border-color: #007bff;    outline: none;}





/* Mensajes de error y éxito */
.error-message {    color: #e74c3c;    font-size: 12px;    display: none;}
.success-message {    color: #2ecc71;    font-size: 12px;    display: none;}
.error-message.active,.success-message.active {    display: block;}

/* Indicador de campos obligatorios */
.obligatorio-indicador {    color: #e74c3c;}

/* Mensajes informativos */
.info-obligatorios {    font-size: 14px;    color: #888;    margin-top: 10px;}

/* Checkbox de aceptación de términos */
.form-checkbox {    font-size: 14px;    color: #555;    display: flex;    align-items: center;    gap: 10px;}
.form-checkbox input {    width: auto;}
.form-checkbox a {    color: #007bff;    text-decoration: none;}
.form-checkbox a:hover {     text-decoration: underline;}

/* Botón de envío */
.form-footer {      justify-content: center;  display: flex;}
.form-submit {    background-color: #007bff;    color: #fff;    border: none;    padding: 12px 60px;    border-radius: 60px;    font-size: 16px;    cursor: pointer;   transition: background-color 0.3s, transform 0.3s ease-in-out, box-shadow 0.3s; gap: 10px; display: flex;}
.form-submit:hover {    background-color: #0e357a}

/* Estilos generales */
.contact-info  {  max-width: 500px;  padding: 20px;  background-color: #f9fafc;  border: 1px solid #e3e6ea;  border-radius: 12px;  font-family: 'Arial', sans-serif;  color: #333;  display: flex;  flex-direction: column;  flex-wrap: wrap;}

.contact-info-header h3 {    font-size: 24px;    color: #0e357a;    margin-bottom: 20px;    text-align: center;}

/* Contenido dividido en tarjetas */
.contact-info-content {    display: flex;    justify-content: space-around;    gap: 20px;    margin-bottom: 20px;}
.contact-info-card {    flex: 1;    background-color: #ffffff;    border: 1px solid #dfe4ea;    border-radius: 8px;    padding: 15px;    text-align: center;    transition: transform 0.3s, box-shadow 0.3s;}
.contact-info-card:hover {    transform: translateY(-5px);    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.contact-info-card i {    font-size: 36px;    color: #34cfa5;    margin-bottom: 10px;}
.contact-info-card h4 {    font-size: 18px;    margin-bottom: 10px;    color: #333;}
.contact-info-card p {    font-size: 14px;    color: #555;    margin-bottom: 15px;}
.contact-info-card a {    display: inline-block;    padding: 10px 15px;    font-size: 14px;    font-weight: bold;    text-decoration: none;    color: #007bff;    border: 1px solid #007bff;    border-radius: 30px ;    transition: background-color 0.3s, color 0.3s;}
.contact-info-card a:hover {    background-color: #007bff;    color: #fff;}
label i {    color: #1347a4; }
/* Seleccionar el ícono con la clase .contact-icon */
.contact-icon {    color: #34cfa5;}


/* Texto informativo */
.contact-info-faq-text {    display: flex;    align-items: center;    justify-content: center;    gap: 10px;    background-color: #eef3f7;    border: 1px solid #cfd8e3;    border-radius: 8px;    padding: 15px;    margin-bottom: 20px;    color: #333;    font-size: 16px;    line-height: 1.5;    text-align: center;}
.contact-info-faq-text i {    font-size: 20px;    color: #007bff;}
.contact-info-faq-text a {    color: #007bff;    font-weight: bold;    text-decoration: underline;}
.contact-info-faq-text a:hover {    color: #0056b3;    text-decoration: none;}

/* Botón de Preguntas Frecuentes */
.contact-info-cta {    display: block;    text-align: center;    padding: 12px 20px;    font-size: 16px;    font-weight: bold;    background-color: #1859ce;    color: #fff;    border-radius: 60px;    text-decoration: none;    transition: background-color 0.3s, transform 0.3s;}
.contact-info-cta:hover {    background-color: #0e357a;  }


.modal {            display: none; /* Ocultarlo por defecto */            position: fixed; /* Fijar en la pantalla */            z-index: 1; /* Asegurarse de que esté sobre el contenido */            left: 0;            top: 0;            width: 100%; /* Ocupa todo el ancho */            height: 100%; /* Ocupa toda la altura */            background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro semitransparente */        }
.modal-content {            background-color: #fff;            margin: 15% auto; /* Centrado */            padding: 20px;            border-radius: 5px;            width: 80%; /* Tamaño del modal */            max-width: 400px;            text-align: center;        }
.close-btn {            color: #aaa;            font-size: 28px;            font-weight: bold;            position: absolute;            right: 10px;            top: 10px;            cursor: pointer;        }
.close-btn:hover,        .close-btn:focus {            color: black;            text-decoration: none;            cursor: pointer;        }



/* Header container styles */
.header-section { width: 100%; padding: 3rem 1rem; background: linear-gradient(0deg, #0e357a, #00b8d8);  color: #fff; text-align: center; position: relative; overflow: hidden; border-bottom-left-radius: 30% 25%;  border-bottom-right-radius: 30% 25%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.header-content { max-width: 800px; margin: 0 auto; padding: 1rem; opacity: 0; transform: translateY(20px); animation: fadeInSlide 1s ease-out forwards; animation-delay: 0.5s;}
@keyframes fadeInSlide {
 to {  opacity: 1;  transform: translateY(0); }}
.header-title { font-size: 3rem; font-weight: 700; margin: 0; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);  color: white;}
.header-subtitle { font-size: 1.2rem; margin: 0.5rem 0 0; color: #d1e4f2; text-align:center}
.header { width: 100%; background-color: #ffffff;  padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.header-container { display: flex; justify-content: space-between; align-items: center; width: 100%;}
.logo img { max-height: 60px; width: auto;}
/* Estilo de los Botones */
.header-buttons { display: flex; gap: 1.5rem; justify-content: flex-end;  align-items: center; flex-grow: 1; /* Asegura que los botones se alineen correctamente */ margin-right: 20px; margin-left: 20px;}
.button-demo { background-color: #0e357a; color: #fff; padding: 1rem 2rem;  border-radius: 50px;  font-weight: 700;  text-decoration: none; text-transform: none;  font-size: 1rem; transition: background-color 0.3s, transform 0.3s ease-in-out, box-shadow 0.3s; text-align: center;}
.button-demo:hover { background-color: #154b8f;  transform: scale(1.05);  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.button-demo:visited {color: #fff;}
.button-login { background-color: #34cfa5;  color: #fff; padding: 1rem 2rem;  border-radius: 50px;  font-weight: 700;  text-decoration: none; text-transform: none;  font-size: 1rem; transition: background-color 0.3s, transform 0.3s ease-in-out, box-shadow 0.3s; text-align: center;text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);}
.button-login:hover { background-color: #28b795; transform: scale(1.05);  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.button-login:visited {color: #fff;}
.menu-icon img { width: 30px; height: 30px; transition: transform 0.3s ease-in-out;}
.menu-icon a:hover img { transform: rotate(90deg); /* Rotación sutil del ícono en hover */}
/* Estilo General del Nav Bar */
.navbar {  background-color: #0e357a;  padding: 0.8rem 2rem;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  width: 100%;}
.navbar-container { display: flex; justify-content: center;  align-items: center; gap: 2rem; }
.navbar-item { font-size: 1.1rem;  font-weight: 500;  text-align: center; justify-items: center; align-content: center; text-align: center;}
.navbar-item a { color: #fff;  text-decoration: none; padding: 0.5rem 1rem; transition: color 0.3s ease, transform 0.3s ease; border-radius: 4px;  display: flex; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);}
.navbar-item a:hover { color: #fff; transform: scale(1.05);  background-color: rgba(255, 255, 255, 0.2); }
/* Estilos para la sección de llamada a la acción (CTA) */
.cta-container {  background-color: #0e357a;  color: white;  display: flex;  justify-content: space-between;  padding: 30px 10%;  align-items: center;}
.cta-text {  max-width: 60%;}
.cta-heading {  font-size: 24px;  font-weight: bold;  margin-bottom: 10px;  color: white; }
.cta-description {  font-size: 16px;  margin-bottom: 20px;  color: white;   max-width: 424px;  line-height: 24px;}
.cta-buttons-container {  display: flex;  gap: 15px;  flex-direction: column;}
.cta-button {  padding: 12px 56px;  border-radius: 30px;  font-weight: bold;  text-align: center;  text-decoration: none;  display: flex;  justify-content: center;  align-items: center;  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;}
.cta-button-green {  background-color: #34cfa5;  border: none;  padding: 12px 56px;}
.cta-button-green a {  color: #0e357a;}
.cta-button-white {  background-color: transparent;  border: 2px solid white;  color: white;	padding: 12px 56px;}
.cta-button-white a {  color: white;}
.cta-button-green:hover {  transform: scale(1.05);   background-color: #28b795;   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.cta-button-white:hover {  transform: scale(1.05);   background-color: rgba(255, 255, 255, 0.2);   color: #0e357a;   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
/* Footer Estilos */
.footer {  font-family: 'Arial', sans-serif;  background-color: #fff;   color: #6d7175;   width: 100%;}
.footer-main {  display: flex;  justify-content: space-between;  padding: 40px 10%;  background-color: #fff;   color: #333; }
.footer-column {  width: 20%;  padding: 10px;}
.footer-logo {  max-width: 150px;}
.footer-section-title {  font-size: 18px;  font-weight: bold;  margin-bottom: 10px;  color: #0e357a;   max-width: 180px;}
.footer-links {  display: flex;  flex-direction: column;  gap: 10px;	align-items: flex-start;}
.footer-link {  font-size: 14px;  color: #18191c;   gap: 10px;  display: flex;}
.footer-link a {  color: #6d7175;   text-decoration: none;}
.footer-link a:hover {  text-decoration: underline;}
/* Footer de Derechos */
.footer-bottom {  background-color: #fff;   color: #333;   padding-left: 20px;  padding-right: 20px;  padding-bottom: 20px;}
.footer-divider {  border-top: 1px solid #ccc;  margin-bottom: 10px;}
.footer-copyright {  font-size: 14px;  color: #6d7175;   text-align: center;}
.footer-social-icons {  text-align: center;  margin-top: 10px;}
.footer-social-icon {  margin: 0 10px;}
.footer-social-icon-img {  width: 25px;  height: 25px;  filter: none; }
/* Animación para los iconos sociales */
.footer-social-icon {  transition: transform 0.3s ease, filter 0.3s ease;}
.footer-social-icon-img {  width: 30px;   height: 30px;  filter: grayscale(100%) brightness(0.6);  transition: filter 0.3s ease;}
.footer-social-icon:hover .footer-social-icon-img {  transform: scale(1.4);   filter: grayscale(0%) brightness(2); }
.footer-social-icon-img:hover {  transform: scale(1.4); }
.back-to-top {    position: fixed;    bottom: 20px;    right: 20px;    width: 50px;    height: 50px;    background-color: #0e357a; /* Main brand color */    border-radius: 50%;    display: flex;    justify-content: center;    align-items: center;    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    cursor: pointer;    transition: transform 0.3s ease, background-color 0.3s ease;    }
.back-to-top:hover {    transform: scale(1.1);    background-color: #34cfa5; /* Hover color */}
.back-to-top-icon {    width: 24px;    height: 24px;    color: white;}
.back-to-top a {    text-decoration: none;    display: flex;    justify-content: center;    align-items: center;}
.page-button-top-item {     justify-content: center;  align-items: center;    }
.page-button-top-item img {      transition: transform 0.3s ease;}
.page-button-top-item:hover img {    transform: scale(1.1);}

@media (max-width: 768px) {	
.header-section {	padding: 1rem 1rem;	}
.footer-links { align-items: center;	}
.cta-container { flex-direction: column; align-items: center; padding: 20px;  }
.cta-buttons-container { flex-direction: column; gap: 10px;  }
.footer-main { flex-direction: column; align-items: center;  }
.cta-container { flex-direction: column; align-items: center; padding: 20px;  }
.cta-buttons-container { flex-direction: column; gap: 10px;  }
.footer-main { flex-direction: column; align-items: center;  }
.footer-column { width: 100%; text-align: center; margin-bottom: 20px; flex-direction: column; display: flex; align-items: center;  }
.page-button-top-item { display: none;	}
.navbar-container {  flex-wrap: wrap;  gap: 1rem; }
.cta-text {  text-align: center;  }
.header-container {  flex-direction: column;  align-items: center; }
.header-buttons {  margin-top: 1rem;  gap: 1rem; }
.header-title {  font-size: 2rem; }
.header-subtitle {  font-size: 1rem; }
}