/* =========================
   Ajustes generales
========================= */

body {
  overflow-x: hidden;
  padding-bottom: 100px;
}

/* No usar img global porque TemplateMo tiene img { width: 100%; } */

.banner-image {
  max-width: 100%;
}

.white {
  color: #fff;
}

.ieeq {
  color:#923790;
  text-align: left;
}

.white-background {
background-color:#fff
}

.violeta {
color:rgb(146, 55, 144);
} 

.italic-font {
font-style: Roboto;
color: black;
text-align: left;
}

.hr-espacio {
margin: 3rem 0 ; 
}

.icono-color {
color : #444444;
}
/* =========================
   Override fuerte del banner TemplateMo
========================= */

.main-banner {
  padding: 170px 0 60px !important;
  margin-top: 0 !important;
  min-height: auto !important;
  overflow: hidden;
}

.banner-button-center {
  display: flex;
  justify-content: center;
}

.main-banner .caption {
  background-color: rgba(255, 255, 255, 0.85);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding: 40px !important;
  border-radius: 23px;
}

.main-banner p {
  padding-right: 0 !important;
  margin-bottom: 28px !important;
}

.banner-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
}

.banner-image {
  max-height: 460px;
  object-fit: contain;
}

/* =========================
   Footer
========================= */

footer {
  margin-top: 0 !important;
  padding-bottom: 120px !important;
}

.contacto-container {
  justify-items: center;
  justify-self: center;
  margin-bottom: 4%;
  border-radius: 23px;
  padding-left: 5%;
  padding-right: 5%;
}

.map {
  justify-items: center;
  justify-self: center;
}

.footer-contact {
  margin-bottom: 2px;
}

.footer-about {
  font-size: 24px;
  font-weight: 600;
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

.footer strong {
  color:#444444;
}
/* =========================
   Barra inferior flotante
========================= */

.bottom-toolbar {
  position: fixed !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: min(96vw, 980px);

  display: flex;
  align-items: center;
  gap: 10px;

  background: #fff;
  border-radius: 60px;
  padding: 8px 12px;

  z-index: 99999;
}

.bottom-toolbar .toolbar-container {
  flex: 1;
  overflow: hidden;
}

.bottom-toolbar .toolbar-track {
  display: flex;
  gap: 12px;
  transition: transform .35s ease;
  will-change: transform;
}

.bottom-toolbar .toolbar-item {
  flex: 0 0 auto;
  line-height: 1;
}

.bottom-toolbar .toolbar-icon,
.bottom-toolbar .toolbar-item img {
  width: clamp(46px, 7vw, 60px) !important;
  height: clamp(46px, 7vw, 60px) !important;
  max-width: none !important;

  display: block;
  border-radius: 50%;
  object-fit: cover;

  border: 3px solid #f3f3f3;

  transition: transform .25s ease, border-color .25s ease;
}

.bottom-toolbar .toolbar-icon:hover,
.bottom-toolbar .toolbar-item:focus .toolbar-icon {
  transform: scale(1.08);
  border-color: #0d6efd;
}

.bottom-toolbar .nav-btn {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-toolbar .nav-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* =========================
   Bootstrap Popover
========================= */

.popover {
  max-width: 280px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 14px;
}

.popover-header {
  font-weight: 700;
}

.popover-body {
  font-size: 14px;
  line-height: 1.45;
}

/* =========================
   Responsive tablet
========================= */

@media (max-width: 1126px) { /*991*/
  .main-banner {
    padding: 130px 0 45px !important;
  }

  .main-banner .row {
    align-items: center;
  }

  .main-banner .caption {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    padding: 28px !important;
  }

  .main-banner p {
    padding-right: 0 !important;
  }

  .main-banner .line-dec {
    margin: 25px auto 20px;
  }

  .banner-image {
    max-height: 260px;
    margin-top: 20px;
  }

  footer {
    margin-top: 20px !important;
  }
}

/**/
/* =========================
   Responsive móvil
========================= */

@media (max-width: 767px) {
  body {
    padding-bottom: 88px;
  }

  .pre-header {
    display: none;
  }

  .header-area {
    top: 0;
  }

  .header-area .main-nav .logo img {
    max-width: 190px !important;
  }

  .main-banner {
    padding: 115px 0 35px !important;
  }

  .main-banner .caption {
    padding: 22px !important;
  }

  .main-banner h6 {
    font-size: 14px;
  }

  .main-banner p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 22px !important;
  }

  .banner-image {
    max-height: 220px;
  }

  footer {
    padding-bottom: 100px !important;
  }

  .bottom-toolbar {
    bottom: 8px !important;
    width: 96vw;
    gap: 6px;
    padding: 7px 8px;
  }

  .bottom-toolbar .toolbar-track {
    gap: 8px;
  }

  .bottom-toolbar .nav-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }
}

/* =========================
   Móviles pequeños
========================= */

.main-banner {
  position: relative;
  overflow: hidden;
  padding: 170px 0 60px !important;
}

.main-banner::after {
  transform-origin: top right;
}

.main-banner::before {
  transform: scale(0.9);
  transform-origin: top left;
}

/* Tablet */
@media (max-width: 1126px) { /*991*/
  
  .main-banner::before {
    transform: scale(0.75);
    transform-origin: top left;
    left: -60px !important;
  }
}

/* Móvil */
@media (max-width: 767px) {

  .main-banner {
    padding: 120px 0 45px !important;
    position: relative;
  }

  /* Imagen principal detrás del texto */
  .main-banner::after {

      animation: bannerFloatTablet 2s ease-in-out infinite alternate;
  }

  /* Elemento decorativo izquierdo */
  .main-banner::before {

    transform: scale(.55) !important;
    transform-origin: top left;

    left: -90px !important;

    opacity: .25;
  }

  .main-banner .caption {

    position: relative;
    z-index: 5;

    background-color: rgba(255,255,255,.90);

    backdrop-filter: blur(4px);

    border-radius: 25px;
  }
}

/* Móvil pequeño  cambio de app */
@media (max-width: 420px) {

  .main-banner::after {

      animation: bannerFloatTablet 2s ease-in-out infinite alternate;
  }

  .main-banner::before {

    transform: scale(.45) !important;

    left: -110px !important;
  }
}

/* =========================
   Pantallas con poca altura
========================= */

@media (max-height: 900px) and (min-width: 768px) {
  .main-banner {
    padding: 145px 0 40px !important;
  }

  .banner-image {
    max-height: 280px;
  }

  footer {
    margin-top: 10px !important;
  }
}
/* =========================
 Animaciones Banner
========================= */

@keyframes bannerFloatDesktop {

  from {
    transform: scale(0.95) translateY(0);
  }

  to {
    transform: scale(0.95) translateY(-12px);
  }

}

@keyframes bannerFloatTablet {

  from {
    transform: scale(0.65) translateY(0);
  }

  to {
    transform: scale(0.65) translateY(-10px);
  }

}

@keyframes bannerFloatMobile {

  from {
    transform: translate(-50%, -50%) scale(.65);
  }

  to {
    transform: translate(-50%, calc(-50% - 12px)) scale(.65);
  }

}

@keyframes bannerFloatMobileSmall {

  from {
    transform: translate(-50%, -50%) scale(.50);
  }

  to {
    transform: translate(-50%, calc(-50% - 10px)) scale(.50);
  }

}