/*
 * Tema propio de la landing.
 *
 * Extraído de /carousel/css/style.css, que eran 217 KB de los cuales 213 KB
 * eran una copia sin minificar de Bootstrap 4.3.1 que ya venía duplicada por
 * bootstrap.min.css (v5). Aquí quedan sólo las reglas propias que se usan.
 *
 * Se carga ANTES de bootstrap.min.css para conservar el mismo orden de cascada
 * que tenía style.css: Bootstrap 5 sigue ganando en los empates de especificidad.
 */

body {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: normal;
  color: gray;
  background: rgba(0, 0, 0, 0.05);
}

a {
  transition: .3s all ease;
  color: #0086cd;
}

a:hover, a:focus {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none;
}

button {
  transition: .3s all ease;
}

button:hover, button:focus {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  line-height: 1.5;
  font-weight: 400;
  font-family: "Poppins", Arial, sans-serif;
}

.ftco-section {
  padding: 7em 0;
}

.heading-section {
  font-size: 28px;
  color: #000;
}

.btn {
  font-size: 14px;
}

.btn.btn-primary {
  background: #0086cd;
  border-color: #0086cd;
}

/* Owl carousel: flechas y puntos */
.owl-carousel {
  position: relative;
}

.owl-carousel .owl-item,
.owl-carousel .owl-item.active {
  opacity: 1;
}

.owl-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  position: absolute;
  transform: translateY(-50%);
  margin-top: -10px;
  color: rgba(0, 0, 0, 0.1) !important;
  transition: 0.7s;
  opacity: 0;
}

.owl-carousel .owl-nav .owl-prev span:before,
.owl-carousel .owl-nav .owl-next span:before {
  font-size: 30px;
}

.owl-carousel .owl-nav .owl-prev { left: 0; }
.owl-carousel .owl-nav .owl-next { right: 0; }

.owl-carousel .owl-dots {
  text-align: center;
  margin-top: 20px;
}

.owl-carousel .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  margin: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
}

.owl-carousel .owl-dots .owl-dot:hover,
.owl-carousel .owl-dots .owl-dot:focus {
  outline: none !important;
}

.owl-carousel .owl-dots .owl-dot.active {
  background: #0086cd;
}

.owl-carousel:hover .owl-nav .owl-prev,
.owl-carousel:hover .owl-nav .owl-next {
  opacity: 1;
}

.owl-carousel:hover .owl-nav .owl-prev { left: -25px; }
.owl-carousel:hover .owl-nav .owl-next { right: -25px; }

.owl-carousel.owl-drag .owl-item {
  touch-action: pan-y;
}

/* En pantallas táctiles las flechas nunca reciben :hover, así que se dejan
   siempre visibles y dentro del contenedor. */
@media (hover: none), (max-width: 767.98px) {
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next {
    opacity: 1;
    color: rgba(0, 0, 0, 0.35) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  a, button,
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next {
    transition: none;
  }
}