/* css/base.css */
/* duoh.app · base: tokens (same names as Paper "Grok Bot"), fonts, reset, layout, shared pieces, motion. */

/* Inter comes from Google Fonts (index.html), with its optical-size axis: large titles get the tighter display cut, as in Paper. */

:root {
  /* Text */
  --color-text: #1D1D1F;
  --color-text-muted: #5F5F64;
  --color-text-disabled: #00000059;
  --color-text-placeholder: #86868B;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #FFFFFFCC;
  --color-on-dark-fill: #FFFFFF1F;
  --color-on-dark-fill-hover: #FFFFFF33;
  --color-on-dark-fill-pressed: #FFFFFF47;
  /* Surfaces */
  --color-surface: #FFFFFF;
  --color-window: #F9F9FBF2;
  --color-main: #FFFFFFE6;
  --color-fill-1: #F5F5F7;
  --color-fill-2: #F1F1F4;
  /* States and lines */
  --color-tint-hover: #0000000D;
  --color-tint-hover-soft: #00000008;
  --color-tint-selected: #0000000F;
  --color-tint-pressed: #0000001A;
  --color-divider: #00000012;
  --color-border: #0000001F;
  --color-border-hover: #00000033;
  --color-border-dashed: #0000002E;
  --color-overlay: #1D1D1F59;
  --color-primary: #1D1D1F;
  --color-primary-hover: #3A3A3C;
  --color-primary-pressed: #000000;
  --color-focus: #1D1D1F;
  --color-selection: #1D1D1F26;
  /* Success / warn / danger */
  --color-success: #2FA866;
  --color-success-bg: #E7F6EE;
  --color-success-text: #1E7A47;
  --color-warn: #E8950C;
  --color-warn-text: #9A5B00;
  --color-warn-bg: #FFF4E2;
  --color-warn-strong: #6B4300;
  --color-warn-action: #E8950C33;
  --color-danger: #D6453D;
  --color-danger-text: #B4322A;
  --color-danger-bg: #FDECEB;
  --color-danger-strong: #8A251F;
  --color-danger-border: #D6453D33;
  --color-danger-action: #D6453D29;
  /* Bots */
  --color-bot-teal: #4FBFA8;
  --color-bot-orange: #F29A4A;
  --color-bot-blue: #6F8DF2;
  --color-bot-blue-bg: #EAF0FD;
  --color-bot-blue-text: #3B55B8;
  --color-bot-pink: #E77BA6;
  --color-bot-yellow: #E3B23C;
  --color-bot-bubble: #E3F5F0;
  /* Wallpaper */
  --color-wall-peach: #FBE3D6;
  --color-wall-pink: #F6D5E4;
  --color-wall-lilac: #E2D8F5;
  --color-wall-blue: #C9D8F2;
  /* Imitations */
  --color-whatsapp-bg: #EFE7DD;
  --color-whatsapp-green: #25D366;
  /* Shadows (only floating things) */
  --color-shadow: #0000001F;
  --color-shadow-strong: #00000033;
  --shadow: 0 8px 24px var(--color-shadow);
  --shadow-strong: 0 16px 48px var(--color-shadow-strong);

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-full: 999px;
  --container: 1120px;
  --gutter: 40px;

  /* Motion (transitions.dev scale, same as the app's src/motion.rs) */
  --dur-micro: 80ms; --dur-quick: 150ms; --dur-fast: 250ms; --dur-medium: 350ms; --dur-slow: 400ms; --dur-very-slow: 500ms;
  --stagger: 40ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
}

/* Phones: sizes follow the screen width (320 SE … 430 Pro Max) so every phone uses its whole width.
   Ranges were tuned at 320, 360, 375, 390, 393, 412, 414 and 430. */
@media (max-width: 760px) {
  :root {
    --gutter: clamp(16px, 5.4vw, 24px);
    --m-title: clamp(29px, 9.4vw, 40px);       /* section titles: 30 at 320, 37 at 390, 40 at 430 */
    --m-title-lh: 1.1;
    --m-lead: clamp(16px, 4.4vw, 18px);
    --m-num: clamp(52px, 17vw, 72px);          /* big stats (82%, 8 em 10) */
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-optical-sizing: auto;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex-shrink: 0; }
::selection { background: var(--color-selection); }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 120px; }
@media (max-width: 760px) { .section { padding-block: 72px; } }

/* Shared type. Titles and paragraphs wrap "pretty": no word left alone on the last line. */
h1, h2, h3, h4, p, li, .h-section, .lead { text-wrap: pretty; }
.eyebrow { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--color-text-muted); }
.h-section { font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -0.03em; }
.h-section .muted { color: var(--color-text-placeholder); }
.lead { font-size: 18px; line-height: 28px; color: var(--color-text-muted); }
@media (max-width: 760px) {
  .h-section { font-size: var(--m-title); line-height: var(--m-title-lh); }
  .lead { font-size: var(--m-lead); line-height: 1.5; }
}

/* Buttons (guide: Botões · Estados). Hover in 150ms, out 250ms, pressing never animates. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding-inline: 22px; border-radius: var(--radius-full);
  font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-smooth-out), box-shadow var(--dur-fast) var(--ease-smooth-out), color var(--dur-fast) var(--ease-smooth-out), border-color var(--dur-fast) var(--ease-smooth-out);
  position: relative;
}
.btn:hover { transition-duration: var(--dur-quick); }
.btn:active { transition: none; }
.btn-lg { height: 52px; padding-inline: 26px; font-size: 16px; }
.btn-primary { background: var(--color-primary); color: var(--color-on-dark); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-pressed); }
.btn-grey { background: var(--color-fill-2); color: var(--color-text); }
.btn-grey:hover { box-shadow: inset 0 0 0 100px var(--color-tint-hover); }
.btn-grey:active { box-shadow: inset 0 0 0 100px var(--color-tint-pressed); }
.btn-text { background: none; color: var(--color-text-muted); padding-inline: 12px; }
.btn-text:hover { color: var(--color-text); }

/* Focus: ring only after keyboard (focus-visible), 2px, 2px away, same corners. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Bordered card that reacts: only the border darkens. */
.card-hover { transition: border-color var(--dur-fast) var(--ease-smooth-out); }
.card-hover:hover { border-color: var(--color-border-hover) !important; transition-duration: var(--dur-quick); }

/* ---------- Motion ---------- */

/* Scroll reveal: [data-reveal] rises 12px and fades in when it enters the viewport.
   Variants: data-reveal="fade" (no move), "left", "right", "scale". Delay: style="--d: 120ms",
   or put data-reveal-group on a parent: its [data-reveal] children get a 60ms stagger. */
.js [data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-very-slow) var(--ease-smooth-out), transform 700ms var(--ease-smooth-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translateX(-24px); }
.js [data-reveal="right"] { transform: translateX(24px); }
.js [data-reveal="scale"] { transform: scale(0.97); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Chat messages played by duoh.chat(): hidden until their turn, then rise in. */
.js [data-msg] { display: none; }
.js [data-msg].is-shown { display: flex; animation: msg-in var(--dur-slow) var(--ease-smooth-out) both; }
.js [data-msg][data-display="block"].is-shown { display: block; }
.js [data-msg][data-display="grid"].is-shown { display: grid; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Typing indicator inserted by duoh.chat() (guide: "Digitando", three dots, no text). */
.typing { display: flex; align-items: center; gap: 4px; width: fit-content; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--color-fill-2); animation: msg-in var(--dur-fast) var(--ease-smooth-out) both; }
.typing.is-bot { background: var(--color-bot-bubble); }
.typing.is-me { margin-left: auto; border-radius: 14px 14px 4px 14px; background: var(--color-primary); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-placeholder); animation: typing-dot 1.2s infinite ease-in-out; }
.typing.is-me i { background: var(--color-on-dark-muted); }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Small living details anyone can use. */
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 45%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 0%, transparent); } }
.live-dot { animation: pulse-dot 2s var(--ease-in-out) infinite; border-radius: 50%; }
@keyframes blink-eyes { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
/* Put .blink on a mascot <svg>: its eye <rect>s blink every few seconds. */
.blink rect[width="2.8"] { transform-box: fill-box; transform-origin: center; animation: blink-eyes 4.5s infinite; }
.blink:nth-of-type(2n) rect[width="2.8"] { animation-delay: 1.7s; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.9s linear infinite; }

/* Logo (Paper "Logo · ideias" 20): Geist 600 wordmark and the black face. Its eyes look around and
   blink now and then, so it reads as a bot, never as a pause button. */
.logo-word { font-family: "Geist", var(--font-sans); font-weight: 600; letter-spacing: -0.05em; }
.logo-eyes { animation: logo-look 9s var(--ease-in-out) infinite; }
.logo-eyes rect { transform-box: fill-box; transform-origin: center; animation: logo-blink 9s infinite; }
@keyframes logo-look {
  0%, 14% { transform: translate(0, 0); }
  18%, 34% { transform: translate(2.2px, -0.8px); }
  38%, 52% { transform: translate(-2.2px, -0.6px); }
  56%, 100% { transform: translate(0, 0); }
}
@keyframes logo-blink {
  0%, 60%, 63.5%, 85%, 87%, 89%, 91%, 100% { transform: scaleY(1); }
  61.5% { transform: scaleY(0.12); }
  86%, 90% { transform: scaleY(0.12); }
}

/* Reduce motion turns every animation off: everything is simply there. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-msg] { display: flex; }
  .js [data-msg][data-display="block"] { display: block; }
  .js [data-msg][data-display="grid"] { display: grid; }
}

/* css/01-header.css */
/* Header: sticky, white with a translucent blur once the page scrolls (divider appears). */
.hd { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-smooth-out), background-color var(--dur-fast) var(--ease-smooth-out); }
.hd.is-scrolled { border-bottom-color: var(--color-divider); background: var(--color-main); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); }
.hd-row { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.hd-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 26px; }
.hd-nav { display: flex; gap: 32px; }
.hd-nav a { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-text-muted); transition: color var(--dur-fast) var(--ease-smooth-out); cursor: pointer; }
.hd-nav a:hover { color: var(--color-text); transition-duration: var(--dur-quick); }
.hd-nav a:focus-visible { border-radius: var(--radius-xs); }
@media (max-width: 860px) { .hd-nav { display: none; } .hd-row { height: 64px; } .hd-cta { height: 38px; padding-inline: 16px; font-size: 14px; } }

/* css/02-hero.css */
.hr { padding: 80px 0 56px; }
.hr-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.hr-badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding-inline: 12px; border-radius: 15px; background: var(--color-fill-2); font-size: 13px; line-height: 18px; font-weight: 500; }
.hr-title { max-width: 900px; font-size: 64px; line-height: 70px; font-weight: 600; letter-spacing: -0.035em; text-wrap: pretty; }
.hr-sub { max-width: 680px; font-size: 20px; line-height: 30px; color: var(--color-text-muted); }
.hr-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 10px; }
.hr-buttons { display: flex; align-items: center; gap: 16px; padding-top: 12px; flex-wrap: wrap; justify-content: center; }
.btn-lg { font-size: 17px; line-height: 22px; gap: 10px; }
.btn-text.btn-lg { padding-inline: 16px; }
.hr-note { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }

/* The chat icon's three dots "type" while the mouse is over the black button. */
.hr-dot { transition: opacity var(--dur-fast) var(--ease-smooth-out); }
.btn-primary:hover .hr-dot { animation: hr-type 1s infinite ease-in-out; }
.btn-primary:hover .hr-dot-2 { animation-delay: 0.15s; }
.btn-primary:hover .hr-dot-3 { animation-delay: 0.3s; }
@keyframes hr-type { 0%, 60%, 100% { opacity: 0.45; } 30% { opacity: 1; } }

@media (max-width: 760px) {
  .hr { padding: 48px 0 40px; }
  /* Grows with the screen so it fills the width: 48px on a 390 phone. */
  .hr-title { font-size: clamp(40px, 12.4vw, 64px); line-height: 1.04; letter-spacing: -0.04em; }
  .hr-sub { font-size: clamp(16px, 4.5vw, 19px); line-height: 1.55; }
  .hr-buttons { flex-direction: column; gap: 4px; width: 100%; }
  .hr-actions { width: 100%; }
  .hr-buttons .btn-primary, .hr-buttons .btn-text { width: 100%; padding-inline: 16px; font-size: clamp(15px, 4.6vw, 17px); }
}

/* css/03-rotinas.css */
/* 03-rotinas · "Rotinas inteiras, feitas pelos bots." Tabs + one Quadro per routine (Paper M6A-0, NCO-0, NPC-0, NUD-0, NZR-0, O33-0). */

.rt {
  padding: 96px 0 64px;
  background-image: linear-gradient(100deg, var(--color-wall-peach) 0%, var(--color-wall-pink) 35%, var(--color-wall-lilac) 65%, var(--color-wall-blue) 100%);
  background-image: linear-gradient(in oklab 100deg, var(--color-wall-peach) 0%, var(--color-wall-pink) 35%, var(--color-wall-lilac) 65%, var(--color-wall-blue) 100%);
}
.rt-inner { display: flex; flex-direction: column; align-items: center; }
.rt-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rt-lead { max-width: 640px; }

/* Tabs (bordered pills; selected is black). Hover only darkens the border; pressing never animates. */
.rt-tabs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 900px; margin-top: 28px; }
.rt-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px;
  border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); color: var(--color-text);
  font-size: 14px; line-height: 20px; white-space: nowrap; flex-shrink: 0; user-select: none;
  transition: border-color var(--dur-fast) var(--ease-smooth-out), background-color var(--dur-fast) var(--ease-smooth-out), color var(--dur-fast) var(--ease-smooth-out);
}
.rt-tab:hover { border-color: var(--color-border-hover); transition-duration: var(--dur-quick); }
.rt-tab:active { background: var(--color-fill-1); border-color: var(--color-border-hover); transition: none; }
.rt-tab[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }
.rt-tab[aria-selected="true"]:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.rt-tab[aria-selected="true"]:active { background: var(--color-primary-pressed); border-color: var(--color-primary-pressed); }

/* Stage: every Quadro sits in the same cell; JS sets the height to the active one and eases it. */
/* Clipped so the taller hidden Quadros never hang below it. */
.rt-stage { display: grid; width: 100%; margin-top: 40px; overflow: clip; overflow-clip-margin: 8px; transition: height var(--dur-medium) var(--ease-smooth-out); }
.rt-quadro {
  grid-area: 1 / 1; align-self: start; min-width: 0;
  display: flex; flex-direction: column; gap: 36px; padding: 40px 40px 36px;
  background: var(--color-main); border-radius: var(--radius-lg);
  transition: opacity var(--dur-medium) var(--ease-smooth-out), transform var(--dur-medium) var(--ease-smooth-out), visibility 0s;
}
.rt-quadro:not(.is-active) {
  visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-quick) var(--ease-smooth-out), transform 0s var(--dur-quick), visibility 0s var(--dur-quick);
}
.rt-quadro:focus-visible { outline-offset: 4px; }

.rt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rt-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rt-title { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.rt-pill {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 30px; padding: 6px 12px; border-radius: 15px;
  background: var(--color-success-bg); color: var(--color-success-text); font-size: 13px; line-height: 18px; font-weight: 500;
}
.rt-pill i, .rt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.rt-dot.is-warn { background: var(--color-warn); }

.rt-cols { display: flex; align-items: center; gap: 64px; }
.rt-side { display: flex; flex-direction: column; gap: 14px; width: 380px; flex-shrink: 0; }
.rt-main { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; }
.rt-label { font-size: 15px; line-height: 22px; font-weight: 600; }
.rt-label span { margin-left: 8px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--color-text-muted); }

/* What the person receives: the card waiting for approval. */
.rt-tray { padding: 28px; border-radius: var(--radius-lg); background: var(--color-fill-1); }
.rt-card { display: flex; flex-direction: column; gap: 18px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.rt-card-head { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; }
.rt-card-head b { font-weight: 600; }
.rt-card-sum { display: flex; flex-direction: column; gap: 4px; }
.rt-amount { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.rt-card-desc { font-size: 15px; line-height: 22px; color: var(--color-text-muted); }
.rt-status { display: flex; align-items: center; gap: 8px; color: var(--color-success-text); }
.rt-status.is-warn { color: var(--color-warn-text); }
.rt-cta { width: 100%; }

/* Timeline of what the bots did. */
.rt-step { display: flex; gap: 16px; }
.rt-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 28px; flex-shrink: 0; }
.rt-line { flex: 1; width: 1.5px; min-height: 12px; border-radius: 1px; background: var(--color-border); }
.rt-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 3px 0 28px; font-size: 16px; line-height: 22px; }
.rt-step:last-child .rt-body { padding-bottom: 0; }
.rt-who b { font-weight: 600; }
.rt-who > span { color: var(--color-text-muted); }
/* Template A: name line and sentence read as one block (Paper: one text with a line break). */
.rt-body > .rt-who + p { margin-top: -12px; }
.rt-avatar {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0;
  border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface);
  font-size: 12px; line-height: 16px; font-weight: 600;
}
.rt-source, .rt-file {
  display: flex; align-items: center; gap: 8px; height: 36px; padding-inline: 12px; width: 360px; max-width: 100%;
  border-radius: 18px; background: var(--color-fill-2); color: var(--color-text-muted); font-size: 13px; line-height: 18px;
}
.rt-file { width: 300px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); }
.rt-file span { color: var(--color-text); }
.rt-source span, .rt-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Live state glyph after the bot's name (added by JS): loader while working, then a check that fades. */
.rt-state { position: relative; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -1px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-smooth-out); }
.rt-state svg { position: absolute; inset: 0; transition: opacity var(--dur-fast) var(--ease-in-out); }
.rt-state .rt-loader { color: var(--color-text-muted); }
.rt-state .rt-check { color: var(--color-success-text); opacity: 0; }
.rt-state.is-work, .rt-state.is-done { opacity: 1; }
.rt-state.is-done .rt-loader { opacity: 0; }
.rt-state.is-done .rt-check { opacity: 1; }

/* Footer: the takeaway and what the bots used. */
.rt-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--color-divider); }
.rt-foot-text { max-width: 520px; font-size: 15px; line-height: 22px; }
.rt-foot-text span { color: var(--color-text-muted); }
.rt-chips { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.rt-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px;
  border: 1px solid var(--color-border); border-radius: 17px; background: var(--color-surface);
  font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; color: var(--color-text);
}
.rt-chip svg, .rt-source svg, .rt-file svg { color: var(--color-text-muted); }

/* Tab 2: WhatsApp on the left, the timeline with times on the right. */
.rt-quadro--wa .rt-cols { align-items: stretch; gap: 56px; }
.rt-quadro--wa .rt-side { width: 400px; }
.rt-quadro--wa .rt-main { gap: 14px; }
.rt-wa { position: relative; flex: 1; padding: 20px; border-radius: var(--radius-lg); background: var(--color-whatsapp-bg); }
/* Block flow (not flex) so the floating typing dots take the static position of the next message. */
.rt-wa > :not(.typing) ~ * { margin-top: 10px; }
.rt-row { display: flex; }
.rt-row.is-bot { justify-content: flex-end; }
.rt-row.is-note { justify-content: center; padding-block: 6px; }
.rt-bubble { display: flex; flex-direction: column; gap: 2px; max-width: 280px; padding: 8px 12px; border-radius: 12px; background: var(--color-surface); }
.is-bot .rt-bubble { background: var(--color-bot-bubble); }
.rt-bubble span, .rt-pdf-time { font-size: 12px; line-height: 16px; color: var(--color-text-muted); text-align: right; }
.rt-note { display: flex; align-items: center; height: 26px; padding-inline: 12px; border-radius: 13px; background: var(--color-main); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-text-muted); }
.rt-pdf { display: flex; flex-direction: column; gap: 6px; width: 240px; max-width: 100%; padding: 6px; border-radius: 12px; background: var(--color-bot-bubble); }
.rt-pdf-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--color-surface); color: var(--color-text-muted); }
.rt-pdf-file span { display: flex; flex-direction: column; }
.rt-pdf-file b { font-weight: 500; color: var(--color-text); }
.rt-pdf-file small { font-size: 12px; line-height: 16px; }
.rt-pdf-time { padding-inline: 6px; }
/* Typing dots float over the message's empty slot, so the box never grows while the chat plays. */
.rt-wa .typing { position: absolute; }
.js .rt-wa [data-msg] { display: flex; visibility: hidden; }
.js .rt-wa [data-msg].is-shown { visibility: visible; }

.rt-quadro--wa .rt-step { gap: 14px; }
.rt-time { width: 40px; flex-shrink: 0; padding-top: 4px; font-size: 13px; line-height: 20px; color: var(--color-text-muted); }
.rt-quadro--wa .rt-body { padding-top: 4px; font-size: 14px; line-height: 20px; }
.rt-body-text { display: flex; flex-direction: column; gap: 2px; }
.rt-quadro--wa .rt-who { font-size: 15px; line-height: 20px; }
.rt-what { color: var(--color-text-muted); }

.rt-sheets { display: flex; gap: 10px; }
.rt-sheet { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; overflow: clip; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.rt-sheet-head { display: flex; align-items: center; gap: 8px; height: 34px; padding-inline: 12px; background: var(--color-fill-1); border-bottom: 1px solid var(--color-divider); font-size: 13px; line-height: 18px; white-space: nowrap; }
.rt-sheet-head b { font-weight: 500; }
.rt-sheet-head small { font-size: 12px; line-height: 16px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; }
.rt-dots { display: flex; gap: 4px; }
.rt-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-hover); }
.rt-url { display: flex; align-items: center; flex: 1; min-width: 0; height: 20px; padding-inline: 8px; border-radius: var(--radius-xs); background: var(--color-surface); font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.rt-sheet-rows { display: flex; flex-direction: column; padding: 4px 12px 6px; }
.rt-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; font-size: 13px; line-height: 18px; }
.rt-sheet-row + .rt-sheet-row { border-top: 1px solid var(--color-divider); }
.rt-sheet-row span { color: var(--color-text-muted); }
.rt-sheet-row b { font-weight: 600; white-space: nowrap; }

.rt-approve { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.rt-approve-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-approve-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-text-muted); }
.rt-approve-amount { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.rt-approve-desc { font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
.rt-approved { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; border-radius: 17px; background: var(--color-success-bg); color: var(--color-success-text); font-size: 13px; line-height: 18px; font-weight: 600; }

/* Playback: steps, the card and sub-parts keep their space and rise in when their turn comes. */
.js .rt [data-beat], .js .rt [data-at], .js .rt [data-sub] {
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-smooth-out), transform var(--dur-slow) var(--ease-smooth-out);
}
.js .rt .is-in[data-beat], .js .rt .is-in[data-at], .js .rt .is-in[data-sub] { opacity: 1; transform: none; }

/* The WhatsApp routine stacks from 1000; the others keep approval card and steps side by side to 761. */
@media (max-width: 1000px) {
  .rt-quadro--wa .rt-cols { flex-direction: column; align-items: stretch; gap: 40px; }
  .rt-quadro--wa .rt-side { width: auto; }
  .rt-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rt-cols { gap: 32px; }
  .rt-side { width: 44%; flex-shrink: 0; }
}
@media (max-width: 760px) {
  .rt-cols { flex-direction: column; align-items: stretch; gap: 40px; }
  .rt-side { width: auto; }
}

@media (max-width: 760px) {
  .rt { padding: 72px 0 48px; }
  /* Tabs scroll sideways inside their own row, edge to edge. */
  .rt-tabs {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    width: auto; max-width: none; align-self: stretch; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .rt-tabs::-webkit-scrollbar { display: none; }
  .rt-stage { margin-top: 28px; }
  .rt-quadro { gap: 28px; padding: 24px 20px; }
  .rt-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rt-title { font-size: clamp(21px, 6.4vw, 27px); line-height: 1.25; }
  .rt-pill { flex-shrink: 1; }
  .rt-tray { padding: 16px; }
  .rt-amount { font-size: clamp(28px, 8.8vw, 36px); line-height: 1.15; }
  .rt-quadro--wa .rt-step { gap: 10px; }
  .rt-time { width: 34px; }
  .rt-sheets { flex-direction: column; }
}

/* css/04-problema.css */
/* 04 · O problema (Paper MD8-0, agenda "com o duoh" P7H-0) */

.pb { padding-top: 128px; }
.pb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.pb-head-main { display: flex; flex-direction: column; gap: 16px; }
.pb-eyebrow { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-text-muted); }
.pb-title { font-size: 48px; line-height: 54px; }
.pb-lead { width: 360px; flex-shrink: 0; padding-bottom: 6px; }

/* Bento */
.pb-bento { display: flex; flex-direction: column; gap: 16px; }
.pb-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 640fr) minmax(0, 464fr); }
.pb-row-b { grid-template-columns: minmax(0, 1fr) 640px; } /* 640 holds the whole agenda, so it never scrolls side by side */
.pb-card { background: var(--color-fill-1); border-radius: var(--radius-lg); padding: 32px; min-width: 0; }

.pb-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-text-muted); }
.pb-stat { display: flex; flex-direction: column; gap: 8px; }
.pb-num { font-size: 64px; line-height: 64px; font-weight: 600; letter-spacing: -0.04em; }
.pb-desc { font-size: 18px; line-height: 26px; }
.pb-src { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }

/* 82% · conversas sem resposta */
.pb-card-wa { display: flex; justify-content: space-between; gap: 24px; }
.pb-wa-text { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; width: 250px; flex-shrink: 0; }
.pb-chats { display: flex; flex-direction: column; justify-content: center; gap: 8px; flex-grow: 1; min-width: 0; }
.pb-chat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-surface); }
.pb-chat-old { --o: 0.6; opacity: 0.6; }
.pb-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-fill-2); font-size: 12px; line-height: 16px; font-weight: 600; }
.pb-chat-body { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; font-size: 13px; line-height: 18px; }
.pb-chat-body b { font-weight: 600; }
.pb-chat-body span { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-time { font-size: 12px; line-height: 16px; color: var(--color-text-muted); white-space: nowrap; }
.pb-waiting { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-warn-text); }
.pb-waiting i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-warn); flex-shrink: 0; }

/* 8 em 10 · pessoas */
.pb-card-hire { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.pb-people { display: flex; gap: 8px; }
.pb-person { flex: 0 1 28px; min-width: 0; width: 28px; height: auto; aspect-ratio: 28 / 36; }

/* 68% · tudo passa pelo dono */
.pb-card-owner { display: flex; flex-direction: column; gap: 24px; }
.pb-inbox { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.pb-inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px; font-size: 13px; line-height: 18px; }
.pb-inbox-head b { font-weight: 600; }
.pb-unread { display: flex; align-items: center; height: 24px; padding-inline: 10px; border-radius: 12px; background: var(--color-danger); color: var(--color-on-dark); font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-notes { display: flex; flex-direction: column; gap: 6px; }
.pb-note { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-main); font-size: 13px; line-height: 18px; }
.pb-note-new { background: var(--color-surface); }
.pb-wa { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-xs); background: var(--color-whatsapp-green); }
.pb-note-body { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.pb-note-tall { gap: 4px; }
.pb-note-top { display: flex; justify-content: space-between; gap: 8px; }
.pb-note-top b { font-weight: 600; }
.pb-note-top .pb-time { line-height: 18px; }
.pb-due { align-self: flex-start; display: flex; align-items: center; height: 20px; padding-inline: 8px; border-radius: var(--radius-sm); background: var(--color-danger-bg); color: var(--color-danger-text); font-size: 11px; line-height: 14px; font-weight: 500; }
.pb-more { display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; }
.pb-more i { display: block; width: 92%; height: 8px; border-radius: 0 0 10px 10px; background: var(--color-main); }
.pb-more i + i { width: 84%; height: 7px; border-radius: 0 0 9px 9px; opacity: 0.6; }

/* 11 horas · agenda */
.pb-card-time {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background: var(--color-wall-peach);
  background-image: linear-gradient(135deg in oklab, var(--color-wall-peach) 0%, var(--color-wall-pink) 100%);
}
.pb-time-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Segmented control (guide: Estados). Hover in 150ms, out 250ms, pressing never animates. */
.pb-toggle { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface); flex-shrink: 0; }
.pb-seg {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px; border-radius: 17px;
  font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; user-select: none; color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-smooth-out), color var(--dur-fast) var(--ease-smooth-out);
}
.pb-seg-com { padding-left: 8px; }
.pb-seg:hover { transition-duration: var(--dur-quick); }
.pb-seg:active { transition: none; }
.pb-seg[aria-pressed="false"]:hover { background: var(--color-tint-hover); }
.pb-seg[aria-pressed="false"]:active { background: var(--color-tint-pressed); }
.pb-seg[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-dark); }
.pb-seg[aria-pressed="true"]:hover { background: var(--color-primary-hover); }
.pb-seg[aria-pressed="true"]:active { background: var(--color-primary-pressed); }

.pb-agenda { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.pb-agenda-head { display: flex; align-items: center; gap: 8px; min-height: 22px; padding-inline: 2px; font-size: 13px; line-height: 18px; }
.pb-agenda-head b { font-weight: 600; }
.pb-free {
  display: flex; align-items: center; gap: 5px; height: 22px; padding-inline: 8px; border-radius: 11px;
  background: var(--color-success-bg); color: var(--color-success-text); font-size: 12px; line-height: 16px; font-weight: 600;
  opacity: 0; visibility: hidden; transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-smooth-out), transform var(--dur-fast) var(--ease-smooth-out), visibility 0s var(--dur-fast);
}
.pb-free i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-success); }
.is-com .pb-free { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; transition-duration: var(--dur-medium); }

.pb-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.pb-track { display: flex; flex-direction: column; gap: 6px; min-width: 546px; }
/* 12 half-hour columns; a 4px gap stands in for the space between blocks. */
.pb-hours, .pb-blocks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 4px; }
.pb-hours { height: 22px; border-bottom: 1px solid var(--color-divider); }
.pb-hours-pm { margin-top: 8px; }
.pb-hours span { grid-column: span 2; height: 22px; padding-left: 3px; border-left: 1px solid var(--color-border); font-size: 11px; line-height: 14px; color: var(--color-text-muted); }
.pb-hours span:last-child { display: flex; justify-content: space-between; padding-right: 7px; border-right: 1px solid var(--color-border); }
.pb-hours em { font-style: normal; }
.pb-blocks { height: 64px; }

.pb-blk {
  display: grid; padding: 7px 7px 6px; border-radius: var(--radius-xs); border-top: 3px solid transparent; min-width: 0;
  transition: opacity var(--dur-slow) var(--ease-smooth-out), transform var(--dur-slow) var(--ease-smooth-out),
    background-color var(--dur-medium) var(--ease-smooth-out), border-color var(--dur-medium) var(--ease-smooth-out);
  transition-delay: calc(var(--i) * 60ms);
}
.pb-blk > span { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.pb-blk b { font-size: 11px; line-height: 13px; font-weight: 600; }
.pb-blk small { font-size: 10px; line-height: 12px; }
.pb-fixed { background: var(--color-fill-1); border-top-color: var(--color-border-hover); }
.pb-fixed small { color: var(--color-text-muted); }
.pb-lunch { place-items: center; padding: 0; border: 1px dashed var(--color-border-dashed); font-size: 11px; line-height: 13px; color: var(--color-text-placeholder); }

/* Sem o duoh (warn) ↔ Com o duoh (Livre): both layers share the cell, so nothing resizes. */
.pb-swap { background: var(--color-warn-bg); border-top-color: var(--color-warn); }
.pb-sem b { color: var(--color-warn-strong); }
.pb-sem small { color: var(--color-warn-text); }
.pb-com b, .pb-com small { color: var(--color-success-text); }
.pb-swap > span { transition: opacity var(--dur-fast) var(--ease-smooth-out), transform var(--dur-medium) var(--ease-smooth-out); transition-delay: calc(var(--i) * 60ms); }
.pb-com { opacity: 0; transform: translateY(4px); }
.is-com .pb-swap { background: var(--color-success-bg); border-top-color: var(--color-success); }
.is-com .pb-sem { opacity: 0; transform: translateY(-4px); }
.is-com .pb-com { opacity: 1; transform: none; }

/* Living details: hidden until their turn (only with JS; ?static and Reduce motion show everything). */
.pb-in { transition: opacity var(--dur-slow) var(--ease-smooth-out), transform var(--dur-slow) var(--ease-smooth-out); }
.js .pb-in:not(.is-on) { opacity: 0; transform: translateY(8px); }
.js .pb-note.pb-in:not(.is-on) { transform: translateY(-8px); }
.js .pb-person.pb-in:not(.is-on) { transform: translateY(4px); }
.js .pb-agenda:not(.is-in) .pb-blk { opacity: 0; transform: translateY(6px); }

@media (prefers-reduced-motion: reduce) {
  .js .pb-in:not(.is-on) { opacity: var(--o, 1); transform: none; }
  .js .pb-agenda:not(.is-in) .pb-blk { opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
  .pb-row, .pb-row-b { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .pb { padding-top: 72px; }
  .pb-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
  .pb-title { font-size: var(--m-title); line-height: var(--m-title-lh); }
  .pb-num { font-size: var(--m-num); line-height: 1; }
  .pb-lead { width: auto; padding-bottom: 0; }
  .pb-card { padding: 24px; }
  .pb-card-wa { flex-direction: column; }
  .pb-wa-text { width: auto; }
  .pb-people { gap: 4px; }
  .pb-time-head { flex-wrap: wrap; }
  .pb-br { display: none; }
}

/* 761–1080: one card per row. Cards that were tall columns put their picture and number side by side,
   so no card is a wide strip with an empty half. */
@media (min-width: 761px) and (max-width: 1080px) {
  .pb-card-hire, .pb-card-owner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 40px; row-gap: 24px; }
  .pb-card-hire > .pb-label, .pb-card-owner > .pb-label { grid-column: 1 / -1; }
  .pb-card-hire, .pb-card-owner { align-items: center; }
  .pb-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pb-lead { width: auto; max-width: 560px; }
}

/* css/05-solucao.css */
/* 05 · A solução (Paper MEO-0) */
.so { background: var(--color-fill-1); }
.so .eyebrow { font-size: 14px; line-height: 20px; }
.so-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.so-title { max-width: 820px; }
.so-lead { max-width: 640px; }

.so-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.so-card { display: flex; flex-direction: column; min-width: 0; overflow: clip; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }

/* Illustration: bot pills, connector, person */
.so-art { display: flex; justify-content: center; padding: 28px 20px 24px; }
.so-art-peach { background: var(--color-wall-peach); }
.so-art-lilac { background: var(--color-wall-lilac); }
.so-art-blue { background: var(--color-wall-blue); }
.so-pair { display: flex; flex-direction: column; align-items: center; }
.so-bots { display: flex; gap: 16px; }
.so-pill { display: flex; align-items: center; gap: 8px; width: 144px; height: 40px; padding: 0 14px 0 6px; border-radius: 20px; background: var(--color-surface); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.so .blink rect { animation-delay: var(--bd, 0s); }
.so-person { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 28px; background: var(--color-surface); }
.so-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-dark); font-size: 14px; line-height: 18px; font-weight: 600; }
.so-who { display: flex; flex-direction: column; }
.so-name { font-size: 15px; line-height: 20px; font-weight: 600; }
.so-role { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }

/* Connector: lines draw from each bot to the person, then a dot carries the work down. */
.so-line { fill: none; stroke: var(--color-border-hover); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; transition: stroke-dashoffset 600ms var(--ease-smooth-out), opacity var(--dur-quick) var(--ease-smooth-out); }
.so-stem { transition-delay: 450ms; }
.so-joint { fill: var(--color-surface); stroke: var(--color-border-hover); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform var(--dur-medium) var(--ease-bounce) 400ms, opacity var(--dur-fast) var(--ease-smooth-out) 400ms; }
.js .so-card:not(.is-live) .so-line { stroke-dashoffset: 1; opacity: 0; }
.js .so-card:not(.is-live) .so-joint { opacity: 0; transform: scale(0.3); }

.so-body { display: flex; flex-direction: column; flex-grow: 1; gap: 8px; padding: 24px 28px 20px; }
.so-body h3 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.so-desc { font-size: 15px; line-height: 22px; color: var(--color-text-muted); }

/* "X decide": appears after the handoff */
.so-decide { display: flex; align-items: flex-start; gap: 10px; padding: 16px 28px 24px; font-size: 13px; line-height: 20px; color: var(--color-text-muted); transition: opacity var(--dur-very-slow) var(--ease-smooth-out), transform 700ms var(--ease-smooth-out); }
.so-decide strong { color: var(--color-text); font-weight: 600; }
.so-check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--color-success-bg); transition: transform var(--dur-medium) var(--ease-bounce) 120ms; }
.js .so-card:not(.is-done) .so-decide { opacity: 0; transform: translateY(6px); }
.js .so-card:not(.is-done) .so-check { transform: scale(0.6); }

@media (prefers-reduced-motion: reduce) {
  .js .so-card .so-line, .js .so-card .so-joint, .js .so-card .so-decide, .js .so-card .so-check { opacity: 1; stroke-dashoffset: 0; transform: none; }
}

/* 1001–1149: three columns are narrower than the 304px illustration, so it scales down. */
@media (max-width: 1149px) { .so-pair { zoom: 0.82; } }
@media (max-width: 1000px) {
  .so-pair { zoom: 1; }
  .so-cards { grid-template-columns: minmax(0, 1fr); }
}
/* 641–1000: a full-width card would be a stretched strip; the picture goes left, the text right. */
@media (min-width: 641px) and (max-width: 1000px) {
  .so-card { display: grid; grid-template-columns: minmax(280px, 42%) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .so-art { grid-row: 1 / span 2; align-items: center; }
  .so-body { padding-bottom: 8px; justify-content: flex-end; }
  .so-decide { grid-column: 2; padding-top: 8px; }
}
@media (min-width: 641px) and (max-width: 760px) { .so-pair { zoom: 0.82; } .so-card { grid-template-columns: 250px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .so-head { margin-bottom: 32px; }
  .so-body { padding-inline: 20px; }
  .so-decide { padding-inline: 20px; }
}

/* Phones: the bot pills (2 × 144 + 16) shrink with the card so they never touch its edges. */
@media (max-width: 420px) { .so-pair { zoom: 0.9; } .so-art { padding-inline: 12px; } }
@media (max-width: 380px) { .so-pair { zoom: 0.82; } }
@media (max-width: 340px) { .so-pair { zoom: 0.74; } }

/* css/06-como.css */
/* 06 · Como funciona (Paper MHR-0) */
.cf .eyebrow { font-size: 14px; line-height: 20px; }
.cf-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cf-left { display: flex; flex-direction: column; gap: 40px; flex: 0 1 480px; min-width: 0; }
.cf-head { display: flex; flex-direction: column; gap: 16px; }

/* Steps */
.cf-steps { display: flex; flex-direction: column; gap: 28px; }
.cf-step { display: flex; align-items: flex-start; gap: 18px; }
.cf-num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 14px; line-height: 20px; font-weight: 600; transition: background-color var(--dur-medium) var(--ease-smooth-out), border-color var(--dur-medium) var(--ease-smooth-out), color var(--dur-medium) var(--ease-smooth-out); }
.cf-step-body { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; padding-top: 4px; transition: opacity var(--dur-medium) var(--ease-smooth-out); }
.cf-step-title { font-size: 18px; line-height: 24px; font-weight: 600; }
.cf-step-text { font-size: 15px; line-height: 22px; color: var(--color-text-muted); }
/* Steps wait muted, light up one by one (black while current), then rest as in Paper. */
.js .cf-step:not(.is-now):not(.is-done) .cf-num { border-color: var(--color-divider); color: var(--color-text-placeholder); }
.js .cf-step:not(.is-now):not(.is-done) .cf-step-body { opacity: 0.45; }
.cf-step.is-now .cf-num { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }

/* App panel */
.cf-right { display: flex; flex-direction: column; gap: 16px; flex: 0 1 540px; min-width: 0; }
.cf-panel { display: flex; padding: 48px 36px; border-radius: var(--radius-lg); background: linear-gradient(135deg in oklab, var(--color-wall-peach) 0%, var(--color-wall-lilac) 60%, var(--color-wall-blue) 100%); }
.cf-app { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; min-width: 0; padding: 20px; border-radius: var(--radius-lg); background: var(--color-main); }
.cf-app-head { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 15px; line-height: 20px; font-weight: 600; }
.cf-list { display: flex; flex-direction: column; padding-inline: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cf-row { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; height: 68px; border-bottom: 1px solid var(--color-divider); }
.cf-row:last-child { border-bottom: 0; }
.cf .blink rect { animation-delay: var(--bd, 0s); }
.cf-row-text { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.cf-row-title { font-size: 14px; line-height: 20px; font-weight: 500; }
.cf-row-sub { font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
.cf-btn { flex-shrink: 0; height: 34px; padding-inline: 14px; font-size: 13px; line-height: 18px; }
.cf-caption { font-size: 13px; line-height: 18px; color: var(--color-text-muted); }

/* Rows land like new items in "Precisa de você": drop in, then a soft highlight fades. */
.cf-row { transition: opacity var(--dur-very-slow) var(--ease-smooth-out), transform var(--dur-very-slow) var(--ease-smooth-out); }
.js .cf-row:not(.is-in) { opacity: 0; transform: translateY(-8px); }
.cf-row::before { content: ""; position: absolute; z-index: -1; inset: 6px -8px; border-radius: var(--radius-sm); background: var(--color-fill-2); opacity: 0; pointer-events: none; }
.js .cf-row.is-in::before { animation: cf-land 1600ms var(--ease-out); }
@keyframes cf-land { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .cf-row { opacity: 1; transform: none; }
  .js .cf-step .cf-step-body { opacity: 1; }
  .js .cf-step:not(.is-done) .cf-num { background: none; border-color: var(--color-border); color: var(--color-text); }
}

@media (max-width: 1000px) {
  .cf-inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .cf-left, .cf-right { flex: none; max-width: none; }
  .cf-head { max-width: 640px; }
}
@media (max-width: 560px) {
  .cf-panel { padding: 24px 12px; }
  .cf-app { padding: 14px; }
  .cf-list { padding-inline: 12px; }
  /* Narrow: the button moves under the text so titles keep one line. */
  .cf-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; height: auto; padding-block: 14px; }
  .cf-row > svg { align-self: start; margin-top: 5px; }
  .cf-btn { grid-column: 2; justify-self: start; }
}

/* 761–1000: the three steps go side by side under the title, the app panel below at full width. */
@media (min-width: 761px) and (max-width: 1000px) {
  .cf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .cf-step { flex-direction: column; gap: 12px; }
  .cf-panel { padding: 48px max(36px, 12%); }
}

/* 1001–1150: two columns are narrow; the panel's pastel frame thins so the rows keep one line. */
@media (min-width: 1001px) and (max-width: 1150px) {
  .cf-panel { padding: 32px 20px; }
  .cf-app { padding: 16px; }
}

/* Small phones: the pastel frame thins so the row titles keep their room. */
@media (max-width: 400px) { .cf-panel { padding: 16px 8px; } }

/* css/07-audio.css */
/* 07 · Fale por áudio (Paper OKO-0). Prefix au-. */
.au { background: var(--color-fill-1); }
.au-grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; }

/* Left: title and the three step cards */
.au-text { width: 480px; flex-shrink: 0; display: flex; flex-direction: column; gap: 36px; }
.au-head { display: flex; flex-direction: column; gap: 16px; }
.au-eyebrow { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-text-muted); }
.au-title { font-size: 48px; line-height: 54px; font-weight: 600; letter-spacing: -0.03em; }
.au-title .muted { color: var(--color-text-placeholder); }
.au-steps { display: flex; flex-direction: column; gap: 10px; }
.au-step { background: var(--color-surface); border-radius: 16px; padding: 18px 12px; }
.au-step-mark { display: flex; align-items: center; gap: 10px; height: 20px; }
.au-step-mark-text { gap: 6px; font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
.au-mini-wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.au-mini-wave i { width: 2px; border-radius: 1px; background: var(--color-border-hover); }
.au-mini-wave i.is-on { background: var(--color-text-placeholder); }
.au-mini-time { font-size: 12px; line-height: 16px; color: var(--color-text-placeholder); }
.au-dash { width: 20px; margin-inline: 4px; border-top: 1px dashed var(--color-border-dashed); }
.au-step-title { margin-top: 10px; font-size: 15px; line-height: 20px; font-weight: 600; }
.au-step-text { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }

/* Right: pastel panel with the phone */
.au-panel {
  width: 580px; height: 940px; flex-shrink: 0; border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-wall-peach) 0%, var(--color-wall-pink) 35%, var(--color-wall-lilac) 70%, var(--color-wall-blue) 100%);
  background: linear-gradient(in oklab 135deg, var(--color-wall-peach) 0%, var(--color-wall-pink) 35%, var(--color-wall-lilac) 70%, var(--color-wall-blue) 100%);
}
.au-phone { width: 414px; height: 860px; flex-shrink: 0; padding: 12px; border-radius: 62px; background: var(--color-primary); box-shadow: var(--shadow-strong); display: flex; }
.au-screen { position: relative; flex: 1; display: flex; flex-direction: column; overflow: clip; border-radius: 50px; background: var(--color-surface); }
.au-status { display: flex; align-items: center; gap: 154px; padding: 21px 24px 19px; }
.au-status > * { flex: 1; display: flex; justify-content: center; }
.au-clock { font-family: system-ui, sans-serif; font-size: 17px; line-height: 22px; font-weight: 600; text-align: center; }
.au-island { position: absolute; left: 133px; top: 11px; width: 124px; height: 36px; border-radius: 18px; background: var(--color-primary-pressed); }

.au-bar { display: flex; align-items: center; gap: 10px; padding: 4px 16px 12px 10px; border-bottom: 1px solid var(--color-divider); flex-shrink: 0; }
.au-bar-bots { display: flex; gap: 2px; }
.au-bar-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.au-bar-title { font-size: 15px; line-height: 20px; font-weight: 600; }
.au-bar-state { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.au-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
/* The Financeiro body is a <rect> too: only its eyes blink. */
.au .blink rect:first-child { animation: none; }

.au-chat { flex: 1; min-height: 0; overflow: clip; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 10px; }
.au-day { align-self: center; padding-bottom: 2px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-text-muted); }
.au-row { display: flex; width: 100%; }
.au-row-me { justify-content: flex-end; }
.au-row-center { justify-content: center; padding-block: 2px; }

.au-voice { width: min(290px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 9px; border-radius: 18px 18px 6px 18px; background: var(--color-primary); }
.au-wave { display: flex; align-items: center; justify-content: space-between; height: 28px; }
.au-wave i { width: 3px; border-radius: 2px; background: var(--color-on-dark-fill-pressed); transition: background-color var(--dur-quick) var(--ease-smooth-out); }
.au-wave i.is-on { background: var(--color-on-dark); }
.au-voice-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--color-on-dark-muted); }
.au-voice-time { display: flex; align-items: center; gap: 6px; }
.au-timer { font-variant-numeric: tabular-nums; }
.au-transcript { width: min(270px, 100%); text-align: right; font-size: 12px; line-height: 16px; color: var(--color-text-muted); }

.au-msg { width: 100%; }
.au-msg-first { padding-top: 6px; }
.au-who { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-text-muted); }
.au-bubble { width: fit-content; max-width: min(290px, 100%); padding: 10px 14px; border-radius: 6px 18px 18px 18px; background: var(--color-bot-bubble); font-size: 14px; line-height: 20px; }
.au-bubble strong { font-weight: 600; }

.au-order { width: min(290px, 100%); margin-top: 4px; padding: 14px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.au-order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.au-order-label { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.au-order-value { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.au-pill { display: flex; align-items: center; gap: 5px; height: 24px; padding-inline: 8px; flex-shrink: 0; border-radius: 12px; background: var(--color-success-bg); font-size: 11px; line-height: 14px; font-weight: 500; color: var(--color-success-text); }
.au-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
.au-approve { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 20px; background: var(--color-primary); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-on-dark); transition: background-color var(--dur-fast) var(--ease-smooth-out), transform var(--dur-fast) var(--ease-smooth-out); }
/* The simulated tap: pressing never animates, the release does. */
.au-approve.is-pressed { background: var(--color-primary-pressed); transform: scale(0.97); transition: none; }
.au-approved { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--color-text-muted); }

.au-input { flex-shrink: 0; padding: 8px 14px 4px; }
.au-field { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 4px 0 16px; border: 1px solid var(--color-border); border-radius: 22px; font-size: 14px; line-height: 20px; color: var(--color-text-placeholder); }
.au-field > span:first-child { flex: 1; }
.au-mic { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.au-home { flex-shrink: 0; display: flex; justify-content: center; padding-block: 8px; }
.au-home i { width: 134px; height: 5px; border-radius: 3px; background: var(--color-primary-pressed); }

@media (min-width: 1001px) and (max-width: 1199px) {
  .au-text { width: auto; flex: 1 1 400px; min-width: 0; }
  .au-panel { flex: 0 1 580px; min-width: 470px; }
}
@media (max-width: 1000px) {
  .au-grid { flex-direction: column; align-items: stretch; gap: 56px; }
  .au-text { width: auto; }
  .au-head { max-width: 640px; }
  .au-panel { width: 100%; max-width: 580px; height: auto; padding: 40px 16px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .au-title { font-size: var(--m-title); line-height: var(--m-title-lh); }
}
/* The phone keeps its drawn proportions and shrinks as a whole. */
@media (max-width: 500px) { .au-phone { zoom: 0.85; } }
@media (max-width: 429px) { .au-phone { zoom: 0.81; } }
@media (max-width: 411px) { .au-phone { zoom: 0.76; } }
@media (max-width: 389px) { .au-phone { zoom: 0.73; } }
@media (max-width: 374px) { .au-phone { zoom: 0.69; } }
@media (max-width: 349px) { .au-phone { zoom: 0.6; } }

@media (min-width: 761px) and (max-width: 1000px) {
  .au-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .au-step { padding: 18px 16px; }
  .au-step-mark { flex-wrap: wrap; height: auto; min-height: 20px; }
}

/* css/08-custo.css */
/* 08 · Quanto custa (Paper MMN-0). Prefix qc-. */
.qc-inner { display: flex; flex-direction: column; gap: 48px; }
.qc-head { display: flex; flex-direction: column; gap: 16px; }
.qc-eyebrow { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-text-muted); }
.qc-title { max-width: 820px; }
.qc-lead { max-width: 660px; }

.qc-body { display: flex; flex-direction: column; gap: 16px; }
.qc-calc { border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); overflow: clip; }
.qc-num, .qc-n { font-variant-numeric: tabular-nums; }

/* Header with the people counter */
.qc-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 32px; border-bottom: 1px solid var(--color-divider); }
.qc-q { font-size: 17px; line-height: 24px; font-weight: 600; }
.qc-hint { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.qc-count { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.qc-count-label { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.qc-stepper { display: flex; align-items: center; height: 44px; border-radius: 12px; background: var(--color-fill-2); }
.qc-step {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-smooth-out), color var(--dur-fast) var(--ease-smooth-out);
}
.qc-minus { border-radius: 12px 0 0 12px; }
.qc-plus { border-radius: 0 12px 12px 0; }
.qc-step:hover { background: var(--color-tint-hover); transition-duration: var(--dur-quick); }
.qc-step:active { background: var(--color-tint-pressed); transition: none; }
/* Indisponível: tint-selected with text-disabled, no hover. */
.qc-step[aria-disabled="true"], .qc-step[aria-disabled="true"]:hover, .qc-step[aria-disabled="true"]:active { background: var(--color-tint-selected); color: var(--color-text-disabled); }
.qc-sep { width: 1px; height: 22px; background: var(--color-border); flex-shrink: 0; }
.qc-n { width: 56px; text-align: center; font-size: 20px; line-height: 24px; font-weight: 600; }

/* The two receipts, rows aligned */
.qc-receipts { display: flex; }
.qc-receipt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 28px 32px; }
.qc-receipt:first-child { border-right: 1px solid var(--color-divider); }
.qc-receipt-duoh { background: var(--color-fill-1); }
.qc-rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.qc-rtitle { font-size: 16px; line-height: 22px; font-weight: 600; }
.qc-rnote { font-size: 13px; line-height: 18px; color: var(--color-text-muted); text-align: right; }
.qc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-block: 9px; border-top: 1px solid var(--color-divider); }
.qc-row b { font-weight: 500; white-space: nowrap; text-align: right; }
.qc-muted { color: var(--color-text-muted); }
.qc-row-zero span { color: var(--color-text-muted); }
.qc-row-zero b { font-weight: 400; color: var(--color-text-placeholder); }
.qc-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.qc-total span { font-weight: 600; }
.qc-total strong { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.qc-bad { color: var(--color-danger-text); }
.qc-good { color: var(--color-success-text); }

/* Footer: what is left */
.qc-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 32px; border-top: 1px solid var(--color-divider); }
.qc-save { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 22px; }
.qc-save strong { font-weight: 600; }
.qc-check { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--color-success-bg); display: flex; align-items: center; justify-content: center; }
.qc-year { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--color-success-text); white-space: nowrap; }
.qc-note { font-size: 13px; line-height: 18px; color: var(--color-text-muted); }

@media (max-width: 760px) {
  .qc-receipts { flex-direction: column; }
  .qc-receipt:first-child { border-right: 0; border-bottom: 1px solid var(--color-divider); }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .qc-receipt { padding-inline: 24px; }
}
@media (max-width: 640px) {
  .qc-top { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
  .qc-receipt { padding: 24px 20px; }
  .qc-foot { flex-direction: column; align-items: flex-start; padding: 20px; gap: 8px; }
  .qc-save { align-items: flex-start; }
  .qc-year { padding-left: 34px; }
  .qc-total strong { font-size: clamp(22px, 7vw, 30px); line-height: 1.2; }
}

/* Small phones: the receipt's side note goes under its title instead of squeezing it. */
@media (max-width: 420px) {
  .qc-rhead { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* css/09-duvidas.css */
/* 09 · Dúvidas (Paper MO3-0). Prefix fq-. */
.fq { background: var(--color-fill-1); }
.fq-grid { display: flex; gap: 80px; align-items: flex-start; }

.fq-head { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.fq-eyebrow { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-text-muted); }
.fq-title { font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.02em; }
.fq-text { font-size: 17px; line-height: 26px; color: var(--color-text-muted); }
.fq-ask-wrap { display: flex; padding-top: 8px; }
.fq-ask {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 18px;
  border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface);
  font-size: 15px; line-height: 20px; font-weight: 500; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-smooth-out);
}
.fq-ask:hover { border-color: var(--color-border-hover); transition-duration: var(--dur-quick); }
.fq-ask:active { background: var(--color-fill-1); border-color: var(--color-border-hover); transition: none; }

/* Accordion: white cards; the open one has a border. Hover only darkens the border. */
.fq-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fq-item { border: 1px solid transparent; border-radius: 18px; background: var(--color-surface); transition: border-color var(--dur-fast) var(--ease-smooth-out); }
.fq-item.is-open { border-color: var(--color-border); }
.fq-item:hover { border-color: var(--color-border-hover); transition-duration: var(--dur-quick); }
.fq-item:has(.fq-q:active) { background: var(--color-fill-1); border-color: var(--color-border-hover); transition: none; }
.fq-item h3 { font: inherit; }
.fq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 23px; border-radius: 17px; text-align: left;
  font-size: 17px; line-height: 24px; font-weight: 600;
  transition: padding var(--dur-medium) var(--ease-smooth-out);
}
.is-open .fq-q { padding: 22px 23px 10px; }
.fq-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-fill-2); color: var(--color-text);
  transition: background-color var(--dur-medium) var(--ease-smooth-out), color var(--dur-medium) var(--ease-smooth-out);
}
.is-open .fq-icon { background: var(--color-primary); color: var(--color-on-dark); }
.fq-v { transform-origin: 9px 9px; transition: transform var(--dur-medium) var(--ease-smooth-out); }
.is-open .fq-v { transform: rotate(90deg); }

/* Panel: height via grid rows, plus fade. Hidden from readers once closed. */
.fq-a {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--dur-medium) var(--ease-smooth-out), opacity var(--dur-fast) var(--ease-smooth-out), visibility 0s linear var(--dur-medium);
}
.is-open .fq-a { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.fq-a-in { overflow: hidden; min-height: 0; }
.fq-a p { max-width: 560px; padding: 0 23px 22px; font-size: 15px; line-height: 24px; color: var(--color-text-muted); }

@media (max-width: 1000px) {
  .fq-grid { flex-direction: column; gap: 40px; }
  .fq-head { width: auto; max-width: 560px; }
}
@media (max-width: 760px) {
  .fq-title { font-size: var(--m-title); line-height: var(--m-title-lh); }
  .fq-q { padding: 17px 19px; font-size: 16px; }
  .is-open .fq-q { padding: 20px 19px 10px; }
  .fq-a p { padding: 0 19px 20px; }
}

/* css/10-chamada.css */
.ch { padding: 112px 0; background-image: linear-gradient(in oklab 100deg, var(--color-wall-peach) 0%, var(--color-wall-pink) 35%, var(--color-wall-lilac) 65%, var(--color-wall-blue) 100%); }
.ch-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ch-bots { display: flex; gap: 8px; }
/* The five mascots hop in one after another when the section arrives. */
.js .ch-bot { opacity: 0; transform: translateY(10px); }
.ch-bots.is-in .ch-bot { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-smooth-out), transform var(--dur-very-slow) var(--ease-bounce); transition-delay: calc(var(--i) * 70ms); }
.ch-title { max-width: 760px; font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; }
.ch-cta { margin-top: 8px; }
.ch-note { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
@media (max-width: 760px) { .ch { padding: 80px 0; } .ch-title { font-size: var(--m-title); line-height: var(--m-title-lh); } .ch-title br { display: none; } .ch-cta { width: 100%; padding-inline: 16px; font-size: clamp(15px, 4.6vw, 17px); } }

/* css/11-rodape.css */
.ft { padding-block: 40px; }
.ft-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ft-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.ft-brand strong { font-size: 18px; line-height: 22px; color: var(--color-text); }
.ft-links { display: flex; gap: 24px; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.ft-links a { transition: color var(--dur-fast) var(--ease-smooth-out); cursor: pointer; }
.ft-links a:hover { color: var(--color-text); transition-duration: var(--dur-quick); }
@media (max-width: 760px) { .ft-brand span { display: none; } }