/* Vértice Auto — camada de refinamento visual.
   Acrescenta atmosfera, ritmo e detalhe técnico sobre style.css, sem alterar a
   estrutura anterior. Tudo o que anima está protegido por .js-ready e pela
   preferência de movimento reduzido, declarada no fim do ficheiro. */

:root{
  --line-soft:rgba(255,255,255,.06);
  --ease:cubic-bezier(.16,1,.3,1);
  --radius:6px;
}

/* --- atmosfera: dois halos de marca e um grão finíssimo sobre toda a página */
.atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glow{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5}
.glow-a{width:52vw;height:52vw;max-width:660px;max-height:660px;top:-14vw;right:-12vw;background:radial-gradient(circle,rgba(215,25,45,.30),transparent 68%)}
.glow-b{width:44vw;height:44vw;max-width:520px;max-height:520px;top:52vh;left:-16vw;background:radial-gradient(circle,rgba(120,120,140,.16),transparent 70%)}
.grain{position:absolute;inset:-50%;opacity:.045;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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- tipografia: mais contraste óptico no display, leitura mais calma no corpo */
h1{letter-spacing:-.035em;text-wrap:balance}
h2{letter-spacing:-.03em;text-wrap:balance}
.accent-text,h1 .accent-text{color:#f04a58}
.hero-description,.section-heading p,.method-intro p,.booking-copy>p{color:#b6b4b6;text-wrap:pretty}
.eyebrow{letter-spacing:.22em}

/* --- botão: varrimento de luz na passagem do rato, elevação contida */
.button{position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(180deg,#e01f34,#bd1225);border-color:#e5384a;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 10px 26px rgba(0,0,0,.35);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.button:before{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transform:skewX(-18deg)}
.js-ready .button:hover:before{animation:sheen .75s var(--ease)}
@keyframes sheen{to{left:150%}}
.button:hover{background:linear-gradient(180deg,#ee2a3f,#c4142a);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 16px 36px rgba(214,26,45,.28)}
.button:active{transform:translateY(0)}
.button-ghost{background:rgba(255,255,255,.03);border-color:#5c5859;box-shadow:none}
.button-ghost:hover{background:rgba(255,255,255,.07);box-shadow:none}

/* --- cabeçalho: leitura da secção actual e sublinhado do link em vista */
.header{background:rgba(11,11,12,.78);border-bottom-color:var(--line-soft)}
.header nav a{position:relative;padding-block:6px;transition:color .2s}
.header nav a:after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent-bright);transition:right .35s var(--ease)}
.header nav a:hover:after,.header nav a.is-current:after{right:0}
.header nav a.is-current{color:#fff}
.nav-marker{display:none;font-size:8px;letter-spacing:.18em;color:#6f6c6d;margin-left:auto;padding-right:6px;white-space:nowrap}
@media(min-width:1100px){.nav-marker{display:block}}
.notice{background:linear-gradient(90deg,#1d1c1c,#221f20 55%,#1d1c1c);border-bottom-color:var(--line-soft)}

/* --- palco 3D: moldura de canto, vinheta e comandos com estado visível */
.stage-frame{position:absolute;inset:14px;z-index:4;pointer-events:none;
  background:
    linear-gradient(#6d6a6a55,#6d6a6a55) left top/14px 1px no-repeat,
    linear-gradient(#6d6a6a55,#6d6a6a55) left top/1px 14px no-repeat,
    linear-gradient(#6d6a6a55,#6d6a6a55) right top/14px 1px no-repeat,
    linear-gradient(#6d6a6a55,#6d6a6a55) right top/1px 14px no-repeat,
    linear-gradient(#6d6a6a55,#6d6a6a55) left bottom/14px 1px no-repeat,
    linear-gradient(#6d6a6a55,#6d6a6a55) left bottom/1px 14px no-repeat,
    linear-gradient(#6d6a6a55,#6d6a6a55) right bottom/14px 1px no-repeat,
    linear-gradient(#6d6a6a55,#6d6a6a55) right bottom/1px 14px no-repeat}
.technical-stage:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(6,6,7,.55) 100%)}
.model-controls button{border-radius:3px;background:rgba(24,23,23,.9);border-color:#3d3b3b;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.model-controls button:hover:not(:disabled){background:#2a2727;border-color:#6d6767;color:#fff}
.model-controls button[aria-pressed=true]{background:var(--accent);border-color:#f2606d;color:#fff;
  box-shadow:0 0 0 3px rgba(215,25,45,.16)}
.model-number{transition:color .3s}
.technical-stage.has-webgl .model-number{color:#d78f95}

/* --- pontos de informação: alvo maior, pulsação discreta, recuo quando atrás */
.hotspot{transition:background .2s,box-shadow .25s,opacity .3s,transform .25s var(--ease)}
.hotspot:before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(240,132,139,.45)}
.js-ready .technical-stage.has-webgl .hotspot:before{animation:ping 2.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.8);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.hotspot:hover{transform:scale(1.12)}
.hotspot.is-behind{opacity:.28;transform:scale(.82)}
.hotspot.is-behind:hover,.hotspot.is-behind:focus-visible{opacity:1;transform:scale(1)}
.part-info{backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.6)}

/* --- indicadores: números com peso e um filete de marca por cima */
.facts-wrap{background:linear-gradient(180deg,#151414,#111010);position:relative}
.facts-wrap:before{content:'';position:absolute;top:-1px;left:0;width:min(220px,38%);height:1px;
  background:linear-gradient(90deg,var(--accent),transparent)}
.fact-value{background:linear-gradient(180deg,#ffffff,#bdbabb);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-weight:700}

/* --- faixa de especialidades entre o herói e os serviços */
.marquee{display:flex;overflow:hidden;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#121112,#0e0d0e);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:34px;flex:0 0 auto;padding:15px 34px 15px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:#8b8889;white-space:nowrap}
.js-ready .marquee-track{animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track i{display:block;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.8}
@keyframes marquee{to{transform:translateX(-100%)}}

/* --- cartões de serviço: cantos técnicos e sombra ao aproximar */
.service-card{border-radius:var(--radius);background:linear-gradient(180deg,#1d1c1e,#171617);
  transition:border-color .25s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.service-card:after{content:'';position:absolute;top:10px;right:10px;width:9px;height:9px;pointer-events:none;
  border-top:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);
  opacity:0;transition:opacity .25s}
.service-card:hover:after{opacity:1}
.service-card:hover{box-shadow:0 22px 50px rgba(0,0,0,.4)}
.service-card.featured{background:linear-gradient(180deg,#262324,#1d1a1b);
  box-shadow:0 0 0 1px rgba(215,25,45,.18) inset}
.card-top>span{font-size:11px;letter-spacing:.1em;color:#7e7c7c}
.service-card summary{transition:color .2s}
.service-card summary:hover{color:#fff}
.service-card details[open] summary span,.method-steps details[open] .step-plus,
.faq-item[open] .faq-plus{transition:transform .3s var(--ease)}

/* --- método */
.method-section{background:linear-gradient(180deg,#151414,#121111)}
.method-steps details{transition:padding .3s var(--ease)}
.method-steps details[open]{padding-bottom:8px}
.method-steps summary{transition:color .2s}
.method-steps summary:hover{color:#fff}
.step-content>span{letter-spacing:.2em}
.method-seal{border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 18px;
  background:rgba(255,255,255,.02)}

/* --- perguntas frequentes */
.faq{display:grid;gap:34px}
.faq-intro h2{font-size:34px}
.faq-intro p{color:#b0aeae;font-size:13px;line-height:1.9;margin-top:22px;max-width:380px}
.faq-list{display:grid;align-content:start}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item:first-child{border-top:1px solid var(--line-soft)}
.faq-item summary{display:flex;gap:20px;align-items:baseline;justify-content:space-between;
  list-style:none;cursor:pointer;padding:20px 0;font-size:15px;line-height:1.55;
  letter-spacing:-.2px;transition:color .2s}
.faq-item summary:hover{color:#fff}
.faq-plus{font-size:20px;color:#9a9797;line-height:1;flex-shrink:0}
.faq-item[open] summary{color:#fff}
.faq-item[open] .faq-plus{transform:rotate(45deg);color:#ef5b66}
.faq-item>p{font-size:12.5px;color:var(--muted);line-height:1.95;padding:0 40px 24px 0;
  max-width:560px;margin-top:-4px}

/* --- marcação, localização e rodapé */
.booking-section{background:linear-gradient(180deg,#181616,#141212)}
.booking-form{background:linear-gradient(180deg,#242222,#1c1a1a);border-radius:8px;
  box-shadow:0 30px 70px rgba(0,0,0,.35)}
input,textarea{transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,textarea:focus{border-color:#a5474f;background:#1e1b1c;box-shadow:0 0 0 3px rgba(215,25,45,.14)}
.form-progress .current{color:#f5959b}
.booking-phone{transition:color .2s}
.booking-phone:hover{color:#ff7681}
.map-panel{border-radius:var(--radius)}
.js-ready .map-marker{animation:beacon 3.4s ease-in-out infinite}
@keyframes beacon{0%,100%{box-shadow:0 0 0 10px rgba(229,49,60,.07)}50%{box-shadow:0 0 0 18px rgba(229,49,60,.02)}}
footer{background:linear-gradient(180deg,#0c0b0b,#080808)}
.footer-main>a:last-child{transition:color .2s}
.footer-main>a:last-child:hover{color:#fff}
.whatsapp{border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.45);
  transition:transform .25s var(--ease),box-shadow .25s}
.whatsapp:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,0,0,.55)}
.mobile-call{border-radius:8px}

/* --- revelação progressiva: só com JavaScript, para nada ficar invisível */
.js-ready [data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-ready [data-reveal].is-revealed{opacity:1;transform:none}

@media(min-width:600px){
  .faq-intro h2{font-size:38px}
  .faq-item summary{font-size:16.5px;padding:23px 0}
  .marquee-track{gap:44px;font-size:11px;padding-right:44px}
}
@media(min-width:960px){
  .faq{grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
  .faq-intro{position:sticky;top:120px}
  .faq-intro h2{font-size:40px}
  .faq-item summary{font-size:18px;padding:26px 0}
  .faq-item>p{font-size:13px}
  .glow-a{opacity:.6}
}

@media(prefers-reduced-motion:reduce){
  .js-ready .marquee-track,.js-ready .map-marker,
  .js-ready .technical-stage.has-webgl .hotspot:before,
  .js-ready .button:hover:before{animation:none!important}
  .js-ready [data-reveal]{opacity:1;transform:none;transition:none}
  .grain{display:none}
}
