/* Lyra · asistente guionado de Cielo Sur — variante B «Carta del cielo»:
   lanzador = píldora centrada abajo («Pregúntale a Lyra» + WhatsApp); hoja que sube a media pantalla con mapa estelar tenue;
   escritorio: conversación a la izquierda y atajos como constelación a la derecha; móvil: atajos en zigzag bajo la conversación. */
:root { --mapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300'%3E%3Cg fill='%23E4EAF6' fill-opacity='.35'%3E%3Ccircle cx='20' cy='30' r='1'/%3E%3Ccircle cx='90' cy='70' r='.8'/%3E%3Ccircle cx='160' cy='20' r='1.2'/%3E%3Ccircle cx='230' cy='90' r='.7'/%3E%3Ccircle cx='300' cy='40' r='1'/%3E%3Ccircle cx='390' cy='110' r='.8'/%3E%3Ccircle cx='60' cy='180' r='.9'/%3E%3Ccircle cx='140' cy='240' r='1.1'/%3E%3Ccircle cx='260' cy='200' r='.8'/%3E%3Ccircle cx='350' cy='260' r='1'/%3E%3Ccircle cx='200' cy='150' r='.6'/%3E%3C/g%3E%3Cg stroke='%23B7C4E6' stroke-opacity='.10' fill='none'%3E%3Cpath d='M300 40 L330 70 L310 110 L280 80 Z M310 110 L320 150'/%3E%3Cpath d='M60 180 L100 200 L140 240 L180 230'/%3E%3Ccircle cx='210' cy='150' r='120' stroke-dasharray='2 6'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---- lanzador: una sola píldora al centro ---- */
.lyra-lanz { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transform: translateX(-50%); transition: transform .3s ease, opacity .3s ease, visibility 0s linear 0s; max-width: calc(100vw - 24px); }
.lyra-lanz.apartado { transform: translate(-50%, calc(100% + 30px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s; }
.lyra-abierta .lyra-lanz { visibility: hidden; opacity: 0; pointer-events: none; }
.lyra-pil { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(18,13,36,.94);
  box-shadow: 0 0 0 1px rgba(183,196,230,.24), 0 12px 30px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lyra-pil-l { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 12px; border-radius: 999px;
  color: var(--crema); font: 500 15px/1 var(--cuerpo); white-space: nowrap; transition: background-color .2s; }
.lyra-pil-l svg { width: 30px; height: 22px; flex: none; }
.lyra-pil-l:hover { background: rgba(110,80,208,.3); color: #fff; }
.lyra-pil-l:focus-visible, .lyra-pil .wsp-float:focus-visible { outline: 2px solid var(--ins-hi); outline-offset: 2px; }
.lyra-pil .wsp-float { position: static; width: 48px; height: 48px; flex: none; box-shadow: none; }
.lyra-pil .wsp-float svg { width: 26px; height: 26px; }

/* saludo emergente, sobre la píldora */
.lyra-hola { position: relative; width: min(290px, calc(100vw - 32px)); margin: 0; padding: .75rem 2.4rem .75rem .95rem; box-sizing: border-box; border-radius: 16px;
  background: rgba(18,13,36,.97); box-shadow: 0 0 0 1px rgba(183,196,230,.22), 0 14px 30px rgba(0,0,0,.5);
  font-size: .92rem; line-height: 1.45; color: var(--estelar); animation: lyra-entra .4s ease-out; }
.lyra-hola::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: rgba(18,13,36,.97);
  box-shadow: 1px 1px 0 rgba(183,196,230,.22); }
.lyra-hola[hidden] { display: none; }
.lyra-hola span { cursor: pointer; }
.lyra-hola-x { all: unset; position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; color: var(--halo); font-size: 20px; border-radius: 50%; }
.lyra-hola-x:focus-visible { outline: 2px solid var(--ins-hi); }
@keyframes lyra-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lyra-sube { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes lyra-velo { from { opacity: 0; } to { opacity: 1; } }

/* ---- velo y hoja ---- */
.lyra-velo { position: fixed; inset: 0; z-index: 46; background: rgba(4,3,10,.55); animation: lyra-velo .25s ease-out; }
.lyra-velo[hidden] { display: none; }
section.lyra { position: fixed; left: 50%; bottom: 0; z-index: 47; transform: translateX(-50%); width: min(860px, 100vw); height: clamp(400px, 56vh, 540px); max-height: calc(100vh - 64px);
  margin: 0; padding: 0; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; isolation: isolate;
  background: var(--mapa) center / 420px auto repeat, radial-gradient(120% 90% at 50% 0%, #1B1438, #0B0817 70%);
  box-shadow: 0 -1px 0 rgba(183,196,230,.25), 0 -20px 60px rgba(0,0,0,.6); animation: lyra-sube .32s cubic-bezier(.2,.8,.2,1);
  padding-bottom: env(safe-area-inset-bottom); color: var(--crema); }
section.lyra[hidden] { display: none; }
.lyra-asa { flex: none; width: 44px; height: 5px; border-radius: 3px; background: rgba(183,196,230,.35); margin: 9px auto 0; }
.lyra-cab { flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 8px 8px 22px; }
.lyra-cab img { width: 34px; height: 34px; }
.lyra-cab h2 { margin: 0; font: 400 17px/1.1 var(--titulo); letter-spacing: .08em; color: var(--crema); }
.lyra-sub { margin: .2rem 0 0; font-size: 12.5px; line-height: 1.3; color: var(--mudo, #A3ABCB); }
.lyra-cerrar { all: unset; margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; font-size: 26px; color: var(--halo); border-radius: 50%; }
.lyra-cerrar:hover { color: #fff; background: rgba(183,196,230,.08); }
.lyra-cerrar:focus-visible { outline: 2px solid var(--ins-hi); outline-offset: -2px; }

.lyra-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 280px; border-top: 1px solid var(--linea); }
.lyra-conv { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--linea); }
.lyra-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 22px 8px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; overscroll-behavior: contain; }
.lyra-g { max-width: 92%; color: var(--estelar); }
.lyra-g.ella { align-self: flex-start; padding-left: 14px; border-left: 2px solid rgba(183,196,230,.35); }
.lyra-g.yo { align-self: flex-end; max-width: 80%; padding: 6px 14px; border-radius: 18px; background: rgba(110,80,208,.32); box-shadow: inset 0 0 0 1px rgba(142,116,230,.6); color: var(--crema); }
.lyra-g b { color: var(--crema); font-weight: 600; }
.lyra-g a { color: var(--ambar-2); }
.lyra-g.wa { max-width: 100%; width: 100%; box-sizing: border-box; }
.lyra-res { white-space: pre-wrap; margin: .1rem 0 .55rem; font: 400 11.5px/1.45 var(--mono); padding: .45rem .55rem; border-radius: 6px; background: rgba(183,196,230,.07); color: var(--halo); }
.lyra-wa { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; border-radius: 999px; background: var(--wsp, #25D366); color: #062b14 !important; font: 600 15px/1 var(--cuerpo); text-decoration: none; }
.lyra-wa svg { width: 20px; height: 20px; }
.lyra-wa:focus-visible { outline: 2px solid var(--ins-hi); outline-offset: 3px; }
.lyra-g.wa small { display: block; margin-top: .4rem; font-size: 11.5px; color: var(--mudo, #A3ABCB); }
.lyra-g.acc { border-left-color: transparent; padding-top: 0; }
.lyra-ir { display: inline-flex; align-items: center; min-height: 40px; font: 400 .74rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ambar) !important; text-decoration: none; border-bottom: 1px dashed rgba(233,167,90,.5); }
.lyra-form { flex: none; display: flex; gap: 8px; padding: 10px 16px 6px 22px; }
.lyra-form input { flex: 1; min-width: 0; height: 46px; box-sizing: border-box; padding: 0 18px; border: 1px solid rgba(183,196,230,.25); border-radius: 999px; background: rgba(7,5,14,.65);
  color: var(--crema); font: 400 16px/1.2 var(--cuerpo); }
.lyra-form input:focus { outline: none; border-color: var(--ambar); }
.lyra-form button { all: unset; cursor: pointer; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ambar); color: #1B1006; }
.lyra-form button svg { width: 20px; height: 20px; }
.lyra-form button:focus-visible { outline: 2px solid var(--ins-hi); outline-offset: 2px; }
.lyra-pie { flex: none; margin: 0; padding: 0 22px 10px; font-size: 11.5px; line-height: 1.4; color: #8F98BA; }

/* atajos = constelación */
.lyra-const { position: relative; min-height: 0; overflow-y: auto; padding: 14px 18px; }
.lyra-const-t { position: relative; margin: 0 0 8px; font: 400 10.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mudo, #A3ABCB); }
.lyra-lin { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lyra-estrellas { position: relative; display: flex; flex-direction: column; gap: 12px; }
.lyra-estrellas:empty { display: none; }
.lyra-estrellas button { all: unset; box-sizing: border-box; cursor: pointer; position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 0 14px 0 6px; border-radius: 999px; background: rgba(7,5,14,.55); color: var(--estelar); font: 400 14px/1.2 var(--cuerpo); transition: background-color .2s, color .2s; }
.lyra-estrellas button:hover { color: #fff; background: rgba(110,80,208,.3); }
.lyra-estrellas button:focus-visible { outline: 2px solid var(--ins-hi); outline-offset: 2px; }
.lyra-estrellas .p { flex: none; width: 12px; height: 12px; margin-left: 4px; border-radius: 50%; background: #E4EAF6; box-shadow: 0 0 0 3px rgba(228,234,246,.15), 0 0 10px 2px rgba(228,234,246,.6); }
.lyra-estrellas button:nth-child(5n+2) { margin-left: 46px; } .lyra-estrellas button:nth-child(5n+3) { margin-left: 14px; }
.lyra-estrellas button:nth-child(5n+4) { margin-left: 60px; } .lyra-estrellas button:nth-child(5n+5) { margin-left: 26px; }
.lyra-estrellas button.wa { background: var(--wsp, #25D366); color: #062b14; font-weight: 600; }
.lyra-estrellas button.wa .p { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3), 0 0 12px 3px rgba(37,211,102,.9); }

/* ---- móvil ---- */
@media (max-width: 640px) {
  .lyra-pil-l { font-size: 14px; padding: 0 14px 0 10px; }
  section.lyra { width: 100%; height: min(76vh, 640px); height: min(76dvh, 640px); max-height: calc(100dvh - 40px); border-radius: 20px 20px 0 0; }
  .lyra-cab { padding-left: 16px; }
  .lyra-cuerpo { display: flex; flex-direction: column; }
  .lyra-conv { display: contents; }
  .lyra-log { order: 1; padding: 12px 16px 6px; font-size: 14.5px; }
  .lyra-const { order: 2; flex: none; overflow: visible; padding: 6px 16px 4px; }
  .lyra-const-t { display: none; }
  .lyra-estrellas { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
  .lyra-estrellas button { margin-left: 0 !important; min-height: 40px; font-size: 13px; }
  .lyra-estrellas button:nth-child(even) { margin-top: 10px; }
  .lyra-form { order: 3; padding: 8px 12px 6px 16px; }
  .lyra-pie { order: 4; padding: 0 16px 8px; font-size: 11px; }
  .lyra-abierta, .lyra-abierta body { overflow: hidden; }
}
@media (max-height: 520px) { section.lyra { height: calc(100vh - 24px); } }
@media (prefers-reduced-motion: reduce) {
  .lyra-lanz, .lyra-lanz.apartado, section.lyra, .lyra-velo, .lyra-hola, .lyra-pil-l, .lyra-estrellas button { transition: none; animation: none; }
}

/* 13-oct · lanzador abajo a la DERECHA (pedido de Claudio), alineado a la derecha; saludo encima y apuntando a la píldora */
.lyra-lanz { left: auto; right: calc(16px + env(safe-area-inset-right)); transform: none; align-items: flex-end; }
.lyra-lanz.apartado { transform: translateY(calc(100% + 30px)); }
.lyra-hola::after { left: auto; right: 34px; margin-left: 0; }