/* ════════════════════════════════════════════════════════════════════
   ASKOBE — Landing Transmissor de Pressão
   Dark + teal, blueprint tech. Fonts: Space Grotesk (display) / Inter.
   ════════════════════════════════════════════════════════════════════ */

:root{
    --bg:        #05080d;
    --panel:     #0c1320;
    --panel-2:   #101a2b;
    --text:      #e9eef6;
    --muted:     #9fb0c3;
    --teal:      #3FE0C5;
    --teal-2:    #18b89d;
    --teal-dark: #0fa893;
    --line:      rgba(255,255,255,.08);
    --line-2:    rgba(63,224,197,.22);
    --radius:    18px;
    --shadow:    0 24px 80px rgba(0,0,0,.55);
    --font-d:    "Space Grotesk", system-ui, sans-serif;
    --font-b:    "Inter", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-b);
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--teal); color:#04221c; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

/* ── Fundo ─────────────────────────────────────────────────────────── */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
/* Gradientes radiais já suaves: mesmo visual do blur, sem custo de filtro
   por frame (o blur(120px) deixava o scroll pesado em GPUs modestas). */
.bg__aurora{
    position:absolute; width:75vw; height:75vw; border-radius:50%;
    transform:translateZ(0); will-change:transform;
}
.bg__aurora--1{
    background:radial-gradient(circle, rgba(63,224,197,.14) 0%, rgba(63,224,197,.05) 40%, transparent 68%);
    top:-30vw; right:-20vw; animation:aurora1 26s ease-in-out infinite alternate;
}
.bg__aurora--2{
    background:radial-gradient(circle, rgba(20,80,160,.16) 0%, rgba(20,80,160,.05) 40%, transparent 68%);
    bottom:-35vw; left:-22vw; animation:aurora2 32s ease-in-out infinite alternate;
}
@keyframes aurora1{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-12vw,14vh) scale(1.25);} }
@keyframes aurora2{ from{ transform:translate(0,0) scale(1.1);} to{ transform:translate(10vw,-10vh) scale(.9);} }
.bg__grid{
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(63,224,197,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63,224,197,.05) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 35%, transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 35%, transparent 80%);
}
.bg__noise{
    position:absolute; inset:0; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ── Nav ───────────────────────────────────────────────────────────── */
.nav{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; gap:28px;
    padding:16px clamp(20px,5vw,64px);
    background:rgba(5,8,13,.82);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
}
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:38px; width:auto; display:block; }
.nav__links{ display:flex; gap:24px; margin-left:auto; }
.nav__links a{
    font-size:14px; color:var(--muted); position:relative; transition:color .25s;
}
.nav__links a::after{
    content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
    background:var(--teal); transition:width .25s;
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }

/* ── Botões ────────────────────────────────────────────────────────── */
.btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 22px; border-radius:14px; border:1px solid var(--line);
    font-size:15px; font-weight:600; color:var(--text);
    background:rgba(255,255,255,.04);
    transition:transform .2s, box-shadow .25s, background .25s, border-color .25s;
    will-change:transform;
}
.btn--primary{
    background:linear-gradient(135deg, var(--teal), var(--teal-2));
    color:#04221c; border-color:transparent;
    box-shadow:0 8px 32px rgba(63,224,197,.28);
}
.btn--primary:hover{ box-shadow:0 12px 44px rgba(63,224,197,.45); transform:translateY(-2px); }
.btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--line-2); }
.btn--lg{ padding:17px 30px; font-size:17px; border-radius:16px; }
.btn__arrow{ transition:transform .25s; display:inline-block; }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none!important; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{
    position:relative; min-height:calc(100vh - 70px);
    display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
    gap:32px; padding:48px clamp(20px,5vw,64px) 80px; max-width:1340px; margin:0 auto;
}
.hero__eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13px; letter-spacing:.6px; color:var(--teal);
    border:1px solid var(--line-2); border-radius:99px; padding:8px 16px;
    background:rgba(63,224,197,.06); margin-bottom:26px;
}
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(63,224,197,.6);} 70%{ box-shadow:0 0 0 12px rgba(63,224,197,0);} 100%{ box-shadow:0 0 0 0 rgba(63,224,197,0);} }
.hero__title{
    font-family:var(--font-d); font-weight:700;
    font-size:clamp(42px, 6vw, 70px); line-height:1.02; letter-spacing:-1.5px;
}
.hero__title span{ display:block; }
.hero__title-accent{
    background:linear-gradient(100deg, var(--teal) 20%, #7df0dd 50%, var(--teal) 80%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    background-size:200% auto; animation:shine 5s linear infinite;
}
@keyframes shine{ to{ background-position:200% center; } }
.hero__lead{ max-width:520px; color:var(--muted); font-size:18px; margin:26px 0 34px; }
.hero__lead strong{ color:var(--text); }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.chip{
    font-size:13px; color:var(--muted);
    border:1px solid var(--line); border-radius:99px; padding:7px 14px;
    background:rgba(255,255,255,.03);
}

.hero__visual{ position:relative; display:flex; justify-content:center; min-height:540px; }
.hero__halo{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:480px; height:480px; border-radius:50%;
    background:radial-gradient(circle, rgba(63,224,197,.2), transparent 65%);
    filter:blur(10px); animation:halo 6s ease-in-out infinite alternate;
}
@keyframes halo{ from{ transform:translate(-50%,-50%) scale(.92); opacity:.7;} to{ transform:translate(-50%,-50%) scale(1.08); opacity:1;} }
.hero__orbit{
    position:absolute; top:50%; left:50%; width:520px; height:520px;
    transform:translate(-50%,-50%); border:1px dashed rgba(63,224,197,.18);
    border-radius:50%; animation:spin 40s linear infinite;
}
.hero__orbit i{
    position:absolute; width:7px; height:7px; border-radius:50%;
    background:var(--teal); box-shadow:0 0 14px var(--teal);
}
.hero__orbit i:nth-child(1){ top:-4px; left:50%; }
.hero__orbit i:nth-child(2){ bottom:12%; left:4%; }
.hero__orbit i:nth-child(3){ top:24%; right:1%; }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }
.hero__product{ position:relative; z-index:2; animation:floatY 7s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-22px) rotate(2deg);} }
/* Foto recortada (fundo transparente) do hero — trio centralizado */
.hero__product img.hero-cutout{
    display:block; width:min(330px, 72vw); height:auto;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 42px rgba(63,224,197,.14));
}
/* Transmissores compostos em camadas, flanqueando o principal */
.hero__product2, .hero__product3{
    position:absolute; z-index:1; opacity:.92; pointer-events:none;
}
.hero__product2{ left:-9%; top:12%; animation:floatY2 9.5s ease-in-out infinite; }
.hero__product3{ right:-7%; top:22%; animation:floatY3 11s ease-in-out infinite; }
@keyframes floatY2{
    0%,100%{ transform:rotate(-12deg) scale(.82) translateY(0); }
    50%{ transform:rotate(-12deg) scale(.82) translateY(-20px); }
}
@keyframes floatY3{
    0%,100%{ transform:rotate(11deg) scale(.74) translateY(0); }
    50%{ transform:rotate(11deg) scale(.74) translateY(-16px); }
}
.hero__product2 img, .hero__product3 img{ filter:drop-shadow(0 24px 48px rgba(0,0,0,.55)); }
@media (max-width:880px){
    .hero__product2, .hero__product3{ display:none; }
}
.tx-svg{ height:520px; width:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 42px rgba(63,224,197,.14)); }
.tx-holder{ display:flex; justify-content:center; }
.tx-engrave{
    font-family:var(--font-d); font-size:15px; letter-spacing:2px;
    fill:#39424e; font-weight:600;
}
.tx-engrave--brand{ font-size:11px; letter-spacing:1px; fill:#2e3a47; }
.tx-engrave--range{ fill:#0fa893; font-size:17px; }
.tx-engrave--mini{ font-size:10px; letter-spacing:1.4px; fill:#55626f; }

.hero__spec{
    position:absolute; z-index:3; font-size:13px; font-weight:600; line-height:1.35;
    padding:12px 16px; border-radius:12px;
    background:rgba(12,19,32,.85); border:1px solid var(--line-2);
    backdrop-filter:blur(8px); box-shadow:var(--shadow);
}
.hero__spec small{ color:var(--muted); font-weight:400; }
/* Badges nos cantos vazios — sem sobrepor os produtos */
.hero__spec--1{ top:0; left:0; animation-delay:.4s; }
.hero__spec--2{ top:2%; right:-1%; animation-delay:1.1s; }
.hero__spec--3{ bottom:2%; left:0; animation-delay:1.8s; }
.float{ animation:floatY 9s ease-in-out infinite; }

.hero__scroll{
    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
    width:26px; height:42px; border:2px solid var(--line); border-radius:14px;
}
.hero__scroll span{
    position:absolute; top:7px; left:50%; width:4px; height:9px; margin-left:-2px;
    border-radius:4px; background:var(--teal); animation:scrollHint 1.8s infinite;
}
@keyframes scrollHint{ 0%{ opacity:1; transform:translateY(0);} 80%{ opacity:0; transform:translateY(14px);} 100%{ opacity:0;} }

/* ── Seções / títulos ──────────────────────────────────────────────── */
section{ position:relative; }
.sec-title{
    font-family:var(--font-d); font-weight:700; text-align:center;
    font-size:clamp(30px,4.4vw,52px); letter-spacing:-1px;
}
.sec-title span{ color:var(--teal); }
.sec-sub{ text-align:center; color:var(--muted); margin:14px auto 0; max-width:560px; }
.blink{ animation:blink 1.1s step-start infinite; color:var(--teal); }
@keyframes blink{ 50%{ opacity:0; } }

/* ── Números ───────────────────────────────────────────────────────── */
.numeros{ padding:40px clamp(20px,5vw,64px) 30px; }
.numeros__grid{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.numero{
    text-align:center; padding:30px 12px; border-radius:var(--radius);
    border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    transition:border-color .3s, transform .3s;
}
.numero:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.numero b{
    display:block; font-family:var(--font-d); font-size:clamp(30px,3.4vw,46px);
    color:var(--teal); letter-spacing:-1px;
}
/* só o rótulo (filho direto) — o .count dentro do <b> herda o tamanho grande */
.numero > span{ font-size:13.5px; color:var(--muted); }

/* ── Vista explodida (fotos animadas pelo scroll) ──────────────────── */
.explodida{ padding:60px 0 40px; }
.explodida__pin{
    min-height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:20px;
}
.explodida__head{ margin-bottom:10px; }
.explodida__wrap{
    position:relative; width:min(860px, 94vw);
    display:flex; justify-content:center;
}
.explodida__stage{ position:relative; width:300px; height:660px; }
.explodida__stage img{
    position:absolute; left:50%; height:auto;
    filter:drop-shadow(0 18px 36px rgba(0,0,0,.55));
    will-change:transform;
}
.exp-eixo{
    position:absolute; left:50%; top:0; bottom:0; width:0;
    border-left:1px dashed rgba(63,224,197,.3); opacity:0;
}
.exp-callout{
    position:absolute; max-width:250px; font-size:13.5px; color:var(--muted);
    padding:13px 16px; border-radius:12px; line-height:1.45;
    background:rgba(12,19,32,.9); border:1px solid var(--line);
    border-left:3px solid var(--teal); opacity:0; transform:translateY(14px);
}
.exp-callout b{ display:block; color:var(--text); margin-bottom:3px; font-size:14px; }
.exp-callout--1{ top:2%;  right:2%; }
.exp-callout--2{ top:24%; left:0; }
.exp-callout--3{ top:46%; right:0; }
.exp-callout--4{ top:68%; left:2%; }
.exp-callout--5{ bottom:0; right:4%; }

/* ── Diferenciais ──────────────────────────────────────────────────── */
.diferenciais{ padding:100px clamp(20px,5vw,64px); }
.cards{
    max-width:1180px; margin:48px auto 0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.card{
    position:relative; padding:30px 26px; border-radius:var(--radius);
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
    transition:border-color .3s; overflow:hidden;
    transform-style:preserve-3d;
}
.card::before{
    content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(63,224,197,.10), transparent 45%);
}
.card:hover{ border-color:var(--line-2); }
.card:hover::before{ opacity:1; }
.card__icon{ font-size:28px; margin-bottom:14px; }
.card__icon--img{ height:34px; }
.card__icon--img img{ height:34px; width:auto; display:block; }
.card h3{ font-family:var(--font-d); font-size:19px; margin-bottom:8px; letter-spacing:-.3px; }
.card p{ color:var(--muted); font-size:14.5px; }

/* ── Configurador ──────────────────────────────────────────────────── */
.config{ padding:100px clamp(20px,4vw,64px); }
.config__head{ margin-bottom:42px; }
.config__wrap{
    max-width:1220px; margin:0 auto;
    display:grid; grid-template-columns:380px 1fr; gap:22px; align-items:start;
}
.config__preview{
    position:sticky; top:90px;
    border-radius:var(--radius); border:1px solid var(--line-2);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(63,224,197,.07), transparent 55%),
        var(--panel);
    padding:26px 22px; box-shadow:var(--shadow);
}
.preview__stage{ display:flex; justify-content:center; }
.preview__stage .tx-svg{ height:320px; }

/* Composição fotorrealista em camadas (geometria via JS) */
.tx-foto{ position:relative; display:none; overflow:hidden; }
.preview__stage.foto-on .tx-foto{ display:block; }
.preview__stage.foto-on .tx-holder{ display:none; }
.tx-foto img{
    position:absolute; left:50%; height:auto;
    filter:drop-shadow(0 14px 28px rgba(0,0,0,.5));
}
.tx-foto img.swap{ animation:layerSwap .35s ease; }
@keyframes layerSwap{ from{ opacity:0; transform:translateX(-50%) translateY(8px);} to{ opacity:1; transform:translateX(-50%) translateY(0);} }
.tx-foto__label{
    position:absolute; left:50%; transform:translateX(-50%);
    text-align:center; pointer-events:none; z-index:4;
    font-family:var(--font-d); color:#2c3640; font-weight:700;
    text-shadow:0 1px 0 rgba(255,255,255,.28);
    line-height:1.5; white-space:nowrap;
}
.tx-foto__label b{ display:block; font-size:11px; letter-spacing:.5px; }
.tx-foto__label small{ display:block; font-size:8.5px; letter-spacing:1px; font-weight:600; color:#3d4956; }
.preview__nota{
    display:block; text-align:center; margin-top:8px;
    font-size:10.5px; letter-spacing:.4px; color:var(--muted); opacity:.55;
}
.preview__specs{ list-style:none; margin-top:10px; border-top:1px solid var(--line); }
.preview__specs li{
    display:flex; justify-content:space-between; gap:14px;
    padding:9px 2px; border-bottom:1px solid var(--line); font-size:13.5px;
}
.preview__specs span{ color:var(--muted); }
.preview__specs b{ color:var(--text); font-weight:600; text-align:right; transition:color .25s; }
.preview__specs b.flash{ color:var(--teal); }

.config__panel{
    position:relative; border-radius:var(--radius); border:1px solid var(--line);
    background:var(--panel); padding:30px clamp(18px,3vw,40px) 36px; box-shadow:var(--shadow);
    overflow:hidden;
}
.wizard__progress{ margin-bottom:26px; }
.wizard__bar{ height:4px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.wizard__bar i{
    display:block; height:100%; width:20%;
    background:linear-gradient(90deg, var(--teal-2), var(--teal));
    border-radius:99px; transition:width .45s cubic-bezier(.6,0,.2,1);
    box-shadow:0 0 14px rgba(63,224,197,.6);
}
.wizard__steps{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.wizard__steps button{
    font-size:12.5px; letter-spacing:.4px; padding:7px 13px; border-radius:99px;
    border:1px solid var(--line); background:transparent; color:var(--muted);
    transition:all .25s;
}
.wizard__steps button.is-active{
    color:#04221c; background:var(--teal); border-color:var(--teal); font-weight:700;
}
.wizard__steps button.is-done{ color:var(--teal); border-color:var(--line-2); }

.step{ display:none; border:none; animation:stepIn .45s cubic-bezier(.4,0,.2,1); }
.step.is-active{ display:block; }
@keyframes stepIn{ from{ opacity:0; transform:translateX(26px);} to{ opacity:1; transform:none;} }
.step legend{
    font-family:var(--font-d); font-size:clamp(19px,2vw,24px); font-weight:600;
    margin-bottom:20px; letter-spacing:-.3px;
}
.field-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:14px; }
.field{ display:block; }
.field span{
    display:block; font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--muted); margin-bottom:7px;
}
.field input, .field select, .field textarea{
    width:100%; padding:13px 14px; border-radius:12px; font-size:15px;
    color:var(--text); background:rgba(255,255,255,.045);
    border:1px solid var(--line); outline:none; transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--teal); box-shadow:0 0 0 3px rgba(63,224,197,.15);
}
.field select option{ background:var(--panel); }
.field input.is-invalid, .field select.is-invalid{ border-color:#ff6b6b; box-shadow:0 0 0 3px rgba(255,107,107,.12); }
.hint{ font-size:13px; color:var(--muted); margin-top:12px; }
.hint b{ color:var(--text); }

.seg{ display:inline-flex; gap:6px; padding:6px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); margin-top:6px; }
.seg__opt{
    padding:10px 18px; border-radius:10px; border:none; background:transparent;
    color:var(--muted); font-size:14px; font-weight:600; transition:all .25s;
}
.seg__opt.is-active{ background:var(--teal); color:#04221c; box-shadow:0 4px 18px rgba(63,224,197,.35); }

.pills{ display:flex; flex-wrap:wrap; gap:9px; }
.pills--grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); }
.pill{
    padding:12px 16px; border-radius:12px; font-size:14px; font-weight:600;
    color:var(--muted); background:rgba(255,255,255,.04);
    border:1px solid var(--line); transition:all .22s; text-align:center;
}
.pill:hover{ border-color:var(--line-2); color:var(--text); transform:translateY(-2px); }
.pill.is-active{
    background:rgba(63,224,197,.12); border-color:var(--teal); color:var(--teal);
    box-shadow:0 0 0 1px var(--teal) inset, 0 6px 22px rgba(63,224,197,.18);
}
.avancado{ margin-top:18px; border-top:1px dashed var(--line); padding-top:14px; }
.avancado summary{ font-size:13px; color:var(--muted); cursor:pointer; user-select:none; }
.avancado summary:hover{ color:var(--teal); }
.avancado .check{ margin-top:10px; }

.check{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); cursor:pointer; }
.check input{ width:17px; height:17px; accent-color:var(--teal); }
.check--revenda{ margin:16px 0 8px; padding:13px 16px; border-radius:12px; border:1px dashed var(--line-2); background:rgba(63,224,197,.05); }
.check--revenda b{ color:var(--teal); }
.check--lgpd{ font-size:12.5px; margin-top:8px; }

.cabo-box{ margin-top:22px; padding:18px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.cabo-nota{ margin-top:14px; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.45; color:var(--muted); background:rgba(63,224,197,.06); border:1px solid var(--line-2); }
.cabo-nota b{ color:var(--teal); }
.check--switch .switch{
    width:42px; height:24px; border-radius:99px; background:rgba(255,255,255,.12);
    position:relative; transition:background .25s; flex:none;
}
.check--switch .switch::after{
    content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
    border-radius:50%; background:#fff; transition:transform .25s;
}
.check--switch input{ display:none; }
.check--switch input:checked + .switch{ background:var(--teal); }
.check--switch input:checked + .switch::after{ transform:translateX(18px); }
.cabo-metros{ margin-top:16px; }
.cabo-metros input[type=range]{ width:100%; accent-color:var(--teal); }
.cabo-valor{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:14px; color:var(--muted); }
.cabo-valor input{
    width:84px; padding:10px; text-align:center; font-size:16px; font-weight:700;
    color:var(--teal); background:rgba(63,224,197,.08); border:1px solid var(--line-2); border-radius:10px;
}

.field--qtd .stepper{ display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.field--qtd .stepper button{
    width:42px; background:rgba(255,255,255,.05); border:none; color:var(--text); font-size:19px;
}
.field--qtd .stepper button:hover{ background:rgba(63,224,197,.15); color:var(--teal); }
.field--qtd .stepper input{
    width:64px; text-align:center; border:none; background:transparent; color:var(--text);
    font-size:16px; font-weight:700; outline:none;
}

.wizard__nav{ display:flex; gap:12px; margin-top:30px; align-items:center; }
.wizard__nav .btn--primary{ margin-left:auto; }
#btnEnviar{ margin-left:auto; }
.config__erro{ margin-top:14px; color:#ff8585; font-size:14px; }

/* Overlay de envio */
.config__overlay{
    position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
    background:rgba(8,12,19,.96); backdrop-filter:blur(6px); border-radius:var(--radius);
    animation:fadeIn .3s;
}
@keyframes fadeIn{ from{ opacity:0; } }
.overlay__loading, .overlay__done{ text-align:center; padding:30px; max-width:420px; }
.loader{ display:flex; gap:9px; justify-content:center; margin-bottom:22px; }
.loader i{
    width:13px; height:13px; border-radius:50%; background:var(--teal);
    animation:bounce 1s infinite ease-in-out;
}
.loader i:nth-child(2){ animation-delay:.16s; } .loader i:nth-child(3){ animation-delay:.32s; }
@keyframes bounce{ 0%,80%,100%{ transform:scale(.6); opacity:.4;} 40%{ transform:scale(1); opacity:1;} }
#overlayMsg{ font-family:var(--font-d); font-size:19px; font-weight:600; min-height:28px; }
.overlay__loading small{ color:var(--muted); display:block; margin-top:10px; }
.done__icon{
    width:74px; height:74px; margin:0 auto 18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:34px; color:#04221c; background:var(--teal);
    box-shadow:0 0 0 12px rgba(63,224,197,.15), 0 0 60px rgba(63,224,197,.5);
    animation:pop .5s cubic-bezier(.3,1.6,.5,1);
}
@keyframes pop{ from{ transform:scale(.2); opacity:0;} }
.overlay__done h3{ font-family:var(--font-d); font-size:25px; margin-bottom:8px; }
.overlay__done p{ color:var(--muted); }
.done__numero{ margin-top:10px; font-size:13px; color:var(--teal); letter-spacing:1px; }
.done__acoes{ display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }

/* ── Timeline ──────────────────────────────────────────────────────── */
.timeline{ padding:100px clamp(20px,5vw,64px) 80px; }
.timeline__grid{
    max-width:1080px; margin:50px auto 0;
    display:grid; grid-template-columns:1fr .95fr; gap:48px; align-items:center;
}
.timeline__foto{
    margin:0; border-radius:22px; overflow:hidden;
    border:1px solid var(--line-2); box-shadow:var(--shadow);
}
.timeline__foto img{ display:block; width:100%; height:auto; }
.timeline__foto figcaption{
    padding:14px 18px; font-size:13px; color:var(--muted);
    background:var(--panel); border-top:1px solid var(--line);
}
.timeline__list{
    list-style:none; position:relative; padding-left:34px;
}
.timeline__list::before{
    content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px;
    background:linear-gradient(180deg, var(--teal), rgba(63,224,197,.05));
}
.timeline__list li{ position:relative; padding:0 0 34px 18px; }
.timeline__list li::before{
    content:""; position:absolute; left:-32px; top:6px; width:16px; height:16px;
    border-radius:50%; background:var(--bg); border:3px solid var(--teal);
    box-shadow:0 0 16px rgba(63,224,197,.55);
}
.timeline__list b{ font-family:var(--font-d); font-size:18px; }
.timeline__list p{ color:var(--muted); font-size:15px; margin-top:4px; max-width:560px; }

/* ── Revenda ───────────────────────────────────────────────────────── */
.revenda{ padding:40px clamp(20px,5vw,64px) 90px; }
.revenda__box{
    max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:40px;
    border-radius:24px; padding:clamp(28px,4vw,56px);
    border:1px solid var(--line-2);
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(63,224,197,.10), transparent 55%),
        var(--panel);
    box-shadow:var(--shadow); align-items:center;
}
.tag{
    display:inline-block; font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--teal); border:1px solid var(--line-2); padding:6px 13px; border-radius:99px;
    margin-bottom:18px;
}
.revenda h2{ font-family:var(--font-d); font-size:clamp(28px,3.6vw,44px); letter-spacing:-1px; line-height:1.08; }
.revenda h2 span{ color:var(--teal); }
.revenda p{ color:var(--muted); margin:16px 0 20px; max-width:480px; }
.revenda__lista{ list-style:none; margin-bottom:28px; }
.revenda__lista li{ padding:5px 0; font-size:15px; }
.laser-foto{
    position:relative; border-radius:20px; overflow:hidden;
    border:1px solid var(--line-2); box-shadow:var(--shadow);
}
.laser-foto img{ display:block; width:100%; height:auto; }
.laser-foto__caption{
    position:absolute; left:14px; bottom:12px; z-index:2;
    font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#cfe8e3;
    background:rgba(5,8,13,.65); border:1px solid var(--line-2);
    padding:6px 12px; border-radius:99px; backdrop-filter:blur(4px);
}
.laser-line{
    position:absolute; top:0; bottom:0; width:3px; left:-10%;
    background:linear-gradient(180deg, transparent, #fff 30%, var(--teal) 50%, #fff 70%, transparent);
    box-shadow:0 0 24px 6px rgba(63,224,197,.8);
    animation:laser 3.4s ease-in-out infinite;
}
@keyframes laser{ 0%{ left:-6%; opacity:0;} 12%{ opacity:1;} 55%{ left:104%; opacity:1;} 70%{ opacity:0;} 100%{ left:104%; opacity:0;} }

/* ── Aplicações (marquee) ──────────────────────────────────────────── */
.aplicacoes{ padding:30px 0 90px; }
.aplic__destaque{
    position:relative; max-width:1080px; margin:44px auto 0; border-radius:24px; overflow:hidden;
    border:1px solid var(--line-2); box-shadow:var(--shadow);
}
.aplic__destaque img{ display:block; width:100%; height:auto; }
.aplic__destaque::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 45%, rgba(5,8,13,.85) 100%);
}
.aplic__overlay{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:22px clamp(18px,3vw,32px); font-size:15px; color:var(--muted);
}
.aplic__overlay b{
    display:block; font-family:var(--font-d); font-size:20px; color:var(--text); margin-bottom:2px;
}
.marquee{ overflow:hidden; margin-top:40px; mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track{ display:flex; gap:14px; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
    font-family:var(--font-d); font-size:clamp(17px,2.2vw,24px); font-weight:600;
    color:var(--muted); padding:16px 30px; border:1px solid var(--line); border-radius:99px;
    white-space:nowrap; transition:all .3s;
}
.marquee__track span:hover{ color:var(--teal); border-color:var(--line-2); }
@keyframes marquee{ to{ transform:translateX(-50%);} }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq{ padding:40px clamp(20px,5vw,64px) 90px; }
.faq__list{ max-width:760px; margin:44px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq__list details{
    border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025);
    transition:border-color .3s;
}
.faq__list details[open]{ border-color:var(--line-2); background:rgba(63,224,197,.04); }
.faq__list summary{
    padding:19px 22px; font-weight:600; font-size:15.5px; cursor:pointer; user-select:none;
    list-style:none; position:relative; padding-right:48px;
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary::after{
    content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
    font-size:22px; color:var(--teal); transition:transform .3s;
}
.faq__list details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq__list p{ padding:0 22px 20px; color:var(--muted); font-size:14.5px; }

/* ── CTA final / footer ────────────────────────────────────────────── */
.cta-final{ padding:30px clamp(20px,5vw,64px) 110px; }
.cta-final--topo{ padding:0 clamp(20px,5vw,64px) 50px; }
.cta-final__box{
    max-width:880px; margin:0 auto; text-align:center;
    border-radius:28px; padding:clamp(44px,6vw,80px) 30px;
    border:1px solid var(--line-2);
    background:
        radial-gradient(60% 130% at 50% 0%, rgba(63,224,197,.14), transparent 60%),
        var(--panel);
    box-shadow:var(--shadow);
}
.cta-final h2{ font-family:var(--font-d); font-size:clamp(30px,4.6vw,54px); letter-spacing:-1.4px; line-height:1.06; }
.cta-final h2 span{ color:var(--teal); }
.cta-final p{ color:var(--muted); margin:18px 0 32px; }
.footer{ border-top:1px solid var(--line); padding:44px 20px 60px; text-align:center; }
.footer__brand{ display:flex; justify-content:center; }
.footer__brand img{ height:34px; width:auto; display:block; }
.footer p{ color:var(--muted); font-size:13.5px; margin:10px 0 14px; }
.footer small{ color:#5e6e80; font-size:12px; }
.footer small a{ text-decoration:underline; }

/* ── Utilidades / reveal ───────────────────────────────────────────── */
.is-hidden{ display:none!important; }
.reveal{ opacity:0; transform:translateY(34px); }
html.no-gsap .reveal{ opacity:1; transform:none; } /* fallback sem CDN */
html.no-gsap .exp-callout{ opacity:1; transform:none; }

/* ── Responsivo ────────────────────────────────────────────────────── */
@media (max-width:1080px){
    .config__wrap{ grid-template-columns:1fr; }
    .config__preview{ position:relative; top:0; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; }
    .preview__stage .tx-svg{ height:220px; }
    .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
    .hero{ grid-template-columns:1fr; padding-top:28px; min-height:0; }
    .hero__visual{ min-height:440px; order:2; }
    .tx-svg{ height:400px; }
    .hero__spec--2{ right:0; }
    .nav__links{ display:none; }
    .revenda__box{ grid-template-columns:1fr; }
    .numeros__grid{ grid-template-columns:repeat(2,1fr); }
    .timeline__grid{ grid-template-columns:1fr; }
}
/* Explodida vira estática (sem pin) só abaixo de 768px — mesmo corte do JS */
@media (max-width:767px){
    .explodida__pin{ min-height:0; }
    .explodida__wrap{ flex-direction:column; align-items:center; }
    .explodida__stage{ transform:scale(.85); transform-origin:top center; margin-bottom:-80px; }
    .exp-callout{ position:static; opacity:1; transform:none; max-width:none; margin:8px 0; }
}
@media (max-width:620px){
    .cards{ grid-template-columns:1fr; }
    .config__preview{ grid-template-columns:1fr; text-align:center; }
    .preview__specs li{ text-align:left; }
    .hero__chips{ display:none; }
    .wizard__steps{ display:none; }
    .field-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
    .reveal{ opacity:1; transform:none; }
}

/* ── Botão "Fale Conosco" no header ────────────────────────────────── */
.nav__contato{ padding:11px 18px; }

/* ── Modal "Fale Conosco" ──────────────────────────────────────────── */
.fc-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.fc-modal__backdrop{ position:absolute; inset:0; background:rgba(4,6,10,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.fc-modal__card{
    position:relative; z-index:1; width:100%; max-width:560px; max-height:92vh; overflow:auto;
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line-2); border-radius:20px; padding:34px clamp(20px,4vw,40px);
    box-shadow:0 30px 90px rgba(0,0,0,.55);
    animation:fcIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes fcIn{ from{ opacity:0; transform:translateY(18px) scale(.98);} to{ opacity:1; transform:none;} }
.fc-modal__x{
    position:absolute; top:14px; right:16px; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--muted);
    font-size:24px; line-height:1; cursor:pointer; transition:background .2s, color .2s;
}
.fc-modal__x:hover{ background:rgba(255,255,255,.12); color:var(--text); }
.fc-modal__title{ font-family:var(--font-d); font-size:26px; margin-bottom:8px; }
.fc-modal__sub{ color:var(--muted); font-size:14.5px; margin-bottom:22px; line-height:1.55; }
.fc-modal__sub a{ color:var(--teal); }
.fc-modal .field-row{ margin-bottom:14px; }
.fc-modal textarea{ resize:vertical; min-height:100px; font-family:inherit; }
.fc-modal #fcEnviar{ width:100%; justify-content:center; margin-top:18px; }
.fc-modal__done{ text-align:center; padding:24px 8px; }
.fc-modal__done h3{ font-family:var(--font-d); font-size:24px; margin-bottom:8px; }
.fc-modal__done p{ color:var(--muted); }
.fc-modal__done .btn{ margin-top:22px; }

@media (max-width:880px){
    .nav__contato{ margin-left:auto; }
}
@media (max-width:560px){
    .nav{ gap:10px; padding-left:14px; padding-right:14px; flex-wrap:wrap; row-gap:10px; }
    .nav__logo{ margin-right:auto; }
    .nav__logo img{ height:28px; }
    .nav__contato{ margin-left:0; }
    .nav__contato, .nav__cta{ padding:9px 12px; font-size:12.5px; border-radius:11px; white-space:nowrap; }
}