/* ==========================================================================
   WSS Instalações e Serviços — seções da página principal e páginas de serviço
   ========================================================================== */

/* ---------- faixas de fita (ticker) ---------- */
.tape { position: relative; z-index: 3; height: 150px; margin: -40px 0 -30px; overflow: hidden; pointer-events: none; }
.tape__band { position: absolute; left: -5%; right: -5%; top: 50%; display: flex; overflow: hidden; padding: 15px 0; }
.tape__band--a { transform: translateY(-50%) rotate(-2.4deg); background: var(--g-volt); box-shadow: 0 14px 40px -14px rgba(255, 122, 0, .7); z-index: 2; }
.tape__band--b { transform: translateY(-50%) rotate(2deg); background: linear-gradient(90deg, #0e2147, #16306a 50%, #0e2147); border-block: 1px solid rgba(76, 201, 255, .35); }
.tape__band--a::before, .tape__band--a::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(-45deg, #0a1631 0 10px, transparent 10px 20px); opacity: .55; }
.tape__band--a::before { top: 0; } .tape__band--a::after { bottom: 0; }
.tape__track { display: flex; flex: none; gap: 34px; padding-right: 34px; animation: marquee 38s linear infinite; }
.tape__band--b .tape__track { animation-direction: reverse; animation-duration: 46s; }
.tape__track span { display: inline-flex; align-items: center; gap: 34px; white-space: nowrap; font: 700 21px/1 var(--f-tech); letter-spacing: .12em; text-transform: uppercase; }
.tape__band--a span { color: #1a0d00; }
.tape__band--b span { color: #cfe0ff; }
.tape__track .i { width: 20px; height: 20px; stroke-width: 2.2; }
.tape__band--a .i { --icon-accent: #1a0d00; }
.tape__band--b .i { color: var(--amber); --icon-accent: var(--amber); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- números ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { padding: 28px 24px 26px; overflow: hidden; }
.stat .i { width: 46px; height: 46px; padding: 10px; border-radius: 14px; color: var(--cyan); background: rgba(76, 201, 255, .1); border: 1px solid rgba(76, 201, 255, .22); }
.stat__n { margin-top: 18px; font: 800 clamp(38px, 4.2vw, 52px)/1 var(--f-display); letter-spacing: -.04em; }
.stat__n small { font-size: .45em; letter-spacing: 0; color: var(--amber); margin-left: 2px; }
.stat p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.stat::before { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(31, 107, 255, .35), transparent 70%); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats { gap: 12px; } .stat { padding: 20px 16px; } .stat p { font-size: 13.5px; } }

/* ---------- sobre ---------- */
.about { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.about__pics { position: relative; aspect-ratio: 1 / 1.08; }
.about__pics figure { position: absolute; margin: 0; border-radius: 22px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 30px 60px -28px rgba(14, 33, 71, .6); }
.about__pics figure img { width: 100%; height: 100%; object-fit: cover; }
.about__pics .p1 { left: 0; top: 0; width: 64%; aspect-ratio: 1; transform: rotate(-3deg); }
.about__pics .p2 { right: 0; top: 14%; width: 46%; aspect-ratio: 1; transform: rotate(4deg); }
.about__pics .p3 { left: 18%; bottom: 0; width: 52%; aspect-ratio: 1.2; transform: rotate(2deg); }
.about__pics figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 8px; font: 700 12px/1 var(--f-body); color: #fff; background: rgba(6, 13, 31, .75); backdrop-filter: blur(6px); }
.about__tag { position: absolute; z-index: 3; right: 2%; bottom: 8%; padding: 16px 18px; max-width: 220px; }
.about__tag b { display: block; font: 800 15px/1.25 var(--f-display); }
.about__tag small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.about__copy p + p { margin-top: 16px; }
.about__copy > p { color: var(--muted); font-size: 17px; }
.about__copy > p strong { color: var(--text); }
.creds { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.creds li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font: 700 14.5px/1.35 var(--f-body); }
.creds .i { width: 22px; height: 22px; color: #1452e0; margin-top: 1px; }
.sign { margin-top: 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sign b { font: 400 46px/1 var(--f-sign); color: #1452e0; transform: rotate(-4deg); }
.sign small { display: block; font: 600 12.5px/1.4 var(--f-tech); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.quote-line { margin-top: 26px; padding: 18px 20px 18px 56px; position: relative; border-radius: 16px; background: linear-gradient(120deg, rgba(31, 107, 255, .08), rgba(255, 122, 0, .08)); border: 1px solid var(--line); font: 600 17px/1.45 var(--f-display); letter-spacing: -.01em; }
.quote-line .i { position: absolute; left: 18px; top: 18px; width: 24px; height: 24px; color: var(--volt); }
.quote-line small { display: block; margin-top: 6px; font: 600 13px/1 var(--f-body); color: var(--muted); letter-spacing: 0; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about__pics { max-width: 520px; width: 100%; margin-inline: auto; } }
@media (max-width: 520px) { .creds { grid-template-columns: 1fr; } }

/* ---------- serviços ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 22px; text-align: left; overflow: hidden; transition: transform .5s var(--ease), border-color .3s; }
.svc:hover { border-color: rgba(76, 201, 255, .4); }
.svc__ic { position: relative; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #1a3f8f, #0e2147); border: 1px solid rgba(76, 201, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 10px 24px -12px rgba(31, 107, 255, .9); }
.svc__ic .i { width: 28px; height: 28px; }
.svc:hover .svc__ic { background: var(--g-blue); }
.svc h3 { font-size: 18.5px; letter-spacing: -.02em; line-height: 1.2; }
.svc p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.svc__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; font: 800 13.5px/1 var(--f-body); color: var(--amber); }
.svc__go .i { width: 16px; height: 16px; transition: transform .3s; }
.svc:hover .svc__go .i { transform: translateX(4px); }
.svc__n { position: absolute; right: 18px; top: 16px; font: 600 13px/1 var(--f-tech); letter-spacing: .1em; color: rgba(160, 190, 240, .35); }
@media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .svc { padding: 18px 16px; } .svc p { font-size: 13.5px; } }
@media (max-width: 480px) { .svc { padding: 16px 14px; gap: 10px; } .svc__ic { width: 44px; height: 44px; border-radius: 13px; } .svc__ic .i { width: 23px; height: 23px; } .svc h3 { font-size: 15.5px; } .svc p { font-size: 12.8px; line-height: 1.45; } .svc__n { display: none; } .svc__go { font-size: 12.5px; } }

/* ---------- especialidades (abas) ---------- */
.tabs__list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.tab { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 99px; font: 800 14.5px/1 var(--f-body); color: var(--muted); background: #fff; border: 1px solid var(--line); transition: all .3s var(--ease); }
.tab .i { width: 18px; height: 18px; }
.tab:hover { color: var(--text); border-color: var(--line-2); }
.tab.is-on { color: #fff; background: linear-gradient(135deg, #0e2147, #1f4fbf); border-color: transparent; box-shadow: 0 12px 26px -12px rgba(20, 82, 224, .8); --icon-accent: var(--amber); }
.panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; }
.panel.is-on { animation: panelIn .6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } }
.panel__pic { position: relative; min-height: 420px; }
.panel__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, .25)); }
.panel__pic .chip { position: absolute; left: 16px; bottom: 16px; z-index: 2; background: rgba(6, 13, 31, .78); color: #fff; border-color: rgba(255, 255, 255, .2); backdrop-filter: blur(8px); }
.panel__body { padding: clamp(26px, 4vw, 44px); }
.panel__body > p { margin-top: 12px; color: var(--muted); }
.ticks { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font: 600 15px/1.4 var(--f-body); }
.ticks .i { width: 20px; height: 20px; flex: none; margin-top: 1px; padding: 3px; border-radius: 6px; color: #fff; background: var(--g-blue); stroke-width: 2.4; }
.panel__body .btn-row { margin-top: 28px; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } .panel__pic { min-height: 260px; } .ticks { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tabs__list { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut) 8px; scrollbar-width: none; } .tabs__list::-webkit-scrollbar { display: none; } .tab { flex: none; } }

/* ---------- segmentos ---------- */
.segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.seg { position: relative; min-height: 460px; border-radius: var(--r); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; border: 1px solid rgba(255, 255, 255, .1); }
.seg img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.seg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 13, 31, .05) 20%, rgba(6, 13, 31, .78) 58%, rgba(6, 13, 31, .96)); transition: opacity .5s; }
.seg:hover img { transform: scale(1.07); }
.seg .i.big { width: 50px; height: 50px; padding: 11px; border-radius: 14px; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px); margin-bottom: 14px; }
.seg h3 { font-size: 24px; }
.seg p { margin-top: 8px; color: #c4d0e4; font-size: 14.5px; }
.seg ul { display: grid; gap: 6px; margin-top: 14px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .4s; }
.seg li { display: flex; gap: 8px; align-items: center; font: 600 14px/1.3 var(--f-body); color: #e6edf8; }
.seg li .i { width: 16px; height: 16px; color: var(--amber); }
.seg:hover ul, .seg:focus-within ul { max-height: 220px; opacity: 1; }
@media (hover: none) { .seg ul { max-height: 220px; opacity: 1; } }
@media (max-width: 1060px) { .segs { grid-template-columns: repeat(2, 1fr); } .seg { min-height: 400px; } }
@media (max-width: 560px) { .segs { grid-template-columns: 1fr; } .seg { min-height: 300px; padding: 20px; } }

/* ---------- antes e depois ---------- */
.ba { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; }
.ba__list { display: grid; gap: 10px; }
.ba__btn { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; text-align: left; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); transition: all .3s var(--ease); }
.ba__btn img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.ba__btn b { display: block; font: 800 15.5px/1.2 var(--f-display); }
.ba__btn small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.ba__btn.is-on { border-color: rgba(255, 176, 32, .6); background: linear-gradient(120deg, rgba(255, 122, 0, .14), rgba(31, 107, 255, .1)); box-shadow: 0 14px 30px -18px rgba(255, 122, 0, .8); }
.cmp { position: relative; aspect-ratio: 1 / 1; max-height: 640px; width: 100%; border-radius: var(--r); overflow: hidden; user-select: none; touch-action: pan-y; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow); --pos: 50%; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp__after { clip-path: inset(0 0 0 var(--pos)); }
.cmp__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: linear-gradient(180deg, var(--cyan), #fff, var(--amber)); box-shadow: 0 0 18px rgba(76, 201, 255, .9); pointer-events: none; }
.cmp__knob { position: absolute; top: 50%; left: var(--pos); width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; background: var(--g-chrome); color: #0b1a36; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8), 0 0 0 4px rgba(255, 255, 255, .25); pointer-events: none; }
.cmp__knob .i { width: 26px; height: 26px; stroke-width: 2.2; }
.cmp__tag { position: absolute; top: 16px; padding: 8px 14px; border-radius: 99px; font: 700 13px/1 var(--f-tech); letter-spacing: .2em; text-transform: uppercase; color: #fff; background: rgba(6, 13, 31, .72); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .2); pointer-events: none; }
.cmp__tag--a { left: 16px; } .cmp__tag--b { right: 16px; background: var(--g-volt); color: #1a0d00; border: 0; }
.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.cmp__cap { margin-top: 14px; color: var(--muted); font-size: 14.5px; display: flex; gap: 10px; align-items: flex-start; }
.cmp__cap .i { color: var(--amber); margin-top: 2px; }
@media (max-width: 900px) { .ba { grid-template-columns: 1fr; } .ba__list { grid-template-columns: repeat(2, 1fr); order: 2; } }
@media (max-width: 480px) { .ba__btn img { width: 48px; height: 48px; } .ba__btn { padding: 8px; gap: 10px; } .ba__btn b { font-size: 13.5px; } .ba__btn small { display: none; } }

/* ---------- carregador veicular ---------- */
.ev { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.ev__steps { margin-top: 28px; display: grid; gap: 12px; counter-reset: s; }
.ev__steps li { position: relative; display: flex; gap: 16px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); counter-increment: s; }
.ev__steps li::before { content: counter(s, decimal-leading-zero); flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 700 16px/1 var(--f-tech); color: #1a0d00; background: var(--g-volt); }
.ev__steps b { display: block; font: 700 16px/1.3 var(--f-display); }
.ev__steps span { display: block; margin-top: 3px; color: var(--muted); font-size: 14.5px; }
.ev__pics { position: relative; aspect-ratio: 1 / 1.05; }
.ev__pics img { position: absolute; border-radius: 22px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow); }
.ev__pics .a { left: 0; top: 0; width: 72%; height: 72%; }
.ev__pics .b { right: 0; bottom: 0; width: 56%; height: 56%; border: 4px solid #0e2147; }
.charge { position: absolute; z-index: 3; left: 6%; bottom: 8%; width: 230px; padding: 16px; }
.charge__top { display: flex; align-items: center; gap: 10px; font: 800 14px/1.2 var(--f-display); }
.charge__top .i { width: 30px; height: 30px; color: #36e27a; --icon-accent: #36e27a; }
.charge__bar { margin-top: 12px; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.charge__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: repeating-linear-gradient(90deg, #36e27a 0 12px, #23c862 12px 14px); transform-origin: left; animation: charge 4.5s var(--ease) infinite; }
.charge small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
@keyframes charge { 0% { transform: scaleX(.08); } 80%, 100% { transform: scaleX(1); } }
@media (max-width: 900px) { .ev { grid-template-columns: 1fr; } .ev__pics { max-width: 520px; width: 100%; margin-inline: auto; } }

/* ---------- iluminação (interruptor) ---------- */
.light { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.light__stage { position: relative; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow); }
.light__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 1s var(--ease), opacity 1s; }
.light__stage .off { filter: brightness(.5) saturate(.7); }
.light__stage .on { opacity: 0; }
.light__stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 35% at 50% 38%, rgba(255, 200, 110, .45), transparent 70%); opacity: 0; mix-blend-mode: screen; transition: opacity 1s; }
.light.is-lit .light__stage .on { opacity: 1; }
.light.is-lit .light__stage::after { opacity: 1; animation: lamp 3.5s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: .75; } }
.light__switch { position: absolute; right: 18px; bottom: 18px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 18px; }
.light__switch span { font: 700 13px/1.2 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; }
.sw { position: relative; width: 50px; height: 76px; border-radius: 12px; background: linear-gradient(180deg, #f6f8fb, #c9d2df); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -10px rgba(0, 0, 0, .9); }
.sw::before { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; border-radius: 7px; background: linear-gradient(180deg, #e3e8ef, #fff 48%, #d6dde7 52%, #eef2f6); box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .08); transform: perspective(80px) rotateX(16deg); transition: transform .3s var(--ease); }
.sw::after { content: ""; position: absolute; left: 50%; top: 5px; width: 6px; height: 3px; margin-left: -3px; border-radius: 2px; background: #b9c3d1; transition: background .3s, box-shadow .3s; }
.light.is-lit .sw::before { transform: perspective(80px) rotateX(-16deg); }
.light.is-lit .sw::after { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.lamps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.lamp { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; text-align: left; }
.lamp img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; flex: none; }
.lamp b { display: block; font: 800 14.5px/1.25 var(--f-display); }
.lamp small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
@media (max-width: 900px) { .light { grid-template-columns: 1fr; } .light__stage { max-width: 600px; width: 100%; margin-inline: auto; } }
@media (max-width: 460px) { .lamps { grid-template-columns: 1fr; } }

/* ---------- diagnóstico: quadro interativo ---------- */
.diag { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.qd { position: relative; padding: 22px; border-radius: 26px; background: linear-gradient(160deg, #d9e0ea, #aab6c7 50%, #c8d1dd); box-shadow: 0 40px 80px -40px rgba(14, 33, 71, .8), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .15); }
.qd__in { border-radius: 16px; padding: 20px 16px 18px; background: linear-gradient(180deg, #0c1a3a, #0a1530); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3), inset 0 10px 30px -10px rgba(0, 0, 0, .8); }
.qd__label { display: flex; justify-content: space-between; align-items: center; font: 600 12px/1 var(--f-tech); letter-spacing: .24em; text-transform: uppercase; color: #8fa6cc; margin-bottom: 16px; }
.qd__label b { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.qd__label .led { width: 9px; height: 9px; border-radius: 50%; background: #36e27a; box-shadow: 0 0 10px #36e27a; }
.qd.has-alert .qd__label .led { background: #ff4d3d; box-shadow: 0 0 10px #ff4d3d; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.qd__rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.brk { position: relative; display: grid; justify-items: center; gap: 10px; padding: 14px 6px 12px; border-radius: 10px; background: linear-gradient(180deg, #fdfdfe, #dfe4ec); box-shadow: inset 0 1px 0 #fff, 0 6px 12px -6px rgba(0, 0, 0, .8); color: #0b1a36; transition: transform .2s; }
.brk:hover { transform: translateY(-2px); }
.brk__lever { position: relative; width: 26px; height: 44px; border-radius: 6px; background: #c7ced9; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
.brk__lever::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, #ff5a3c, #d43a1f); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: transform .3s var(--ease); }
.brk.is-on .brk__lever::after { transform: translateY(18px); background: linear-gradient(180deg, #ffb020, #ff7a00); }
.brk .i { width: 24px; height: 24px; color: #1452e0; --icon-accent: #ff7a00; }
.brk span { font: 700 11.5px/1.2 var(--f-tech); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.brk.is-on { box-shadow: inset 0 1px 0 #fff, 0 0 0 2px var(--volt), 0 10px 22px -8px rgba(255, 122, 0, .8); }
.qd__foot { margin-top: 14px; display: flex; justify-content: space-between; font: 600 11px/1 var(--f-tech); letter-spacing: .2em; color: #6f86ad; text-transform: uppercase; }
.diag__out { padding: clamp(22px, 3vw, 32px); }
.diag__empty { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.diag__empty .i { width: 34px; height: 34px; color: #1452e0; flex: none; }
.diag__item { padding: 16px 0; border-bottom: 1px dashed var(--line-2); animation: panelIn .5s var(--ease); }
.diag__item:last-of-type { border-bottom: 0; }
.diag__item h4 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.diag__item h4 .i { color: #d43a1f; --icon-accent: #ff7a00; width: 24px; height: 24px; }
.diag__item p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.diag__item p b { color: var(--text); }
.diag__cta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.diag__cta p { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.diag__warn { margin-top: 22px; display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 122, 0, .1); border: 1px solid rgba(255, 122, 0, .3); font-size: 14px; }
.diag__warn .i { color: #d96400; flex: none; }
@media (max-width: 900px) { .diag { grid-template-columns: 1fr; } .qd { max-width: 520px; width: 100%; margin-inline: auto; } }
@media (max-width: 420px) { .qd { padding: 14px; } .qd__in { padding: 14px 10px; } .qd__rail { gap: 8px; } .brk span { font-size: 10.5px; } }

/* ---------- em campo ---------- */
.field { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.field__pic { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); min-height: 260px; }
.field__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.field__pic:hover img { transform: scale(1.05); }
.field__pic figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px; border-radius: 12px; font: 700 14px/1.35 var(--f-body); background: rgba(6, 13, 31, .72); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .14); }
.field__a { grid-column: span 5; grid-row: span 2; min-height: 540px; }
.field__b { grid-column: span 4; }
.field__c { grid-column: span 3; }
.field__d { grid-column: span 7; padding: 26px; display: flex; flex-direction: column; justify-content: center; }
.epi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 900px) { .field { grid-template-columns: 1fr 1fr; } .field__a { grid-column: span 2; grid-row: auto; min-height: 380px; } .field__b, .field__c { grid-column: span 1; } .field__d { grid-column: span 2; } }
@media (max-width: 520px) { .field { grid-template-columns: 1fr; } .field__a, .field__b, .field__c, .field__d { grid-column: auto; } .field__pic { min-height: 300px; } }

/* ---------- histórias (casos) ---------- */
.stories { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; }
.story { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.story__date { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--f-tech); letter-spacing: .18em; text-transform: uppercase; color: #d96400; }
.story h3 { font-size: 21px; line-height: 1.2; }
.story blockquote { margin: 0; padding-left: 16px; border-left: 3px solid #ff7a00; font-style: italic; color: var(--muted); font-size: 15px; }
.story__steps { display: grid; gap: 10px; }
.story__steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 14.5px; }
.story__steps .i { width: 30px; height: 30px; padding: 6px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #0e2147, #1f4fbf); --icon-accent: var(--amber); }
.story__steps b { display: block; font: 800 14.5px/1.2 var(--f-display); }
.story img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.story--hl, .tone-ice .story--hl { background: linear-gradient(160deg, #0e2147, #0a1631); color: #e9eef8; --muted: #a9b8d1; border-color: rgba(76, 201, 255, .3); }
.story--hl h3 { color: #fff; }
.story--hl .story__date { color: var(--amber); }
.story--hl blockquote { border-color: var(--amber); }
@media (max-width: 1000px) { .stories { grid-template-columns: 1fr 1fr; } .story--hl { grid-column: span 2; } }
@media (max-width: 640px) { .stories { grid-template-columns: 1fr; } .story--hl { grid-column: auto; } }

/* ---------- como funciona ---------- */
.flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.flow::before { content: ""; position: absolute; left: 6%; right: 6%; top: 37px; height: 2px; background: repeating-linear-gradient(90deg, rgba(76, 201, 255, .5) 0 8px, transparent 8px 16px); }
.flow__rail { position: absolute; left: 6%; right: 6%; top: 36px; height: 4px; border-radius: 4px; overflow: hidden; pointer-events: none; }
.flow__rail i { position: absolute; top: 0; left: -20%; width: 20%; height: 100%; background: linear-gradient(90deg, transparent, var(--cyan), var(--amber), transparent); filter: drop-shadow(0 0 6px var(--cyan)); animation: current 4s linear infinite; }
.flow li { position: relative; text-align: center; }
.flow li.flow__rail { position: absolute; padding: 0; display: block; }
.flow__dot { position: relative; z-index: 2; width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #1a3f8f, #0a1631); border: 1px solid rgba(76, 201, 255, .4); box-shadow: 0 16px 34px -14px rgba(31, 107, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .15); }
.flow__dot .i { width: 34px; height: 34px; }
.flow__dot em { position: absolute; right: -8px; top: -8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--f-tech); font-style: normal; color: #1a0d00; background: var(--g-volt); box-shadow: 0 4px 10px -2px rgba(255, 122, 0, .7); }
.flow h3 { font-size: 18px; }
.flow p { margin-top: 8px; color: var(--muted); font-size: 14.5px; }
@media (max-width: 960px) {
  .flow { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin-inline: auto; }
  .flow::before, .flow__rail { left: 37px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
  .flow::before { background: repeating-linear-gradient(180deg, rgba(76, 201, 255, .5) 0 8px, transparent 8px 16px); }
  .flow__rail i { display: none; }
  .flow li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; text-align: left; padding-bottom: 26px; }
  .flow__dot { margin: 0; }
  .flow h3 { margin-top: 8px; }
}

/* ---------- diferenciais ---------- */
.diffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.diff { padding: 24px 22px; }
.diff .i { width: 48px; height: 48px; padding: 11px; border-radius: 14px; color: #1452e0; background: linear-gradient(145deg, #e6eefc, #fff); border: 1px solid rgba(20, 82, 224, .2); box-shadow: 0 10px 20px -12px rgba(20, 82, 224, .5); }
.diff h3 { margin-top: 16px; font-size: 18px; }
.diff p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 1000px) { .diffs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .diffs { gap: 10px; } .diff { padding: 16px 14px; } .diff .i { width: 40px; height: 40px; padding: 9px; } .diff h3 { font-size: 15.5px; margin-top: 12px; } .diff p { font-size: 13px; } }

/* ---------- vídeos ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filters button { padding: 10px 16px; border-radius: 99px; font: 800 14px/1 var(--f-body); color: var(--muted); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); transition: all .25s; }
.filters button:hover { color: var(--text); }
.filters button.is-on { color: #1a0d00; background: var(--g-volt); border-color: transparent; }
.tone-ice .filters button { background: #fff; }
.reels__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.reels__nav { display: flex; gap: 8px; margin-bottom: 22px; }
.reels__nav button { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); transition: background .25s; }
.reels__nav button:hover { background: rgba(255, 255, 255, .12); }
.reels__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px; scrollbar-width: none; cursor: grab; }
.reels__track::-webkit-scrollbar { display: none; }
.reels__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.reel { position: relative; flex: 0 0 clamp(220px, 24vw, 270px); aspect-ratio: 9 / 15; border-radius: 22px; overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(255, 255, 255, .12); text-align: left; isolation: isolate; }
.reel.is-hidden { display: none; }
.reel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.reel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(6, 13, 31, .92)); }
.reel:hover img { transform: scale(1.06); }
.reel__play { position: absolute; left: 50%; top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(8px); transition: transform .35s var(--ease), background .3s; }
.reel__play .i { width: 26px; height: 26px; margin-left: 3px; }
.reel:hover .reel__play { transform: scale(1.1); background: var(--volt); }
.reel__txt { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.reel__txt small { font: 600 11.5px/1 var(--f-tech); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.reel__txt b { display: block; margin-top: 6px; font: 700 16px/1.25 var(--f-display); }
.reel__dur { position: absolute; right: 12px; top: 12px; padding: 5px 9px; border-radius: 8px; font: 700 12px/1 var(--f-tech); letter-spacing: .08em; background: rgba(6, 13, 31, .7); }
.reels__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.reels__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--amber)); transform: translateX(var(--rx, 0)); transition: transform .2s linear; }

.vmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; }
.vmodal__bg { position: absolute; inset: 0; background: rgba(2, 6, 16, .9); backdrop-filter: blur(8px); }
.vmodal__box { position: relative; width: min(440px, 100%); }
.vmodal video { width: 100%; max-height: 80vh; border-radius: 20px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); object-fit: contain; }
.vmodal__cap { margin-top: 12px; text-align: center; color: #c9d5e8; font-weight: 700; }
.vmodal__close, .lbox__close { position: absolute; right: -6px; top: -56px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }

/* ---------- galeria ---------- */
.gallery { columns: 4 240px; column-gap: 14px; }
.gi { position: relative; margin: 0 0 14px; break-inside: avoid; border-radius: 18px; overflow: hidden; cursor: zoom-in; border: 1px solid rgba(255, 255, 255, .1); background: #0e2147; }
.gi.is-hidden { display: none; }
.gi img { width: 100%; transition: transform .8s var(--ease), filter .5s; }
.gi:hover img { transform: scale(1.05); filter: brightness(.75); }
.gi figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font: 700 13.5px/1.3 var(--f-body); color: #fff; background: linear-gradient(180deg, transparent, rgba(6, 13, 31, .9)); opacity: 0; transform: translateY(8px); transition: all .35s var(--ease); }
.gi:hover figcaption, .gi:focus-visible figcaption { opacity: 1; transform: none; }
@media (hover: none) { .gi figcaption { opacity: 1; transform: none; } }
.gallery-more { margin-top: 26px; text-align: center; }
.gallery.is-collapsed .gi.is-extra { display: none; }
@media (max-width: 560px) { .gallery { columns: 2; column-gap: 10px; } .gi { margin-bottom: 10px; border-radius: 14px; } .gi figcaption { font-size: 12px; padding: 24px 10px 8px; } }

.lbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 70px 18px 24px; }
.lbox__bg { position: absolute; inset: 0; background: rgba(2, 6, 16, .94); backdrop-filter: blur(6px); }
.lbox figure { position: relative; margin: 0; max-width: min(1000px, 100%); }
.lbox img { max-height: 78vh; width: auto; margin: 0 auto; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.lbox figcaption { margin-top: 12px; text-align: center; color: #c9d5e8; font-weight: 700; }
.lbox__prev, .lbox__next { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.lbox__prev { left: 14px; } .lbox__next { right: 14px; }
.lbox__close { right: 18px; top: 14px; z-index: 2; }

/* ---------- depoimentos ---------- */
.testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testi { margin: 0; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.testi > .i { width: 34px; height: 34px; color: #ff7a00; }
.testi p { font: 600 clamp(19px, 2vw, 23px)/1.35 var(--f-display); letter-spacing: -.02em; }
.testi footer { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.testi__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 16px/1 var(--f-display); color: #fff; background: var(--g-blue); flex: none; }
.testi footer b { display: block; font: 800 15px/1.2 var(--f-display); }
.testi footer small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.testi__src { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.testi__src .i { width: 14px; height: 14px; }
.testi--cta, .tone-ice .testi--cta { background: linear-gradient(160deg, #0e2147, #0a1631); color: #fff; --muted: #a9b8d1; justify-content: center; }
.testi--cta h3 { font-size: 22px; color: #fff; }
.testi--cta p { font: 500 15px/1.55 var(--f-body); letter-spacing: 0; color: #c2cee2; }
@media (max-width: 980px) { .testis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .testis { grid-template-columns: 1fr; } }

/* ---------- região e horários ---------- */
.region { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.region__info { padding: clamp(24px, 3vw, 36px); }
.hours { margin-top: 22px; display: grid; gap: 10px; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-weight: 700; }
.hours li span:last-child { color: var(--amber); text-align: right; }
.contact-list { margin-top: 22px; display: grid; gap: 10px; }
.contact-list a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); transition: background .25s, border-color .25s; word-break: break-word; }
.contact-list a:hover { background: rgba(255, 255, 255, .05); border-color: var(--line-2); }
.contact-list .i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: #fff; background: var(--g-blue); flex: none; --icon-accent: var(--spark); }
.contact-list b { display: block; font: 800 15px/1.2 var(--f-display); }
.contact-list small { display: block; color: var(--muted); font-size: 13px; }
.map { position: relative; min-height: 420px; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); background: #0a1631; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95); }
.map__ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }
.map__radar { position: relative; width: 170px; height: 170px; margin: 0 auto 18px; border-radius: 50%; border: 1px solid rgba(76, 201, 255, .35); background: radial-gradient(circle, rgba(31, 107, 255, .25), transparent 70%); }
.map__radar::before, .map__radar::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(76, 201, 255, .3); }
.map__radar::after { inset: -1px; border: 2px solid rgba(76, 201, 255, .6); animation: ring 2.6s infinite; }
.map__radar .i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -30px 0 0 -24px; color: var(--amber); filter: drop-shadow(0 0 10px rgba(255, 176, 32, .7)); }
@media (max-width: 900px) { .region { grid-template-columns: 1fr; } .map { min-height: 340px; } }

/* ---------- orçamento ---------- */
.quote { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 50px); align-items: start; }
.qform { padding: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qform .full { grid-column: 1 / -1; }
.fld label, .fld legend { display: block; margin-bottom: 8px; font: 700 14px/1.2 var(--f-body); color: #d3dcec; }
.fld legend { padding: 0; }
fieldset.fld { border: 0; padding: 0; margin: 0; min-width: 0; }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px; font-size: 16px;
  color: #fff; background: rgba(6, 13, 31, .55); border: 1px solid var(--line-2); transition: border-color .25s, box-shadow .25s;
}
.fld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb020' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 40px; }
.fld select option { background: #0a1631; }
.fld textarea { min-height: 110px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(76, 201, 255, .18); }
.fld input.is-err { border-color: #ff5a3c; box-shadow: 0 0 0 4px rgba(255, 90, 60, .18); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; font: 700 14px/1 var(--f-body); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); cursor: pointer; transition: all .2s; }
.opt span .i { width: 16px; height: 16px; }
.opt input:checked + span { color: #1a0d00; background: var(--g-volt); border-color: transparent; --icon-accent: #1a0d00; }
.opt input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.qform__err { color: #ff8a70; font-weight: 700; font-size: 14px; }
.qform__note { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.qform__note .i { color: var(--cyan); flex: none; }
.qform .btn { width: 100%; }

.phone { position: sticky; top: calc(var(--hdr) + 20px); width: min(330px, 100%); margin-inline: auto; padding: 12px; border-radius: 44px; background: linear-gradient(150deg, #e9eef5, #8e9cb2 40%, #d9e0ea 60%, #6f7f97); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.phone__in { border-radius: 34px; overflow: hidden; background: #0b141a; min-height: 520px; display: flex; flex-direction: column; }
.phone__top { display: flex; align-items: center; gap: 10px; padding: 26px 14px 12px; background: #1f2c34; color: #e9edef; }
.phone__top img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #fff; }
.phone__top b { display: block; font: 700 14.5px/1.2 var(--f-body); }
.phone__top small { font-size: 12px; color: #8696a0; }
.phone__chat { flex: 1; padding: 16px 12px; background: #0b141a radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.4px) 0 0 / 16px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.bubble { align-self: flex-end; max-width: 88%; padding: 9px 11px 20px; border-radius: 10px 2px 10px 10px; background: #005c4b; color: #e9edef; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; position: relative; word-break: break-word; }
.bubble::after { content: "agora"; position: absolute; right: 8px; bottom: 5px; font-size: 10.5px; color: rgba(233, 237, 239, .6); }
.bubble--in { align-self: flex-start; background: #1f2c34; border-radius: 2px 10px 10px 10px; padding-bottom: 9px; }
.bubble--in::after { content: none; }
.phone__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 18px; background: #0b141a; }
.phone__bar span { flex: 1; height: 40px; border-radius: 99px; background: #1f2c34; }
.phone__bar i { width: 40px; height: 40px; border-radius: 50%; background: #00a884; display: grid; place-items: center; color: #fff; font-style: normal; }
@media (max-width: 960px) { .quote { grid-template-columns: 1fr; } .phone { position: relative; top: 0; } }
@media (max-width: 560px) { .qform { grid-template-columns: 1fr; } }

/* ---------- instagram ---------- */
.insta { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.insta__card { padding: 28px; }
.insta__head { display: flex; align-items: center; gap: 16px; }
.insta__av { width: 78px; height: 78px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #ffb020, #ff7a00, #ff3d6e, #8a3dff, #1f6bff, #ffb020); flex: none; }
.insta__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #fff; }
.insta__head b { display: block; font: 800 19px/1.2 var(--f-display); }
.insta__head small { color: var(--muted); }
.insta__stats { display: flex; gap: 24px; margin: 20px 0; }
.insta__stats b { display: block; font: 800 20px/1 var(--f-display); }
.insta__stats small { color: var(--muted); font-size: 13px; }
.insta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.insta__grid a { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.insta__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.insta__grid a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 122, 0, .5), rgba(31, 107, 255, .5)); opacity: 0; transition: opacity .3s; }
.insta__grid a:hover img { transform: scale(1.08); }
.insta__grid a:hover::after { opacity: 1; }
@media (max-width: 860px) { .insta { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(26px, 5vw, 70px); align-items: start; }
.faq__aside { position: sticky; top: calc(var(--hdr) + 24px); }
.faq__aside .glass { margin-top: 26px; padding: 22px; }
.faq__aside .glass p { color: var(--muted); font-size: 15px; margin: 8px 0 16px; }
.faq__list { display: grid; gap: 10px; }
.qa { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); transition: border-color .3s, background .3s; }
.qa[open] { border-color: rgba(76, 201, 255, .35); background: rgba(31, 107, 255, .07); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; font: 700 16.5px/1.35 var(--f-display); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .i { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; color: var(--amber); background: rgba(255, 176, 32, .1); transition: transform .35s var(--ease); }
.qa[open] summary .i { transform: rotate(45deg); }
.qa__a { padding: 0 20px 20px; color: var(--muted); font-size: 15.5px; }
.qa__a a { color: var(--amber); font-weight: 700; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq__aside { position: static; } }

/* ---------- chamada final ---------- */
.final { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(36px, 6vw, 76px); text-align: center; isolation: isolate; background: radial-gradient(70% 90% at 50% 0%, #1a3f8f, #0a1631 70%); border: 1px solid rgba(76, 201, 255, .3); box-shadow: 0 50px 100px -40px rgba(31, 107, 255, .6); }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-45deg, rgba(255, 176, 32, .05) 0 16px, transparent 16px 32px); }
.final .bolt-bg { position: absolute; right: -40px; top: -30px; width: 280px; height: 280px; color: rgba(255, 176, 32, .12); z-index: -1; stroke-width: .8; transform: rotate(12deg); }
.final h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 800; letter-spacing: -.045em; }
.final p { margin: 18px auto 0; max-width: 620px; color: #c2cee2; font-size: 18px; }
.final .btn-row { justify-content: center; margin-top: 34px; }
.final__meta { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* ---------- rodapé ---------- */
.ftr { position: relative; padding: 76px 0 30px; background: linear-gradient(180deg, #050b19, #030712); border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.ftr__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 36px; }
.ftr__brand img { height: 92px; width: auto; }
.ftr__brand p { margin-top: 16px; color: var(--muted); font-size: 15px; max-width: 320px; }
.ftr h3 { font: 600 14px/1 var(--f-tech); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); margin-bottom: 18px; }
.ftr ul { display: grid; gap: 10px; }
.ftr li a, .ftr li span { display: inline-flex; align-items: center; gap: 10px; color: #c2cee2; font-size: 15px; transition: color .2s; }
.ftr li a:hover { color: #fff; }
.ftr li .i { width: 18px; height: 18px; color: var(--cyan); }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-2); transition: all .25s; }
.social a:hover { background: var(--g-volt); color: #1a0d00; border-color: transparent; --icon-accent: #1a0d00; }
.ftr__bot { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: #7f8fab; font-size: 13.5px; }
.ftr__bot a { color: #c2cee2; font-weight: 700; }
.ftr__bot a:hover { color: var(--amber); }
.ftr__big { position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%); z-index: -1; font: 800 clamp(120px, 22vw, 320px)/1 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(140, 175, 235, .09); white-space: nowrap; pointer-events: none; }
@media (max-width: 960px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Páginas de serviço
   ========================================================================== */
.phero { position: relative; padding: calc(var(--hdr) + 60px) 0 70px; overflow: hidden; isolation: isolate; }
.phero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font: 600 13.5px/1 var(--f-body); color: var(--muted); }
.crumbs a:hover { color: #fff; }
.crumbs .i { width: 14px; height: 14px; }
.phero h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -.045em; }
.phero__lead { margin-top: 20px; font-size: clamp(16.5px, 1.6vw, 19px); color: #b9c7de; max-width: 620px; }
.phero .btn-row { margin-top: 30px; }
.phero__pic { position: relative; aspect-ratio: 1; border-radius: 28px; padding: 6px; background: linear-gradient(150deg, #f4f7fb, #8a9ab1 30%, #e3e9f1 50%, #6c7c94 72%, #dfe6ee); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 80px -20px rgba(31, 107, 255, .5); }
.phero__pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 23px; }
@media (max-width: 900px) { .phero__grid { grid-template-columns: 1fr; } .phero__pic { max-width: 460px; width: 100%; margin-inline: auto; } }

.page { display: grid; grid-template-columns: 1fr 340px; gap: clamp(26px, 4vw, 54px); align-items: start; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.035em; margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); font-size: 17px; }
.prose p + p { margin-top: 14px; }
.prose p strong { color: var(--text); }
.prose .ticks { margin-top: 18px; }
.prose .pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.prose .pics figure { margin: 0; }
.prose .pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.prose .pics figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.side { position: sticky; top: calc(var(--hdr) + 20px); padding: 26px; }
.side h3 { font-size: 20px; }
.side p { margin: 10px 0 18px; font-size: 15px; color: var(--muted); }
.side .btn { width: 100%; }
.side .btn + .btn { margin-top: 10px; }
.side ul { margin-top: 20px; display: grid; gap: 10px; font-size: 14.5px; }
.side li { display: flex; gap: 10px; align-items: center; }
.side li .i { color: var(--amber); width: 18px; height: 18px; }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.related a { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; }
.related a .i:first-child { width: 44px; height: 44px; padding: 10px; border-radius: 12px; color: #fff; background: var(--g-blue); flex: none; --icon-accent: var(--spark); }
.related b { display: block; font: 800 15.5px/1.25 var(--f-display); }
.related small { color: var(--muted); font-size: 13px; }
.related a .i:last-child { margin-left: auto; color: var(--amber); }
@media (max-width: 960px) { .page { grid-template-columns: 1fr; } .side { position: static; } .related { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .prose .pics { grid-template-columns: 1fr 1fr; } }

/* 404 */
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 100px 0 60px; position: relative; overflow: hidden; isolation: isolate; }
.nf__code { font: 800 clamp(110px, 22vw, 220px)/1 var(--f-display); letter-spacing: -.06em; background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; animation: flicker 4s infinite; }
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .35; } }
.nf p { margin: 14px auto 30px; max-width: 520px; color: var(--muted); font-size: 18px; }
.nf .btn-row { justify-content: center; }