/* ============ WhatsApp: botón flotante y paso previo ============ */
.wa-flota {
  position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; height: 56px; padding: 0 16px; gap: 0; background: var(--ink); color: var(--white); text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(18, 18, 18, 0.45);
  transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), gap 320ms var(--ease-out), transform 160ms var(--ease-out), translate 320ms var(--ease-out) 80ms;
  animation: wa-in 520ms var(--ease-out) 1200ms both;
}
.wa-flota svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.wa-flota__txt { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 650; transition: max-width 320ms var(--ease-out); }
.wa-flota:active { transform: scale(0.96); }
.wa-flota:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* el gesto de todos los botones: una línea cruza y se engrosa hasta cubrir (pedido de Juan, 1/10) */
.wa-flota { overflow: hidden; isolation: isolate; }
.wa-flota::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--orange); clip-path: inset(50% 0 50% 0); transition: clip-path 200ms var(--ease-out); }
.wa-flota::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1.5px); height: 3px; z-index: -1; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform 200ms var(--ease-out) 110ms; }
.wa-flota:active::after { transform: scaleX(1); transform-origin: left; transition: transform 160ms var(--ease-out); }
.wa-flota:active::before { clip-path: inset(0 0 0 0); transition: clip-path 200ms var(--ease-out) 80ms; }
@media (hover: hover) and (pointer: fine) {
  .wa-flota:hover { color: var(--ink); gap: 10px; transition: color 180ms ease 230ms, gap 320ms var(--ease-out), transform 160ms var(--ease-out), translate 320ms var(--ease-out); }
  .wa-flota:hover::after { transform: scaleX(1); transform-origin: left; transition: transform 220ms var(--ease-out); }
  .wa-flota:hover::before { clip-path: inset(0 0 0 0); transition: clip-path 300ms var(--ease-out) 170ms; }
  .wa-flota:hover .wa-flota__txt { max-width: 7em; }
}
.wa-flota.is-sobre-oscuro::before, .wa-flota.is-sobre-oscuro::after { background: var(--white); }
@keyframes wa-in { from { opacity: 0; transform: translateY(16px); } }
/* encima de otro botón o de un campo se corre hacia el borde (translate, aparte del transform de la entrada y del :active) */
.wa-flota.is-apartado { translate: calc(100% + 24px) 0; transition: translate 260ms var(--ease-out); }

/* en el pie oscuro, que no se pierda */
.wa-flota.is-sobre-oscuro { background: var(--orange); color: var(--ink); }

/* paso previo */
.wa-gate { width: min(560px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.wa-gate::backdrop { background: rgba(18, 18, 18, 0); transition: background-color 240ms var(--ease-out); }
.wa-gate.is-open::backdrop { background: rgba(18, 18, 18, 0.55); }
.wa-gate__card {
  position: relative; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;   /* que se vea que se puede bajar */
  padding: clamp(24px, 4vw, 40px); background: var(--white);
  opacity: 0; transform: translateY(12px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.wa-gate.is-open .wa-gate__card { opacity: 1; transform: none; }
.wa-gate__title { margin: 12px 0 10px; font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; }
.wa-gate__bajada { margin: 0 0 12px; color: var(--gray); line-height: 1.5; }
.wa-gate__cerrar { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); }
.wa-gate__cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wa-gate__cerrar:focus-visible { outline: 2px solid var(--orange); }
@media (hover: hover) and (pointer: fine) { .wa-gate__cerrar:hover { color: var(--orange-ink); } }
.wa-gate.is-enviado .wa-gate__form, .wa-gate.is-enviado .wa-gate__bajada, .wa-gate.is-enviado #wa-gate-t { display: none; }
.wa-gate__listo { padding: 12px 0 4px; }

/* celular: hoja desde abajo */
@media (max-width: 600px) {
  .wa-flota { padding: 0; width: 56px; justify-content: center; }
  .wa-gate { width: 100%; margin: auto 0 0; max-height: 92dvh; }
  .wa-gate__card { max-height: 92dvh; padding-bottom: max(24px, env(safe-area-inset-bottom)); transform: translateY(100%); transition-duration: 320ms; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-flota { animation: none; }
  .wa-gate__card { transform: none !important; transition: opacity 160ms linear; }
}