/* ==========================================================================
   Pedro Fonseca · base layer — shared by all four tiers.
   Mobile-first: everything here is the 360px design; tiers layer desktop on.
   Tokens come from the inline :root block the generator emits per tier.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--t-weight-body);
  line-height: var(--t-line-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* room for the sticky CTA so it never covers the footer */
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

img, picture, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--t-weight-display);
  line-height: var(--t-line-display);
  letter-spacing: var(--t-tracking-display);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); margin-bottom: .5em; }
h3 { font-size: var(--t-h3); }
p + p { margin-top: 1em; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.lead {
  font-size: var(--t-lead);
  color: var(--mute);
  max-width: var(--prose);
  margin-bottom: 1.2em;
}

.eyebrow {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: .9em;
}

section { padding-block: var(--sp-section-sm); }
.prose--alt { background: var(--bg-alt); }
/* a paragraph needs a measure as much as a lead does */
.prose p, .prose .ticks { max-width: var(--prose); }

/* --- accessibility ------------------------------------------------------ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--bg); padding: 12px 18px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

/* Two-tone focus ring. No single colour clears 3:1 on every ground this site
   puts a focusable element on — classico's amber is 1.75 on white but 9.91 on
   the dark band, and on the blue topbar neither the amber nor the ink wins
   alone. So the indicator carries its own contrast: a 2px inner ring in
   --focus-alt filling the outline offset, then the 3px --focus outline. The
   two are 4-10:1 apart on every tier, which is what makes the indicator
   visible against a background neither colour beats by itself (SC 1.4.11). */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-alt);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- CTA ---------------------------------------------------------------- */

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px;
  font-family: inherit; font-size: 1.02rem; font-weight: 700; line-height: 1.2;
  border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  transition: background .18s ease, transform .18s ease;
}
.cta:hover { background: var(--accent-deep); }
.cta:active { transform: translateY(1px); }
.cta svg { width: 20px; height: 20px; flex: none; }
.cta-block { width: 100%; }
.cta-hint { display: block; font-size: .86rem; color: var(--mute); margin-top: 10px; }

/* --- topbar ------------------------------------------------------------- */

.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 56px;
}
.topbar__logo {
  font-weight: 800; font-size: 1rem; text-decoration: none; letter-spacing: -.01em;
  white-space: nowrap; flex: none;
  /* it is a link, therefore a tap target — 26px tall without this */
  display: inline-flex; align-items: center; min-height: 44px;
}
.topbar__logo span { color: var(--mute); font-weight: 500; }
/* the qualifier is the CTA; the descriptor is not worth three lines at 375px */
@media (max-width: 560px) { .topbar__logo span { display: none; } }
/* one row that scrolls, never two rows — on a 375px screen the second row
   costs more viewport than the nav is worth */
.topbar__nav {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; margin-inline: -4px; padding-inline: 4px;
}
.topbar__nav::-webkit-scrollbar { display: none; }
.topbar__nav a { white-space: nowrap; }
.topbar__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: .9rem; text-decoration: none; color: var(--mute); border-radius: var(--r-sm);
}
.topbar__nav a:hover { color: var(--ink); background: var(--bg-alt); }
.topbar__nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* --- hero (shared skeleton; tiers restyle) ------------------------------ */

.hero { position: relative; overflow: hidden; padding-block: 56px 48px; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* the <picture> needs the height too — without it the percentage on the <img>
   has no resolved parent and the photo collapses to its intrinsic 16:9 */
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__inner { position: relative; z-index: 1; }
.hero__copy { max-width: 40ch; }
.hero h1 { margin-bottom: .5em; }
.hero .lead { margin-bottom: 1.4em; }
.hero__aside { margin-top: 32px; }
.hero__qual { position: relative; z-index: 1; margin-top: 32px; }

/* --- the inline qualifier (T9) ------------------------------------------ */

.qual {
  background: var(--bg);
  color: var(--ink);          /* must not inherit the hero's light-on-dark */
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-card);
  text-align: left;
}
.qual__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.qual__badge {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ok);
  flex: none; margin-top: 7px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent);
}
.qual__title { font-weight: 700; font-size: .98rem; }
.qual__sub { font-size: .84rem; color: var(--mute); }
.qual__q { font-weight: 600; font-size: 1.04rem; margin-bottom: 12px; }
.qual__ops { display: flex; flex-direction: column; gap: 8px; }
.qual__op {
  display: block; width: 100%; text-align: left;
  min-height: 48px; padding: 12px 16px;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  background: var(--bg-alt); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.qual__op:hover { background: var(--bg); border-color: var(--accent); }
.qual__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.qual__human {
  background: none; border: 0; padding: 8px 0; min-height: 44px;
  font-family: inherit; font-size: .88rem; font-weight: 600;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}
.qual__note { font-size: .78rem; color: var(--mute); }

/* live conversation state, injected by chat.js */
.qual__log { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.qual__msg {
  padding: 10px 14px; border-radius: var(--r-md); font-size: .93rem;
  line-height: 1.5; max-width: 92%;
}
.qual__msg--bot { background: var(--bg-alt); }
.qual__msg--user { background: var(--accent); color: var(--on-accent); margin-left: auto; }
.qual__msg a { color: inherit; }
.qual__typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.qual__typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mute);
  animation: qdot 1.2s infinite ease-in-out;
}
.qual__typing i:nth-child(2) { animation-delay: .15s; }
.qual__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes qdot { 0%,60%,100% { opacity: .25 } 30% { opacity: 1 } }

.qual__form { display: flex; gap: 8px; margin-top: 12px; }
.qual__form input {
  flex: 1; min-width: 0; min-height: 48px; padding: 12px 14px;
  font-family: inherit; font-size: 16px; /* 16px: below this iOS zooms on focus */
  color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
}
.qual__form input:focus { outline: none; border-color: var(--accent); }
.qual__form button {
  min-width: 52px; min-height: 48px; border: 0; border-radius: var(--r-md);
  background: var(--accent); color: var(--on-accent); font-size: 1.1rem; cursor: pointer;
}

/* texto livre por baixo dos botões — mesma métrica do .qual__form, mas
   subordinado: fundo neutro e botão de contorno, para não competir com a
   resposta por botão, que continua a ser o caminho principal. */
.qual__ask { display: flex; gap: 8px; margin-top: 12px; }
.qual__ask input {
  flex: 1; min-width: 0; min-height: 48px; padding: 12px 14px;
  font-family: inherit; font-size: 16px;
  color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
}
.qual__ask input:focus { outline: none; border-color: var(--accent); }
.qual__ask button {
  min-height: 48px; padding: 0 16px; border: 1.5px solid var(--line);
  border-radius: var(--r-md); background: transparent; color: var(--ink);
  font-family: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.qual__ask button:hover { border-color: var(--accent); color: var(--accent); }

.qual__op--cal {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; background: var(--accent); color: var(--on-accent);
  border-color: var(--accent); font-weight: 700;
}

.qual__consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 12px; font-size: .82rem; color: var(--mute); line-height: 1.45;
}
.qual__consent input {
  width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent);
}
.qual__consent a { color: var(--accent); }

.qual__error {
  margin-top: 10px; padding: 10px 14px; font-size: .88rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 3px solid var(--accent); border-radius: var(--r-sm);
}
.qual__error a { color: var(--accent); font-weight: 700; }

/* --- stats -------------------------------------------------------------- */

.stats__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stats__list b { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }
.stats__list span { display: block; font-size: .85rem; color: var(--mute); margin-top: 4px; }
.stats__src { display: block; font-size: .7rem; opacity: .65; font-style: normal; margin-top: 4px; }

/* --- cards -------------------------------------------------------------- */

.cards__grid { list-style: none; display: grid; gap: 16px; margin-top: 28px; }
.card { background: var(--bg); border-radius: var(--r-lg); padding: 22px; }
.card__ic { display: block; font-size: 1.7rem; margin-bottom: 10px; }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--mute); font-size: .95rem; }

.ticks { list-style: none; margin: 20px 0; }
.ticks li { position: relative; padding: 8px 0 8px 30px; color: var(--ink-soft); }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 8px;
  color: var(--ok); font-weight: 800;
}

/* --- compare ------------------------------------------------------------ */

.compare__grid { margin-top: 24px; border-top: 1px solid var(--line); }
.compare__hd { display: none; }
.compare__row { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.compare__a { color: var(--mute); font-size: .92rem; }
.compare__a::before { content: "Sozinho: "; font-weight: 700; }
.compare__b { font-weight: 600; }
.compare__b::before { content: "Com a Regional: "; font-weight: 700; color: var(--accent); }

/* --- steps -------------------------------------------------------------- */

.steps__list { list-style: none; counter-reset: s; display: grid; gap: 16px; margin-top: 28px; }
.steps__list li { counter-increment: s; padding: 20px; background: var(--bg-alt); border-radius: var(--r-lg); }
.steps__list li::before {
  content: counter(s); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 12px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 800; border-radius: 50%;
}
.steps__list h3 { margin-bottom: 4px; }
.steps__list p { color: var(--mute); font-size: .92rem; }

/* --- quote -------------------------------------------------------------- */

.quote blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.2vw, 1.75rem);
  line-height: 1.35; max-width: 34ch;
}
.quote cite { display: block; margin-top: 16px; font-style: normal; font-size: .9rem; color: var(--mute); }

/* --- media -------------------------------------------------------------- */

.media figure { margin-top: 24px; }
.media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-lg); }
.media figcaption { margin-top: 10px; font-size: .78rem; color: var(--mute); }
.media--fullbleed figure { margin-inline: calc(-1 * var(--sp-gutter)); }
.media--fullbleed img { border-radius: 0; }
.media--square img { border-radius: 0; }

/* --- videos (facade pattern) -------------------------------------------- */

.videos__grid { list-style: none; display: grid; gap: 24px; margin-top: 28px; }
.vid__play {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: var(--bg-alt); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; aspect-ratio: 16/9;
}
.vid__play img { width: 100%; height: 100%; object-fit: cover; }
.vid__icon {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font-size: 1.2rem;
  padding-left: 4px;
}
.vid iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-lg); }
.vid h3 { margin: 12px 0 4px; }
.vid p { font-size: .9rem; color: var(--mute); }

/* --- faq ---------------------------------------------------------------- */

.faq__list { margin-top: 24px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 16px 0; cursor: pointer;
  font-weight: 700; font-size: 1rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--accent); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq__a { padding-bottom: 18px; color: var(--mute); max-width: var(--prose); }

/* --- secondary channels ------------------------------------------------- */

.canais__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.canais__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  font-size: .92rem; font-weight: 600; text-decoration: none;
  color: var(--mute); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.canais__list a:hover { color: var(--ink); border-color: var(--ink); }

/* --- final -------------------------------------------------------------- */

.final { text-align: left; }

/* --- footer ------------------------------------------------------------- */

.foot { background: var(--bg-deep); color: var(--on-deep); padding-block: 40px 32px; }
.foot__cols { display: grid; gap: 28px; margin-bottom: 28px; }
/* NOT var(--bg): on a dark-ground tier that is near-black on black. The
   footer sits on --bg-deep, so the readable colour is the one that pairs
   with it. */
.foot__brand { font-weight: 700; color: var(--on-deep); margin-bottom: 8px;
               filter: brightness(1.35); }
.foot__h { font-weight: 700; color: var(--on-deep); margin-bottom: 10px;
           font-size: .9rem; filter: brightness(1.35); }
.foot ul { list-style: none; display: grid; gap: 2px; }
.foot a {
  /* 44, not 40 — these are the social links the client wants tapped, and the
     spec's own floor is 44. Four pixels short on every page is still short. */
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .9rem; text-decoration: none; opacity: .85;
}
.foot a:hover { opacity: 1; text-decoration: underline; }
.foot__fine { font-size: .78rem; opacity: .6; line-height: 1.5; }

/* --- sticky mobile CTA -------------------------------------------------- */

.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: var(--sh-bar);
  transition: transform .25s ease;
}
.sticky[hidden] { display: block; transform: translateY(110%); }

/* --- tier switcher (non-default builds only) ---------------------------- */

.tierbar {
  position: fixed; left: 8px; right: 8px; bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 95; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: rgba(17,17,17,.9); color: #fff;
  font: 600 12px/1.4 system-ui, sans-serif; backdrop-filter: blur(6px);
}
.tierbar a {
  /* internal preview strip, but it is the thing the client actually taps to
     compare the four tiers — on a phone, at 32px, half those taps miss */
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: #fff; opacity: .6; text-decoration: none; border-radius: 99px;
}
.tierbar a[aria-current] { opacity: 1; background: rgba(255,255,255,.18); }

/* ==========================================================================
   ≥ 640px
   ========================================================================== */
@media (min-width: 640px) {
  .stats__list { grid-template-columns: repeat(4, 1fr); }
  .cards__grid { grid-template-columns: 1fr 1fr; }
  .steps__list { grid-template-columns: 1fr 1fr; }
  .videos__grid { grid-template-columns: 1fr 1fr; }
  .qual__ops { flex-direction: row; flex-wrap: wrap; }
  .qual__op { width: auto; flex: 1 1 calc(50% - 4px); }
  .final { text-align: center; }
  .final .cta-block { width: auto; min-width: 320px; }
}

/* ==========================================================================
   ≥ 900px — desktop enhancements only
   ========================================================================== */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  section { padding-block: var(--sp-section); }
  .hero { padding-block: 88px 80px; }
  .cards__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-gap); }
  .steps__list { grid-template-columns: repeat(4, 1fr); }
  .foot__cols { grid-template-columns: 2fr 1fr 1fr; }
  .sticky { display: none; }
  .tierbar { left: auto; right: 16px; bottom: 16px; }

  .compare__hd {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    padding-bottom: 12px; font-weight: 800; font-size: .85rem;
    text-transform: uppercase; letter-spacing: .08em;
  }
  .compare__row { grid-template-columns: 1fr 1fr; gap: 24px; align-items: baseline; }
  .compare__a::before, .compare__b::before { content: none; }
}

/* --- chooser (root page) ------------------------------------------------ */

.escolha { padding-block: 40px 56px; min-height: calc(100dvh - 120px); display: flex; align-items: center; }
.escolha h1 { margin-bottom: .4em; }
.escolha__list { list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.escolha__list a {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 16px; min-height: 88px; padding: 20px 22px;
  text-decoration: none; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .15s, background .15s, transform .15s;
}
.escolha__list a:hover { border-color: var(--accent); background: var(--bg); }
.escolha__list a:active { transform: translateY(1px); }
.escolha__k { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.escolha__d { grid-column: 1; font-size: .92rem; color: var(--mute); }
/* grid-column is explicit: a definite-row item with no column auto-placed into
   column 1, the auto column took the title's max-content and 1fr collapsed to
   ~68px at 375px (teardown 2026-09-05). */
.escolha__go { grid-row: 1 / span 2; grid-column: 2; font-size: 1.4rem; color: var(--accent); }
.escolha__nota { margin-top: 20px; font-size: .84rem; color: var(--mute); }

@media (min-width: 900px) {
  .escolha__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-gap); }
  .escolha__list a { grid-template-columns: 1fr; align-content: start; min-height: 180px; padding: 26px; }
  .escolha__go { grid-row: auto; grid-column: 1; margin-top: auto; }
}