/* Webvel site · global styles */
@import url('./colors_and_type.css?v=1eb61822');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  background: var(--bg1-dark);
  color: var(--fg1-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  scroll-behavior: smooth;
}

body[data-theme="light"] { background: var(--bg1-soft); color: var(--fg1); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---- Animations ---- */
@keyframes wv-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes wv-scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes wv-fadein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wv-tickerscroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes wv-blink { 50% { opacity: 0; } }

.wv-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard);
}
.wv-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

body[data-anim="off"] .wv-reveal { opacity: 1; transform: none; transition: none; }
body[data-anim="off"] *, body[data-anim="off"] *::before, body[data-anim="off"] *::after {
  animation-duration: 0ms !important;
  transition-duration: 0ms !important;
}

/* density variants */
body[data-density="compact"] { --wv-density-mult: 0.78; }
body[data-density="comfy"]   { --wv-density-mult: 1.18; }
body[data-density="default"] { --wv-density-mult: 1; }

/* Cursor (subtle editorial) */
body[data-cursor="custom"] {
  cursor: none;
}
.wv-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 14px; height: 14px;
  border: 1px solid var(--wv-dourado);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 120ms var(--ease-standard), height 120ms var(--ease-standard), border-color 120ms var(--ease-standard);
}
.wv-cursor.is-link { width: 32px; height: 32px; background: rgba(212,168,87,.1); }

/* Em fundos claros: cursor cinza, sem blend-mode invertendo cores */
.wv-cursor.is-light {
  mix-blend-mode: normal;
  border-color: #6B7280;
}
.wv-cursor.is-light.is-link { background: rgba(107,114,128,.12); }

/* utility */
.wv-container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.wv-container-narrow { max-width: 1100px; margin: 0 auto; padding: 0 40px; }

/* sections */
.wv-section { padding: 96px 0; }
.wv-section--dense { padding: 64px 0; }

/* card hover */
.wv-card-hover {
  transition: border-color var(--t-med) var(--ease-standard),
              transform var(--t-med) var(--ease-standard),
              background var(--t-med) var(--ease-standard);
}
.wv-card-hover:hover {
  border-color: var(--wv-dourado-30);
  transform: translateY(-1px);
}

/* Focus ring */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-md);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,168,87,.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,168,87,.4); }

/* tabular nums for KPI */
.wv-tnum { font-variant-numeric: tabular-nums; }

/* Selection */
::selection { background: var(--wv-dourado); color: var(--wv-grafite); }

/* =============================================================
   RESPONSIVE — Mobile first overrides. Usa !important pra vencer
   os inline styles dos componentes JSX.
   ============================================================= */

/* Tablet (≤960px) — hamburger aparece aqui porque no tablet
   os 8 links da nav não cabem mais com respiro editorial */
@media (max-width: 960px) {
  .wv-container,
  .wv-container-narrow { padding: 0 28px !important; }
  .wv-section { padding: 72px 0 !important; }

  /* NavBar: esconde links/CTA inline, mostra hamburger */
  .wv-nav-links { display: none !important; }
  .wv-nav-cta { display: none !important; }
  .wv-nav-burger { display: flex !important; }

  /* Footer: 2 colunas internas */
  .wv-footer-top { grid-template-columns: 1fr !important; gap: 40px !important; }
  .wv-footer-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }

  /* H1 tablet: levemente menor que desktop */
  main h1 {
    font-size: 56px !important;
    line-height: 1.08 !important;
  }

  /* Grids 3/4 colunas → 2 no tablet (KPIs, time, features) */
  main [style*="grid-template-columns: repeat(3"],
  main [style*="gridTemplateColumns:'repeat(3"],
  main [style*="gridTemplateColumns: 'repeat(3"],
  main [style*="grid-template-columns: repeat(4"],
  main [style*="gridTemplateColumns:'repeat(4"],
  main [style*="gridTemplateColumns: 'repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

/* Mobile (≤768px) — tipografia reduzida, stacks, center alignment */
@media (max-width: 768px) {
  .wv-container,
  .wv-container-narrow { padding: 0 20px !important; }
  .wv-section { padding: 56px 0 !important; }

  /* LiveBar: esconde lado direito (relógio + CASCAVEL) */
  .wv-live-right { display: none !important; }
  .wv-live-opt { display: none !important; }

  /* Centralização de textos em mobile (conteúdo curto respira melhor) */
  main section, main h1, main h2, main h3, main p,
  main blockquote, main .wv-overline {
    text-align: center !important;
  }
  /* Listas permanecem alinhadas à esquerda pra não quebrar bullets */
  main ul, main ol {
    text-align: left !important;
    max-width: 440px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero H1 — reduzir dramaticamente */
  main h1 {
    font-size: 36px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    max-width: 100% !important;
  }
  main h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
  }
  main h3 { font-size: 22px !important; }

  /* Lead/subtítulos — reduzir */
  main p { font-size: 16px !important; line-height: 1.6 !important; }

  /* Manifesto blockquote — ERA GIGANTE em mobile */
  main blockquote,
  .wv-manifesto-quote {
    font-size: 22px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    margin: 24px 0 !important;
  }

  /* Hero: CTAs empilhados e centralizados, largura total */
  .wv-hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 48px !important;
  }
  .wv-hero-ctas > * {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Hero proof strip: empilhar em coluna, esconder separadores verticais */
  .wv-hero-proof {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding-top: 32px !important;
    text-align: center !important;
  }
  .wv-hero-proof > div[style*="width: 1px"],
  .wv-hero-proof > div[style*="width:1px"] { display: none !important; }

  /* Footer: colunas empilhadas */
  .wv-footer-cols { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .wv-footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  /* TODOS os grids → 1 coluna em mobile (padrão mais legível) */
  main [style*="grid-template-columns"],
  main [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Exceções (especificidade mais alta que o seletor genérico acima) */
  main .wv-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  main .wv-client-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  /* Notícias: uma abaixo da outra */
  main .wv-news-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Chart grid: stack, chart vai embaixo do texto */
  main .wv-chart-grid { gap: 40px !important; }

  /* Section header: centralizar mesmo quando passa align=left */
  main [style*="max-width: 720px"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Esconde custom cursor em touch (mobile) */
  body[data-cursor="custom"] { cursor: auto !important; }
  .wv-cursor { display: none !important; }

  /* Reduzir padding vertical de sections pesadas */
  main section[style*="padding: 140px"],
  main section[style*="padding:140px"],
  main section[style*="padding: 120px"],
  main section[style*="padding:120px"] {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  /* Reduzir padding de cards muito generosos */
  main [style*="padding: 40px"][class*="wv-card"] {
    padding: 28px !important;
  }

  /* ---- Overlines e section headers centralizados ---- */
  main .wv-overline { text-align: center !important; }
  main .wv-section-header { text-align: center !important; }
  main .wv-section-header,
  main .wv-section-header > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---- Testimonial — centralizar traço e conteúdo ---- */
  main .wv-testimonial,
  main .wv-testimonial blockquote,
  main .wv-testimonial figcaption {
    text-align: center !important;
  }
  main .wv-testimonial-dash {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---- KPI value: reduzir pra caber valor grande em uma linha ---- */
  main .wv-kpi-value-big { font-size: 26px !important; letter-spacing: -.5px !important; }
  main .wv-kpi-value { font-size: 24px !important; }

  /* ---- Timeline (/sobre): esconder linha vertical, centralizar rows ---- */
  main .wv-timeline-line { display: none !important; }
  main .wv-timeline-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 20px 0 !important;
    text-align: center !important;
  }
  main .wv-timeline-year {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }
  main .wv-timeline-dot { margin-left: 0 !important; }
  main .wv-timeline-content { padding-left: 0 !important; }

  /* ---- IA-First stack: inverter ordem (00 em cima ao ler de cima pra baixo) ---- */
  main .wv-ia-stack {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  main .wv-ia-stack > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 20px 24px !important;
    text-align: center !important;
  }

  /* ---- Filtros notícias centralizados ---- */
  main .wv-news-filters { justify-content: center !important; }

  /* ---- Contato: openBox centralizado no container ---- */
  main .wv-contact-open {
    justify-content: center !important;
    flex-direction: row !important;
  }
  main .wv-contact-open > div:last-child { text-align: left !important; }

  /* ---- Status: layout vertical, sem bars (ilegível no mobile) ---- */
  main .wv-status-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    text-align: left !important;
  }
  main .wv-status-bars { display: none !important; }
  main .wv-status-name { flex: 1 1 auto !important; }
  main .wv-status-uptime { text-align: right !important; }

  /* ---- Ticker Funcionários Digitais: esconder (quebra em mobile) ---- */
  main .wv-fd-ticker { display: none !important; }

  /* ---- Home: header "NOTÍCIAS DO MUNDO + Ver todas" centralizado ---- */
  main .wv-news-home-header {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    text-align: center !important;
  }

  /* ---- News cards: centralizar categoria, título, excerpt e meta (data + fonte) ---- */
  main .wv-news-card { text-align: center !important; }
  main .wv-news-meta { justify-content: center !important; }
}

/* Footer inteiro centralizado no mobile */
@media (max-width: 768px) {
  footer { text-align: center !important; }
  footer .wv-footer-top > div:first-child > div { justify-content: center !important; }
  footer .wv-footer-top img { margin-left: auto !important; margin-right: auto !important; }
  footer .wv-footer-top p { margin-left: auto !important; margin-right: auto !important; }
  footer .wv-footer-cols { text-align: center !important; }
  footer .wv-footer-cols > div { text-align: center !important; }
  footer .wv-footer-cols a,
  footer .wv-footer-cols div { text-align: center !important; }
  footer .wv-footer-bottom { text-align: center !important; align-items: center !important; }
  footer .wv-footer-bottom > div { justify-content: center !important; flex-wrap: wrap !important; }
  /* Selo "OPERANDO HÁ X DIAS" centralizado */
  footer [style*="OPERANDO HÁ"],
  footer div[style*="inline-flex"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Small mobile (≤480px) — ajustes finos */
@media (max-width: 480px) {
  .wv-container,
  .wv-container-narrow { padding: 0 16px !important; }

  main h1 { font-size: 30px !important; }
  main h2 { font-size: 22px !important; }
  main blockquote,
  .wv-manifesto-quote { font-size: 19px !important; }

  /* Footer: 1 coluna só */
  .wv-footer-cols { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Clientes: 3 colunas continuam ok no 390px pra caber bem */
  main .wv-client-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

  /* KPI grid: se ficar apertado, 1 col */
  main .wv-kpi-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}