/* ════════════════════════════════════════════════════════════════════════
   BIENVENIDA DE FLORE × CLAUDE (flore-bienvenida.js)
   La F de FLORE (azul a turquesa) entra por la izquierda y la chispa de
   Claude (terracota) por la derecha; se encuentran, se enciende el anillo,
   el nombre sube letra a letra y aparece la tarjeta para empezar.
   ════════════════════════════════════════════════════════════════════════ */
.fb-capa {
    --fb-azul: #2563eb; --fb-turquesa: #0d9488; --fb-claude: #d97757; --fb-noche: #0b1220;
    position: fixed; inset: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: radial-gradient(120% 90% at 50% 10%, #13213d 0%, var(--fb-noche) 60%, #05080f 100%);
    color: #e2e8f0; font-family: 'Segoe UI', system-ui, sans-serif;
    opacity: 0; transition: opacity .35s ease; overflow: hidden;
}
.fb-capa.fb-visible { opacity: 1; }
.fb-capa.fb-saliendo { opacity: 0; transform: scale(1.03); transition: opacity .4s ease, transform .4s ease; }

/* ── Fondo: auroras y chispas ── */
.fb-fondo { position: absolute; inset: 0; pointer-events: none; }
.fb-orbe { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: fbOrbe 14s ease-in-out infinite alternate; }
.fb-orbe--1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -10vmax; background: var(--fb-azul); }
.fb-orbe--2 { width: 40vmax; height: 40vmax; right: -14vmax; bottom: -12vmax; background: var(--fb-turquesa); animation-delay: -5s; }
.fb-orbe--3 { width: 26vmax; height: 26vmax; right: 8vmax; top: 4vmax; background: var(--fb-claude); opacity: .35; animation-delay: -9s; }
@keyframes fbOrbe { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vmax, 4vmax) scale(1.15); } }
.fb-chispa {
    position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
    width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, .6);
    animation: fbTitila 3.2s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes fbTitila { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } }

/* ── Centro ── */
.fb-centro { position: relative; width: min(680px, 100%); text-align: center; }
.fb-logos { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 18px; height: 130px; margin-bottom: 6px; }
.fb-anillo {
    position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--fb-azul), var(--fb-turquesa), var(--fb-claude), var(--fb-azul));
    -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%);
    opacity: 0; transform: scale(.4);
    animation: fbAnillo .9s cubic-bezier(.2, .9, .3, 1.3) 1.05s forwards, fbGira 6s linear 1.05s infinite;
    filter: drop-shadow(0 0 18px rgba(13, 148, 136, .55));
}
@keyframes fbAnillo { to { opacity: 1; transform: scale(1); } }
@keyframes fbGira { to { rotate: 360deg; } }
.fb-f {
    position: relative; font-size: 84px;
    background: linear-gradient(135deg, #60a5fa 0%, #2dd4bf 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 22px rgba(45, 212, 191, .45));
    opacity: 0; transform: translateX(-120px) rotate(-25deg);
    animation: fbEntraIzq .8s cubic-bezier(.2, .9, .3, 1.2) .25s forwards;
}
.fb-claude {
    position: relative; font-size: 72px; line-height: 1; color: var(--fb-claude);
    text-shadow: 0 0 24px rgba(217, 119, 87, .7);
    opacity: 0; transform: translateX(120px) rotate(180deg) scale(.5);
    animation: fbEntraDer .8s cubic-bezier(.2, .9, .3, 1.2) .45s forwards, fbLate 2.4s ease-in-out 1.6s infinite;
}
.fb-por { position: relative; font-size: 34px; color: #94a3b8; opacity: 0; transform: scale(0); animation: fbPop .45s cubic-bezier(.2, .9, .3, 1.6) .95s forwards; }
@keyframes fbEntraIzq { to { opacity: 1; transform: none; } }
@keyframes fbEntraDer { to { opacity: 1; transform: none; } }
@keyframes fbPop { to { opacity: 1; transform: scale(1); } }
@keyframes fbLate { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(45deg) scale(1.12); } }

.fb-titulo { margin: 8px 0 4px; font-size: clamp(34px, 7vw, 58px); font-weight: 800; letter-spacing: .02em; line-height: 1.05; }
.fb-letra {
    display: inline-block; opacity: 0; transform: translateY(28px);
    background: linear-gradient(135deg, #93c5fd, #5eead4); -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: fbSube .55s cubic-bezier(.2, .9, .3, 1.2) forwards; animation-delay: calc(1.25s + var(--i) * .055s);
}
.fb-titulo .fb-letra:nth-last-child(-n+6) { background: linear-gradient(135deg, #fdba74, var(--fb-claude)); -webkit-background-clip: text; background-clip: text; }
.fb-x { background: none !important; color: #94a3b8; -webkit-text-fill-color: #94a3b8; font-weight: 400; }
@keyframes fbSube { to { opacity: 1; transform: none; } }
.fb-sub { margin: 0 0 22px; color: #94a3b8; font-size: 15px; opacity: 0; animation: fbAparece .6s ease 2s forwards; }
@keyframes fbAparece { to { opacity: 1; } }

/* ── Tarjeta ── */
.fb-tarjeta {
    text-align: left; padding: 20px 22px 14px; border-radius: 20px;
    background: rgba(15, 23, 42, .62); border: 1px solid rgba(148, 163, 184, .22);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(30px); animation: fbSubeTarjeta .7s cubic-bezier(.2, .9, .3, 1) 2.25s forwards;
}
@keyframes fbSubeTarjeta { to { opacity: 1; transform: none; } }
.fb-pregunta { margin: 0 0 12px; font-size: 17px; color: #cbd5e1; }
.fb-pregunta b { color: #fff; }
.fb-entrada {
    display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; border-radius: 14px;
    background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0); transition: box-shadow .2s;
}
.fb-entrada:focus-within { box-shadow: 0 0 0 3px rgba(45, 212, 191, .45); }
.fb-entrada input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 16px; color: #0f172a; padding: 8px 0; font-family: inherit; }
.fb-entrada button { width: 42px; height: 42px; border: none; border-radius: 11px; cursor: pointer; font-size: 16px; display: grid; place-items: center; flex: none; }
.fb-mic { background: #eef2f7; color: #334155; }
.fb-mic:hover { background: #e2e8f0; }
.fb-mic.fb-escuchando { background: #fee2e2; color: #dc2626; animation: fbEscucha 1s ease-in-out infinite; }
@keyframes fbEscucha { 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, .18); } }
.fb-enviar { background: linear-gradient(135deg, var(--fb-azul), var(--fb-turquesa)); color: #fff; }
.fb-enviar:hover { filter: brightness(1.1); }

.fb-recientes { margin-top: 16px; }
.fb-recientes-tit { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; margin-bottom: 8px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 13px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(148, 163, 184, .3); background: rgba(255, 255, 255, .06); color: #e2e8f0; font-size: 13.5px; font-family: inherit;
    opacity: 0; transform: translateY(10px); animation: fbSube .45s ease forwards; animation-delay: calc(2.6s + var(--k) * .07s);
    transition: background .15s, border-color .15s;
}
.fb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-chip i { color: #5eead4; }
.fb-chip:hover { background: rgba(45, 212, 191, .16); border-color: rgba(45, 212, 191, .6); }

.fb-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.fb-pie button { border: none; background: none; color: #94a3b8; font-size: 13px; cursor: pointer; padding: 4px 2px; font-family: inherit; }
.fb-pie button:hover { color: #e2e8f0; }
.fb-pie kbd { font-family: inherit; font-size: 11px; border: 1px solid rgba(148, 163, 184, .4); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* Sin animaciones si el sistema lo pide */
.fb-quieta *, .fb-quieta { animation: none !important; transition: none !important; }
.fb-quieta .fb-f, .fb-quieta .fb-claude, .fb-quieta .fb-por, .fb-quieta .fb-anillo, .fb-quieta .fb-letra,
.fb-quieta .fb-sub, .fb-quieta .fb-tarjeta, .fb-quieta .fb-chip { opacity: 1; transform: none; }

@media (max-width: 560px) {
    .fb-logos { height: 100px; gap: 12px; }
    .fb-f { font-size: 64px; } .fb-claude { font-size: 54px; }
    .fb-anillo { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
    .fb-tarjeta { padding: 16px 14px 10px; }
}