/*! ACOUSTIC PLANT — QA cabecera (global, todas las páginas).
 *  Correcciones de la versión móvil del sitio estático:
 *   #1  Menú hamburguesa (off-canvas) — refuerzos visuales del panel.
 *   #2  Logo demasiado grande en la barra móvil (se solapa con la imagen inferior).
 *   #3  Botón de WhatsApp blanco/invisible → verde WhatsApp (#25D366).
 *  Se aplica a ES/CA/EN por igual (GTranslate traduce en cliente, un solo HTML). */

/* ============================================================
   #3 · Botón flotante de WhatsApp (Click to Chat — #ht-ctc-chat)
   El plugin depende de su JS (que no corre en el clon estático) y deja
   el botón oculto (display:none) o sin color. Lo forzamos visible y verde.
   ============================================================ */
#ht-ctc-chat.ht-ctc {
  display: block !important;
  position: fixed !important;
  bottom: 15px !important;
  right: 15px !important;
  z-index: 99999999 !important;
  cursor: pointer;
}

/* El icono SVG ya trae su degradado verde propio; garantizamos que el
   contenedor no quede en blanco y que el botón sea perfectamente redondo. */
#ht-ctc-chat .ht_ctc_style,
#ht-ctc-chat .ctc_s_2 {
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-color: #25D366 !important; /* verde WhatsApp */
  border-radius: 50% !important;
  width: 55px;
  height: 55px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

#ht-ctc-chat svg {
  display: block !important;
  height: 50px !important;
  width: 50px !important;
}

/* El texto CTA (pastilla) permanece oculto: solo queremos el icono redondo. */
#ht-ctc-chat .ht-ctc-cta {
  display: none !important;
}

/* ============================================================
   #2 · Logo de la cabecera demasiado grande en móvil.
   En post-11.css el logo mide 100px de ancho en móvil (≈81px de alto),
   casi tan alto como la barra (80px), por lo que se solapa con la imagen
   inferior. Lo reducimos y recolocamos para que quepa dentro de la barra.
   ============================================================ */
@media (max-width: 767px) {
  .elementor-11 .elementor-element.elementor-element-9015dd0 img,
  .elementor-element-9015dd0 img {
    width: 62px !important;
    height: auto !important;
  }
  /* Reposicionamos el logo absoluto para centrarlo verticalmente en la barra
     de 80px (alto del logo a 62px ≈ 50px → margen ~15px arriba/abajo). */
  .elementor-11 .elementor-element.elementor-element-9015dd0 {
    top: -50px !important;
  }
  /* El contenedor del logo se ajusta al nuevo ancho. */
  .elementor-11 .elementor-element.elementor-element-602efcf {
    --width: 62px !important;
  }
}

/* ============================================================
   #1 · Off-canvas (menú responsive) — refuerzos visuales.
   La lógica de apertura/cierre la aporta clon-qa-header.js; aquí solo
   garantizamos que el panel y su menú se vean correctamente al abrirse.
   ============================================================ */
/* Cuando el JS marca aria-hidden="false", el panel debe ser interactivo. */
.e-off-canvas[aria-hidden="false"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* El menú dropdown dentro del off-canvas siempre visible y en vertical. */
#off-canvas-56b0bfa .elementor-nav-menu--dropdown,
#off-canvas-56b0bfa .elementor-nav-menu__container {
  display: block !important;
}
#off-canvas-56b0bfa .elementor-nav-menu {
  display: block !important;
}
#off-canvas-56b0bfa .elementor-nav-menu .menu-item {
  display: block !important;
}
/* Enlaces del menú accesibles al teclado cuando el panel está abierto. */
.e-off-canvas[aria-hidden="false"] .elementor-item {
  pointer-events: auto !important;
}