/* mapa.pantmarketing.com · Negócio no Mapa · rascunho de 23/10/2026, nada publicado.
   Identidade da Pant: azul #123274, laranja #F59C00, Montserrat (tokens iguais aos da página B2B).
   Direção: "mapa e placa na avenida". Fundo de papel de mapa claro, ruas brancas, a avenida em laranja-claro.
   Os números do resultado são placas de serviço (azul com filete branco, como as placas de rua do Brasil).
   Cor com sentido: verde = já está entre os 3; laranja = precisa rolar; vermelho = longe. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
             src: url("../fontes/montserrat-latin.woff2") format("woff2");
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Arial com as medidas da Montserrat: a troca de fonte não empurra o texto (CLS). */
@font-face { font-family: "Montserrat Reserva"; src: local("Arial"); size-adjust: 112.5%; ascent-override: 85%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --azul: #123274; --azul-950: #071533; --azul-900: #0A1D45; --azul-800: #0F2A63; --azul-600: #2A55A8; --azul-100: #DCE5F5; --azul-50: #EEF2FA;
  --laranja: #F59C00; --laranja-claro: #FFAD1F; --laranja-texto: #8F5400; --laranja-100: #FFE6B8; --laranja-50: #FFF5E3;
  --tinta: #16233D; --suave: #4F5B73; --apagado: #6B7489; --linha: #DCE3EE; --linha-forte: #C3CDDD;
  --papel: #FFFFFF;
  /* mapa */
  --mapa: #F4F2EC; --mapa-quadra: #ECE8DE; --mapa-rua: #FFFFFF; --mapa-parque: #DCEAD2; --mapa-avenida: #FFE2A6;
  /* sentido */
  --verde: #17663B; --verde-50: #E6F4EC; --vermelho: #A8261B; --vermelho-50: #FDECEA; --erro: #B42318;
  --pele: #F0C39C; --pele-escura: #D9A47A;

  --fonte: "Montserrat", "Montserrat Reserva", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-hero: clamp(1.9rem, 1.15rem + 3.2vw, 3.45rem);
  --t-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  --t-h3: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --t-abertura: clamp(1.08rem, 1rem + .5vw, 1.32rem);
  --t-corpo: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --t-numero: clamp(2.5rem, 1.7rem + 3.4vw, 3.9rem);
  --raio: 16px; --raio-sm: 10px; --raio-pilula: 999px;
  --sombra-1: 0 1px 2px rgba(18, 50, 116, .08);
  --sombra-2: 0 28px 60px -34px rgba(18, 50, 116, .55);
  --espaco-secao: clamp(3.25rem, 2rem + 5.5vw, 6.5rem);
  --largura: 1140px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --rapido: 160ms;
  --normal: 300ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body { margin: 0; font-family: var(--fonte); font-size: var(--t-corpo); line-height: 1.62; color: var(--tinta); background: var(--mapa);
       -webkit-font-smoothing: antialiased; overflow-wrap: break-word; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; color: var(--azul); font-weight: 800; line-height: 1.12; letter-spacing: -.022em; }
h1 { font-size: var(--t-hero); text-wrap: balance; }
h2 { font-size: var(--t-h2); text-wrap: balance; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }
a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--azul-600); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
.conteudo { width: min(var(--largura), 100% - 2.5rem); margin-inline: auto; }
@media (max-width: 360px) { .conteudo { width: calc(100% - 2rem); } }

/* Versões do topo. Sem script: padrão de São José. */
html[data-regiao="sp"] [data-r="sjc"], html:not([data-regiao="sp"]) [data-r="sp"] { display: none !important; }
html:not([data-tipo="pilates"]) [data-t="pilates"], html:not([data-tipo="barbearia"]) [data-t="barbearia"],
html:not([data-tipo="oficina"]) [data-t="oficina"], html:not([data-tipo="estetica"]) [data-t="estetica"],
html:not([data-tipo="petshop"]) [data-t="petshop"],
html[data-tipo="pilates"] [data-t="padrao"], html[data-tipo="barbearia"] [data-t="padrao"], html[data-tipo="oficina"] [data-t="padrao"],
html[data-tipo="estetica"] [data-t="padrao"], html[data-tipo="petshop"] [data-t="padrao"] { display: none !important; }

.pular { position: absolute; left: 1rem; top: -100px; z-index: 50; padding: .75rem 1rem; border-radius: 8px; background: var(--azul-900); color: #fff; font-weight: 700; }
.pular:focus { top: 1rem; color: #fff; }

/* BOTÕES */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 54px; padding: .95rem 1.6rem; border: 0;
         border-radius: var(--raio-pilula); background: var(--laranja); color: var(--azul-900); font: 800 1rem/1.2 var(--fonte); letter-spacing: -.005em;
         text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 12px 26px -14px rgba(200, 126, 0, .8), inset 0 -2px 0 rgba(0, 0, 0, .08);
         transition: transform var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease), background-color var(--rapido); }
.botao::after { content: ""; flex: none; width: .5rem; height: .5rem; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor;
                transform: rotate(45deg); transition: transform var(--rapido) var(--ease); }
@media (hover: hover) {
  .botao:hover { background: var(--laranja-claro); color: var(--azul-900); transform: translateY(-2px); box-shadow: 0 18px 32px -16px rgba(200, 126, 0, .9); }
  .botao:hover::after { transform: translateX(3px) rotate(45deg); }
}
.botao:active { transform: translateY(0) scale(.99); }
.botao:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.botao[disabled] { opacity: .65; cursor: progress; transform: none; }
.botao--largo { width: 100%; }
.link-botao { padding: .4rem .1rem; border: 0; background: none; color: var(--azul); font: 600 .93rem/1.4 var(--fonte); text-decoration: underline;
              text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
.link-botao:hover { color: var(--azul-600); text-decoration-thickness: 2px; }
.voltar { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; padding: .35rem 0; border: 0; background: none; color: var(--suave);
          font: 600 .88rem/1.3 var(--fonte); cursor: pointer; }
.voltar::before { content: ""; width: .45rem; height: .45rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.voltar:hover { color: var(--azul); }

/* CABEÇALHO */
.cabecalho { position: relative; z-index: 2; padding-block: .9rem; background: var(--papel); border-bottom: 1px solid var(--linha); }
.cabecalho .conteudo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cabecalho img { width: 140px; }
.cabecalho__link { padding: .45rem .9rem; border: 2px solid var(--azul); border-radius: var(--raio-pilula); font-weight: 700; font-size: .86rem; text-decoration: none;
                   white-space: nowrap; transition: background-color var(--rapido), color var(--rapido); }
.cabecalho__link:hover { background: var(--azul); color: #fff; }
@media (min-width: 720px) { .cabecalho img { width: 164px; } }
@media (max-width: 359px) { .cabecalho__link { font-size: .78rem; padding: .4rem .7rem; } .cabecalho img { width: 120px; } }

/* 1 · TOPO: papel de mapa com quadras, ruas brancas e uma avenida laranja na diagonal. */
.topo { position: relative; overflow: hidden; padding-top: clamp(2rem, 1rem + 4vw, 4.25rem); padding-bottom: clamp(6rem, 4rem + 6vw, 9rem);
        background-color: var(--mapa-quadra);
        background-image:
          repeating-linear-gradient(0deg, var(--mapa-rua) 0 7px, transparent 7px 132px),
          repeating-linear-gradient(90deg, var(--mapa-rua) 0 7px, transparent 7px 168px); }
.topo::before { content: ""; position: absolute; left: -20%; right: -20%; top: 58%; height: 54px; transform: rotate(-14deg);
                background: var(--mapa-avenida); box-shadow: 0 0 0 5px rgba(255, 255, 255, .8);
                background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .95) 0 22px, transparent 22px 44px);
                background-size: 100% 3px; background-position: 0 50%; background-repeat: no-repeat; pointer-events: none; }
.topo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               background: linear-gradient(90deg, rgba(244, 242, 236, .97) 0%, rgba(244, 242, 236, .93) 46%, rgba(244, 242, 236, .35) 72%, rgba(244, 242, 236, .1) 100%); }
@media (max-width: 959px) { .topo::after { background: linear-gradient(180deg, rgba(244, 242, 236, .96) 0%, rgba(244, 242, 236, .93) 55%, rgba(244, 242, 236, .55) 100%); } }
.topo__grade { position: relative; z-index: 1; display: grid; gap: 2.25rem; }
@media (min-width: 960px) { .topo__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 3rem; } }
.topo__linha { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.25rem; padding: .35rem .8rem .35rem .55rem; border-radius: var(--raio-pilula);
               background: var(--papel); box-shadow: var(--sombra-1); font-size: .8rem; font-weight: 700; line-height: 1.35; color: var(--azul); }
.topo__linha::before { content: ""; flex: none; width: .7rem; height: .7rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--laranja); }
.topo__abertura { max-width: 40rem; margin-bottom: 1.4rem; padding-left: 1rem; border-left: 4px solid var(--laranja); }
.topo__abertura p { margin: 0; font-size: var(--t-abertura); font-weight: 500; line-height: 1.5; color: var(--tinta); }
.topo__abertura .topo__igual { margin-top: .45rem; font-weight: 800; color: var(--azul); }
.topo h1 { max-width: 20ch; margin-bottom: 1.15rem; }
.topo__sub { max-width: 46ch; margin: 0 0 1.5rem; font-size: clamp(1rem, .97rem + .3vw, 1.15rem); line-height: 1.6; color: var(--suave); }
.topo__chamada { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.02rem; line-height: 1.35; color: var(--azul-900); text-decoration: none; }
.topo__chamada::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--laranja)
                        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1D45' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
                        transition: transform var(--rapido) var(--ease); }
.topo__chamada:hover { color: var(--azul); }
.topo__chamada:hover::after { transform: translateY(3px); }

.topo__figura { margin: 0; justify-self: center; width: min(100%, 330px); }
.topo__figura figcaption { margin-top: .9rem; padding: .55rem .8rem; border-radius: var(--raio-sm); background: rgba(255, 255, 255, .85);
                           font-size: .82rem; line-height: 1.45; color: var(--suave); text-align: center; }
@media (max-width: 959px) { .topo__figura { width: min(100%, 290px); } }

/* Celular desenhado */
.celular { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(10, 29, 69, .28)); }
.celular__corpo { fill: var(--azul-900); }
.celular__tela { fill: #fff; }
.celular__entalhe { fill: var(--azul-900); }
.celular__busca { fill: #F2F4F8; stroke: var(--linha); stroke-width: 1.5; }
.celular__lupa { fill: none; stroke: var(--suave); stroke-width: 2.2; stroke-linecap: round; }
.celular__busca-texto { font: 600 11px var(--fonte); fill: var(--tinta); }
.mapa__quadra { fill: var(--mapa-quadra); }
.mapa__parque { fill: var(--mapa-parque); }
.mapa__rua { fill: none; stroke: #fff; stroke-width: 9; }
.mapa__avenida { fill: none; stroke: var(--mapa-avenida); stroke-width: 18; }
.mapa__avenida-faixa { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 10 9; }
.mapa__pino path { fill: var(--azul); stroke: #fff; stroke-width: 2.5; }
.mapa__pino text { font: 800 13px var(--fonte); fill: #fff; }
.mapa__pino--1 path { fill: var(--laranja); }
.mapa__pino--1 text { fill: var(--azul-900); }
.item__fundo { fill: #fff; stroke: var(--linha); stroke-width: 1.5; }
.item__nome { font: 700 12.5px var(--fonte); fill: var(--azul-900); }
.item__nota { font: 700 11.5px var(--fonte); fill: var(--tinta); }
.item__estrelas { fill: var(--laranja); }
.item__aval { font: 500 11px var(--fonte); fill: var(--suave); }
.item__ligar { fill: #fff; stroke: var(--azul); stroke-width: 1.8; }
.item__ligar--ativo { fill: var(--azul); }
.item__ligar-texto { font: 700 11.5px var(--fonte); fill: var(--azul); }
.item__ligar-texto--ativo { fill: #fff; }
.toque { fill: none; stroke: var(--laranja); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.toque--1 { animation: toque 2.4s var(--ease) infinite; }
.toque--2 { animation: toque 2.4s var(--ease) 1.2s infinite; }
@keyframes toque { 0% { opacity: .9; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(2.2); } }
@media (prefers-reduced-motion: reduce) { .toque--2 { display: none; } .toque--1 { opacity: .8; } }
.dedo__pele { fill: var(--pele); stroke: var(--pele-escura); stroke-width: 1.5; }
.dedo__unha { fill: #F8DCC6; stroke: var(--pele-escura); stroke-width: 1; }
.dedo__dobra { fill: none; stroke: var(--pele-escura); stroke-width: 1.6; stroke-linecap: round; }

/* 2 · DIAGNÓSTICO: a placa sobe por cima da avenida do topo. */
.diag { position: relative; z-index: 3; margin-top: clamp(-5.5rem, -3.5rem - 3vw, -3.75rem); padding-bottom: var(--espaco-secao); scroll-margin-top: 0; }
.placa { position: relative; max-width: 860px; margin-inline: auto; padding: clamp(1.4rem, .9rem + 2.4vw, 2.75rem);
         border: 3px solid var(--azul); border-radius: 22px; background: var(--papel); box-shadow: 10px 10px 0 var(--azul), var(--sombra-2); }
@media (max-width: 480px) { .placa { box-shadow: 6px 6px 0 var(--azul), var(--sombra-2); } .diag .conteudo { width: calc(100% - 2.25rem); } }
.placa__rotulo { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-size: .76rem; font-weight: 800; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--laranja-texto); }
.pino-mini { width: .75rem; height: .75rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--laranja); }
.tela__titulo { font-size: clamp(1.4rem, 1.05rem + 1.7vw, 2.15rem); margin-bottom: 1.4rem; }
.tela__nota { margin: 1.2rem 0 0; font-size: .9rem; color: var(--suave); }
.tela__form { display: grid; gap: .55rem; }
.tela__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: .9rem; }
@media (max-width: 480px) { .tela__acoes .botao { width: 100%; } }
.tela > p { max-width: 62ch; }

.respostas { display: grid; gap: .75rem; }
@media (min-width: 640px) { .respostas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.resposta { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 64px; padding: .9rem 1rem; border: 2px solid var(--azul);
            border-radius: 14px; background: var(--azul-50); color: var(--azul-900); font: 800 1.05rem/1.25 var(--fonte); cursor: pointer;
            transition: background-color var(--rapido), color var(--rapido), transform var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease); }
.resposta svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.resposta__traco { stroke: var(--laranja-texto); stroke-width: 2.4; }
@media (hover: hover) { .resposta:hover { background: var(--azul); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 24px -16px rgba(18, 50, 116, .9); }
                        .resposta:hover .resposta__traco { stroke: var(--laranja); } }
.resposta:active { transform: scale(.98); }
.resposta:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }

/* Campos */
.campo { display: grid; gap: .45rem; }
.campo__rotulo { font-weight: 700; font-size: 1rem; color: var(--azul-900); }
.campo__rotulo--grande { font-size: 1.1rem; margin-bottom: .7rem; padding: 0; }
.campo__entrada { width: 100%; min-height: 54px; padding: .8rem 1rem; border: 2px solid var(--linha-forte); border-radius: 12px; background: #fff;
                  color: var(--tinta); font: 500 1.02rem/1.3 var(--fonte); transition: border-color var(--rapido), box-shadow var(--rapido); }
.campo__entrada::placeholder { color: #7A8395; }
.campo__entrada:hover { border-color: var(--azul-600); }
.campo__entrada:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(245, 156, 0, .45); }
.campo__entrada[aria-invalid="true"] { border-color: var(--erro); }
select.campo__entrada { appearance: none; padding-right: 2.6rem; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123274' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 18px no-repeat; }
.campo__ajuda { margin: 0; font-size: .88rem; color: var(--suave); }
.aviso { margin: 0; font-size: .9rem; font-weight: 600; color: var(--erro); }
.aviso:empty { display: none; }
.aviso--geral { padding: .7rem .9rem; border-radius: 10px; background: var(--vermelho-50); }
.respostas + .aviso { margin-top: 1rem; }

/* Combobox */
.combo { position: relative; }
.combo__caixa { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10; overflow: hidden; border: 2px solid var(--azul); border-radius: 12px;
                background: #fff; box-shadow: 0 20px 40px -20px rgba(10, 29, 69, .5); }
.combo__lista { list-style: none; max-height: 18rem; overflow-y: auto; margin: 0; padding: .3rem; }
.combo__item { display: grid; gap: .1rem; padding: .65rem .75rem; border-radius: 8px; cursor: pointer; }
.combo__item[aria-selected="true"], .combo__item:hover { background: var(--azul-50); box-shadow: inset 3px 0 0 var(--laranja); }
.combo__principal { font-weight: 700; color: var(--azul-900); line-height: 1.3; }
.combo__secundario { font-size: .84rem; color: var(--suave); line-height: 1.35; }
.combo__fonte { margin: 0; padding: .4rem .9rem .55rem; border-top: 1px solid var(--linha); font-size: .74rem; color: var(--apagado); text-align: right; }

/* Tipos (2B) */
.tipos { margin: 0 0 .6rem; padding: 0; border: 0; min-width: 0; }
.tipos__opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem; border: 2px solid var(--linha-forte); border-radius: var(--raio-pilula);
             background: #fff; font-weight: 700; font-size: .93rem; color: var(--azul-900); transition: border-color var(--rapido), background-color var(--rapido), color var(--rapido); }
.chip:hover span { border-color: var(--azul); }
.chip input:checked + span { border-color: var(--azul); background: var(--azul); color: #fff; }
.chip input:checked + span::before { content: ""; width: .5rem; height: .85rem; margin: -.2rem .55rem 0 -.1rem; border-right: 2.5px solid var(--laranja); border-bottom: 2.5px solid var(--laranja); transform: rotate(40deg); }
.chip input:focus-visible + span { outline: 3px solid var(--laranja); outline-offset: 3px; }
.atalhos { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .25rem; }
.atalho { min-height: 40px; padding: .4rem .85rem; border: 1.5px dashed var(--azul-600); border-radius: var(--raio-pilula); background: var(--azul-50); color: var(--azul);
          font: 700 .86rem/1.2 var(--fonte); cursor: pointer; transition: background-color var(--rapido), color var(--rapido); }
.atalho:hover { background: var(--azul); color: #fff; border-style: solid; }

/* Carregando: radar sobre o pino */
.tela--carregando { display: flex; align-items: center; gap: 1.4rem; min-height: 12rem; }
.tela--carregando[hidden] { display: none !important; }
.radar { position: relative; flex: none; width: 76px; height: 76px; }
.radar span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--laranja); opacity: 0; animation: radar 1.8s var(--ease) infinite; }
.radar span:nth-child(2) { animation-delay: .9s; }
.radar .radar__pino { inset: 22px; border: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--azul); opacity: 1; animation: none; }
@keyframes radar { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .radar span:not(.radar__pino) { opacity: .5; transform: none; } }
.carregando__linhas p { margin: 0 0 .35rem; font-weight: 700; font-size: 1.08rem; color: var(--azul-900); }
.carregando__linhas p + p { color: var(--suave); font-weight: 600; }

/* RESULTADO */
.res__linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: -.6rem 0 1.5rem; color: var(--suave); }
.res__linha .link-botao { font-size: .92rem; }
.placas { display: grid; gap: .8rem; margin: 0 0 2rem; padding: 0; list-style: none; }
@media (min-width: 640px) { .placas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .placas--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.placa-num { position: relative; display: grid; align-content: start; gap: .35rem; padding: 1.15rem 1.15rem 1.2rem; border-radius: 14px; background: var(--azul); color: #fff;
             outline: 2px solid rgba(255, 255, 255, .92); outline-offset: -8px; }
.placa-num__valor { font-size: var(--t-numero); font-weight: 800; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.placa-num__valor small { font-size: .45em; letter-spacing: 0; margin-left: .12em; }
.placa-num__estrela { color: var(--laranja); }
.placa-num__legenda { font-size: .88rem; font-weight: 600; line-height: 1.4; color: #DCE5F5; }
.placa-num--forte { background: var(--verde); }
.placa-num--media { background: var(--laranja); color: var(--azul-950); outline-color: rgba(10, 29, 69, .55); }
.placa-num--media .placa-num__legenda { color: var(--azul-900); }
.placa-num--fraca { background: var(--vermelho); }
.placa-num--fraca .placa-num__legenda, .placa-num--forte .placa-num__legenda { color: #fff; }
.placa-num--longe .placa-num__valor { font-size: calc(var(--t-numero) * .62); line-height: 1.1; }

.res__intertitulo { margin: 0 0 .9rem; font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); }
.ranking { list-style: none; display: grid; gap: .55rem; margin: 0 0 1rem; padding: 0; }
.ranking__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem .9rem; padding: .8rem 1rem; border: 1.5px solid var(--linha);
                 border-radius: 14px; background: #fff; }
.ranking__pos { grid-row: span 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--azul); }
.ranking__pos span { transform: rotate(45deg); color: #fff; font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; }
.ranking__nome { font-weight: 800; color: var(--azul-900); line-height: 1.3; }
.ranking__dados { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: 0; font-size: .9rem; color: var(--suave); }
.ranking__dados div { display: flex; gap: .3rem; }
.ranking__dados dt { font-weight: 500; }
.ranking__dados dd { margin: 0; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ranking__item--voce { border: 2.5px solid var(--laranja); background: var(--laranja-50); }
.ranking__item--voce .ranking__pos { background: var(--laranja); }
.ranking__item--voce .ranking__pos span { color: var(--azul-950); }
.ranking__voce { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: var(--raio-pilula); background: var(--azul); color: #fff; font-size: .74rem; font-weight: 700; vertical-align: .12em; }
.estrela-txt { color: var(--laranja-texto); }

.atribuicao { margin: .2rem 0 1.8rem; font-size: .8rem; line-height: 1.5; color: var(--apagado); }
.atribuicao__marca { font-weight: 600; color: #5E5E5E; }

.frase { margin: 0 0 1.8rem; padding: 1.2rem 1.25rem; border-left: 6px solid var(--azul); border-radius: 0 14px 14px 0; background: var(--azul-50); }
.frase h3 { margin-bottom: .6rem; font-size: clamp(1.1rem, 1rem + .7vw, 1.4rem); color: var(--azul-900); }
.frase p { color: var(--tinta); }
.frase--forte { border-left-color: var(--verde); background: var(--verde-50); }
.frase--media { border-left-color: var(--laranja); background: var(--laranja-50); }
.frase--fraca { border-left-color: var(--vermelho); background: var(--vermelho-50); }

.pesa { margin: 0 0 2rem; }
.pesa__lista { list-style: none; display: grid; gap: .55rem; margin: .8rem 0 0; padding: 0; }
.pesa__lista li { position: relative; padding: .85rem 1rem .85rem 2.9rem; border: 1.5px solid var(--linha); border-radius: 12px; background: #fff; line-height: 1.5; }
.pesa__lista li::before { content: counter(list-item); position: absolute; left: .85rem; top: .85rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem;
                          border-radius: 50%; background: var(--azul); color: #fff; font-size: .78rem; font-weight: 800; }
.pesa__lista strong { color: var(--azul-900); }

.chamada-res { padding: 1.4rem 1.3rem; border-radius: 16px; background: var(--azul-900); color: #fff; }
.chamada-res h3 { color: #fff; margin-bottom: .55rem; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }
.chamada-res p { color: #D5DDEE; }
.chamada-res .botao { margin-top: .4rem; }
.chamada-res .botao:focus-visible { outline-color: #fff; }
.chamada-res__nota { margin: .8rem 0 0; font-size: .88rem; }
.chamada-res--fora { background: var(--laranja-50); color: var(--tinta); border: 2px solid var(--laranja); }
.chamada-res--fora p { color: var(--tinta); }
.res__outro { margin-top: 1.4rem; }
.trocar { margin: 0 0 1.6rem; padding: 1.1rem; border: 2px dashed var(--azul-600); border-radius: 14px; background: var(--azul-50); }
.trocar .tela__acoes { margin-top: .6rem; }

/* Obrigado (aparece no alto da placa) */
.obrigado { margin-bottom: 1.8rem; padding: 1.3rem 1.3rem 1.3rem 4rem; position: relative; border-radius: 16px; background: var(--verde-50); border: 2px solid var(--verde); }
.obrigado::before { content: ""; position: absolute; left: 1.2rem; top: 1.25rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--verde)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.obrigado h2 { margin-bottom: .45rem; font-size: clamp(1.2rem, 1.05rem + .8vw, 1.55rem); color: var(--verde); }
.obrigado:focus { outline: none; }

/* 3 · FORMULÁRIO */
.formulario { padding-bottom: var(--espaco-secao); scroll-margin-top: 1rem; }
.formulario__cartao { display: grid; gap: 1.6rem; max-width: 860px; margin-inline: auto; padding: clamp(1.4rem, .9rem + 2.4vw, 2.6rem); border-radius: 22px; background: var(--papel);
                      border: 1px solid var(--linha); box-shadow: var(--sombra-2); }
@media (min-width: 860px) { .formulario__cartao { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem; } }
.formulario__cabeca h2 { margin-bottom: .8rem; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }
.formulario__cabeca p { color: var(--suave); }
.formulario__campos { display: grid; gap: 1rem; }
.formulario__nota { margin: 0; font-size: .88rem; color: var(--suave); text-align: center; }
.caixas { display: grid; gap: .55rem; padding: .9rem 1rem; border-radius: 12px; background: var(--mapa); }
.caixa { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; line-height: 1.45; }
.caixa input { flex: none; width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: var(--azul); cursor: pointer; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* SEÇÕES DE ENSINO */
.secao { padding-block: var(--espaco-secao); }
.rotulo { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--azul); }
.rotulo__n { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--laranja);
             box-shadow: 0 0 0 4px rgba(245, 156, 0, .22); font-size: .7rem; letter-spacing: 0; color: var(--azul-950); }
.rotulo--claro { color: #C9D4EC; }
.marcas { list-style: none; display: grid; gap: .7rem; margin: 0 0 1.4rem; padding: 0; }
.marcas li { position: relative; padding-left: 1.7rem; line-height: 1.55; }
.marcas li::before { content: ""; position: absolute; left: .15rem; top: .3em; width: .62rem; height: .62rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--laranja); }
.marcas strong { color: var(--azul-900); }

/* 4 · lista telefônica */
.lista { background: var(--papel); }
.lista__grade { display: grid; gap: 1.8rem; }
@media (min-width: 960px) { .lista__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; }
                            .lista__cabeca { grid-row: span 2; } }
.lista__texto p { max-width: 60ch; }
.sebrae { margin: 0; padding: 1.3rem; border-radius: var(--raio); background: var(--mapa); }
.sebrae__barra { display: flex; gap: 4px; height: 26px; margin-bottom: 1rem; }
.sebrae__usa { border-radius: 8px 0 0 8px; background: var(--azul); }
.sebrae__nao { border-radius: 0 8px 8px 0; background: repeating-linear-gradient(135deg, var(--linha-forte) 0 6px, #D2D9E5 6px 12px); }
.sebrae__legenda { display: grid; gap: .3rem; }
@media (min-width: 520px) { .sebrae__legenda { grid-template-columns: 1fr 1fr; } }
.sebrae__legenda p { margin: 0; font-size: .92rem; color: var(--suave); }
.sebrae__legenda strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--azul); }
.sebrae__legenda p + p strong { color: var(--suave); }
.sebrae figcaption { margin-top: .9rem; font-size: .78rem; color: var(--apagado); }

/* 5 · exemplo com gráfico */
.exemplo__cabeca { max-width: 760px; margin-bottom: 2rem; }
.exemplo__grade { display: grid; gap: 2rem; }
@media (min-width: 960px) { .exemplo__grade { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 3rem; } }
.exemplo__grafico { margin: 0; padding: 1.1rem 1.1rem 1rem; border-radius: var(--raio); background: var(--papel); box-shadow: var(--sombra-2); }
.exemplo__grafico figcaption { margin-top: .8rem; font-size: .8rem; line-height: 1.5; color: var(--apagado); }
.grafico { display: block; width: 100%; height: auto; }
.grafico__grade { stroke: var(--linha); stroke-width: 1; }
.grafico__pagina { stroke: var(--linha-forte); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico__rotulo-pagina { font: 600 8.5px var(--fonte); fill: var(--apagado); }
.grafico__barra { fill: var(--azul); }
.grafico__barra--baixa { fill: var(--laranja); }
.grafico__linha30 { stroke: var(--azul-950); stroke-width: 1.6; stroke-dasharray: 6 4; }
.grafico__eixo { font: 600 9.5px var(--fonte); fill: var(--suave); }
.grafico__eixo--30 { font-weight: 800; fill: var(--azul-950); }
.grafico__eixo--titulo { font-weight: 500; fill: var(--apagado); }
.grafico__legenda { font: 600 9px var(--fonte); fill: var(--suave); }

/* 6 · o que o Google olha (composição em mosaico) */
.olha { background: var(--papel); }
.olha__cabeca { max-width: 760px; margin-bottom: 2rem; }
.olha__cabeca h2 { margin-bottom: 1rem; }
.olha__cabeca p { color: var(--suave); max-width: 62ch; }
.olha__lista { list-style: none; display: grid; gap: .9rem; margin: 0; padding: 0; }
@media (min-width: 760px) { .olha__lista { grid-template-columns: 1fr 1fr; } .olha__item--grande { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .olha__lista { grid-template-columns: 1.3fr 1fr 1fr; } .olha__item--grande { grid-column: 1; grid-row: span 2; } .olha__item:last-child { grid-column: 2 / -1; } }
.olha__item { position: relative; padding: 1.4rem 1.3rem 1.3rem; border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--mapa);
              transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease); }
@media (hover: hover) { .olha__item:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); } }
.olha__item--grande { background: var(--azul); border-color: var(--azul); color: #DCE5F5; }
.olha__item--grande h3 { color: #fff; font-size: clamp(1.2rem, 1.05rem + .8vw, 1.55rem); }
.olha__n { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .9rem; border-radius: 50%; background: var(--laranja); color: var(--azul-950); font-weight: 800; }
.olha__item h3 { margin-bottom: .55rem; }
.olha__fecho { margin: 2rem 0 0; max-width: 60ch; font-size: 1.08rem; }

/* 7 · duas regras (faixa escura) */
.regras { background: var(--azul-900); color: #D5DDEE; }
.regras h2 { color: #fff; margin-bottom: 2rem; max-width: 24ch; }
.regras__grade { display: grid; gap: 1rem; }
@media (min-width: 760px) { .regras__grade { grid-template-columns: 1fr 1fr; } }
.regra { padding: 1.4rem 1.3rem; border: 1.5px solid rgba(255, 255, 255, .16); border-radius: var(--raio); background: rgba(255, 255, 255, .04); }
.regra h3 { color: #fff; margin-bottom: .6rem; }
.regra h3 span { color: var(--laranja); }
.regras__porque { max-width: 70ch; margin: 1.8rem 0 0; padding-left: 1rem; border-left: 4px solid var(--laranja); }
.regras__porque strong { color: #fff; }

/* 8 · o que a gente faz */
.servico h2 { max-width: 26ch; margin-bottom: 2.2rem; }
.servico__grade { display: grid; gap: 1.2rem; }
@media (min-width: 960px) { .servico__grade { grid-template-columns: 1fr 1fr; align-items: start; } .resumo { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .servico__grade { grid-template-columns: 1fr 1fr .9fr; } .resumo { grid-column: auto; } }
.etapa { padding: 1.5rem 1.35rem; border-radius: var(--raio); background: var(--papel); border: 1.5px solid var(--linha); }
.etapa--mantem { border-top: 6px solid var(--laranja); }
.etapa:not(.etapa--mantem) { border-top: 6px solid var(--azul); }
.etapa__titulo { margin-bottom: .5rem; }
.etapa__nota { font-size: .86rem; color: var(--suave); margin-bottom: 1.1rem; }
.etapa--mantem .etapa__titulo { margin-bottom: 1.1rem; }
.etapa .marcas { margin: 0; }
.resumo { margin: 0; }
.resumo__rotulo { margin: 0 0 .6rem; font-size: .82rem; font-weight: 700; color: var(--azul); }
.resumo__rotulo span { font-weight: 500; color: var(--suave); }
.resumo__balao { position: relative; padding: 1.1rem 1.15rem; border-radius: 4px 18px 18px 18px; background: #DCF3D9; box-shadow: var(--sombra-1); font-size: .92rem; line-height: 1.55; color: #1B2A1A; }
.resumo__balao p { margin: 0 0 .35rem; }
.resumo__titulo { margin-bottom: .6rem !important; }
.vazio { display: inline-block; min-width: 2.2em; border-bottom: 2px dotted #4B6B47; color: transparent; line-height: 1.1; }
.resumo figcaption { margin-top: .6rem; font-size: .78rem; color: var(--apagado); }
.servico__parte { margin: 1.8rem 0 0; padding: 1rem 1.2rem; border-radius: 12px; background: var(--laranja-50); border: 1.5px solid var(--laranja-100); max-width: 70ch; }

/* 9 · preço */
.preco { background: var(--papel); }
.preco h2 { margin-bottom: 2rem; }
.preco__grade { display: grid; gap: 1rem; margin-bottom: 1.4rem; }
@media (min-width: 760px) { .preco__grade { grid-template-columns: 1fr 1fr; } }
.preco__cartao { padding: 1.5rem 1.4rem; border-radius: var(--raio); background: var(--mapa); border: 1.5px solid var(--linha); }
.preco__cartao--mes { background: var(--azul); border-color: var(--azul); color: #DCE5F5; }
.preco__quando { margin: 0 0 .3rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--laranja-texto); }
.preco__cartao--mes .preco__quando { color: var(--laranja); }
.preco__valor { margin: 0 0 .8rem; font-size: clamp(2.6rem, 2rem + 2.6vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--azul); font-variant-numeric: tabular-nums; }
.preco__cartao--mes .preco__valor { color: #fff; }
.preco__moeda { font-size: .42em; vertical-align: .9em; margin-right: .1em; letter-spacing: 0; }
.preco__periodo { font-size: .3em; font-weight: 700; letter-spacing: 0; margin-left: .15em; }
.preco__fidelidade { margin: 0 0 1.4rem; font-size: 1.05rem; }

/* 10 · quem cuida */
.quem__grade { display: grid; gap: 2rem; }
@media (min-width: 860px) { .quem__grade { grid-template-columns: 240px minmax(0, 1fr); gap: 3.5rem; align-items: start; } }
.quem__foto { margin: 0; max-width: 240px; }
.quem__foto img { width: 240px; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% 50% 8px; border: 5px solid #fff; box-shadow: var(--sombra-2); }
.quem__foto figcaption { margin-top: .8rem; font-size: .82rem; color: var(--suave); }
.quem h2 { margin-bottom: 1.4rem; }
.quem__carta { margin: 0 0 1.4rem; padding: 0; font-size: 1.04rem; }
.quem__carta p { max-width: 62ch; }
.quem__carta footer { font-weight: 800; color: var(--azul); }
.quem__empresa { margin: 0; padding-top: 1rem; border-top: 1px solid var(--linha-forte); font-size: .82rem; color: var(--suave); }

/* 11 · perguntas */
.perguntas { background: var(--papel); }
.perguntas__grade { display: grid; gap: 1.6rem; }
@media (min-width: 960px) { .perguntas__grade { grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: 3rem; } }
.perguntas__lista { border-top: 1.5px solid var(--linha); }
.perguntas details { border-bottom: 1.5px solid var(--linha); }
.perguntas summary { position: relative; padding: 1.05rem 2.6rem 1.05rem 0; list-style: none; cursor: pointer; font-weight: 700; color: var(--azul-900); line-height: 1.4; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.45rem; border-right: 2.5px solid var(--laranja-texto);
                            border-bottom: 2.5px solid var(--laranja-texto); transform: rotate(45deg); transition: transform var(--rapido) var(--ease); }
.perguntas details[open] summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.perguntas summary:hover { color: var(--azul-600); }
.perguntas details p { margin: 0; padding: 0 0 1.15rem; max-width: 68ch; color: var(--suave); }

/* 12 · chamada final */
.final__caixa { position: relative; overflow: hidden; padding: clamp(1.8rem, 1rem + 3vw, 3.2rem); border-radius: 24px; color: #fff;
                background-color: var(--azul);
                background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 5px, transparent 5px 90px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 5px, transparent 5px 120px); }
.final__caixa h2 { color: #fff; margin-bottom: .8rem; max-width: 22ch; }
.final__caixa p { max-width: 54ch; color: #DCE5F5; margin-bottom: 1.5rem; }
.final__caixa .botao:focus-visible { outline-color: #fff; }

/* 13 · rodapé */
.rodape { padding-block: 2.5rem 3rem; background: var(--azul-950); color: #B9C5DF; font-size: .86rem; }
.rodape img { width: 140px; margin-bottom: 1.2rem; }
.rodape p { margin: 0 0 .5rem; }
.rodape a { color: #fff; }
.rodape a:focus-visible { outline-color: var(--laranja); }
.rodape__aviso { max-width: 80ch; margin-top: 1rem !important; font-size: .78rem; color: #8E9BBA; }

/* Páginas simples (privacidade, 404) */
.doc { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); }
.doc__caixa { max-width: 780px; margin-inline: auto; padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); border-radius: 20px; background: var(--papel); box-shadow: var(--sombra-1); }
.doc h1 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem); margin-bottom: .6rem; }
.doc h2 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); margin: 2.2rem 0 .8rem; }
.doc__versao { color: var(--suave); font-size: .9rem; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: .4rem; }
.doc table { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; font-size: .92rem; }
.doc th, .doc td { padding: .65rem .7rem; border: 1px solid var(--linha); text-align: left; vertical-align: top; }
.doc th { background: var(--azul-50); color: var(--azul-900); }
.doc code { font-size: .88em; padding: .05em .3em; border-radius: 4px; background: var(--azul-50); }
.tabela-rolagem { overflow-x: auto; }
@media (max-width: 520px) { .doc table { font-size: .86rem; } .doc th, .doc td { padding: .5rem; } }