/* Evolução da página de barbearias: mantém a marca e os eventos de /comece/. */
body:is([data-pagina="comece-barbearia"], [data-pagina="comece-salao"], [data-pagina="comece-unhas"]) { --bg: #f3f4ef; --band: #e8ebe3; }
.skip-link { position: fixed; top: -96px; left: 16px; z-index: 10; background: var(--surface); padding: 12px 16px; }
.skip-link:focus { top: 16px; }
.hero { gap: 64px; padding-bottom: 64px; }
.hero h1 { max-width: 12ch; font-size: clamp(36px, 4.5vw, 60px); }
.hero .lead { max-width: 36ch; margin-block: 24px 32px; }
.hero .fine { line-height: 1.7; }
.hero-shot { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; max-width: 448px; justify-self: center; }
.hero-shot img { box-shadow: none; border-radius: 16px; }
.hero-shot figcaption { padding: 16px 8px 8px; display: grid; gap: 8px; }
.hero-shot figcaption strong { font-size: 18px; line-height: 1.5; color: var(--ink); }
.hero-shot figcaption span { font-size: 14px; }
.value-intro { display: grid; gap: 48px; align-items: start; }
.value-intro p { max-width: 44ch; color: var(--ink-2); }
.value-list { margin: 0; display: grid; gap: 24px; }
.value-list div { padding-left: 24px; border-left: 2px solid var(--accent); }
.value-list dt { font-weight: 700; color: var(--ink); }
.value-list dd { margin: 4px 0 0; color: var(--ink-2); }
.steps:not(.first-day) { gap: 32px; margin-block: 32px; }
.steps:not(.first-day) li { padding: 0; background: none; border: 0; border-radius: 0; }
.steps:not(.first-day) span { width: 36px; height: 36px; font-size: 16px; }
.features { column-gap: 48px; row-gap: 32px; }
.features li { padding: 0; background: none; border: 0; }
.features p { font-size: 16px; }
.steps.first-day { margin-bottom: 24px; }
.video { padding-block: 32px 64px; }
.video > div:first-child { max-width: 48ch; }
.video h2 { font-size: clamp(24px, 3vw, 36px); }
.player video { max-height: 448px; width: auto; max-width: 100%; }
.plans-note { margin-top: 24px; }
.trust-grid { display: grid; gap: 32px; margin-top: 32px; }
.trust-grid p { margin: 12px 0 0; color: var(--ink-2); }
.trust-grid a { display: inline-block; margin-top: 12px; overflow-wrap: anywhere; }
.final p { margin: 24px auto; max-width: 44ch; color: var(--ink-2); }
.foot { padding-bottom: 32px; }
@media (min-width: 900px) {
  .value-intro { grid-template-columns: 1fr 1fr; gap: 64px; }
  .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-color-scheme: dark) {
  body:is([data-pagina="comece-barbearia"], [data-pagina="comece-salao"], [data-pagina="comece-unhas"]) { --bg: #0d110f; --band: #111715; }
}
@media (max-width: 899px) {
  .hero { gap: 32px; }
  .hero .lead { font-size: 18px; }
  .hero-shot { width: 100%; }
}
@media (max-width: 479px) {
  .top { gap: 16px; }
  .top img { width: 112px; height: auto; }
  .top .btn-sm { font-size: 14px; padding-inline: 12px; }
  .hero .kicker { font-size: 12px; letter-spacing: .08em; }
  .hero-shot { padding: 12px; }
  .hero-shot figcaption { padding: 16px 4px 4px; }
  .value-intro { gap: 24px; }
  .trust-grid { gap: 24px; }
}

/* Vitrine com miniaturas reais; ampliação sem sair do cadastro da campanha. */
.templates h2 { max-width: 26ch; }
.templates .wrap > p { max-width: 64ch; }
.templates-grid { list-style: none; padding: 0; margin: 32px 0 24px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.templates-grid li { min-width: 0; }
.template-preview { display: grid; width: 100%; gap: 8px; padding: 0; text-align: left; font: inherit; color: var(--ink); border: 0; background: transparent; cursor: pointer; }
.template-preview img { width: 100%; border: 1px solid var(--line); border-radius: 16px; }
.template-name { font-weight: 700; font-size: 18px; margin-top: 8px; }
.template-description { font-size: 14px; color: var(--ink-2); }
.template-open { color: var(--accent); font-size: 14px; text-decoration: underline; }
.templates .fine { margin-top: 12px; }
#template-dialog { width: min(448px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); overscroll-behavior: contain; }
#template-dialog::backdrop { background: rgb(0 0 0 / .8); }
.template-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.template-dialog-header h2 { margin: 0; font-size: 24px; }
.template-dialog-header form { margin: 0; }
#template-dialog-image { width: 100%; height: auto; border-radius: 12px; }
#template-dialog .note { margin-top: 16px; }
body:has(#template-dialog[open]) { overflow: hidden; }
@media (max-width: 819px) {
  .templates-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72vw, 256px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; }
  .templates-grid li { scroll-snap-align: start; }
}

/* Cadastro sempre acessível: cabeçalho no desktop e barra inferior no celular. */
.campaign-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.campaign-mobile-actions { display: none; }
@media (max-width: 819px) {
  .campaign-header { position: static; }
  .campaign-mobile-actions { position: fixed; z-index: 30; bottom: max(12px, env(safe-area-inset-bottom)); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
  .campaign-mobile-actions > a:first-child { padding: 8px 16px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 700; }
  .campaign-mobile-actions .btn { padding: 12px 16px; font-size: 14px; min-height: 48px; justify-content: center; }
  .foot { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}

/* ── Salão v4 (24/10/2026). Tudo abaixo só vale em /comece/salao/ (body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"])
   e classes sl-*). Mundo: cartela de coloração e espelho em arco. Porcelana, sálvia e petróleo em
   campos inteiros; o cobre da cartela só no fio que liga uma visita à próxima. ── */
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) {
  color-scheme: light;
  --bg: #fbfaf7;
  --surface: #ffffff;
  --band: #e5ece6;
  --ink: #14231f;
  --ink-2: #3a4945;
  --muted: #53625d;
  --line: #d3dcd5;
  --accent: #123e40;
  --accent-ink: #fbfaf7;
  --accent-soft: #e5ece6;
  --mint: #a4512b;
  --copper: #a4512b;
  --copper-light: #e8a47c;
  --petrol: #123e40;
  --on-petrol: #fbfaf7;
  --on-petrol-2: #c6d8d4;
  background: var(--bg);
  color: var(--ink);
}
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) :is(h1, h2, h3) { color: var(--ink); }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .top img { filter: none; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) main > section { padding-block: clamp(56px, 9vw, 112px); }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) h2 { font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -0.04em; margin-bottom: 20px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .btn { min-height: 52px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .btn:hover { filter: none; background: #0b2f31; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .btn:active { transform: translateY(1px); }
.sl-btn svg { flex: none; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.sl-btn:hover svg { transform: translateX(3px); }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-btn-light { background: var(--on-petrol); color: var(--petrol); }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-btn-light:hover { background: #ffffff; }
.sl-fine { font-size: 15px; color: var(--muted); margin: 14px 0 0; }

/* Primeira tela: texto, botão e a cena em arco com a confirmação real sobreposta. */
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-hero { padding-block: 20px 0; }
.sl-hero-grid { display: grid; gap: 36px; align-items: center; }
.sl-hero h1 { font-size: clamp(40px, 6.4vw, 84px); font-weight: 800; line-height: .98; letter-spacing: -0.05em; max-width: 10ch; }
.sl-lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; margin: 18px 0 26px; }
.sl-lead strong { display: block; color: var(--ink); font-weight: 750; margin-bottom: 2px; }
.sl-scene { position: relative; margin: 0; padding: 0; max-width: 540px; width: 100%; justify-self: center; }
.sl-arch { position: relative; aspect-ratio: 1 / 1; border-radius: 999px 999px 28px 28px; overflow: hidden; background: var(--band); }
.sl-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.sl-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; }
.sl-chips li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #2e9e6b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sl-chips li:nth-child(2) { background: var(--petrol); color: var(--on-petrol); }
.sl-chips li:nth-child(2)::before { background-color: #4cc18a; }
.sl-receipt { position: relative; z-index: 1; width: min(64%, 300px); margin: -104px 0 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 28px 48px -24px rgb(20 35 31 / .55), 0 4px 12px -4px rgb(20 35 31 / .18); }
.sl-receipt img { width: 100%; }
.sl-scene figcaption { margin-top: 12px; font-size:14px; color: var(--muted); }

/* Faixa de garantias: fatos que já estão no produto e nas perguntas. */
.sl-promises { margin-top: 48px; border-block: 1px solid var(--line); background: var(--surface); }
.sl-promises ul { list-style: none; padding: 16px 0; margin-block: 0; display: grid; gap: 10px; }
.sl-promises li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.sl-promises svg { flex: none; color: var(--copper); margin-top: 1px; }

/* Prova: a agenda real em destaque. */
.sl-proof-grid { display: grid; gap: 36px; align-items: center; }
.sl-proof-copy h2 { max-width: 16ch; }
.sl-gains { margin: 24px 0 0; display: grid; }
.sl-gains > div { padding-block: 16px; border-top: 1px solid var(--line); }
.sl-gains dt { font-weight: 750; font-size: 18px; color: var(--ink); }
.sl-gains dd { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; }
.sl-agenda { margin: 0; }
.sl-agenda-frame { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 32px 64px -40px rgb(18 62 64 / .55); }
.sl-agenda-frame img { width: 100%; }
.sl-agenda figcaption { margin-top: 12px; }

/* Como funciona: campo petróleo, três passos ligados pelo fio de cobre. */
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-how { background: var(--petrol); color: var(--on-petrol); }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-how :is(h2, h3) { color: var(--on-petrol); }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-how :focus-visible { outline-color: var(--copper-light); }
.sl-how-track { position: relative; margin-top: 32px; }
.sl-thread { display: none; }
.sl-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; position: relative; }
.sl-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding-bottom: 28px; }
.sl-steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--copper-light); opacity: .7; }
.sl-step-n { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--copper-light); color: var(--copper-light); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; background: var(--petrol); position: relative; z-index: 1; }
.sl-steps h3 { font-size: 21px; align-self: center; }
.sl-steps p { margin: 6px 0 0; color: var(--on-petrol-2); max-width: 36ch; }
.sl-how-foot { display: grid; gap: 28px; margin-top: 20px; padding-top: 32px; border-top: 1px solid rgb(251 250 247 / .18); }
.sl-freq { font-size: 18px; color: var(--on-petrol); max-width: 38ch; margin-bottom: 24px; }
.sl-video { margin: 0; justify-self: center; max-width: 240px; }
.sl-video video { width: 100%; aspect-ratio: 9 / 16; border-radius: 20px; background: #0b2f31; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-video figcaption { margin-top: 10px; color: var(--on-petrol-2); font-size:14px; text-align: center; }

/* O que vem junto: livro-razão em fios, sem cartões. */
.sl-feats-grid { display: grid; gap: 24px; }
.sl-feats-grid h2 { max-width: 14ch; }
.sl-feats { margin: 0; display: grid; column-gap: 40px; }
.sl-feats > div { padding-block: 16px; border-top: 1px solid var(--line); }
.sl-feats dt { font-weight: 750; font-size: 18px; color: var(--ink); }
.sl-feats dd { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; }

/* Modelos de site: faixa sálvia. */
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-templates { background: var(--band); }
.sl-templates .wrap > p { color: var(--ink-2); }
.sl-templates .templates-grid { margin-bottom: 0; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .template-preview img { border-color: #c5d1c8; background: #fff; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .template-preview:hover .template-name { color: var(--copper); }

/* Primeiro dia: linha do tempo com marcos de cobre. */
.sl-first-list { list-style: none; counter-reset: passo; padding: 0; margin: 28px 0 0; display: grid; }
.sl-first-list li { counter-increment: passo; position: relative; padding: 0 0 22px 36px; }
.sl-first-list li::before { content: counter(passo); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--copper); color: #fff; font-size:14px; font-weight: 800; }
.sl-first-list li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 30px; bottom: 4px; width: 2px; background: var(--line); }
.sl-first-list h3 { font-size: 18px; }
.sl-first-list p { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; }

/* Planos: uma régua só, dividida por fios; nenhum plano "recomendado" inventado. */
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-pricing { background: var(--band); }
.sl-pricing-head { display: grid; gap: 8px; align-items: end; }
.sl-pricing-head h2 { max-width: 20ch; }
.sl-pricing-head p { color: var(--ink-2); max-width: 52ch; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .period { margin: 8px 0 24px; justify-self: start; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans { gap: 0; margin: 0; background: var(--surface); border: 1px solid #c5d1c8; border-radius: 24px; overflow: hidden; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans .plan { background: none; border: 0; border-radius: 0; padding: 22px 22px 24px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans .plan + .plan { border-top: 1px solid var(--line); }
.sl-plans .plan h3 { font-size: 15px; font-weight: 800; letter-spacing: 0; color: var(--copper) !important; }
.sl-fit { margin: 4px 0 10px; font-size: 19px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); line-height: 1.25; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans .price strong { font-size: 48px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans .price span { color: var(--ink-2); font-weight: 600; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans .cap { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans .cond { color: var(--muted); margin-top: 4px; }
.sl-pricing-foot { display: grid; gap: 16px; margin-top: 28px; justify-items: start; }
.sl-pricing-foot .note { max-width: 70ch; margin: 0; }

/* Por que Hermelo e quem responde. */
.sl-why-grid { display: grid; gap: 40px; }
.sl-why-name h2 { margin-bottom: 16px; }
.sl-why-name p { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); max-width: 26ch; margin: 0; }
.sl-person { padding-top: 24px; border-top: 2px solid var(--copper); }
.sl-person h3 { font-size: 21px; }
.sl-person p { margin: 8px 0 8px; color: var(--ink-2); max-width: 40ch; }
.sl-person a { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; font-weight: 700; color: var(--accent); }

/* Perguntas: fios, não caixas. */
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-faq { padding-top: 0; }
.sl-faq > * { max-width: 780px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-faq details { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 0; margin: 0; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.sl-faq summary { position: relative; padding: 18px 40px 18px 0; min-height: 44px; font-size: 18px; list-style: none; }
.sl-faq summary::-webkit-details-marker { display: none; }
.sl-faq summary::after { content: ""; position: absolute; right: 8px; top: 26px; width: 10px; height: 10px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(45deg); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.sl-faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.sl-faq details[open] summary .faq-sum { display: none; }
.sl-faq details > :not(summary) { margin: 0 0 20px; }

/* Fim: campo petróleo com o fio em laço. */
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-final { position: relative; overflow: hidden; background: var(--petrol); color: var(--on-petrol); text-align: center; padding-top: clamp(96px, 12vw, 140px); }
.sl-final-loop { position: absolute; left: 0; top: 8px; width: 100%; height: 96px; color: var(--copper-light); opacity: .9; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-final h2 { color: var(--on-petrol); max-width: 18ch; margin: 0 auto 28px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-final .sl-fine { color: var(--on-petrol-2); }
.sl-final .switch { margin-top: 24px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-final .switch a { color: var(--on-petrol); display: inline-flex; align-items: center; min-height: 44px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-final :focus-visible { outline-color: var(--copper-light); }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .foot { border-top: 0; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .foot :is(a, .link) { display: inline-block; padding-block: 11px; }
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .foot nav { gap: 0 20px; }

@media (min-width: 720px) {
  .sl-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-promises ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 900px) {
  .sl-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-hero { padding-top: 40px; }
  .sl-lead { font-size: 20px; }
  .sl-scene { padding-bottom: 44px; }
  .sl-receipt { position: absolute; left: -56px; bottom: 8px; width: 300px; margin: 0; border-radius: 18px; }
  .sl-chips { position: absolute; right: 16px; bottom: 60px; margin: 0; flex-direction: column; align-items: flex-end; }
  .sl-chips li { border: 0; background: rgb(251 250 247 / .95); box-shadow: 0 6px 16px -8px rgb(20 35 31 / .5); padding: 7px 14px 7px 10px; }
  .sl-scene figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding-left: 264px; text-align: right; }
  .sl-promises ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-block: 22px; }
  .sl-promises li { font-size: 15px; }
  .sl-proof-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
  .sl-thread { display: block; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 56px; color: var(--copper-light); }
  .sl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; }
  .sl-steps li { display: block; padding: 6px 0 0; }
  .sl-steps li::after { display: none; }
  .sl-step-n { margin-bottom: 22px; }
  .sl-how-foot { grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 56px; margin-top: 48px; }
  .sl-video { justify-self: end; max-width: 220px; }
  .sl-freq { font-size: 22px; letter-spacing: -0.01em; }
  .sl-feats-grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
  .sl-first-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .sl-first-list li { padding: 40px 0 0; }
  .sl-first-list li::before { top: 0; }
  .sl-first-list li:not(:last-child)::after { left: 32px; right: -28px; top: 11px; bottom: auto; width: auto; height: 2px; }
  .sl-pricing-head { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
  body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .period { justify-self: end; margin-bottom: 28px; }
  body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans .plan { padding: 32px 32px 36px; }
  body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans .plan + .plan { border-top: 0; border-left: 1px solid var(--line); }
  body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"]) .sl-plans .price strong { font-size: 56px; }
  .sl-pricing-foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; }
  .sl-why-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 96px; align-items: end; }
}
@media (max-width: 479px) {
  .sl-hero h1 { font-size: 44px; max-width: 9ch; }
  .sl-lead { font-size: 17px; margin-block: 14px 22px; }
  .sl-chips li { font-size:14px; }
  .sl-promises { margin-top: 36px; }
  /* No celular, a agenda aproxima a coluna da Bruna, onde estão as voltas combinadas. */
  .sl-agenda-frame { aspect-ratio: 550 / 1000; position: relative; }
  .sl-agenda-frame img { position: absolute; top: 0; left: -118.2%; width: 313.5%; max-width: none; }
}

/* Barra do celular: some com o botão do hero à vista e, com o aviso de cookies, sobe para ficar acima dele. */
@media (max-width: 819px) {
  .campaign-mobile-actions[data-auto-hide] { transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease-out, visibility 0s; }
  .campaign-mobile-actions[data-auto-hide].is-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease-out, visibility 0s linear .3s; }
  /* Com o aviso de cookies na tela, a barra sobe e fica acima dele (altura em --consent-h, vinda de consentimento.js). */
  body:has(.consent) .campaign-mobile-actions[data-auto-hide] { bottom: calc(var(--consent-h, 118px) + 24px); }
  html body:has(.consent) .foot { padding-bottom: calc(var(--consent-h, 118px) + 96px); }
}
.campaign-mobile-actions[data-auto-hide] > a:first-child { min-height: 44px; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .campaign-mobile-actions[data-auto-hide], .sl-btn svg, .sl-faq summary::after { transition: none; }
}

/* Alvos de toque de 44 px (auditoria de 24/10) */
.top .btn-sm, .template-dialog-header .btn-sm { min-height: 44px; }
.top .brand, .top > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
.period label { min-height: 44px; }

/* Modelos do salão abrem o site de exemplo em nova aba */
a.template-preview { text-decoration: none; }

/* ── Barbearia v5 (24/10/2026). Só vale em /comece/barbearia/ (body[data-pagina="comece-barbearia"]).
   Reaproveita as classes sl-* da página de salão (comece-campanha.css) e troca o mundo:
   a cadeira de barbeiro. Pedra e concreto no fundo, couro carvão e petróleo em campos inteiros,
   ferragem de latão só no fio, no número e na marcação. Carregar DEPOIS de comece-campanha.css. ── */
body[data-pagina="comece-barbearia"] {
  color-scheme: light;
  --bg: #f6f5f1;
  --surface: #ffffff;
  --band: #e8e6e0;
  --ink: #17191a;
  --ink-2: #3b4042;
  --muted: #575c5e;
  --line: #d7d4cc;
  --accent: #123e40;
  --accent-ink: #f6f5f1;
  --accent-soft: #e8e6e0;
  --mint: #85560e;
  --copper: #85560e;
  --copper-light: #e0b062;
  --petrol: #123e40;
  --charcoal: #1a1f20;
  --on-petrol: #f6f5f1;
  --on-petrol-2: #c9cfcd;
  background: var(--bg);
  color: var(--ink);
}
body[data-pagina="comece-barbearia"] :is(h1, h2, h3) { color: var(--ink); }
body[data-pagina="comece-barbearia"] .top img { filter: none; }
body[data-pagina="comece-barbearia"] main > section { padding-block: clamp(56px, 9vw, 112px); }
body[data-pagina="comece-barbearia"] h2 { font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -0.04em; margin-bottom: 20px; }
body[data-pagina="comece-barbearia"] .btn { min-height: 52px; }
body[data-pagina="comece-barbearia"] .top .btn-sm { min-height: 44px; }
body[data-pagina="comece-barbearia"] .btn:hover { filter: none; background: #0b2f31; }
body[data-pagina="comece-barbearia"] .btn:active { transform: translateY(1px); }
body[data-pagina="comece-barbearia"] .sl-btn-light { background: var(--on-petrol); color: var(--petrol); }
body[data-pagina="comece-barbearia"] .sl-btn-light:hover { background: #ffffff; }

/* Primeira tela: o espelho de barbearia, retangular, com moldura de latão por dentro. */
body[data-pagina="comece-barbearia"] .sl-hero { padding-block: 20px 0; }
body[data-pagina="comece-barbearia"] .sl-arch { border-radius: 22px; box-shadow: inset 0 0 0 1px rgb(23 25 26 / .08); }
body[data-pagina="comece-barbearia"] .sl-arch::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(224 176 98 / .85); border-radius: 14px; pointer-events: none; }
body[data-pagina="comece-barbearia"] .sl-arch img { object-position: 50% 30%; }
body[data-pagina="comece-barbearia"] .sl-receipt { box-shadow: 0 28px 48px -24px rgb(23 25 26 / .6), 0 4px 12px -4px rgb(23 25 26 / .2); }
body[data-pagina="comece-barbearia"] .sl-chips li:nth-child(2) { background: var(--petrol); color: var(--on-petrol); }
/* O rosto do cliente fica à esquerda da foto: a confirmação entra pela direita, sobre o reflexo. */
body[data-pagina="comece-barbearia"] .sl-receipt { margin-left: auto; }

/* Prova: agenda real em tamanho natural, sem recorte nem ampliação, em qualquer largura. */
body[data-pagina="comece-barbearia"] .sl-agenda-frame { aspect-ratio: auto; position: static; box-shadow: 0 32px 64px -40px rgb(23 25 26 / .6); }
body[data-pagina="comece-barbearia"] .sl-agenda-frame img { position: static; left: auto; width: 100%; max-width: 100%; height: auto; }

/* Como funciona: campo de couro carvão, três passos ligados pelo fio de latão. */
body[data-pagina="comece-barbearia"] .sl-how { background: var(--charcoal); color: var(--on-petrol); }
body[data-pagina="comece-barbearia"] .sl-how :is(h2, h3) { color: var(--on-petrol); }
body[data-pagina="comece-barbearia"] .sl-how :focus-visible { outline-color: var(--copper-light); }
body[data-pagina="comece-barbearia"] .sl-step-n { background: var(--charcoal); }
body[data-pagina="comece-barbearia"] .sl-how-foot { border-top-color: rgb(246 245 241 / .16); }
body[data-pagina="comece-barbearia"] .sl-video video { background: #111415; }
body[data-pagina="comece-barbearia"] .sl-video figcaption { margin-top: 10px; color: var(--on-petrol-2); font-size:14px; text-align: center; }
body[data-pagina="comece-barbearia"] .sl-how .btn.sl-btn-light:hover { background: #ffffff; }

/* Modelos de site: faixa de concreto. */
body[data-pagina="comece-barbearia"] .sl-templates { background: var(--band); }
body[data-pagina="comece-barbearia"] .template-preview img { border-color: #cfccc3; background: #fff; }
body[data-pagina="comece-barbearia"] .template-preview:hover .template-name { color: var(--copper); }
body[data-pagina="comece-barbearia"] .template-preview:focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; border-radius: 16px; }

/* Planos: uma régua só, dividida por fios. */
body[data-pagina="comece-barbearia"] .sl-pricing { background: var(--band); }
body[data-pagina="comece-barbearia"] .period { margin: 8px 0 24px; justify-self: start; }
body[data-pagina="comece-barbearia"] .sl-plans { gap: 0; margin: 0; background: var(--surface); border: 1px solid #cfccc3; border-radius: 24px; overflow: hidden; }
body[data-pagina="comece-barbearia"] .sl-plans .plan { background: none; border: 0; border-radius: 0; padding: 22px 22px 24px; }
body[data-pagina="comece-barbearia"] .sl-plans .plan + .plan { border-top: 1px solid var(--line); }
body[data-pagina="comece-barbearia"] .sl-plans .price strong { font-size: 48px; }
body[data-pagina="comece-barbearia"] .sl-plans .price span { color: var(--ink-2); font-weight: 600; }
body[data-pagina="comece-barbearia"] .sl-plans .cap { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
body[data-pagina="comece-barbearia"] .sl-plans .cond { color: var(--muted); margin-top: 4px; }

/* Perguntas: fios, não caixas. */
body[data-pagina="comece-barbearia"] .sl-faq { padding-top: 0; }
body[data-pagina="comece-barbearia"] .sl-faq details { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 0; margin: 0; }
body[data-pagina="comece-barbearia"] .sl-faq details:last-of-type { border-bottom: 1px solid var(--line); }

/* Fim: campo petróleo com as listras do poste de barbeiro em latão, paradas. */
body[data-pagina="comece-barbearia"] .sl-final { position: relative; overflow: hidden; background: var(--petrol); color: var(--on-petrol); text-align: center; padding-top: clamp(96px, 12vw, 140px); }
.bb-pole { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(-60deg, var(--copper-light) 0 6px, transparent 6px 11px, rgb(246 245 241 / .6) 11px 17px, transparent 17px 22px); }
body[data-pagina="comece-barbearia"] .sl-final h2 { color: var(--on-petrol); max-width: 20ch; margin: 0 auto 28px; }
body[data-pagina="comece-barbearia"] .sl-final .sl-fine { color: var(--on-petrol-2); }
body[data-pagina="comece-barbearia"] .sl-final .switch a { color: var(--on-petrol); display: inline-flex; align-items: center; min-height: 44px; }
body[data-pagina="comece-barbearia"] .sl-final :focus-visible { outline-color: var(--copper-light); }
body[data-pagina="comece-barbearia"] .foot { border-top: 0; }
body[data-pagina="comece-barbearia"] .foot :is(a, .link) { display: inline-block; padding-block: 11px; }
body[data-pagina="comece-barbearia"] .foot nav { gap: 0 20px; }

@media (min-width: 900px) {
  body[data-pagina="comece-barbearia"] .sl-hero { padding-top: 40px; }
  body[data-pagina="comece-barbearia"] .sl-receipt { left: auto; right: 16px; }
  body[data-pagina="comece-barbearia"] .sl-chips { left: auto; right: 20px; bottom: auto; top: 28px; align-items: flex-end; }
  body[data-pagina="comece-barbearia"] .sl-scene figcaption { padding-left: 0; padding-right: 330px; text-align: left; }
  body[data-pagina="comece-barbearia"] .sl-chips li { background: rgb(246 245 241 / .96); box-shadow: 0 6px 16px -8px rgb(23 25 26 / .55); }
  body[data-pagina="comece-barbearia"] .sl-chips li:nth-child(2) { background: var(--petrol); }
  body[data-pagina="comece-barbearia"] .period { justify-self: end; margin-bottom: 28px; }
  body[data-pagina="comece-barbearia"] .sl-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-pagina="comece-barbearia"] .sl-plans .plan { padding: 32px 32px 36px; }
  body[data-pagina="comece-barbearia"] .sl-plans .plan + .plan { border-top: 0; border-left: 1px solid var(--line); }
  body[data-pagina="comece-barbearia"] .sl-plans .price strong { font-size: 56px; }
}
@media (max-width: 479px) {
  body[data-pagina="comece-barbearia"] .sl-agenda-frame { aspect-ratio: auto; }
  body[data-pagina="comece-barbearia"] .sl-agenda-frame img { position: static; left: auto; width: 100%; }
}

.sl-plans .inclui { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.45; }

/* PROTÓTIPO LOCAL (26/10/2026, não publicado): sobretítulo da página de barbearia, igual ao do app. */
.sl-eyebrow { margin: 0 0 12px; font-size:14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A5A2B; }

/* CRO 27/10: herói com a lista como protagonista e calculadora, iguais à home. */
.hv-scene{max-width:560px}
.hv-faixa{position:relative;border-radius:18px 18px 0 0;overflow:hidden;aspect-ratio:2.1/1;background:var(--band)}
.hv-faixa img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hv-lista{position:relative;margin:-26px 14px 0;background:#fff;border-radius:16px;padding:14px 14px 6px;box-shadow:0 28px 48px -24px rgb(23 25 26 / .55),0 4px 12px -4px rgb(23 25 26 / .2),inset 0 0 0 1px rgb(23 25 26 / .06)}
.hv-lh{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px;margin:0 0 4px}.hv-lh b{font-weight:800;color:#17191a}
.hv-lh span{background:#fdf0dc;color:#85560e;border-radius:999px;padding:3px 10px;font-weight:700;font-size:14px;white-space:nowrap}
.hv-lista ul{list-style:none;margin:0;padding:0}
.hv-lista li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #ece9e1}
.hv-av{width:36px;height:36px;border-radius:50%;background:#123e40;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.hv-who{display:grid;min-width:0}.hv-who b{font-size:15px;color:#17191a}.hv-who small{font-size:14px;color:#5b6961}
.hv-wa{background:#1f7a4d;color:#fff;border-radius:999px;padding:8px 12px;font-size:14px;font-weight:700;white-space:nowrap}
.hv-scene figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
@media (max-width:719px){.hv-faixa{aspect-ratio:2.4/1}.hv-lista{margin-inline:8px;padding-inline:12px}.hv-lista li{grid-template-columns:32px minmax(0,1fr) auto}.hv-av{width:32px;height:32px}.hv-wa{padding:8px 10px;font-size:0}.hv-wa::before{content:"Chamar";font-size:14px}}
@media (min-width:900px){.hv-scene{padding-bottom:0}.hv-scene figcaption{position:static;padding:0;text-align:left}}
.sl-calc{padding-block:48px;background:var(--band)}
.calc-grid{display:grid;gap:24px}.calc-box{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.calc-out{display:grid;gap:2px;text-align:center;background:var(--accent);color:var(--accent-ink);border-radius:14px;padding:16px;margin-top:4px}.calc-out strong{font-size:34px;line-height:1.1;color:#e0b062}.calc-out small{font-size:14px;opacity:.85;margin-top:4px}
.calc-note{font-size:14px;color:var(--muted);margin:0;padding-right:64px}
.sl{display:grid;gap:6px}.sl-top{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:15px}.sl-top b{font-size:20px;color:var(--accent)}
.sl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;padding:0;border:0;margin:0}
.sl input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(var(--accent),var(--accent)) 0/var(--p,30%) 100% no-repeat,var(--line)}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px rgb(0 0 0/.35)}
.sl input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--line)}.sl input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--accent)}
.sl input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent);border:3px solid #fff}
.calc-h3{margin-top:20px;font-size:22px}.calc-ap{margin-top:4px;color:var(--muted)}
.sl-contact{margin-top:14px;font-size:15px}.sl-contact a{color:inherit}
@media(min-width:900px){.calc-grid{grid-template-columns:1fr 1fr;align-items:center}.calc-note{padding-right:0}}

/* Tela "Hoje" igual à da home (sem ampliar) e título do herói mais baixo no celular. */
.sl-proof-grid.sl-proof-solo{grid-template-columns:minmax(0,1fr);gap:28px}
.sl-proof-solo .sl-proof-copy h2{max-width:none}
.sl-hoje{margin:0;min-width:0}
.sl-hoje img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;border-radius:16px;border:1px solid var(--line);box-shadow:0 32px 64px -40px rgb(23 25 26 / .6);background:var(--surface)}
.sl-hoje figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
@media (max-width:719px){.sl-hero h1{font-size:40px;max-width:13ch}}

.hv-faixa picture{display:contents}

/* CRO 27/10 (auditoria UX/UI das páginas de anúncio): calculadora como a da home, "Chamar" só contorno, título menor, ver tudo. */
.calc-box .calc-out{order:-1;margin:0 0 4px}
.calc-more{border-top:1px solid var(--line);padding-top:6px}.calc-more summary{min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--accent);cursor:pointer;list-style:none}.calc-more summary::-webkit-details-marker{display:none}.calc-more summary::after{content:"+";margin-left:auto;font-size:24px;line-height:1}.calc-more[open] summary::after{content:"–"}.calc-more[open] summary{margin-bottom:4px}
.hv-wa{background:transparent;color:#1f7a4d;box-shadow:inset 0 0 0 1.5px #1f7a4d}
.hv-wa::before{color:#1f7a4d}
.feats-more{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}.feats-more summary{min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--accent);cursor:pointer}
.feats-more[open] summary{margin-bottom:8px}
.sl-hero h1{font-size:clamp(40px,5vw,64px);max-width:12ch}
@media (max-width:380px){.sl-hero h1{font-size:34px}}
@media (max-width:719px){.calc-note{padding-right:0}}

/* Rodada 2 UX/UI: valor da barra numa linha só; "Ver tudo" com + / – e "Ver menos"; apoio do herói menor em 360 px. */
.sl-top b{white-space:nowrap;flex:none;margin-left:12px}
.feats-more summary{list-style:none}.feats-more summary::-webkit-details-marker{display:none}.feats-more summary::after{content:"+";margin-left:auto;font-size:24px;line-height:1}.feats-more[open] summary::after{content:"–"}
.feats-more .more-open{display:none}.feats-more[open] .more-open{display:inline}.feats-more[open] .more-closed{display:none}
@media (max-width:380px){.sl-lead{font-size:16px}}

/* F9 (28/10/2026): faixa de frequência, vídeo em miniatura, planos em lista e "O que vem junto" enxuto no celular */
.sl-freqs{background:var(--surface);border-block:1px solid var(--line);padding:32px 0 28px!important;margin-top:24px}
.sl-freqs h2{font-size:20px!important;font-weight:700;line-height:1.25;margin:0 0 14px!important;letter-spacing:-.01em}
.sl-freqs ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-width:none}
.sl-freqs li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:48px;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
.sl-freqs li b{font-weight:650}.sl-freqs li span{color:var(--accent);font-weight:600;white-space:nowrap}
.sl-freqs p{margin:12px 0 0;color:var(--ink-2);font-size:15px;max-width:none}
.sl-plans-note{display:none}
@media(min-width:900px){
 .sl-freqs .wrap{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:8px 40px;align-items:start;grid-template-rows:auto 1fr}
 .sl-freqs h2{grid-column:1;margin:0!important}.sl-freqs p{grid-column:1;grid-row:2;margin:0}
 .sl-freqs ul{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:16px;border:0}
 .sl-freqs li{flex-direction:column;align-items:flex-start;gap:6px;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--bg)}
 .sl-freqs li span{font-size:20px;font-weight:700}
}
@media(max-width:719px){
.sl-video{position:relative;display:grid!important;grid-template-columns:112px 1fr;gap:14px;align-items:center;margin:18px 0 0!important;max-width:none!important}
.sl-video video{width:112px!important;height:auto!important;aspect-ratio:9/16;border-radius:12px}
.sl-video:not(.is-started) video::-webkit-media-controls{display:none!important}
.sl-video::before{content:"";position:absolute;left:34px;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:#fffffff0;box-shadow:0 4px 14px #0006;pointer-events:none}
.sl-video::after{content:"";position:absolute;left:52px;top:50%;margin-top:-9px;border-left:15px solid #123e40;border-block:9px solid transparent;pointer-events:none}
.sl-video figcaption{text-align:left!important;font-size:15px}
.sl-video.is-started{grid-template-columns:1fr;justify-items:center;gap:10px}
.sl-video.is-started::before,.sl-video.is-started::after{display:none}
.sl-video.is-started video{width:min(240px,100%)!important}
.sl-video.is-started figcaption{text-align:center!important}
.sl-plans{display:block!important;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 18px;margin-top:16px}
.sl-plans .plan{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;border:0;border-radius:0;background:none;padding:14px 0!important;min-height:72px;border-bottom:1px solid var(--line)}
.sl-plans .plan:last-child{border-bottom:0}
.sl-plans .plan h3{grid-column:1;font-size:17px;margin:0}
.sl-plans .plan .sl-fit{grid-column:1;margin:0;font-size:14px!important;line-height:1.3;color:var(--ink-2)}
.sl-plans .plan .price{grid-column:2;grid-row:1/3;justify-self:end;margin:0;font-size:14px}
body[data-pagina] .sl-plans .plan .price strong{font-size:26px}
body[data-pagina] .sl-plans .plan .price span{font-size:14px}
.sl-plans .plan .cap,.sl-plans .plan .cond{display:none}
.sl-plans .plan .price{gap:2px}
body[data-periodo="annual"] .sl-plans .plan .cond{display:block;grid-column:1/-1;margin:2px 0 0;font-size:14px;line-height:1.35;color:var(--muted)}
@media(max-width:380px){body[data-pagina] .sl-plans .plan .price strong{font-size:22px}body[data-pagina] .sl-plans .plan .price span{font-size:12px}.sl-plans .plan{gap:2px 8px}.sl-plans{padding:2px 14px}}
.sl-plans-note{display:block;margin:10px 0 0;font-size:14px;color:var(--muted)}
body[data-periodo="annual"] .sl-plans-note{display:none}
.sl-feats>div{padding:10px 0!important}
.sl-feats dd{display:none!important;margin:2px 0 0!important;font-size:14px!important;line-height:1.35;color:var(--ink-2)}
.sl-feats-grid>.sl-feats>div:nth-child(odd) dd{display:block!important}
}

/* F12 (28/10/2026): alvos de toque de 44 px no contato */
.sl-contact a { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }

/* Planos Solo/Essencial/Gestão (02/11/2026): Sofia opcional e à parte; */
.sl-sofia-note{display:block;margin:4px 0 0;font-size:14px;color:var(--muted)}
/* UX/UI 02/11: no computador o nome do plano sobe (18 px, negrito) e a faixa vira apoio; "O que vem junto" de Unhas sem "Ver tudo" */
@media (min-width: 720px){
  .sl-plans .plan h3{font-size:18px;font-weight:800}
  .sl-plans .plan .sl-fit{font-size:16px;font-weight:600;color:var(--ink-2);margin:4px 0 12px}
}
body[data-pagina="comece-unhas"] .sl-feats dd{display:block!important}
/* Unhas: FAQ em 2 colunas no computador, como na home (título à esquerda, lista à direita); links de ramo centralizados */
body[data-pagina="comece-unhas"] .sl-final .switch{margin-top:8px;text-align:center;justify-content:center}
body[data-pagina="comece-unhas"] .sl-final .switch:first-of-type{margin-top:20px}
@media (min-width: 900px){
  body[data-pagina="comece-unhas"] .sl-faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);column-gap:64px;align-items:start;max-width:none}
  body[data-pagina="comece-unhas"] .sl-faq > *{max-width:none}
  body[data-pagina="comece-unhas"] .sl-faq > h2{grid-column:1;grid-row:1 / span 20;margin:0}
  body[data-pagina="comece-unhas"] .sl-faq > details{grid-column:2}
}

/* UX/UI 02/11: sem a faixa escura vazia acima do CTA final (todas as páginas) */
body:is([data-pagina="comece-salao"], [data-pagina="comece-unhas"], [data-pagina="comece-barbearia"]) .sl-final { padding-top: 56px; }
.sl-final-loop { top: 0; height: 40px; }
/* QI 02/11: pontos do carrossel com área de toque de 44 px; links dentro de parágrafo com respiro vertical */
.sl-pricing-foot .note a,.sl-faq a,.sl-contact a{display:inline-block;padding-block:13px;margin-block:-13px}

/* Unhas (02/11, aprovado pelo Marcelo): herói com a tela real do produto numa moldura desenhada em CSS (sem foto de pessoa), com recortes reais da tela Voltas saindo da moldura */
body[data-pagina="comece-unhas"] .sl-hl{color:var(--copper)}
.un-scene{margin:0;width:100%}  /* herói antigo (tela do app em moldura) removido em 03/11; o atual é o bloco .uh-* no fim do arquivo */
/* Unhas: foto de apoio (só mãos, sem rosto) na seção da dor; faixa 12:5 no celular, quadrado de 720 a 899 px, 3:2 (até 480 px) a partir de 900 px */
.un-foto{margin:22px 0 6px;max-width:520px}
.un-foto img{display:block;width:100%;height:auto;aspect-ratio:12/5;object-fit:cover;border-radius:16px}
@media (min-width:720px){.un-foto img{aspect-ratio:1/1}}
/* UX/UI 02/11 (Unhas): foto mais baixa no computador; título da calculadora no topo da coluna dela; carrossel sem altura reservada ao slide mais alto; "Quanto custa" fechada sem resposta parcial */
.calc-right{display:grid;gap:0;align-content:start}
.calc-right .calc-h3{margin-top:0}
.calc-right .calc-box{margin-top:16px}
@media (min-width:900px){
  body[data-pagina="comece-unhas"] .calc-grid{align-items:start}
  .un-foto{max-width:480px}
  .un-foto img{aspect-ratio:3/2;object-position:50% 55%}
}
body[data-pagina="comece-unhas"] .plat-slide:not(.is-on){display:none}
body[data-pagina="comece-unhas"] .sl-faq .faq-sum{display:none}

/* Unhas (02/11, UX/UI r2): sem troca automática, o "Continuar" reativaria o autoplay e o palco mudaria de altura (a página pularia): botão Pausar/Continuar escondido só em Unhas; bolinhas e setas bastam. Preço: "R$" e "/mês" com 14 px em tela estreita; vírgula do Solo ajustada como na home. */
body[data-pagina="comece-unhas"] .plat-play{display:none}
@media(max-width:380px){body[data-pagina] .sl-plans .plan .price span{font-size:14px}}
.price .vg{letter-spacing:-.14em}
@media(min-width:900px){.sl-freqs li span{white-space:normal;overflow-wrap:anywhere}}

/* Respiro entre a faixa de modelos e as perguntas (salao e barbearia; unhas tem o seu) */
body:is([data-pagina="comece-salao"], [data-pagina="comece-barbearia"]) .sl-faq { padding-top: 52px; }

/* Desktop (>=1024): "Como funciona" com o video centralizado ao lado da legenda, sem vazio a esquerda; menos ar entre blocos (salao e barbearia) */
@media (min-width: 1024px) {
  body:is([data-pagina="comece-salao"], [data-pagina="comece-barbearia"]) .sl-how-foot { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  body:is([data-pagina="comece-salao"], [data-pagina="comece-barbearia"]) .sl-video { display: grid; grid-template-columns: 220px minmax(0, 30ch); column-gap: 48px; align-items: center; justify-self: center; max-width: none; }
  body:is([data-pagina="comece-salao"], [data-pagina="comece-barbearia"]) .sl-video figcaption { margin: 0; text-align: left; font-size: 20px; line-height: 1.4; }
  body:is([data-pagina="comece-salao"], [data-pagina="comece-barbearia"]) :is(.sl-pricing, .sl-plat) { padding-bottom: 56px; }
}

/* Unhas: H1 de 71 caracteres (02/11/2026, decisão do Marcelo: variante B). Sem o teto de 12ch dos outros ramos, para fechar em até 4 linhas no celular. Só /comece/unhas/. */
body[data-pagina="comece-unhas"] .sl-hero h1 { max-width: none; font-size: clamp(30px, 8.4vw, 36px); text-wrap: balance; }
@media (min-width: 900px) { body[data-pagina="comece-unhas"] .sl-hero h1 { font-size: clamp(38px, 3.9vw, 50px); } }
body[data-pagina="comece-unhas"] .sl-hero .sl-lead { text-wrap: pretty; }

/* Unhas: faixa "Cada serviço tem o seu prazo". Prazo em destaque (número grande), nome do serviço numa linha, cartões iguais. Celular: lista; 768+: cartões; 1024+: quatro em linha sob o título. */
body[data-pagina="comece-unhas"] .sl-freqs { padding: 36px 0 32px !important; border-top: 3px solid var(--petrol); }
body[data-pagina="comece-unhas"] .sl-freqs li { align-items: center; gap: 16px; min-height: 64px; font-size: 16px; }
body[data-pagina="comece-unhas"] .sl-freqs li b { font-weight: 600; line-height: 1.25; }
body[data-pagina="comece-unhas"] .sl-freqs li span { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; line-height: 1.1; font-weight: 400; }
body[data-pagina="comece-unhas"] .sl-freqs li small { font-size: 14px; color: var(--muted); font-weight: 500; }
body[data-pagina="comece-unhas"] .sl-freqs li strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--petrol); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  body[data-pagina="comece-unhas"] .sl-freqs .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 20px 40px; align-items: end; }
  body[data-pagina="comece-unhas"] .sl-freqs h2 { grid-column: 1; grid-row: 1; margin: 0 !important; }
  body[data-pagina="comece-unhas"] .sl-freqs p { grid-column: 2; grid-row: 1; margin: 0; max-width: 34ch; justify-self: end; }
  body[data-pagina="comece-unhas"] .sl-freqs ul { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; }
  body[data-pagina="comece-unhas"] .sl-freqs li { position: relative; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; min-height: 0; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
  body[data-pagina="comece-unhas"] .sl-freqs li::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--copper); }
  body[data-pagina="comece-unhas"] .sl-freqs li span { flex-direction: row; align-items: baseline; gap: 8px; font-size: inherit; }
  body[data-pagina="comece-unhas"] .sl-freqs li strong { font-size: 32px; }
}
@media (min-width: 1024px) { body[data-pagina="comece-unhas"] .sl-freqs ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1180px) { body[data-pagina="comece-unhas"] .sl-freqs li { padding: 20px 16px 18px; } body[data-pagina="comece-unhas"] .sl-freqs li b { font-size: 15px; letter-spacing: -.01em; } }

/* Unhas, herói com foto (aprovado 03/11): foto no topo da cena, cartão "Quem já devia ter voltado" em HTML sobreposto à base. Sem texto sobre a foto. */
.uh-scene{max-width:480px;width:100%;justify-self:center}
.uh-photo{display:block}
.uh-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;border-radius:20px;background:#e8dfd0}
.uh-card{position:relative;margin:-56px 12px 0 auto;width:min(340px,calc(100% - 24px));background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px 4px;box-shadow:0 18px 32px -16px rgb(23 25 26 / .5);pointer-events:none;user-select:none}
.uh-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px;border-bottom:1px solid #e8e8e2}
.uh-head b{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.uh-head span{flex:none;background:#faecd7;color:#7a4c1e;font-weight:800;font-size:14px;border-radius:999px;padding:4px 10px}
.uh-card ul{list-style:none;margin:0;padding:0}
.uh-card li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #e8e8e2}
.uh-card li:first-child{border-top:0}
.uh-av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--petrol);color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center}
.uh-who{flex:1;min-width:0;display:grid;line-height:1.25}
.uh-who b{font-size:15px;font-weight:800;color:var(--ink)}
.uh-who small{font-size:14px;color:#5b6961;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uh-call{flex:none;font-size:14px;font-weight:800;color:#2f6b49;border:2px solid #8fb5a1;cursor:default;border-radius:999px;padding:5px 12px;line-height:1.2}
.uh-scene figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
@media (max-width:400px){.uh-who small{white-space:normal}}
@media (max-width:380px){.uh-card{margin:-44px 4px 0 auto;width:calc(100% - 8px);padding:12px 10px 4px}.uh-head b{font-size:15px}.uh-card li{gap:8px}.uh-av{width:30px;height:30px}.uh-who b{font-size:14px}.uh-call{padding:5px 6px}}
/* tablet (600 a 899 px): figura alinhada ao texto, na largura toda da coluna, foto 16:10 e cartão dentro dela na horizontal */
@media (min-width:600px) and (max-width:899px){.uh-scene{max-width:none;justify-self:stretch}.uh-photo img{aspect-ratio:16/10}.uh-card{margin-top:-84px;margin-right:12px;width:360px}}
@media (min-width:900px){.uh-scene{max-width:520px}.uh-card{margin-top:-84px;margin-right:12px;width:360px}}
/* computador: foto mais baixa (4:3, no máximo 400 px) para botão e linhas de apoio caberem acima do banner de cookies a 1280x800 */
@media (min-width:1024px){.uh-photo img{aspect-ratio:4/3;max-height:400px}}