/* ==========================================================================
   VideosuZ — folha de estilo única
   Todos os valores vêm de SPECS_DESIGN.md. Nada de valor solto.
   ========================================================================== */

:root{
  /* Cor — ação */
  --cor-acao:#B03A2B;
  --cor-acao-hover:#8E2E22;
  --cor-acao-clara:#E8705F;

  /* Cor — base escura */
  --cor-base:#1A100E;
  --cor-base-2:#241713;

  /* Cor — superfícies e texto */
  --cor-superficie:#FFFFFF;
  --cor-superficie-alt:#F8F5F4;
  --cor-texto:#1A1310;
  --cor-texto-suave:#6B5B56;
  --cor-texto-inverso:#FFFFFF;
  --cor-borda:#E8E1DF;
  --cor-sucesso:#1EA362;
  --cor-sucesso-hover:#17834E;

  /* Cor — exclusiva da logo */
  --cor-logo-fundo:#8B382A;

  /* Tipografia */
  --font-titulo:"IBM Plex Serif",Georgia,serif;
  --font-corpo:"IBM Plex Sans",system-ui,-apple-system,sans-serif;

  --fs-hero:clamp(2.25rem,6vw,4rem);
  --fs-h2:clamp(1.75rem,4vw,2.75rem);
  --fs-h3:clamp(1.25rem,2.5vw,1.625rem);
  --fs-h4:1.125rem;
  --fs-body-lg:clamp(1.0625rem,1.5vw,1.1875rem);
  --fs-body:1rem;
  --fs-small:0.875rem;
  --fs-kicker:0.8rem;
  --fs-numero:clamp(2rem,5vw,3.25rem);
  --fs-credencial:clamp(1.375rem,3.4vw,2rem);

  /* Espaçamento — escala base 8 */
  --esp-1:4px;  --esp-2:8px;  --esp-3:16px; --esp-4:24px; --esp-5:32px;
  --esp-6:48px; --esp-7:64px; --esp-8:96px; --esp-9:128px;

  --pad-secao:clamp(56px,9vw,128px);
  --container:1200px;
  --respiro:clamp(20px,5vw,40px);

  /* Raios */
  --raio-sm:6px; --raio-md:10px; --raio-lg:16px; --raio-full:999px;

  /* Sombras */
  --sombra-card:0 1px 2px rgba(26,16,14,.06),0 8px 24px rgba(26,16,14,.06);
  --sombra-flutuante:0 6px 20px rgba(26,16,14,.22);

  --transicao:180ms cubic-bezier(.2,.8,.2,1);
  --altura-cabecalho:76px;
}

/* -------------------------------------------------------------- base ---- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--cor-superficie);
  color:var(--cor-texto);
  font-family:var(--font-corpo);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--font-titulo);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0;
}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}

p{margin:0 0 var(--esp-3)}
p:last-child{margin-bottom:0}

a{color:var(--cor-acao)}

:focus-visible{
  outline:3px solid var(--cor-acao);
  outline-offset:2px;
  border-radius:var(--raio-sm);
}
.hero :focus-visible,.faixa :focus-visible,.depo :focus-visible,
.cobertura :focus-visible,.rodape :focus-visible,.cabecalho :focus-visible{
  outline-color:var(--cor-acao-clara);
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--respiro);
}

.pular{
  position:absolute;left:var(--esp-3);top:-100px;z-index:100;
  background:var(--cor-acao);color:var(--cor-texto-inverso);
  padding:var(--esp-2) var(--esp-3);border-radius:var(--raio-md);
  text-decoration:none;font-weight:600;transition:top var(--transicao);
}
.pular:focus{top:var(--esp-3)}

/* ---------------------------------------------------------- tipografia -- */
.kicker{
  font-family:var(--font-corpo);
  font-size:var(--fs-kicker);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--cor-acao);
  margin:0 0 var(--esp-2);
}
.kicker--claro{color:var(--cor-acao-clara)}

.lead,.secao__lead{
  font-size:var(--fs-body-lg);
  color:var(--cor-texto-suave);
  max-width:60ch;
}
.secao__lead--claro{color:rgba(255,255,255,.82)}

/* ------------------------------------------------------------ botões ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);
  min-height:48px;padding:14px 28px;
  border:2px solid transparent;border-radius:var(--raio-md);
  font-family:var(--font-corpo);font-size:var(--fs-body);font-weight:600;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color var(--transicao),color var(--transicao),
             transform var(--transicao),box-shadow var(--transicao);
}
.btn--grande{padding:16px 32px}

.btn--primario{background:var(--cor-acao);color:var(--cor-texto-inverso)}
.btn--primario:hover{background:var(--cor-acao-hover);transform:translateY(-1px)}

.btn--secundario{background:transparent;border-color:var(--cor-acao);color:var(--cor-acao)}
.btn--secundario:hover{background:var(--cor-acao);color:var(--cor-texto-inverso)}
.btn--claro{border-color:var(--cor-texto-inverso);color:var(--cor-texto-inverso)}
.btn--claro:hover{background:var(--cor-texto-inverso);color:var(--cor-texto)}

.btn--whats{background:var(--cor-sucesso);color:var(--cor-texto-inverso)}
.btn--whats:hover{background:var(--cor-sucesso-hover);transform:translateY(-1px)}

.ico-whats{width:20px;height:20px;fill:currentColor;flex:none}

/* ---------------------------------------------------------- cabeçalho --- */
.cabecalho{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:var(--cor-base);
  transition:box-shadow var(--transicao);
}
.cabecalho--rolado{box-shadow:0 2px 16px rgba(26,16,14,.35)}

.cabecalho__interno{
  display:flex;align-items:center;gap:var(--esp-4);
  min-height:var(--altura-cabecalho);
}
.cabecalho__logo{display:block;flex:none;line-height:0}
.cabecalho__logo img{height:48px;width:auto;border-radius:var(--raio-md)}

.menu{margin-left:auto}
.menu ul{display:flex;gap:var(--esp-4);list-style:none;margin:0;padding:0}
.menu a{
  color:var(--cor-texto-inverso);text-decoration:none;font-weight:500;
  font-size:var(--fs-small);padding:var(--esp-2) 0;display:block;
  border-bottom:2px solid transparent;transition:color var(--transicao),border-color var(--transicao);
}
.menu a:hover,.menu a.ativo{color:var(--cor-acao-clara);border-bottom-color:var(--cor-acao-clara)}

.cabecalho__cta{flex:none;padding:12px 20px;min-height:44px;font-size:var(--fs-small)}

.hamburguer{
  display:none;flex:none;width:48px;height:48px;
  background:transparent;border:1px solid rgba(255,255,255,.25);
  border-radius:var(--raio-md);cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.hamburguer span{display:block;width:22px;height:2px;background:#fff;transition:transform var(--transicao),opacity var(--transicao)}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------------- hero --- */
.hero{
  position:relative;
  background:var(--cor-base);
  color:var(--cor-texto-inverso);
  padding-top:calc(var(--altura-cabecalho) + var(--esp-7));
  padding-bottom:var(--esp-8);
  overflow:hidden;
}
.hero__foto{position:absolute;inset:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(26,16,14,.96) 0%,
    rgba(26,16,14,.90) 38%,
    rgba(26,16,14,.62) 62%,
    rgba(26,16,14,.42) 100%);
}
.hero__interno{position:relative}
.hero__texto{max-width:620px}
.hero h1{margin-bottom:var(--esp-3)}

/* Credencial do hero — placa de autoridade acima do H1.
   Substitui o kicker nesta seção: precisa de peso, não de sussurro. */
.credencial{
  display:inline-flex;flex-direction:column;gap:var(--esp-2);
  max-width:100%;
  border-left:4px solid var(--cor-acao-clara);
  background:rgba(255,255,255,.07);
  border-radius:var(--raio-md);
  padding:var(--esp-3) var(--esp-4);
  margin:0 0 var(--esp-4);
}
.credencial__selo{
  display:flex;align-items:center;gap:var(--esp-2);
  font-size:var(--fs-credencial);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.15;
  /* Vermelho CLARO: o escuro dá 3,1:1 sobre o hero e reprova (SPECS_DESIGN §2) */
  color:var(--cor-acao-clara);
}
.credencial__selo svg{width:1.15em;height:1.15em;flex:none}
.credencial__apoio{
  font-size:var(--fs-body);font-weight:600;line-height:1.45;
  color:var(--cor-texto-inverso);
}
.hero .lead{color:rgba(255,255,255,.88);margin-bottom:var(--esp-5)}
.hero .lead strong{color:var(--cor-texto-inverso)}

.hero__acoes{display:flex;gap:var(--esp-3);flex-wrap:wrap;margin-bottom:var(--esp-5)}

.hero__nota{
  display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap;
  font-size:var(--fs-small);color:rgba(255,255,255,.78);margin:0;
}
.hero__nota strong{font-size:var(--fs-h4);color:var(--cor-texto-inverso)}
.estrelas{color:var(--cor-acao-clara);letter-spacing:.1em}

/* ------------------------------------------------------------- faixa ---- */
.faixa{background:var(--cor-superficie-alt);padding:var(--esp-6) 0;border-bottom:1px solid var(--cor-borda)}
.faixa__grade{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--esp-5) var(--esp-4);text-align:center}
.faixa__num{
  font-family:var(--font-titulo);font-weight:700;font-size:var(--fs-numero);
  color:var(--cor-acao);line-height:1;margin:0 0 var(--esp-2);
}
.faixa__rot{font-size:var(--fs-small);color:var(--cor-texto-suave);margin:0;max-width:24ch;margin-inline:auto}

/* ------------------------------------------------------------- seções --- */
.secao{padding:var(--pad-secao) 0}
.secao--alt{background:var(--cor-superficie-alt)}

.secao__cabeca{margin-bottom:var(--esp-6);max-width:720px}
.secao__cabeca--centro{margin-inline:auto;text-align:center}
.secao__cabeca h2{
  padding-left:var(--esp-3);
  border-left:4px solid var(--cor-acao);
  margin-bottom:var(--esp-3);
}
.secao__cabeca--centro h2{border-left:0;padding-left:0}
.secao__cabeca--centro h2::after{
  content:"";display:block;width:64px;height:4px;background:var(--cor-acao-clara);
  margin:var(--esp-3) auto 0;border-radius:var(--raio-full);
}
.secao__cabeca--centro .secao__lead{margin-inline:auto}

/* -------------------------------------------------------------- cards --- */
.cards{
  display:grid;grid-template-columns:1fr;gap:var(--esp-4);
  list-style:none;margin:0;padding:0;
}
.card{
  display:flex;flex-direction:column;
  background:var(--cor-superficie);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio-lg);
  box-shadow:var(--sombra-card);
  padding:var(--esp-5);
  transition:transform var(--transicao),border-color var(--transicao),box-shadow var(--transicao);
}
.card:hover{transform:translateY(-2px);border-color:var(--cor-acao)}
.card__ico{width:40px;height:40px;color:var(--cor-acao);margin-bottom:var(--esp-3)}
.card h3{margin-bottom:var(--esp-2)}
.card p{color:var(--cor-texto-suave);font-size:var(--fs-small);flex:1}
.card__link{
  display:inline-flex;align-items:center;align-self:flex-start;
  min-height:44px;                      /* alvo de toque (WCAG 2.5.8) */
  font-weight:600;font-size:var(--fs-small);text-decoration:none;
  margin-top:var(--esp-2);
}
.card__link::after{content:" →"}
.card__link:hover{text-decoration:underline}

/* ------------------------------------------------------------- blocos --- */
.blocos{display:flex;flex-direction:column;gap:var(--esp-8)}
.bloco{display:grid;gap:var(--esp-4);scroll-margin-top:calc(var(--altura-cabecalho) + var(--esp-4))}
.bloco__foto img{border-radius:var(--raio-lg);width:100%}
.bloco__texto h3{margin-bottom:var(--esp-3)}
.bloco__texto p{color:var(--cor-texto-suave)}
.bloco__destaque{
  background:var(--cor-superficie);
  border-left:4px solid var(--cor-acao);
  border-radius:var(--raio-md);
  padding:var(--esp-3);
  color:var(--cor-texto) !important;
  font-size:var(--fs-small);
}
.bloco .btn{margin-top:var(--esp-4)}

/* -------------------------------------------------------------- venda --- */
.venda{display:grid;gap:var(--esp-5)}
.venda__foto img{border-radius:var(--raio-lg);width:100%}
.venda__texto h2{margin-bottom:var(--esp-3)}
.venda__texto>p{color:var(--cor-texto-suave)}

.lista-marcada{list-style:none;margin:var(--esp-4) 0;padding:0}
.lista-marcada li{position:relative;padding-left:var(--esp-4);margin-bottom:var(--esp-2);font-size:var(--fs-small)}
.lista-marcada li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:8px;height:8px;border-radius:var(--raio-full);background:var(--cor-acao);
}

/* -------------------------------------------------------- diferenciais -- */
.difs{display:grid;grid-template-columns:1fr;gap:var(--esp-4);list-style:none;margin:0;padding:0}
.dif{
  display:flex;gap:var(--esp-3);align-items:flex-start;
  padding-bottom:var(--esp-4);border-bottom:1px solid var(--cor-borda);
}
.dif svg{width:32px;height:32px;color:var(--cor-acao);flex:none;margin-top:2px}
.dif h3{font-size:var(--fs-h4);font-family:var(--font-corpo);font-weight:600;margin-bottom:var(--esp-1)}
.dif p{color:var(--cor-texto-suave);font-size:var(--fs-small);margin:0}

/* ---------------------------------------------------------- cobertura --- */
.cobertura{background:var(--cor-base);color:var(--cor-texto-inverso)}
.cobertura h2{margin-bottom:var(--esp-3)}
.cobertura p{color:rgba(255,255,255,.82);max-width:60ch}
.cobertura strong{color:var(--cor-texto-inverso)}
.cobertura .btn{margin-top:var(--esp-4)}

/* -------------------------------------------------------- depoimentos --- */
.depo{background:var(--cor-base-2);color:var(--cor-texto-inverso)}
.depos{display:grid;grid-template-columns:1fr;gap:var(--esp-4);list-style:none;margin:0;padding:0}
.depo__card{
  background:var(--cor-base);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--raio-lg);
  padding:var(--esp-5);
  position:relative;
}
.depo__card::before{
  content:"\201C";
  font-family:var(--font-titulo);font-size:3.5rem;line-height:1;
  color:var(--cor-acao-clara);display:block;margin-bottom:var(--esp-1);
}
.depo__texto{color:rgba(255,255,255,.90);font-size:var(--fs-small);margin-bottom:var(--esp-4)}
.depo__autor{font-weight:600;margin:0;font-size:var(--fs-small)}
.depo__autor span{display:block;font-weight:400;color:var(--cor-acao-clara);font-size:.8125rem}

/* ------------------------------------------------------------ contato --- */
.contato{display:grid;gap:var(--esp-6)}
.contato__texto h2{margin-bottom:var(--esp-3)}
.contato__texto .secao__lead{margin-bottom:var(--esp-4)}

.contato__dados{margin:var(--esp-5) 0 0;display:grid;gap:var(--esp-4)}
.contato__dados div{border-top:1px solid var(--cor-borda);padding-top:var(--esp-3)}
.contato__dados dt{font-weight:600;font-size:var(--fs-small);margin-bottom:var(--esp-1)}
.contato__dados dd{margin:0;color:var(--cor-texto-suave);font-size:var(--fs-small)}
.contato__dados dd a{
  display:inline-flex;align-items:center;min-height:24px;   /* alvo de toque */
}

.mapa{
  position:relative;aspect-ratio:4/3;background:var(--cor-base-2);
  border-radius:var(--raio-lg);overflow:hidden;display:grid;place-items:center;
}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.mapa__botao{
  display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);
  background:transparent;border:0;color:var(--cor-texto-inverso);
  font-family:var(--font-corpo);font-size:var(--fs-small);font-weight:600;
  cursor:pointer;padding:var(--esp-4);
}
.mapa__botao svg{width:40px;height:40px;color:var(--cor-acao-clara)}
.mapa__botao:hover svg{color:var(--cor-texto-inverso)}
.mapa__nota{font-size:.8125rem;color:var(--cor-texto-suave);margin-top:var(--esp-2)}

/* ------------------------------------------------------------- rodapé --- */
.rodape{background:var(--cor-base);color:var(--cor-texto-inverso);padding-top:var(--esp-8)}
.rodape__grade{display:grid;gap:var(--esp-6);padding-bottom:var(--esp-6)}
.rodape__logo{height:52px;width:auto;border-radius:var(--raio-md);margin-bottom:var(--esp-3)}
.rodape__sobre{color:rgba(255,255,255,.72);font-size:var(--fs-small);max-width:38ch}
.rodape__insta{
  display:inline-flex;align-items:center;gap:var(--esp-2);
  min-height:44px;                       /* alvo de toque */
  color:var(--cor-acao-clara);text-decoration:none;font-size:var(--fs-small);
  font-weight:500;margin-top:var(--esp-2);
}
.rodape__insta svg{width:20px;height:20px}
.rodape__insta:hover{color:var(--cor-texto-inverso)}

.rodape__tit{
  font-family:var(--font-corpo);font-size:var(--fs-kicker);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--cor-acao-clara);
  margin:0 0 var(--esp-3);
}
.rodape__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--esp-1)}
.rodape__lista li{font-size:var(--fs-small);color:rgba(255,255,255,.72);min-height:24px;display:flex;align-items:center}
.rodape__lista a{
  color:rgba(255,255,255,.72);text-decoration:none;
  display:inline-flex;align-items:center;min-height:28px;   /* alvo de toque */
}
.rodape__lista a:hover{color:var(--cor-texto-inverso);text-decoration:underline}

.rodape__base{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:var(--esp-4);padding-bottom:var(--esp-6);
}
.rodape__base p{font-size:.8125rem;color:rgba(255,255,255,.55);margin:0}

/* ---------------------------------------------------------- flutuante --- */
.flutuantes{
  position:fixed;right:var(--esp-4);bottom:var(--esp-4);z-index:40;
  display:flex;align-items:center;gap:var(--esp-2);
}
.flutuante{
  width:56px;height:56px;border-radius:var(--raio-full);
  color:var(--cor-texto-inverso);
  display:grid;place-items:center;box-shadow:var(--sombra-flutuante);
  transition:background-color var(--transicao),transform var(--transicao);
}
.flutuante:hover{transform:translateY(-2px)}

/* WhatsApp: verde de reconhecimento de canal. É o botão de conversão. */
.flutuante--whats{background:var(--cor-sucesso)}
.flutuante--whats svg{width:30px;height:30px;fill:currentColor}
.flutuante--whats:hover{background:var(--cor-sucesso-hover)}

/* Instagram: preto quente da marca. Secundário por decisão de hierarquia —
   o degradê oficial brigaria com o vermelho (ver SPECS_DESIGN §14). */
.flutuante--insta{background:var(--cor-base)}
.flutuante--insta svg{width:26px;height:26px}
.flutuante--insta:hover{background:var(--cor-acao)}

/* -------------------------------------------------------- animações ----- */
.animar{opacity:0;transform:translateY(16px);transition:opacity 400ms cubic-bezier(.2,.8,.2,1),transform 400ms cubic-bezier(.2,.8,.2,1)}
.animar.visivel{opacity:1;transform:none}

/* ======================================================== ≥ 600px ======= */
@media (min-width:600px){
  .faixa__grade{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .hero__acoes .btn{flex:none}
}

/* ======================================================== ≥ 900px ======= */
@media (min-width:900px){
  :root{--altura-cabecalho:84px}

  .cards{grid-template-columns:repeat(3,1fr)}
  .difs{grid-template-columns:repeat(2,1fr) ;gap:var(--esp-4) var(--esp-6)}

  .bloco{grid-template-columns:1fr 1fr;gap:var(--esp-6);align-items:center}
  .bloco--invertido .bloco__foto{order:2}

  .venda{grid-template-columns:1fr 1fr;gap:var(--esp-6);align-items:center}
  .contato{grid-template-columns:1.1fr .9fr;gap:var(--esp-7);align-items:start}
  .contato__dados{grid-template-columns:repeat(2,1fr)}

  .depos{grid-template-columns:repeat(2,1fr)}
  .rodape__grade{grid-template-columns:1.4fr 1fr 1fr;gap:var(--esp-7)}

  .hero{padding-bottom:var(--esp-9)}
}

/* ======================================================== < 900px ======= */
@media (max-width:899px){
  .hamburguer{display:flex}
  .cabecalho__cta span{display:none}
  .cabecalho__cta{padding:12px;width:44px;min-width:44px}
  .cabecalho__logo img{height:40px}
  .cabecalho__interno{gap:var(--esp-2)}

  .menu{
    position:fixed;inset:var(--altura-cabecalho) 0 auto 0;
    background:var(--cor-base);
    border-top:1px solid rgba(255,255,255,.10);
    padding:var(--esp-4) var(--respiro) var(--esp-5);
    margin:0;
    transform:translateY(-120%);
    transition:transform var(--transicao);
    max-height:calc(100vh - var(--altura-cabecalho));
    overflow-y:auto;
  }
  .menu.aberto{transform:translateY(0)}
  .menu ul{flex-direction:column;gap:0}
  .menu a{padding:var(--esp-3) 0;font-size:var(--fs-body);border-bottom:1px solid rgba(255,255,255,.08)}
  .menu a:hover,.menu a.ativo{border-bottom-color:rgba(255,255,255,.08)}

  .credencial{padding:var(--esp-3);gap:var(--esp-1)}
  .credencial__apoio{font-size:var(--fs-small)}

  .hero__acoes{flex-direction:column;align-items:stretch}
  .hero__acoes .btn{width:100%}
  .venda .btn,.cobertura .btn,.contato .btn--whats{width:100%}

  .flutuantes{right:var(--esp-3);bottom:var(--esp-3)}
  .flutuante{width:52px;height:52px}
  .flutuante--whats svg{width:28px;height:28px}
  .flutuante--insta svg{width:24px;height:24px}
}

/* ==================================== movimento reduzido (obrigatório) == */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .animar{opacity:1;transform:none}
}