html {
  scroll-behavior: smooth;
}

.titulo-general {
	font-family: "Karla", sans-serif;
	font-size: 34pt;
	font-weight:700;
	font-style: normal;
	letter-spacing: -1pt;
	line-height: 30pt;
	color: #32384a;
}

.sub-titulo-general {
	font-family: "Karla", sans-serif;
	font-size: 14pt;
	font-weight:400;
	font-style: normal;
	letter-spacing: 0pt;
	line-height: 25pt;
	color: #707684;
}

.sub-titulo-secundario {
	font-family: "Karla", sans-serif;
	font-size: 20pt;
	font-weight:700;
	font-style: bold;
	letter-spacing: -1pt;
	line-height: 25pt;
	color: #32384a;
}

.titulo-destacado {
	font-family: "Karla", sans-serif;
	font-size: 34pt;
	font-weight:700;
	font-style: normal;
	letter-spacing: -1pt;
	color: #ffffff;
}

.sub-titulo-destacado {
	font-family: "Karla", sans-serif;
	font-size: 14pt;
	font-weight:400;
	font-style: normal;
	letter-spacing: 0pt;
	line-height: 25pt;
	color: #ffffff;
}


.cuerpo-general {
	font-family: "Karla", sans-serif;
	font-size: 12pt;
	font-weight:400;
	font-style: normal;
	letter-spacing: 0pt;
	line-height: 19pt;
	color: #707684;
}

.footer-general {
	font-family: "Karla", sans-serif;
	font-size: 12pt;
	font-weight:400;
	font-style: normal;
	letter-spacing: 0pt;
	line-height: 19pt;
	color: #ffffff;
}

.footer-titulo {
	font-family: "Karla", sans-serif;
	font-size: 14pt;
	font-weight:700;
	font-style: bold;
	letter-spacing: 0pt;
	line-height: 19pt;
	color: #ffffff;
}

.menu-desktop {
    position: relative;
    display: inline-block;
    font-family: 'Karla', sans-serif;
    font-size: 16px;
	font-weight: 700;
    color: #62666f;
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.3s ease;
  }

  .menu-desktop::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -38px; /* se muestra justo debajo de la celda */
    width: 100%;
    height: 0;
    background-color: #eb008b;
    transition: height 0.3s ease;
    z-index: -1;
  }

  .menu-desktop:hover {
    color: #00adee;
  }

  .menu-desktop:hover::after {
    height: 15px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	
  }

.menu-container {
  position: relative;
  display: inline-block;
  padding-bottom: 36px;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: -143px;
  width: 340px;
  background-color: #f2f7fe;
  z-index: 99;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 8px 8px;
  padding: 10px 0;
}

.menu-container:hover .submenu {
  display: block;
}

.submenu a {
  display: block;
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #62666f;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.submenu a:hover {
  background-color: #caced4;
}

.menu-container:hover .submenu {
  display: block;
}

.resaltado-cabecera {
	font-family: "Karla", sans-serif;
	font-size: 15pt;
	font-weight:400;
	font-style: normal;
	letter-spacing: -0.5pt;
	line-height: 19pt;
	color: #231f20;
}

.resaltado-cabecera-bold {
	font-family: "Karla", sans-serif;
	font-size: 25pt;
	font-weight:700;
	font-style: bold;
	letter-spacing: -1pt;
	line-height: 22pt;
	color: #231f20;
}

  .btn-outline {
      display: inline-block;
      width: 216px;
      height: 50px;
      border: 2px solid #00adee;
      border-radius: 8px;
      text-align: center;
      line-height: 50px;
      text-decoration: none;
      font-family: 'Karla', sans-serif;
      font-size: 16px;
      color: #62666f;
      transition: all 0.3s ease;
	  cursor: pointer;
    }

    .btn-outline:hover {
      background-color: #00adee;
      color: #ffffff;
    }

  	.btn-solid {
      display: inline-block;
      width: 216px;
      height: 50px;
      background-color: #00adee;
      border: 2px solid #00adee;
      border-radius: 8px;
      text-align: center;
      line-height: 50px;
      text-decoration: none;
      font-family: 'Karla', sans-serif;
      font-size: 16px;
      color: #ffffff;
      transition: all 0.3s ease;
	  cursor: pointer;
    }

    .btn-solid:hover {
      background-color: #0072bb;
	  border: 2px solid #0072bb;
      color: #ffffff;
    }

  .form-input {
    width: 260px;
    height: 50px;
    background-color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: 'Karla', sans-serif;
    font-size: 12pt;
    color: #000000;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .form-input::placeholder {
    color: #a4aab6;
    font-family: 'Karla', sans-serif;
    font-size: 12pt;
  }

  .form-textarea {
    width: 560px;
    height: 120px;
    background-color: #ffffff;
    border: none;
    border-radius: 6px;
    font-family: 'Karla', sans-serif;
    font-size: 12pt;
    color: #000000;
    padding: 12px;
    box-sizing: border-box;
    resize: none; /* Evita que se pueda redimensionar */
  }

  .form-textarea::placeholder {
    color: #a4aab6;
    font-family: 'Karla', sans-serif;
    font-size: 12pt;
  }

  .img-boton {
    display: inline-block;
    transition: transform 0.3s ease;
    cursor: pointer;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.4); /* Sombra sutil */
    border-radius: 6px; /* Opcional, por si quieres bordes ligeramente redondeados */
  }

  .img-boton:hover {
    transform: translateY(-20px);
  }