/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/
/* CSS */
/* Estilos para el topbar */

/* Forzar estilos con !important para que se impongan a Bootstrap u otros */

#topbar {
  background-color: #3d3d62 !important;
  padding: 10px 0 !important;
}

#topbar .top-menu {
  /* Forzamos Flex y alineación a la izquierda/derecha */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: left !important; /* Anula centrado si lo hubiera */
  margin: 0 !important;
  padding: 0 !important;
}

/* Lista de teléfono y mail */
#topbar .top-menu .info {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#topbar .top-menu .info li {
  margin-right: 20px !important;
}

#topbar .top-menu .info li a {
  color: #fff !important;
  text-decoration: none !important;
}

/* Botón de WhatsApp */
#topbar .top-menu .whatsapp-button .btn-whatsapp {
  background-color: #ffffff !important; /* Color WhatsApp */
  color: #15930c !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border: none !important;
  border-radius: 20px !important;
  display: inline-block !important;
  transition: background-color 0.3s ease, color 0.5s ease;
}

#topbar .top-menu .whatsapp-button .btn-whatsapp:hover {
  background-color: #15930c !important; /* Color WhatsApp */
  color: #ffffff !important;
}

.top-menu {
  width: 100% !important;
}

#topbar a {
  font-weight: 600 !important;
}

.flickity-button:hover {
  background-color: #3d3d62;
}

.inspiro-slider .slide .slide-captions h2.slider-title {
  /* Mínimo 2rem, escala según 6vw, máximo 4rem (ajusta a tu gusto) */
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.2; /* Un poco más relajado que 1em */
  margin-bottom: 1em; /* Si deseas algo de espacio debajo */
}

/* Subtítulo (“Especialistas en”) más pequeño que el texto principal */
.inspiro-slider .slide .slide-captions h2.slider-title .slider-subtitle {
  display: inline-block; /* o block, si quieres que se corte la línea */
  font-size: 0.5em; /* la mitad de la font-size del padre */
  font-weight: 400;
  margin-bottom: 0.2em;
}

.bg-overlay {
  opacity: 1 !important;
}

.btn-more-services {
  margin-right: 1em !important;
  color: white !important;
  background-color: #3d3d62 !important;
  border: none !important;
  border-radius: 5px !important;
}

.btn-more-services:hover {
  background-color: #292941 !important;
  color: #cfcfd8 !important;
}

/* Mantiene el tamaño del botón */
.btn-wapp-slide {
  background-color: #3d3d62 !important ;
  border: none !important;
  color: white !important;
  display: inline-block; /* Para poder controlar su ancho y altura */
  /* Ajusta el padding que desees */
  border-radius: 5px;
  border: none; /* O el estilo que quieras */
  text-decoration: none; /* Quita subrayados, etc. */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover en el botón, si deseas cambiar color o fondo */
.btn-wapp-slide:hover {
  background-color: #ffffff !important;
  color: #3d3d62 !important;
}

.inspiro-slider .slide .slide-captions .btn-wapp-slide img {
  width: 1.6rem !important;
  margin-right: 0.5em !important;
}

.heading-text h1 {
  font-size: 2.8em !important;
}

.heading-text.heading-section h1:before {
  content: "";
  position: absolute;
  height: 2px;
  width: 100px;
  background-color: #3d3d62;
  bottom: -30px;
  left: 0;
  right: 0;
}

.servicios h3 {
  padding-top: 30px;
}

.servicios div div {
  padding: 8px;
}

.servicios div div:hover > div {
  background-color: rgb(247, 247, 247);
  border-radius: 0px;
  border: 0.1px solid rgb(235, 235, 235);

  transition: 200ms;
}

.servicios div div:hover > h3,
.servicios div div:hover > p {
  color: rgb(17, 27, 68);
  transition: 100ms;
}

.servicios div div:hover > .icon {
  transform: translateY(10px) translateX(10px) scale(1.3);
  border: none;
}

.servicios .icon-box {
  margin-bottom: 10px;
}

#clientes {
  background-color: rgb(255, 255, 255);
}

#clientes a:hover > img {
  transform: scale(1.2) !important;
  transition: 350ms;
}

#clientes a:hover > li {
  background-color: red;
}

.copyright-content {
  padding: 10px !important;
  min-height: 40px !important;
}

.footer-content .widget {
  margin-bottom: 0 !important;
}

#contacto label {
  font-size: 1.2em;
}

.contacto-info h4 {
  font-size: 1.2em;
}

* {
  font-family: "Inria Sans";
}

.slide-captions h2 span {
  font-family: "Roboto" !important;
}

.wappfloat {
  position: fixed;
  bottom: 1.2em;
  right: 0;
  z-index: 9;
  text-align: center;
}

.wappfloat img {
  width: 4em;
}

#contacto .whatsapp-button .btn-whatsapp {
  background-color: #15930c !important; /* Color WhatsApp */
  color: #fff !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border: none !important;
  border-radius: 5px !important;
  display: inline-block !important;
}

#contacto .whatsapp-button .btn-whatsapp:hover {
  background-color: #174e1c !important; /* Color WhatsApp */
  color: #ffffff !important;
}


@media (max-width: 768px) {
  .wappfloat {
    bottom: 5.5em;
    right: 1.4em;
  }
}

@media (max-width: 991.98px) {
      #header #logo {
          position: absolute !important;
          width: 100%;
          text-align: left;
          margin: 0 !important;
          float: none;
          height: 80px;
          left: 0;
          right: 0;
          padding: 0 !important;
          padding-left: 20px !important;
      }

      #header {
            position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
      }
  }

  /* Por defecto, el contenedor extra está oculto en escritorio */
.whatsapp-mobile-banner {
      display: none;

    }
    
    /* En móvil (o pantallas pequeñas), se muestra la nueva fila */
    @media (max-width: 768px) {
      .whatsapp-mobile-banner {
        display: block;
        padding-bottom: 10px;
        padding-top: 90px;
      }
    }

    .whatsapp-mobile-banner .whatsapp-button .btn-whatsapp {
      background-color: #15930c!important; /* Color WhatsApp */
      color: #fff !important;
      text-decoration: none !important;
      padding: 8px 16px !important;
      border: none !important;
      border-radius: 5px !important;
      display: inline-block !important;
    }
    
    .whatsapp-mobile-banner .whatsapp-button .btn-whatsapp:hover {
      background-color: #174e1c !important; /* Color WhatsApp */
      color: #ffffff !important;
    }

    .wap-mobile-banner {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          background-color: #15930c !important;
          border-radius: 10px;

    }

    .wap-mobile-banner h3{
          color: white;
    }

    .whatsapp-button {
          color: white; 
          font-size: 1.4em;
    }

    .whatsapp-button img {
          width: 20px;
    }

    #topbar .whatsapp-button {
          font-size: 0.8em
    }