/* Estilos compartilhados da home e das páginas dos aplicativos.
   Fica depois de assets/tailwind.css, então vence em caso de empate. */
  /* Redesign: tipografia, ritmo e componentes */
  body { font-size: 1.0625rem; }
  .t-display { font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.03; letter-spacing: -0.028em; }
  .t-title { font-weight: 400; font-size: clamp(1.9rem, 3.1vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; }
  .t-sub { font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.3; letter-spacing: -0.01em; }
  .t-body { color: #8FA3AC; line-height: 1.65; }
  .band { padding: 6.5rem 1.5rem; }
  .band-alt { background: rgba(3, 32, 47, 0.45); border-top: 1px solid #123449; border-bottom: 1px solid #123449; }
  .hero-bg { background: radial-gradient(55% 60% at 78% 16%, rgba(47, 221, 168, 0.13), transparent 70%); }
  .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: #2FDDA8; color: #00121E; font-weight: 600; padding: 0.95rem 1.6rem; border-radius: 999px; transition: background .2s; }
  .btn-primary:hover { background: #fff; }
  .link-quiet { color: #fff; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; transition: color .2s, border-color .2s; }
  .link-quiet:hover { color: #2FDDA8; border-color: #2FDDA8; }
  .btn-primary:focus-visible, .link-quiet:focus-visible, .app-name a:focus-visible, .faq-q:focus-visible { outline: 2px solid #2FDDA8; outline-offset: 3px; }
  .wedge-mark { flex: none; display: inline-block; width: .7rem; height: 1.1rem; background: #2FDDA8; clip-path: polygon(0 0, 72% 0, 100% 100%, 28% 100%); }
  .proof { list-style: none; padding: 0; }
  .proof li { padding-left: 1rem; border-left: 1px solid #123449; }
  /* hero: antes e depois, dentro de um celular */
  .ba { width: 100%; max-width: 20.5rem; }
  .ba-bar { display: flex; width: fit-content; margin: 0 auto; gap: 2px; padding: 4px; background: #03202F; border: 1px solid #123449; border-radius: 999px; }
  .ba-bar button { font: inherit; font-size: .85rem; font-weight: 600; padding: .45rem 1rem; border: 0; border-radius: 999px; background: transparent; color: #8FA3AC; cursor: pointer; }
  .ba-bar button[aria-selected="true"] { background: #2FDDA8; color: #00121E; }
  .ba-bar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .phone { position: relative; margin-top: 1.25rem; height: 40rem; padding: 9px; background: #00121E; border: 1px solid #1d4258; border-radius: 48px; box-shadow: 0 0 0 5px #0a2434, 0 40px 70px -35px rgba(0, 0, 0, .75); }
  .phone-key { position: absolute; width: 3px; background: #1d4258; border-radius: 2px; }
  .phone-key-a { left: -7px; top: 5.5rem; height: 2rem; }
  .phone-key-b { left: -7px; top: 8.5rem; height: 3.2rem; }
  .phone-key-c { right: -7px; top: 8rem; height: 4.5rem; }
  .phone-screen { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #03202F; border-radius: 39px; }
  .phone-status { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px 6px; font-size: .78rem; font-weight: 600; }
  .phone-island { width: 5.4rem; height: 1.45rem; background: #00121E; border-radius: 999px; }
  .phone-batt { width: 1.35rem; height: .7rem; border: 1.5px solid #8FA3AC; border-radius: 4px; position: relative; }
  .phone-batt::after { content: ''; position: absolute; inset: 1.5px; right: 5px; background: #8FA3AC; border-radius: 1.5px; }
  .ba-stage { display: grid; flex: 1; min-height: 0; }
  .ba-pane { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 0; transition: opacity .45s ease, transform .45s ease, visibility 0s linear 0s; }
  .ba[data-state="hoje"] .ba-wape, .ba[data-state="wape"] .ba-hoje { opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
  .app-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; border-bottom: 1px solid #123449; color: #fff; }
  .app-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #083143; }
  .app-avatar-accent { background: #2FDDA8; }
  .wedge-ink { background: #00121E; }
  .app-title { font-size: 1rem; font-weight: 600; }
  .app-sub { margin-left: auto; font-size: .75rem; color: #8FA3AC; }
  .chat { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; overflow: hidden; }
  .msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .msg-me { align-items: flex-end; }
  .msg-from { padding-left: 6px; font-size: .72rem; color: #8FA3AC; }
  .ba-bubble { max-width: 88%; margin: 0; padding: 10px 14px; background: #083143; border-radius: 18px 18px 18px 6px; font-size: .92rem; line-height: 1.35; }
  .ba-bubble.me { background: #2FDDA8; color: #00121E; border-radius: 18px 18px 6px 18px; }
  .ba-file { display: flex; flex-direction: column; gap: 4px; max-width: 88%; padding: 10px 14px; background: #083143; border-radius: 18px 18px 18px 6px; font-size: .88rem; }
  .ba-file-name { overflow-wrap: anywhere; }
  .text-amber { color: #F5B544; font-size: .8rem; }
  .composer { margin: 0 12px 14px; padding: 10px 16px; border: 1px solid #123449; border-radius: 999px; font-size: .88rem; color: #6c8794; }
  .ba-row { display: flex; align-items: center; gap: 10px; padding: 12px; background: #00121E; border: 1px solid #123449; border-radius: 14px; font-size: .9rem; }
  .ba-row .who { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #083143; font-size: .68rem; }
  .ba-pill { margin-left: auto; padding: .15rem .6rem; border: 1px solid rgba(47,221,168,.4); border-radius: 999px; font-size: .75rem; color: #2FDDA8; white-space: nowrap; }
  .ba-pill.warn { border-color: rgba(245,181,68,.55); color: #F5B544; }
  .ba-ok { margin: 0 12px 14px; padding: 12px 16px; border: 1px solid rgba(47,221,168,.35); border-radius: 14px; background: rgba(47,221,168,.1); color: #2FDDA8; font-size: .88rem; text-align: center; }
  /* tela do weflow dentro do celular */
  .wf-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; color: #fff; }
  .wf-logo { margin: 0 auto 0 8px; padding: 3px 8px; background: #22C5D3; color: #00121E; border-radius: 8px; font-size: .78rem; line-height: 1.2; }
  .wf-tools { display: flex; align-items: center; gap: 10px; }
  .wf-plus { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #22C5D3; color: #00121E; }
  .wf-bell { position: relative; display: inline-flex; }
  .wf-bell i { position: absolute; top: -7px; right: -8px; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #E5557A; font-size: .6rem; font-style: normal; font-weight: 700; color: #fff; }
  .wf-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #083143; font-size: .66rem; font-weight: 600; }
  .wf-body { flex: 1; min-height: 0; overflow: hidden; padding: 6px 14px 0; }
  .wf-title { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
  .wf-sub { margin: 2px 0 0; font-size: .78rem; color: #8FA3AC; }
  .wf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  .wf-stat { position: relative; padding: 12px 12px 12px 14px; background: #0b2c3b; border: 1px solid #123449; border-radius: 16px; overflow: hidden; }
  .wf-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
  .wf-stat b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
  .wf-stat span { display: block; margin-top: 8px; font-size: .78rem; color: #8FA3AC; }
  .wf-blue { --c: #4F8CF7; } .wf-amber { --c: #F5B544; } .wf-green { --c: #34C98A; } .wf-cyan { --c: #22C5D3; }
  .wf-card { margin-top: 14px; padding: 14px; background: #0b2c3b; border: 1px solid #123449; border-radius: 18px; display: flex; flex-direction: column; gap: 8px; }
  .wf-card h4 { margin: 0; font-size: 1rem; font-weight: 600; }
  .wf-card .wf-sub { margin: -4px 0 4px; }
  .wf-card .ba-row { padding: 9px 10px; font-size: .85rem; }
  /* conversa "Hoje" com painel de status */
  .chat-hoje { gap: 6px; padding: 10px 14px; }
  .chat-hoje .ba-bubble { font-size: .84rem; padding: 8px 12px; }
  .ba-status { list-style: none; margin: 0; padding: 8px 12px 10px; display: grid; gap: 5px; border-top: 1px solid #123449; background: #00121E; }
  .ba-status-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid #123449; border-radius: 12px; font-size: .78rem; line-height: 1.3; }
  .ba-icon { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #083143; color: #2FDDA8; }
  .ba-status-alert { border-color: rgba(245, 181, 68, .55); }
  .ba-status-alert .ba-icon { color: #F5B544; background: rgba(245, 181, 68, .12); }
  /* conversa "Com a wape": a mesma thread, resolvida no weflow */
  .chat-wape { gap: 6px; padding: 10px 14px; }
  .wp-brand { margin-left: auto; padding: 2px 7px; background: #22C5D3; color: #00121E; border-radius: 8px; font-size: .72rem; line-height: 1.25; flex: none; }
  .chat-wape ~ .ba-status, .app-head .app-title { white-space: nowrap; }
  .wp-task { padding: 10px 12px; background: #00121E; border: 1px solid #123449; border-radius: 14px; }
  .wp-task-top { display: flex; align-items: center; gap: 10px; }
  .wp-task-top .who { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #083143; font-size: .66rem; }
  .wp-task-id { min-width: 0; flex: 1; }
  .wp-task-title { margin: 0; font-size: .84rem; font-weight: 600; line-height: 1.25; }
  .wp-task-meta { margin: 1px 0 0; font-size: .72rem; color: #8FA3AC; }
  .wp-task-top .ba-pill { margin-left: 0; font-size: .7rem; }
  .wp-task-bar { height: 5px; margin: 10px 0 6px; background: #083143; border-radius: 999px; overflow: hidden; }
  .wp-task-bar span { display: block; width: 70%; height: 100%; background: #2FDDA8; border-radius: 999px; }
  .wp-task-foot { display: flex; justify-content: space-between; font-size: .72rem; color: #8FA3AC; }
  .wp-task-pct { color: #2FDDA8; }
  .wp-file { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #083143; border: 1px solid rgba(47, 221, 168, .3); border-radius: 14px; }
  .wp-file-ico { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #00121E; color: #2FDDA8; }
  .wp-file-txt { min-width: 0; }
  .wp-file-name { margin: 0; font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
  .wp-file-sub { margin: 1px 0 0; font-size: .7rem; color: #8FA3AC; }
  .ba-status-wape .ba-status-row { padding: 6px 10px; }
  /* listas em linhas */
  .rows { border-top: 1px solid #123449; margin: 0; padding: 0; list-style: none; }
  .row { display: flex; align-items: baseline; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid #123449; }
  .row .wedge-mark { align-self: center; }
  .row-area, .row-term { font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.01em; }
  .row-app { margin-left: auto; font-family: 'Request', sans-serif; font-weight: 700; color: #2FDDA8; text-transform: lowercase; }
  .row-accent .row-app { color: #fff; font-family: inherit; font-weight: 400; }
  .row-term { flex: 0 0 11rem; }
  .row-def { margin: 0; color: #8FA3AC; max-width: 28rem; }
  @media (max-width: 640px) { .row-term { flex-basis: 8rem; } }
  /* aplicativos */
  .app { padding: 2.5rem 0; border-top: 1px solid #123449; }
  .app:first-child { padding-top: 0; border-top: 0; }
  .app-name { font-family: 'Request', sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1; text-transform: lowercase; margin: 0; }
  .app-name a { transition: color .2s; }
  .app-name a:hover { color: #2FDDA8; }
  .app-list { list-style: none; padding: 0; }
  .app-list li { position: relative; padding-left: 1.1rem; }
  .app-list li::before { content: ''; position: absolute; left: 0; top: .72em; width: .5rem; height: 2px; background: #2FDDA8; }
  .app-custom { border-top-color: rgba(47,221,168,.45); }
  /* processo */
  .steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.5rem; position: relative; }
  .step { display: grid; gap: .35rem; }
  .step-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #2FDDA8; position: relative; z-index: 1; }
  .step-n { color: #8FA3AC; font-size: .85rem; }
  .step-t { font-size: 1.15rem; }
  @media (min-width: 768px) {
    .steps { grid-template-columns: repeat(5, 1fr); }
    .steps::before { content: ''; position: absolute; top: .35rem; left: 0; right: 0; height: 1px; background: #123449; }
  }
  /* FAQ */
  .faq-item { border-top: 1px solid #123449; padding: 1.4rem 0; }
  .faq-item:last-child { border-bottom: 1px solid #123449; }
  .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; cursor: pointer; list-style: none; font-size: 1.15rem; }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-plus { color: #2FDDA8; font-size: 1.5rem; line-height: 1; transition: transform .2s; }
  .faq-a { margin: 1rem 0 0; max-width: 40rem; }

  /* páginas dos aplicativos */
  .app-hero-name { font-family: 'Request', sans-serif; font-weight: 700; font-size: clamp(3rem, 7vw, 5.25rem); line-height: 1; letter-spacing: -0.02em; margin: 0; text-transform: lowercase; }
  .ap-phone { width: 100%; max-width: 20.5rem; }
  .ap-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 0; }
  .ap-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ap-stats-3 { grid-template-columns: repeat(3, 1fr); }
  .ap-stats-3 .wf-stat { padding-left: 12px; }
  .ap-stats-3 .wf-stat b { font-size: 1.25rem; }
  .ap-stats-3 .wf-stat span { font-size: .7rem; }
  .ap-money b { font-size: 1.15rem; }
  .ap-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: #0b2c3b; border: 1px solid #123449; border-radius: 16px; }
  .ap-line { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; }
  .ap-pct { color: #2FDDA8; }
  .ap-chart { display: flex; align-items: flex-end; gap: 8px; height: 6.5rem; }
  .ap-chart span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, #037D58, #2FDDA8); }
  .ap-strong { color: #2FDDA8; font-weight: 600; }
  .ap-deadline { justify-content: space-between; align-items: flex-start; font-size: .8rem; line-height: 1.35; }
  .ap-deadline .ba-pill { margin-left: 8px; }
  .ap-bar-track { height: 6px; background: #083143; border-radius: 999px; overflow: hidden; }
  .ap-bar-track span { display: block; height: 100%; background: #2FDDA8; border-radius: 999px; }
  .why-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #123449; }
  .why-item { padding: 1.7rem 0; border-top: 1px solid #123449; }
  .why-item p { margin: .6rem 0 0; max-width: 34rem; }
  .features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.5rem; }
  @media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
  .features li { display: flex; gap: .8rem; align-items: flex-start; padding: 1.05rem 0; border-top: 1px solid #123449; color: #8FA3AC; font-size: .95rem; line-height: 1.5; }
  .features .wedge-mark { margin-top: .3rem; }
  .btn-ghost { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(47,221,168,.55); color: #2FDDA8; font-weight: 600; padding: .95rem 1.6rem; border-radius: 999px; transition: background .2s; }
  .btn-ghost:hover { background: rgba(47,221,168,.12); }
  .btn-ghost:focus-visible { outline: 2px solid #2FDDA8; outline-offset: 3px; }
  a.row { text-decoration: none; color: inherit; }
  a.row:hover .row-area { color: #2FDDA8; }
  a.row:focus-visible { outline: 2px solid #2FDDA8; outline-offset: -2px; }

  /* janela de aplicativo (páginas dos apps) */
  .win { border: 1px solid #123449; border-radius: 18px; background: #03202F; overflow: hidden; box-shadow: 0 50px 90px -60px rgba(0, 0, 0, .9); }
  .win-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #00121E; border-bottom: 1px solid #123449; }
  .win-dot { width: 10px; height: 10px; border-radius: 50%; background: #1d4258; }
  .win-tab { margin-left: 12px; font-size: .85rem; color: #8FA3AC; }
  .win-body { padding: 18px; }
  @media (min-width: 768px) { .win-body { padding: 24px; } }
  .win-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 768px) { .win-stats-4 { grid-template-columns: repeat(4, 1fr); } .win-stats-3 { grid-template-columns: repeat(3, 1fr); } }
  .win-stats-3 { grid-template-columns: repeat(3, 1fr); }
  .win .wf-stat b { font-size: 1.6rem; }
  .win-grid { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: 1fr; }
  @media (min-width: 768px) { .win-grid { grid-template-columns: repeat(3, 1fr); } .win-grid-4 { grid-template-columns: repeat(4, 1fr); } }
  .kan { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: 1fr; }
  @media (min-width: 768px) { .kan { grid-template-columns: repeat(3, 1fr); } }
  .kan-col { padding: 14px; background: #00121E; border: 1px solid #123449; border-radius: 14px; }
  .kan-h { margin: 0 0 10px; font-size: .78rem; color: #8FA3AC; }
  .kan-card { margin-bottom: 8px; padding: 11px 12px; background: #03202F; border: 1px solid #123449; border-radius: 10px; font-size: .9rem; }
  .kan-card:last-child { margin-bottom: 0; }
  .kan-card.prog { border-color: rgba(47, 221, 168, .4); }
  .kan-card.done { color: #8FA3AC; text-decoration: line-through; }
  .win .ap-chart { height: 11rem; }
  .win-list { display: grid; gap: 10px; margin-top: 16px; }
  .win-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #00121E; border: 1px solid #123449; border-radius: 12px; font-size: .92rem; }
  .win-row-hot { border-color: rgba(245, 181, 68, .55); }