/* =========================================================================
   metadados.css — Sistema visual "Hanko" (carimbo japonês / Kanso)
   -------------------------------------------------------------------------
   Organização:
     1. Tokens (custom properties)   4. Layout / seções
     2. Reset / base                 5. Componentes (botões, cards, chips)
     3. Tipografia                    6. Utilitários / responsivo
   ========================================================================= */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* cor */
  --paper:    #F7F4EE;   /* fundo washi          */
  --paper-2:  #FBF9F4;   /* cartões / superfícies */
  --ink:      #1A1815;   /* sumi (quase preto)    */
  --muted:    #55524B;   /* texto secundário      */
  --faint:    #8A867C;   /* legendas / labels     */
  --line:     #E4DFD5;   /* hairlines             */
  --shu:      #C8452F;   /* vermelho carimbo      */
  --shu-dark: #A5341F;   /* hover                 */
  --shu-soft: #E86C54;   /* vermelho claro        */
  --shu-tint: #FBE4DE;   /* texto sobre shu       */

  /* tipografia */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --jp:    'Noto Serif JP', var(--serif);

  /* medida / espaço */
  --wrap: 1200px;
  --pad:  40px;
  --radius: 10px;
}

/* 2. RESET / BASE ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--shu); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--shu-dark); }
::selection { background: var(--shu); color: var(--paper); }

/* 3. TIPOGRAFIA ------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.015em; line-height: 1.1; }
.h-hero  { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; }
.h-sec   { font-size: clamp(30px, 4vw, 40px); }
.h-card  { font-size: 24px; letter-spacing: -0.005em; }
.serif-it { font-style: italic; }
.lead { font-size: 18px; line-height: 1.65; color: var(--muted); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--shu);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow .jp { font-family: var(--jp); font-size: 16px; letter-spacing: 0; }
.num { font-family: var(--mono); font-size: 12px; color: var(--shu); }

/* 4. LAYOUT ---------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: 100px 0; }
.section--tight { padding: 64px 0; }
.stack-v { display: flex; flex-direction: column; }
.rule-t { border-top: 1px solid var(--line); }
.rule-b { border-bottom: 1px solid var(--line); }

/* 5. COMPONENTES ----------------------------------------------------------- */

/* logo / carimbo */
.brand { display: flex; align-items: center; gap: 12px; }
.stamp { display: flex; align-items: center; justify-content: center; }
.stamp svg { width: 100%; height: 100%; display: block; }
.brand-word { font-family: var(--serif); letter-spacing: 0.01em; }
.brand-word .dot { color: var(--shu); }

/* botões */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  padding: 15px 28px; border-radius: 8px;
  cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--shu); color: var(--paper); }
.btn--primary:hover { background: var(--shu-dark); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000; color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--paper { background: var(--paper); color: var(--shu); }

/* header fixo */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; flex-wrap: nowrap; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.site-header .brand { flex-shrink: 0; }
.site-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; min-width: 0; }
.site-nav a { color: var(--muted); font-size: 14px; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav > .btn { flex-shrink: 0; }
/* Dropdown de navegação (Recursos → Blog, Checkup) — hover no desktop */
.nav-dd { position: relative; }
.nav-dd::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 14px; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--muted); white-space: nowrap; padding: 0; }
.nav-dd:hover .nav-dd-btn { color: var(--ink); }
.nav-dd-btn .caret { opacity: .7; transition: transform .2s; }
.nav-dd:hover .nav-dd-btn .caret { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 250px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(26,24,21,.10); display: none; flex-direction: column; gap: 2px; z-index: 40; }
.nav-dd:hover .nav-dd-menu { display: flex; }
.nav-dd-menu a { font-size: 14px; color: var(--muted); padding: 9px 12px; border-radius: 7px; white-space: nowrap; line-height: 1.3; }
.nav-dd-menu a:hover { background: var(--paper-2); color: var(--ink); }
.nav-dd-menu a small { display: block; font-size: 12px; color: var(--faint); margin-top: 1px; }
/* faixa intermediária: aperta o menu antes de escondê-lo (< 900px) */
@media (max-width: 1200px) {
  .site-header .wrap { gap: 18px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 13px; }
  .site-nav > .btn { margin-left: 6px !important; padding: 9px 13px !important; font-size: 12px !important; }
  .lang-switch { margin-left: 8px; padding-left: 8px; gap: 7px; }
}
/* abaixo de 980px o menu horizontal não cabe → esconde (evita clipar/encavalar) */
@media (max-width: 980px) { .site-nav { display: none; } }

/* números */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 40px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { font-family: var(--serif); font-size: 52px; font-weight: 400; line-height: 1; display: block; }
.stat span { font-size: 13px; color: var(--faint); }

/* faixa de confiança */
.trust { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.trust .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #A8A398; }
.trust .brands { display: flex; gap: 34px; flex-wrap: wrap; font-weight: 600; font-size: 16px; color: #BEB8AC; }

/* grade de cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card { background: var(--paper-2); padding: 40px 34px; display: flex; flex-direction: column; gap: 14px; min-height: 210px; }
.card p { margin: 0; font-size: 14px; line-height: 1.6; color: #77736A; }
.card--dark { background: var(--ink); color: var(--paper); }
.card--dark .num { color: var(--shu-soft); }
.card--dark h3 { color: var(--paper); }

/* cards com borda (pilares / soluções) */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: 30px; background: var(--paper-2); display: flex; flex-direction: column; gap: 14px; transition: border-color .15s ease, transform .15s ease; }
.tile:hover { border-color: var(--shu); transform: translateY(-2px); }
.tile .kanji { font-family: var(--jp); font-size: 40px; color: var(--ink); }
.tile .top { display: flex; align-items: baseline; justify-content: space-between; }

/* bloco escuro (filosofia) */
.dark { background: var(--ink); color: var(--paper); }
.dark .lead { color: #C6C1B7; }
.dark .kanji-xl { font-family: var(--jp); font-size: clamp(80px, 12vw, 120px); color: var(--shu); line-height: .9; }

/* CTA vermelho */
.cta-shu { background: var(--shu); color: var(--paper); border-radius: 16px; padding: 64px 56px; }
.cta-shu .eyebrow { color: var(--shu-tint); }
.cta-shu p { color: var(--shu-tint); }

/* formulário */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--faint); font-family: var(--mono); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  border: 1px solid #D8D2C6; border-radius: 8px; background: #fff;
  padding: 12px 14px; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--shu); }
.field textarea { min-height: 96px; resize: vertical; }

/* footer */
.site-footer { background: var(--ink); color: #C6C1B7; }
.site-footer a { color: #C6C1B7; }
.site-footer a:hover { color: var(--paper); }
.footer-col span.h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8F8A80; display: block; margin-bottom: 4px; }
.footer-bottom { border-top: 1px solid #322E29; font-family: var(--mono); font-size: 12px; color: #8F8A80; }

/* fotos da equipe */
.team-photo { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; flex: none; }
.team-photo .team-photo-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter .2s ease; }
.tile:hover .team-photo-img { filter: grayscale(0); }
.team-photo .team-mono {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); font-family: var(--serif); font-size: 26px;
}
.team-photo--lg { width: 100%; max-width: 260px; height: auto; aspect-ratio: 1; border-radius: 18px; }
.team-photo--lg .team-mono { font-size: 64px; }

/* prosa das bios */
.bio p { margin: 0 0 14px; }
.bio p:last-child { margin-bottom: 0; }

/* layout dividido com coluna sticky (pilar / consultor) */
.split { display: grid; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr !important; gap: 36px !important; }
  .split > aside, .split > div[style*="sticky"], .split > .stack-v[style*="sticky"] { position: static !important; }
  .team-photo--lg { max-width: 180px; }
  .hero .wrap { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* 6. RESPONSIVO ------------------------------------------------------------ */
@media (max-width: 900px) {
  :root { --pad: 22px; }
  .site-nav { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .grid-3, .tile-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

/* ── Página de segurança: intro, listas, nota e fase ─────────────────────── */
.seg-intro { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.seg-ul { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.seg-ul li { position:relative; padding-left:18px; font-size:14px; line-height:1.55; color:#77736A; }
.seg-ul li::before { content:"—"; position:absolute; left:0; color:var(--shu); }
.seg-ul li b { color:var(--ink); font-weight:500; }
.seg-phase { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--shu); }
.seg-note { margin-top:28px; border:1px solid var(--line); background:var(--paper-2); border-radius:10px; padding:22px 26px; font-size:14px; line-height:1.65; color:var(--muted); }
.seg-note b { color:var(--ink); font-weight:500; }
@media (max-width:680px){ .seg-intro { grid-template-columns:1fr; gap:28px; } }

/* ── Stack de tecnologias (logos por categoria) ──────────────────────────── */
.tech-row{display:grid;grid-template-columns:200px 1fr;gap:36px;padding:30px 0;border-bottom:1px solid var(--line);align-items:center}
.tech-row:first-child{border-top:1px solid var(--line)}
.tech-cat{font-family:var(--serif);font-size:19px;color:var(--ink);letter-spacing:.01em}
.tech-logos{display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.tech-logos .tlogo{height:26px;width:auto;opacity:.62;filter:grayscale(1);transition:opacity .35s,filter .35s}
.tech-logos .tlogo:hover{opacity:1;filter:grayscale(0)}
@media(max-width:680px){.tech-row{grid-template-columns:1fr;gap:14px}.tech-logos{gap:24px}}

/* ── Seletor de idioma (header) ──────────────────────────────────────────── */
.lang-switch{display:inline-flex;align-items:center;gap:10px;margin-left:18px;padding-left:18px;border-left:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.03em}
.lang-switch a{color:var(--faint);text-decoration:none;transition:color .2s}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.is-active{color:var(--shu);font-weight:600}
@media(max-width:900px){.lang-switch{margin-left:12px;padding-left:12px;gap:8px;font-size:11px}}

/* ══ Rodapé responsivo ═══════════════════════════════════════════════════ */
.foot-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
@media (max-width: 768px) {
  .foot-main { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .foot-main .footer-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 460px) { .foot-main { grid-template-columns: 1fr; } }

/* ══ Dropdown de idioma (desktop) ════════════════════════════════════════ */
.lang-dd { position: relative; margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--line); }
.lang-dd-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); padding: 4px 2px; }
.lang-dd-btn:hover { color: var(--ink); }
.lang-dd-btn .caret { transition: transform .2s; opacity: .7; }
.lang-dd.open .lang-dd-btn .caret { transform: rotate(180deg); }
.lang-dd-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 150px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(26,24,21,.10);
  display: none; flex-direction: column; gap: 2px; z-index: 40; }
.lang-dd.open .lang-dd-menu { display: flex; }
.lang-dd-menu a { font-family: var(--sans); font-size: 14px; color: var(--muted); padding: 8px 12px; border-radius: 7px; }
.lang-dd-menu a:hover { background: var(--paper-2); color: var(--ink); }
.lang-dd-menu a.is-active { color: var(--shu); }

/* ══ Hambúrguer + menu mobile ════════════════════════════════════════════ */
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s, opacity .2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; }
@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .mobile-menu { display: flex; flex-direction: column; gap: 2px; padding: 0 22px; max-height: 0;
    overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s, padding .3s ease; pointer-events: none;
    border-top: 0 solid var(--line); }
  .mobile-menu.open { max-height: 90vh; opacity: 1; pointer-events: auto; padding: 4px 22px 26px; border-top-width: 1px; }
  .mobile-menu a { font-family: var(--serif); font-size: 21px; color: var(--ink); padding: 13px 0; border-bottom: 1px solid var(--line); }
  .mobile-menu .mobile-cta { font-family: var(--sans); font-size: 15px; color: var(--paper); text-align: center;
    margin-top: 18px; padding: 15px; border-bottom: 0; font-weight: 600; }
  .mobile-langs { display: flex; gap: 20px; margin-top: 22px; }
  .mobile-langs a { border-bottom: 0; padding: 0; font-family: var(--mono); font-size: 13px; color: var(--faint); }
  .mobile-langs a.is-active { color: var(--shu); font-weight: 600; }
  body.menu-open { overflow: hidden; }
}
@media (min-width: 981px) { .mobile-menu { display: none !important; } }