/* Import VipClub: faixas de cor de ponta a ponta (preto, branco, concreto, vermelho, azul-marinho do TTD), conteúdo em 1280px.
   Visual único da marca, igual nos dois temas do visualizador. */
:root{
  --ink:#141414;
  --ink-2:#242424;
  --navy:#1F2F52;
  --paper:#FFFFFF;
  --paper-2:#F7F7F7;
  --soft:#F4F4F4;
  --ph:#E9E9E9;
  --text:#3F3F3F;
  --line:#8A8A8A;
  --line-soft:#C9C9C9;
  --track:#D9D9D9;
  --red:#E30613;
  --red-dark:#B8050F;
  --font:'Mona Sans','Helvetica Neue',Arial,sans-serif;
  --wrap:1280px;
  --r-card:28px;
  --r-ctl:7px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--ink)}
a:hover{color:var(--red)}
h1,h2,h3{text-wrap:balance;font-weight:800}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
section[id]{scroll-margin-top:16px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (max-width:480px){.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.band{padding-block:96px}
@media (max-width:640px){.band{padding-block:64px}}
.h2{margin:0;font-size:clamp(32px,4.6vw,64px);line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
.h2.sm{font-size:clamp(30px,3.8vw,52px);line-height:1.06}
.contorno{color:transparent;-webkit-text-stroke:1.5px var(--paper)}
.concreto{background:#BDBDBD url(img/concreto.jpg) center/cover}

.btn{font:inherit;font-weight:700;min-height:50px;padding:14px 26px;border-radius:var(--r-ctl);border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:var(--paper)}
.btn:hover{background:var(--red-dark);color:var(--paper)}
.btn.light{background:var(--paper);color:var(--ink)}
.btn.light:hover{background:var(--ink);color:var(--paper)}
.btn.big{padding:17px 28px}

/* Cabeçalho */
.top{background:var(--ink)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-block:14px}
.top .logo{margin-right:auto;display:block}
.top .logo img{height:52px;width:auto;display:block}
.menu a{color:var(--paper);text-decoration:none;font-size:15px;font-weight:500;padding:10px 0;display:inline-flex;align-items:center;min-height:44px}
.menu a:hover{color:var(--paper);text-decoration:underline}
.menu a.btn{font-weight:700;padding:12px 20px;text-decoration:none}
.menu a.btn:hover{text-decoration:none}
.top .wa{color:var(--paper);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.top .wa:hover{color:var(--paper);text-decoration:underline}
@media (max-width:820px){
  .menu .txt{font-size:14px}
  .top .wrap{gap:4px 18px}
}
@media (max-width:480px){.top .logo img{height:40px}.top .wa span{display:none}}

/* Hero com foto */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .wrap{position:relative}

/* Cartões */
.card-glass{background:rgba(255,255,255,.88);border:1px solid var(--paper);border-radius:var(--r-card);padding:30px}
.card-glass h3{margin:0 0 8px;font-size:24px;line-height:1.16;color:var(--ink)}
.card-glass p{margin:0}
.grid{display:grid;gap:16px;margin-top:40px}

/* FAQ */
.faq details{border-top:1px solid var(--ink);padding:18px 0}
.faq details:last-of-type{border-bottom:1px solid var(--ink)}
.faq summary{cursor:pointer;font-weight:700;font-size:19px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:32px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{margin:10px 0 0;max-width:68ch}

/* Faixa vermelha de CTA */
.cta{background:var(--red);color:var(--paper)}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-block:72px}
.cta .h2{flex:1 1 480px;color:var(--paper)}

/* Formulários */
.field{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:var(--ink)}
.field input,.field select{font:inherit;font-weight:400;font-size:16px;color:var(--ink);min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--paper);width:100%}
.field input:focus,.field select:focus{outline:2px solid var(--red);outline-offset:1px}
.field .err{font-weight:500;font-size:13px;color:var(--red-dark)}
.field.invalid input{border-color:var(--red)}
.privacy{margin:0;font-size:13px}

/* Rodapé */
.foot{background:var(--ink);color:var(--paper-2);font-size:15px}
.foot a{color:var(--paper)}
.foot a:hover{color:var(--paper)}
.foot strong{color:var(--paper)}
