/* PulsoUrbano — SPA (home + planos) */
html, body { margin: 0; padding: 0; background: #0B1C16; }
html { scroll-behavior: smooth; }
body { font-family: 'Archivo', sans-serif; color: #F4EFE6; -webkit-font-smoothing: antialiased; }
a { color: #7FC29B; text-decoration: none; }
::selection { background: #7FC29B; color: #173126; }

@keyframes pulseRing { 0% { transform: scale(0.45); opacity: 0.9; } 100% { transform: scale(2); opacity: 0; } }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ecgSweep { from { stroke-dashoffset: 1800; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===== views (SPA) ===== */
.view { transition: opacity 0.22s ease; }
.view.fade { opacity: 0; }
.view[hidden] { display: none; }

/* ===== nav ===== */
.nav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 16px; max-width: calc(100vw - 32px); background: rgba(11,31,23,0.85); backdrop-filter: blur(10px); border: 1px solid rgba(127,194,155,0.25); border-radius: 999px; padding: 9px 10px 9px 18px; }
.nl { white-space: nowrap; font-size: 12.5px; font-weight: 500; color: rgba(244,239,230,0.65); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.nl:hover { color: #F4EFE6; }
.nl.active { color: #7FC29B; background: rgba(127,194,155,0.16); font-weight: 600; }

/* ===== botões ===== */
.btn { white-space: nowrap; display: inline-block; background: #7FC29B; color: #173126; font-weight: 700; border-radius: 999px; cursor: pointer; }
.btn:hover { background: #F4EFE6; }
.btn-o { white-space: nowrap; display: inline-block; border: 1.5px solid rgba(127,194,155,0.45); color: #7FC29B; font-weight: 600; border-radius: 999px; cursor: pointer; }
.btn-o:hover { border-color: #7FC29B; color: #F4EFE6; }

/* ===== células e links ===== */
.cell { background: #0A1B14; padding: 24px 26px; }
.cell:hover { background: #0E241B; }
.flink { font-size: 13.5px; color: rgba(244,239,230,0.72); cursor: pointer; }
.flink:hover { color: #7FC29B; }
.soc { width: 34px; height: 34px; border: 1px solid rgba(127,194,155,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.soc:hover { border-color: #7FC29B; }

/* ===== tilt ===== */
.tilt-wrap { perspective: 1100px; }
.tilt-card { transform-style: preserve-3d; transition: transform 0.18s ease-out; will-change: transform; }

/* ===== rótulos dos pins 3D ===== */
.pin-label { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; display: none; transform: translate(-50%, -110%); white-space: nowrap; text-align: center; text-shadow: 0 2px 10px rgba(8,20,16,0.9); }

/* ===== tipografia utilitária ===== */
.mono { font-family: 'IBM Plex Mono', monospace; }
.serif { font-family: 'Spectral', serif; font-weight: 300; }
.exp { font-family: 'Archivo Expanded', 'Archivo', sans-serif; font-weight: 700; }

/* ===== responsivo mobile (home) — corrige overflow horizontal e grids que não empilhavam ===== */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  /* nav: no celular, mantém logo + Entrar; os âncoras somem para não estourar a pílula.
     !important porque o <div> dos links tem display:flex inline (inline vence folha sem !important). */
  .nav > div { display: none !important; }
  /* seções e rodapé: reduz o respiro lateral (6vw) para caber */
  main section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  /* rodapé de 4 colunas vira 2 no celular */
  [style*="grid-template-columns:1.3fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  /* grids de 3 colunas do design empilham no celular */
  [style*="grid-template-columns:auto 1fr auto"] { grid-template-columns: 1fr !important; justify-items: start; text-align: left; }
  [style*="minmax(320px"], [style*="minmax(300px"], [style*="minmax(280px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  /* colunas/cards com min-width grande passam a caber (evita o scroll horizontal) */
  [style*="min-width:320px"], [style*="min-width:300px"] { min-width: 0 !important; }
  /* a linha de rótulo do hero quebra em vez de estourar */
  [style*="gap:10px; margin-bottom:26px"] { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  main section { padding-left: 16px !important; padding-right: 16px !important; }
}