/* Botón flotante de WhatsApp y su emergente (js/whatsapp.js). Hereda los tokens de styles.css. */
.wa {
  position: fixed;
  z-index: 90;
  right: max(var(--gutter, 1rem), env(safe-area-inset-right));
  bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.5rem));
  --wa-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.wa__fab {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; padding: 0;
  border: 0; border-radius: 50%;
  background: #25d366; color: #fff; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(11, 11, 12, 0.35);
  transition: transform 160ms var(--wa-ease), filter 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.wa__fab svg { width: 1.9rem; height: 1.9rem; fill: currentColor; display: block; }
.wa__fab:active { transform: scale(0.97); }
.wa__fab:focus-visible { outline: 2px solid var(--bone, #f2f0eb); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .wa__fab:hover { filter: brightness(1.06); }
}

/* Modo enlace (táctil o estrecho): sin emergente, solo el botón con un pequeño feedback al pulsar */
.wa--link .wa__panel { display: none; }
.wa--link .wa__fab:active { transform: scale(0.95); }

/* Icono: WhatsApp y X se cruzan dentro del propio botón */
.wa__ico { grid-area: 1 / 1; display: grid; place-items: center; transition: transform 200ms var(--wa-ease), opacity 200ms var(--wa-ease); }
.wa__ico--x { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.wa.is-open .wa__ico--wa { opacity: 0; transform: rotate(90deg) scale(0.6); }
.wa.is-open .wa__ico--x { opacity: 1; transform: none; transition-duration: 320ms; }
.wa__fab svg { fill: currentColor; }

/* Emergente: nace del botón. La hoja se recorta con un círculo que crece desde el centro del botón. */
.wa__panel {
  position: absolute; right: 0; bottom: calc(100% + 0.75rem);
  width: min(22rem, calc(100vw - 2 * max(var(--gutter, 1rem), env(safe-area-inset-right))));
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5));
  opacity: 0; visibility: hidden;
  /* Cierre: ~200 ms */
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}
.wa.is-open .wa__panel { opacity: 1; visibility: visible; transition: opacity 90ms ease-out, visibility 0s; }
.wa__sheet {
  position: relative; overflow: hidden;
  padding: 1.5rem;
  background: var(--ink, #0b0b0c); color: var(--bone, #f2f0eb);
  border: 1px solid var(--line-strong, rgba(242, 240, 235, 0.24));
  border-top: 2px solid var(--signal, #ff4d00);
  border-radius: 0;
  /* Centro del botón: 1,75 rem desde la derecha y 2,5 rem por debajo del emergente */
  clip-path: circle(1.75rem at calc(100% - 1.75rem) calc(100% + 2.5rem));
  transition: clip-path 200ms var(--wa-ease);
}
.wa.is-open .wa__sheet {
  clip-path: circle(170% at calc(100% - 1.75rem) calc(100% + 2.5rem));
  transition: clip-path 420ms var(--wa-ease);
}
/* Capa verde: el círculo sale del botón verde y se vuelve panel */
.wa__bloom {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #25d366; opacity: 1;
  transition: opacity 200ms ease-out;
}
.wa.is-open .wa__bloom { opacity: 0; transition: opacity 260ms ease-out 60ms; }

/* Contenido: entra escalonado justo después; sale de golpe */
.wa__title, .wa__text, .wa__cta, .wa__qr {
  opacity: 0; transform: translateY(8px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.wa.is-open .wa__title, .wa.is-open .wa__text, .wa.is-open .wa__cta, .wa.is-open .wa__qr {
  opacity: 1; transform: none;
  transition: opacity 240ms var(--wa-ease), transform 240ms var(--wa-ease);
}
.wa.is-open .wa__title { transition-delay: 70ms; }
.wa.is-open .wa__text { transition-delay: 105ms; }
.wa.is-open .wa__cta { transition-delay: 140ms; }
.wa.is-open .wa__qr { transition-delay: 175ms; }

.wa__title { margin: 0 0 0.35rem; font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.01em; }
.wa__text { margin: 0 0 1rem; font-family: var(--font-body, sans-serif); font-size: var(--text-sm, 0.875rem); line-height: 1.5; color: var(--muted, #8f8b84); }
.wa__cta {
  display: flex; align-items: center; justify-content: center;
  padding: 0.8rem 1rem; border-radius: 0;
  background: var(--signal, #ff4d00); color: var(--ink, #0b0b0c);
  font-family: var(--font-mono, monospace); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.wa__cta:focus-visible { outline: 2px solid var(--bone, #f2f0eb); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .wa.is-open .wa__cta:hover { filter: brightness(1.1); }
}

/* QR: módulos oscuros sobre fondo claro con margen, aunque el emergente sea oscuro */
.wa__qr { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line, rgba(242, 240, 235, 0.12)); text-align: center; }
.wa__qr-img { width: 13.5rem; height: 13.5rem; margin: 0 auto 0.6rem; }
.wa__qr svg { display: block; width: 100%; height: 100%; background: #fff; }
.wa__qr p { margin: 0; font-family: var(--font-mono, monospace); font-size: var(--text-xs, 0.75rem); letter-spacing: 0.04em; color: var(--muted, #8f8b84); }
/* Su propio momento: barrido de arriba abajo con un enfoque ligero, sin retrasar la apertura */
.wa__qr-img svg { clip-path: inset(0 0 100% 0); transform: scale(0.97); }
.wa.is-open .wa__qr.is-ready .wa__qr-img svg {
  clip-path: inset(0); transform: none;
  transition: clip-path 360ms var(--wa-ease) 200ms, transform 360ms var(--wa-ease) 200ms;
}

/* En táctil o pantalla estrecha el QR no sirve */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .wa__qr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Solo fundido: sin círculo, escala, barrido ni giro */
  .wa__sheet, .wa.is-open .wa__sheet { clip-path: none; transition: none; }
  .wa__bloom, .wa.is-open .wa__bloom { display: none; }
  .wa__panel { transition: opacity 160ms ease-out, visibility 0s linear 160ms; }
  .wa.is-open .wa__panel { transition: opacity 160ms ease-out, visibility 0s; }
  .wa__title, .wa__text, .wa__cta, .wa__qr, .wa.is-open .wa__title, .wa.is-open .wa__text, .wa.is-open .wa__cta, .wa.is-open .wa__qr { transform: none; opacity: 1; transition: none; }
  .wa__ico, .wa.is-open .wa__ico { transform: none; transition: opacity 160ms ease-out; }
  .wa__qr-img svg, .wa.is-open .wa__qr.is-ready .wa__qr-img svg { clip-path: none; transform: none; transition: none; }
  .wa__fab:active { transform: none; }
}