/* Visual clonado do linktr.ee/barbeariavilela (tema custom: fundo preto com blur,
   botao #1D1C1B pilula com sombra, texto branco). Base de todas as paginas. */
:root{
  --bg:#000;
  --btn:#1d1c1b;
  --btn-hover:#2a2826;
  --campo:#121110;
  --linha:rgba(255,255,255,.14);
  --text:#fff;
  --muted:rgba(255,255,255,.62);
  --ok:#25d366;
  --erro:#ff6b6b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased;
}
/* fundo "BLUR" do Linktree: o avatar ampliado e desfocado atras de tudo */
.fundo{position:fixed; inset:0; z-index:-1; overflow:hidden; background:#000}
.fundo::before{
  content:""; position:absolute; inset:-20%;
  background:url(../img/avatar.jpg) center/cover; filter:blur(70px) brightness(.35); opacity:.9;
}
.fundo::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 0%, #000 75%)}

.wrap{max-width:580px; margin:0 auto; padding:24px 16px 48px}

.topo{display:flex; justify-content:space-between; align-items:center; min-height:44px}
.icone-redondo{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer;
  text-decoration:none;
}

header{text-align:center; margin:10px 0 26px}
.avatar{width:96px; height:96px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 16px}
h1{margin:0; font-size:26px; font-weight:700; letter-spacing:-.2px}
.local{margin:8px 0 0; font-size:16px; font-weight:500}
.sociais{display:flex; justify-content:center; gap:20px; margin-top:18px}
.sociais a{color:#fff; display:grid; place-items:center; width:32px; height:32px}
.sociais svg{width:28px; height:28px}

.links{display:flex; flex-direction:column; gap:14px}

/* botao classico do Linktree: pilula, thumb redonda a esquerda, texto centralizado */
.btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:64px; padding:10px 64px; border-radius:999px;
  background:var(--btn); color:var(--text); text-decoration:none; text-align:center;
  font-size:16px; font-weight:500; line-height:1.3;
  box-shadow:0 10px 24px rgba(0,0,0,.55); transition:transform .15s, background .15s;
  border:0; width:100%; font-family:inherit; cursor:pointer;
}
.btn:hover{background:var(--btn-hover); transform:scale(1.015)}
.btn:active{transform:scale(.985)}
.btn .thumb{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  display:grid; place-items:center;
}
/* thumb de icone: circulo grafite (mesmo tom do logo) com o icone branco por cima */
.btn .thumb.icone{background:radial-gradient(circle at 30% 25%, #34312e 0%, #121110 70%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.btn .thumb svg{width:26px; height:26px}

/* cartoes (planos, informacoes, mapa) */
.card{background:var(--btn); border-radius:28px; box-shadow:0 10px 24px rgba(0,0,0,.55); overflow:hidden}
.planos{padding:14px}
.planos .grade{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.planos a{display:block; color:#fff; text-decoration:none}
.planos img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; display:block}
.planos .nome{font-size:12px; font-weight:600; margin-top:8px; line-height:1.3}
.planos .preco{font-size:13px; color:var(--muted); margin-top:2px}
.planos .rotulo{text-align:center; font-weight:600; margin-top:14px}
.planos .rotulo small{display:block; color:var(--muted); font-weight:400; font-size:13px; margin-top:2px}

details.card summary{list-style:none; cursor:pointer}
details.card summary::-webkit-details-marker{display:none}
details.card summary.btn{box-shadow:none}
.info{padding:4px 22px 22px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.88)}
.info h3{font-size:14px; letter-spacing:.5px; margin:18px 0 4px; color:#fff}
.info p{margin:0}

/* cartao de localizacao: mapa escuro + acoes (Waze principal) */
.local{padding:10px}
.mapa-dark{position:relative; display:block; height:190px; border-radius:20px; overflow:hidden; background:#1a1a1a}
.mapa-dark .tiles{position:absolute; inset:0; overflow:hidden}
.mapa-dark .tiles img{position:absolute; width:256px; height:256px; max-width:none; user-select:none;
  filter:invert(1) hue-rotate(180deg) grayscale(1) brightness(.85) contrast(1.1)}
.mapa-dark::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(29,28,27,.75) 100%)}
.pino{position:absolute; left:50%; top:50%; z-index:2; width:52px; height:52px; margin:-60px 0 0 -26px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.6)}
.pino img{position:absolute; inset:4px; width:44px; height:44px; border-radius:50%; object-fit:cover; transform:rotate(45deg)}
.pino::after{content:""; position:absolute; left:50%; top:50%; width:0; height:0}
.mapa-dark::before{content:""; position:absolute; left:50%; top:50%; z-index:1; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:rgba(255,255,255,.35); animation:pulso 2s ease-out infinite}
@keyframes pulso{from{transform:scale(1); opacity:1} to{transform:scale(4); opacity:0}}
@media (prefers-reduced-motion:reduce){.mapa-dark::before{animation:none}}
.credito{position:absolute; right:10px; bottom:6px; z-index:2; font-size:9px; color:rgba(255,255,255,.45)}
.local-info{padding:14px 8px 6px; text-align:center}
.local-info .rotulo{font-weight:600}
.local-info .end{color:var(--muted); font-size:14px; line-height:1.45; margin-top:4px}
.acoes{display:flex; gap:8px; margin-top:14px}
.acao{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 14px;
  border-radius:999px; text-decoration:none; font-size:15px; font-weight:600; color:#fff; background:rgba(255,255,255,.1)}
.acao.principal{flex:1.4; background:#fff; color:#000}
.acao svg{width:20px; height:20px}

footer{margin-top:36px; text-align:center; color:rgba(255,255,255,.4); font-size:12px}

/* ===== paginas do meio (formulario) ===== */
.intro{text-align:center; margin:6px 0 22px}
.intro .foto{width:112px; height:112px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 16px; box-shadow:0 10px 24px rgba(0,0,0,.55)}
.intro .selo{
  display:inline-block; padding:5px 12px; border-radius:999px; margin-bottom:12px;
  background:rgba(255,255,255,.1); font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
}
.intro h1{font-size:25px; line-height:1.2}
.intro p{margin:10px auto 0; max-width:420px; color:var(--muted); font-size:15px; line-height:1.5}

form.card, .sucesso.card{padding:22px 18px}
.campo{margin-bottom:18px}
.campo > label, .campo > .rotulo-campo{display:block; font-size:14px; font-weight:600; margin:0 0 8px 4px}
.campo small.dica{display:block; color:var(--muted); font-size:12px; margin:6px 0 0 4px}
.campo input[type=text], .campo input[type=tel]{
  width:100%; height:54px; padding:0 20px; border-radius:999px;
  background:var(--campo); border:1px solid var(--linha); color:#fff;
  font:500 16px Inter, system-ui, sans-serif; outline:none; transition:border-color .15s;
}
.campo input::placeholder{color:rgba(255,255,255,.35)}
.campo input:focus{border-color:rgba(255,255,255,.5)}
.campo.com-erro input{border-color:var(--erro)}
.campo .msg-erro{display:none; color:var(--erro); font-size:13px; margin:6px 0 0 4px}
.campo.com-erro .msg-erro{display:block}

/* chips de escolha (dia, periodo, plano) */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute; opacity:0; pointer-events:none}
.chips span{
  display:block; padding:11px 16px; border-radius:999px; min-width:64px; text-align:center;
  background:var(--campo); border:1px solid var(--linha); font-size:14px; font-weight:500; line-height:1.2;
  transition:background .15s, border-color .15s, color .15s;
}
.chips span b{display:block; font-size:12px; font-weight:500; color:var(--muted); margin-top:2px}
.chips input:checked + span{background:#fff; color:#000; border-color:#fff}
.chips input:checked + span b{color:rgba(0,0,0,.6)}
.chips input:focus-visible + span{outline:2px solid #fff; outline-offset:2px}

/* escolha de plano com imagem */
.escolha-plano{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.escolha-plano label{cursor:pointer; display:block}
.escolha-plano input{position:absolute; opacity:0; pointer-events:none}
.escolha-plano .opcao{
  display:block; padding:8px; border-radius:20px; background:var(--campo);
  border:2px solid transparent; transition:border-color .15s;
}
.escolha-plano img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; display:block}
.escolha-plano .nome{display:block; font-size:13px; font-weight:600; margin:8px 4px 0}
.escolha-plano .det{display:block; font-size:12px; color:var(--muted); margin:2px 4px 4px}
.escolha-plano input:checked + .opcao{border-color:#fff}

.enviar{
  width:100%; min-height:60px; border:0; border-radius:999px; cursor:pointer;
  background:#fff; color:#000; font:700 16px Inter, system-ui, sans-serif;
  box-shadow:0 10px 24px rgba(0,0,0,.55); transition:transform .15s, opacity .15s;
}
.enviar:active{transform:scale(.985)}
.enviar[disabled]{opacity:.6; cursor:wait}
.garantia{text-align:center; color:var(--muted); font-size:12px; margin:12px 0 0}

.sucesso{text-align:center; display:none}
.sucesso .check{
  width:64px; height:64px; border-radius:50%; margin:4px auto 14px; display:grid; place-items:center;
  background:rgba(37,211,102,.14); color:var(--ok);
}
.sucesso h2{margin:0 0 8px; font-size:21px}
.sucesso p{margin:0 0 18px; color:var(--muted); font-size:15px; line-height:1.5}
.sucesso .btn{min-height:56px}

.voltar-links{display:block; text-align:center; color:var(--muted); font-size:14px; margin-top:22px; text-decoration:none}