/* Contacto por WhatsApp: tarjeta en la sección de contacto y botón flotante */
.tarjeta-whats{align-self:center;display:flex;flex-direction:column;gap:22px;padding:clamp(24px,3.4vw,36px);border-radius:var(--r-l);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(234,190,63,.28);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.tw-cab{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}
.tw-icono{flex:none;width:48px;height:48px;border-radius:50%;background:var(--oro);color:var(--cacao);display:grid;place-items:center}
.tw-cab strong{display:block;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;color:#fff}
.tw-cab span:not(.tw-icono){display:block;font-size:13px;color:#CDBFB3;margin-top:2px}
.tw-chat{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tw-etq{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--oro)}
.tw-burbuja{margin:0;max-width:92%;background:var(--crema);color:var(--cacao);padding:14px 18px;border-radius:18px 18px 4px 18px;font-size:15px;line-height:1.5;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn.btn-whats{width:100%;justify-content:center;white-space:nowrap;border-radius:999px;padding:17px 28px}
.btn-whats svg{flex:none}
.tw-nota{margin:0;font-size:13px;line-height:1.6;color:#CDBFB3;text-align:center}
.tw-nota a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}

.whats-flotante{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border-radius:999px;background:var(--cacao);color:#fff;border:1px solid rgba(234,190,63,.45);box-shadow:0 14px 34px rgba(46,36,36,.38);font-size:14px;font-weight:600;letter-spacing:.04em;white-space:nowrap;opacity:0;transform:translateY(18px) scale(.96);pointer-events:none;transition:opacity .5s var(--curva,ease),transform .5s var(--curva,ease)}
.whats-flotante .tw-icono{width:40px;height:40px}
.whats-flotante.visible{opacity:1;transform:none;pointer-events:auto}
.whats-flotante:hover{border-color:var(--oro)}
@media (max-width:560px){
  .whats-flotante{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:6px}
  .whats-flotante .wf-texto{display:none}
  .whats-flotante .tw-icono{width:46px;height:46px}
  .tw-burbuja{max-width:100%}
}
@media (prefers-reduced-motion:reduce){.whats-flotante{transition:none}}