/* ==========================================================================
   SITE DO FORBARBER — identidade própria do produto.
   Não é a cara da MovCode nem a das barbearias: azul-marinho de navalha,
   vermelho do poste de barbeiro e Archivo — uma família só, esticada como
   lâmina: larga (125%) nos títulos, estreita (62–75%) nas etiquetas.
   Os componentes vêm de base.css; aqui trocamos os tokens e montamos a página.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../vendor/archivo/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

.p-body {
  --ink: #070b15;
  --bg: #070b15;
  --bg-raised: #0b1120;
  --surface: #0e1628;
  --surface-2: #141e35;
  --surface-3: #1e2b48;
  --line: rgba(206, 220, 255, 0.09);
  --line-strong: rgba(206, 220, 255, 0.18);
  --text: #eef2f9;
  --text-2: #a9b5ca;
  --text-3: #76829b;
  --red: #dc2f36;
  --red-bright: #ff5359;
  --blue: #3f6ef0;
  --blue-bright: #7ea2ff;
  --paper: #f3eee6;
  --primary: var(--red);
  --primary-ink: #ffffff;
  --primary-hover: #e43a41;
  --primary-soft: rgba(255, 83, 89, 0.12);
  --primary-line: rgba(255, 83, 89, 0.45);
  --success: #3ccf8e;
  --font-brand: 'Archivo', system-ui, sans-serif;
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --container: 1280px;
  --header-h: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --radius-xl: clamp(22px, 2.6vw, 40px);
  --section-y: clamp(5.5rem, 11vw, 10rem);
  color-scheme: dark;
  font-size: 1.0625rem;
  font-stretch: 100%;
  interpolate-size: allow-keywords;
}
@media (min-width: 1100px) { .p-body { --header-h: 80px; } }
.p-body ::selection { background: var(--red-bright); color: #fff; }
.p-body :focus-visible { outline-color: var(--red-bright); }

/* Granulado: tira o "plástico" dos gradientes */
.p-grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- Botões ---------- */
.p-body .btn {
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 650;
  font-stretch: 108%;
  letter-spacing: -0.005em;
  text-transform: none;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.p-body .btn-sm { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.9rem; }
.p-body .btn-lg { min-height: 60px; padding: 1rem 1.75rem; font-size: 1.05rem; }
.p-body .btn i { transition: transform 0.35s var(--ease-out); }
.p-body .btn:hover .bi-arrow-up-right { transform: translate(2px, -2px); }
.p-body .btn:hover .bi-scissors { transform: rotate(-18deg); }

.p-body .btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(220, 47, 54, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.p-body .btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(255, 255, 255, 0.16) 9px 18px);
  background-size: 25.46px 100%;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  animation: p-pole-x 0.8s linear infinite;
}
.p-body .btn-primary:hover { --btn-bg: var(--red); --btn-bd: var(--red); box-shadow: 0 16px 40px -12px rgba(220, 47, 54, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.p-body .btn-primary:hover::before { opacity: 1; }
@keyframes p-pole-x { to { background-position: 25.46px 0; } }

.p-body .btn-outline { --btn-bd: var(--line-strong); }
.p-body .btn-outline:hover { --btn-fg: var(--text); --btn-bd: var(--text); --btn-bg: rgba(255, 255, 255, 0.04); }
.p-body .btn-ghost:hover { --btn-bg: rgba(255, 255, 255, 0.06); }
.btn-light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn-light:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn-outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.55); }
.btn-outline-light:hover { --btn-bg: rgba(255, 255, 255, 0.12); --btn-fg: #fff; --btn-bd: #fff; }

/* ---------- Marca ---------- */
.p-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); }
.p-brand:hover { color: var(--text); }
.p-brand-mark {
  flex: 0 0 auto;
  width: 13px;
  height: 32px;
  border-radius: 7px;
  box-shadow: 0 0 0 2px var(--text);
  background: repeating-linear-gradient(-45deg, var(--red-bright) 0 4px, #fff 4px 8px, var(--blue) 8px 12px, #fff 12px 16px);
  background-size: 100% 22.6px;
  animation: p-pole 2.4s linear infinite;
}
@keyframes p-pole { to { background-position: 0 22.6px; } }
.p-brand-name { font-family: var(--font-brand); font-stretch: 125%; font-weight: 800; font-size: 1.3rem; line-height: 1; letter-spacing: -0.03em; }
.p-brand-name span { font-weight: 350; color: var(--text-2); }

/* ---------- Cabeçalho ---------- */
.p-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.p-header.is-scrolled,
.p-header.is-open {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
}
.p-header-inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }
.p-nav { display: none; gap: 0.25rem; margin-left: var(--sp-6); }
.p-nav a {
  position: relative;
  padding: 0.5rem 0.8rem;
  color: var(--text-2);
  font-size: 0.94rem;
  font-weight: 500;
  border-radius: 99px;
  transition: color 0.2s, background-color 0.2s;
}
.p-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.p-header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
@media (min-width: 1000px) { .p-nav { display: flex; } }
@media (max-width: 479px) { .p-header .p-login { display: none; } }

.p-menu-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  border-radius: 50%;
}
.p-menu-icon, .p-menu-icon::before, .p-menu-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.35s var(--ease-out), opacity 0.2s;
}
.p-menu-icon { position: relative; background: transparent; }
.p-menu-icon::before, .p-menu-icon::after { content: ''; position: absolute; left: 0; }
.p-menu-icon::before { top: -4px; }
.p-menu-icon::after { top: 4px; }
.is-open .p-menu-icon::before { transform: translateY(4px) rotate(45deg); }
.is-open .p-menu-icon::after { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 1000px) { .p-menu-btn { display: none; } }

.p-header.is-open { background: var(--bg); }
.p-sheet {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--header-h));
  overflow-y: auto;
  padding: var(--sp-3) var(--gutter) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.p-sheet a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.6rem;
  font-weight: 750;
  font-stretch: 120%;
  letter-spacing: -0.03em;
}
.p-sheet a i { font-size: 1rem; color: var(--text-3); }
.p-header.is-open .p-sheet a { animation: p-up 0.5s var(--ease-out) both; }
.p-header.is-open .p-sheet a:nth-child(2) { animation-delay: 40ms; }
.p-header.is-open .p-sheet a:nth-child(3) { animation-delay: 80ms; }
.p-header.is-open .p-sheet a:nth-child(4) { animation-delay: 120ms; }
.p-header.is-open .p-sheet a:nth-child(5) { animation-delay: 160ms; }
.p-header.is-open .p-sheet a:nth-child(6) { animation-delay: 200ms; }
.p-header.is-open .p-sheet a:nth-child(7) { animation-delay: 240ms; }
@keyframes p-up { from { opacity: 0; transform: translateY(14px); } }
@media (min-width: 1000px) { .p-sheet { display: none !important; } }

/* Progresso de leitura: o poste girando no pé do cabeçalho */
.p-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.p-progress span {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: repeating-linear-gradient(90deg, var(--red-bright) 0 14px, #fff 14px 20px, var(--blue) 20px 34px, #fff 34px 40px);
}

/* ---------- Textos comuns ---------- */
.p-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 650;
  font-stretch: 75%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
}
.p-num {
  display: inline-grid;
  place-items: center;
  min-width: 2.4em;
  height: 1.9em;
  padding-inline: 0.5em;
  border: 1px solid var(--primary-line);
  border-radius: 99px;
  color: var(--red-bright);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.p-h2 {
  font-size: clamp(2.3rem, 1rem + 4.3vw, 5rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-wrap: balance;
}
.p-dim { color: var(--text-3); }
.p-h2 .p-dim { display: block; }
.p-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; max-width: 980px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.p-head.is-center { align-items: center; text-align: center; margin-inline: auto; }
.p-section { position: relative; padding-block: var(--section-y); }

/* ---------- Revelar ao rolar ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.p-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5.5rem));
  overflow: clip;
}
.p-hero::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 38%;
  width: min(1400px, 140vw);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 30% 55%, rgba(63, 110, 240, 0.28), transparent 70%),
    radial-gradient(closest-side at 72% 50%, rgba(220, 47, 54, 0.26), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* Fundo: uma folha de agenda, com a linha do "agora" no horário real */
.p-hero-sheet {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: min(100%, 1180px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 55%, transparent 96%);
}
.p-hero-hours { position: absolute; inset: 0; }
.p-hour {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--row, 88px);
  border-top: 1px solid var(--line);
}
.p-hour::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(206, 220, 255, 0.045); }
.p-hour span {
  position: absolute;
  top: 8px;
  left: max(12px, calc((100vw - var(--container)) / 2 - 52px));
  font-size: 0.7rem;
  font-stretch: 75%;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1399px) { .p-hour span { display: none; } }
.p-now {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--now, 40%);
  height: 0;
  border-top: 1px solid rgba(255, 83, 89, 0.55);
  transition: top 1s var(--ease);
}
.p-now::before {
  content: '';
  position: absolute;
  left: max(8px, calc((100vw - var(--container)) / 2 - 14px));
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 0 4px rgba(255, 83, 89, 0.18), 0 0 18px rgba(255, 83, 89, 0.8);
}
.p-now-label {
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  top: -11px;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  font-stretch: 80%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.p-now-label b { font-weight: 800; }
@media (max-width: 1099px) { .p-now-label { display: none; } }

.p-hero-inner { position: relative; }
.p-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.p-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 650;
  font-stretch: 75%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
}
.p-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(60, 207, 142, 0.16); animation: p-blink 2.4s ease-in-out infinite; }
@keyframes p-blink { 50% { box-shadow: 0 0 0 7px rgba(60, 207, 142, 0); } }

.p-url {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.42rem 0.9rem 0.42rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: rgba(14, 22, 40, 0.7);
  backdrop-filter: blur(8px);
  color: var(--text-3);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}
.p-url i { color: var(--red-bright); font-size: 1.05rem; }
.p-url b { color: var(--text); font-weight: 650; }
.p-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--red-bright); animation: p-caret 1s steps(1) infinite; }
@keyframes p-caret { 50% { opacity: 0; } }

/* Título gigante: a largura da letra é o movimento */
.p-display {
  --fit: 9.05;
  margin: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(2rem, 4vw, 3.25rem);
  font-size: calc((min(100vw, var(--container)) - 2 * var(--gutter)) / var(--fit));
  font-weight: 820;
  font-stretch: 125%;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-wrap: nowrap;
}
.p-line { display: block; }
.p-line + .p-line { margin-top: 0.02em; }
@media (max-width: 639px) {
  .p-display { --fit: 7.6; font-stretch: 108%; letter-spacing: -0.045em; }
}
.js .p-line { opacity: 0; }
.js.fonts-ready .p-line { opacity: 1; animation: p-stretch 1.35s var(--ease-out) both; }
.js.fonts-ready .p-line:nth-child(2) { animation-delay: 110ms; }
.js.fonts-ready .p-line:nth-child(3) { animation-delay: 220ms; }
@keyframes p-stretch {
  from { opacity: 0; font-stretch: 62%; font-weight: 300; transform: translateY(0.25em); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
}

/* "Você só corta." — a navalha passa e a frase fica cortada */
.p-cut { position: relative; display: inline-block; color: transparent; }
.p-cut::before,
.p-cut::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--red-bright);
  transition: transform 0.9s var(--ease-out);
}
.p-cut::before { clip-path: polygon(0 0, 100% 0, 100% 41%, 0 63%); }
.p-cut::after { clip-path: polygon(0 63%, 100% 41%, 100% 100%, 0 100%); }
.is-cut .p-cut::before { transform: translate(0.035em, -0.012em); }
.is-cut .p-cut::after { transform: translate(-0.035em, 0.012em); }
.p-blade {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  bottom: 0;
  pointer-events: none;
  overflow: visible;
}
.p-blade line { stroke: #fff; stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 14px var(--red-bright)); }
.is-cut .p-blade line { animation: p-blade 0.75s var(--ease-io) forwards; }
@keyframes p-blade {
  0% { stroke-dashoffset: 100; opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

.p-hero-row { display: grid; gap: var(--sp-6); align-items: end; }
@media (min-width: 900px) { .p-hero-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); } }
.p-hero-lead { max-width: 44ch; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--text-2); }
.p-hero-actions { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 900px) { .p-hero-actions { align-items: flex-end; } }
.p-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.p-fine { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; color: var(--text-3); font-size: var(--fs-sm); }
.p-fine li { display: inline-flex; align-items: center; gap: 0.4rem; }
.p-fine i { color: var(--success); }
@media (max-width: 479px) { .p-hero .p-ctas .btn { width: 100%; } }

/* Palco com as telas: chega inclinado e assenta ao rolar */
.p-stage {
  --rx: 0deg;
  --sc: 1;
  position: relative;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  perspective: 1800px;
}
.p-stage-inner {
  position: relative;
  transform: rotateX(var(--rx)) scale(var(--sc));
  transform-origin: 50% 0;
  will-change: transform;
}
.p-browser {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: clamp(10px, 1.2vw, 18px);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 50px 100px -30px rgba(0, 0, 0, 0.85), 0 30px 60px -40px rgba(63, 110, 240, 0.4);
}
.p-browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.p-browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.p-browser-bar em {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline: auto;
  padding: 2px 14px;
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 0.7rem;
  font-style: normal;
  letter-spacing: 0.02em;
  transform: translateX(-24px);
}
.p-browser-bar em i { font-size: 0.65rem; }
.p-browser img { width: 100%; }
.p-phone {
  padding: clamp(4px, 0.5vw, 7px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(20px, 2.4vw, 34px);
  background: #050505;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 40px 80px -24px rgba(0, 0, 0, 0.9);
}
.p-phone img { width: 100%; border-radius: clamp(16px, 2vw, 28px); }
.p-stage-phone {
  position: absolute;
  right: -1.5%;
  bottom: -10%;
  width: 23%;
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0) rotate(2deg);
  transition: transform 0.6s var(--ease-out);
}
@media (max-width: 699px) { .p-stage-phone { width: 34%; right: -2%; bottom: -14%; } }

/* Notificações ao vivo sobre o palco */
.p-toasts {
  position: absolute;
  left: -5%;
  top: 16%;
  display: grid;
  gap: 10px;
  width: min(300px, 46%);
  transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 10px), 0);
  transition: transform 0.6s var(--ease-out);
}
.p-toast {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(14, 22, 40, 0.96);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: p-toast-in 0.7s var(--ease-out) both;
  transition: opacity 0.5s, transform 0.5s var(--ease-out);
}
.p-toast.is-old { opacity: 0.62; transform: scale(0.95); transform-origin: 0 50%; }
.p-toast.is-out { opacity: 0; transform: translateY(-10px) scale(0.92); }
.p-toast > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--tone, var(--red));
  color: #fff;
  font-size: 1rem;
}
.p-toast b { display: block; font-size: 0.8rem; font-weight: 650; line-height: 1.25; }
.p-toast small { display: block; color: var(--text-2); font-size: 0.74rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes p-toast-in { from { opacity: 0; transform: translateX(-24px) scale(0.96); } }
@media (max-width: 699px) {
  .p-toasts { top: auto; bottom: -12%; left: -1%; width: 62%; }
  .p-toast { padding: 7px 10px 7px 7px; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; border-radius: 12px; }
  .p-toast > i { width: 26px; height: 26px; border-radius: 8px; font-size: 0.8rem; }
  .p-toast b { font-size: 0.7rem; }
  .p-toast small { font-size: 0.64rem; }
  .p-toast:nth-child(n+2) { display: none; }
}

/* ==========================================================================
   FAIXAS (cruzadas, como fita de isolamento)
   ========================================================================== */
.p-bands {
  position: relative;
  z-index: 3;
  margin-top: clamp(-5rem, -6vw, -2.5rem);
  padding-block: clamp(3rem, 7vw, 6rem);
  overflow: clip;
}
.p-band {
  width: 112vw;
  margin-left: -6vw;
  padding-block: clamp(0.8rem, 1.4vw, 1.25rem);
  overflow: hidden;
  font-size: clamp(1.3rem, 0.8rem + 2.4vw, 2.9rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.p-band.is-front { position: relative; background: var(--red); color: #fff; transform: rotate(-2.6deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.p-band.is-back {
  position: absolute;
  top: 50%;
  left: 0;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-50%) rotate(2.2deg);
  font-stretch: 62%;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p-band-track {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  width: max-content;
  padding-right: clamp(1.25rem, 2.4vw, 2.5rem);
  animation: p-marquee var(--dur, 38s) linear infinite;
}
.p-band.is-back .p-band-track { animation-direction: reverse; --dur: 46s; }
.p-band-track i { font-size: 0.7em; opacity: 0.85; }
.p-band.is-front .p-band-track i { color: var(--ink); }
.p-band.is-back .p-band-track i { color: var(--red); }
.p-bands:hover .p-band-track { animation-play-state: paused; }
@keyframes p-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
.p-how { --p: 0; }
.p-cutline { position: relative; height: 34px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.p-cutline::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed var(--line-strong);
}
.p-cutline::after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  height: 2px;
  width: calc(17px + var(--p) * (100% - 34px));
  background: linear-gradient(90deg, transparent, var(--red-bright));
}
.p-cutline-scissors {
  position: absolute;
  top: 50%;
  left: calc(17px + var(--p) * (100% - 34px));
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--red-bright);
  font-size: 1.35rem;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.p-cutline-scissors i { display: block; animation: p-snip 0.5s ease-in-out infinite alternate; }
@keyframes p-snip { to { transform: scaleX(0.82); } }

.p-steps { list-style: none; display: grid; gap: clamp(2.5rem, 4vw, 3.5rem) var(--sp-6); counter-reset: none; }
@media (min-width: 860px) { .p-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-step { display: flex; flex-direction: column; gap: 0.9rem; }
.p-step-n {
  font-size: clamp(4.5rem, 2rem + 6vw, 8.5rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(206, 220, 255, 0.28);
  background: repeating-linear-gradient(-45deg, var(--red-bright) 0 0.06em, #fff 0.06em 0.12em, var(--blue) 0.12em 0.18em, #fff 0.18em 0.24em) 0 0 / 0% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-size 0.9s var(--ease-out), -webkit-text-stroke-color 0.4s;
  margin-bottom: 0.4rem;
}
.p-step:hover .p-step-n,
.p-step.is-lit .p-step-n { background-size: 100% 100%; -webkit-text-stroke-color: transparent; }
.p-step h3 { font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem); font-weight: 750; font-stretch: 118%; letter-spacing: -0.03em; line-height: 1.08; }
.p-step p { color: var(--text-2); max-width: 38ch; }
.p-step p b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

/* ==========================================================================
   RECURSOS — capítulos com palco fixo
   ========================================================================== */
.p-chapters { padding-top: calc(var(--section-y) * 0.5); overflow-x: clip; }
.p-details { padding-bottom: calc(var(--section-y) * 0.5); }
.p-plans { padding-top: calc(var(--section-y) * 0.6); }
.p-chapters-grid { display: grid; gap: var(--sp-7); }
.p-chapters-stage { display: none; }
.p-chapter-list { display: grid; gap: clamp(4rem, 10vw, 6rem); }
.p-chapter { display: flex; flex-direction: column; gap: 1.4rem; }
.p-chapter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  font-weight: 650;
  font-stretch: 75%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.p-chapter-tag b { color: var(--text-3); font-weight: 600; letter-spacing: 0.1em; }
.p-chapter h3 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); font-weight: 800; font-stretch: 122%; letter-spacing: -0.04em; line-height: 1; text-wrap: balance; }
.p-chapter-media { margin-top: var(--sp-4); }

.p-checks { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.p-checks li {
  position: relative;
  padding: 0.95rem 0 0.95rem 2rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  line-height: 1.5;
}
.p-checks li::before {
  content: '\f272';
  position: absolute;
  left: 0;
  top: 1rem;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--red-bright);
  font-family: 'bootstrap-icons';
  font-size: 0.8rem;
  line-height: 1;
}
.p-checks strong { color: var(--text); font-weight: 650; }

.p-duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6%; width: min(560px, 100%); margin-inline: auto; }
.p-duo .p-phone:first-child { transform: rotate(-3deg); }
.p-duo .p-phone:last-child { transform: translateY(12%) rotate(3deg); }
.p-chapter-media .p-duo { margin-bottom: 12%; }

@media (min-width: 1000px) {
  .p-chapters-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(3rem, 6vw, 6rem); }
  .p-chapters-stage {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + 6vh);
    display: grid;
    place-items: center;
    height: calc(100vh - var(--header-h) - 12vh);
    max-height: 760px;
  }
  .p-chapter-list { grid-column: 1; grid-row: 1; gap: 0; }
  .p-chapter { min-height: 82vh; justify-content: center; transition: opacity 0.6s var(--ease); }
  .js .p-chapter:not(.is-active) { opacity: 0.22; }
  .p-chapter-media { display: none; }

  .p-frame {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(40px) scale(0.94);
    filter: blur(8px);
    transition: opacity 0.7s var(--ease), transform 1s var(--ease-out), filter 0.7s var(--ease);
    pointer-events: none;
  }
  .p-frame.is-active { opacity: 1; transform: none; filter: none; }
  .p-frame.is-past { transform: translateY(-40px) scale(0.96); }
  .p-frame { justify-items: start; }
  .p-frame .p-browser { width: 122%; max-width: none; }
  .p-frame .p-duo { width: min(70%, 54vh); justify-self: center; }
  .p-chapters-stage::before {
    content: attr(data-n);
    position: absolute;
    right: -4%;
    top: 50%;
    transform: translateY(-50%);
    font-size: min(46vh, 30vw);
    font-weight: 800;
    font-stretch: 125%;
    letter-spacing: -0.07em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(206, 220, 255, 0.07);
    pointer-events: none;
  }
  .p-chapters-stage::after {
    content: '';
    position: absolute;
    inset: 10% -20% 10% 0;
    z-index: -1;
    background: radial-gradient(closest-side, var(--glow, rgba(220, 47, 54, 0.22)), transparent);
    filter: blur(30px);
    transition: background 0.8s var(--ease);
  }
  .p-chapters-stage[data-active='1'] { --glow: rgba(63, 110, 240, 0.26); }
  .p-chapters-stage[data-active='2'] { --glow: rgba(243, 156, 18, 0.16); }
  .p-stage-dots { left: 0; transform: none; }
  .p-stage-dots { position: absolute; bottom: -6px; display: flex; gap: 6px; }
  .p-stage-dots span { width: 28px; height: 3px; border-radius: 3px; background: var(--line-strong); transition: background-color 0.4s, width 0.4s var(--ease-out); }
  .p-stage-dots span.is-active { width: 48px; background: var(--red-bright); }
}

/* ==========================================================================
   EXPERIMENTE (folha clara)
   ========================================================================== */
.p-try {
  overflow: clip;
  margin-inline: clamp(8px, 1.4vw, 20px);
  border-radius: var(--radius-xl);
  background: var(--paper);
  color: var(--ink);
  --text: #0b1120;
  --text-2: #475167;
  --text-3: #7a8296;
  --line: rgba(11, 17, 32, 0.1);
  --line-strong: rgba(11, 17, 32, 0.2);
  --red-bright: #d22a31;
  --primary-line: rgba(210, 42, 49, 0.4);
  color-scheme: light;
}
.p-try ::selection { background: var(--ink); color: #fff; }
.p-try-grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 960px) { .p-try-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } }
.p-try .p-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.p-try .p-h2 { font-size: clamp(2.3rem, 1rem + 3.3vw, 4.2rem); }
.p-try-form { display: grid; gap: 1.6rem; max-width: 520px; }
.p-field { display: grid; gap: 0.55rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.p-field-label { padding: 0; font-size: 0.74rem; font-weight: 650; font-stretch: 75%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.p-input {
  width: 100%;
  min-height: 64px;
  padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: -0.02em;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.p-input::placeholder { color: #a5abb9; }
.p-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11, 17, 32, 0.1); }
.p-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.p-swatches label {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out);
}
.p-swatches label:hover { transform: scale(1.08); }
.p-swatches input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.p-swatches label:has(input:checked) { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.p-swatches label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 6px; }
.p-try-link p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(11, 17, 32, 0.05);
  color: var(--text-2);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.p-try-link i { color: var(--red-bright); font-size: 1.15rem; }
.p-try-link b { color: var(--ink); font-weight: 700; }
.p-try-hint { display: flex; align-items: center; gap: 0.6rem; color: var(--text-2); font-size: 0.95rem; }
.p-try-hint i { font-size: 1.2rem; color: var(--ink); animation: p-poke 1.6s var(--ease-io) infinite; }
@keyframes p-poke { 50% { transform: translateX(6px); } }
@media (max-width: 959px) { .p-try-hint i { transform: rotate(90deg); animation: none; } }
.p-try-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
.p-try-cta .btn { max-width: 100%; }
.p-try-cta .btn > span { overflow: hidden; text-overflow: ellipsis; }
.p-try-fine { color: var(--text-3); font-size: 0.88rem; }

.p-try-device { position: relative; display: grid; justify-items: center; gap: 1rem; }
.p-try-device::before {
  content: '';
  position: absolute;
  inset: 8% -10% 0;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--shop, #f39c12) 45%, transparent), transparent);
  filter: blur(30px);
  opacity: 0.55;
  transition: background 0.5s;
}
.p-try-device:has(.p-mock)::before { background: radial-gradient(closest-side, rgba(11, 17, 32, 0.22), transparent); }
.p-mock-tag { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-3); font-size: 0.8rem; }

/* O celular de demonstração (tema de barbearia, com a cor escolhida) */
.p-mock {
  --m-bg: #100e0b;
  --m-surface: #1a1713;
  --m-surface-2: #241f1a;
  --m-line: rgba(243, 222, 190, 0.1);
  --m-text: #f3ede3;
  --m-text-2: #b9af9f;
  --m-text-3: #847b6e;
  position: relative;
  z-index: 1;
  width: min(370px, 100%);
  height: min(760px, 92svh);
  min-height: 640px;
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(145deg, #2a2a2e, #0c0c0e 40%, #1b1b1f);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 60px 90px -40px rgba(11, 17, 32, 0.7), 0 30px 50px -30px rgba(11, 17, 32, 0.5);
  color-scheme: dark;
}
.p-mock::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: 5;
  width: 96px;
  height: 26px;
  border-radius: 20px;
  background: #000;
  transform: translateX(-50%);
}
.p-mock-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 44px;
  background: var(--m-bg);
  color: var(--m-text);
  font-size: 0.9rem;
  line-height: 1.35;
}
.p-mock-status { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 6px 28px 0; font-size: 0.82rem; font-weight: 650; }
.p-mock-status span:last-child { display: inline-flex; gap: 5px; font-size: 0.78rem; }
.p-mock-bar { display: flex; align-items: center; gap: 10px; padding: 10px 18px 12px; border-bottom: 1px solid var(--m-line); }
.p-mock-bar > i { margin-left: auto; font-size: 1.3rem; color: var(--m-text-2); }
.p-mock-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--shop);
  color: var(--shop-ink);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  transition: background-color 0.4s, color 0.4s;
}
.p-mock-title { display: grid; min-width: 0; }
.p-mock-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 750; font-stretch: 112%; letter-spacing: -0.02em; }
.p-mock-title span { display: inline-flex; align-items: center; gap: 5px; color: var(--m-text-2); font-size: 0.74rem; }
.p-open { width: 6px; height: 6px; border-radius: 50%; background: #3cb371; }

.p-mock-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 18px; scrollbar-width: none; overscroll-behavior: contain; }
.p-mock-body::-webkit-scrollbar { display: none; }
.p-mock-h { margin-bottom: 12px; font-size: 1.35rem; font-weight: 800; font-stretch: 118%; letter-spacing: -0.035em; }
.p-mock-label { display: flex; justify-content: space-between; margin: 16px 0 8px; font-size: 0.66rem; font-weight: 650; font-stretch: 75%; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-text-3); }
.p-mock-free { color: var(--shop); letter-spacing: 0.08em; transition: color 0.4s; }
.p-mock button { transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease-out); }
.p-mock button:active:not(:disabled) { transform: scale(0.96); }
.p-mock button:focus-visible { outline: 2px solid var(--shop); outline-offset: 2px; }

.p-mock-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.p-mock-svc {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 10px 10px 9px;
  border: 1px solid var(--m-line);
  border-radius: 14px;
  background: var(--m-surface);
  text-align: left;
}
.p-mock-svc b { font-size: 0.84rem; font-weight: 700; line-height: 1.15; }
.p-mock-svc small { color: var(--m-text-3); font-size: 0.7rem; }
.p-mock-svc span { font-size: 0.8rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--m-text-2); }
.p-mock-svc[aria-pressed='true'] { border-color: var(--shop); background: color-mix(in srgb, var(--shop) 14%, var(--m-surface)); }
.p-mock-svc[aria-pressed='true'] span { color: var(--shop); }

.p-mock-barbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.p-mock-barber { display: grid; justify-items: center; gap: 5px; padding: 8px 2px; border: 1px solid transparent; border-radius: 12px; font-size: 0.7rem; color: var(--m-text-2); }
.p-mock-barber span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--av, var(--m-surface-2));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 750;
  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 2px transparent;
  transition: box-shadow 0.2s;
}
.p-mock-barber[aria-pressed='true'] { color: var(--m-text); background: var(--m-surface); border-color: var(--m-line); }
.p-mock-barber[aria-pressed='true'] span { box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--shop); }

.p-mock-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.p-mock-day {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 7px 0 6px;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  background: var(--m-surface);
  font-size: 0.62rem;
  font-weight: 600;
  font-stretch: 80%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-text-2);
}
.p-mock-day b { font-size: 1.2rem; font-weight: 750; font-stretch: 100%; letter-spacing: -0.02em; color: var(--m-text); line-height: 1.1; }
.p-mock-day small { font-size: 0.58rem; letter-spacing: 0.02em; text-transform: none; color: #3cb371; }
.p-mock-day:disabled { opacity: 0.38; cursor: not-allowed; }
.p-mock-day:disabled small { color: var(--m-text-3); }
.p-mock-day[aria-pressed='true'] { background: var(--shop); border-color: var(--shop); color: var(--shop-ink); }
.p-mock-day[aria-pressed='true'] b,
.p-mock-day[aria-pressed='true'] small { color: var(--shop-ink); }

.p-mock-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.p-mock-slot {
  padding: 9px 0;
  border: 1px solid var(--m-line);
  border-radius: 10px;
  background: var(--m-surface);
  font-size: 0.86rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.p-mock-slot:disabled { background: transparent; color: var(--m-text-3); text-decoration: line-through; opacity: 0.5; cursor: not-allowed; }
.p-mock-slot:not(:disabled):hover { border-color: color-mix(in srgb, var(--shop) 60%, transparent); }
.p-mock-slot[aria-pressed='true'] { background: var(--shop); border-color: var(--shop); color: var(--shop-ink); }
.p-mock-slot.is-gone { animation: p-gone 0.9s var(--ease-out); }
@keyframes p-gone { 0% { background: var(--shop); color: var(--shop-ink); text-decoration: none; opacity: 1; } }
.p-mock-empty { grid-column: 1 / -1; padding: 14px; border: 1px dashed var(--m-line); border-radius: 12px; color: var(--m-text-3); font-size: 0.8rem; text-align: center; }

.p-mock-foot { padding: 12px 16px 22px; border-top: 1px solid var(--m-line); background: color-mix(in srgb, var(--m-bg) 92%, #fff); }
.p-mock-sum { min-height: 1.3em; margin-bottom: 9px; color: var(--m-text-2); font-size: 0.76rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-mock-sum b { color: var(--m-text); font-weight: 650; }
.p-mock-confirm {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  background: var(--shop);
  color: var(--shop-ink);
  font-weight: 750;
  font-stretch: 108%;
  font-size: 0.95rem;
}
.p-mock-confirm:disabled { background: var(--m-surface-2); color: var(--m-text-3); cursor: default; }

.p-mock-done {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  background: var(--m-bg);
  text-align: center;
  animation: p-fade 0.4s var(--ease) both;
}
.p-mock-done[hidden] { display: none; }
.p-mock-done h3 { font-size: 1.6rem; font-weight: 800; font-stretch: 118%; letter-spacing: -0.035em; }
.p-mock-done p { color: var(--m-text-2); font-size: 0.9rem; max-width: 26ch; }
.p-mock-done p b { color: var(--m-text); }
.p-mock-check svg { width: 84px; height: 84px; }
.p-mock-check circle { fill: color-mix(in srgb, var(--shop) 16%, transparent); stroke: var(--shop); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: p-draw 0.7s var(--ease-out) forwards; }
.p-mock-check path { fill: none; stroke: var(--shop); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: p-draw 0.5s 0.45s var(--ease-out) forwards; }
@keyframes p-draw { to { stroke-dashoffset: 0; } }
@keyframes p-fade { from { opacity: 0; } }
.p-mock-again { margin-top: 10px; padding: 10px 18px; border: 1px solid var(--m-line); border-radius: 99px; color: var(--m-text); font-weight: 650; font-size: 0.86rem; }
.p-mock-again:hover { border-color: var(--shop); }
@media (max-width: 420px) {
  .p-mock { height: auto; min-height: 0; aspect-ratio: 9 / 18.5; border-radius: 46px; padding: 9px; }
  .p-mock-screen { border-radius: 38px; }
}

/* ==========================================================================
   DETALHES (bento)
   ========================================================================== */
.p-bento { display: grid; gap: 14px; }
@media (min-width: 700px) { .p-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-tile.is-race, .p-tile.is-app { grid-column: span 2; } }
@media (min-width: 1080px) {
  .p-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .p-tile.is-race { grid-column: span 4; }
  .p-tile.is-wa { grid-column: span 2; grid-row: span 2; }
  .p-tile.is-loyal, .p-tile.is-sync { grid-column: span 2; }
  .p-tile.is-back, .p-tile.is-app { grid-column: span 3; }
}
.p-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 60%, var(--bg)));
  transition: border-color 0.4s;
}
.p-tile:hover { border-color: var(--line-strong); }
.p-tile-art { position: relative; flex: 1 1 auto; display: grid; place-items: center; min-height: 230px; padding: 28px 24px 8px; }
.p-tile-copy { display: grid; gap: 0.4rem; padding: 18px 26px 26px; }
.p-tile h3 { font-size: 1.3rem; font-weight: 750; font-stretch: 115%; letter-spacing: -0.03em; line-height: 1.1; }
.p-tile p { color: var(--text-2); font-size: 0.96rem; max-width: 46ch; }

/* Corrida pelo mesmo horário */
.p-race { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 34px); width: 100%; }
.p-race-phone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: clamp(120px, 26vw, 190px);
  padding: 18px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--bg-raised);
}
.p-race-who { font-size: 0.68rem; font-weight: 650; font-stretch: 75%; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.p-race-slot {
  width: 100%;
  padding: 10px 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-size: 1.15rem;
  font-weight: 750;
  text-align: center;
  font-variant-numeric: tabular-nums;
  animation: p-race-slot 6s infinite;
}
.p-race-msg {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.5em;
  font-size: 0.8rem;
  font-weight: 650;
  opacity: 0;
  animation: p-race-msg 6s infinite;
}
.p-race-msg.is-ok { color: var(--success); }
.p-race-msg.is-no { color: #f6b44b; }
.p-race-phone.is-b .p-race-slot { animation-name: p-race-slot-b; }
.p-race-tap {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: p-race-tap 6s infinite;
}
.p-race-vs { font-size: 0.66rem; font-weight: 650; font-stretch: 75%; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-bright); text-align: center; line-height: 1.4; }
@keyframes p-race-tap { 0%, 14% { opacity: 0; transform: scale(0.4); } 18% { opacity: 1; transform: scale(1); } 26%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes p-race-slot { 0%, 17% { background: transparent; color: var(--text); } 22%, 85% { background: var(--red); border-color: var(--red); color: #fff; } 95%, 100% { background: transparent; color: var(--text); } }
@keyframes p-race-slot-b { 0%, 17% { background: transparent; color: var(--text); text-decoration: none; } 22%, 28% { background: rgba(255, 255, 255, 0.08); } 34%, 85% { background: transparent; color: var(--text-3); text-decoration: line-through; } 95%, 100% { color: var(--text); text-decoration: none; } }
@keyframes p-race-msg { 0%, 28% { opacity: 0; transform: translateY(6px); } 34%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

/* WhatsApp */
.p-tile.is-wa .p-tile-art { align-items: stretch; padding: 24px 22px 6px; }
.p-wa { display: flex; flex-direction: column; width: 100%; max-width: 360px; margin-inline: auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 22px; background: #0b141a; }
.p-wa-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #1f2c34; }
.p-wa-head > i { margin-left: auto; color: #25d366; font-size: 1.15rem; }
.p-wa-head b { display: block; font-size: 0.85rem; }
.p-wa-head small { display: block; color: #8696a0; font-size: 0.7rem; }
.p-wa-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3f6ef0; font-size: 0.72rem; font-weight: 750; }
.p-wa-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 12px 18px;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.025) 0 2px, transparent 3px) 0 0 / 22px 22px, #0b141a;
}
.p-wa-msg {
  position: relative;
  align-self: flex-end;
  max-width: 88%;
  padding: 8px 10px 18px;
  border-radius: 12px 12px 4px 12px;
  background: #005c4b;
  color: #e9edef;
  font-size: 0.82rem;
  line-height: 1.4;
}
.p-wa-day { align-self: center; margin-bottom: auto; padding: 3px 10px; border-radius: 8px; background: #182229; color: #8696a0; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.p-wa-send { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #0b141a; border-top: 1px solid rgba(255, 255, 255, 0.04); }
.p-wa-send span { flex: 1; padding: 8px 12px; border-radius: 99px; background: #202c33; color: #8696a0; font-size: 0.74rem; }
.p-wa-send i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #00a884; color: #fff; font-size: 0.9rem; }
.p-wa-msg.is-reply { align-self: flex-start; background: #202c33; border-radius: 12px 12px 12px 4px; padding-right: 48px; }
.p-wa-time { position: absolute; right: 8px; bottom: 4px; display: inline-flex; gap: 3px; color: rgba(233, 237, 239, 0.6); font-size: 0.62rem; }
.p-wa-time i { color: #53bdeb; }
.js .p-wa-msg { opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: 100% 100%; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out); }
.js .p-wa-msg.is-reply { transform-origin: 0 100%; }
.js .is-in .p-wa-msg { opacity: 1; transform: none; transition-delay: 0.5s; }
.js .is-in .p-wa-msg.is-reply { transition-delay: 1.5s; }

/* Cartão fidelidade */
.p-loyal { width: min(300px, 100%); padding: 18px; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); transform: rotate(-2deg); }
.p-loyal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 0.7rem; font-weight: 650; font-stretch: 75%; letter-spacing: 0.18em; text-transform: uppercase; }
.p-loyal-head b { font-size: 1.1rem; font-stretch: 110%; letter-spacing: -0.02em; }
.p-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.p-stamps i { position: relative; aspect-ratio: 1; border: 1.5px dashed rgba(11, 17, 32, 0.25); border-radius: 50%; }
.p-stamps i::after {
  content: '\f528';
  position: absolute;
  inset: -1.5px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: 'bootstrap-icons';
  font-style: normal;
  font-size: 0.85rem;
  transform: scale(0) rotate(-40deg);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-stamps i.is-gift::after { content: '\f3ec'; background: transparent; color: rgba(11, 17, 32, 0.4); transform: none; }
.is-in .p-stamps i:not(.is-gift)::after { transform: none; }
.is-in .p-stamps i:nth-child(1)::after { transition-delay: 0.3s; }
.is-in .p-stamps i:nth-child(2)::after { transition-delay: 0.42s; }
.is-in .p-stamps i:nth-child(3)::after { transition-delay: 0.54s; }
.is-in .p-stamps i:nth-child(4)::after { transition-delay: 0.66s; }
.is-in .p-stamps i:nth-child(5)::after { transition-delay: 0.78s; }
.is-in .p-stamps i:nth-child(6)::after { transition-delay: 0.9s; }
.is-in .p-stamps i:nth-child(7)::after { transition-delay: 1.02s; }
.p-stamps i:nth-child(n+8):not(.is-gift)::after { display: none; }

/* Sincronização */
.p-sync { display: flex; align-items: center; gap: 12px; }
.p-sync-dev { position: relative; display: grid; align-content: start; gap: 6px; border: 1px solid var(--line-strong); background: var(--bg-raised); }
.p-sync-dev.is-lap { width: 178px; padding: 26px 12px 14px; border-radius: 12px; }
.p-sync-dev.is-phone { width: 96px; padding: 26px 8px 16px; border-radius: 18px; }
.p-sync-dev > small { position: absolute; left: 12px; top: 8px; font-size: 0.56rem; font-weight: 650; font-stretch: 75%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.p-sync-dev.is-phone > small { left: 10px; }
.p-sync-row { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--surface-3); font-size: 0.62rem; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; }
.p-sync-row b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.p-sync-row.is-new { background: var(--red); color: rgba(255, 255, 255, 0.85); animation: p-sync-new 4.5s infinite; transform-origin: 50% 0; }
.p-sync-row.is-new b { color: #fff; }
.p-sync-wire { position: relative; width: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
.p-sync-wire span { position: absolute; top: -3px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 10px var(--red-bright); animation: p-sync-dot 4.5s infinite; }
@keyframes p-sync-new { 0%, 8% { opacity: 0; transform: scaleY(0.2); } 16%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes p-sync-dot { 0%, 14% { right: 0; opacity: 0; } 16% { opacity: 1; } 28% { right: calc(100% - 8px); opacity: 1; } 32%, 100% { right: calc(100% - 8px); opacity: 0; } }
.p-sync-dev.is-lap .p-sync-row.is-new { animation-name: p-sync-new-late; }
@keyframes p-sync-new-late { 0%, 27% { opacity: 0; transform: scaleY(0.2); box-shadow: 0 0 0 0 rgba(255, 83, 89, 0.6); } 34% { opacity: 1; transform: none; box-shadow: 0 0 0 6px rgba(255, 83, 89, 0); } 86% { opacity: 1; } 96%, 100% { opacity: 0; } }

@media (max-width: 479px) {
  .p-sync { gap: 8px; }
  .p-sync-dev.is-lap { width: 150px; }
  .p-sync-dev.is-phone { width: 74px; }
  .p-sync-wire { width: 22px; }
}

/* Sumidos e aniversariantes */
.p-gone { list-style: none; display: grid; gap: 8px; width: min(420px, 100%); }
.p-gone li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-raised); }
.p-gone li > span:nth-child(2) { display: grid; min-width: 0; }
.p-gone b { font-size: 0.86rem; font-weight: 650; }
.p-gone small { color: var(--text-3); font-size: 0.74rem; }
.p-gone em { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 10px; border-radius: 99px; background: rgba(37, 211, 102, 0.12); color: #4ade80; font-size: 0.74rem; font-style: normal; font-weight: 650; white-space: nowrap; }
.p-gone li:last-child em { background: var(--primary-soft); color: var(--red-bright); }
.p-gone-av { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: hsl(var(--h) 60% 45%); font-size: 0.7rem; font-weight: 750; }
.js .p-gone li { opacity: 0; transform: translateX(-14px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out); }
.js .is-in .p-gone li { opacity: 1; transform: none; }
.js .is-in .p-gone li:nth-child(2) { transition-delay: 0.12s; }
.js .is-in .p-gone li:nth-child(3) { transition-delay: 0.24s; }

/* Ícone na tela de início */
.p-home { display: grid; grid-template-columns: repeat(4, 54px); gap: 16px 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(160deg, #1b2440, #0b1120); }
.p-home > span { width: 54px; height: 54px; border-radius: 15px; background: rgba(255, 255, 255, 0.06); }
.p-home > span.p-home-app {
  display: grid;
  place-items: center;
  background: var(--shop, #f39c12);
  color: var(--shop-ink, #1a1206);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--shop, #f39c12) 70%, transparent);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 1rem;
  transform: scale(0);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s, background-color 0.4s, color 0.4s;
}
.is-in .p-home > span.p-home-app { transform: none; }
@media (max-width: 400px) { .p-home { grid-template-columns: repeat(4, 46px); gap: 12px; } .p-home > span { width: 46px; height: 46px; } }

/* ==========================================================================
   PLANOS
   ========================================================================== */
.p-plans .plans { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: stretch; }
.p-body .plan-card {
  position: relative;
  gap: 1.4rem;
  padding: clamp(1.6rem, 2.5vw, 2.25rem);
  border-radius: 26px;
  border-color: var(--line);
  background: var(--surface);
  transition: transform 0.5s var(--ease-out), border-color 0.4s;
}
.p-body .plan-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.p-body .plan-name { font-stretch: 125%; font-weight: 800; text-transform: none; letter-spacing: -0.04em; font-size: 2rem; line-height: 1; }
.p-body .plan-team { font-size: 0.94rem; }
.p-body .plan-team i { color: var(--red-bright); }
.p-body .plan-price { align-items: flex-start; gap: 0.15rem; margin-top: 0.4rem; }
.p-body .plan-price .cur { margin-top: 0.55em; color: var(--text-2); font-size: 1rem; font-weight: 600; }
.p-body .plan-price strong { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 2.6vw, 4.6rem); font-weight: 800; font-stretch: 112%; letter-spacing: -0.06em; line-height: 0.9; }
.p-body .plan-price .cents { display: grid; margin-top: 0.4em; font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.p-body .plan-price .cents small { color: var(--text-3); font-size: 0.78rem; font-weight: 500; }
.p-plan-per { margin-top: -0.6rem; color: var(--text-3); font-size: 0.88rem; }
.p-body .plan-card .btn { margin-top: auto; }

.p-body .plan-card.is-featured {
  border-color: transparent;
  background: var(--paper);
  color: var(--ink);
  --text: var(--ink);
  --text-2: #475167;
  --text-3: #7a8296;
  --line-strong: rgba(11, 17, 32, 0.2);
  box-shadow: 0 40px 80px -40px rgba(220, 47, 54, 0.6);
}
.p-body .plan-card.is-featured::before {
  content: '';
  position: absolute;
  left: 2.25rem;
  right: 2.25rem;
  top: 0;
  height: 6px;
  border-radius: 0 0 6px 6px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 7px, #fff 7px 10px, var(--blue) 10px 17px, #fff 17px 20px);
  background-size: 28.28px 100%;
  animation: p-pole-x 1.2s linear infinite;
}
.p-body .plan-card.is-featured .plan-team i { color: var(--red); }
.p-plan-tag { align-self: flex-start; padding: 4px 10px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 0.7rem; font-weight: 650; font-stretch: 80%; letter-spacing: 0.14em; text-transform: uppercase; }
.p-plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }

.p-included { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.4rem; border: 1px solid var(--line); border-radius: 22px; }
.p-included ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.p-included li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 99px; background: var(--surface); color: var(--text-2); font-size: 0.88rem; }
.p-included li i { color: var(--red-bright); }
.p-plans-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; margin-top: var(--sp-5); color: var(--text-3); font-size: var(--fs-sm); }
.p-plans-note span { display: inline-flex; align-items: center; gap: 0.45rem; }
.p-plans-note i { color: var(--red-bright); }

/* ==========================================================================
   PERGUNTAS
   ========================================================================== */
.p-faq-wrap { padding-top: calc(var(--section-y) * 0.6); }
.p-faq-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) {
  .p-faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-8); align-items: start; }
  .p-faq-grid .p-head { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.p-faq-grid .p-head { margin-bottom: 0; }
.p-faq-aside { color: var(--text-2); }
.p-faq-aside a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text); font-weight: 650; text-decoration: underline; text-decoration-color: var(--red-bright); text-underline-offset: 4px; cursor: pointer; }
.p-faq-aside a:hover { color: var(--red-bright); }
.p-faq { border-top: 1px solid var(--line); }
.p-faq details { border-bottom: 1px solid var(--line); }
.p-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 1.5rem 0;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.025em;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary:hover { color: var(--red-bright); }
.p-faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: transform 0.45s var(--ease-out), background-color 0.3s, border-color 0.3s;
}
.p-faq details[open] summary::after { transform: rotate(135deg); background-color: var(--red); border-color: var(--red); color: #fff; }
.p-faq-body p { padding: 0 3.5rem 1.6rem 0; color: var(--text-2); max-width: 62ch; }
@supports selector(::details-content) {
  .p-faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 0.5s var(--ease-out), opacity 0.4s, content-visibility 0.5s allow-discrete; }
  .p-faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ==========================================================================
   CHAMADA FINAL
   ========================================================================== */
.p-final {
  position: relative;
  isolation: isolate;
  margin: calc(var(--section-y) * 0.4) clamp(8px, 1.4vw, 20px) 0;
  padding-block: clamp(5rem, 12vw, 10rem);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--red);
  color: #fff;
}
.p-final-pole {
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: repeating-linear-gradient(-45deg, transparent 0 60px, rgba(255, 255, 255, 0.045) 60px 120px, rgba(11, 17, 32, 0.06) 120px 180px, rgba(255, 255, 255, 0.045) 180px 240px);
  background-size: 339.4px 100%;
  animation: p-final-pole 14s linear infinite;
}
@keyframes p-final-pole { to { background-position: 339.4px 0; } }
.p-final-inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; }
.p-final-title { font-size: clamp(2.9rem, 1rem + 8vw, 9rem); font-weight: 850; font-stretch: 125%; letter-spacing: -0.055em; line-height: 0.88; text-wrap: balance; }
.p-final-title span { display: block; color: var(--ink); }
.p-final p { max-width: 46ch; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: rgba(255, 255, 255, 0.86); }
.p-final .p-ctas { justify-content: center; margin-top: 0.6rem; }
.p-final .btn-light { box-shadow: 0 20px 40px -18px rgba(11, 17, 32, 0.6); }
.p-final ::selection { background: var(--ink); color: #fff; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.p-footer { position: relative; overflow: hidden; padding-top: clamp(4rem, 8vw, 6rem); color: var(--text-3); font-size: var(--fs-sm); }
.p-footer-top { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-7); }
@media (min-width: 800px) { .p-footer-top { grid-template-columns: 1fr auto; } }
.p-footer-brand { display: grid; gap: 1rem; align-content: start; }
.p-footer-brand p { color: var(--text-2); font-size: 1rem; }
.p-footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: var(--sp-6) clamp(2rem, 6vw, 5rem); }
.p-footer-nav div { display: grid; gap: 0.6rem; align-content: start; }
.p-footer-nav span { margin-bottom: 0.3rem; font-size: 0.72rem; font-weight: 650; font-stretch: 75%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.p-footer-nav a { color: var(--text-2); font-size: 0.95rem; cursor: pointer; }
.p-footer-nav a:hover { color: var(--text); }
@media (max-width: 479px) { .p-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; padding-block: var(--sp-5); border-top: 1px solid var(--line); }
.p-footer-bottom a { color: var(--text-2); }
.p-footer-bottom a:hover { color: var(--text); }
.p-wordmark {
  --ws: 125%;
  margin-bottom: -0.2em;
  font-size: calc(100vw / 5.6);
  font-weight: 900;
  font-stretch: var(--ws);
  letter-spacing: -0.065em;
  line-height: 0.82;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(180deg, var(--surface-3) 10%, transparent 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .p-brand-mark, .p-band-track, .p-final-pole, .p-dot, .p-caret, .p-cutline-scissors i, .p-try-hint i { animation: none !important; }
  .js .p-line { opacity: 1; animation: none !important; }
  .p-stage-inner { transform: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .p-race-msg { opacity: 1; animation: none; }
  .p-race-phone.is-a .p-race-slot { background: var(--red); border-color: var(--red); color: #fff; animation: none; }
  .p-race-phone.is-b .p-race-slot { color: var(--text-3); text-decoration: line-through; animation: none; }
  .p-race-tap { display: none; }
}