/* Ejemplo con el ID #case para aumentar especificidad */
#case #cuadro {
  background-color: gray;
  max-height: 100px !important; /* asegura que se aplique */
  overflow: hidden !important;
  transition: max-height 0.4s ease !important;
}

/* Apunta al hover dentro de #case y .vl-gallery-2 para mayor especificidad */
#case .vl-gallery-2 .gallery-content:hover .gallery-content-trans {
  max-height: 1000px !important; /* o auto si lo prefieres */
}

#case .vl-gallery-2 .gallery-content-trans.gallery-show-text {
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.4s ease;
  color: red;
  position: relative;
  background: #f0f0f0;
}

#case .vl-gallery-2 .gallery-content:hover .gallery-content-trans.gallery-show-text {
  max-height: 1000px;
  background: #e0ffe0;
}

#case .vl-gallery-2 .gallery-content-trans.gallery-show-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 60px;
  width: 120%;
  background: linear-gradient(to bottom, rgba(136, 136, 136, 0.332), rgba(9, 9, 9, 0.503));
  pointer-events: none;
  transition: opacity 0.7 ease;
}

#case .vl-gallery-2 .gallery-content:hover .gallery-content-trans.gallery-show-text::after {
  opacity: 0;
}

@keyframes blink-animation {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.gallery-hint-overlay img {
  animation: blink-animation 2s infinite;
}
.gallery-hint-overlay {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
 
  pointer-events: none; /* para que no interfiera con clics */
  transition: opacity 0.3s ease;
  width: 80px;
}

.vl-gallery-2:hover .gallery-hint-overlay {
  opacity: 0;
}

@media (min-width: 991px) and (max-width: 1399px) {
.vl-cta .vl-cta-bg-3 .vl-cta-icbox-content #cont-1 #cont-2 #cont-3{
 font-size: 17px;

}
}


@media (min-width: 991px) and (max-width: 1399px) {
  .vl-cta-icbox-content {
    text-align: center;
    padding: 10px;
  }

  .vl-cta-icbox-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
  }

  #cont-1,
  #cont-2 {
    display: inline-block;
    font-size: 1rem;
    text-decoration: none;
    color: white;
  }
}

/* chat bot */


@media (max-height: 1000px) {
  iframe[src*="micliente.io"] {
    transform: scale(1);
  }
}

@media (max-height: 800px) {
  iframe[src*="micliente.io"] {
    transform: scale(0.8);
  }
}
iframe[src*="micliente.io"] {
  z-index: 999999999999999999999999 !important;
  position: fixed !important;
}

/* =================================== */
/* --- Estilos para Dispositivos Móviles --- */
/* =================================== */



/* Ajuste para el anclaje del header fijo */
#about,
#service,
#case,
#testimonial,
#work,
#faq,
#blog,
#cta {
  scroll-margin-top: 100px; /* Ajusta este valor a la altura de tu header si es necesario */
}

/* Estilos para el menú lateral (offcanvas) */
.vl-offcanvas {
    background-color: #050C36 !important; /* Color oscuro del header */
}
.vl-offcanvas .vl-offcanvas-menu nav ul li a {
    color: white !important;
    line-height: 2.5 !important;
}
.vl-offcanvas .vl-offcanvas-close-toggle {
    color: white !important;
}
.vl-offcanvas .vl-offcanvas-sm-title {
    color: white !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}
.vl-offcanvas-social a {
    color: white !important;
}
.vl-offcanvas-info-box-text a {
    color: white !important;
}

/* --- Tamaño de Fuente Unificado para Menú Lateral --- */
.vl-offcanvas .vl-offcanvas-menu nav ul li a,
.vl-offcanvas .vl-offcanvas-sm-title,
.vl-offcanvas-info-box-text a,
.vl-offcanvas .thme-btn3 {
    font-size: 20px !important;
}

/* --- Tamaño de Logos de Redes Sociales --- */
.vl-offcanvas-social a {
    font-size: 28px !important;
}

@media (max-width: 768px) {

  /* --- Títulos y Texto General --- */
  .vl-section-heading, .vl-section-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .vl-hero-content h1 {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }

  p, .vl-section-description {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* --- Espaciado de Secciones --- */
  .pt-100, .pb-100, .pt-70, .pb-70 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* --- Cabecera y Logo --- */
  .vl-logo img {
    max-width: 100px !important; /* Reducir el logo en móviles */
  }

  .vl-offcanvas-logo img {
    max-width: 100px !important; /* Reducir el logo en el menú lateral */
  }

  /* --- Sección de Héroe --- */
  .vl-hero-area {
    padding-top: 150px !important;
    padding-bottom: 50px !important;
  }

  .vl-hero-counter {
    justify-content: center;
    gap: 20px;
  }

  /* --- Sección "Sobre Nosotros" --- */
  .vl-about-imgs {
    margin-bottom: 30px;
  }

  /* --- Pie de página (Footer) --- */
  .vl-footer-widget-1,
  .vl-footer-widget-2,
  .vl-footer-widget-3,
  .vl-footer-widget-4 {
    text-align: center;
    margin-bottom: 40px;
  }

  .vl-footer-social ul {
    justify-content: center;
  }

  .vl-footer-widget-3.ml-40 {
    margin-left: 0;
  }
}

/* --- Botón de WhatsApp Flotante --- */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: transform 0.2s ease-in-out;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-icon {
  width: 100%;
  height: 100%;
}

@media (max-width: 576px) {
  /* --- Ajustes aún más finos para celulares pequeños --- */
  .vl-section-heading, .vl-section-title {
    font-size: 24px !important;
  }

  .vl-hero-content h1 {
    font-size: 28px !important;
  }

  .vl-hero-btn-3 {
    padding: 6px 6px 6px 15px;
    font-size: 14px;
  }

  .vl-hero-btn-3 span {
    height: 30px;
    width: 30px;
    line-height: 30px;
  }
}

/* Prevenir scroll horizontal en Safari */
html, body {
  overflow-x: hidden;
}