/* ===================================================================
   ClinPlus Site Público — design system moderno (ProDoctor + GestãoDS).
   Variáveis CSS injetadas pelo shell-site.php a partir de site_config.
   =================================================================== */

* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #1f2738; background: #fff; }

a { text-decoration: none; }

/* =================== Topbar =================== */
.site-topbar {
    background: var(--site-secondary);
    color: #fff; padding: 8px 0; font-size: .82rem;
}
.site-topbar a { color: rgba(255,255,255,.85); }
.site-topbar a:hover { color: #fff; }

/* =================== Navbar =================== */
.site-navbar { background: #fff !important; padding: 14px 0; box-shadow: 0 1px 0 #eef0f6; }
.site-brand { font-weight: 800; font-size: 1.5rem; color: var(--site-primary) !important; }
.site-brand i { font-size: 1.6rem; }
.site-navbar .nav-link { color: #1f2738 !important; font-weight: 500; padding: 8px 14px !important; border-radius: 8px; }
.site-navbar .nav-link:hover { color: var(--site-primary) !important; background: #f4f6fa; }
.site-navbar .btn-primary { background: var(--site-primary); border-color: var(--site-primary); padding: 8px 22px; border-radius: 24px; font-weight: 600; }
.site-navbar .btn-primary:hover { background: var(--site-secondary); border-color: var(--site-secondary); }
.site-navbar .btn-outline-primary { color: var(--site-primary); border-color: var(--site-primary); padding: 8px 22px; border-radius: 24px; font-weight: 600; }
.site-navbar .btn-outline-primary:hover { background: var(--site-primary); color: #fff; }

/* Mega menu */
.site-mega { padding: 6px !important; border: 0 !important; border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.12); margin-top: 8px !important; }
.site-mega__grupo {
    display: flex; gap: 12px; align-items: center; padding: 14px;
    border-radius: 10px; color: #1f2738; border-left: 4px solid transparent;
    transition: all .12s;
}
.site-mega__grupo:hover { background: #f4f6fa; color: var(--site-primary); }
.site-mega__grupo i { font-size: 1.8rem; }
.site-mega__grupo strong { display: block; }

/* =================== Hero =================== */
.site-hero {
    background: linear-gradient(135deg, #ecf2ff 0%, #f0f6ff 100%);
    padding: 60px 0 80px;
    position: relative;
    overflow: hidden;
}
.site-hero::before {
    content: ''; position: absolute; top: -100px; right: -200px; width: 600px; height: 600px;
    border-radius: 50%; background: radial-gradient(circle, rgba(60,85,180,.06), transparent 70%); z-index: 0;
}
.site-hero .container { position: relative; z-index: 1; }
.site-hero__badge {
    display: inline-block; background: rgba(34,197,94,.15); color: #15803d;
    padding: 6px 14px; border-radius: 20px; font-size: .82rem; font-weight: 600; margin-bottom: 16px;
}
.site-hero__titulo {
    font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
    color: #0f172a;
}
.site-hero__titulo span { color: var(--site-primary); }
.site-hero__subtitulo { font-size: 1.1rem; color: #475569; line-height: 1.6; margin: 18px 0 30px; max-width: 540px; }
.site-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.site-hero__ctas .btn { padding: 14px 32px; border-radius: 30px; font-weight: 600; font-size: 1rem; }
.site-hero__mock {
    background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(60,85,180,.18);
    overflow: hidden; padding: 14px;
}
.site-hero__mock-placeholder {
    background: linear-gradient(135deg, #e8eefe, #d8e6ff);
    border-radius: 8px; min-height: 380px;
    display: flex; align-items: center; justify-content: center;
    color: var(--site-primary);
}
.site-hero__mock-placeholder i { font-size: 6rem; opacity: .35; }

/* =================== Sections =================== */
.site-section { padding: 80px 0; }
.site-section--alt { background: #f7f9fc; }
.site-section__title {
    text-align: center; margin-bottom: 12px;
    font-size: 2rem; font-weight: 800; color: #0f172a;
}
.site-section__title .square { display: inline-block; width: 18px; height: 18px;
    background: var(--site-accent); border-radius: 3px; margin-right: 12px; vertical-align: middle; }
.site-section__sub { text-align: center; color: #64748b; margin-bottom: 40px; }

/* =================== Recursos (cards) =================== */
.site-recurso-card {
    background: #fff; border: 1px solid #eef0f6; border-radius: 12px; padding: 20px;
    height: 100%; transition: all .18s; text-decoration: none; color: inherit; display: block;
}
.site-recurso-card:hover {
    transform: translateY(-3px); border-color: var(--site-primary);
    box-shadow: 0 12px 30px rgba(60,85,180,.12); color: inherit;
}
.site-recurso-card__icone {
    width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; margin-bottom: 14px; font-size: 1.6rem; color: #fff;
}
.site-recurso-card__nome { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.site-recurso-card__resumo { font-size: .88rem; color: #64748b; line-height: 1.5; }
.site-recurso-card__link { color: var(--site-primary); font-size: .85rem; margin-top: 12px;
    display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }

/* =================== Números =================== */
.site-numeros {
    background: linear-gradient(135deg, var(--site-primary), var(--site-secondary));
    color: #fff; border-radius: 18px; padding: 50px 30px;
}
.site-numero { text-align: center; }
.site-numero i { font-size: 2.6rem; opacity: .85; margin-bottom: 12px; display: block; }
.site-numero__valor { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.site-numero__rotulo { opacity: .85; margin-top: 6px; }

/* =================== Planos =================== */
.site-plano {
    background: #fff; border: 2px solid #eef0f6; border-radius: 18px; padding: 32px 26px;
    height: 100%; display: flex; flex-direction: column; transition: all .18s;
}
.site-plano:hover { border-color: var(--site-primary); }
.site-plano--destaque {
    border-color: var(--site-primary);
    box-shadow: 0 20px 50px rgba(60,85,180,.18);
    transform: scale(1.04);
}
.site-plano__badge {
    background: var(--site-accent); color: #fff;
    padding: 4px 14px; border-radius: 12px; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; align-self: flex-start; margin-bottom: 12px;
}
.site-plano__nome { font-size: 1.4rem; font-weight: 700; }
.site-plano__slogan { color: #64748b; font-size: .9rem; margin-bottom: 18px; }
.site-plano__preco { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.site-plano__preco small { font-size: 1rem; font-weight: 400; color: #94a3b8; }
.site-plano__features { list-style: none; padding: 0; margin: 24px 0; flex-grow: 1; }
.site-plano__features li {
    padding: 6px 0; color: #475569;
    display: flex; align-items: start; gap: 8px;
}
.site-plano__features i { color: var(--site-accent); margin-top: 4px; }
.site-plano__cta {
    background: var(--site-primary); color: #fff; border: 0; padding: 12px;
    border-radius: 24px; font-weight: 600; width: 100%;
}
.site-plano__cta:hover { background: var(--site-secondary); color: #fff; }
.site-plano--destaque .site-plano__cta { background: var(--site-accent); }

/* =================== Depoimentos =================== */
.site-dep {
    background: #fff; border: 1px solid #eef0f6; border-radius: 14px; padding: 26px;
    height: 100%;
}
.site-dep__texto { font-style: italic; color: #334155; line-height: 1.6; }
.site-dep__autor { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.site-dep__avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--site-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* =================== Suporte / CTA =================== */
.site-suporte {
    background: linear-gradient(135deg, var(--site-secondary), var(--site-primary));
    color: #fff; border-radius: 18px; padding: 50px 30px; text-align: center;
}
.site-suporte h3 { font-weight: 800; }
.site-suporte .btn { padding: 12px 30px; border-radius: 24px; font-weight: 600; }

/* =================== Footer =================== */
.site-footer { background: #0f172a; color: #fff; padding: 60px 0 24px; margin-top: 80px; }
.site-footer__brand { font-size: 1.4rem; font-weight: 800; }
.site-footer h6 { font-weight: 600; margin-bottom: 14px; }
.site-footer a { transition: color .12s; }
.site-footer a:hover { color: #fff !important; }
.site-footer hr { opacity: .15; }

/* =================== Página interna de funcionalidade =================== */
.site-recurso-hero {
    background: linear-gradient(135deg, #ecf2ff, #f0f6ff);
    padding: 60px 0;
}
.site-recurso-hero h1 { font-size: 2.4rem; font-weight: 800; color: #0f172a; }
.site-recurso-bullets { list-style: none; padding: 0; }
.site-recurso-bullets li {
    padding: 10px 0; display: flex; gap: 12px; align-items: start;
    border-bottom: 1px solid #eef0f6;
}
.site-recurso-bullets li:last-child { border: 0; }
.site-recurso-bullets i { color: var(--site-accent); font-size: 1.3rem; flex-shrink: 0; }

/* =================== Login com detecção tenant =================== */
.site-login-wrap {
    min-height: calc(100vh - 200px);
    display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.site-login-card {
    background: #fff; border-radius: 18px; padding: 40px;
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
    width: 100%; max-width: 440px;
}
.site-login-card h2 { font-weight: 800; color: #0f172a; }
.site-tenant-pick {
    border: 1px solid #eef0f6; border-radius: 10px; padding: 14px;
    cursor: pointer; transition: all .12s; text-decoration: none; color: inherit; display: flex; gap: 10px;
}
.site-tenant-pick:hover { border-color: var(--site-primary); background: #f7f9fc; }
.site-tenant-pick i { font-size: 1.6rem; color: var(--site-primary); }

/* =================== Sections de IA (animações didáticas) =================== */

.ia-section { padding: 70px 0; border-top: 1px solid #eef0f6; }
.ia-section--alt { background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%); }

/* Hero IA */
.ia-hero {
    padding: 90px 0 60px;
    background: radial-gradient(ellipse at top, rgba(34,197,94,.12) 0%, transparent 60%),
                radial-gradient(ellipse at bottom left, rgba(60,85,180,.12) 0%, transparent 60%),
                linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    text-align: center;
}
.ia-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(34,197,94,.1); color: #16a34a;
    padding: 6px 14px; border-radius: 999px;
    font-size: .85rem; font-weight: 600; margin-bottom: 16px;
}
.ia-hero__title { font-size: 2.6rem; font-weight: 800; color: #0f172a; line-height: 1.15; margin-bottom: 18px; }
.ia-hero__title span { background: linear-gradient(135deg, #22c55e, #3C55B4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ia-hero__sub { font-size: 1.15rem; color: #475569; max-width: 720px; margin: 0 auto 30px; }

/* Bloco de cada IA */
.ia-bloco {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    align-items: center; padding: 60px 0;
}
.ia-bloco--inv .ia-bloco__anim { order: -1; }
.ia-bloco__tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--site-primary); background: rgba(60,85,180,.08);
    padding: 4px 10px; border-radius: 4px; margin-bottom: 12px;
}
.ia-bloco__titulo { font-size: 2rem; font-weight: 800; color: #0f172a; line-height: 1.2; margin-bottom: 14px; }
.ia-bloco__desc { font-size: 1.05rem; color: #475569; line-height: 1.65; margin-bottom: 18px; }
.ia-bloco__lista { list-style: none; padding: 0; margin: 0 0 24px; }
.ia-bloco__lista li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; color: #334155; }
.ia-bloco__lista li i { color: #22c55e; font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.ia-bloco__cta { color: var(--site-primary); font-weight: 600; text-decoration: none; }
.ia-bloco__cta:hover { text-decoration: underline; }

/* Container da animação */
.ia-anim {
    background: linear-gradient(135deg, #f8f9fc 0%, #eef1f7 100%);
    border-radius: 16px; padding: 24px;
    min-height: 380px; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.ia-anim svg { width: 100%; max-width: 460px; height: auto; }

/* Labels didáticos */
.ia-anim text.ia-label {
    fill: #64748b; font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; font-family: 'Inter', sans-serif;
}
.ia-anim text.ia-label--in  { fill: #3C55B4; }
.ia-anim text.ia-label--ai  { fill: #16a34a; }
.ia-anim text.ia-label--out { fill: #6f42c1; }
.ia-anim .ia-label-bg { fill: rgba(255,255,255,.85); stroke: #e2e8f0; stroke-width: 1; }

/* Núcleo de IA pulsando */
@keyframes iaGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(34,197,94,.4)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 14px rgba(34,197,94,.85)); transform: scale(1.06); }
}
.ia-anim .ia-core { animation: iaGlow 1.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* Partículas subindo */
@keyframes iaParticle {
    0%   { opacity: 0; transform: translate(0, 0); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -25px)); }
}
.ia-anim .ia-particle { animation: iaParticle 1.6s ease-out infinite; }

/* Status digitando */
.ia-anim .ia-status {
    fill: #16a34a; font-family: 'SFMono-Regular', 'Menlo', monospace;
    font-size: 11px; font-weight: 600;
}

/* Scan line + linhas destacáveis */
.ia-anim .ia-scan-rect { transition: y .35s linear; }
.ia-anim .ia-doc-line { transition: fill .3s; }
.ia-anim .ia-doc-line.active { fill: #22c55e !important; }

/* Badges/cards aparecendo */
.ia-anim .ia-out {
    opacity: 0; transform: translateX(-15px);
    transition: all .5s cubic-bezier(.2, .8, .3, 1);
}
.ia-anim .ia-out.show { opacity: 1; transform: translateX(0); }

/* Balão de chat */
.ia-anim .ia-bubble { opacity: 0; transform: translateY(8px); transition: all .35s ease-out; }
.ia-anim .ia-bubble.show { opacity: 1; transform: translateY(0); }

/* Ondas de áudio */
@keyframes iaWave {
    0%, 100% { transform: scaleY(.4); }
    50%      { transform: scaleY(1.1); }
}
.ia-anim .ia-wave { transform-origin: center; transform-box: fill-box; animation: iaWave 1s ease-in-out infinite; }

/* Cursor digitação */
@keyframes iaBlink { 50% { opacity: 0; } }
.ia-anim .ia-cursor { animation: iaBlink 1s steps(2) infinite; }

/* CTA grande final */
.ia-cta-final {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #fff; padding: 70px 30px; text-align: center; border-radius: 24px;
    margin: 60px 0 30px;
    position: relative; overflow: hidden;
}
.ia-cta-final::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.25), transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(60,85,180,.3), transparent 50%);
    z-index: 0;
}
.ia-cta-final > * { position: relative; z-index: 1; }
.ia-cta-final h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 14px; color: #fff; }
.ia-cta-final p { color: #cbd5e1; max-width: 600px; margin: 0 auto 24px; font-size: 1.05rem; }

/* Resumo IA na home (cards) */
.ia-home-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.ia-home-card {
    background: #fff; border-radius: 14px; padding: 20px;
    border: 1px solid #eef0f6;
    transition: all .15s;
    text-decoration: none; color: inherit; display: block;
}
.ia-home-card:hover { transform: translateY(-3px); border-color: var(--site-primary); box-shadow: 0 14px 36px rgba(60,85,180,.12); color: inherit; }
.ia-home-card__ico {
    width: 44px; height: 44px; border-radius: 10px;
    background: linear-gradient(135deg, #22c55e, #3C55B4);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; margin-bottom: 14px;
}
.ia-home-card h5 { font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.ia-home-card p  { color: #64748b; font-size: .92rem; margin: 0; line-height: 1.5; }

@media (max-width: 991px) {
    .ia-bloco { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
    .ia-bloco--inv .ia-bloco__anim { order: 0; }
    .ia-bloco__titulo { font-size: 1.6rem; }
    .ia-hero__title { font-size: 2rem; }
    .ia-anim { min-height: 320px; padding: 16px; }
    .ia-home-grid { grid-template-columns: 1fr; }
}

/* =================== Responsive =================== */
@media (max-width: 991px) {
    .site-hero { padding: 40px 0 50px; }
    .site-plano--destaque { transform: none; }
    .site-mega { min-width: 100% !important; }
}

/* =================== Mockup split desktop+mobile (Sprint #56) =================== */
.site-hero__mock-split { position: relative; min-height: 360px; }
.site-hero__mock-desktop {
    background: #fff; border-radius: 14px;
    box-shadow: 0 20px 50px rgba(60, 85, 180, .15); overflow: hidden; width: 100%;
}
.site-hero__mock-bar {
    background: linear-gradient(180deg, #f0f4ff, #e7eaf8);
    padding: 10px 14px; display: flex; gap: 6px; border-bottom: 1px solid #e5e7eb;
}
.site-hero__mock-bar span { width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; }
.site-hero__mock-bar span:nth-child(1) { background: #ef4444; }
.site-hero__mock-bar span:nth-child(2) { background: #f59e0b; }
.site-hero__mock-bar span:nth-child(3) { background: #22c55e; }
.site-hero__mock-content { padding: 20px; }
.site-hero__mock-line { height: 12px; background: #e5e7eb; border-radius: 6px; margin-bottom: 10px; }
.site-hero__mock-line--lg { height: 18px; width: 70%; background: linear-gradient(90deg, #3C55B4, #7c3aed); }
.site-hero__mock-line--sm { height: 8px; width: 60%; }
.site-hero__mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.site-hero__mock-card { height: 56px; border-radius: 8px; background: #e7eaf8; }
.site-hero__mock-card--p { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.site-hero__mock-card--g { background: linear-gradient(135deg, #d1fae5, #6ee7b7); }
.site-hero__mock-card--y { background: linear-gradient(135deg, #fef3c7, #fcd34d); }
.site-hero__mock-card--b { background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.site-hero__mock-chart {
    height: 90px; border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(60,85,180,.08) 0%, rgba(60,85,180,0) 100%),
        repeating-linear-gradient(135deg, #f1f3f7 0 6px, #fff 6px 12px);
    position: relative;
}
.site-hero__mock-chart::after {
    content: ''; position: absolute; inset: auto 10px 18px 10px; height: 50px;
    background: linear-gradient(90deg, transparent 0%, #3C55B4 20%, #7c3aed 60%, transparent 100%);
    clip-path: polygon(0 80%, 12% 60%, 25% 70%, 40% 45%, 55% 55%, 70% 30%, 85% 40%, 100% 20%, 100% 100%, 0 100%);
    opacity: .7;
}
/* imagens reais dentro das molduras do hero */
.site-hero__mock-shot { display: block; width: 100%; height: auto; }
.site-hero__mock-mobile {
    position: absolute; bottom: -26px; right: -14px;
    width: 168px; height: 340px;
    background: #1f2738; border-radius: 26px; padding: 8px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .28); transform: rotate(7deg);
}
.site-hero__mock-mobile-notch {
    width: 54px; height: 6px; background: #0f172a; border-radius: 4px; margin: 0 auto 6px;
    position: relative; z-index: 2;
}
.site-hero__mock-mobile-shot {
    display: block; width: 100%; height: calc(100% - 12px);
    object-fit: cover; object-position: top center; border-radius: 16px;
}
.site-hero__mock-mini-card {
    height: 38px; background: linear-gradient(135deg, #ede9fe, #c4b5fd);
    border-radius: 8px; margin-top: 8px;
}

/* =================== Personas =================== */
.site-persona {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    padding: 22px; height: 100%; transition: all .2s;
}
.site-persona:hover {
    transform: translateY(-3px); box-shadow: 0 12px 28px rgba(60,85,180,.15); border-color: #3C55B4;
}
.site-persona__icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 14px;
}
.site-persona__nome { color: #1f2738; font-weight: 700; margin: 0 0 4px; }
.site-persona__sub { color: #6b7280; font-size: .8rem; margin-bottom: 14px; }
.site-persona__list { padding-left: 16px; margin: 0; color: #475569; font-size: .88rem; }
.site-persona__list li { padding: 4px 0; }
.site-persona__list li::marker { color: #22c55e; }

/* =================== Passos =================== */
.site-passo { position: relative; display: inline-block; }
.site-passo__num {
    position: absolute; top: -8px; right: -8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: #7c3aed; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem; z-index: 2;
    box-shadow: 0 2px 6px rgba(124,58,237,.4);
}
.site-passo__icone {
    width: 64px; height: 64px; border-radius: 16px;
    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
    color: #7c3aed; font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
}

/* =================== Sticky CTA flutuante =================== */
.site-sticky-cta {
    position: fixed; bottom: 24px; right: 24px;
    background: linear-gradient(135deg, #3C55B4, #7c3aed);
    color: #fff; padding: 14px 24px; border-radius: 999px;
    box-shadow: 0 8px 24px rgba(60,85,180,.4);
    text-decoration: none; font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all .2s; z-index: 999;
}
.site-sticky-cta:hover {
    color: #fff; transform: scale(1.05); box-shadow: 0 12px 32px rgba(60,85,180,.5);
}

@media (max-width: 991px) {
    .site-hero__mock-mobile { display: none; }
    .site-sticky-cta { bottom: 12px; right: 12px; padding: 10px 16px; font-size: .9rem; }
}

/* ===== banda animada de funcionalidade (feat-anim) ===== */
.fa { position:relative; max-width:760px; margin:0 auto 2.6rem; }
.fa__frame { border-radius:14px; overflow:hidden; background:#0b1220; box-shadow:0 26px 60px -20px rgba(15,23,42,.4); }
.fa__bar { display:flex; align-items:center; gap:7px; padding:10px 14px; background:#0b1220; }
.fa__bar > span { width:11px; height:11px; border-radius:50%; background:#334155; }
.fa__bar > span:nth-child(1){background:#ff5f57} .fa__bar > span:nth-child(2){background:#febc2e} .fa__bar > span:nth-child(3){background:#28c840}
.fa__live { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; font-style:normal; color:#34d399; }
.fa__live i { width:7px; height:7px; border-radius:50%; background:#34d399; display:block; animation:faPulse 1.4s infinite; }
@keyframes faPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.fa__shot { display:block; width:100%; height:auto; }
.fa__pop { position:absolute; bottom:-20px; right:-14px; width:268px; background:#fff; border-radius:14px; box-shadow:0 26px 60px rgba(15,23,42,.3); padding:15px; z-index:2; }
.fad-l { height:9px; border-radius:5px; background:#e8edf5; margin-bottom:8px; } .fad-l.w70{width:70%} .fad-l.w50{width:50%}
.fad-sign { position:relative; height:50px; margin:6px 0 4px; }
.fad-sig { position:absolute; left:50%; bottom:6px; transform:translateX(-50%); width:200px; height:54px; }
.fad-sig path { fill:none; stroke:var(--c); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:640; stroke-dashoffset:640; animation:faSig 4s ease-in-out infinite; }
@keyframes faSig { 0%{stroke-dashoffset:640} 35%,100%{stroke-dashoffset:0} }
.fad-line { border-top:2px solid #cbd5e1; }
.fad-seal { margin-top:10px; display:flex; align-items:center; gap:7px; font-size:.74rem; font-weight:700; color:#15803d; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:9px; padding:7px 10px; opacity:0; animation:faSeal 4s ease-in-out infinite; }
@keyframes faSeal { 0%,40%{opacity:0;transform:translateY(6px)} 55%,100%{opacity:1;transform:none} }
.fao-h { display:flex; align-items:center; gap:7px; font-weight:800; font-size:.82rem; color:#0f172a; margin-bottom:9px; }
.fao-h i { color:#7c3aed; }
.fao-r { display:flex; align-items:center; gap:8px; font-size:.8rem; padding:6px 0; border-top:1px solid #f1f5f9; opacity:.25; animation:faRow 4.4s linear infinite; }
.fao-r span { color:#475569; } .fao-r b { margin-left:auto; color:#0f172a; }
.fao-r i { width:8px; height:8px; border-radius:50%; } .fao-r i.ok{background:#22c55e} .fao-r i.alt{background:#f59e0b}
.fao-r:nth-child(2){animation-delay:0s} .fao-r:nth-child(3){animation-delay:.5s} .fao-r:nth-child(4){animation-delay:1s} .fao-r:nth-child(5){animation-delay:1.5s}
@keyframes faRow { 0%,8%{opacity:.18} 16%,86%{opacity:1} 100%{opacity:.18} }
.fa__pop--video, .fa__pop--3d { padding:0; overflow:hidden; width:214px; }
.fa__pop--video video, .fa__pop--3d video { display:block; width:100%; height:150px; object-fit:cover; }
.fa__pop--3d video { object-fit:contain; background:radial-gradient(circle at 50% 40%,#eef2f8,#fff); }
.fav-live { position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:6px; font-size:.66rem; font-weight:800; color:#fff; background:rgba(220,38,38,.9); padding:3px 9px; border-radius:999px; }
.fav-live i { width:7px; height:7px; border-radius:50%; background:#fff; animation:faPulse 1.2s infinite; }
.fav-tag, .fa3-tag { position:absolute; bottom:10px; left:10px; font-size:.68rem; font-weight:700; color:#0f172a; background:rgba(255,255,255,.9); padding:4px 10px; border-radius:999px; display:flex; align-items:center; gap:5px; }
.fa3-mark { position:absolute; top:30%; left:54%; width:22px; height:22px; border-radius:50%; background:#ef4444; border:2px solid #fff; color:#fff; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(239,68,68,.25); animation:faPulse 1.6s infinite; }
.fa__pop--kb { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.fak-col { background:#f6f8fc; border-radius:10px; padding:8px 7px; min-height:88px; }
.fak-h { font-size:.62rem; font-weight:800; color:#64748b; text-transform:uppercase; letter-spacing:.04em; }
.fak-card { height:26px; border-radius:7px; margin-top:7px; opacity:0; }
.fak-card.k1 { background:#bfdbfe; animation:faK 4.5s linear infinite; }
.fak-card.k2 { background:#fde68a; animation:faK 4.5s linear infinite; animation-delay:1.5s; }
.fak-card.k3 { background:#bbf7d0; animation:faK 4.5s linear infinite; animation-delay:3s; }
@keyframes faK { 0%,4%{opacity:0;transform:translateY(-6px)} 12%,30%{opacity:1;transform:none} 38%,100%{opacity:0} }
@media (max-width: 575px) {
    .fa__pop { position:static; width:auto; margin:14px auto 0; right:auto; bottom:auto; }
    .fa__pop--video, .fa__pop--3d { width:auto; }
}