/* Botón flotante de WhatsApp + popup de captura de leads */
:root {
  --aov-wa-green: #25d366;
  --aov-wa-green-d: #1eb257;
  --aov-wa-pink: #f40f50;
}

/* ── Contenedor fijo: burbuja de aviso + botón ── */
.aov-wa-fab-wrap {
  position: fixed;
  bottom: 22px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 12px;
}
.aov-wa-fab-wrap.aov-wa--left { left: 22px; }
.aov-wa-fab-wrap.aov-wa--right { right: 22px; }

/* ── Botón flotante ── */
.aov-wa-fab {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  /* Verde translúcido en vez de sólido: mismo vidrio líquido que el resto
     del sitio (blur + saturate + "shine"), pero con opacidad alta (0.86)
     porque este botón es el CTA principal — necesita seguir leyéndose
     como un verde de WhatsApp nítido a simple vista, no un panel discreto. */
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.86);
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  transition: transform .16s var(--ease-out, ease), background .18s ease, box-shadow .18s ease;
  /* Retraso a propósito: si aparece con el resto de la página (0s) se
     siente parte de la carga, no un elemento propio. Esperando un poco
     se percibe como una aparición independiente. La burbuja (abajo)
     espera a que este pop termine antes de empezar el suyo. */
  animation: aov-wa-pop .35s .7s var(--ease-out, ease) both;
}
.aov-wa-fab:hover { transform: scale(1.08); background: rgba(30, 178, 87, 0.92); box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.14); }
.aov-wa-fab:active { transform: scale(0.92); transition-duration: .1s; }
.aov-wa-fab:focus-visible { outline: 3px solid var(--aov-wa-pink); outline-offset: 3px; }
.aov-wa-fab-icon { width: 30px; height: 30px; }
@keyframes aov-wa-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Burbuja de aviso junto al botón ──
   Mismo radio y sombra que el resto de tarjetas del sitio (ver
   .nav-mega-promo-card en style.css), para que no desentone.
   El contenedor es solo visual (borde, sombra, radio); el trigger y el
   cierre son <button> reales -hermanos, no anidados- para que ambos sean
   accesibles por teclado sin meter un <button> dentro de otro <button>. */
.aov-wa-notify {
  position: relative;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(14px) saturate(var(--lg-saturate, 1.8));
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.14), var(--lg-shine-light, inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(17, 17, 17, 0.05));
  /* Arranca cuando el botón (delay .7s + duración .35s) ya terminó de
     aparecer, con un pequeño respiro — así se ven como dos apariciones
     separadas, no una sola de golpe. */
  animation: aov-wa-notify-in .4s 1.15s var(--ease-out, ease) both;
  transition: transform var(--ease, .25s ease), box-shadow var(--ease, .25s ease);
}
.aov-wa-notify:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(17, 17, 17, 0.2);
}
.aov-wa-fab-wrap.aov-wa--right .aov-wa-notify { animation-name: aov-wa-notify-in-from-right; }
.aov-wa-fab-wrap.aov-wa--left .aov-wa-notify { animation-name: aov-wa-notify-in-from-left; }
.aov-wa-notify[hidden] { display: none; }
.aov-wa-notify-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: #15202b;
  background: none;
  border: none;
  border-radius: inherit;
  padding: 9px 24px 9px 9px;
  cursor: pointer;
}
.aov-wa-notify-trigger:focus-visible,
.aov-wa-notify-close:focus-visible {
  outline: 2px solid var(--aov-wa-pink);
  outline-offset: 2px;
}
.aov-wa-notify-badge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.aov-wa-notify-badge img { width: 100%; height: 100%; display: block; object-fit: cover; }
.aov-wa-notify-text { white-space: nowrap; }
.aov-wa-notify-close {
  position: absolute;
  top: 6px;
  right: 7px;
  border: none;
  background: none;
  font-size: 17px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: color .12s ease, background .12s ease;
}
/* Área táctil ampliada a ~44x44 sin agrandar el círculo visible. */
.aov-wa-notify-close::before {
  content: '';
  position: absolute;
  inset: -9px;
}
.aov-wa-notify-close:hover { color: #333; background: #f2f3f5; }
@keyframes aov-wa-notify-in-from-right { from { transform: translateX(14px) scale(0.94); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes aov-wa-notify-in-from-left { from { transform: translateX(-14px) scale(0.94); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }

/* ── Modal ── */
.aov-wa-modal[hidden] { display: none; }
.aov-wa-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.aov-wa-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 20, 0.55);
  backdrop-filter: blur(2px);
  animation: aov-wa-fade .2s ease both;
}
.aov-wa-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: aov-wa-up .24s cubic-bezier(.2,.8,.2,1) both;
  font-family: inherit;
}
@keyframes aov-wa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aov-wa-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Salida: más rápida que la entrada (asimétrico), para que cerrar se sienta inmediato. */
.aov-wa-modal.is-closing .aov-wa-overlay { animation: aov-wa-fade-out .15s ease both; }
.aov-wa-modal.is-closing .aov-wa-card { animation: aov-wa-down .15s ease both; }
@keyframes aov-wa-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes aov-wa-down { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } }

/* ── Variante fija embebida (ej: columna del footer, no es un modal) ──
   .aov-wa-card fue pensada para flotar sobre un overlay oscuro (sombra
   grande, radio de 18px); aquí vive dentro de .footer-col-cta, que YA es
   la tarjeta (fondo blanco + sombra, ver style.css). Repetir fondo/borde/
   sombra aquí crea una tarjeta dentro de otra tarjeta — se ve como si el
   formulario flotara encima del footer en vez de ser parte de él. Por eso
   esta variante no tiene tarjeta propia: hereda la del contenedor. */
.aov-wa-card--inline {
  max-width: none;
  animation: none;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.aov-wa-inline-lead {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: #667;
  line-height: 1.5;
}

.aov-wa-x {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #9aa2ab;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.aov-wa-x:hover { color: #333; background: #f2f3f5; }

.aov-wa-head { display: flex; gap: 12px; align-items: center; margin: 2px 0 16px; }
.aov-wa-badge {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--aov-wa-green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.aov-wa-badge-icon { width: 22px; height: 22px; }
.aov-wa-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: #111; line-height: 1.2; }
.aov-wa-sub { margin: 3px 0 0; font-size: .86rem; color: #667; line-height: 1.35; }

/* ── Formulario ── */
.aov-wa-form { display: flex; flex-direction: column; gap: 11px; }
.aov-wa-form label { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-weight: 700; color: #445; }
.aov-wa-opt { font-weight: 400; color: #98a0a8; text-transform: none; }
.aov-wa-form input,
.aov-wa-form textarea,
.aov-wa-form select {
  font-family: inherit;
  font-size: .95rem;
  padding: 11px 13px;
  border: 1.5px solid #dfe3e8;
  border-radius: 10px;
  background: #fbfcfd;
  color: #111;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.aov-wa-form textarea { resize: vertical; }
.aov-wa-form input:focus,
.aov-wa-form textarea:focus,
.aov-wa-form select:focus {
  outline: none;
  border-color: var(--aov-wa-green);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
  background: #fff;
}
.aov-wa-phone-row { display: flex; gap: 8px; }
.aov-wa-phone-row select { flex: 0 0 auto; width: 92px; padding-left: 8px; padding-right: 4px; }
.aov-wa-phone-row input { flex: 1 1 auto; min-width: 0; }

.aov-wa-email-wrap { position: relative; }
.aov-wa-email-wrap input { display: block; width: 100%; }
.aov-wa-email-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1.5px solid #dfe3e8;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 25, 35, 0.14);
  max-height: 168px;
  overflow-y: auto;
  transform-origin: top;
  animation: aov-wa-suggest-in .15s var(--ease-out, ease) both;
}
.aov-wa-email-suggest[hidden] { display: none; }
@keyframes aov-wa-suggest-in { from { opacity: 0; transform: scale(0.96) translateY(-2px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.aov-wa-email-suggest li {
  padding: 9px 10px;
  border-radius: 7px;
  font-size: .88rem;
  font-weight: 500;
  color: #223;
  cursor: pointer;
  transition: background .1s ease, color .1s ease;
}
.aov-wa-email-suggest li:hover,
.aov-wa-email-suggest li.is-active {
  background: rgba(37, 211, 102, 0.12);
  color: var(--aov-wa-green-d);
}

.aov-wa-hp { position: absolute !important; left: -9999px !important; height: 0 !important; width: 0 !important; opacity: 0 !important; }

.aov-wa-msg { margin: 2px 0 0; font-size: .82rem; min-height: 1em; }
.aov-wa-msg.is-error { color: #c0264a; }
.aov-wa-msg.is-ok { color: #1a8a45; }

.aov-wa-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  background: var(--aov-wa-green);
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .15s ease, transform .12s var(--ease-out, ease);
}
.aov-wa-submit:hover { background: var(--aov-wa-green-d); }
.aov-wa-submit:active { transform: scale(0.97); }
.aov-wa-submit[disabled] { opacity: .6; cursor: default; }

.aov-btn-paper-plane {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Tarjeta de contacto (mobile): reemplaza el botón circular ──
   Oculta por defecto (desktop); .aov-wa-fab-wrap se encarga de ahí. Todo lo
   demás vive dentro del media query de abajo para que nunca se muestre ni
   ocupe layout en pantallas grandes. */
.aov-wa-contact-bar { display: none; }

@media (max-width: 560px) {
  .aov-wa-fab-wrap { display: none; }

  .aov-wa-contact-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(100% - 24px);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(var(--lg-saturate, 1.8));
    -webkit-backdrop-filter: blur(14px) saturate(var(--lg-saturate, 1.8));
    border: none;
    border-radius: 20px;
    padding: 10px 10px 10px 14px;
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.16), var(--lg-shine-light, inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(17, 17, 17, 0.05));
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    /* Mismo retraso que .aov-wa-fab en escritorio: esta barra la reemplaza
       en mobile, así que debe entrar con el mismo ritmo. */
    animation: aov-wa-pop .35s .7s var(--ease-out, ease) both;
    transition: transform .12s var(--ease-out, ease);
  }
  .aov-wa-contact-bar:active { transform: scale(0.98); }
  .aov-wa-contact-bar:focus-visible { outline: 2px solid var(--aov-wa-pink); outline-offset: 2px; }

  .aov-wa-contact-bar-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .aov-wa-contact-bar-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
  }
  .aov-wa-contact-bar-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }

  .aov-wa-contact-bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .aov-wa-contact-bar-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .95rem;
    font-weight: 800;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .aov-wa-verified { flex: 0 0 auto; width: 16px; height: 16px; position: relative; top: 2px; }
  .aov-wa-contact-bar-phone { font-size: .84rem; font-weight: 500; color: #6b7280; white-space: nowrap; }

  .aov-wa-contact-bar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 211, 102, 0.86);
    backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
    -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    padding: 12px 16px;
    border-radius: 14px;
  }
  .aov-wa-contact-bar-btn-icon { width: 17px; height: 17px; }

  /* Deja aire abajo para que la barra fija no tape el final del contenido. */
  body:has(.aov-wa-contact-bar) { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .aov-wa-fab,
  .aov-wa-fab *,
  .aov-wa-notify,
  .aov-wa-contact-bar,
  .aov-wa-modal,
  .aov-wa-modal *,
  .aov-wa-modal *::before,
  .aov-wa-modal *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .aov-wa-fab:hover,
  .aov-wa-fab:active {
    transform: none;
  }
}