/* =====================================================================
   extras.css — WhatsApp, foco de teclado y mensajes del formulario.
   Usa la paleta del tema si está cargada (--pv, --py, --ink) y tiene
   valores de reserva para funcionar también en blanco y negro.
   ===================================================================== */

/* ---------- Botón flotante de WhatsApp ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:140;display:flex;align-items:center;gap:0;height:56px;min-width:56px;padding:0 16px;border-radius:999px;
  background:var(--pv,#111);color:#fff;font-family:var(--display,'Inter Tight',sans-serif);font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 10px 30px rgba(17,17,17,.22);transition:opacity .3s ease,transform .3s ease,gap .3s ease}
.wa svg{width:24px;height:24px;fill:currentColor;flex:none}
.wa .wa-txt{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s cubic-bezier(.2,.7,.2,1)}
.wa-off{opacity:0;pointer-events:none;transform:translateY(12px)}
@media (hover:hover) and (pointer:fine){
  .wa:hover{gap:10px}
  .wa:hover .wa-txt{max-width:120px}
}
.wa:focus-visible{gap:10px}
.wa:focus-visible .wa-txt{max-width:120px}
@media(max-width:600px){.wa{right:14px;bottom:14px;height:52px;min-width:52px;padding:0 14px}}

/* ---------- Foco visible al navegar con teclado ----------
   Anillo negro + halo amarillo: se ve sobre blanco, violeta y amarillo. */
:focus-visible{outline:2px solid #111;outline-offset:2px;box-shadow:0 0 0 5px var(--py,#FFD400);border-radius:2px}
.faq-q:focus-visible,.row:focus-visible{outline-offset:-2px}
input:focus-visible,textarea:focus-visible{box-shadow:none}

/* ---------- Mensajes del formulario ---------- */
.form-msg{display:none;margin:0 0 18px;padding:12px 14px;border-left:3px solid var(--pv,#111);background:var(--paper-2,#f4f4f4);color:var(--ink,#111);font-size:14px;line-height:1.45}
.form-msg.show{display:block}
.form-msg a{text-decoration:underline}

@media (prefers-reduced-motion:reduce){.wa,.wa .wa-txt{transition:none}}

/* ---------- Fluidez ----------
   El desenfoque de fondo de la cabecera fija (backdrop-filter) se recalcula en cada
   fotograma del scroll y es lo más costoso de la página: se sustituye por un fondo casi opaco. */
header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
header.scrolled{background:rgba(255,255,255,.97)}

/* ---------- Menú en pantallas medianas (900–1180 px): que quepa en una línea ---------- */
.nav-links a{white-space:nowrap}
@media(min-width:901px) and (max-width:1180px){
  .nav-links{gap:16px}
  .nav-links a{font-size:13.5px}
  .nav{gap:20px}
  .nav-cta{padding:10px 14px}
}