/* Rodada 3 · Final (base A2 · Aço) — molde: hero, planos e contato vêm do painel. */

/* ---- Estrutura comum da rodada 2 (conceito A · Punho Firme) ---- */

.brand{line-height:0}
.brand__logo{height:auto;width:clamp(124px,13vw,156px)}
.brand--ft .brand__logo{width:clamp(170px,19vw,210px)}
.hdr__nav a{font-family:var(--fonte-titulo);font-weight:700;font-style:italic}
.hdr__cta{border-color:var(--primaria)}

.red{color:var(--acento)}
.kicker{font-style:italic;font-weight:700;color:var(--acento)}
.sec-title{font-style:italic;font-weight:900;letter-spacing:-.01em;font-size:clamp(2.1rem,5.4vw,3.8rem)}
.btn{font-style:italic;font-weight:800;border-radius:4px;transform:skewX(-8deg)}
.btn:hover{transform:skewX(-8deg) translateY(-2px)}
.btn--primary{color:#fff}
.btn--ghost{border-color:color-mix(in srgb,var(--texto) 34%,transparent)}
.btn--light{background:#fff;color:#0B0B0C}

/* ---- HERO ---- */
.hero{min-height:92vh;display:flex;align-items:center;overflow:hidden}
.hero__luz{position:absolute;inset:0;pointer-events:none}
.hero__inner{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,5vw,60px);
  align-items:center;padding-top:120px;padding-bottom:70px;width:100%}
.hero__kicker{font-family:var(--fonte-titulo);font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.18em;font-size:.8rem;margin-bottom:20px}
.hero h1{font-family:var(--fonte-titulo);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,6.2vw,5.1rem);line-height:.96;letter-spacing:-.01em}
.hero h1 span{display:block}
.hero__sub{margin-top:26px;max-width:52ch;font-size:1.1rem}
.hero__cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.hero__lado{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.hero__simbolo{width:clamp(150px,17vw,220px)}
.hero__selo{text-align:center}
.hero__pct{font-family:var(--fonte-titulo);font-style:italic;font-weight:900;line-height:.9;
  font-size:clamp(3.6rem,7vw,5.6rem);letter-spacing:-.03em}
.hero__pct-txt{font-size:.95rem;line-height:1.5;margin-top:8px}

/* ---- FAIXA ---- */
.band{overflow:hidden;padding:14px 0}
.band__track{display:flex;gap:42px;width:max-content;animation:rola 34s linear infinite}
.band span{font-family:var(--fonte-titulo);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:1.15rem;white-space:nowrap}
.band span::after{content:"✦";margin-left:42px;opacity:.6}
@keyframes rola{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.band__track{animation:none}}

/* ---- PROVA ---- */
.prova{padding:clamp(40px,6vw,64px) 0}
.prova__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prova__grade div{padding-left:18px;border-left:4px solid var(--primaria)}
.prova b{display:block;font-family:var(--fonte-titulo);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.05}
.prova span{color:var(--texto-soft);font-size:.95rem}
@media(max-width:760px){.prova__grade{grid-template-columns:1fr}}

/* ---- SEÇÕES ---- */
.sec{padding:clamp(70px,10vw,130px) 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{position:relative;border:1px solid var(--linha);border-radius:var(--r);
  padding:34px clamp(22px,3vw,32px) 30px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--primaria);transform:translateY(-4px)}
.card::before{content:"";position:absolute;left:0;top:28px;width:5px;height:42px;background:var(--primaria);
  transform:skewY(-20deg)}
.card--destaque{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;column-gap:clamp(20px,4vw,48px);
  align-items:center}
.card--destaque .card__n{grid-row:1/4}
.card--destaque h3,.card--destaque p{grid-column:2}
.card--destaque .card__preco{grid-column:3;grid-row:1/3;border:0;padding:0;margin:0;text-align:right}
.card--destaque .card__acoes{grid-column:3;grid-row:3;justify-content:flex-end}
.card__selo{position:absolute;top:-12px;right:24px;font-family:var(--fonte-titulo);font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;padding:5px 12px;border-radius:3px;
  transform:skewX(-8deg)}
.card__n{font-family:var(--fonte-titulo);font-style:italic;font-weight:900;font-size:3rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--texto) 38%,transparent)}
.card h3{font-family:var(--fonte-titulo);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1.1}
.card p{color:var(--texto-soft)}
.card__preco{margin-top:auto;padding-top:14px;border-top:1px solid var(--linha);color:var(--texto) !important}
.card__preco b{font-family:var(--fonte-titulo);font-style:italic;font-weight:800;font-size:1.55rem;display:block;line-height:1.15}
.card__preco small{font-size:.8rem;color:var(--texto-soft)}
.card__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:6px}
.card__acoes .btn{padding:13px 24px}
.card__link{font-family:var(--fonte-titulo);font-style:italic;font-weight:700;color:var(--acento)}
.card__link:hover{color:var(--texto)}
@media(max-width:980px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .cards{grid-template-columns:1fr}
  .card--destaque{display:flex;align-items:stretch}
  .card--destaque .card__preco{text-align:left;border-top:1px solid var(--linha);padding-top:14px}
}

.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;counter-reset:s}
.steps li{counter-increment:s;padding:26px 0 0;border-top:3px solid var(--primaria)}
.steps li::before{content:"0" counter(s);font-family:var(--fonte-titulo);font-style:italic;font-weight:900;
  font-size:1rem;color:var(--acento);display:block;margin-bottom:6px}
.steps b{font-family:var(--fonte-titulo);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.4rem}
.steps p{color:var(--texto-soft);margin-top:8px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* ---- ÊXITO ---- */
.exito{padding:clamp(60px,8vw,100px) 0;clip-path:polygon(0 6%,100% 0,100% 94%,0 100%)}
.exito__inner{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.exito .exito__big{margin:0;font-family:var(--fonte-titulo);font-style:italic;font-weight:900;line-height:.85;
  font-size:clamp(5rem,16vw,12rem);letter-spacing:-.03em}
.exito h2{font-family:var(--fonte-titulo);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.8rem,4vw,3rem);line-height:1}
.exito h2 em{display:block;font-style:italic}
.exito p{margin:14px 0 26px;font-size:1.1rem;max-width:46ch}
@media(max-width:700px){.exito__inner{grid-template-columns:1fr}}

/* ---- POR QUE ---- */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.why__list{list-style:none;display:flex;flex-direction:column;gap:14px}
.why__list li{padding:18px 22px;border-left:4px solid var(--primaria);color:var(--texto-soft)}
.why__list b{color:var(--texto)}
@media(max-width:820px){.why{grid-template-columns:1fr}}

/* ---- CTA ---- */
.cta{text-align:center;padding:clamp(80px,11vw,140px) 0}
.cta h2{font-family:var(--fonte-titulo);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,5rem);line-height:.95}
.cta p{color:var(--texto-soft);margin:16px auto 30px;max-width:46ch}
.cta .cta__end{margin-top:40px;font-size:.92rem}
.cta__end a{color:var(--acento)}

.ft{border-top:1px solid var(--linha)}

@media(max-width:860px){
  .hero__inner{grid-template-columns:1fr}
  .hero__lado{flex-direction:row;justify-self:start;gap:20px}
  .hero__simbolo{width:96px}
  .hero__selo{text-align:left}
}

/* ==========================================================================
   A2 · Aço — preto e grafite com cortes de aço; o vermelho vivo aparece em
   golpes precisos (diagonal do topo, faixa, êxito). O mais equilibrado.
   ========================================================================== */
.hero{background:var(--fundo);color:var(--texto)}
.hero__luz{background:
  linear-gradient(105deg,transparent 62%,var(--primaria) 62%,var(--primaria) 63.2%,transparent 63.2%),
  linear-gradient(105deg,transparent 63.2%,#16161A 63.2%)}
.hero__kicker{color:var(--texto-soft)}
.hero h1 span{color:var(--primaria)}
.hero__sub{color:var(--texto-soft)}
.hero__pct{color:var(--texto)}
.hero__pct-txt{color:var(--texto-soft)}
.hero__pct-txt b{color:var(--texto)}
.band{background:var(--primaria)}
.band span{color:#fff}
.prova{background:#121214;border-bottom:1px solid var(--linha)}
.card{background:var(--superficie);
  background-image:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%)}
.card--destaque{border-color:var(--primaria);border-width:2px}
.card__selo{background:var(--primaria);color:#fff}
.sec--grafite{background:#121214}
.exito{background:var(--primaria);color:#fff}
.exito h2 em{color:#0B0B0C}
.why__list li{background:var(--superficie)}
.cta{background:radial-gradient(50vw 28vw at 50% 100%,color-mix(in srgb,var(--primaria) 28%,transparent),transparent 70%)}
@media(max-width:860px){.hero__luz{background:none}}
/* a diagonal começa abaixo do cabeçalho, sem cortar o menu */
.hero__luz{top:86px}

/* ==========================================================================
   Rodada 3 · Final
   ========================================================================== */
/* título do topo: o trecho em *ênfase* do painel vira a 2ª linha, vermelha */
.hero h1 em{display:block;font-style:italic;color:var(--primaria)}

/* serviços vêm do bloco planos: numeração automática, preço + notas */
.cards{counter-reset:servico}
.card{counter-increment:servico}
.card__n::before{content:counter(servico,decimal-leading-zero)}
.card__preco b span{font-size:.62em;font-weight:700;color:var(--texto-soft)}
.card__preco small{display:block}

/* Reclame Aqui: o número leva à página da empresa */
.prova__link{display:block;color:inherit}
.prova__link:hover span{color:var(--acento)}

/* escritório */
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.fotos img{width:100%;height:auto;aspect-ratio:680/382;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--linha)}
@media(max-width:760px){.fotos{grid-template-columns:1fr}}

/* mapa (endereço do bloco contato) */
.mapa{margin-top:16px;border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;background:var(--superficie)}
.mapa iframe{display:block;width:100%;height:clamp(260px,34vw,380px);border:0;filter:grayscale(.35) contrast(1.05)}
.mapa__end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:16px clamp(16px,2.5vw,24px);
  font-size:.95rem;color:var(--texto-soft)}
.mapa__end a{font-family:var(--fonte-titulo);font-style:italic;font-weight:700;color:var(--acento)}
.mapa__end a:hover{color:var(--texto)}