/* ================================================================
   Vizinhonda — landing pages (morador + guarda)
   styles.css = tokens (contrato visual do Claude Design dc500a39)
                + base (reset/keyframes/smooth scroll)
                + classes de :hover (traduzidas dos style-hover do .dc.html)
                + media queries responsivas
   NÃO inventar cor fora dos tokens abaixo.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Trust blue (primary ramp) */
  --vz-blue-50:  #EEF4FB;
  --vz-blue-100: #D7E5F4;
  --vz-blue-200: #A9C5E6;
  --vz-blue-300: #6FA0D2;
  --vz-blue-400: #3B82F6;
  --vz-blue-500: #1E63B8;
  --vz-blue-600: #0F4C81;
  --vz-blue-700: #0B3A65;
  --vz-blue-800: #082A4A;
  --vz-blue-900: #051A30;

  /* Warm neutrals */
  --vz-neutral-0:   #FFFFFF;
  --vz-neutral-50:  #F8F9FB;
  --vz-neutral-100: #F1F3F7;
  --vz-neutral-200: #E4E8EE;
  --vz-neutral-300: #CBD2DC;
  --vz-neutral-400: #9AA4B2;
  --vz-neutral-500: #697586;
  --vz-neutral-600: #4B5565;
  --vz-neutral-700: #364152;
  --vz-neutral-800: #202939;
  --vz-neutral-900: #121926;
  --vz-neutral-950: #0A0F1A;

  /* Status — muted, never alarming */
  --vz-success-bg:    #E6F4EC;
  --vz-success-fg:    #0F7A3F;
  --vz-success-solid: #16A34A;
  --vz-warning-bg:    #FDF1DF;
  --vz-warning-fg:    #9A5B0B;
  --vz-warning-solid: #D97706;
  --vz-danger-bg:     #FCE9E8;
  --vz-danger-fg:     #A1241D;
  --vz-danger-solid:  #DC2626;
  --vz-info-bg:       #E0EDFB;
  --vz-info-fg:       #0F4C81;
  --vz-info-solid:    #1E63B8;

  /* Anonymous accent */
  --vz-anon-bg:    #EDE9FE;
  --vz-anon-fg:    #5B21B6;
  --vz-anon-solid: #7C3AED;

  /* Semantic aliases (light) */
  --vz-primary:        var(--vz-blue-600);
  --vz-primary-accent: var(--vz-blue-400);
  --vz-primary-hover:  var(--vz-blue-700);

  --vz-bg:        var(--vz-neutral-50);
  --vz-bg-elev:   var(--vz-neutral-0);
  --vz-surface:   var(--vz-neutral-0);
  --vz-surface-inset: var(--vz-neutral-100);

  --vz-text:        var(--vz-neutral-900);
  --vz-text-muted:  var(--vz-neutral-600);
  --vz-text-subtle: var(--vz-neutral-500);
  --vz-text-on-primary: #FFFFFF;

  --vz-border:        rgba(10, 15, 26, 0.08);
  --vz-border-strong: rgba(10, 15, 26, 0.14);
  --vz-overlay:       rgba(10, 15, 26, 0.50);

  --vz-font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vz-font-display: 'Plus Jakarta Sans', 'Geist', system-ui, sans-serif;
}

/* ── Base / reset ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--vz-text);
  font-family: var(--vz-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* body NUNCA rola horizontal */
}
img { max-width: 100%; }
a { color: inherit; }

@keyframes vzDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
  70%  { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
summary::-webkit-details-marker { display: none; }

/* ── Hero: headline com palavra rotativa (rua → bairro → cidade) ──
   3 frases empilhadas em crossfade+slide; a linha "mais segura." é fixa. */
.vz-rotator {
  position: relative;
  display: block;
  height: 1.14em;
  overflow: hidden;
  color: var(--vz-primary);
}
.vz-rotator > span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(18px);
  animation: vzWordRotate 7.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.vz-rotator > span:nth-child(1) { animation-delay: 0s; }
.vz-rotator > span:nth-child(2) { animation-delay: 2.5s; }
.vz-rotator > span:nth-child(3) { animation-delay: 5s; }
.vz-hero-fixed { display: block; color: var(--vz-text); }
@keyframes vzWordRotate {
  0%   { opacity: 0; transform: translateY(18px); }
  5%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-18px); }
  100% { opacity: 0; transform: translateY(-18px); }
}
/* Acessibilidade: sem movimento, mostra só a 1ª frase estática. */
@media (prefers-reduced-motion: reduce) {
  .vz-rotator > span { animation: none; }
  .vz-rotator > span:nth-child(1) { opacity: 1; transform: none; position: relative; }
  .vz-rotator > span:nth-child(n+2) { display: none; }
}

/* ── Hover (traduzido dos style-hover="…" do .dc.html) ──
   Precisa de !important: o estado base vem de inline style, que só é
   sobrescrito por regra de stylesheet com !important. */
.h-link:hover        { color: var(--vz-primary) !important; }
.h-underline:hover   { text-decoration: underline !important; }
.h-ghost:hover       { background: var(--vz-blue-50) !important; }
.h-primary-btn:hover { background: var(--vz-primary-hover) !important; }
.h-dark:hover        { background: var(--vz-neutral-800) !important; }
.h-soft:hover        { background: var(--vz-blue-100) !important; }
.h-outline:hover     { background: var(--vz-neutral-100) !important; }
.h-white:hover       { background: var(--vz-blue-50) !important; }
.h-glass:hover       { background: rgba(255,255,255,0.1) !important; }

/* ── Responsivo (≤900px) ──
   overrides com !important para vencer os inline styles do handoff. */
@media (max-width: 900px) {
  /* morador: .vz-hero é a própria section flex */
  .vz-hero {
    flex-direction: column !important;
    gap: 44px !important;
    padding: 44px 20px 48px !important;
  }
  /* guarda: a section (.vz-hero-navy) não é flex; o flex está no .vz-hero-inner */
  .vz-hero-navy  { padding: 44px 20px 48px !important; }
  .vz-hero-inner { flex-direction: column !important; gap: 44px !important; }
  .vz-hero-copy  { flex: 1 1 auto !important; }
  .vz-hero-mock  { flex: 1 1 auto !important; width: 100%; }
  .vz-grid-3     { grid-template-columns: 1fr !important; }
  .vz-two-col    { flex-direction: column !important; gap: 36px !important; }
  .vz-stats-row  { flex-wrap: wrap !important; gap: 24px 36px !important; }
  .vz-nav-center { display: none !important; }
  .vz-h1         { font-size: 40px !important; letter-spacing: -1.2px !important; }
  .vz-h2         { font-size: 30px !important; }
  .vz-section    { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 560px) {
  .vz-h1  { font-size: 34px !important; }
  .vz-cta-actions { flex-direction: column !important; align-items: stretch !important; }
  .vz-cta-actions > a { justify-content: center !important; }
  /* nav: sobra espaço só p/ o CTA — esconde "Entrar" e aperta o header */
  .vz-nav-inner  { padding-left: 16px !important; padding-right: 16px !important; gap: 12px !important; }
  .vz-nav-entrar { display: none !important; }
  .vz-nav-cta    { padding: 9px 14px !important; font-size: 13.5px !important; }
}