/* Testes AVSEC — templates de conteúdo e ilustrações */

/* ---------- ilustrações SVG */
.ill { position: absolute; left: 1010px; top: 190px; width: 800px; height: 700px; }
.ill.card { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.ill svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ill .grid { position: absolute; inset: 0; border-radius: 20px; background-image: linear-gradient(rgba(93,209,230,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(93,209,230,.07) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%); }
.ill text, svg text { font-family: var(--font); font-weight: 700; fill: #fff; }
.st { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.st.cy { stroke: var(--cyan); } .st.rd { stroke: var(--red); } .st.th { stroke-width: 2.5; } .st.dim { stroke: rgba(255,255,255,.35); }
.fl-cy { fill: var(--cyan); } .fl-rd { fill: var(--red); } .fl-w { fill: #fff; } .fl-bl { fill: rgba(0,74,173,.55); } .fl-nv { fill: rgba(4,26,54,.85); }
.fx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) var(--d); }
.fx-draw.on { stroke-dashoffset: 0; }
.fx-pp { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s var(--ease) var(--d), transform .6s var(--back) var(--d); }
.fx-pp.on { opacity: 1; transform: none; }
.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.6); opacity: 0; } }
.blink { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.scanY { animation: scanY 2.8s var(--inout) infinite alternate; }
@keyframes scanY { from { transform: translateY(0); } to { transform: translateY(var(--sy, 300px)); } }
.scanX { animation: scanX 3s var(--inout) infinite alternate; }
@keyframes scanX { from { transform: translateX(0); } to { transform: translateX(var(--sx, 400px)); } }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 10s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- agenda */
.agenda { position: absolute; left: 260px; right: 260px; top: 300px; display: flex; flex-direction: column; gap: 28px; }
.agenda .row { display: flex; align-items: center; gap: 40px; padding: 30px 44px; }
.agenda .n { font-weight: 700; font-size: 84px; line-height: 1; width: 150px; }
.agenda .t { flex: 1; font-weight: 700; font-size: 52px; }
.agenda .t small { display: block; font-weight: 400; font-size: 28px; color: rgba(226,236,248,.75); margin-top: 6px; }
.agenda .lg { height: 70px; display: flex; align-items: center; gap: 16px; }

/* ---------- mapa de tópicos (5 cartões) */
.map { position: absolute; left: 110px; right: 110px; top: 390px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.map .tile { position: relative; height: 470px; padding: 36px 30px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.map .tile .n { font-weight: 700; font-size: 76px; line-height: 1; }
.map .tile .t { font-weight: 700; font-size: 34px; line-height: 1.16; }
.map .tile .d { font-size: 25px; line-height: 1.35; color: rgba(226,236,248,.78); }
.map .tile .ic { margin-top: auto; height: 90px; }
.map .tile .edge { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--cyan), var(--red)); }
.map .tile.rededge .edge { background: var(--red); }
.map-head { position: absolute; left: 110px; top: 160px; width: 1700px; }
.map-head .h2 { font-size: 72px; margin-top: 16px; }

/* ---------- tópico (texto à esquerda, ilustração à direita) */
.topic .head { position: absolute; left: 110px; top: 160px; width: 860px; }
.topic .head .meta { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.topic .head .meta .idx { font-weight: 700; font-size: 26px; letter-spacing: .2em; color: rgba(255,255,255,.6); }
.topic .head .h2 { font-size: 70px; line-height: 1.06; }
.topic .head .kicker { margin-top: 20px; font-size: 28px; }
.topic .pts { position: absolute; left: 110px; top: 520px; width: 840px; display: flex; flex-direction: column; gap: 22px; }
.topic .pts.hi { top: 470px; }
.pt { display: flex; gap: 22px; align-items: stretch; }
.pt .b { width: 8px; border-radius: 4px; background: linear-gradient(180deg, var(--cyan), var(--deep)); flex: none; }
.pt .tx { padding: 4px 0; }
.pt .tx b { display: block; font-weight: 700; font-size: 38px; line-height: 1.15; }
.pt .tx span { display: block; font-size: 29px; line-height: 1.35; color: rgba(226,236,248,.82); margin-top: 6px; }
.topic .plates { position: absolute; left: 110px; top: 470px; width: 850px; display: flex; flex-direction: column; gap: 26px; }
.topic .plates .plate { width: 100%; } .topic .plates .plate > .pbody { flex: 1; }
.topic .plates .txt { font-size: 36px; line-height: 1.3; font-weight: 400; }
.topic .plates .txt b { font-weight: 700; }
.plate.alert > .pbody { background: linear-gradient(100deg, rgba(120,10,24,.92) 0%, rgba(80,14,34,.9) 60%, rgba(6,48,95,.88) 100%); }
.plate.alert .pk { color: #ffb3b8; }

/* ---------- aceite fácil */
.quotes { position: absolute; left: 110px; right: 110px; top: 470px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.quote { position: relative; padding: 40px 40px 44px; min-height: 220px !important; border-radius: 26px 26px 26px 6px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); font-size: 36px; line-height: 1.32; font-weight: 400; min-height: 250px; }
.quote::before { content: "“"; position: absolute; left: 26px; top: -34px; font-weight: 700; font-size: 110px; color: var(--cyan); line-height: 1; }
.quote .ok { position: absolute; right: 26px; bottom: -30px; }
.quote .ok .stamp { font-size: 28px; padding: 6px 16px 6px calc(16px + .2em); background: rgba(227,5,18,.95); }

/* ---------- 1.242 testes */
.bigstat { position: absolute; left: 110px; top: 250px; width: 820px; }
.bigstat .v { font-weight: 700; font-size: 230px; line-height: .95; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bigstat .u { font-weight: 700; font-size: 44px; letter-spacing: .06em; margin-top: 12px; }
.bigstat .s { font-size: 34px; color: rgba(226,236,248,.82); margin-top: 16px; line-height: 1.35; }
.stairs { position: absolute; left: 1010px; top: 230px; width: 800px; height: 560px; }
.stairs .bars { position: absolute; left: 60px; right: 20px; bottom: 60px; top: 40px; display: flex; align-items: flex-end; gap: 22px; }
.stairs .bar { flex: 1; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, var(--cyan), var(--deep)); box-shadow: 0 0 30px rgba(93,209,230,.18); transform-origin: bottom; }
.stairs .axis { position: absolute; left: 40px; right: 0; bottom: 56px; height: 3px; background: rgba(255,255,255,.5); }
.stairs .yaxis { position: absolute; left: 40px; top: 30px; bottom: 56px; width: 3px; background: rgba(255,255,255,.5); }
.stairs .xl { position: absolute; right: 0; bottom: 8px; font-weight: 700; font-size: 24px; letter-spacing: .2em; color: rgba(255,255,255,.7); }
.stairs .yl { position: absolute; left: -14px; top: 30px; font-weight: 700; font-size: 24px; letter-spacing: .2em; color: rgba(255,255,255,.7); transform: rotate(-90deg) translateX(-100%); transform-origin: left top; }
.stairs .trend { position: absolute; inset: 0; }
.stairs .note { position: absolute; left: 60px; bottom: -40px; font-size: 22px; color: rgba(226,236,248,.6); }

/* ---------- ciclo */
.cyc-desc { position: absolute; left: 110px; top: 380px; width: 700px; }
.cyc-desc .it { position: absolute; left: 0; top: 0; width: 700px; }
.cyc-desc .n { font-weight: 700; font-size: 120px; line-height: 1; }
.cyc-desc .t { font-weight: 700; font-size: 60px; margin-top: 14px; }
.cyc-desc .d { font-size: 34px; line-height: 1.4; color: rgba(226,236,248,.85); margin-top: 16px; }
.cycle { position: absolute; left: 860px; top: 150px; width: 900px; height: 860px; }
.cycle .node { position: absolute; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 27px; letter-spacing: .04em; line-height: 1.15;
  background: rgba(0,74,173,.6); border: 5px solid rgba(255,255,255,.25); }
.cycle .node.hot { border-color: var(--cyan); background: linear-gradient(135deg, rgba(93,209,230,.9), var(--deep)); box-shadow: 0 0 50px rgba(93,209,230,.55); transform: scale(1.08); }
.cycle .core { position: absolute; left: 450px; top: 430px; width: 240px; height: 240px; margin: -120px 0 0 -120px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cycle .core .t { font-weight: 700; font-size: 34px; letter-spacing: .14em; margin-top: 6px; }

/* ---------- utilitários extras */
.fx-mv { transition: transform 1.5s var(--ease) var(--d); }
.fx-mv.on { transform: translateX(var(--tx)); }
.fx-hl { opacity: 0; transition: opacity .5s var(--ease) var(--d); }
.fx-hl.on { opacity: 1; }
.cycle .node .hl { position: absolute; inset: -5px; border-radius: 50%; border: 5px solid var(--cyan); background: linear-gradient(135deg, rgba(93,209,230,.95), var(--deep)); box-shadow: 0 0 50px rgba(93,209,230,.55); }
.cycle .node span { position: relative; }
.cycle svg { position: absolute; inset: 0; overflow: visible; }
.orbit { transform-box: view-box; transform-origin: 450px 430px; animation: spin 9s linear infinite; }
.xr-o { fill: rgba(245,161,74,.85); } .xr-b { fill: rgba(74,163,255,.9); } .xr-g { fill: rgba(123,216,143,.85); }

/* coluna esquerda dos tópicos: bloco centralizado verticalmente */
.topic .lcol { position: absolute; left: 110px; top: 150px; width: 860px; height: 780px; display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.topic .lcol .head, .topic .lcol .pts, .topic .lcol .plates { position: static; width: auto; }

/* ---------- resumo por tema (1 slide por operador) */
.sum-head { position: absolute; left: 110px; top: 150px; width: 1700px; }
.sum-head .meta { display: flex; align-items: center; gap: 26px; margin-bottom: 18px; }
.sum-head .h2 { font-size: 60px; white-space: nowrap; }
.fronts { position: absolute; left: 110px; right: 110px; top: 330px; height: 620px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.front { position: relative; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.front .n { font-weight: 700; font-size: 64px; line-height: 1; }
.front .ic { width: 120px; height: 80px; overflow: visible; }
.front .t { font-weight: 700; font-size: 33px; line-height: 1.16; }
.front .d { font-size: 26px; line-height: 1.38; color: rgba(226,236,248,.85); }
.front .edge { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--cyan), var(--red)); }
.findings { position: absolute; left: 110px; right: 110px; top: 318px; display: flex; flex-direction: column; gap: 12px; }
.fhead, .frow { display: grid; grid-template-columns: 96px 1fr 64px 1fr; gap: 0 14px; align-items: stretch; }
.fhead span { font-weight: 700; font-size: 22px; letter-spacing: .18em; padding: 0 24px 4px; }
.fhead .r { color: #ff8d93; } .fhead .c { color: var(--cyan); }
.frow .n { font-weight: 700; font-size: 54px; display: flex; align-items: center; justify-content: center; }
.frow .bad, .frow .good { padding: 14px 26px; border-radius: 14px; font-size: 28px; line-height: 1.3; display: flex; align-items: center; }
.frow .bad { display: block; align-content: center; background: linear-gradient(100deg, rgba(120,10,24,.55), rgba(80,14,34,.35)); border-left: 7px solid var(--red); }
.frow .good { display: block; align-content: center; background: linear-gradient(100deg, rgba(0,74,173,.85), rgba(0,91,155,.6)); border-left: 7px solid var(--cyan); }
.frow .bad b, .frow .good b { font-weight: 700; }
.frow .arr { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px; color: var(--cyan); }
.sum-head .kicker.theme { font-size: 50px; letter-spacing: .22em; }
.sum-head .meta { margin-bottom: 10px; }

/* ---------- MASTER: cartões com ilustração, revelou → preparo */
.mcards { position: absolute; left: 110px; right: 110px; top: 318px; height: 650px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.mcard { position: relative; display: flex; flex-direction: column; padding: 18px 18px 18px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(170deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 22px 60px rgba(0,0,0,.35); }
.mcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--red), rgba(227,5,18,.2)); }
.mcard .pic { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse 80% 90% at 50% 40%, rgba(0,74,173,.55), rgba(4,26,54,.9)); border: 1px solid rgba(93,209,230,.18); }
.mcard .pic .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(93,209,230,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(93,209,230,.08) 1px, transparent 1px); background-size: 20px 20px; }
.mcard .pic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mcard .pic .num { position: absolute; left: 12px; top: 8px; font-weight: 700; font-size: 34px; line-height: 1; }
.mcard .t { font-weight: 700; font-size: 29px; line-height: 1.15; margin: 18px 6px 12px; min-height: 100px; }
.mcard .tag { font-weight: 700; font-size: 17px; letter-spacing: .2em; margin-bottom: 6px; }
.mcard .rev { padding: 0 6px; }
.mcard .rev .tag { color: #ff8d93; }
.mcard .rev p { font-size: 24px; line-height: 1.32; color: rgba(236,242,250,.9); }
.mcard .prep { margin-top: auto; padding: 14px 16px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(93,209,230,.28), rgba(0,74,173,.75)); border: 1px solid rgba(93,209,230,.45); }
.mcard .prep .tag { color: var(--cyan); }
.mcard .prep p { font-size: 24px; line-height: 1.3; font-weight: 700; }
.mcard .st { stroke-width: 3; }
.mcard .pic { flex: none; height: 140px; }
.mcard .pic svg { left: 46px; top: 6px; bottom: 6px; right: 4px; width: auto; height: auto; }
.mcard .t { font-size: 27px; min-height: 93px; margin: 16px 6px 10px; }
.mcard .rev p { font-size: 24px; }
.mcard .prep p { font-size: 24px; }
.mcard.ats::before { background: linear-gradient(90deg, var(--cyan), rgba(93,209,230,.2)); }
.mcard.ats .t { font-size: 29px; }
.mcard.ats .prep p { font-size: 26px; }
.mcard .prep { min-height: 170px; }
.mcard.ats .pic { height: 215px; }
.mcard.ats .pic svg { left: 26px; right: 10px; top: 46px; bottom: 10px; }
.mcard.ats .t { min-height: 0; }
.mcard.ats .prep p { font-size: 25px; }

/* ---------- ciclo automático */
.s-cycle .cycle { left: 900px; top: 140px; }
.s-cycle .cycle .node { background: #0a3a7a; border-color: rgba(255,255,255,.28); }
.s-cycle .cycle .node .hl { opacity: 0; }
.s-cycle.active .cycle .node .hl { animation: nodeGlow 10s linear infinite; animation-delay: calc(1.6s + var(--k) * 2s); }
@keyframes nodeGlow { 0% { opacity: 0; } 3% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
.s-cycle .orbit2 { transform-box: view-box; transform-origin: 450px 430px; }
.s-cycle.active .orbit2 { animation: spin 10s linear infinite; animation-delay: 1.6s; }
.clist { position: absolute; left: 110px; top: 380px; width: 740px; display: flex; flex-direction: column; gap: 14px; }
.ci { position: relative; display: flex; gap: 24px; align-items: center; padding: 14px 22px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); }
.ci::after { content: ""; position: absolute; inset: -1px; border-radius: 16px; border: 2px solid var(--cyan); background: rgba(93,209,230,.12); box-shadow: 0 0 30px rgba(93,209,230,.25); opacity: 0; pointer-events: none; }
.s-cycle.active .ci::after { animation: nodeGlow 10s linear infinite; animation-delay: calc(1.6s + var(--k) * 2s); }
.ci .n { font-weight: 700; font-size: 46px; width: 70px; flex: none; }
.ci b { display: block; font-weight: 700; font-size: 34px; }
.ci span { display: block; font-size: 25px; line-height: 1.3; color: rgba(226,236,248,.85); margin-top: 2px; }
.clist { top: 395px; gap: 14px; }
.ci { padding: 12px 22px; }
.ci b { font-size: 32px; } .ci span { font-size: 26px; }
/* enquadramento explícito das ilustrações (Safari não dimensiona SVG só por left/right/top/bottom) */
.mcard .pic svg { left: 46px; top: 6px; right: auto; bottom: auto; width: calc(100% - 50px); height: calc(100% - 12px); }
.mcard.ats .pic svg { left: 26px; top: 46px; right: auto; bottom: auto; width: calc(100% - 36px); height: calc(100% - 56px); }
.mcard.ats .prep { min-height: 0; display: flex; align-items: center; }

/* ---------- método RADAR */
.s-cycle .ci .n { font-size: 58px; width: 60px; text-align: center; }
.s-cycle .cycle .node span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 19px; letter-spacing: .08em; }
.s-cycle .cycle .node span i { font-style: normal; font-size: 64px; line-height: 1; letter-spacing: 0; }
.s-cycle .radar { position: absolute; left: 130px; top: 110px; width: 640px; height: 640px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, rgba(0,74,173,.25) 0%, rgba(4,26,54,.35) 70%, rgba(4,26,54,0) 100%); }
.s-cycle .radar .ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(93,209,230,.18); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.s-cycle .radar .r1 { width: 220px; height: 220px; } .s-cycle .radar .r2 { width: 430px; height: 430px; }
.s-cycle .radar .cross { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - .75px), rgba(93,209,230,.14) calc(50% - .75px), rgba(93,209,230,.14) calc(50% + .75px), transparent calc(50% + .75px)), linear-gradient(0deg, transparent calc(50% - .75px), rgba(93,209,230,.14) calc(50% - .75px), rgba(93,209,230,.14) calc(50% + .75px), transparent calc(50% + .75px)); }
.s-cycle .radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(93,209,230,0) 0deg, rgba(93,209,230,0) 290deg, rgba(93,209,230,.10) 330deg, rgba(93,209,230,.42) 359deg, rgba(93,209,230,0) 360deg); }
.s-cycle.active .radar .sweep { animation: spin 10s linear infinite; animation-delay: 1.6s; }
.s-cycle .core { width: 300px; margin-left: -150px; }
.s-cycle .core .rw { font-weight: 700; font-size: 64px; letter-spacing: .12em; padding-left: .12em; background-image: linear-gradient(180deg, #fff 10%, var(--cyan) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.s-cycle .core .t2 { font-weight: 700; font-size: 17px; letter-spacing: .22em; color: rgba(226,236,248,.8); margin-top: 6px; }
.agenda .pres { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.agenda .pres span { font-weight: 700; font-size: 18px; letter-spacing: .24em; color: var(--cyan); }
.agenda .pres b { font-weight: 700; font-size: 44px; line-height: 1.1; margin-top: 4px; }
.fshint { display: none; position: absolute; left: 0; right: 0; bottom: 70px; text-align: center; font-weight: 700; font-size: 20px; letter-spacing: .18em; color: rgba(255,255,255,.5); animation: blink 2.4s ease-in-out infinite; }
body.not-full .fshint { display: block; }