@import url("ds/styles.css");

/* DZB Invest — CSS estático (sem JavaScript). Tokens: Lopes CRM Design System. */
html { scroll-behavior: smooth; }
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--foreground); color: var(--background); }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
details[open] > summary svg { transform: rotate(180deg); }
details > summary svg { transition: transform var(--dur) var(--ease); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--background); border-bottom: 1px solid var(--border); font-family: var(--font-sans); color: var(--foreground); -webkit-font-smoothing: antialiased; }
.hd-in { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px,5vw,40px); height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: baseline; gap: 7px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.logo span { font-weight: 400; color: var(--muted-fg); letter-spacing: 0; }
.nav { display: flex; align-items: stretch; gap: clamp(18px,2.4vw,30px); height: 68px; }
.nav a { display: inline-flex; align-items: center; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--muted-fg); transition: color var(--dur) var(--ease); }
.nav a:hover { color: var(--foreground); }
.nav a[aria-current="page"] { position: relative; color: var(--foreground); font-weight: 600; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--foreground); }
.hd-right { display: flex; align-items: center; gap: 10px; }
.mnav { display: none; }
.mnav summary { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--card); color: var(--foreground); cursor: pointer; }
.mnav-panel { position: absolute; left: 0; right: 0; top: 68px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--background); padding: 12px clamp(20px,5vw,40px) 20px; }
.mnav-panel nav { display: flex; flex-direction: column; margin-bottom: 16px; }
.mnav-panel nav a { padding: 13px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--border); }
.nav-dd { position: relative; display: inline-flex; align-items: stretch; }
.nav-dd > a { gap: 6px; }
.nav-dd-panel { position: absolute; left: -12px; top: calc(100% + 1px); z-index: 60; min-width: 240px; padding: 6px; display: none; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-popover); }
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { display: flex; }
.nav-dd-panel a { display: flex; align-items: center; padding: 9px 12px; border-radius: var(--radius-control); font-size: 14px; font-weight: 500; color: var(--foreground); transition: background var(--dur) var(--ease); }
.nav-dd-panel a:hover { background: var(--hover); color: var(--foreground); }
.mnav-group { padding: 13px 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); }
.mnav-panel nav a.mnav-sub { padding-left: 12px; font-size: 15.5px; }
@media (max-width: 1023px) { .nav, .hd-cta { display: none !important; } .mnav { display: block; } }

/* Seletor de país (Softlanding) */
.dd { position: relative; }
.dd > summary { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-control); box-shadow: var(--shadow); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.dd > summary img, .dd ul img { border-radius: 3px; object-fit: cover; border: 1px solid var(--border); flex: none; }
.dd > summary img { width: 28px; height: 21px; }
.dd ul { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 260px; max-height: 360px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-popover); }
.dd ul a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-control); font-size: 14px; font-weight: 500; color: var(--foreground); }
.dd ul a img { width: 24px; height: 18px; }
.dd ul a:hover, .dd ul a[aria-selected="true"] { background: var(--hover); }

/* Seletor de idioma */
.lang { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; background: var(--card); }
.lang a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-fg); }
.lang a[aria-current="true"] { background: var(--primary); color: var(--primary-fg); }
.lang a span { display: inline-block; width: 18px; height: 13px; border-radius: 2px; background-size: cover; background-position: center; }

/* Button (DS Button) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; border-radius: var(--radius-control); border: 1px solid transparent; cursor: pointer; user-select: none; transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--ring); }
.btn-sm { height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14px; gap: 8px; }
.btn-full { width: 100%; }
.btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn-outline:hover, .btn-ghost:hover { background: var(--hover); }
.btn-ghost { background: transparent; color: var(--foreground); }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 9999px; font-family: var(--font-sans); font-size: 12px; font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; border: 1px solid transparent; }
.badge-soft { background: var(--muted); color: var(--muted-fg); }
.badge-outline { background: transparent; color: var(--foreground); border-color: var(--border); }

/* StatCard */
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--card-pad); }
.stat-label { font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--muted-fg); }
.stat-value { margin-top: 10px; font-size: var(--text-kpi); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--foreground); }
.stat-hint { margin-top: 6px; font-size: 12px; color: var(--muted-fg); }

/* Breadcrumb */
.crumbs { font-family: var(--font-sans); font-size: 13px; }
.crumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumbs a { color: var(--muted-fg); transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--foreground); }
.crumbs [aria-current="page"] { color: var(--foreground); font-weight: var(--weight-medium); }

/* StageStepper */
.stepper { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.stepper li { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 9999px; font-family: var(--font-sans); font-size: 12.5px; font-weight: var(--weight-medium); white-space: nowrap; color: var(--muted-fg); border: 1px solid var(--border); }
.stepper li.on { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

/* Avatar */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; flex-shrink: 0; font-family: var(--font-sans); font-weight: var(--weight-semibold); letter-spacing: 0.01em; overflow: hidden; }

/* Form controls (DS Input / Textarea / Select / SegmentedControl) */
/* Controles com 44px de altura (alvo de toque) e fonte de 16px: abaixo disso o iOS dá zoom ao focar. 80% do público é mobile. */
.field { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 11px; background: var(--background); border: 1px solid var(--input); border-radius: var(--radius-control); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field-lg { height: 44px; }
.field:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-family: var(--font-sans); font-size: 16px; color: var(--foreground); padding: 0; }
.textarea, .select { width: 100%; background: var(--background); border: 1px solid var(--input); border-radius: var(--radius-control); font-family: var(--font-sans); font-size: 16px; color: var(--foreground); outline: 0; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.textarea { padding: 9px 11px; line-height: 1.5; resize: vertical; display: block; }
.select { height: 44px; padding: 0 34px 0 11px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.textarea:focus, .select:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--accent-soft); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-control); max-width: 100%; }
.seg label { position: relative; display: inline-flex; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-medium); color: var(--muted-fg); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg input:checked + span { background: var(--card); color: var(--foreground); box-shadow: var(--shadow); }
.seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Filtro de formato da central de conteúdos — CSS puro, sem JS */
section:has(#fmt-drop:checked) [data-fmt]:not([data-fmt="drop"]),
section:has(#fmt-report:checked) [data-fmt]:not([data-fmt="report"]),
section:has(#fmt-corte:checked) [data-fmt]:not([data-fmt="corte"]) { display: none !important; }

/* Depoimentos — marquee horizontal (CSS puro) */
@keyframes dzb-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 10px)); } }
/* movimento reduzido: desliza bem mais devagar em vez de parar (o "reduce" do Windows vem ligado em muitas máquinas) */
@media (prefers-reduced-motion: reduce) { [data-marquee] { animation-duration: 180s !important; } }

/* Linha do tempo — scroll-driven, CSS puro */
@keyframes dzb-tl-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes dzb-tl-dot { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dzb-tl-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@supports (animation-timeline: view()) {
  [data-tl-card] { animation: dzb-tl-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  [data-tl-dot]  { animation: dzb-tl-dot linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  [data-tl-line] { animation: dzb-tl-line linear both; animation-timeline: view(); animation-range: entry 15% exit 85%; }
}
@media (min-width: 880px) {
  [data-tl] > div { left: calc(50% - 1px) !important; }
  [data-tl-item] { grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) !important; }
  [data-tl-item] > span { grid-column: 2 !important; grid-row: 1; margin-left: 7px !important; }
  [data-side="l"] > div { grid-column: 1 !important; grid-row: 1; }
  [data-side="r"] > div { grid-column: 3 !important; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { [data-tl-card], [data-tl-dot], [data-tl-line] { animation: none !important; } }

/* Contato — contexto Softlanding (país da empresa) só para Softlanding; Estágio para os demais (sem JS) */
body:not(:has(#assunto-softlanding:checked)) [data-only="pais"] { display: none; }

/* utilitários gerados (hover) */
.u0:hover{color:var(--foreground) !important;border-color:var(--ring) !important}
.u1:hover{color:var(--foreground) !important}
.u2:hover{border-color:var(--ring) !important}
.u3:hover,.u3:focus-within{animation-play-state:paused !important}
.u4:hover{color:var(--muted-fg) !important}

.ctx-pais > summary::-webkit-details-marker { display: none; }
.ctx-pais[open] > summary > span:last-child { background: var(--accent-soft); }

/* Home — cards de serviço: inversão de cores no hover/foco */
.card-inv:hover, .card-inv:focus-visible, .card-inv:active { background: var(--foreground) !important; color: var(--background) !important; border-color: var(--foreground) !important; outline: none; }

/* Mobile — alvos de toque >= 44px (iPhone SE 320px a Galaxy S Ultra 430px) */
.lang a { height: 44px; padding: 0 12px; }
.seg span { height: 40px; padding: 0 14px; }
.ctx-pais > summary > span:last-child { height: 40px !important; padding: 0 14px !important; }
.logo { padding: 11px 0; }
@media (max-width: 640px) { .seg { display: flex; } .seg label { flex: 1 1 auto; } .seg span { width: 100%; justify-content: center; height: 44px; } }
/* Gestão de Rodada: tabs-link e CTA escuro */
.rt-tab:hover { color: var(--foreground); }
.rt-cta:hover { opacity: 0.88; color: var(--background); }

/* Botão flutuante do WhatsApp (tools/whatsapp.mjs; comentado no HTML até haver número). Verde escuro: ícone branco com contraste 4,1:1. */
.wa { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: #128C7E; color: #fff; box-shadow: var(--shadow-popover); transition: transform var(--dur) var(--ease); }
.wa:hover { transform: scale(1.06); }
.wa:focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa { transition: none; } .wa:hover { transform: none; } }