body,
html{
  display: block;
  width:100%; height:100%;
  margin:0;
  padding:0;
  scroll-behavior: smooth;
}

body{
  background-color: #fff;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 15px;
  font-weight: 500;
  font-style: normal;
  color:#333;
}
.block{
  display: block;
  width:auto; height: auto; overflow: auto;
}
.rounded{
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}
.shadow{
  box-shadow: 1px 2px 20px 3px rgba(0,0,0,0.27);
  -webkit-box-shadow: 1px 2px 20px 3px rgba(0,0,0,0.27);
  -moz-box-shadow: 1px 2px 20px 3px rgba(0,0,0,0.27);
}

a{
  text-decoration: none;
  color:#107581; 
  font-weight: bold;
}
.btn{
  padding:8px 60px;
  border:none;
}
.btn-success{
  background-color: #107581;
}
.btn-success:hover{
  background-color: #169ead;
}
h2{
  color:#107581;
  font-weight: 400;
}
.webContainer{
  background-color: #fff;
  box-shadow: 1px 2px 20px 3px rgba(0,0,0,0.27);
  -webkit-box-shadow: 1px 2px 20px 3px rgba(0,0,0,0.27);
  -moz-box-shadow: 1px 2px 20px 3px rgba(0,0,0,0.27);
  max-width: 1200px;
  margin: 40px auto 100px auto;
  padding:0;
}
.webContainer .container{
  padding:0;
}

header{
  margin-bottom: 30px;
}

img.logoHeader{
  display: inline-block;
  width:auto; max-width: 250px;
  margin-left: 30px;
  margin-top: 30px;
}


/* Contenedor de la segunda columna */
.col-lg-6.text-end {
  display: flex;              /* Activa flexbox */
  align-items: center;        /* Centra verticalmente el contenido */
  justify-content: flex-end;  /* Empuja todo hacia la derecha */
}

/* El nav se ajusta dentro */
.col-lg-6.text-end nav {
  display: flex;
  justify-content: center;
  margin-right:50px;
}

/* Menú horizontal */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.menu li {
  position: relative;
}

.menu li a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.75rem 1.2rem 0.75rem;
  text-decoration: none;
  color: #107581; 
  font-weight: 500;
  z-index: 0; /* El texto queda por encima */
  overflow: hidden;
}

/* Barra animada */
.menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  margin-bottom:6px;
  background-color: #eee;
  transform: translateY(100%); /* Oculto debajo */
  transition: transform 0.3s ease, height 0.3s ease, background 0.3s ease;
  z-index: -1;                /* Detrás del texto, pero visible */
}

/* Hover: sube y cubre el fondo */
.menu li a:hover::after {
  transform: translateY(0);   /* Sube */
  height: 100%;               /* Se expande hasta cubrir */
  background-color: #107581;
}

/* Opcional: cambio de color del texto para contraste */
.menu li a:hover {
  color: #fff;
}


/* Área principal del slider */
.areaSlider {
  position: relative;   /* Contenedor relativo */
  width: 100%;          /* Ocupa todo el ancho */
  height: 600px;        /* Altura fija */
  overflow: hidden;     /* Oculta lo que sobresalga */
}

/* Imagen de fondo */
.areaSlider .imagen {
  position: absolute;   /* Se ajusta al área */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.areaSlider .imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* Cubre todo el área */
  object-position: center; /* Centra la imagen */
}

/* Contenedor de información */
.areaSlider .info {
  position: absolute;
  top: 50%;             /* Centrado vertical */
  left: 20px;              /* Cargado a la izquierda */
  transform: translateY(-50%); /* Ajusta el centrado */
  max-width: 50%;       /* Controla el ancho del texto */
  padding: 2rem;
  z-index: 1;           /* Encima de la imagen */
}

/* Estilo del título */
.areaSlider .info h2 {
  font-size: 2rem;
  line-height: 1.4;
}
.areaSlider .info p {
  line-height: 24px;
  margin: 26px 0;
}


#entrada{
  padding:6em 30px;
}
#entrada p{
  font-size: 1.2em;
  margin:20px 10%;
}



#highlights{
  min-height: 300px;
  background-image: url(../../images/web/bg-highlights1.jpg);
  background-repeat: no-repeat; /* Prevents the image from tiling */
  background-position: right top; /* Positions the image to the bottom-right */
  background-size: auto; /* Optional: maintains original image size or scales as needed */
  padding:0 20px;
}

footer .wrapper{
  display: flex;
  justify-content: center;
  gap:1.5rem;
  flex-wrap: wrap;
}
footer .wrapper .wrapper-box{
  flex: 1 1 calc(25% - 1.5rem);
  padding: 1.5rem;
  text-align: center;
  color:#4d4d4d;
  font-size: 0.9em;
  align-self: center;
}
footer .logoFooter{
  display: inline-block;
  width:auto; max-width: 150px;
}
footer .iconFooter{
  max-width: 60px;
  margin-bottom: 10px;
}

/* Contenedor principal */
.highlights {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;                    /* Separación entre cuadros */
  flex-wrap: wrap;                /* Permite que bajen en pantallas pequeñas */
  margin: 2rem 0;
}

/* Cada cuadro */
.highlights .highlight-box {
  flex: 1 1 calc(25% - 1.5rem);   /* 4 en línea, con espacio */
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top:30px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  height: 250px;
}
.highlights .highlight-box .icon img{
  width:80px;
}
.highlights .highlight-box h3{
  color:#000;
  font-size: 1.1em;
}
.highlights .highlight-box p{
  color:#333;
  font-size: 0.9em;
}

.highlight-box:hover {
  transform: translateY(-5px);    /* Pequeño efecto al pasar el mouse */
}

/* Icono */
.highlight-box .icon {
  font-size: 2.5rem;              /* Si usas iconos tipo fontawesome */
  margin-bottom: 1rem;
  color: #007bff;
}

/* Título */
.highlight-box h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #333;
}

/* Texto breve */
.highlight-box p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.4;
}

/* Responsivo */
@media (max-width: 992px) {
  .highlight-box {
    flex: 1 1 calc(50% - 1.5rem); /* 2 por fila en tablets */
  }
}

@media (max-width: 576px) {
  .highlight-box {
    flex: 1 1 100%;               /* 1 por fila en móviles */
  }
}


#areaHook{
  padding:5em 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#areaHook .quote{
  align-self: center;
  border-left: solid 6px #107581;
  padding:30px;
  font-size: 1.4em;
  font-weight:400;
  max-width:700px;
}


#evaluacion{
  position: relative;
  background-color: #efefef;
  overflow: hidden;
  min-height: 400px;
  padding:5em 30px;
}
#evaluacion::before{
  content: "";
  position: absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  background-color: #e6e6e6;
  z-index:0;

  /* Crea la diagonal */
  clip-path: polygon(10% 0%, 100% 0%, 100% 0%, 100% 100%, 0% 100%);
}
#evaluacion .info{
  position: relative;
  z-index: 1;
}


.myForm label{
  font-size: 0.8em;
  margin-bottom: 4px;
}
.myForm .form-control{
  border: solid 1px #c1c1c1;
  font-size: 12px;
}
.myForm [type=submit]{
  font-size: 1em;
  font-weight:500;
  padding:10px;
}
.form-control.error{
  border:solid 2px #ff9797;
}
label.error{
  color:#f00;
}


.logoMain{
  display: inline-block;
  width:100%; max-width: 200px;
}