/* EL CHAT DE ALMA — pieza suelta (exportado de la web de Atis Care, 2026-10-17)
   Todo cuelga de .pieza-alma: no toca nada de la página que lo acoja.
   Sacado de las reglas que el navegador aplica de verdad al chat en
   atiscare.atisstudio.org (no a mano), y luego encerrado en .pieza-alma.
   Las animaciones llevan el prefijo «alma-» para no chocar con las tuyas. */

@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/CourierPrime-400.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/CourierPrime-700.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Epilogue; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/Epilogue-variable.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Epilogue; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/Epilogue-variable.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Epilogue; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/Epilogue-variable.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Epilogue; font-style: normal; font-weight: 900; font-display: swap; src: url("fuentes/Epilogue-variable.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* La caja. Lo que en la web heredaba de la página (letra, color, colores
   de la marca) va aquí. La ALTURA la pone quien lo acoja: el chat llena
   el alto de .pieza-alma (ver LEEME.md, medidas). */
.pieza-alma {
  --radio: 20px;
  --radio-chico: 13px;
  --neon: #00FF55;
  --hueso: #EDEDED;
  --tinta: #0E1116;
  --tinta-suave: #5B6470;
  --linea: rgba(255,255,255,.09);
  --linea-clara: rgba(0,0,0,.09);
  --humo: #9EA2A8;
  --verde: #00873A;
  --ambar: #B85C00;
  --obsidian: #050505;
  font-family: Epilogue, Helvetica, Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.760;
  letter-spacing: 0.12px;
  color: rgb(237, 237, 237);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}
.pieza-alma .lanza-app { height: 100%; }

.pieza-alma, .pieza-alma * { box-sizing: border-box; margin: 0px; padding: 0px; }

.pieza-alma .cristal { position: relative; border-radius: var(--radio); background: linear-gradient(152deg, rgba(255, 255, 255, 0.114) 0%, rgba(255, 255, 255, 0.04) 44%, rgba(255, 255, 255, 0.067) 100%); backdrop-filter: blur(26px) saturate(175%); -webkit-backdrop-filter: blur(26px) saturate(175%); border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: rgba(0, 0, 0, 0.9) 0px 22px 55px -20px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset, rgba(255, 255, 255, 0.16) 0px -18px 40px -26px inset; overflow: hidden; isolation: isolate; }

.pieza-alma .cristal::before { content: ""; position: absolute; top: 0px; left: 14%; right: 14%; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); pointer-events: none; }

.pieza-alma .cristal::after { content: ""; position: absolute; inset: -40% -10%; z-index: 1; pointer-events: none; background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.13) 47%, transparent 60%); transform: translateX(-120%); transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); }

.pieza-alma .cristal:hover::after { transform: translateX(120%); }

.pieza-alma .cristal > * { position: relative; z-index: 3; }

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .pieza-alma .cristal { background: rgba(20, 20, 20, 0.92); }
}

.pieza-alma .burbuja b { color: var(--neon); font-weight: 700; }

.pieza-alma .lanza-app { position: relative; display: flex; }

.pieza-alma .lanza-app > .chat { width: 100%; }

.pieza-alma .icono-app { position: absolute; left: 50%; top: 50%; z-index: 4; width: 86px; height: 86px; margin: -43px 0px 0px -43px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 22px; background: linear-gradient(160deg, rgb(18, 50, 31), rgb(7, 17, 9)); border: 1px solid rgba(0, 255, 85, 0.3); box-shadow: rgba(0, 0, 0, 0.9) 0px 18px 40px -14px, rgba(255, 255, 255, 0.18) 0px 1px 0px inset, rgba(0, 255, 85, 0.22) 0px 0px 30px; transition: transform 0.34s cubic-bezier(0.4, 0, 0.9, 0.4), opacity 0.3s 0.04s; }

.pieza-alma .icono-app img { width: 34px; height: auto; filter: drop-shadow(rgba(0, 0, 0, 0.7) 0px 2px 5px); }

.pieza-alma .icono-app span { font-family: Epilogue, Helvetica, Arial, sans-serif; font-weight: 900; font-size: 8.5px; letter-spacing: 0.3px; color: var(--hueso); text-transform: uppercase; }

.pieza-alma .chat.cerrada { transform: scale(0.14); opacity: 0; border-radius: 64px; pointer-events: none; }

.pieza-alma .chat.abriendo { transform: none; opacity: 1; border-radius: var(--radio); transition: transform 0.62s cubic-bezier(0.2, 0.9, 0.28, 1), opacity 0.3s, border-radius 0.5s 0.06s; }

.pieza-alma .lanza-app.abierta .icono-app { transform: scale(5.5); opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .pieza-alma .chat.cerrada { transform: none; opacity: 1; border-radius: var(--radio); }
}

@media (prefers-reduced-motion: reduce) {
  .pieza-alma .icono-app { display: none; }
}

.pieza-alma .chat .contador { margin-left: auto; font-family: "Courier Prime", monospace; font-size: 11px; letter-spacing: 1.4px; color: var(--tinta-suave); flex: 0 0 auto; }

.pieza-alma .hilo-alma { position: relative; flex: 1 1 0%; min-height: 0px; overflow: hidden auto; padding: 14px 15px 18px; scrollbar-width: none; }

.pieza-alma .hilo-alma::-webkit-scrollbar { display: none; }

.pieza-alma .hilo-alma.al-fondo { overflow-y: hidden; }

.pieza-alma .hilo-alma .escena { display: flex; flex-direction: column; gap: 8px; }

.pieza-alma .hilo-alma .escena + .escena { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--linea-clara); }

.pieza-alma .hilo-alma .burbuja { max-width: min(86%, 520px); }

.pieza-alma .hilo-alma .escena > * { flex: 0 0 auto; }

.pieza-alma .hilo-alma .burbuja.foto { max-width: min(70%, 250px); }

.pieza-alma .hilo-alma .burbuja.foto img { height: auto; max-height: none; object-fit: initial; }

.pieza-alma .hilo-alma .burbuja.foto .pie-foto { font-size: 13px; }

.pieza-alma .hilo-alma .ficha-alma,
.pieza-alma .hilo-alma .botones-rpe { opacity: 0; transform: translateY(12px); transition: opacity 0.5s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }

.pieza-alma .hilo-alma .visible { opacity: 1; transform: none; }

.pieza-alma .hilo-alma .botones-rpe { margin-top: 0px; }

.pieza-alma .aviso-deslizar { position: absolute; left: 50%; bottom: 74px; z-index: 3; transform: translateX(-50%); display: none; align-items: center; gap: 9px; pointer-events: none; padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-family: "Courier Prime", monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: rgb(255, 255, 255); background: rgba(8, 22, 14, 0.78); border: 1px solid rgba(0, 255, 85, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: rgba(0, 0, 0, 0.6) 0px 10px 26px -12px; transition: opacity 0.5s, transform 0.5s; }

.pieza-alma .aviso-deslizar .rueda { width: 12px; height: 18px; border: 1.5px solid var(--neon); border-radius: 7px; position: relative; }

.pieza-alma .aviso-deslizar .rueda::after { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 4px; margin-left: -1px; border-radius: 1px; background: var(--neon); animation: 1.6s ease-in-out 0s infinite normal none running alma-rueda; }

.pieza-alma .chat.abriendo .aviso-deslizar { display: flex; }

@media (pointer: coarse) {
  .pieza-alma .aviso-deslizar .rueda { display: none; }
}

@media (pointer: coarse) {
  .pieza-alma .aviso-deslizar::before { content: "↕"; font-size: 14px; color: var(--neon); line-height: 1; }
}

.pieza-alma .chat.invita::after,
.pieza-alma .chat.cristal.claro.invita::after { content: ""; position: absolute; inset: 0px; border-radius: inherit; pointer-events: none; z-index: 4; background: none; transform: none; transition: none; animation: 2.2s ease-in-out 0s infinite normal none running alma-invita; }

.pieza-alma .aviso-deslizar.fuera { opacity: 0; transform: translate(-50%, 8px); }

@media (max-width: 1000px) {
  .pieza-alma .hilo-alma .burbuja { max-width: 94%; }
}

@media (max-width: 1000px) {
  .pieza-alma .hilo-alma .burbuja .hora { display: none; }
}

@media (max-width: 1000px) {
  .pieza-alma .hilo-alma .burbuja.foto { max-width: min(74%, 230px); }
}

.pieza-alma .chat { padding: 0px; display: flex; flex-direction: column; min-height: 100%; }

.pieza-alma .chat .barra { display: flex; align-items: center; gap: 10px; padding: 11px 15px; height: auto; border-bottom: 1px solid var(--linea); background: rgba(255, 255, 255, 0.05); flex: 0 0 auto; }

.pieza-alma .chat .avatar { width: 30px; height: 30px; border-radius: 9px; overflow: hidden; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; }

.pieza-alma .chat .avatar img { width: 88%; height: auto; }

.pieza-alma .chat .quien { font-size: 13.5px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; }

.pieza-alma .chat .quien i { display: block; font-style: normal; font-size: 10.5px; color: var(--neon); font-family: "Courier Prime", monospace; letter-spacing: 1px; font-weight: 400; }

.pieza-alma .burbuja { max-width: 90%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; opacity: 0; transform: translateY(12px); transition: opacity 0.5s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }

.pieza-alma .burbuja.visible { opacity: 1; transform: none; }

.pieza-alma .burbuja.yo { align-self: flex-end; background: linear-gradient(160deg, rgba(0, 255, 85, 0.2), rgba(0, 255, 85, 0.09)); border: 1px solid rgba(0, 255, 85, 0.3); border-bottom-right-radius: 5px; }

.pieza-alma .burbuja.bot { align-self: flex-start; background: rgba(255, 255, 255, 0.067); border: 1px solid rgba(255, 255, 255, 0.13); border-bottom-left-radius: 5px; }

.pieza-alma .escribiendo { display: flex; gap: 5px; align-self: flex-start; padding: 14px 16px; border-radius: 15px; background: rgba(255, 255, 255, 0.067); border: 1px solid rgba(255, 255, 255, 0.13); }

.pieza-alma .escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--humo); animation: 1.2s ease 0s infinite normal none running alma-puntear; }

.pieza-alma .escribiendo i:nth-child(2) { animation-delay: 0.18s; }

.pieza-alma .escribiendo i:nth-child(3) { animation-delay: 0.36s; }

.pieza-alma .burbuja .hora { display: block; text-align: right; margin-top: 5px; font-family: "Courier Prime", monospace; font-size: 9.5px; color: var(--humo); letter-spacing: 0.5px; opacity: 0.75; }

.pieza-alma .burbuja.yo .hora { color: rgba(0, 255, 85, 0.65); }

.pieza-alma .burbuja.foto { padding: 4px; overflow: hidden; max-width: min(58%, 168px); }

.pieza-alma .burbuja.foto picture { display: contents; }

.pieza-alma .burbuja.foto img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: cover; border-radius: 10px; }

.pieza-alma .burbuja.foto .pie-foto { display: block; padding: 8px 10px 4px; font-size: 13.5px; }

.pieza-alma .escribir { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 9px 13px; border-top: 1px solid var(--linea); background: rgba(255, 255, 255, 0.04); }

.pieza-alma .escribir .campo { flex: 1 1 0%; padding: 9px 15px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linea); font-size: 13.5px; color: rgb(110, 114, 122); }

.pieza-alma .escribir .icono { font-size: 16px; opacity: 0.55; flex: 0 0 auto; }

.pieza-alma .cristal.claro { background: linear-gradient(155deg, rgba(255, 255, 255, 0.84), rgba(240, 244, 248, 0.72)); backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%); border-color: rgba(255, 255, 255, 0.5); box-shadow: rgba(0, 0, 0, 0.9) 0px 28px 64px -22px, rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(255, 255, 255, 0.6) 0px -20px 44px -30px inset; color: var(--tinta); }

.pieza-alma .cristal.claro::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent); }

.pieza-alma .cristal.claro::after { background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.55) 47%, transparent 60%); }

.pieza-alma .claro .barra { background: rgba(0, 0, 0, 0.035); border-bottom-color: var(--linea-clara); }

.pieza-alma .claro .quien { color: var(--tinta); }

.pieza-alma .claro .quien i { color: var(--verde); }

.pieza-alma .claro .avatar { background: rgba(0, 0, 0, 0.06); }

.pieza-alma .claro .escribir { background: rgba(0, 0, 0, 0.035); border-top-color: var(--linea-clara); }

.pieza-alma .claro .escribir .campo { background: rgba(0, 0, 0, 0.05); border-color: var(--linea-clara); color: rgb(152, 160, 170); }

.pieza-alma .claro .escribir .icono { opacity: 0.4; }

.pieza-alma .claro .burbuja.bot,
.pieza-alma .claro .escribiendo { background: linear-gradient(160deg, rgba(203, 246, 219, 0.92), rgba(176, 237, 197, 0.8)); border-color: rgba(0, 135, 58, 0.3); color: rgb(6, 48, 26); }

.pieza-alma .claro .burbuja.yo { background: linear-gradient(160deg, rgba(44, 50, 58, 0.95), rgba(28, 33, 39, 0.92)); border-color: rgba(255, 255, 255, 0.16); color: rgb(237, 239, 242); }

.pieza-alma .claro .burbuja .hora { color: rgba(6, 48, 26, 0.5); }

.pieza-alma .claro .burbuja.yo .hora { color: rgba(237, 239, 242, 0.45); }

.pieza-alma .claro .escribiendo i { background: rgba(6, 48, 26, 0.45); }

.pieza-alma .claro b { color: var(--verde); }

.pieza-alma .claro .burbuja.bot b { color: rgb(4, 82, 31); }

@media (max-width: 1000px) {
  .pieza-alma .contador { font-size: 11.5px !important; }
}

@media (max-width: 1000px) {
  .pieza-alma .burbuja .hora,
  .pieza-alma .quien i { font-size: 11px !important; }
}

@media (max-width: 1000px) {
  .pieza-alma .icono-app span { font-size: 9.5px !important; }
}

/* En móvil la web quita el desenfoque del cristal (va lento en los
   teléfonos): aquí solo dentro del chat. */
@media (max-width: 1000px) {
  .pieza-alma, .pieza-alma * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

@media (max-width: 1000px) {
  .pieza-alma .cristal.claro { background: linear-gradient(155deg, rgba(255, 255, 255, 0.957), rgba(240, 244, 248, 0.925)); }
}

@media (prefers-reduced-motion: reduce) {
  .pieza-alma, .pieza-alma *,
  .pieza-alma::before, .pieza-alma ::before,
  .pieza-alma::after, .pieza-alma ::after { animation: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pieza-alma .burbuja { opacity: 1 !important; transform: none !important; }
}

.pieza-alma .ficha-alma { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 11px 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.043); border: 1px solid var(--linea-clara); }

.pieza-alma .ficha-alma picture { display: contents; }

.pieza-alma .ficha-alma img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; object-position: 50% 28%; box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 10px; }

.pieza-alma .ficha-alma div { display: flex; flex-direction: column; gap: 2px; min-width: 0px; }

.pieza-alma .ficha-alma b { font-family: Epilogue, sans-serif; font-weight: 900; font-size: 16px; letter-spacing: -0.4px; color: var(--tinta); }

.pieza-alma .ficha-alma span { font-size: 12.5px; color: var(--tinta-suave); line-height: 1.45; }

.pieza-alma .botones-rpe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.pieza-alma .botones-rpe span { font-family: Epilogue, sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: -0.1px; padding: 12px 18px; border-radius: var(--radio-chico); background: linear-gradient(160deg, rgba(0, 200, 90, 0.2), rgba(0, 135, 58, 0.08)); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(0, 135, 58, 0.34); color: var(--verde); box-shadow: rgba(255, 255, 255, 0.55) 0px 1px 0px inset, rgba(0, 135, 58, 0.55) 0px 6px 16px -12px; }

.pieza-alma .ficha-tg .tg-l { display: block; }

.pieza-alma .ficha-tg .tg-s { display: block; font-style: italic; font-weight: 400; font-size: 0.86em; opacity: 0.78; padding-left: 1.1em; }

.pieza-alma .ficha-tg .tg-hueco { margin-top: 0.7em; }

.pieza-alma .ficha-tg .tg-l.tg-s { padding-left: 0px; }

.pieza-alma .botones-rpe.botones-tg { margin-top: 0px; max-width: min(86%, 520px); }

.pieza-alma .botones-rpe.botones-tg span { flex: 1 1 0px; text-align: center; }

.pieza-alma .botones-rpe.botones-tg span:first-child { flex-basis: 100%; }

.pieza-alma .botones-rpe[data-pulsable] span { cursor: pointer; transition: transform 0.15s, filter 0.2s, opacity 0.3s; }

.pieza-alma .botones-rpe[data-pulsable]:not(.cerrado) span:hover { filter: brightness(1.08); transform: translateY(-1px); }

.pieza-alma .botones-rpe[data-pulsable]:not(.cerrado) span:active { transform: scale(0.97); }

.pieza-alma .botones-rpe.cerrado span { cursor: default; }

.pieza-alma .botones-rpe.cerrado span:not(.elegido) { opacity: 0.35; }

.pieza-alma .botones-rpe span.elegido { background: linear-gradient(180deg,#19C061,var(--verde)); color: rgb(255, 255, 255); border-color: rgba(0, 0, 0, 0.1); box-shadow: rgba(255, 255, 255, 0.45) 0px 1px 0px inset, rgba(0, 135, 58, 0.65) 0px 8px 18px -10px; }

@keyframes alma-rueda {
  0% { transform: translateY(0px); opacity: 1; }
  70% { transform: translateY(6px); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes alma-invita {
  0%, 100% { box-shadow: rgba(0, 255, 85, 0.25) 0px 0px 0px 1.5px inset, rgba(0, 255, 85, 0) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(0, 255, 85, 0.95) 0px 0px 0px 2px inset, rgba(0, 255, 85, 0.35) 0px 0px 26px 2px; }
}

@keyframes alma-puntear {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0px); }
  30% { opacity: 1; transform: translateY(-3px); }
}