/* ---------- Contacto flotante: un botón, un menú y un aviso ----------
   Un solo botón redondo abajo a la derecha, con la etiqueta "¿Necesitas
   ayuda?" encima. Al pulsarlo despliega tres canales: agendar valoración
   (formulario), WhatsApp y el asistente virtual (chat en la página). El
   chat se posa sobre el botón y el menú se cierra al abrirlo. Sustituye al
   flotante .wa (se oculta cuando el widget existe); en el pie y sin JS el
   enlace sigue estando. */
.chat { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 92; font-family: var(--font-sans); display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.sin-wa .chat { display: none; }

/* Etiqueta sobre el botón: se esconde con el menú o el chat abiertos.
   Fuera del flujo (absoluta sobre el botón) para que el menú, al
   desplegarse, no la empuje: solo se desvanece en su sitio. */
.canales__hint { position: absolute; right: .2rem; bottom: calc(60px + .7rem); white-space: nowrap; padding: .5rem .9rem; background: var(--vl-white); color: var(--vl-ink); border: 1px solid var(--vl-line); border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 600; box-shadow: var(--sh-float); transition: opacity .3s var(--ease); }
.canales__hint::after { content: ""; position: absolute; right: 22px; bottom: -6px; width: 10px; height: 10px; background: var(--vl-white); border-right: 1px solid var(--vl-line); border-bottom: 1px solid var(--vl-line); transform: rotate(45deg); }
.chat[data-open="true"] .canales__hint, .chat[data-chat="true"] .canales__hint { opacity: 0; pointer-events: none; }

/* Botón redondo */
.canales__btn { width: 60px; height: 60px; border: 0; border-radius: 50%; background: var(--vl-gold-deep); color: var(--vl-white); box-shadow: var(--sh-float); cursor: pointer; display: grid; place-items: center; position: relative; transition: background-color .25s var(--ease), transform .25s var(--ease); }
.canales__btn:hover { background: var(--vl-ink); transform: translateY(-2px); }
.canales__btn:focus-visible { outline: 2px solid var(--vl-gold); outline-offset: 3px; }
.canales__btn-ico { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .2s var(--ease), transform .25s var(--ease); }
.canales__btn-ico--cerrar { opacity: 0; transform: rotate(-90deg); }
.chat[data-open="true"] .canales__btn-ico--abrir, .chat[data-chat="true"] .canales__btn-ico--abrir { opacity: 0; transform: rotate(90deg); }
.chat[data-open="true"] .canales__btn-ico--cerrar, .chat[data-chat="true"] .canales__btn-ico--cerrar { opacity: 1; transform: none; }
.chat[data-open="true"] .canales__btn, .chat[data-chat="true"] .canales__btn { background: var(--vl-ink); }

/* Menú de canales */
.canales__menu { display: flex; flex-direction: column; gap: .5rem; width: min(300px, calc(100vw - 2rem)); opacity: 0; transform: translateY(10px) scale(.98); transform-origin: bottom right; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.canales__menu[hidden] { display: none; }
.chat[data-open="true"] .canales__menu { opacity: 1; transform: none; }
.canales__item { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; background: var(--vl-white); color: var(--vl-ink); border: 1px solid var(--vl-line); border-radius: var(--r-md); box-shadow: var(--sh-card); text-decoration: none; text-align: left; font: inherit; cursor: pointer; width: 100%; transition: transform .2s var(--ease), border-color .2s var(--ease); }
.canales__item:hover { transform: translateX(-3px); border-color: var(--vl-gold); }
.canales__item:focus-visible { outline: 2px solid var(--vl-gold); outline-offset: 2px; }
.canales__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--vl-paper-2); color: var(--vl-gold-deep); }
.canales__ico--wa { color: #25d366; }
.canales__label { display: flex; flex-direction: column; line-height: 1.2; }
.canales__label strong { font-size: var(--text-sm); font-weight: 600; }
.canales__label em { font-style: normal; font-size: var(--text-xs, .75rem); color: var(--vl-ink-3); margin-top: .15rem; }
.canales__item--principal { background: var(--vl-ink); color: var(--vl-white); border-color: var(--vl-ink); }
.canales__item--principal .canales__ico { background: var(--vl-gold-deep); color: var(--vl-white); }
.canales__item--principal .canales__label em { color: rgba(255,255,255,.7); }
.canales__item--principal:hover { border-color: var(--vl-gold); }

.chat__panel {
  position: absolute; right: 0; bottom: calc(60px + .8rem);
  width: min(380px, calc(100vw - 2rem)); max-height: min(600px, calc(100vh - 8rem));
  display: flex; flex-direction: column;
  background: var(--vl-white); border: 1px solid var(--vl-line); border-radius: var(--r-md);
  box-shadow: var(--sh-float); overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.chat__panel[data-open="true"] { opacity: 1; transform: none; }
/* display:flex de arriba le ganaba al [hidden] del navegador: el panel
   cerrado seguía tapando el menú aunque fuera invisible. */
.chat__panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .chat__panel, .canales__menu, .canales__hint, .canales__btn, .canales__btn-ico, .bienvenida, .bienvenida__caja { transition: none; } }

.chat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .8rem 1.2rem; border-bottom: 1px solid var(--vl-line); position: relative; }
.chat__head::before { content: ""; position: absolute; left: 0; top: 1rem; bottom: .8rem; width: 2px; background: var(--vl-gold); border-radius: var(--r-pill); }
.chat__kicker { margin: 0; font-size: var(--text-xs, .75rem); letter-spacing: .08em; text-transform: uppercase; color: var(--vl-gold-deep); font-weight: 600; }
.chat__title { margin: .15rem 0 0; font-size: var(--text-base, 1rem); font-weight: 600; line-height: 1.25; }
.chat__close { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--vl-ink-3); border-radius: 50%; cursor: pointer; }
.chat__close:hover { background: var(--vl-paper-2); color: var(--vl-ink); }

.chat__log { flex: 1; min-height: 180px; overflow-y: auto; padding: 1rem 1rem .5rem; display: flex; flex-direction: column; gap: .6rem; background: var(--vl-paper); }
.chat__msg { max-width: 88%; padding: .6rem .85rem; border-radius: var(--r-md); font-size: var(--text-sm); line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.chat__msg--bot { align-self: flex-start; background: var(--vl-white); border: 1px solid var(--vl-line); color: var(--vl-ink); border-bottom-left-radius: var(--r-xs); }
.chat__msg--yo  { align-self: flex-end; background: var(--vl-ink); color: var(--vl-white); border-bottom-right-radius: var(--r-xs); }
.chat__msg--espera { color: var(--vl-ink-3); font-style: italic; }
.chat__msg--espera::after { content: "…"; animation: chat-puntos 1.2s steps(4, end) infinite; }
@keyframes chat-puntos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.chat__cta { align-self: flex-start; margin-top: -.2rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; background: var(--vl-gold-deep); color: var(--vl-white); border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.chat__cta:hover { background: var(--vl-ink); }

.chat__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem 1rem; background: var(--vl-paper); }
.chat__chip { padding: .35rem .75rem; border: 1px solid var(--vl-line-2); background: var(--vl-white); color: var(--vl-ink-2); border-radius: var(--r-pill); font: inherit; font-size: var(--text-xs, .78rem); cursor: pointer; }
.chat__chip:hover { border-color: var(--vl-gold); color: var(--vl-ink); }
.chat__chips[hidden] { display: none; }

.chat__form { display: flex; gap: .5rem; padding: .7rem .8rem .5rem; border-top: 1px solid var(--vl-line); }
.chat__input { flex: 1; min-width: 0; padding: .65rem .9rem; border: 1px solid var(--vl-line-2); border-radius: var(--r-pill); font: inherit; font-size: var(--text-sm); color: var(--vl-ink); background: var(--vl-white); }
.chat__input:focus { outline: 2px solid var(--vl-gold); outline-offset: 1px; }
.chat__send { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--vl-ink); color: var(--vl-white); cursor: pointer; }
.chat__send:disabled { opacity: .5; cursor: default; }
.chat__foot { margin: 0; padding: 0 1rem .7rem; font-size: .7rem; color: var(--vl-ink-3); }
.chat__foot a { color: var(--vl-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--vl-gold); }

@media (max-width: 480px) {
  .chat { right: 1rem; bottom: 1rem; }
  .chat__panel { position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + 60px + .8rem); width: auto; max-height: calc(100vh - 8rem); }
}

/* ---------- Aviso de bienvenida ----------
   Centrado sobre la página: foto de la clínica a la izquierda y el texto a
   la derecha; en móvil la foto pasa arriba en 16:9. Aparece a los 6 s y no
   vuelve hasta pasados 10 min; nunca en agendamiento ni en gracias
   (body.no-nudge). Lo abre y cierra chat.js. */
.bienvenida { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .35s var(--ease); }
.bienvenida[hidden] { display: none; }
.bienvenida[data-open="true"] { opacity: 1; }
.bienvenida__fondo { position: absolute; inset: 0; background: rgba(22, 25, 27, .6); backdrop-filter: blur(3px); }
.bienvenida__caja { position: relative; width: min(760px, 100%); background: var(--vl-paper); color: var(--vl-ink); border-radius: var(--r-lg); box-shadow: var(--sh-float); overflow: hidden; display: grid; grid-template-columns: 300px minmax(0, 1fr); transform: translateY(16px) scale(.97); transition: transform .4s var(--ease); }
.bienvenida[data-open="true"] .bienvenida__caja { transform: none; }
.bienvenida__foto { margin: 0; position: relative; min-height: 380px; background: var(--vl-paper-2); }
.bienvenida__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bienvenida__contenido { position: relative; padding: 2.75rem 2.75rem 2.1rem; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.bienvenida__close { position: absolute; top: .75rem; right: .75rem; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--vl-ink-3); border-radius: 50%; cursor: pointer; }
.bienvenida__close:hover, .bienvenida__close:focus-visible { background: var(--vl-paper-2); color: var(--vl-ink); }
.bienvenida .eyebrow { margin: 0; }
.bienvenida__titulo { margin: 1.1rem 0 0; font-size: var(--text-xl); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.bienvenida__texto { margin: .75rem 0 0; font-size: var(--text-base); line-height: 1.6; color: var(--vl-ink-2); font-weight: 300; text-wrap: pretty; }
.bienvenida__acciones { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; margin-top: auto; padding-top: 1.75rem; width: 100%; }
.bienvenida__acciones .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.bienvenida__caja:focus { outline: none; }
.bienvenida__luego { align-self: center; border: 0; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--vl-ink-3); cursor: pointer; padding: .6rem 1rem; }
.bienvenida__luego:hover { color: var(--vl-ink); text-decoration: underline; }
.bienvenida__close:focus-visible, .bienvenida__luego:focus-visible, .bienvenida__acciones .btn:focus-visible { outline: 2px solid var(--vl-gold); outline-offset: 2px; }
@media (max-width: 640px) {
  .bienvenida__caja { grid-template-columns: 1fr; border-radius: 20px; }
  .bienvenida__foto { min-height: 0; aspect-ratio: 16 / 9; }
  .bienvenida__foto img { object-position: center 22%; }   /* que no corte la cabeza al pasar a 16:9 */
  .bienvenida__contenido { position: static; padding: 1.75rem 1.5rem 1.5rem; }
  /* La X pasa a la esquina de la caja, sobre la foto, y no choca con el eyebrow */
  .bienvenida__close { top: .6rem; right: .6rem; background: rgba(255, 255, 255, .85); color: var(--vl-ink); }
}