/* ==========================================================================
   fix-criativo — 30/10. A análise de criativo contada em 4 capítulos que passam
   sozinhos: onde a pessoa saiu, a frase que derrubou, o que separa quem vende
   de quem não vende, e o vídeo novo remontado. O movimento mora no app.js.
   ========================================================================== */
#analytics .rx { overflow: hidden; border-radius: 16px; background: #0d0f0e; box-shadow: var(--ring), 0 40px 90px -50px rgba(0, 0, 0, .9); }

#analytics .rx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-bottom: 1px solid #232826; background: #0a0c0b; }
#analytics .rx-tab {
    position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px;
    min-width: 0; overflow: hidden; padding: 10px 12px; border: 0; border-radius: 12px; background: #141716;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); color: var(--text-3); font: inherit; text-align: left; cursor: pointer;
    transition: background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
#analytics .rx-tab:hover { background: #1a1e1c; }
#analytics .rx-ico {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255, 255, 255, .06); color: var(--text-3); transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
#analytics .rx-ico svg { width: 19px; height: 19px; }
#analytics .rx-tx { display: grid; gap: 1px; min-width: 0; }
#analytics .rx-tab b { font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--text-2); transition: color .3s var(--ease); }
#analytics .rx-tab small { font-size: 11.5px; line-height: 1.25; }
#analytics .rx-tab.on { background: linear-gradient(135deg, rgba(60, 230, 160, .16), rgba(60, 230, 160, .05)); box-shadow: inset 0 0 0 1px rgba(60, 230, 160, .5), 0 10px 26px -14px rgba(60, 230, 160, .55); color: var(--text-2); }
#analytics .rx-tab.on b { color: var(--text); }
#analytics .rx-tab.on .rx-ico { background: #3ce6a0; color: #06130c; box-shadow: 0 0 18px -3px rgba(60, 230, 160, .7); }
#analytics .rx-tab > i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #3ce6a0; transform: scaleX(0); transform-origin: 0 50%; }

/* os capítulos ficam na mesma célula: a dobra tem a altura do maior e não pula */
#analytics .rx-palco { display: grid; }
#analytics .rx-p { grid-area: 1 / 1; min-width: 0; padding: clamp(16px, 2.4vw, 28px); visibility: hidden; opacity: 0; transition: opacity .35s var(--ease); align-self: center; }
#analytics .rx-p.on { visibility: visible; opacity: 1; }

/* ---------- 1. onde a pessoa saiu ---------- */
#analytics .rx-ret { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(16px, 2.6vw, 30px); align-items: stretch; }
#analytics .rx-cel { position: relative; aspect-ratio: 4 / 5; align-self: start; overflow: hidden; border-radius: 14px; box-shadow: var(--ring); }
#analytics .rx-cel img { display: block; width: 100%; height: 100%; object-fit: cover; }
#analytics .rx-cel span { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .68); font-size: 11px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
#analytics .rx-fala {
    margin: 10px 0 0; min-height: 64px; padding: 10px 12px; border-radius: 10px; background: #171a19; box-shadow: var(--ring);
    font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); transition: color .2s, background .2s, box-shadow .2s;
}
#analytics .rx-fala.ruim { color: #ff9a95; background: rgba(229, 112, 107, .1); box-shadow: 0 0 0 1px rgba(229, 112, 107, .45); }

#analytics .rx-graf { min-width: 0; }
#analytics .rx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#analytics .rx-top p { margin: 0; font-size: 12.5px; color: var(--text-3); }
#analytics .rx-top b { display: block; font-family: var(--display); font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
#analytics .rx-sv { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
#analytics .rx-sv .grade { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
#analytics .rx-sv .base { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 2; }
#analytics .rx-sv .area { fill: url(#rx-g); }
#analytics .rx-sv .linha { fill: none; stroke: #3ce6a0; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
#analytics .rx-sv .queda { fill: rgba(229, 112, 107, .12); opacity: 0; transition: opacity .3s; }
#analytics .rx-sv .pino { stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; }
#analytics .rx-sv .ponto { fill: #fff; stroke: #0d0f0e; stroke-width: 3; }
#analytics .rx.caiu .rx-sv .queda { opacity: 1; }
#analytics .rx-blocos { display: grid; grid-template-columns: minmax(62px, 9.4fr) minmax(0, 78.1fr) minmax(44px, 12.5fr); gap: 3px; margin-top: 8px; }
#analytics .rx-blocos span { padding: 5px 7px; overflow: hidden; border-radius: 5px; background: rgba(255, 255, 255, .07); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--text-2); white-space: nowrap; }
#analytics .rx-blocos .g { background: #f4f4f5; color: #101211; }
#analytics .rx-blocos .c { background: #1f8f62; color: #fff; }
#analytics .rx-aviso {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
    background: rgba(229, 112, 107, .1); box-shadow: 0 0 0 1px rgba(229, 112, 107, .4); font-size: 13.5px; color: var(--text);
    opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
#analytics .rx-aviso b { font-weight: 700; color: #ff9a95; }
#analytics .rx.caiu .rx-aviso { opacity: 1; transform: none; }

/* ---------- 2. retenção por frase: ocupa o capítulo inteiro ---------- */
#analytics .rx-p { align-self: stretch; }
#analytics .rx-p[data-p="1"], #analytics .rx-p[data-p="2"] { display: flex; flex-direction: column; }
#analytics .rx-fr { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
#analytics .rx-fr > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#analytics .rx-fr h5 { margin: 0; font-size: 14px; font-weight: 600; }
#analytics .rx-fr .bom h5 { color: #3ce6a0; }
#analytics .rx-fr .mal h5 { color: #ff9a95; }
#analytics .rf { flex: 1; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 12px; border-radius: 14px; background: #171a19; box-shadow: var(--ring); }
#analytics .rf.r { box-shadow: 0 0 0 1px rgba(229, 112, 107, .28); }
#analytics .rf.g { box-shadow: 0 0 0 1px rgba(60, 230, 160, .22); }
#analytics .rf > img { display: block; width: 100%; height: 100%; min-height: 0; border-radius: 9px; object-fit: cover; }
#analytics .rf-c { display: flex; flex-direction: column; min-width: 0; }
#analytics .rf em { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 700; }
#analytics .rf.g em { color: #06130c; background: #3ce6a0; }
#analytics .rf.r em { color: #2a0705; background: #ff9a95; }
#analytics .rf p { margin: 7px 0 0; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text); text-wrap: pretty; }
#analytics .rf svg { flex: 1; display: block; width: 100%; min-height: 26px; max-height: 58px; margin: 6px 0; overflow: visible; }
#analytics .rf path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset 1.1s var(--ease) .1s; }
#analytics .rf.g path { stroke: #3ce6a0; }
#analytics .rf.r path { stroke: #e5706b; }
#analytics .rx-p.on .rf path { stroke-dashoffset: 0; }
#analytics .rf-b { display: grid; grid-template-columns: 104px minmax(0, 1fr) 54px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); }
#analytics .rf-b + .rf-b { margin-top: 3px; }
#analytics .rf-b i { display: block; height: 7px; overflow: hidden; border-radius: 9px; background: rgba(255, 255, 255, .07); }
#analytics .rf-b i::after { content: ''; display: block; height: 100%; width: var(--w); border-radius: inherit; background: #e5706b; transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--ease) .2s; }
#analytics .rf.g .rf-b i::after { background: #3ce6a0; }
#analytics .rf-b.m i::after { background: #62676a !important; }
#analytics .rx-p.on .rf-b i::after { transform: none; }
#analytics .rf-b b { text-align: right; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- 3. o que vende mais: criativo contra criativo ---------- */
#analytics .rx-sep { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#analytics .rd { display: flex; flex-direction: column; min-width: 0; padding: 14px; border-radius: 14px; background: #171a19; box-shadow: var(--ring); }
#analytics .rd h5 { margin: 0 0 12px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); }
#analytics .rd-g { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; gap: 4px; }
#analytics .rd-x { font-style: normal; font-size: 15px; text-align: center; color: var(--text-3); }



#analytics .rv-i { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
#analytics .rv-i img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

#analytics .rv-i span { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; background: #3ce6a0; font-size: 10.5px; font-weight: 700; color: #06130c; opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .35s cubic-bezier(.3,1.6,.5,1); }
#analytics .rv-l p { margin: 7px 0 0; font-size: 12px; color: var(--text-3); }
#analytics .rv-l b { display: block; font-family: var(--display); font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; letter-spacing: -.02em; color: var(--text-2); font-variant-numeric: tabular-nums; }

#analytics .rd small { display: block; margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--text-3); }

@media (max-width: 760px) {
    #analytics .rx-tabs { gap: 5px; padding: 7px; }
    #analytics .rx-tab { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 5px; padding: 8px 3px 9px; text-align: center; }
    #analytics .rx-ico { width: 30px; height: 30px; }
    #analytics .rx-ico svg { width: 16px; height: 16px; }
    #analytics .rx-tab b { font-size: 10.5px; }
    #analytics .rx-tab small { display: none; }
    #analytics .rx-ret { grid-template-columns: minmax(0, 1fr); }
    #analytics .rx-tela { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: stretch; }
    #analytics .rx-fala { margin: 0; min-height: 0; display: flex; align-items: center; }
    #analytics .rx-fr, #analytics .rx-sep { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    #analytics .rx-tab i { display: none; }
}


/* ---------- Dobra imersiva: a tela trava e o scroll passa pelos 4 capítulos ---------- */
#analytics { padding-block: 0; }
#analytics .rx-cola {
    position: sticky; top: 0; display: flex; align-items: center; min-height: 100vh; min-height: 100svh;
    padding: 84px 0 18px; box-sizing: border-box;
}
#analytics .rx-cola > .wrap { width: 100%; }
#analytics .sect-head { margin-bottom: 0; }
#analytics .tela { margin-top: clamp(16px, 2.6vh, 30px); }
#analytics .rx-tab i { transition: none; }
#analytics .rx-sv { max-height: 34vh; }
@media (max-height: 800px) and (min-width: 761px) {
    #analytics .sect-head .lead { display: none; }
    #analytics .sect-head .h2 { font-size: clamp(24px, 3vw, 32px); }
    #analytics .rx-cel { width: 150px; }
    #analytics .rx-ret { grid-template-columns: 150px minmax(0, 1fr); }
    #analytics .rx-p { padding: 14px 18px; }
}
@media (max-width: 760px) {
    #analytics .sect-head .lead { display: none; }
    #analytics .sect-head .h2 { font-size: 24px; }
    #analytics .rx-cola { padding: 72px 0 10px; }
    #analytics .rf + .rf { display: none; }
    #analytics .rx-sv { max-height: 24vh; }
    #analytics .rd:nth-child(n + 3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #analytics { padding-block: clamp(64px, 8vw, 110px); }
    #analytics .rx-cola { position: static; min-height: 0; padding: 0; }
}

@media (max-width: 760px) {
    #analytics .rx-fr { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #analytics .rf { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 9px; }
    #analytics .rf p { font-size: 13.5px; }
    #analytics .rf svg { max-height: 30px; }
    #analytics .rf-b { grid-template-columns: 88px minmax(0, 1fr) 48px; font-size: 10.5px; }
    #analytics .rx-sep { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #analytics .rd { padding: 10px; }
    #analytics .rd h5 { margin-bottom: 8px; font-size: 13.5px; }
    #analytics .rd-g { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
    #analytics .rv-l { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 7px; align-items: center; }
    #analytics .rv-i { grid-row: span 2; }
    #analytics .rv-i span { display: none; }
    #analytics .rv-l p { margin: 0; font-size: 10.5px; }
    #analytics .rv-l b { font-size: 14px; }
    #analytics .rd small { margin-top: 6px; font-size: 11px; }
}
@media (max-height: 800px) and (min-width: 761px) {
    #analytics .rf { grid-template-columns: 92px minmax(0, 1fr); padding: 9px; }
    #analytics .rf p { font-size: 13.5px; margin-top: 4px; }
    #analytics .rv-i img { aspect-ratio: 1 / 1; }
    #analytics .rd small { display: none; }
}

/* ---------- O que vende mais: entra um por vez, conta e revela o vencedor ---------- */
#analytics .rd { opacity: 0; transform: translateY(26px) scale(.965); transition: opacity .5s var(--ease), transform .5s var(--ease); }
#analytics .rd.vis { opacity: 1; transform: none; }
#analytics .rv-l { min-width: 0; transition: opacity .45s var(--ease); }
#analytics .rv-i { transition: box-shadow .4s var(--ease); }
#analytics .rv-l b { transition: color .35s var(--ease); }
#analytics .rd.fim .rv-l:not(.ganha) { opacity: .55; }
#analytics .rd.fim .ganha .rv-i { box-shadow: 0 0 0 2px #3ce6a0, 0 8px 26px -10px rgba(60, 230, 160, .6); }
#analytics .rd.fim .ganha b { color: #3ce6a0; }
#analytics .rd.fim .rv-i span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    #analytics .rd { opacity: 1; transform: none; }
}