/* ============================================================
   KINOX · Site — Design System compartilhado
   Base: proposta 02 (Cinema full-bleed) + LP premium.
   Dark-first · aço escovado neutro + 1 acento brasa reservado.
   Grade 8pt · Archivo display / Barlow texto.
   Paleta VERMELHO FOGO (#E31B23) — decisão aplicada na LP/heroes.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* neutros — carvão */
  --carvao:#0E0E0E;
  --carvao-0:#0A0A0A;
  --surface:#161616;
  --surface-2:#1D1D1D;
  --surface-3:#242424;
  --border:#2A2A2A;
  --border-strong:#3A3A3A;

  /* aço inox */
  --inox:#C7CACC;
  --inox-lo:#8A8D90;
  --inox-hi:#EDEEEF;

  /* brasa — acento ÚNICO (vermelho fogo) */
  --brasa:#E31B23;
  --brasa-2:#FF4149;
  --brasa-3:#B8121A;

  /* texto semântico */
  --text:#F2F2F2;
  --muted:#B3B5B7;
  --faint:#7C7E80;
  --on-brasa:#0A0A0A;

  /* tipografia — escala modular */
  --font-disp:'Archivo',system-ui,sans-serif;
  --font-text:'Barlow',system-ui,sans-serif;
  --fs-display:clamp(2.15rem,1.2rem + 3.4vw,5rem);
  --fs-h2:clamp(1.85rem,1.2rem + 2.3vw,2.95rem);
  --fs-h3:1.18rem;
  --fs-lead:clamp(1.05rem,1rem + .55vw,1.3rem);
  --fs-body:1rem;
  --fs-eyebrow:.75rem;
  --fs-caption:.85rem;

  /* espaço — grade 8pt */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* raios */
  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;

  /* elevação */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 10px 30px -12px rgba(0,0,0,.7);
  --sh-glow:0 20px 60px -20px rgba(227,27,35,.45);

  /* altura do header fixo (logo 54px + 14px padding × 2) */
  --header-h:82px;

  --container:1160px;
  --measure:64ch;
}

/* ---------- RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-text);background:var(--carvao);color:var(--text);
  line-height:1.6;overflow-x:hidden;max-width:100%;
  font-feature-settings:"ss01";text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-disp);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase}
.brasa{color:var(--brasa)}
::selection{background:var(--brasa);color:var(--on-brasa)}
:focus-visible{outline:2px solid var(--brasa-2);outline-offset:3px;border-radius:4px}

/* grafismo: aço escovado */
.brushed{background-image:repeating-linear-gradient(118deg,rgba(199,202,204,.045) 0 1px,transparent 1px 6px)}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
section{position:relative}

/* eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-disp);font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;font-size:var(--fs-eyebrow);color:var(--brasa);
}
.eyebrow--line::before{content:"";width:28px;height:1px;background:var(--brasa);flex:none}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:.92rem;line-height:1.1;padding:15px 24px;border-radius:var(--r);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .16s ease,transform .16s ease,border-color .16s ease;
  max-width:100%;white-space:normal;text-align:center;
}
.btn svg{width:20px;height:20px;flex:none}
.btn--primary{background:var(--brasa);color:var(--on-brasa);box-shadow:0 12px 40px -12px rgba(227,27,35,.55)}
.btn--primary svg{fill:var(--on-brasa)}
.btn--primary:hover{background:var(--brasa-2);transform:translateY(-2px)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--inox);background:rgba(199,202,204,.06)}
.btn--lg{font-size:1rem;padding:17px 28px}
.btn--block{width:100%;max-width:440px}

/* ---------- HEADER / NAV ---------- */
/* variação transparente sobre hero (home) + sólida nas internas via .site-header--solid */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:linear-gradient(180deg,rgba(10,10,10,.72),transparent);
  transition:background .25s ease,border-color .25s ease;
}
.site-header.is-scrolled,.site-header--solid{
  background:rgba(14,14,14,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  max-width:var(--container);margin-inline:auto;padding:14px clamp(20px,5vw,48px)}
/* logo é lockup quadrado (chama sobre lettering) — precisa de altura maior para o texto ficar legível */
.nav__logo img{height:54px}
@media(max-width:560px){.nav__logo img{height:46px}}
.nav__links{display:none;gap:var(--s6);font-family:var(--font-disp);font-weight:700;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.nav__links a{color:var(--muted);text-decoration:none;transition:color .16s;padding:4px 0;position:relative}
.nav__links a:hover{color:var(--text)}
.nav__links a.is-active{color:var(--text)}
.nav__links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--brasa)}
.nav .btn{padding:11px 18px;font-size:.8rem}

/* menu mobile */
.nav__toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin:-8px}
.nav__toggle span{width:24px;height:2px;background:var(--inox-hi);transition:.2s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__mobile{display:none;position:fixed;inset:64px 0 auto 0;z-index:59;
  background:rgba(10,10,10,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
  padding:var(--s5) clamp(20px,5vw,48px) var(--s7);}
.nav__mobile.is-open{display:block}
.nav__mobile a{display:block;font-family:var(--font-disp);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.05rem;color:var(--text);text-decoration:none;padding:var(--s4) 0;border-bottom:1px solid var(--border)}
.nav__mobile .btn{margin-top:var(--s5)}
@media(max-width:560px){.nav .btn--primary span{display:none}.nav .btn--primary{padding:11px 14px}}

/* ---------- HERO CINEMA (full-bleed) ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 68%;
  animation:heroZoom 26s ease-in-out infinite alternate;filter:saturate(.92) contrast(1.05)}
@keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.hero__bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(78deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.78) 34%,rgba(10,10,10,.25) 62%,rgba(10,10,10,.45) 100%)}
.hero__bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,10,10,.55) 0%,transparent 22%,transparent 55%,rgba(10,10,10,.96) 92%),
    radial-gradient(50% 40% at 82% 96%,rgba(227,27,35,.28),transparent 70%)}
/* padding-top = altura do header + folga → o conteúdo nunca sobe por baixo da nav,
   mesmo em telas baixas onde o hero estoura os 100vh */
.hero__inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;width:100%;
  padding:calc(var(--header-h) + var(--s6)) clamp(20px,5vw,48px) clamp(32px,5vw,44px)}
.hero__title{font-family:var(--font-disp);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(2.8rem,5.4vw,5rem);line-height:.96;margin:20px 0 22px;max-width:15ch;
  text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero__title em{font-style:normal;color:var(--brasa)}
.hero__sub{font-size:clamp(1.05rem,1rem + .5vw,1.22rem);line-height:1.55;color:var(--muted);max-width:52ch;margin-bottom:32px}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.hero__reassure{font-size:.85rem;color:var(--inox-lo)}

/* faixa de provas dentro do hero */
.provas{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.1);
  background:rgba(10,10,10,.55);backdrop-filter:blur(10px)}
.provas-in{max-width:var(--container);margin:0 auto;padding:18px clamp(20px,5vw,48px);display:flex;align-items:center;gap:28px}
.provas .titulo{font-family:var(--font-disp);font-weight:700;text-transform:uppercase;font-size:.72rem;
  letter-spacing:.18em;color:var(--inox-lo);flex:none;max-width:130px;line-height:1.5}
.provas .titulo b{color:var(--inox-hi)}
.thumbs{display:flex;gap:14px;flex:1}
.thumb{position:relative;flex:1;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12);text-decoration:none}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.thumb:hover img{transform:scale(1.07)}
.thumb span{position:absolute;left:10px;bottom:8px;z-index:2;font-family:var(--font-disp);font-weight:700;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65))}

/* mobile do hero cinema — portado da proposta 02 (sem isto o título estoura a tela) */
@media(max-width:900px){
  .hero__title{font-size:clamp(2.2rem,9vw,3.2rem);max-width:100%}
  .hero__sub{font-size:1.02rem;max-width:100%}
  .hero__ctas{flex-direction:column;align-items:stretch}
  .hero__ctas .btn{width:100%}
  .provas-in{flex-direction:column;align-items:flex-start;gap:14px}
  .provas .titulo{max-width:none}
  .thumbs{width:100%}
  .thumb span{display:none}
}
@media(max-width:560px){
  /* header encolhe junto com o logo de 46px */
  :root{--header-h:74px}
}

/* ---------- PAGE HERO (internas, compacto) ---------- */
.phero{position:relative;padding:calc(64px + clamp(48px,7vw,88px)) 0 clamp(40px,6vw,64px);overflow:hidden;
  background:
    radial-gradient(70% 60% at 82% 20%,rgba(227,27,35,.20),transparent 60%),
    radial-gradient(50% 40% at 6% 6%,rgba(227,27,35,.08),transparent 55%),
    var(--carvao)}
.phero h1{font-size:var(--fs-display);font-weight:900;max-width:16ch;margin-top:var(--s4);overflow-wrap:break-word}
.phero p{color:var(--muted);font-size:var(--fs-lead);margin-top:var(--s4);max-width:min(56ch,100%)}
.crumbs{font-family:var(--font-disp);font-weight:700;text-transform:uppercase;font-size:.72rem;
  letter-spacing:.14em;color:var(--inox-lo)}
.crumbs a{text-decoration:none;color:var(--inox-lo)}
.crumbs a:hover{color:var(--brasa)}
.crumbs span{color:var(--brasa)}

/* ---------- TRUST STRIP ---------- */
.trust{border-block:1px solid var(--border);background:var(--surface)}
.trust__row{display:grid;gap:var(--s4);grid-template-columns:1fr 1fr;padding:var(--s6) 0}
.trust__item{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.9rem;color:var(--inox)}
.trust__item svg{width:20px;height:20px;fill:var(--brasa);flex:none}

/* ---------- CABEÇALHO DE SEÇÃO ---------- */
.shead{max-width:52ch}
.shead h2{font-size:var(--fs-h2);font-weight:900;margin-top:var(--s3)}
.shead p{color:var(--muted);margin-top:var(--s4);max-width:min(var(--measure),100%)}
.shead--center{margin-inline:auto;text-align:center}

/* seções genéricas de espaçamento */
.sec{padding:clamp(56px,8vw,104px) 0}
.sec--surface{background:var(--surface)}
.sec--fade{background:linear-gradient(180deg,var(--surface),var(--carvao))}

/* ---------- PROBLEMA → VIRADA ---------- */
.shift__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px)}
.shift__list{list-style:none;margin-top:var(--s6);display:grid;gap:var(--s5)}
.shift__list li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start}
.shift__x{width:30px;height:30px;flex:none;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center}
.shift__x svg{width:16px;height:16px;stroke:var(--inox-lo);stroke-width:2.4;fill:none}
.shift__list h3{font-family:var(--font-disp);font-weight:800;font-size:1.02rem;text-transform:none;letter-spacing:0;margin-bottom:2px}
.shift__list p{color:var(--muted);font-size:.94rem}
.shift__panel{align-self:start;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,40px);position:relative;overflow:hidden;
  background:radial-gradient(90% 70% at 100% 0%,rgba(227,27,35,.16),transparent 60%),var(--surface-2)}
.shift__panel h3{font-family:var(--font-disp);font-weight:900;font-size:clamp(1.5rem,1rem+2vw,2.1rem);
  text-transform:uppercase;margin:var(--s3) 0 var(--s4);max-width:14ch}
.shift__panel p{color:var(--muted)}
.shift__panel .mark-wm{position:absolute;right:-30px;bottom:-40px;width:180px;opacity:.05;filter:brightness(0) invert(1)}

/* ---------- LINHA (bento) ---------- */
.lgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-top:var(--s7)}
.lcard{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--s6);position:relative;overflow:hidden;transition:border-color .18s ease,transform .18s ease}
.lcard:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.lcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .18s ease}
.lcard:hover::after{box-shadow:inset 0 0 0 1px rgba(227,27,35,.35)}
.lcard__icon{width:56px;height:56px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80% 80% at 50% 20%,rgba(227,27,35,.18),transparent 70%),var(--surface-3);border:1px solid var(--border)}
.lcard__icon svg{width:30px;height:30px;fill:none;stroke:var(--inox);stroke-width:1.7}
.lcard h3{font-family:var(--font-disp);font-weight:800;font-size:1.22rem;text-transform:uppercase;margin:var(--s5) 0 var(--s3)}
.lcard p{color:var(--muted);font-size:.94rem}
.lcard ul{list-style:none;margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:8px}
.lcard li{font-family:var(--font-disp);font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--inox);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:5px 12px}
.lcard--feat{background:radial-gradient(70% 100% at 100% 100%,rgba(227,27,35,.14),transparent 62%),var(--surface)}
.lcard--feat .badge{position:absolute;top:var(--s5);right:var(--s5);font-family:var(--font-disp);
  font-weight:800;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brasa);
  border:1px solid rgba(227,27,35,.4);border-radius:var(--r-pill);padding:4px 10px}
.linha__cta{margin-top:var(--s7)}

/* card de produto com imagem (a-linha) */
.pcard{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease}
.pcard:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.pcard__img{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--carvao-0)}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .pcard__img img{transform:scale(1.06)}
.pcard__badge{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-disp);font-weight:800;
  font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-brasa);background:var(--brasa);
  border-radius:var(--r-pill);padding:5px 12px}
.pcard__body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.pcard__body h3{font-family:var(--font-disp);font-weight:800;font-size:1.22rem;text-transform:uppercase}
.pcard__body p{color:var(--muted);font-size:.94rem}
.pcard__body ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:var(--s4)}
.pcard__body li{font-family:var(--font-disp);font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--inox);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:5px 12px}
.pcard__foot{padding:0 var(--s6) var(--s6)}
/* grade do catálogo — declarada aqui (antes dos breakpoints) para não ser sobrescrita por ordem */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s7)}

/* ---------- SPECS ---------- */
.specs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s7)}
.spec{border-top:2px solid var(--border-strong);padding-top:var(--s5)}
.spec .n{font-family:var(--font-disp);font-weight:900;font-size:clamp(2.6rem,1.6rem+3vw,3.6rem);
  color:var(--brasa);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.spec h3{font-family:var(--font-disp);font-weight:800;font-size:1.02rem;text-transform:none;letter-spacing:0;margin:var(--s4) 0 var(--s2)}
.spec p{color:var(--muted);font-size:.92rem}

/* ---------- PASSOS ---------- */
.sgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);margin-top:var(--s7);counter-reset:step;position:relative}
.step{position:relative;counter-increment:step;padding-left:60px}
.step::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;
  background:var(--brasa);color:var(--on-brasa);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-disp);font-weight:900;font-size:1.05rem}
.step h3{font-family:var(--font-disp);font-weight:800;font-size:1.1rem;text-transform:none;letter-spacing:0;margin-bottom:var(--s2);padding-top:6px}
.step p{color:var(--muted);font-size:.95rem}

/* ---------- GARANTIA ---------- */
.warranty__box{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch;
  background:radial-gradient(80% 120% at 0% 0%,rgba(227,27,35,.14),transparent 55%),var(--surface)}
.warranty__main{padding:clamp(32px,5vw,56px)}
.warranty__main h2{font-size:var(--fs-h2);font-weight:900;max-width:16ch}
.warranty__main p{color:var(--muted);margin-top:var(--s4);max-width:min(52ch,100%)}
.warranty__aside{padding:clamp(28px,4vw,40px);border-top:1px solid var(--border);
  display:grid;gap:var(--s5);align-content:center;background:var(--surface-2)}
.warranty__pt{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start}
.warranty__pt svg{width:24px;height:24px;fill:var(--brasa);flex:none;margin-top:2px}
.warranty__pt b{display:block;font-family:var(--font-disp);font-weight:800;text-transform:uppercase;font-size:.86rem;letter-spacing:.02em}
.warranty__pt span{color:var(--muted);font-size:.9rem}

/* ---------- GALERIA (projetos) ---------- */
.gal{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-top:var(--s7)}
.gitem{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--carvao-0)}
.gitem img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s ease}
.gitem:hover img{transform:scale(1.05)}
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72));pointer-events:none}
.gitem figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.gitem figcaption b{display:block;font-family:var(--font-disp);font-weight:800;text-transform:uppercase;font-size:.92rem;color:#fff}
.gitem figcaption span{color:var(--inox);font-size:.82rem}
.gitem--tall{grid-row:span 2}
.gitem--tall img{aspect-ratio:auto;height:100%}

/* ---------- FAQ ---------- */
/* ancorado em .faq__list (container real no HTML), não em .faq */
.faq__list{margin-top:var(--s7);max-width:820px}
.faq__list details{border-bottom:1px solid var(--border);background:transparent}
.faq__list summary{list-style:none;cursor:pointer;padding:var(--s5) 0;font-family:var(--font-disp);font-weight:700;font-size:1.04rem;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);color:var(--text)}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"";width:20px;height:20px;flex:none;background:var(--brasa);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__list details p{padding:0 0 var(--s6);color:var(--muted);font-size:.96rem;max-width:70ch}

/* ---------- CONTATO ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px);margin-top:var(--s7)}
.contact__card{border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(28px,4vw,40px);background:var(--surface)}
.contact__list{list-style:none;display:grid;gap:var(--s5);margin-top:var(--s5)}
.contact__list li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start}
.contact__ico{width:44px;height:44px;flex:none;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80% 80% at 50% 20%,rgba(227,27,35,.18),transparent 70%),var(--surface-3);border:1px solid var(--border)}
.contact__ico svg{width:22px;height:22px;fill:var(--brasa)}
.contact__list b{display:block;font-family:var(--font-disp);font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;color:var(--inox)}
.contact__list a,.contact__list span{color:var(--text);text-decoration:none;font-size:1.05rem}
.contact__list a:hover{color:var(--brasa)}

/* ---------- CTA FINAL ---------- */
.final{padding:clamp(64px,9vw,120px) 0;text-align:center;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 120%,rgba(227,27,35,.42),rgba(227,27,35,.08) 46%,transparent 68%),var(--carvao)}
.final h2{font-size:clamp(2rem,1.2rem+3vw,3.2rem);font-weight:900;max-width:16ch;margin:0 auto var(--s3)}
.final p{color:var(--muted);margin-bottom:var(--s6);max-width:44ch;margin-inline:auto}
.final__reassure{margin-top:var(--s5);font-size:var(--fs-caption);color:var(--faint)}

/* ---------- FOOTER ---------- */
.site-footer{background:#080808;border-top:1px solid var(--border);padding:var(--s8) 0 var(--s6);font-size:.9rem}
/* mobile: empilhado · ≥680px: 2 colunas · ≥900px: 3 colunas (ver breakpoints) */
.fgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);align-items:start}
.site-footer .flogo{height:76px;margin-bottom:var(--s4)}
.site-footer .col p{color:var(--muted);max-width:38ch}
.site-footer .col h4{font-family:var(--font-disp);font-weight:700;text-transform:uppercase;font-size:.76rem;
  letter-spacing:.14em;color:var(--inox);margin-bottom:var(--s4)}
.site-footer .col a{color:var(--muted);text-decoration:none;display:block;margin-bottom:8px;transition:color .16s;width:fit-content}
.site-footer .col a:hover{color:var(--brasa)}
.credit{border-top:1px solid var(--border);margin-top:var(--s7);padding-top:var(--s5);
  text-align:center;color:var(--faint);font-size:.8rem}
.credit b{color:var(--inox)}

/* ---------- FLOAT WHATS ---------- */
.float{position:fixed;right:16px;bottom:16px;z-index:80;background:#25D366;width:56px;height:56px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,.5);transition:transform .16s ease}
.float:hover{transform:scale(1.06)}
.float svg{width:30px;height:30px;fill:#fff}

/* ---------- ANIMAÇÕES DE ENTRADA (hero) ---------- */
.entra{opacity:0;transform:translateY(24px);animation:entra .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}.d5{animation-delay:.6s}
@keyframes entra{to{opacity:1;transform:none}}

/* reveal on scroll — só esconde se o JS estiver vivo (senão o conteúdo sumiria de vez) */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- BREAKPOINTS ---------- */
@media(min-width:680px){
  .trust__row{grid-template-columns:repeat(4,1fr)}
  .warranty__box{grid-template-columns:1.4fr 1fr}
  .warranty__aside{border-top:none;border-left:1px solid var(--border)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .contact__grid{grid-template-columns:1.1fr .9fr}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  /* footer tablet: descrição em cima (linha inteira), links lado a lado */
  .fgrid{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .fgrid .col:first-child{grid-column:1/-1}
}
@media(min-width:1100px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:900px){
  .nav__links{display:flex}
  .nav__toggle{display:none}
  .shift__grid{grid-template-columns:1fr 1fr;align-items:center}
  .lgrid{grid-template-columns:repeat(2,1fr)}
  .lcard--feat{grid-column:span 2}
  .lcard--feat .lcard__inner{display:grid;grid-template-columns:auto 1fr;gap:var(--s7);align-items:center}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .specs{grid-template-columns:repeat(4,1fr);gap:var(--s6)}
  .sgrid{grid-template-columns:repeat(3,1fr);gap:var(--s7)}
  .sgrid::before{content:"";position:absolute;top:20px;left:8%;right:8%;height:1px;
    background:linear-gradient(90deg,transparent,var(--border-strong) 15%,var(--border-strong) 85%,transparent)}
  .gal{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
  .float{width:62px;height:62px;right:26px;bottom:26px}
  /* footer desktop: 3 colunas — marca mais larga + navegação + contato */
  .fgrid{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s8)}
  .fgrid .col:first-child{grid-column:auto}
}
/* respeita redução de movimento */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto}
  .entra,.reveal{opacity:1;transform:none}
}