/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hadar-azul);
  color: var(--hadar-branco);
  font: 400 1.0625rem/1.5 var(--font-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1 { font-family: var(--font-titulo); margin: 0; letter-spacing: -.02em; }
p, ul { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--hadar-cobre); outline-offset: 4px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--largura)); margin-inline: auto; }

/* ---------- fachada: a dobra inteira ---------- */
.fachada {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(24px, 5svh, 56px);
  /* juntas de painel ACM: módulos altos, como numa fachada revestida */
  background:
    linear-gradient(to right, var(--junta-acm) 1px, transparent 1px) 0 0 / 160px 100%,
    linear-gradient(to bottom, var(--junta-acm) 1px, transparent 1px) 0 0 / 100% 320px,
    var(--hadar-azul);
}
.fachada { overflow-x: clip; }
.fachada > .wrap { display: flex; flex-direction: column; gap: clamp(20px, 4svh, 44px); }

/* prancha da marca: altura limitada pela tela; o H alinha com o texto */
.prancha {
  --pw: min(100%, 92svh);
  width: var(--pw);
  margin: 0 0 0 calc(var(--pw) * -.0915);
}
.prancha__svg { display: block; width: 100%; height: auto; overflow: visible; }

.cota__linha, .cota__tick, .chamada path { fill: none; stroke: var(--linha-clara); stroke-width: 1.5; }
.cota__fundo { fill: var(--hadar-azul); }
.cota__texto, .chamada text {
  font: 600 17px var(--font-texto);
  letter-spacing: .2em;
  fill: var(--texto-apagado);
}
.chamada circle { fill: var(--hadar-cobre); }

/* ---------- texto, contagem, serviços, CTA ---------- */
.fachada__texto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "intro contagem"
    "spec  spec"
    "base  base";
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: clamp(20px, 4svh, 40px);
  align-items: end;
}
.fachada__intro { grid-area: intro; }
.fachada h1 {
  font-size: clamp(2rem, min(4.2vw, 6.6svh), 3.25rem);
  font-weight: 700;
  line-height: 1.06;
}
/* o conceito da marca: segundo nível, branco, com o traço de cobre como acento */
.fachada__conceito {
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(10px, 1.6svh, 16px);
  font: 600 clamp(1.125rem, min(1.7vw, 2.8svh), 1.4375rem)/1.3 var(--font-titulo);
  letter-spacing: -.01em;
}
.fachada__conceito::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--hadar-cobre); }
.fachada__sub {
  margin-top: clamp(10px, 1.6svh, 16px);
  max-width: 52ch;
  text-wrap: pretty;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  color: var(--texto-suave);
}

/* contagem: linhas finas e marcos, como uma tabela de prancha */
.contagem {
  grid-area: contagem;
  display: grid;
  grid-template-columns: repeat(4, minmax(84px, auto));
  border-top: 1px solid var(--linha-clara);
}
.contagem__un {
  position: relative;
  padding: 14px 28px 0 16px;
  border-left: 1px solid var(--linha-clara);
}
.contagem__un::before {            /* marco de cota acima da linha */
  content: ""; position: absolute; left: -1px; top: -9px;
  width: 1px; height: 8px; background: var(--linha-clara);
}
.contagem__un:first-child { border-left-color: var(--hadar-cobre); }
.contagem__un:first-child::before { background: var(--hadar-cobre); }
.contagem__n {
  display: block;
  font: 700 clamp(2.25rem, min(3.8vw, 6.4svh), 3.25rem)/1 var(--font-titulo);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.contagem__r {
  display: block; margin-top: 8px;
  font: 600 .875rem/1 var(--font-texto);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-apagado);
}

/* serviços como legenda técnica */
.spec {
  grid-area: spec;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--linha-clara);
}
/* a barra fica à esquerda de cada item; o clip esconde a que cairia no início de linha */
.spec__lista {
  --sep: 1.75em;
  list-style: none; padding: 0;
  margin-left: calc(var(--sep) * -1);
  clip-path: inset(0 0 0 var(--sep));
  display: flex; flex-wrap: wrap; row-gap: 6px;
  font: 600 .9375rem/1.5 var(--font-texto);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave);
}
.spec__lista li { position: relative; padding-left: var(--sep); }
.spec__lista li::before {
  content: "/"; position: absolute; left: 0; width: var(--sep); text-align: center;
  color: var(--texto-apagado); opacity: .6;
}

.base {
  grid-area: base;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px;
}
.base__meta {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font: 600 .875rem/1.4 var(--font-texto);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-apagado);
}

/* ---------- botão ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  background: var(--hadar-cobre);
  color: var(--hadar-azul);
  /* azul sobre cobre só passa AA como texto grande: manter >= 19px/700 */
  font: 700 1.1875rem/1 var(--font-titulo);
  text-decoration: none;
  transition: background-color .2s, transform .2s;
}
.botao svg { width: 20px; height: 20px; fill: currentColor; }
.botao:hover { background: #C88A62; }
.botao:active { transform: translateY(1px); }
.botao[aria-disabled="true"] { background: var(--azul-painel); color: var(--texto-apagado); pointer-events: none; }

/* ---------- montagem da fachada (roda uma vez) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .peca { transform-box: fill-box; animation: encaixe .8s cubic-bezier(.2, .8, .2, 1) both; }
  .peca--1 { --de: translate(0, -36px); animation-delay: .1s; }
  .peca--2 { --de: translate(-36px, 0); animation-delay: .28s; }
  .peca--3 { --de: translate(0, 36px);  animation-delay: .46s; }
  @keyframes encaixe { from { transform: var(--de); opacity: 0; } to { transform: none; opacity: 1; } }

  /* letreiro liga como luminoso: apagado, pisca uma vez, acende */
  .letreiro { animation: liga 1.1s steps(1, end) .9s both; }
  @keyframes liga {
    0%   { opacity: .1; }
    40%  { opacity: 1; }
    48%  { opacity: .3; }
    58%  { opacity: 1; }
    100% { opacity: 1; }
  }
  .assinatura { animation: surge .6s ease-out 1.6s both; }
  .cota__linha { stroke-dasharray: 1100; animation: traça 1.4s ease-out .3s both; }
  .cota__tick, .cota__texto, .cota__fundo, .chamada { animation: surge .6s ease-out 1.9s both; }
  @keyframes traça { from { stroke-dashoffset: 1100; } to { stroke-dashoffset: 0; } }
  @keyframes surge { from { opacity: 0; } to { opacity: 1; } }

  .fachada__texto { animation: sobe .7s cubic-bezier(.2, .8, .2, 1) 1.2s both; }
  @keyframes sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* troca do número: fade curto com 5px de deslocamento */
  .contagem__n.troca { animation: troca .2s ease-out; }
  @keyframes troca { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
}

/* ---------- responsivo ---------- */
/* telas baixas: a prancha encolhe e as legendas ficariam ilegíveis */
@media (max-height: 760px) {
  .chamada, .cota__texto, .cota__fundo { display: none; }
  .prancha { --pw: min(100%, 78svh); }
  .fachada > .wrap { gap: clamp(16px, 3svh, 28px); }
  .fachada__texto { row-gap: clamp(16px, 3svh, 28px); }
}
@media (max-width: 1000px) {
  .fachada__texto {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "contagem" "spec" "base";
  }
  .contagem { justify-self: start; }
}
@media (max-width: 760px) {
  .chamada, .cota__texto, .cota__fundo { display: none; }
  .fachada { align-items: flex-start; }
  .so-desktop { display: none; }
}
@media (max-width: 560px) {
  /* celular: a logo ocupa a largura útil; o respiro técnico da prancha passa para a margem */
  .prancha { --pw: 118%; }
  /* o título acompanha a largura para "Ananindeua vai ganhar" caber numa linha até em 360px */
  .fachada h1 { font-size: clamp(1.625rem, 8.2vw, 2rem); }
  .contagem { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contagem__un { padding: 12px 6px 0 10px; }
  .contagem__n { font-size: 2rem; }
  .contagem__r { letter-spacing: .08em; }
  .spec__lista { font-size: .875rem; letter-spacing: .08em; }
  .spec__lista { --sep: 1.25em; }
  .fachada > .wrap { gap: 22px; }
  .fachada__texto { row-gap: 22px; }
  .base { flex-direction: column; align-items: stretch; }
  .botao { width: 100%; min-height: 56px; }
}