:root{
  --bg: #101211;
  --ink: #F2F1EA;
  --muted: #9C9F96;
  --accent: #3DDBD9;
  --accent-ink: #3DDBD9;
  --accent-soft: #153232;
  --line: #2A2E2B;
  --card-clay: #C99A5B;
  /* Famílias (arquivos em css/fonts.css). Display/mono só em títulos e  */
  /* textos curtos; body em qualquer texto longo -- ver MANUAL-DE-MARCA. */
  --font-display: 'Archivo', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-serif: 'Fraunces', serif;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1,h2,h3, .display{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
p{ margin:0; }
a{ color: inherit; }
.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
/* focus visibility */
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}

/* ---------- SKIP LINK: só aparece ao receber foco via teclado ---------- */
.skip-link{
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 3px;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-body); font-weight: 500; text-decoration: none;
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.skip-link:focus-visible{ transform: none; outline-offset: 0; }

/* ---------- CUSTOM SCROLLBAR: thin white rounded bar ---------- */
/* Track/gutter painted the exact page background (not the keyword   */
/* `transparent`) -- some engines composite a transparent scrollbar  */
/* track oddly over a video-heavy page, showing a stray black/white  */
/* backdrop instead of true transparency. Matching --bg exactly is   */
/* what actually reads as "no background", regardless of that.      */
html{ scrollbar-width: thin; scrollbar-color: var(--ink) var(--bg); }
::-webkit-scrollbar{ width: 8px; height: 8px; background: var(--bg); }
::-webkit-scrollbar-track{ background: var(--bg); box-shadow: none; }
::-webkit-scrollbar-thumb{
  background-color: var(--ink);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{ background-color: var(--ink); }
::-webkit-scrollbar-button{ display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner{ background: var(--bg); }

/* ---------- NAV ---------- */
/* Fixed (not sticky) so it never reserves layout space -- it only  */
/* fades in once the hero video-scrub has reached its last frame,   */
/* controlled by the same scroll handler that drives the video.     */
header{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  background: rgba(16,18,17,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  /* visibility junto com opacity: só opacity deixava os links do menu   */
  /* focáveis por Tab enquanto invisíveis. O delay na visibility espera   */
  /* o fade terminar antes de sumir de vez.                               */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
header.visible{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce){
  header{ opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 24px;
  gap: 16px;
}
.logo{
  font-family: var(--font-display); font-size: 1.4rem; font-weight:800;
  letter-spacing: 0.02em;
}
a.logo{ text-decoration:none; color: inherit; }
.nav-right{ display:flex; align-items:center; gap: 20px; }
.nav-cta{
  background: var(--ink); color: var(--bg);
  padding: 10px 20px; border-radius: 3px;
  font-size: 0.9rem; font-weight: 500;
  text-decoration:none;
  border: none; cursor:pointer;
}
.nav-links{
  display:none; gap: 32px; font-size: 0.92rem; color: var(--muted);
  font-family: var(--font-mono); font-weight: 600;
}
@media (min-width: 760px){ .nav-links{ display:flex; } }
.nav-links a{ text-decoration:none; }
.nav-links a:hover{ color: var(--ink); }
@media (max-width: 480px){
  .nav{ padding: 16px 20px; gap: 10px; }
  .nav-right{ gap: 10px; }
  .nav-cta{ padding: 9px 14px; font-size: .8rem; }
}

/* ---------- HERO: full-bleed video, scrubbed by scroll ---------- */
/* The hero is a tall (220vh) scroll track; a 100vh sticky stage    */
/* pins itself while that track scrolls past, and the video's       */
/* currentTime is driven directly by how far the track has scrolled */
/* -- no play/pause, no autoplay, the scrollbar *is* the transport.  */
.hero{
  position: relative; height: 220vh; height: 220svh; padding: 0; border-bottom: none;
}
.hero-scrub-sticky{
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display:flex; align-items:flex-end;
}
.hero-scrub-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#15171A;
  /* Chrome for Android has a known bug where video inside a sticky-      */
  /* positioned ancestor can fail to paint (stays blank) until forced     */
  /* onto its own GPU compositing layer. */
  transform: translateZ(0);
}
@media (prefers-reduced-motion: reduce){
  .hero{ height: 100vh; height: 100svh; }
  .hero-scrub-sticky{ position: static; }
}
/* Fallback estático (só o poster, uma tela de altura): usado quando o   */
/* vídeo falha ao carregar ou o visitante está com economia de dados.    */
.hero.is-static{ height: 100vh; height: 100svh; }
.hero.is-static .hero-scrub-sticky{ position: static; }

/* ---------- PITCH: headline/CTA, right after the video intro ---------- */
/* Copy block reuses the exact .section-head markup/formatting shared   */
/* with every other section (see SECTION HEADINGS) instead of its own   */
/* bespoke sizing -- .pitch .section-head only adds the centering that  */
/* #trabalho also needs. */
.pitch{ padding: 108px 0 88px; text-align: center; position: relative; overflow: hidden; }
.pitch-dots{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.pitch .wrap{ position:relative; z-index:1; }
.pitch h1 em{
  font-style: italic; color: var(--accent-ink);
  text-shadow: 0 0 18px rgba(61,219,217,.55), 0 0 46px rgba(61,219,217,.28);
}
.pitch .hero-actions{ display:flex; gap:14px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
/* Lista discreta dos 4 serviços logo abaixo do CTA -- mono/muted, como um */
/* rodapé do pitch, pra não disputar com a headline (o foco segue sites). */
.pitch-services{
  list-style: none; margin: 28px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 12px; row-gap: 6px;
  font-family: var(--font-mono); font-weight: 600; font-size: .88rem; letter-spacing: .02em;
  color: var(--muted); line-height: 1.7;
}
.pitch-services li{ white-space: nowrap; }
.pitch-services li + li::before{ content: '·'; margin-right: 12px; color: var(--accent-ink); }

/* ---------- SHINY CTA: animated conic-gradient border button ---------- */
/* Rebuilt from the original React/styled-jsx component's concept, but   */
/* using only techniques that natively respect border-radius: the ring   */
/* is a background layered padding-box (fill) + border-box (conic-       */
/* gradient), and the glow is box-shadow (inset + outer). Both always    */
/* clip/round correctly on their own -- no absolutely-positioned square  */
/* pseudo-elements relying on overflow/clip-path, which is what caused   */
/* the visible square artifacts in an earlier version of this button.   */
@property --gradient-angle{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
@property --gradient-shine{ syntax:"<color>"; initial-value:transparent; inherits:false; }
@property --spot-color{ syntax:"<color>"; initial-value:transparent; inherits:false; }

.shiny-cta{
  --shiny-cta-bg: var(--bg);
  --shiny-cta-bg-subtle: #1C1F1E;
  --shiny-cta-fg: var(--ink);
  --shiny-cta-highlight: #3DDBD9;
  --shiny-cta-highlight-subtle: #A0EEED;
  --gradient-shine: var(--shiny-cta-highlight);
  --duration: 3s;
  --mx: 50%; --my: 50%;
  --spot-color: transparent;

  position: relative;
  isolation: isolate;
  cursor: pointer;
  padding: 22px 44px;
  font-family: var(--font-body);
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--shiny-cta-fg);
  text-decoration: none;
  display: inline-block;
  /* Radial "spotlight" tracks the cursor (--mx/--my, set from JS on     */
  /* pointermove) on top of the same fill + conic-gradient-border stack. */
  background:
    radial-gradient(120px circle at var(--mx) var(--my), var(--spot-color), transparent 70%) padding-box,
    linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
      from var(--gradient-angle),
      transparent,
      var(--shiny-cta-highlight) 12%,
      var(--gradient-shine) 24%,
      var(--shiny-cta-highlight) 36%,
      transparent 50%
    ) border-box;
  box-shadow:
    inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    inset 0 -16px 22px -12px color-mix(in srgb, var(--accent) 0%, transparent),
    0 0 20px -6px var(--shiny-cta-highlight);
  transition: box-shadow .45s ease, --gradient-shine .45s ease, --spot-color .25s ease;
  animation: gradient-angle var(--duration) linear infinite;
}
.shiny-cta:active{ translate: 0 1px; }
.shiny-cta:is(:hover, :focus-visible){
  --gradient-shine: var(--shiny-cta-highlight-subtle);
  --spot-color: color-mix(in srgb, var(--shiny-cta-highlight-subtle) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    inset 0 -16px 26px -10px color-mix(in srgb, var(--accent) 65%, transparent),
    0 0 20px -6px var(--shiny-cta-highlight);
}
@keyframes gradient-angle{ to{ --gradient-angle: 360deg; } }
@media (prefers-reduced-motion: reduce){
  .shiny-cta{ animation: none; }
}

/* ---------- SECTION HEADINGS ---------- */
section{ padding: 96px 0; border-bottom: 1px solid var(--line); }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head-tight{ margin-bottom: 0; }
.section-head .kicker{ font-family: var(--font-mono); color: var(--accent-ink); font-weight:600; font-size:1.8rem; margin-bottom:12px; }
.section-head h1, .section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height:1.15; }
.section-head p{ color: var(--muted); margin-top:14px; font-size:1rem; }
@media (max-width: 700px){
  /* Kicker scales down to 80% of the h1/h2 size on mobile instead of  */
  /* staying fixed at 1.8rem, where it reads almost as big as the     */
  /* title itself. */
  .section-head .kicker{ font-size: calc(clamp(1.9rem, 3.2vw, 2.8rem) * 0.8); }
}

/* ---------- PROCESSO: split texto / accordion ---------- */
.processo-split{
  display:grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 860px){
  .processo-split{ grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
}

/* ---------- VALUE / ACCORDION ---------- */
.value-accordion{
  display:flex; flex-direction:column; gap:14px; margin-top:8px;
}
.acc-item{
  position:relative; overflow:hidden; border-radius: 28px;
  background-color: #15171A;
  /* Tall enough on mobile (where the card is always at this width, never */
  /* collapsed to a strip -- that only happens at >=760px below) to fit   */
  /* the longest description without it colliding with the numeral badge */
  /* above or the title below; see .acc-desc's bottom offset. */
  min-height: 300px;
  transition: flex-grow .65s cubic-bezier(.4,0,.2,1);
}
.acc-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.acc-item::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,12,11,0) 20%, rgba(10,12,11,.6) 65%, rgba(10,12,11,.94) 100%);
}
.acc-num{
  position:absolute; top:18px; left:18px; z-index:2;
  width: 38px; height:38px; border-radius:50%;
  background: rgba(10,12,11,.55); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:600; letter-spacing:.02em;
  color: var(--accent-ink);
  font-size: 1rem;
}
.acc-title{
  font-family: var(--font-display); font-size:1.45rem; color:#FBF9F4;
  position:absolute; left:20px; right:20px; bottom:18px; z-index:2;
  margin:0;
}
/* O título é um <button> de verdade (teclado/leitor de tela) que herda  */
/* toda a tipografia do h3 -- all:unset tira o visual nativo de botão.  */
.acc-btn{ all: unset; cursor: pointer; }
.acc-btn:focus-visible{ outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.acc-desc{
  position:absolute; left:20px; right:20px; bottom:68px; z-index:2;
  color: rgba(251,249,244,.82); font-size:1.1rem; margin:0;
  opacity:0; transform: translateY(8px); filter: blur(5px);
  pointer-events:none;
  transition: opacity .35s cubic-bezier(.4,0,.2,1),
              transform .35s cubic-bezier(.4,0,.2,1),
              filter .35s cubic-bezier(.4,0,.2,1);
}
.acc-item.active .acc-desc{
  opacity:1; transform:none; filter: blur(0); pointer-events:auto;
  transition: opacity .6s cubic-bezier(.4,0,.2,1) .22s,
              transform .6s cubic-bezier(.4,0,.2,1) .22s,
              filter .6s cubic-bezier(.4,0,.2,1) .22s;
}

@media (min-width: 760px){
  .value-accordion{ flex-direction:row; height: 480px; gap:10px; }
  .acc-item{ flex: 1 1 64px; min-width:64px; min-height:0; }
  .acc-item.active{ flex-grow: 6; }
  .acc-item:not(.active){ flex-grow: 1; }
  .acc-title{
    left:50%; top:50%; right:auto; bottom:auto; white-space:nowrap;
    transform: translate(-50%,-50%) rotate(90deg);
    transform-origin:center;
    font-size: 1.25rem;
    transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1),
                transform .6s cubic-bezier(.4,0,.2,1), font-size .6s cubic-bezier(.4,0,.2,1);
  }
  .acc-item.active .acc-title{
    left:22px; top: calc(100% - 56px);
    transform: translate(0,0) rotate(0deg);
    font-size: 1.6rem;
  }
  .acc-desc{
    left:22px; right:22px; bottom:60px;
  }
}
@media (prefers-reduced-motion: reduce){
  .acc-item, .acc-title, .acc-desc{ transition: none !important; }
}

#trabalho .section-head, .pitch .section-head{ text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 700px){
  /* Kicker/h1/h2/p left-aligned on mobile -- Pitch and Trabalho center */
  /* this block on desktop (the rule right above), which reads better    */
  /* wide but cramped/awkward once every line wraps at this width. Same  */
  /* selectors, so this needs to come after that rule to win (equal      */
  /* specificity, source order decides). */
  .pitch{ text-align: left; }
  /* Empilhado no mobile: um serviço por linha, sem separador. */
  .pitch-services{ flex-direction: column; align-items: flex-start; row-gap: 2px; font-size: .82rem; }
  .pitch-services li + li::before{ content: none; margin: 0; }
  #trabalho .section-head, .pitch .section-head{ text-align: left; margin-left: 0; margin-right: 0; }
}

/* ---------- PORTFOLIO / STACK ---------- */
/* Three niche mocks as an overlapping, rotated deck of cards -- hover  */
/* (or focus, for keyboard/touch) spreads them apart so all three are  */
/* readable, instead of a click-to-switch tab list. Per-card rotation/ */
/* offset lives in the .stack-card-N modifiers; the higher-specificity */
/* `.stack-card.mock-*` rule overrides each mock's own padding/min-     */
/* height (tuned for the old full-width frame) with fixed card sizing. */
.stack{
  position: relative;
  height: 520px;
  max-width: 640px;
  margin: 0 auto;
}
.stack-card{
  position: absolute; inset: 0; margin: auto;
  width: 300px; height: 440px;
  border-radius: 16px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.55);
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.stack-card.mock-barber, .stack-card.mock-clinic, .stack-card.mock-mecanica{
  min-height: 0; padding: 26px 26px; overflow: hidden;
}
.stack-card.mock-barber{ padding-top: 28px; }
.mock-icon{
  position: absolute; top: 26px; right: 26px;
  width: 26px; height: 26px;
}
.stack-card-1{ transform: rotate(-7deg) translate(-54px, 10px); z-index: 3; }
.stack-card-2{ transform: rotate(2deg) translate(0, -16px); z-index: 2; }
.stack-card-3{ transform: rotate(9deg) translate(54px, 14px); z-index: 1; }
/* hover:hover guards this to real pointer devices -- without it, tapping */
/* a card on a touchscreen can trigger CSS "sticky hover" (common on      */
/* mobile Safari/Chrome) and this rule's higher specificity would win     */
/* over the mobile carousel's is-center/is-left/is-right below, causing   */
/* an unwanted "expand" on tap. */
@media (hover: hover){
  .stack:hover .stack-card-1, .stack:focus-within .stack-card-1{ transform: rotate(-14deg) translate(-270px, 26px); }
  .stack:hover .stack-card-2, .stack:focus-within .stack-card-2{ transform: rotate(0deg) translate(0, -54px); }
  .stack:hover .stack-card-3, .stack:focus-within .stack-card-3{ transform: rotate(14deg) translate(270px, 26px); }
}
@media (max-width: 700px){
  .stack{ height: 460px; }
  .stack-card{ width: 240px; height: 380px; }
  .stack-card-1{ transform: rotate(-7deg) translate(-30px, 8px); }
  .stack-card-3{ transform: rotate(9deg) translate(30px, 12px); }

  /* Mobile-only auto-rotating coverflow -- replaces the desktop hover/  */
  /* focus-to-fan interaction above, which doesn't have room to work at */
  /* this width (fanning either barely moves the cards or pushes them   */
  /* off-screen). JS (see the "Portfolio niche cards" block) toggles    */
  /* is-center/is-left/is-right on the three .stack-card-N elements on  */
  /* a timer, and drags the whole group via the --drag custom property. */
  /* Full-bleed (breaks out of .wrap's 24px side padding) so the side    */
  /* cards peek all the way to the screen edge instead of stopping at    */
  /* the gutter; clipped here on .stack itself so a card slid to the     */
  /* side is cropped by the carousel, never by the page. Negative margin */
  /* instead of 100vw: vw includes the scrollbar width on desktop, which */
  /* caused a horizontal page scroll in narrow windows. */
  .stack{
    width: auto; max-width: none;
    margin-left: -24px; margin-right: -24px;
    overflow: hidden; touch-action: pan-y;
  }
  .stack .stack-card{ transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s cubic-bezier(.4,0,.2,1); }
  .stack.is-dragging .stack-card{ transition: none; }
  .stack-card.is-center{ transform: rotate(0deg) translate(calc(var(--drag, 0px)), 6px) scale(1); opacity: 1; z-index: 3; }
  .stack-card.is-left{ transform: rotate(-9deg) translate(calc(-112px + var(--drag, 0px)), 22px) scale(.74); opacity: .45; z-index: 1; }
  .stack-card.is-right{ transform: rotate(9deg) translate(calc(112px + var(--drag, 0px)), 22px) scale(.74); opacity: .45; z-index: 2; }
}
@media (prefers-reduced-motion: reduce){
  .stack-card{ transition: none; }
}

/* Os 3 mocks têm paleta E composição próprias -- cada um imita o hero de  */
/* uma landing page daquele nicho, não só troca cor/fonte num layout igual.*/

/* barbearia mock: cardápio de barbearia -- serif itálico, pinstripe sutil, */
/* vinheta, filete ornamental e tabela de preços com pontilhado.           */
.mock-barber{
  background:
    radial-gradient(120% 70% at 50% 115%, rgba(0,0,0,.5), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    #2B1013;
  color:#F1E7E2;
}
.mock-barber .brand{ font-family: var(--font-serif); font-style: italic; font-size: 1.45rem; color:#E3B7A6; }
.mock-barber .mock-rule{ width: 44px; height: 1px; background:#E3B7A6; opacity:.55; margin: 8px 0 16px; }
.mock-barber .mock-icon{
  top:auto; right:-16px; bottom:-8px; width:120px; height:120px;
  color:#E3B7A6; opacity:.09; transform: rotate(-20deg);
}
.mock-barber h3{
  font-family: var(--font-serif); font-weight:700; letter-spacing:normal;
  font-size: 1.75rem; line-height: 1.1; margin:0; max-width: 11ch; color:#FBF3EF;
}
.mock-barber p{ color: rgba(241,231,226,.62); margin-top: 12px; max-width: 30ch; font-size:.86rem; line-height:1.45; }
.mock-menu{
  list-style:none; margin: 16px 0 0; padding: 12px 0 0;
  border-top: 1px dashed rgba(227,183,166,.35);
  font-family: var(--font-serif); font-style: italic; font-size: .95rem; color:#E3B7A6;
}
.mock-menu li{ display:flex; align-items: baseline; gap: 8px; line-height: 1.7; }
.mock-menu-dots{ flex:1; border-bottom: 1px dotted rgba(227,183,166,.45); transform: translateY(-5px); }
.mock-barber .cta{
  display:inline-block; margin-top:18px; padding:11px 20px;
  font-size:.86rem; font-weight:700; border-radius:2px;
  color:#FBF3EF; text-shadow: 0 1px 3px rgba(0,0,0,.65);
  background:
    linear-gradient(rgba(20,8,8,.5), rgba(20,8,8,.5)),
    repeating-linear-gradient(45deg,
      #C8102E 0px, #C8102E 10px,
      #F3EEE3 10px, #F3EEE3 20px,
      #1D3E8C 20px, #1D3E8C 30px
    );
}

/* clínica mock: clean, mancha mint no canto, ícone em selo redondo e um   */
/* "widget" de próximo horário com o CTA dentro, ancorado no rodapé.       */
.mock-clinic{
  background:
    radial-gradient(60% 45% at 100% 0%, #D4EEE6, transparent 70%),
    #F4F8F7;
}
.mock-clinic-head{ display:flex; justify-content:space-between; align-items:center; }
.mock-clinic .brand{ font-family: var(--font-body); font-weight:600; letter-spacing:.05em; color:#0F6E5C; font-size:.84rem; }
.mock-clinic .mock-icon-wrap{
  width:34px; height:34px; border-radius:50%; background:#0F6E5C; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.mock-clinic .mock-icon{ position:static; width:18px; height:18px; color:#fff; }
.mock-clinic h3{
  font-family: var(--font-body); font-weight:500; letter-spacing:-.01em;
  font-size: 1.65rem; line-height: 1.15; margin-top:20px; margin-bottom:0; color:#122B26; max-width:14ch;
}
.mock-clinic p{ color:#4C635D; margin-top:10px; max-width:30ch; font-size:.84rem; line-height:1.45; }
.mock-clinic .pill{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.mock-clinic .pill span{ background:#fff; border:1px solid #D8E6E2; border-radius:20px; padding:5px 11px; font-size:.72rem; color:#0F6E5C; }
.mock-slot{
  position:absolute; left:18px; right:18px; bottom:18px;
  background:#fff; border:1px solid #D8E6E2; border-radius:12px; padding:11px 12px 11px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow: 0 12px 24px -14px rgba(15,110,92,.35);
}
.mock-slot small{ display:block; font-size:.66rem; color:#4C635D; letter-spacing:.02em; }
.mock-slot strong{ display:block; font-size:.92rem; color:#122B26; font-weight:600; margin-top:1px; }
.mock-clinic .cta{
  display:inline-block; background:#0F6E5C; color:#fff; white-space:nowrap;
  padding:9px 13px; font-size:.76rem; font-weight:500; border-radius:8px;
}

/* mecânica mock: faixa de sinalização no topo, grade técnica de fundo,   */
/* engrenagem como marca d'água, checklist mono e rodapé CTA + horário.   */
.mock-mecanica{
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 22px 100%,
    #26282A;
}
.mock-hazard{
  position:absolute; top:0; left:0; right:0; height:8px;
  background: repeating-linear-gradient(-45deg, #F2A93B 0 12px, #1A1B1C 12px 24px);
}
.mock-mecanica .mock-icon{
  top:auto; right:-22px; bottom:52px; width:130px; height:130px;
  color:#F2A93B; opacity:.07;
}
.mock-mecanica .brand{
  font-family: var(--font-display); font-weight:800; letter-spacing:.06em;
  font-size:.92rem; color:#F2A93B; margin-top: 4px;
}
.mock-mecanica .brand::after{ content:''; display:block; width:36px; height:3px; background:#F2A93B; margin-top:7px; }
.mock-mecanica h3{
  font-family: var(--font-display); font-weight:700; letter-spacing:-.01em;
  font-size: 1.7rem; line-height: 1.1; margin-top: 18px; margin-bottom:0; color:#EDEDE9; max-width:12ch;
}
.mock-check{
  list-style:none; margin: 16px 0 0; padding:0;
  font-family: var(--font-mono); font-weight:600; font-size:.76rem; color:#C9CBC7;
}
.mock-check li{
  display:flex; gap:10px; align-items:flex-start; line-height:1.4;
  padding: 7px 0; border-top: 1px solid rgba(255,255,255,.09);
}
.mock-check li::before{ content:'✓'; color:#F2A93B; font-weight:800; flex-shrink:0; }
.mock-mecanica-foot{
  position:absolute; left:26px; right:26px; bottom:24px;
  /* Horário em cima, CTA embaixo (column-reverse: o CTA vem antes no HTML */
  /* pra ser lido primeiro). Lado a lado o horário quebrava linha.          */
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:10px;
}
.mock-hours{
  font-family: var(--font-mono); font-weight:600; font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; color:#8A8D89; white-space:nowrap;
}
.mock-mecanica .cta{
  display:inline-block; padding:11px 16px; white-space:nowrap;
  font-size:.8rem; font-weight:700; border-radius:2px;
  color:#1A1B1C; background:#F2A93B;
}

/* Card shrank (300->240 / 440->380, see .stack-card's own max-width:700  */
/* query above) but the mock content inside kept its desktop sizing --   */
/* scale it down to match so it doesn't feel oversized/cramped. Placed   */
/* after the base mock-* rules above (not inside that earlier query      */
/* block) so these selectors -- equal specificity to the base ones --    */
/* win the cascade by source order instead of losing to them. */
@media (max-width: 700px){
  .stack-card.mock-barber, .stack-card.mock-clinic, .stack-card.mock-mecanica{
    padding: 20px 18px;
  }
  .mock-barber .brand{ font-size: 1.15rem; }
  .mock-barber .mock-rule{ margin: 8px 0 14px; }
  .mock-barber h3{ font-size: 1.5rem; }
  .mock-barber p{ font-size: .78rem; margin-top: 10px; }
  .mock-menu{ font-size: .84rem; margin-top: 12px; padding-top: 10px; }
  .mock-menu li{ line-height: 1.7; }
  .mock-barber .cta{ font-size: .76rem; padding: 9px 16px; margin-top: 16px; }
  .mock-barber .mock-icon{ width: 90px; height: 90px; }

  .mock-clinic .brand{ font-size: .74rem; }
  .mock-clinic .mock-icon-wrap{ width: 28px; height: 28px; }
  .mock-clinic .mock-icon{ width: 15px; height: 15px; }
  .mock-clinic h3{ font-size: 1.35rem; margin-top: 14px; }
  .mock-clinic p{ font-size: .76rem; margin-top: 8px; }
  .mock-clinic .pill{ margin-top: 10px; gap: 5px; }
  .mock-clinic .pill span{ font-size: .64rem; padding: 4px 9px; }
  /* Empilha info + CTA: lado a lado não cabe em 200px de largura útil. */
  .mock-slot{ left: 14px; right: 14px; bottom: 14px; padding: 10px 12px; border-radius: 10px; flex-direction: column; align-items: stretch; gap: 8px; }
  .mock-slot-info{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .mock-slot small{ font-size: .6rem; }
  .mock-slot strong{ font-size: .82rem; }
  .mock-clinic .cta{ font-size: .72rem; padding: 8px 10px; text-align: center; }

  .mock-mecanica .brand{ font-size: .8rem; }
  .mock-mecanica h3{ font-size: 1.35rem; margin-top: 14px; }
  .mock-check{ font-size: .68rem; margin-top: 12px; }
  .mock-check li{ padding: 6px 0; }
  .mock-mecanica-foot{ left: 18px; right: 18px; bottom: 18px; gap: 8px; }
  .mock-mecanica .cta{ font-size: .72rem; padding: 9px 12px; }
  .mock-hours{ font-size: .6rem; }
  .mock-mecanica .mock-icon{ width: 100px; height: 100px; bottom: 44px; }
}

/* ---------- PLANOS: três cards + tabela comparativa opcional ---------- */
/* Os cards carregam a decisão (preço, pra quem serve, o que entra) e a   */
/* tabela fica dentro de um <details> fechado -- ela é conferência, não   */
/* leitura obrigatória, e no celular viraria um paredão de scroll.        */
/* Aviso de "não cobra agora": fica entre o texto da seção e os cards      */
/* porque é objeção de quem está prestes a clicar, não leitura de apoio.  */
.plan-reassure{
  display:flex; align-items:flex-start; gap:12px;
  margin-bottom:22px; padding:14px 18px;
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius:3px; background: var(--accent-soft);
  color: var(--muted); font-size:.96rem; line-height:1.5;
}
.plan-reassure strong{ color: var(--ink); font-weight:500; }
.plan-reassure svg{ width:20px; height:20px; flex-shrink:0; color: var(--accent-ink); margin-top:2px; }

.plans{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width: 900px){
  .plans{ grid-template-columns: repeat(3, 1fr); gap:20px; }
}

.plan-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:#171B19; border:1px solid var(--line); border-radius:4px;
  padding: 30px 26px 26px;
}
/* O card do meio é o "mais escolhido": borda no acento, brilho de topo e */
/* (no desktop, onde os três ficam lado a lado) um pouco mais de altura.  */
.plan-card-featured{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.6);
}
.plan-card-featured::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 45% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
/* Conteúdo acima do brilho do ::before. */
.plan-card > *{ position:relative; }
@media (min-width: 900px){
  /* Sobe e desce um pouco além da linha dos outros dois: é o destaque   */
  /* do meio, sem quebrar o alinhamento dos CTAs.                        */
  .plan-card-featured{ margin: -16px 0; }
}

.plan-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.plan-badge{
  font-family: var(--font-mono); font-weight:600; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:6px 14px;
}
.plan-card-featured .plan-badge{ background: var(--accent); border-color: var(--accent); color: var(--bg); }
.plan-popular{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--font-mono); font-weight:600; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color: var(--accent-ink);
}
.plan-star{ color: var(--card-clay); }

.plan-price{ display:flex; flex-direction:column; gap:5px; }
.plan-price-num{
  font-family: var(--font-display); font-weight:500; line-height:1;
  font-size: clamp(2rem, 4.4vw, 2.5rem); letter-spacing:-.02em;
}
.plan-price-sub{ font-family: var(--font-mono); font-size:.76rem; color: var(--muted); }
.plan-monthly{
  display:flex; align-items:baseline; gap:6px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  color: var(--muted); font-size:.95rem;
}
.plan-monthly strong{ color: var(--ink); font-family: var(--font-display); font-weight:500; font-size:1.3rem; }
.plan-desc{ color: var(--muted); font-size:.98rem; margin-top:16px; }

.plan-features{ list-style:none; margin:20px 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; font-size:.95rem; }
.plan-features li{ position:relative; padding-left:26px; line-height:1.45; }
.plan-features li::before{
  content:'✓'; position:absolute; left:0; top:0;
  font-family: var(--font-mono); font-weight:600; color: var(--accent-ink);
}

/* O botão empurra o rodapé do card pra base: com três cards lado a lado, */
/* as listas têm tamanhos diferentes e os CTAs precisam alinhar.          */
.plan-cta{ margin-top:auto; width:100%; }
button.plan-cta:not(.shiny-cta){
  font: inherit; font-family: var(--font-body); font-size:1.02rem; font-weight:500;
  cursor:pointer; padding:14px 20px; border-radius:360px;
  background:none; color: var(--ink); border:1px solid var(--line);
  transition: border-color .2s ease, background-color .2s ease;
}
button.plan-cta:not(.shiny-cta):is(:hover, :focus-visible){ border-color: var(--accent-ink); background: var(--accent-soft); }
/* Mesma pintura do .shiny-cta, só em tamanho de card (o padrão é 22/44). */
.plan-cta.shiny-cta{ padding:14px 20px; font-size:1.02rem; text-align:center; }
.plan-meta{ margin-top:14px; text-align:center; font-family: var(--font-mono); font-size:.78rem; color: var(--muted); }
.plan-meta strong{ color: var(--ink); font-weight:600; }

/* Rolagem horizontal no celular: tabindex no wrapper (no HTML) deixa o  */
/* teclado rolar a tabela, e a primeira coluna fica grudada pra não se   */
/* perder de qual linha é qual valor.                                    */
.plan-table-scroll{ overflow-x:auto; padding-bottom:22px; }
.plan-table-scroll:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.plan-table{ width:100%; min-width:620px; border-collapse:collapse; text-align:center; font-size:.92rem; }
.plan-table th, .plan-table td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.plan-table thead th{
  font-family: var(--font-mono); font-weight:600; font-size:.85rem;
  letter-spacing:.04em; color: var(--ink);
  border-bottom-color: color-mix(in srgb, var(--muted) 60%, var(--bg));
  padding-top:0;
}
.plan-table thead small{
  display:block; margin-top:4px;
  font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color: var(--accent-ink);
}
.plan-table th[scope="row"], .plan-table thead th:first-child{
  position: sticky; left:0; z-index:1;
  text-align:left; min-width:230px;
  background: var(--bg);
  font-family: var(--font-body); font-weight:400; color: var(--muted);
}
.plan-col-featured{ background: color-mix(in srgb, var(--accent) 7%, transparent); }
.plan-row-price td, .plan-row-price th[scope="row"]{
  font-family: var(--font-display); font-weight:500; font-size:1.02rem; color: var(--ink);
}
.plan-table .tick{ color: var(--accent-ink); font-family: var(--font-mono); font-weight:600; }
.plan-table .dash{ color: color-mix(in srgb, var(--muted) 70%, var(--bg)); }

.plan-note{ margin-top:26px; max-width:70ch; color: var(--muted); font-size:.95rem; }

/* Seletor de plano da tabela (mobile). Escondido por padrão: quem põe o  */
/* `is-ready` é o js/planos.js, então sem JS os botões não aparecem e a   */
/* tabela continua inteira, com o scroll lateral como fallback.           */
.plan-table-tabs{ display:none; gap:8px; margin: 18px 0 4px; }
.plan-table-tab{
  flex:1 1 0; min-width:0;
  font: inherit; font-family: var(--font-mono); font-weight:600; font-size:.8rem;
  letter-spacing:.02em; cursor:pointer;
  padding:10px 6px; border-radius:999px;
  background:none; color: var(--muted); border:1px solid var(--line);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.plan-table-tab[aria-pressed="true"]{ color: var(--bg); background: var(--accent); border-color: var(--accent); }

@media (max-width: 700px){
  .plan-table-tabs.is-ready{ display:flex; }
  /* Com uma coluna de plano só, a tabela cabe na tela: nada de min-width */
  /* nem de coluna grudada, que só existiam por causa do scroll lateral.  */
  .plan-table-scroll[data-plan-col]{ overflow-x: visible; }
  /* table-layout fixo + largura fixa das colunas: no automático,         */
  /* cada aba dava uma tabela diferente (o "Página completa" do            */
  /* Profissional roubava 26px da coluna de rótulo, e aí "Identidade       */
  /* visual personalizada" quebrava em duas linhas ali e em uma no         */
  /* Essencial). Travado, trocar de plano não mexe em nada de lugar.       */
  .plan-table-scroll[data-plan-col] .plan-table{ min-width:0; table-layout: fixed; }
  .plan-table-scroll[data-plan-col] .plan-table th[scope="row"],
  .plan-table-scroll[data-plan-col] .plan-table thead th:first-child{
    position:static; min-width:0;
  }
  .plan-table-scroll[data-plan-col] .plan-table :is(th, td){ padding:12px 10px; }
  /* Nestas duas linhas o valor é texto: "Até 4 seções" cabe numa linha e  */
  /* "Página completa" ocupa duas. Reservando as duas sempre, trocar de    */
  /* aba não empurra pra baixo o resto da tabela. O content-box é pra 2lh  */
  /* valer só pro texto, sem o padding e a borda entrarem na conta (o      */
  /* box-sizing global é border-box). Navegador sem a unidade lh ignora a  */
  /* regra e volta ao pulinho de uma linha -- nada quebra.                 */
  .plan-table-scroll[data-plan-col] .plan-row-text :is(th, td){
    box-sizing: content-box; height: 2lh;
  }
  /* Largura fixa na coluna do plano à mostra (qual é depende da aba). Com */
  /* table-layout fixo, o rótulo fica com o que sobrar. Em px e não em %   */
  /* pra ela não encolher em tela estreita a ponto de cortar o cabeçalho   */
  /* "Profissional" (114px) ou quebrar "R$ 2.490" em duas linhas: quem     */
  /* cede espaço é o rótulo, que tem onde quebrar.                         */
  [data-plan-col="2"] .plan-table :is(th, td):nth-child(2),
  [data-plan-col="3"] .plan-table :is(th, td):nth-child(3),
  [data-plan-col="4"] .plan-table :is(th, td):nth-child(4){ width:116px; }
  /* Esconde todas as colunas de plano menos a escolhida (a 1 é o rótulo). */
  [data-plan-col="2"] .plan-table :is(th, td):not(:nth-child(1)):not(:nth-child(2)),
  [data-plan-col="3"] .plan-table :is(th, td):not(:nth-child(1)):not(:nth-child(3)),
  [data-plan-col="4"] .plan-table :is(th, td):not(:nth-child(1)):not(:nth-child(4)){ display:none; }
  /* Sozinha na tela, a coluna do "mais escolhido" não precisa do realce. */
  .plan-table-scroll[data-plan-col] .plan-col-featured{ background:none; }
  .plan-table-scroll[data-plan-col] .plan-table thead small,
  .plan-table-scroll[data-plan-col] .plan-table .plan-star{ display:none; }
}

@media (max-width: 560px){
  .plan-card{ padding: 26px 22px 22px; }
  .plan-table{ font-size:.88rem; }
  .plan-table th[scope="row"], .plan-table thead th:first-child{ min-width:190px; }
}

/* ---------- LINK PRA PÁGINA DE DETALHE DOS PLANOS ---------- */
/* Onde antes ficava o <details> com a tabela inteira. A seta anda um  */
/* pouco no hover -- é o único movimento, o resto é só sublinhado.     */
.plan-more{ margin-top:30px; padding-top:28px; border-top:1px solid var(--line); text-align:center; }
.plan-more-link{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border:1px solid var(--line); border-radius:360px;
  background:#171B19; color: var(--ink); text-decoration:none;
  font-family: var(--font-body); font-size:1.02rem; font-weight:500;
  transition: border-color .2s ease, background-color .2s ease;
}
.plan-more-link:is(:hover, :focus-visible){ border-color: var(--accent-ink); background: var(--accent-soft); }
.plan-more-link svg{ width:18px; height:18px; color: var(--accent-ink); transition: transform .2s ease; }
.plan-more-link:is(:hover, :focus-visible) svg{ transform: translateX(4px); }
.plan-more-hint{ margin-top:12px; color: var(--muted); font-size:.92rem; }

/* ---------- PÁGINA planos.html: detalhe item por item ---------- */
.plan-doc-page{ max-width: 820px; padding-top: 140px; padding-bottom: 96px; }
.plan-doc-page h1{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height:1.15; margin-bottom:16px; }
.plan-doc-intro{ color: var(--muted); font-size:1.08rem; line-height:1.6; max-width: 68ch; }
.plan-doc-page .plan-reassure{ margin-top:28px; }

.plan-doc{
  position:relative;
  margin-top:28px; padding: 30px 30px 26px;
  background:#171B19; border:1px solid var(--line); border-radius:4px;
}
.plan-doc-featured{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.plan-doc-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.plan-doc-featured .plan-badge{ background: var(--accent); border-color: var(--accent); color: var(--bg); }
.plan-doc-head h2{
  flex-basis:100%; margin-top:14px;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height:1.2;
}
.plan-doc-head p{ flex-basis:100%; margin-top:8px; color: var(--muted); font-size:1.02rem; line-height:1.55; }

/* Criação e mensalidade lado a lado, separados do resto por linha. */
.plan-doc-price{
  display:flex; flex-wrap:wrap; gap: 14px 44px;
  margin: 22px 0 4px; padding: 18px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.plan-doc-price div{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.plan-doc-price span{ font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); }
.plan-doc-price strong{ font-family: var(--font-display); font-weight:500; font-size:1.6rem; letter-spacing:-.02em; }
.plan-doc-price small{ color: var(--muted); font-size:.88rem; }

/* <dl> em vez de <ul>: cada item é um par título + explicação, que é  */
/* exatamente o que dt/dd descrevem (e o leitor de tela anuncia assim). */
.plan-doc-list{ margin: 20px 0 0; }
.plan-doc-list dt{
  position:relative; padding-left:26px; margin-top:20px;
  font-family: var(--font-display); font-weight:500; font-size:1.08rem; line-height:1.35;
}
.plan-doc-list dt::before{
  content:'✓'; position:absolute; left:0; top:0;
  font-family: var(--font-mono); font-weight:600; color: var(--accent-ink);
}
.plan-doc-list dd{ margin: 6px 0 0 26px; color: var(--muted); font-size:1rem; line-height:1.6; max-width: 62ch; }

.plan-doc-out{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  color: var(--muted); font-size:.95rem; line-height:1.55;
}
.plan-doc-out strong{ color: var(--ink); font-weight:500; }

/* "Como funciona na prática" não é um plano, então sai do card e vira */
/* lista corrida -- o ✓ do dt daria a entender que é item incluso.     */
.plan-doc-h2{ margin-top:64px; font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height:1.2; }
/* O primeiro h2 vem logo depois do aviso, não precisa do respiro cheio. */
.plan-doc-h2-first{ margin-top:44px; }
.plan-doc-sub{ margin-top:10px; color: var(--muted); font-size:1rem; }
.plan-doc-page .plan-table-scroll{ margin-top:22px; }
.plan-doc-how{ margin-top:8px; }
.plan-doc-how dt{ padding-left:0; }
.plan-doc-how dt::before{ content:none; }
.plan-doc-how dd{ margin-left:0; }

.plan-doc-cta{
  position:relative; overflow:hidden;
  margin-top:64px; padding: 48px 34px;
  background:#171B19; border:1px solid var(--line); border-radius:4px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.plan-doc-cta::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 55% at 50% 38%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%);
}
.plan-doc-cta > *{ position:relative; }
.plan-doc-cta h2{ font-size:1.5rem; line-height:1.25; }
.plan-doc-cta p{ margin-top:10px; color: var(--muted); font-size:1.02rem; max-width:46ch; }
.plan-doc-cta .shiny-cta{ margin-top:26px; font-size:1.1rem; padding: 16px 32px; }
.plan-doc-cta-alt{
  margin-top:18px; color: var(--muted); font-size:.92rem;
  font-family: var(--font-mono); text-decoration:none;
}
.plan-doc-cta-alt:hover{ color: var(--ink); text-decoration: underline; }

@media (max-width: 560px){
  .plan-doc{ padding: 24px 20px 20px; }
  .plan-doc-price{ gap: 12px 28px; }
  .plan-doc-cta{ padding: 38px 22px; }
}

/* ---------- FAQ ---------- */
/* <details>/<summary> nativos (teclado e leitor de tela de graça), só  */
/* com o marcador padrão trocado por um "+" que gira ao abrir.          */
.faq-list{ max-width: 760px; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0;
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: '+'; flex-shrink: 0;
  font-family: var(--font-mono); font-weight: 600; font-size: 1.5rem; line-height: 1;
  color: var(--accent-ink);
  transition: transform .25s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
/* No fecho animado o atributo [open] fica no elemento até a animação    */
/* terminar (ver o bloco FAQ no script), então quem devolve o "+" ao     */
/* normal é esta classe -- assim ele gira junto com o início do colapso, */
/* e não só no fim. Mesma especificidade da regra acima: vem depois pra  */
/* ganhar por ordem de fonte. */
.faq-item.is-closing summary::after{ transform: none; }
@media (hover: hover){ .faq-item summary:hover{ color: var(--accent-ink); } }
.faq-item summary:focus-visible{ outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.faq-item p{ color: var(--muted); font-size: 1.05rem; padding: 0 0 24px; max-width: 62ch; }
/* A resposta sobe e aparece enquanto a caixa se desenrola. Dispara só na */
/* abertura: [open] continua presente durante o fecho, então a animação   */
/* não é reexecutada ao fechar. */
.faq-item[open] p{ animation: faqAnswerIn .45s cubic-bezier(.4,0,.2,1) both; }
@keyframes faqAnswerIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- COOKIE BANNER (Meta Pixel, só aparece com META_PIXEL_ID) ---------- */
.cookie-banner{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150;
  background: #171B19; border: 1px solid var(--line); border-radius: 4px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.55);
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner p{ flex: 1 1 300px; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.cookie-banner a{ color: var(--ink); }
.cookie-actions{ display: flex; gap: 10px; margin-left: auto; }
.cookie-accept, .cookie-decline{
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
  padding: 10px 18px; border-radius: 3px;
}
.cookie-accept{ background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.cookie-decline{ background: none; color: var(--ink); border: 1px solid var(--line); }
.cookie-decline:hover{ border-color: var(--muted); }
@media (min-width: 760px){ .cookie-banner{ left: auto; right: 24px; bottom: 24px; max-width: 560px; } }

/* ---------- LEGAL (privacidade.html) ---------- */
.legal{ max-width: 720px; padding-top: 140px; padding-bottom: 96px; }
.legal h1{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.15; margin-bottom: 8px; }
.legal .updated{ font-family: var(--font-mono); font-weight: 600; color: var(--muted); font-size: .9rem; margin-bottom: 40px; }
.legal h2{ font-size: 1.35rem; margin: 40px 0 12px; }
.legal p, .legal li{ color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.legal p + p{ margin-top: 12px; }
.legal ul{ padding-left: 20px; margin: 10px 0; }
.legal a{ color: var(--ink); }
/* Link de volta: serve a privacidade.html e a planos.html, por isso não  */
/* fica escopado em .legal.                                              */
/* a.back e não .back: .legal a{color} tem a mesma especificidade e viria  */
/* por último; o seletor com a tag empata e ganha por ordem de fonte.     */
a.back{ display: inline-block; margin-top: 48px; color: var(--accent-ink); text-decoration: none; font-family: var(--font-mono); font-weight: 600; }
a.back:hover{ text-decoration: underline; }
/* Mesmo link no topo: só troca a margem (acima do h1 não há o que separar). */
a.back-top{ margin-top: 0; margin-bottom: 24px; }

/* ---------- FORM ---------- */
.form-section{ background: var(--accent-soft); border-bottom:none; }
.form-wrap{
  display:grid; grid-template-columns: 1fr; gap: 40px;
  align-items: center;
}
@media (min-width:900px){ .form-wrap{ grid-template-columns: 0.9fr 1.1fr; } }

/* ---------- QUIZ TRIGGER CARD (replaces the old inline form) ---------- */
.quiz-trigger-card{
  position: relative; overflow: hidden;
  background:#171B19; border:1px solid var(--line); border-radius:4px; padding: 56px 34px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
}
.quiz-trigger-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 55% at 50% 38%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%);
}
.corner-mark{
  position:absolute; font-family: var(--font-mono); font-size:.85rem;
  color: var(--line); line-height:1; pointer-events:none;
}
.corner-tl{ top:14px; left:14px; }
.corner-tr{ top:14px; right:14px; }
.corner-bl{ bottom:14px; left:14px; }
.corner-br{ bottom:14px; right:14px; }
.quiz-trigger-card h3{ font-size:1.6rem; position:relative; }
.quiz-trigger-card p{ color: var(--muted); font-size:1.2rem; max-width:36ch; margin-top:8px; position:relative; }
.quiz-trigger-card .shiny-cta{
  margin-top:26px; position:relative;
  transition: box-shadow .45s ease, --gradient-shine .45s ease, --spot-color .25s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}

/* ---------- QUIZ MODAL (multi-step lead form) ---------- */
.quiz-overlay{
  position: fixed; inset:0; z-index:200;
  background: rgba(6,7,6,.72); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.quiz-overlay[hidden]{ display:none; }
/* Trava de scroll do fundo com o modal aberto. position:fixed (e não só  */
/* overflow:hidden) porque o iOS Safari ignora overflow no body; o JS     */
/* guarda o scrollY em top:-Npx e restaura ao fechar.                    */
body.quiz-open{ position: fixed; width: 100%; overflow: hidden; }
.quiz-overlay.open{ opacity:1; pointer-events:auto; }
.quiz-modal{
  position:relative; width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  background:#171B19; border:1px solid var(--line); border-radius:12px;
  padding: 44px 36px 32px;
  transform: scale(.96) translateY(10px);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.quiz-overlay.open .quiz-modal{ transform: scale(1) translateY(0); }
/* Reuses the .shiny-cta visual (gradient border, glow, spotlight) --   */
/* only positioning/sizing is overridden here so it still fits as a     */
/* small circular icon button instead of a full-size pill CTA.         */
.quiz-close{
  position:absolute; top:16px; right:16px;
  display:flex; align-items:center; justify-content:center;
}
.quiz-close.shiny-cta{ width:34px; height:34px; padding:0; font-size:1rem; }
.quiz-progress{ height:4px; background: var(--line); border-radius:999px; overflow:hidden; margin-bottom:28px; margin-right:24px; }
.quiz-progress-bar{ height:100%; background: var(--accent); width:20%; transition: width .4s cubic-bezier(.2,.8,.2,1); }
/* Plano escolhido no card de preços: o quiz abre já sabendo qual foi. */
.quiz-plan-note{ margin: -16px 0 22px; font-family: var(--font-mono); font-size:.8rem; color: var(--muted); }
.quiz-plan-note[hidden]{ display:none; }
.quiz-plan-note strong{ color: var(--accent-ink); font-weight:600; }
.quiz-step-label{
  font-family: var(--font-mono); font-size:1.05rem; font-weight:600;
  color: var(--accent-ink); margin-bottom:10px;
}
.quiz-step h3{ font-size: clamp(1.35rem, 3.2vw, 1.65rem); line-height:1.25; margin-bottom:20px; }
.quiz-step{ animation: quizStepIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes quizStepIn{ from{ opacity:0; transform: translateX(16px); } to{ opacity:1; transform: translateX(0); } }
.quiz-chip{
  padding:9px 16px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color: var(--ink); font-size:1.05rem; cursor:pointer;
  font-family: var(--font-body);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.quiz-chip:hover{ border-color: var(--accent-ink); }
/* Escolha única (passo "O que você está buscando?"): botões com papel de  */
/* radio -- o círculo é o ::before, o valor escolhido fica no input hidden */
/* #q-servico, preenchido pelo JS.                                          */
.quiz-options{ display:flex; flex-direction:column; gap:10px; }
.quiz-option{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding: 12px 16px; border:1px solid var(--line); border-radius:3px;
  background:#1D2220; color: var(--ink); font-family: var(--font-body); cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.quiz-option::before{
  content:''; width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--muted);
  transition: border-color .15s ease, background .15s ease;
}
.quiz-option:hover{ border-color: var(--accent-ink); }
.quiz-option[aria-checked="true"]{ border-color: var(--accent-ink); background: var(--accent-soft); }
.quiz-option[aria-checked="true"]::before{
  border-color: var(--accent-ink);
  background: radial-gradient(circle, var(--accent-ink) 0 4.5px, transparent 5px);
}
/* Múltipla escolha (passo "o que não pode faltar na página"): o mesmo     */
/* botão da escolha única, só que o marcador é quadrado e ganha um check. */
/* Vem depois da regra do rádio de propósito -- mesma especificidade, quem */
/* estiver por último pinta o ::before.                                    */
.quiz-option-multi::before{ border-radius:3px; }
.quiz-option-multi[aria-checked="true"]::before{
  border-color: var(--accent-ink);
  background: var(--accent-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.4 2.4L9.5 3.7' fill='none' stroke='%23101211' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.quiz-option-text{ display:flex; flex-direction:column; gap:2px; }
.quiz-option-text strong{ font-weight:500; font-size:1.05rem; }
.quiz-option-text small{ color: var(--muted); font-size:.86rem; line-height:1.4; }
@media (max-width: 480px){
  .quiz-option{ padding: 10px 12px; gap: 11px; }
  .quiz-option-text strong{ font-size: .98rem; }
  .quiz-option-text small{ font-size: .8rem; }
}
.quiz-input{
  width:100%; border:1px solid var(--line); border-radius:3px;
  padding: 12px 14px; font-family: var(--font-body); font-size:1.15rem;
  background:#1D2220; color: var(--ink);
}
textarea.quiz-input{ resize:vertical; min-height:110px; }
.quiz-input.error-field{ border-color:#E2776A; }
.quiz-err{ display:none; color:#E2776A; font-size:.87rem; margin-top:8px; }
.quiz-err.show{ display:block; }
.quiz-note{ font-size:.95rem; color: var(--muted); margin-top:16px; line-height:1.5; }
.quiz-hint{ font-size:1.02rem; color: var(--muted); margin-bottom:14px; line-height:1.5; }
.quiz-no-identity{ margin-top:14px; }
.quiz-nav{ display:flex; align-items:center; margin-top:28px; }
.quiz-nav[hidden]{ display:none; }
.quiz-btn-back{ background:none; border:none; color: var(--muted); cursor:pointer; font-size:.97rem; padding:10px 4px; }
.quiz-btn-back:hover{ color: var(--ink); }
.quiz-nav-right{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.quiz-btn-skip{ background:none; border:none; color: var(--muted); cursor:pointer; font-size:.92rem; text-decoration:underline; }
.quiz-btn-skip:hover{ color: var(--ink); }
/* Visual style (gradient border, spotlight) now comes entirely from   */
/* .shiny-cta -- this keeps the button back at its original (smaller)  */
/* size instead of the full-size hero-CTA padding/font, and drops the  */
/* outer glow (box-shadow) so it doesn't overpower the compact modal.  */
.quiz-btn-next.shiny-cta{ padding: 12px 26px; font-size: 1.12rem; }
.quiz-close.shiny-cta, .quiz-btn-next.shiny-cta{ box-shadow: none; }
.quiz-close.shiny-cta:is(:hover, :focus-visible),
.quiz-btn-next.shiny-cta:is(:hover, :focus-visible){ box-shadow: none; }
.quiz-success h3{ font-size:1.4rem; color: var(--accent-ink); }
.quiz-success p{ margin-top:10px; color: var(--muted); font-size:1.03rem; }
.quiz-success .quiz-btn-next{ margin-top:24px; }
@media (prefers-reduced-motion: reduce){
  .quiz-overlay, .quiz-modal, .quiz-progress-bar{ transition:none !important; }
  .quiz-step{ animation:none !important; }
}

/* ---------- FOOTER ---------- */
/* Reuses the Pitch section's cursor dot-trail (see initDotTrail in the  */
/* script) tinted with the accent color instead of ink, so the footer   */
/* has the same "responds to the cursor" texture as the top of the page */
/* without pulling in a WebGL/canvas library for it. */
footer{ padding: 0 0 32px; position:relative; overflow:hidden; }
.footer-dots{ position:absolute; inset:0; z-index:0; pointer-events:none; }
footer .wrap{ position:relative; z-index:1; }
/* Three-column grid, divider lines between columns (row-stacked with   */
/* dividers on top instead, below the breakpoint): brand/copy, then one */
/* large bordered cell per social channel. */
.footer-top{
  display:grid; grid-template-columns: 1fr;
  border-bottom: 1px solid var(--line);
}
@media (min-width:760px){
  .footer-top{ grid-template-columns: 1.3fr 1fr 1fr; align-items:stretch; }
}
.footer-brand{ padding: 48px 0 32px; }
@media (min-width:760px){ .footer-brand{ padding: 56px 32px 56px 0; } }
.footer-brand .logo{ font-size:1.05rem; margin-bottom:10px; }
.footer-tagline{ color: var(--muted); font-size:.95rem; max-width:34ch; }
.footer-social-col{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding: 40px 16px; text-decoration:none; color: var(--muted);
  font-family: var(--font-mono); font-weight:600; font-size:1.05rem;
  border-top: 1px solid var(--line);
  transition: color .2s ease, background-color .2s ease;
}
@media (min-width:760px){
  .footer-social-col{ border-top:none; border-left: 1px solid var(--line); padding: 0 24px; }
}
.footer-social-col:is(:hover, :focus-visible){ color: var(--accent-ink); background: var(--accent-soft); }
.footer-icon{ width:30px; height:30px; flex-shrink:0; }
.footer-bottom{
  display:flex; flex-direction:column; gap:8px;
  padding-top:24px; color: var(--muted); font-size:.85rem;
}
@media (min-width:700px){ .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; } }