/* ==========================================================================
   Identidade "Pontes": o nome vira conceito. Ponte pênsil em desenho técnico,
   laranja da Golden Gate (International Orange) e grade de engenharia.
   Carregado depois de style.css: troca cores, tipografia e o topo.
   ========================================================================== */

:root {
  --bg: #efeee9;
  --bg-2: #e3e2dc;
  --fg: #101112;
  --mute: #6b6b66;
  --line: rgba(16, 17, 18, .13);
  --acc: #e8470c;
  --chip: rgba(16, 17, 18, .06);
  --grid: rgba(16, 17, 18, .05);
  --head: 'Archivo', 'Geist', ui-sans-serif, system-ui, sans-serif;
}
[data-theme="dark"] {
  --bg: #101112;
  --bg-2: #18191b;
  --fg: #ecebe6;
  --mute: #8d8b85;
  --line: rgba(236, 235, 230, .12);
  --acc: #ff4f00;
  --chip: rgba(236, 235, 230, .06);
  --grid: rgba(255, 255, 255, .045);
}

/* Grade de engenharia no fundo da página inteira. */
body {
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
}
::selection { background: var(--acc); color: #101112; }

/* Títulos: Archivo condensada, caixa alta, pesada. */
.sec-title, .contact__title, .social__title, .wheel__item, .wlist h3, .wgrid h3, .svc__t, .hc__title, .menu nav a, .facts dt {
  font-family: var(--head); font-weight: 800; font-variation-settings: 'wdth' 62; text-transform: uppercase; letter-spacing: -0.005em;
}
.sec-title, .contact__title { line-height: .9; }
.sec-title span, .contact__title span, .social__title span { color: var(--acc); }
.svc__t { font-size: clamp(28px, 2.6vw, 42px); }
.wheel__item { font-size: clamp(46px, 6vw, 100px); letter-spacing: 0; }
.wlist h3 { letter-spacing: 0; }
.facts dt { color: var(--acc); font-weight: 800; }

/* Marca: a < ponte > laranja, solta e maior (num quadrado ela ficava miúda). Símbolos gerados por ferramentas/logo.mjs. */
.brand { gap: 8px; }
.brand i { background: none; color: var(--acc); border-radius: 0; width: 46px; height: 46px; margin: -6px -2px -6px -6px; }
.brand i svg { width: 46px; height: 46px; }
.brand:hover i { transform: translateY(-1px) scale(1.06); }

/* Abertura: o </> estaiado se desenha no centro enquanto o contador sobe. */
.loader__mark { position: absolute; left: 50%; top: 50%; width: min(26vw, 190px); height: min(26vw, 190px); transform: translate(-50%, -50%); color: var(--acc, #ff4f00); stroke-dasharray: 1; stroke-dashoffset: 1; animation: traco 1.8s cubic-bezier(.76, 0, .24, 1) .15s forwards; }
@keyframes traco { to { stroke-dashoffset: 0; } }
.loader.is-done .loader__mark { opacity: 0; transition: opacity .4s; }

/* Carta: o <P> no lugar do "PD". */
.letter__logo svg { width: 34px; height: 34px; }

/* Rodapé: a marca grande < ponte >. */
.foot { align-items: center; }
.foot__mark { width: 58px; height: 58px; color: var(--acc); flex: none; }

@media (prefers-reduced-motion: reduce) { .loader__mark { animation: none; stroke-dashoffset: 0; } }
.brand span { font-family: var(--head); font-weight: 800; font-variation-settings: 'wdth' 75; text-transform: uppercase; letter-spacing: .01em; }

/* Botões e destaques no laranja. */
.btn--dark { background: var(--acc); color: #101112; }
.btn--dark:hover { background: var(--fg); color: var(--bg); }
.letter .btn--dark { background: #101112; color: #f4f3ef; }
.letter .btn--dark:hover { background: var(--acc); color: #101112; }
em { color: var(--acc); }
.marquee { background: var(--acc); color: #101112; }
.marquee__track i { background: #101112; }
.steps__list li::before { background: var(--acc); }
.pill-tag, .wheel__tags i.go { background: var(--acc); color: #101112; }

/* ---------- topo C ---------- */
.hero.hc {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); grid-template-rows: auto 1fr auto;
  /* Altura mínima de uma tela; se o conteúdo não couber (telas baixas), o topo cresce em vez de sobrepor. */
  min-height: calc(100svh - 96px); padding: 4vh var(--g) 26px; overflow: hidden; border-bottom: 1px solid var(--line);
}
.hc > * { position: relative; z-index: 2; }
/* A ponte para acima da faixa dos números, para eles nunca ficarem em cima do tabuleiro. */
.bridge { position: absolute !important; z-index: 0 !important; left: 0; right: 0; bottom: 64px; width: 100%; height: 60%; pointer-events: none; }
.bridge path, .bridge line { fill: none; vector-effect: non-scaling-stroke; }
.bridge__cable { stroke: var(--acc); stroke-width: 2; }
.bridge__tower { stroke: var(--acc); stroke-width: 2.4; }
.bridge__hangers line { stroke: var(--acc); stroke-width: 1; opacity: .55; }
.bridge__deck { stroke: var(--fg); stroke-width: 2; opacity: .85; }
.bridge__dims line { stroke: var(--mute); stroke-width: 1; }
.bridge__dims text { fill: var(--mute); font: 11px var(--mono); letter-spacing: .06em; }
.bridge__dims { opacity: 0; transition: opacity 1s 2.2s; }
body.is-ready .bridge__dims { opacity: 1; }
.bridge__lights circle { fill: var(--acc); }
.bridge__lights circle.car { fill: var(--fg); }

.hc__top { grid-column: 1; grid-row: 1; }
.hc__k { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--acc); }
.hc__k i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 rgba(255, 79, 0, .6); animation: pulse-c 2s infinite; }
@keyframes pulse-c { 70% { box-shadow: 0 0 0 8px rgba(255, 79, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 79, 0, 0); } }
.hc__title { margin: 0; font-size: clamp(56px, min(8.2vw, 13.5vh), 132px); line-height: .86; }
.hc__title b { color: var(--acc); font-weight: inherit; }
/* Uma linha por bloco; cada linha sobe de dentro de uma máscara quando a página fica pronta. */
/* Folga em cima para não cortar acentos (VOCÊ) dentro da máscara. */
.hc__title .hero__line { display: block; overflow: hidden; padding: .14em 0 .06em; margin: -.14em 0 -.06em; }
.hc__title .hero__line > span { display: inline-block; transform: translateY(105%); transition: transform 1.3s cubic-bezier(.16, 1, .3, 1); }
.hc__title .hero__line:nth-child(2) > span { transition-delay: .08s; }
.hc__title .hero__line:nth-child(3) > span { transition-delay: .16s; }
body.is-ready .hc__title .hero__line > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .hc__title .hero__line > span { transform: none; } }
.hc__side { grid-column: 2; grid-row: 1; align-self: start; padding-top: 44px; max-width: 360px; justify-self: end; }
.hc__side p { margin: 0; font-size: 18px; line-height: 1.42; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.hc__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hc__photo { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; margin: 24px 0 14px; width: min(100%, 280px, 30vh); aspect-ratio: 3 / 4; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; position: relative; }
.hc__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.08); transition: filter .8s; }
.hc__photo:hover img { filter: grayscale(0); }
.hc__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 8px 10px; background: var(--bg); border-top: 1px solid var(--line); font-size: 10px; color: var(--mute); }
.hc__stats { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 0; align-self: end; padding-top: 14px; }
.hc__stats dt { color: var(--mute); font-size: 10.5px; margin-bottom: 4px; }
.hc__stats dd { margin: 0; font-size: 12.5px; color: var(--fg); }

@media (max-width: 900px) {
  /* No celular a ponte vira uma faixa entre o texto e a foto, em vez de ficar atrás de tudo. */
  .hero.hc { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; min-height: 0; padding-bottom: 24px; }
  .hc__top, .hc__side, .hc__photo, .hc__stats { grid-column: 1; grid-row: auto; justify-self: start; }
  .hc__top { order: 1; } .hc__side { order: 2; } .bridge { order: 3; } .hc__stats { order: 4; } .hc__photo { order: 5; }
  .bridge { position: relative !important; bottom: auto; height: 210px; margin: 24px calc(var(--g) * -1) 0; width: calc(100% + var(--g) * 2); }
  .hc__title { font-size: 15.5vw; }
  .hc__side { padding-top: 26px; }
  .hc__photo { width: 70%; margin-top: 30px; }
  .hc__stats { margin-top: 22px; gap: 14px 24px; }
}