/* "Cadastrar meu comércio": balão com 2 opções + formulário de visita.
   Carregado depois do CSS da página (home.css / ponto.css) e usa as variáveis dela. */

/* ---------- balão ---------- */
.cta-wrap{position:relative;display:inline-block}
.anuncie-txt .cta-wrap{margin-top:22px}
.anuncie-free+.cta-wrap{margin-top:16px}
.anuncie-fim.cta-wrap{display:block}
@media(min-width:860px){.anuncie-fim.cta-wrap{display:none}}   /* na tela larga só o botão de cima */
.cta-wrap .btn{margin-top:0}
.cta-trigger{width:100%}
.cta-seta{transition:transform .15s}
.cta-trigger[aria-expanded="true"] .cta-seta{transform:rotate(180deg)}

.cta-menu{position:absolute;left:0;top:calc(100% + 10px);z-index:50;display:flex;flex-direction:column;gap:4px;
  width:min(340px,calc(100vw - 32px));padding:8px;border:1px solid var(--linha);border-radius:16px;background:#fff;color:var(--ink);
  box-shadow:0 16px 40px rgba(15,23,42,.28)}
.cta-menu[hidden]{display:none}
.anuncie-fim .cta-menu{width:100%}
.cta-menu::before{content:"";position:absolute;top:-7px;left:28px;width:12px;height:12px;background:#fff;
  border-left:1px solid var(--linha);border-top:1px solid var(--linha);transform:rotate(45deg)}
.cta-wrap.up .cta-menu{top:auto;bottom:calc(100% + 10px)}
.cta-wrap.up .cta-menu::before{top:auto;bottom:-7px;border:0;border-right:1px solid var(--linha);border-bottom:1px solid var(--linha)}

.cta-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 12px;border:0;border-radius:12px;background:none;
  color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.cta-opt:hover,.cta-opt:focus-visible{background:var(--azul-suave)}
.cta-opt svg{flex:none;color:var(--azul)}
.cta-opt b{display:block;font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.cta-opt small{display:block;color:var(--mudo);font-size:.82rem;line-height:1.35}

/* ---------- formulário (janela) ---------- */
.vis-dlg{width:min(480px,calc(100vw - 24px));height:fit-content;max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);padding:0;border:0;border-radius:20px;background:#fff;color:var(--ink);
  box-shadow:0 24px 64px rgba(15,23,42,.4);overflow:hidden}
.vis-dlg :focus-visible{outline-color:var(--azul)}
.vis-dlg::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.vis-box{display:flex;flex-direction:column;max-height:calc(100svh - 24px)}
.vis-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 8px}
.vis-top h2{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.vis-top p{margin:.3em 0 0;color:var(--mudo);font-size:.92rem}
.vis-x{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:-6px -8px 0 0;border:0;border-radius:12px;background:none;color:var(--ink2);cursor:pointer}
.vis-x:hover{background:var(--bg)}
.vis-form{display:grid;gap:16px;padding:8px 20px 20px;overflow-y:auto}
.vis-f{display:grid;gap:6px}
.vis-f>label,.vis-f>.vis-lbl{font-size:.88rem;font-weight:700;color:var(--ink)}
.vis-f .opc{font-weight:500;color:var(--mudo)}
.vis-f input[type=text],.vis-f input[type=tel],.vis-f textarea{width:100%;min-height:46px;padding:.6em .8em;border:1px solid var(--linha);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:1rem}
.vis-f textarea{resize:none;min-height:76px}
.vis-f input:focus,.vis-f textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.vis-f input[aria-invalid=true]{border-color:#dc2626}
.vis-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vis-chips.t2{grid-template-columns:repeat(2,1fr)}
.vis-chip{min-height:44px;padding:.4em .3em;border:1px solid var(--linha);border-radius:12px;background:#fff;color:var(--ink2);font:600 .85rem/1.2 var(--font);cursor:pointer}
.vis-chip small{display:block;font-weight:500;color:var(--mudo);font-size:.75rem}
.vis-chip:hover{background:var(--bg)}
.vis-chip:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through;background:var(--bg)}
.vis-aviso{grid-column:1/-1;margin:0;color:var(--mudo);font-size:.9rem}
.vis-chip[aria-pressed=true]{border-color:var(--azul);background:var(--azul-suave);color:var(--azul-h)}
.vis-ok{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink2)}
.vis-ok input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--azul)}
.vis-err{margin:0;padding:10px 12px;border:1px solid #fecaca;border-radius:12px;background:#fef2f2;color:#991b1b;font-size:.9rem}
.vis-err:empty{display:none}
.vis-acoes{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.vis-acoes .btn{min-width:120px}
.vis-acoes .btn.alt{color:var(--ink2)}
.vis-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.vis-fim{display:grid;gap:12px;justify-items:center;padding:28px 20px 24px;text-align:center}
.vis-fim .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#dcfce7;color:#15803d}
.vis-fim h2{margin:0;font-size:1.25rem;font-weight:800}
.vis-fim p{margin:0;color:var(--ink2)}
@media(max-width:380px){.vis-chips{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:no-preference){.vis-dlg[open]{animation:visIn .18s ease-out}@keyframes visIn{from{opacity:0;transform:translateY(10px)}}}

/* ---------- "Fale com a gente" (home e página de ponto turístico) ---------- */
.fale{padding:0 0 56px}
.fale h2{margin-bottom:.35em;font-size:clamp(1.5rem,4.5vw,2.1rem);font-weight:800;line-height:1.15;letter-spacing:-.025em}
.fale .sub{max-width:60ch;color:var(--mudo)}
.fale-grid{display:grid;gap:12px;margin:20px 0 0;padding:0;list-style:none}
@media(min-width:760px){.fale-grid{grid-template-columns:repeat(3,1fr)}}
.fale-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;border:1px solid var(--linha);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.fale-card .ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:12px;background:var(--azul-suave);color:var(--azul)}
.fale-card h3{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.fale-card p{margin:0 0 12px;color:var(--ink2);font-size:.92rem}
.fale-card .btn{margin-top:auto}
.fale-sub{margin:30px 0 0;font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.fale-faq{display:grid;gap:8px;max-width:760px;margin-top:12px}
.fale-faq details{border:1px solid var(--linha);border-radius:14px;background:#fff}
.fale-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px;border-radius:14px;font-weight:700;letter-spacing:-.01em;cursor:pointer;list-style:none}
.fale-faq summary::-webkit-details-marker{display:none}
.fale-faq summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--mudo);border-bottom:2px solid var(--mudo);transform:rotate(45deg);transition:transform .15s}
.fale-faq details[open] summary::after{transform:rotate(225deg)}
.fale-faq summary:hover{background:var(--azul-suave)}
.fale-faq p{margin:0;padding:0 16px 14px;color:var(--ink2);font-size:.92rem}

/* ---------- Acesso de quem já tem loja ----------
   O painel é o mesmo endereço para cadastrar e para entrar (login com Google), mas tudo no site dizia
   "Cadastrar". Estes estilos mostram a porta de entrada para o comerciante que já tem loja. */
/* "Para comerciantes" na barra do topo (home e ponto): balão alinhado à direita, para não sair da tela */
.bar .cta-wrap.bar-link{display:none}   /* no celular o balão não cabe na barra: lá entra o botão direto "Anunciar" (.bar-mob) */
@media(min-width:640px){.bar .cta-wrap.bar-link{display:inline-block}}
/* Celular: botão "Anunciar" sempre visível na barra do topo, em azul para se destacar; vai para /anuncie.
   Para abrir espaço, o "Explorar" da home some em telas muito estreitas (a capa já tem "Ver pontos turísticos")
   e a busca da página do ponto vira só a lupa (o texto continua para leitores de tela, no aria-label). */
.bar .bar-mob{display:inline-flex;white-space:nowrap}
@media(min-width:640px){.bar .bar-mob{display:none}}
@media(max-width:399px){.bar .bar-expl{display:none}}
@media(max-width:639px){.bar .bar-txt{display:none}.bar #topSearch{padding-inline:.7em}}
.bar .cta-wrap .cta-trigger{gap:4px}
.cta-menu.dir{left:auto;right:0}
.cta-menu.dir::before{left:auto;right:28px}
/* opção "Já tenho loja" separada das opções de cadastro */
.cta-sep{position:relative;margin-top:9px}
.cta-sep::before{content:"";position:absolute;top:-7px;left:12px;right:12px;border-top:1px solid var(--linha)}
/* linha embaixo do "Saiba como anunciar" (faixa escura), visível também no celular */
.anuncie-entrar{margin:14px 0 0;color:rgba(255,255,255,.82);font-size:.95rem}
.anuncie-entrar a{display:inline-block;padding:6px 0;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.anuncie-entrar a:hover{text-decoration-thickness:2px}