/* Página de venda barber: folha própria (extraída do inline em 06/09/2026; o teste PaginaDeVendaPorSaasTest exige uma folha por vertical). */
/* ══════════════════════════════════════════════════════════════════════════
   VATSE BARBEARIA — página de venda (modelo "LEGEND": premium, escuro, dourado)
   Fundo escuro dominante + dourado + seções creme para respiro. Herói com
   IMAGEM DE FUNDO full-bleep + máscara. Oswald (títulos, sem itálico/serifa) +
   Inter (texto). Sem fonte cursiva. Cards escuros, preço em dourado.
   ══════════════════════════════════════════════════════════════════════════ */
.brb{
    --dark:#17130e; --dark-2:#201a13; --dark-3:#2a221a; --line-d:rgba(244,239,230,.12);
    --paper:#f4efe6; --paper-2:#ece3d4; --line-l:rgba(31,26,20,.13);
    /* --gold-ink e --ink-soft são os tons que pousam no papel. Nos valores
       antigos davam 4,38:1 e 4,29:1 sobre --paper — abaixo do 4,5:1 do AA, em
       texto corrido de uma página que vende (F03 do
       COMMERCIAL_FAILURES_CURRENT).

       A régua é o papel MAIS ESCURO dos dois, --paper-2 (#ece3d4): calibrar
       pelo claro deixava as seções de respiro em 4,13:1 — que foi exatamente o
       que aconteceu na primeira tentativa. Nos valores de agora:

           --gold-ink  #7d602b   4,61 sobre #ece3d4   5,11 sobre #f4efe6
           --ink-soft  #6d6355   4,60 sobre #ece3d4   5,14 sobre #f4efe6

       Matiz preservado; só luminância. O dourado também é FUNDO de etiqueta e
       de botão com texto branco, e ali escurecer só aumenta o contraste. */
    --gold:#c8a15a; --gold-2:#ddbd7a; --gold-ink:#7d602b;
    --ink:#1f1a14; --ink-soft:#6d6355;
    --cream:#f4efe6; --cream-soft:rgba(244,239,230,.66);
    background:var(--dark); color:var(--cream);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px; line-height:1.6;
}
.brb *{box-sizing:border-box}
.brb-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.brb h1,.brb h2,.brb h3{font-family:"Oswald","Inter",sans-serif;font-weight:600;letter-spacing:.005em;color:var(--cream);margin:0;line-height:1.06}
.brb-sec.light h1,.brb-sec.light h2,.brb-sec.light h3{color:var(--ink)}
/* eyebrow (dourado, maiúsculo, sem "/", sem ícone) */
.brb-lbl{display:inline-block;font-family:"Oswald","Inter",sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.brb-sec.light .brb-lbl{color:var(--gold-ink)}

/* botões */
.brb-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:6px;font-family:"Oswald","Inter",sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;transition:transform .16s ease,box-shadow .16s ease,background .16s,color .16s,border-color .16s}
.brb-btn-gold{background:var(--gold);color:#1a1510;box-shadow:0 16px 34px -16px rgba(200,161,90,.6)}
.brb-btn-gold:hover{background:var(--gold-2);transform:translateY(-2px)}
.brb-btn-ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(244,239,230,.36)}
.brb-btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.brb-btn-ink{background:var(--ink);color:var(--cream)}
.brb-btn-ink:hover{background:#000;transform:translateY(-2px)}
.brb-btn-inkline{background:transparent;color:var(--ink);border:1.5px solid var(--line-l)}
.brb-btn-inkline:hover{border-color:var(--gold-ink);color:var(--gold-ink);transform:translateY(-2px)}

/* ── HERO (imagem de fundo full-bleed + máscara) ──────────────────────────── */
.brb-hero{position:relative;min-height:clamp(580px,90vh,880px);display:flex;align-items:center;overflow:hidden;padding:var(--nav-h,72px) 0 0}
.brb-hero-bg{position:absolute;inset:0;z-index:0}
.brb-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% center;display:block}
.brb-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,10,7,.95) 0%,rgba(13,10,7,.85) 32%,rgba(13,10,7,.5) 62%,rgba(13,10,7,.18) 100%),linear-gradient(0deg,rgba(13,10,7,.7),transparent 40%)}
.brb-hero-in{position:relative;z-index:1;width:100%;padding-top:clamp(40px,7vw,70px);padding-bottom:clamp(48px,7vw,80px)}
.brb-hero h1{font-size:clamp(2.7rem,6.4vw,5.4rem);text-transform:uppercase;font-weight:700;line-height:.98;margin:16px 0 0;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.brb-hero h1 .gold{color:var(--gold)}
.brb-hero-lead{margin:22px 0 0;max-width:44ch;color:rgba(244,239,230,.82);font-size:1.08rem;line-height:1.7}
.brb-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.brb-hero-proof{display:flex;align-items:center;gap:16px;margin-top:32px}
.brb-avatars{display:flex}
.brb-avatars img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--dark);margin-left:-11px}
.brb-avatars img:first-child{margin-left:0}
.brb-proof-txt{font-size:.84rem;color:rgba(244,239,230,.7)}
.brb-proof-txt b{display:block;color:var(--cream);font-size:.92rem}
.brb-proof-txt .stars{color:var(--gold);letter-spacing:1px}
/* atalhos diretos de demo (admin / público), sem passar pelo hub */
.brb-hero-demo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:20px}
.brb-hero-demo>span{font-size:.8rem;color:rgba(244,239,230,.58)}
.brb-hero-demo a{display:inline-flex;align-items:center;gap:7px;font-family:"Oswald","Inter",sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:color .18s ease,gap .18s ease}
.brb-hero-demo a:hover{color:var(--gold-2);gap:11px}
.brb-hero-demo a i{font-size:.66rem}

/* ── FAIXA DE DESTAQUES (feature strip, escura) ───────────────────────────── */
.brb-strip{background:var(--dark-2);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.brb-strip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.brb-strip-i{display:flex;align-items:center;gap:15px;padding:26px 26px}
.brb-strip-i+.brb-strip-i{border-left:1px solid var(--line-d)}
.brb-strip-i i{color:var(--gold);font-size:1.5rem;flex-shrink:0}
.brb-strip-i b{display:block;font-family:"Oswald","Inter",sans-serif;font-weight:600;font-size:1rem;color:var(--cream);text-transform:uppercase;letter-spacing:.02em}
.brb-strip-i span{font-size:.82rem;color:var(--cream-soft)}

/* ── seção base ───────────────────────────────────────────────────────────── */
.brb-sec{padding:clamp(58px,7.5vw,96px) 0;position:relative}
.brb-sec.light{background:var(--paper);color:var(--ink)}
.brb-sec.paper2{background:var(--paper-2)}
.brb-head{max-width:640px}
.brb-head.center{margin:0 auto;text-align:center}
.brb-head h2{font-size:clamp(2rem,4vw,3.1rem);margin:10px 0 0;text-transform:uppercase}
.brb-head p{margin:14px 0 0;color:var(--cream-soft);font-size:1.02rem;line-height:1.7}
.brb-sec.light .brb-head p{color:var(--ink-soft)}
.brb-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brb-viewall{font-family:"Oswald","Inter",sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-decoration:none;white-space:nowrap}
.brb-sec.light .brb-viewall{color:var(--gold-ink)}
.brb-viewall:hover{opacity:.75}

/* grid genérico */
.brb-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px}

/* ── SERVIÇOS (cards escuros) ─────────────────────────────────────────────── */
.brb-serv{background:var(--dark-2);border:1px solid var(--line-d);border-radius:12px;padding:28px 24px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.brb-serv:hover{transform:translateY(-6px);border-color:rgba(200,161,90,.45);box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
.brb-serv-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:rgba(200,161,90,.13);color:var(--gold);font-size:1.2rem;transition:background .22s,color .22s}
.brb-serv:hover .brb-serv-ic{background:var(--gold);color:#1a1510}
.brb-serv h3{font-size:1.3rem;margin:18px 0 0;text-transform:uppercase}
.brb-serv p{margin:8px 0 0;color:var(--cream-soft);font-size:.9rem;line-height:1.55}
.brb-serv-price{display:block;margin-top:16px;font-family:"Oswald","Inter",sans-serif;font-weight:700;font-size:1.5rem;color:var(--gold)}

/* ── EQUIPE (cards escuros com foto) ──────────────────────────────────────── */
.brb-card{background:var(--dark-2);border:1px solid var(--line-d);border-radius:12px;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.brb-card:hover{transform:translateY(-6px);border-color:rgba(200,161,90,.4);box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
.brb-barber-pic{aspect-ratio:1/1.12;overflow:hidden}
.brb-barber-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.brb-card:hover .brb-barber-pic img{transform:scale(1.06)}
.brb-barber-body{padding:16px 16px 18px;text-align:center}
.brb-barber-body h3{font-size:1.16rem;text-transform:uppercase}
.brb-barber-body span{display:block;font-size:.82rem;color:var(--gold);margin-top:3px}
.brb-barber-body .tag{display:inline-block;margin-top:11px;font-size:.8rem;color:var(--cream-soft);background:rgba(244,239,230,.07);border:1px solid var(--line-d);border-radius:999px;padding:4px 12px}

/* ── PRODUTOS (cards claros) ──────────────────────────────────────────────── */
.brb-card.light{background:#fff;border-color:var(--line-l)}
.brb-card.light:hover{border-color:rgba(138,106,48,.4)}
.brb-prod-pic{aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.brb-prod-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.brb-card.light:hover .brb-prod-pic img{transform:scale(1.05)}
.brb-prod-body{padding:16px 16px 18px}
.brb-prod-body h3{font-size:1.06rem;font-family:"Oswald","Inter",sans-serif;font-weight:600;color:var(--ink);text-transform:uppercase}
.brb-prod-body .sub{font-size:.8rem;color:var(--ink-soft);margin-top:3px}
.brb-prod-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px}
.brb-prod-foot .price{font-family:"Oswald","Inter",sans-serif;font-weight:700;font-size:1.25rem;color:var(--gold-ink)}
.brb-prod-foot .rate{font-size:.8rem;color:var(--ink-soft)}
.brb-prod-foot .rate i{color:var(--gold)}

/* ── PAINEL + APP (escuro) ────────────────────────────────────────────────── */
.brb-soft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,60px);align-items:center}
.brb-soft-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.brb-soft-list li{display:flex;gap:13px;align-items:flex-start}
.brb-soft-list i{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(200,161,90,.14);color:var(--gold);font-size:.85rem}
.brb-soft-list b{display:block;font-family:"Oswald","Inter",sans-serif;font-weight:600;font-size:1rem;color:var(--cream)}
.brb-soft-list span{color:var(--cream-soft);font-size:.88rem}
.brb-stage{position:relative}
.brb-browser{border-radius:12px;overflow:hidden;border:1px solid var(--line-d);box-shadow:0 44px 90px -50px #000;background:#120f0c}
.brb-browser-bar{display:flex;align-items:center;gap:7px;padding:12px 15px;background:rgba(244,239,230,.05);border-bottom:1px solid var(--line-d)}
.brb-browser-bar i{width:10px;height:10px;border-radius:50%;background:#4a3f30}
.brb-browser-bar i:nth-child(1){background:#c9744a}.brb-browser-bar i:nth-child(2){background:var(--gold)}.brb-browser-bar i:nth-child(3){background:#8a9a5a}
.brb-browser-bar span{margin-left:8px;font-size:.8rem;color:var(--cream-soft)}
.brb-screen{aspect-ratio:1950/1230;overflow:hidden}
.brb-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* ── APP (2 mockups de celular) ───────────────────────────────────────────── */
.brb-app{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,5vw,58px);align-items:center}
/* Mesmo porte do título de "O painel e o app": o h2 desta seção herdava o tamanho de parágrafo. */
.brb-app-copy h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:10px 0 0}
.brb-app-copy p{margin-top:12px;color:var(--cream-soft)}
/* Na superfície creme o parágrafo em --cream-soft sumia no fundo: texto invisível. */
.brb-sec.light .brb-app-copy p{color:var(--ink-soft)}
.brb-app-phones{position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(10px,2vw,24px);padding:16px 0}
/* As capturas são 390x844 (proporção 1:2,16) e a moldura é 1:1,94: sem
   ancorar no topo, o `cover` corta justamente o cabeçalho e o primeiro
   número — que é o que a seção existe para mostrar. */
/* `height:auto` é OBRIGATÓRIO aqui, não decoração: as capturas entram na
   página com os atributos width/height do arquivo (780x1688). Atributo de
   dimensão vira altura DEFINIDA, e altura definida desliga o aspect-ratio:
   a moldura de telefone virava uma tira de 268x1694 (1:6,3) no celular. */
.brb-appimg{width:min(46%,214px);height:auto;aspect-ratio:9/17.5;object-fit:cover;object-position:top center;border-radius:28px;border:5px solid #0c0a08;box-shadow:0 44px 72px -34px rgba(0,0,0,.7);background:#0c0a08;display:block;transition:transform .35s ease}
.brb-appimg.back{transform:translateY(14px) rotate(-4deg)}
.brb-appimg.front{transform:translateY(-12px) rotate(3deg);z-index:2}
.brb-app-phones:hover .brb-appimg.back{transform:translateY(10px) rotate(-6deg)}
.brb-app-phones:hover .brb-appimg.front{transform:translateY(-16px) rotate(5deg)}

/* ── CARROSSEL ────────────────────────────────────────────────────────────── */
.brb-carousel-sec{background:var(--dark-2);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}

/* ── ANTES DE ACREDITAR (cards claros) ─────────────────────────────────────
   Ocupa o lugar dos depoimentos, que eram inventados e sairam. Os tres
   cartoes sao LINKS: a secao existe para tirar o visitante da leitura e
   coloca-lo dentro do produto. */
.brb-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.brb-prova{display:block;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.brb-prova .brb-prod-body{padding:26px 24px 28px}
.brb-prova i{font-size:1.3rem;color:var(--gold);display:block;margin-bottom:14px}
.brb-prova h3{font-size:1.02rem}
.brb-prova .sub{font-size:.86rem;line-height:1.6;margin-top:8px}
.brb-prova:hover,.brb-prova:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 22px 44px -30px rgba(0,0,0,.45)}
.brb-prova:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── SOBRE / POR QUE (escuro, imagem + checklist) ─────────────────────────── */
.brb-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,60px);align-items:center}
.brb-about-photo{aspect-ratio:4/3.3;border-radius:14px;overflow:hidden;border:1px solid var(--line-d);box-shadow:0 40px 80px -46px #000;position:relative}
.brb-about-photo img{width:100%;height:100%;object-fit:cover;display:block}
.brb-check{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.brb-check li{display:flex;gap:13px;align-items:flex-start;font-size:.98rem;color:var(--cream)}
.brb-check i{flex-shrink:0;color:var(--gold);margin-top:3px}

/* ── CTA final (imagem full-bleed) ────────────────────────────────────────── */
.brb-cta{position:relative;overflow:hidden;color:var(--cream)}
.brb-cta-bg{position:absolute;inset:0;z-index:0}
.brb-cta-bg img{width:100%;height:100%;object-fit:cover;display:block}
.brb-cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,10,7,.94),rgba(13,10,7,.6))}
.brb-cta-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:clamp(56px,7vw,96px) 24px}
.brb-cta h2{font-size:clamp(2rem,4.2vw,3.3rem);max-width:16ch;text-transform:uppercase}
.brb-cta p{margin:16px 0 0;color:var(--cream-soft);max-width:46ch;font-size:1.02rem}
.brb-cta-btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}

/* ── componentes compartilhados (planos/faq/lead) em seção CREME ──────────── */
.brb-shared .brb-head{margin-bottom:34px}
.brb .sv-label{font-family:"Oswald","Inter",sans-serif!important;text-transform:uppercase!important;letter-spacing:.2em!important;font-size:.8rem;font-weight:600;color:var(--gold-ink)}
.brb .sv-kit__item,.brb .sv-plano,.brb .sv-duvida{background:#fff;border:1px solid var(--line-l);border-radius:12px;box-shadow:0 22px 46px -42px rgba(31,26,20,.4)}
.brb .sv-kit__icone{color:var(--gold-ink);background:rgba(200,161,90,.14)}
.brb .sv-plano--ancora{border-color:var(--gold);box-shadow:0 30px 58px -38px rgba(200,161,90,.5)}
.brb .sv-plano__tag{background:var(--gold-ink);color:#fff;border-radius:999px}
.brb .sv-plano__preco,.brb .sv-plano__moeda{color:var(--gold-ink)}
.brb .sv-btn-produto{background:var(--gold-ink);border-color:var(--gold-ink);color:#fff}
.brb .sv-btn-produto:hover{background:#6f5626}
.brb .sv-lead__form input,.brb .sv-lead__form textarea,.brb .sv-lead__form select{border-radius:9px;border:1px solid var(--line-l);background:#fff}
.brb .sv-lead__form input:focus,.brb .sv-lead__form textarea:focus{border-color:var(--gold);outline:2px solid rgba(200,161,90,.3)}

/* reveal */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
[data-rv].vis,[data-rv].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){[data-rv]{opacity:1;transform:none;transition:none}}

/* ── responsivo ───────────────────────────────────────────────────────────── */
@media(max-width:960px){
    .brb-hero{min-height:auto;padding-top:calc(var(--nav-h,72px) + 20px)}
    .brb-hero-bg img{object-position:68% center}
    .brb-strip-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.brb-strip-i:nth-child(3){border-left:0}.brb-strip-i:nth-child(n+3){border-top:1px solid var(--line-d)}
    .brb-grid4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .brb-grid3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .brb-soft{grid-template-columns:minmax(0,1fr);gap:34px}.brb-soft .brb-soft-copy{order:1}.brb-soft .brb-stage{order:2;max-width:560px;margin:0 auto;width:100%}
    .brb-app{grid-template-columns:minmax(0,1fr);gap:34px}.brb-app .brb-app-copy{order:1}.brb-app .brb-app-phones{order:2;max-width:440px;margin:0 auto}
    .brb-about{grid-template-columns:minmax(0,1fr);gap:34px}.brb-about .brb-about-media{order:-1}
}
@media(max-width:560px){
    .brb-strip-grid{grid-template-columns:minmax(0,1fr)}.brb-strip-i+.brb-strip-i{border-left:0;border-top:1px solid var(--line-d)}
    .brb-grid4,.brb-grid3{grid-template-columns:minmax(0,1fr)}
    .brb-btn{padding:14px 22px}
    .brb-hero h1{font-size:clamp(2.4rem,10vw,3.2rem)}
}

/* VATSE TRIAL POLICY V2: transparência da avaliação sob o CTA final. */
.brb-cta-nota{margin:14px 0 0;font-size:.8rem;line-height:1.55;color:rgba(255,255,255,.62);max-width:56ch}

/* ALVO DE TOQUE: os dois atalhos de demonstração do herói tinham 24px de
   altura. São links de texto, não botões, e o desenho deles é o certo para a
   página; o que faltava era área. A altura vem do espaço que a linha já tem. */
@media (max-width: 900px) {
    .brb-hero-demo a { min-height: 32px; }
    .brb-viewall { display: inline-flex; align-items: center; min-height: 32px; }
}