:root {
    color-scheme: light;
    --navy-950: #071d4e;
    --navy-900: #0b2f78;
    --navy-800: #123d8d;
    --blue-700: #006eb8;
    --blue-600: #0088d2;
    --cyan-500: #13a9e8;
    --yellow-500: #ffb31a;
    --yellow-400: #ffc23e;
    --ice-100: #eaf4fb;
    --ice-50: #f6faff;
    --ink: #172d55;
    --muted: #667798;
    --line: #dce8f3;
    --white: #ffffff;
    --danger: #a93232;
    /* Ritmo vertical: uma unidade para o espaco entre secoes e outra para o
       espaco de dentro delas. Antes cada secao trazia o proprio numero, e o
       chamariz do rodape acabou sem nenhum -- colado na faixa de cima. */
    --espaco-secao: clamp(3.25rem, 6vw, 5.5rem);
    --espaco-bloco: clamp(1.5rem, 3vw, 2.4rem);
    --shadow-sm: 0 10px 30px rgba(16, 58, 122, 0.08);
    --shadow-lg: 0 28px 80px rgba(16, 58, 122, 0.16);
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    color: var(--ink);
    background: var(--white);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--white);
}

body::selection {
    background: var(--yellow-400);
    color: var(--navy-950);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3,
strong {
    color: var(--navy-900);
}

.shell {
    width: min(1180px, calc(100% - 2.5rem));
    margin-inline: auto;
}

.site-header {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 6.25rem;
    gap: 2.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    width: clamp(11.5rem, 18vw, 15.5rem);
    height: auto;
}

.main-nav,
.header-actions,
.site-footer nav,
.dashboard-header nav {
    display: flex;
    align-items: center;
}

.main-nav {
    justify-content: center;
    gap: 2rem;
}

.main-nav a,
.site-footer nav a,
.dashboard-header nav > a {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 150ms ease;
}

.main-nav a:hover,
.site-footer nav a:hover,
.dashboard-header nav > a:hover,
.text-link:hover {
    color: var(--blue-600);
}

.header-actions {
    gap: 1rem;
}

.text-link {
    color: var(--navy-900);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.button {
    display: inline-flex;
    min-height: 3.2rem;
    align-items: center;
    justify-content: center;
    padding: 0.82rem 1.45rem;
    border: 0;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(0, 112, 190, 0.2);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 112, 190, 0.27);
    filter: saturate(1.08);
}

.button:disabled {
    cursor: wait;
    opacity: 0.65;
    transform: none;
}

.button-small {
    min-height: 2.8rem;
    padding-inline: 1.15rem;
    border-radius: 0.8rem;
    font-size: 0.86rem;
}

.button-secondary {
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--navy-900);
    box-shadow: none;
}

.button-secondary:hover {
    background: var(--ice-50);
    box-shadow: var(--shadow-sm);
}

.button-light {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    background: var(--white);
    color: var(--navy-900);
    box-shadow: 0 16px 38px rgba(3, 25, 72, 0.2);
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 0.9fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    min-height: 38rem;
    /* Sem espaco embaixo: quem abre o intervalo e a secao seguinte, como no
       resto da pagina. Somando os dois, a primeira dobra ficava com o dobro
       do respiro das demais. */
    padding-block: 2.5rem 0;
}

.hero::before {
    position: absolute;
    z-index: -1;
    top: -8rem;
    right: -28vw;
    width: 76vw;
    height: 58rem;
    border-radius: 48% 0 0 52%;
    background:
        radial-gradient(circle at 36% 44%, rgba(255, 255, 255, 0.98) 0 4%, transparent 5%),
        linear-gradient(145deg, rgba(234, 244, 251, 0.95), rgba(246, 250, 255, 0.2));
    content: "";
}

.hero-copy {
    position: relative;
    z-index: 2;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    color: var(--blue-600);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.eyebrow > span {
    display: inline-block;
    width: 1.8rem;
    height: 2px;
    background: var(--yellow-500);
}

.eyebrow-light {
    color: rgba(255, 255, 255, 0.76);
}

.hero h1,
.auth-card h1,
.dashboard-welcome h1 {
    margin-bottom: 1.35rem;
    color: var(--navy-900);
    font-size: clamp(3rem, 6vw, 5.65rem);
    font-weight: 700;
    letter-spacing: -0.065em;
    line-height: 0.98;
}

.hero h1 strong,
.category-showcase h2 strong,
.business-cta h2 strong,
.auth-brand-copy h2 strong,
.dashboard-welcome h1 strong {
    color: var(--blue-600);
}

.intro {
    max-width: 39rem;
    margin-bottom: 1.25rem;
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.75;
}

/* ---------------------------------------------------------------------
   Numeros do acervo, na chamada

   Um diretorio vazio e um diretorio cheio tinham exatamente a mesma
   primeira tela. Dizer quantos negocios, categorias e cidades existem
   hoje e a informacao mais barata que a home tem para dar.
   --------------------------------------------------------------------- */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2.2rem;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
}

.hero-stats li {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.hero-stats strong {
    color: var(--blue-600);
    font-size: 1.45rem;
    letter-spacing: -0.045em;
}

.hero-stats span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.breadcrumb a {
    color: var(--blue-700);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span[aria-hidden] {
    opacity: 0.45;
}

/* Estado da API so aparece quando ha problema: "Servicos online" era
   recado de manutencao exibido para quem veio procurar uma padaria. */
.api-status:empty {
    display: none;
}

.api-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.api-status::before {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--yellow-500);
    content: "";
    box-shadow: 0 0 0 4px rgba(255, 179, 26, 0.16);
}

.api-status[data-state="online"]::before {
    background: #21b776;
    box-shadow: 0 0 0 4px rgba(33, 183, 118, 0.14);
}

.api-status[data-state="offline"] {
    color: var(--danger);
}

.api-status[data-state="offline"]::before {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(169, 50, 50, 0.12);
}

.search-card {
    max-width: 42rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-lg);
}

.search-card-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.search-card-heading strong,
.search-card-heading small {
    display: block;
}

.search-card-heading strong {
    font-size: 0.95rem;
}

.search-card-heading small {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.72rem;
}

.search-icon,
.benefit-icon,
.empty-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--ice-100);
    color: var(--blue-600);
}

.search-icon {
    width: 2.55rem;
    height: 2.55rem;
}

.search-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(11rem, 0.75fr);
    gap: 0.75rem;
}

label {
    display: grid;
    gap: 0.45rem;
    color: var(--navy-900);
    font-size: 0.76rem;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    min-height: 3.35rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    outline: none;
    background: var(--ice-50);
    color: var(--ink);
    font-size: 0.86rem;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

input::placeholder {
    color: #96a5bd;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cyan-500);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(19, 169, 232, 0.12);
}

.search-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
}

.location-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 0.2rem;
    border: 0;
    background: transparent;
    color: var(--blue-600);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.form-feedback {
    min-height: 1.1rem;
    margin: 0.6rem 0 0;
    color: var(--danger);
    font-size: 0.72rem;
    font-weight: 600;
}

.hero-visual {
    position: relative;
    display: grid;
    min-height: 25rem;
    place-items: center;
}

.hero-visual::before {
    position: absolute;
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    content: "";
    box-shadow: 0 30px 80px rgba(0, 112, 190, 0.11);
}

.hero-visual > img {
    position: relative;
    z-index: 3;
    width: min(19rem, 70%);
    filter: drop-shadow(0 30px 35px rgba(4, 72, 153, 0.16));
}

.hero-orbit {
    position: absolute;
    border: 1px solid rgba(0, 136, 210, 0.14);
    border-radius: 50%;
}

.hero-orbit-one {
    width: 22rem;
    height: 22rem;
}

.hero-orbit-two {
    width: 27rem;
    height: 27rem;
    border-style: dashed;
}

.floating-pill {
    position: absolute;
    z-index: 4;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--navy-900);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.floating-pill::before {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: var(--yellow-500);
    content: "";
}

.pill-one { top: 18%; left: 2%; }
.pill-two { top: 35%; right: -3%; }
.pill-three { bottom: 16%; left: 4%; }

.benefits {
    margin-top: var(--espaco-secao);
    border-block: 1px solid var(--line);
    background: var(--ice-50);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: var(--espaco-bloco);
}

.benefits-grid article {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.5rem 1.6rem;
    border-right: 1px solid var(--line);
}

.benefits-grid article:first-child { padding-left: 0; }
.benefits-grid article:last-child { padding-right: 0; border-right: 0; }

.benefit-icon {
    width: 3.15rem;
    height: 3.15rem;
}

.benefits-grid strong,
.benefits-grid p {
    display: block;
}

.benefits-grid strong {
    margin-bottom: 0.25rem;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.benefits-grid p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.55;
}

/* A home alterna superficies para deixar claro onde uma etapa termina e a
   seguinte comeca. O intervalo continua sendo uma unidade; o padding pertence
   ao painel e organiza o conteudo dentro dele. */
.category-showcase,
.city-showcase,
.results-section {
    position: relative;
    margin-top: var(--espaco-secao);
    overflow: hidden;
    padding: clamp(1.7rem, 4vw, 3.2rem);
    border: 1px solid var(--line);
    border-radius: 2rem;
}

.results-section {
    background:
        radial-gradient(circle at 94% 4%, rgba(19, 169, 232, 0.1), transparent 24rem),
        linear-gradient(145deg, #f8fbff, var(--ice-50));
}

.category-showcase {
    background:
        radial-gradient(circle at 8% 10%, rgba(255, 179, 26, 0.12), transparent 18rem),
        linear-gradient(145deg, #edf7fd, #f8fbff 58%, var(--white));
}

.category-showcase::after {
    position: absolute;
    z-index: 0;
    right: -6rem;
    bottom: -8rem;
    width: 19rem;
    height: 19rem;
    border: 1px solid rgba(19, 169, 232, 0.18);
    border-radius: 50%;
    content: "";
}

.category-showcase > *,
.city-showcase > * {
    position: relative;
    z-index: 1;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: var(--espaco-bloco);
}

.section-heading h2,
.business-cta h2,
.auth-brand-copy h2 {
    margin-bottom: 0;
    color: var(--navy-900);
    font-size: clamp(2rem, 4vw, 3.65rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.section-heading > p {
    max-width: 25rem;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.category-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.7rem;
}

/* A categoria virou link de verdade (/categoria/{slug}). Antes era um botao
   que so mexia no formulario: util para quem ja estava na pagina, invisivel
   para quem procurava "nutricionista" no buscador. */
.category-chip {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    text-decoration: none;
    border: 1px solid rgba(125, 166, 201, 0.3);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--navy-900);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.category-chip::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--yellow-500);
    content: "";
}

.category-chip:hover {
    border-color: var(--cyan-500);
    color: var(--blue-600);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(16, 58, 122, 0.1);
}

.category-chip small {
    margin-left: auto;
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    color: var(--blue-700);
    background: var(--ice-100);
    font-size: 0.64rem;
    font-weight: 700;
}

.category-chip.is-current,
.city-chip.is-current {
    border-color: var(--blue-600);
    color: var(--blue-700);
    background: var(--ice-100);
}

/* ---------------------------------------------------------------------
   Cidades atendidas

   Quem procura escreve o nome da cidade junto com o servico. A lista
   existe para dar um endereco proprio a cada uma delas.
   --------------------------------------------------------------------- */
.city-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.city-showcase {
    background:
        radial-gradient(circle at 84% 15%, rgba(19, 169, 232, 0.35), transparent 23rem),
        linear-gradient(135deg, var(--navy-950), var(--navy-800) 60%, var(--blue-700));
    box-shadow: 0 24px 60px rgba(7, 29, 78, 0.16);
}

.city-showcase::after {
    position: absolute;
    right: -4rem;
    bottom: -7rem;
    width: 19rem;
    height: 19rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    content: "";
}

.city-showcase .eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.city-showcase .section-heading h2,
.city-showcase .section-heading h2 strong {
    color: var(--white);
}

.city-showcase .section-heading > p {
    color: rgba(255, 255, 255, 0.7);
}

.city-chip {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.9rem;
    padding: 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 1.15rem;
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.96);
    text-decoration: none;
    box-shadow: 0 16px 36px rgba(3, 25, 72, 0.2);
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.city-chip-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, var(--navy-800), var(--blue-600));
    color: var(--white);
}

.city-chip-icon svg {
    width: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.city-chip-copy {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.city-chip-copy strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
}

.city-chip-copy strong small {
    padding: 0.16rem 0.42rem;
    border-radius: 999px;
    background: #fff1c9;
    color: #855900;
    font-size: 0.56rem;
    letter-spacing: 0.06em;
}

.city-chip-copy > span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.city-chip-arrow {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    margin-left: auto;
    place-items: center;
    border-radius: 50%;
    background: var(--ice-100);
    color: var(--blue-700);
    font-size: 0.9rem;
    font-weight: 800;
}

.city-chip:hover {
    border-color: var(--white);
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(3, 25, 72, 0.28);
}

.city-chip-placeholder {
    cursor: default;
    opacity: 0.65;
}

.category-chip-placeholder {
    cursor: default;
    opacity: 0.65;
}



.result-count {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Cartao do anunciante

   E o produto da pagina: e dele que o visitante decide se clica. O desenho
   anterior era texto com uma miniatura de 3,3 rem ao lado, e a fachada que o
   anunciante enviou nao aparecia em lugar nenhum da busca.

   A mesma marcacao e montada em PHP (`inicio.php`, para o buscador e para a
   primeira tela) e em JavaScript (`assets/js/app.js`, quando o visitante
   busca). Mudou aqui, precisa mudar nos dois.
   --------------------------------------------------------------------- */
.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19.5rem, 1fr));
    gap: 1.1rem;
}

.provider-card {
    display: flex;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.provider-card:hover {
    border-color: rgba(19, 169, 232, 0.45);
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(16, 58, 122, 0.12);
}

.provider-card-link {
    display: flex;
    width: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* Sem fachada enviada, o espaco e ocupado assim mesmo: a grade continua
   regular em vez de ter cartoes altos e baixos. */
.provider-cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 7;
}

/* Quem ainda nao enviou fachada ficava com um retangulo azul chapado. O
   lugar continua sendo da marca, entao recebe o simbolo do Tem Bem Perto em
   marca d'agua. O fundo e azul-claro, e nao branco, para o chip do logotipo
   -- que e branco e monta por cima -- continuar se destacando.

   `:empty` e o proprio criterio: o PHP e o JavaScript so colocam a imagem
   dentro quando ela existe, e o JavaScript a remove se ela falhar ao
   carregar. Nao ha classe extra para manter em sincronia. */
.provider-cover:empty {
    background:
        radial-gradient(circle at 80% 24%, rgba(19, 169, 232, 0.28), transparent 60%),
        linear-gradient(135deg, var(--ice-100), #dceaf6);
}

.provider-cover:empty::after {
    position: absolute;
    inset: 0;
    background: url("../img/icone-tem-bem-perto.png") no-repeat 68% 46% / auto 62%;
    opacity: 0.28;
    content: "";
}

.provider-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.provider-card-body {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding: 0 1.2rem 1.2rem;
}

/* O logotipo monta sobre a faixa: e por ele que o visitante reconhece quem
   ja conhece, antes mesmo de ler o nome. */
.provider-avatar {
    position: absolute;
    top: -2.05rem;
    left: 1.2rem;
    display: grid;
    width: 4.1rem;
    height: 4.1rem;
    place-items: center;
    overflow: hidden;
    border: 3px solid var(--white);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, var(--navy-900), var(--cyan-500));
    color: var(--white);
    font-size: 1.45rem;
    font-weight: 800;
    /* O fio interno delimita o quadro quando a marca enviada e clara: sem
       ele, logotipo branco sobre chip branco vira um retangulo vazio. */
    box-shadow:
        0 10px 24px rgba(7, 29, 78, 0.18),
        inset 0 0 0 1px rgba(16, 58, 122, 0.12);
}

/* Sem respiro: o logotipo encosta na borda e ocupa o quadro inteiro. Com
   0,22 rem de folga, somados a borda branca, uma marca quadrada parecia
   pequena e solta no meio do chip.

   Continua `contain`, e nao `cover`: entre os anunciantes reais ha logotipo
   640x800 e 800x533, e preencher a forca cortaria um terco de uma marca
   escrita. Marca quadrada -- a maioria -- preenche sozinha. */
.provider-avatar img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--white);
    object-fit: contain;
}

.provider-card h3 {
    margin-bottom: 0.3rem;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.provider-card p {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.6;
}

.provider-place {
    margin-bottom: 0.6rem;
    color: var(--blue-700);
    font-size: 0.7rem;
    font-weight: 700;
}

.provider-place:empty {
    display: none;
}

.provider-summary {
    display: -webkit-box;
    margin-bottom: 0.9rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.provider-badges,
.provider-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
}

/* Espaco do logotipo, que sobe para fora do corpo do cartao. */
.provider-badges {
    margin: 2.55rem 0 0.55rem;
}

.provider-badges span {
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: var(--ice-100);
}

.provider-badges .verified {
    background: #fff2ce;
    color: #8b5b00;
}

/* Preso na base: cartoes de descricoes diferentes terminam alinhados. */
.provider-meta {
    align-items: center;
    margin-top: auto;
}

.provider-card-action {
    margin-left: auto;
    color: var(--blue-700);
    font-weight: 700;
}

.provider-card-action::after {
    content: " \2192";
}

.empty-state {
    grid-column: 1 / -1;
    padding: 4rem 2rem;
    border: 1px dashed #bfd3e6;
    border-radius: 1.5rem;
    background: linear-gradient(145deg, var(--ice-50), var(--white));
    text-align: center;
}

.empty-icon {
    width: 3.8rem;
    height: 3.8rem;
    margin: 0 auto 1rem;
}

.empty-state h3 {
    margin-bottom: 0.45rem;
}

.empty-state p {
    max-width: 32rem;
    margin: 0 auto;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.65;
}

.business-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    margin-block: var(--espaco-secao);
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--navy-950), var(--blue-700));
    color: var(--white);
    box-shadow: var(--shadow-lg);
}

.business-cta > div {
    position: relative;
    z-index: 2;
    max-width: 43rem;
}

.business-cta h2,
.business-cta h2 strong {
    color: var(--white);
}

.business-cta h2 strong {
    text-decoration: underline;
    text-decoration-color: var(--yellow-500);
    text-underline-offset: 0.15em;
}

.business-cta p:not(.eyebrow) {
    max-width: 38rem;
    margin: 1.2rem 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    line-height: 1.7;
}

.business-cta > img {
    position: absolute;
    right: 12%;
    width: 18rem;
    opacity: 0.1;
    transform: rotate(10deg);
}

.site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    padding-block: 2.5rem;
    border-top: 1px solid var(--line);
}

.site-footer .brand-logo {
    width: 11rem;
}

.site-footer p {
    margin: 0;
    color: var(--navy-900);
    font-size: 0.72rem;
    line-height: 1.7;
    text-align: center;
}

.site-footer p span {
    color: var(--muted);
}

.site-footer nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem 1.1rem;
}

/* Com Termos e Privacidade o rodape ganhou cinco itens: sem isto os rotulos
   quebram no meio da palavra em vez de o menu passar para a linha de baixo. */
.site-footer nav a {
    white-space: nowrap;
}

/* Authentication */
.auth-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem 2rem;
    background: var(--ice-50);
}

.auth-shell {
    width: min(68rem, 100%);
}

.auth-layout {
    display: grid;
    grid-template-columns: minmax(20rem, 0.9fr) minmax(24rem, 1.1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 2rem;
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    min-height: 36rem;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 2rem;
    background: linear-gradient(145deg, var(--navy-950), var(--blue-700));
}

.auth-brand-panel::before,
.auth-brand-panel::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    content: "";
}

.auth-brand-panel::before {
    right: -10rem;
    bottom: -8rem;
    width: 28rem;
    height: 28rem;
}

.auth-brand-panel::after {
    right: -5rem;
    bottom: -3rem;
    width: 18rem;
    height: 18rem;
}

.auth-brand-panel > .brand {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    padding: 0.55rem 0.8rem;
    border-radius: 0.8rem;
    background: var(--white);
}

.auth-brand-panel .brand-logo {
    width: 10.5rem;
}

.auth-brand-copy {
    position: relative;
    z-index: 2;
}

.auth-symbol {
    width: 9rem;
    margin: 0 0 1rem -1rem;
    filter: drop-shadow(0 18px 25px rgba(0, 0, 0, 0.16));
}

.auth-brand-copy h2,
.auth-brand-copy h2 strong {
    color: var(--white);
}

.auth-brand-copy > p:last-child {
    max-width: 24rem;
    margin: 1.25rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
    line-height: 1.75;
}

.auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 3.25rem);
}

.back-link {
    align-self: flex-start;
    margin-bottom: 1.35rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
}

.auth-card h1 {
    margin-bottom: 0.6rem;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.auth-intro,
.auth-switch {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.7;
}

.auth-form {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.auth-field {
    display: grid;
    gap: 0.45rem;
    color: var(--navy-900);
    font-size: 0.76rem;
    font-weight: 700;
}

.password-control {
    position: relative;
}

.password-control input {
    padding-right: 3.4rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 0;
    border-radius: 0.65rem;
    transform: translateY(-50%);
    place-items: center;
    background: transparent;
    color: var(--blue-700);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.password-toggle:hover {
    background: var(--ice-100);
    color: var(--blue-600);
}

.password-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.password-icon-hide,
.password-toggle[aria-pressed="true"] .password-icon-show {
    display: none;
}

.password-toggle[aria-pressed="true"] .password-icon-hide {
    display: block;
}

/* Campos um pouco mais baixos: as duas telas de auth precisam caber em
   1920x900 sem rolagem, incluindo o cadastro com quatro campos. */
.auth-form input {
    min-height: 3.1rem;
}

.auth-form small {
    color: #8b9ab1;
    font-weight: 500;
}

.auth-form .button {
    width: 100%;
    margin-top: 0.25rem;
}

.legal-consent {
    margin: -0.3rem 0 0;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.55;
    text-align: center;
}

.legal-consent a {
    color: var(--blue-700);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.auth-switch {
    margin: 1.2rem 0 0;
    text-align: center;
}

.auth-switch a {
    color: var(--blue-600);
    font-weight: 700;
}

/* Telas baixas (1920x1080 com barra do navegador, notebook 1366x768, janela
   reduzida): versao compacta para o cadastro caber sem rolagem, ja incluindo o
   aviso de termos. Monitores altos mantem o respiro original. */
@media (max-height: 940px) {
    .auth-page {
        padding-block: 1rem;
    }

    .auth-card {
        padding-block: 1.6rem;
    }

    .auth-card h1 {
        font-size: 1.9rem;
    }

    .back-link {
        margin-bottom: 1rem;
    }

    .auth-form {
        gap: 0.7rem;
        margin-top: 1rem;
    }

    .auth-form input {
        min-height: 2.9rem;
    }

    .auth-switch {
        margin-top: 0.85rem;
    }
}

/* Account area */
.dashboard-page {
    background: var(--ice-50);
}

.dashboard-header {
    display: flex;
    min-height: 6.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-header nav {
    gap: 1rem;
}

.dashboard-shell {
    padding-block: 2rem 6rem;
}

.dashboard-welcome {
    position: relative;
    display: flex;
    min-height: 18rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(2rem, 6vw, 4rem);
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--white), var(--ice-100));
    box-shadow: var(--shadow-sm);
}

.dashboard-welcome h1 {
    margin-bottom: 0.8rem;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
}

.dashboard-welcome > div > p:last-child {
    margin-bottom: 0;
    color: var(--muted);
}

.dashboard-welcome > img {
    width: 15rem;
    filter: drop-shadow(0 22px 30px rgba(0, 112, 190, 0.15));
}

/* A conta nasce antes do perfil comercial. O aviso ocupa a passagem entre as
   duas etapas e só aparece enquanto o anunciante ainda não cadastrou o negócio. */
.provider-onboarding {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1rem;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid rgba(255, 179, 26, 0.58);
    border-radius: 1.4rem;
    background:
        radial-gradient(circle at 88% -30%, rgba(255, 255, 255, 0.92), transparent 38%),
        linear-gradient(120deg, #fff7df 0%, #fffaf0 55%, #f7fbff 100%);
    box-shadow: 0 16px 38px rgba(184, 119, 0, 0.11);
}

.provider-onboarding[hidden] {
    display: none;
}

.provider-onboarding::after {
    position: absolute;
    width: 9rem;
    height: 9rem;
    right: 18%;
    border: 1px solid rgba(255, 179, 26, 0.24);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.provider-onboarding-step {
    position: relative;
    z-index: 1;
    display: grid;
    width: 3.35rem;
    height: 3.35rem;
    place-items: center;
    border: 5px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    color: var(--navy-900);
    background: var(--yellow-500);
    box-shadow: 0 8px 20px rgba(255, 179, 26, 0.24);
    font-size: 0.78rem;
    font-weight: 800;
}

.provider-onboarding-copy {
    position: relative;
    z-index: 1;
}

.provider-onboarding-copy > span {
    display: block;
    margin-bottom: 0.25rem;
    color: #9a6500;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.provider-onboarding h2 {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.3;
}

.provider-onboarding p {
    max-width: 46rem;
    margin: 0.4rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.65;
}

.provider-onboarding-action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 0.55rem;
    white-space: nowrap;
}

.provider-onboarding-action svg {
    width: 1rem;
    height: 1rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    gap: 1rem;
    margin-top: 1rem;
}

.dashboard-card {
    padding: 1.7rem;
    border: 1px solid var(--line);
    border-radius: 1.4rem;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.card-heading span,
.card-heading strong {
    display: block;
}

.card-heading span {
    color: var(--blue-600);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.card-heading strong {
    margin-top: 0.25rem;
    font-size: 1.15rem;
}

.account-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.account-detail {
    min-width: 0;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--ice-50);
}

.account-detail span,
.account-detail strong {
    display: block;
}

.account-detail span {
    margin-bottom: 0.25rem;
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.account-detail strong {
    overflow: hidden;
    font-size: 0.8rem;
    text-overflow: ellipsis;
}

.dashboard-next-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.dashboard-next-step strong {
    display: block;
    margin: 0.35rem 0 0.45rem;
}

.dashboard-next-step p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.65;
}

.provider-status-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(145deg, var(--white), var(--ice-100));
}

.provider-status-card .benefit-icon {
    flex: 0 0 auto;
}

.provider-status-label {
    display: block;
    margin: 0.15rem 0 0.2rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.provider-status-card strong {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--navy-900);
    font-size: 1rem;
}

.provider-status-card strong::before {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--muted);
    content: "";
    box-shadow: 0 0 0 4px rgba(102, 119, 152, 0.12);
}

.provider-status-card strong[data-state="pending"]::before {
    background: var(--yellow-500);
    box-shadow: 0 0 0 4px rgba(255, 179, 26, 0.15);
}

.provider-status-card strong[data-state="active"]::before {
    background: #21b776;
    box-shadow: 0 0 0 4px rgba(33, 183, 118, 0.14);
}

.provider-status-card strong[data-state="restricted"],
.provider-status-card strong[data-state="suspended"],
.provider-status-card strong[data-state="rejected"] {
    color: var(--danger);
}

.provider-status-card strong[data-state="restricted"]::before,
.provider-status-card strong[data-state="suspended"]::before,
.provider-status-card strong[data-state="rejected"]::before {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(169, 50, 50, 0.12);
}

.provider-status-card p {
    margin: 0.45rem 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.6;
}

.provider-profile-card {
    margin-top: 1rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    scroll-margin-top: 1rem;
}

.provider-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.provider-form-heading > p {
    max-width: 25rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.65;
    text-align: right;
}

.provider-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: 1.5rem;
}

.provider-form label {
    display: grid;
    gap: 0.45rem;
}

.provider-form label > span {
    color: var(--navy-900);
    font-size: 0.73rem;
    font-weight: 700;
}

.provider-form label small {
    color: var(--muted);
    font-weight: 500;
}

.provider-form-section {
    min-width: 0;
    margin: 0;
    padding: 1.2rem;
    border: 1px solid #d5e3ef;
    border-radius: 1.1rem;
    background: linear-gradient(145deg, rgba(247, 251, 255, 0.96), var(--white));
}

.provider-form-section legend {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.45rem;
    color: var(--navy-900);
    font-size: 0.92rem;
    font-weight: 800;
}

.provider-form-section legend span {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-800), var(--blue-600));
    color: var(--white);
    font-size: 0.58rem;
    letter-spacing: 0.03em;
}

.provider-form-section-help {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.55;
}

.provider-form-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.1rem;
}

.provider-form-section label > span {
    color: var(--blue-700);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.provider-form-section label > span small {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.provider-form-section input,
.provider-form-section select,
.provider-form-section textarea {
    border-color: #cdddec;
    background: var(--white);
    color: var(--navy-950);
    font-weight: 600;
}

.provider-form-section input:hover,
.provider-form-section select:hover,
.provider-form-section textarea:hover {
    border-color: #a9c8df;
}

.provider-form-section input:focus,
.provider-form-section select:focus,
.provider-form-section textarea:focus {
    border-color: var(--cyan-500);
    box-shadow: 0 0 0 4px rgba(19, 169, 232, 0.12);
}

.provider-form-wide {
    grid-column: 1 / -1;
}

.provider-form textarea {
    min-height: 8.5rem;
    resize: vertical;
    line-height: 1.6;
}

.provider-media-editor {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid #cfe0ef;
    border-radius: 1.15rem;
    background: linear-gradient(145deg, var(--ice-50), var(--white));
}

.provider-media-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.provider-media-heading > div,
.provider-media-copy {
    display: grid;
    gap: 0.25rem;
}

.provider-media-kicker {
    color: var(--blue-600);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.provider-media-heading strong {
    color: var(--navy-900);
    font-size: 1rem;
}

.provider-media-heading p {
    max-width: 31rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.69rem;
    line-height: 1.55;
    text-align: right;
}

.provider-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 0.85rem;
}

.provider-media-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.86);
}

.provider-media-preview {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    overflow: hidden;
    place-items: center;
    border: 3px solid rgba(19, 169, 232, 0.26);
    color: var(--white);
    background: linear-gradient(145deg, var(--navy-900), var(--cyan-500));
    box-shadow: 0 10px 24px rgba(16, 58, 122, 0.14);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.provider-media-preview.is-pending {
    border-color: var(--yellow-500);
    box-shadow: 0 12px 28px rgba(255, 179, 26, 0.24);
    transform: translateY(-2px);
}

.provider-media-preview.is-pending::after {
    position: absolute;
    z-index: 2;
    top: 0.4rem;
    right: 0.4rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    color: var(--navy-950);
    background: var(--yellow-500);
    content: "Prévia";
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.provider-logo-preview {
    width: 6rem;
    height: 6rem;
    border-radius: 1.15rem;
    font-size: 2.2rem;
    font-weight: 800;
}

.provider-cover-preview {
    width: clamp(8rem, 15vw, 11rem);
    aspect-ratio: 16 / 9;
    border-radius: 0.85rem;
}

.provider-media-preview img {
    display: block;
    width: 100%;
    height: 100%;
}

.provider-media-preview img[hidden] {
    display: none;
}

.provider-logo-preview img {
    background: var(--white);
    object-fit: cover;
}

.provider-cover-preview img {
    object-fit: cover;
}

.provider-cover-preview svg {
    width: 2.2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.provider-media-copy {
    min-width: 0;
}

.provider-media-copy > strong {
    color: var(--navy-900);
    font-size: 0.76rem;
}

.provider-media-copy > strong small {
    color: var(--muted);
    font-weight: 500;
}

.provider-media-copy p,
.provider-media-copy > small {
    margin: 0;
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.5;
}

.provider-media-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-block: 0.35rem 0.15rem;
}

.provider-media-actions .button {
    min-height: 2.35rem;
}

.provider-media-remove {
    padding: 0;
    border: 0;
    color: var(--danger);
    background: transparent;
    font: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
}

.provider-media-copy > small[data-state="success"] {
    color: #128354;
}

.provider-media-copy > small[data-state="error"] {
    color: var(--danger);
}

.provider-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 0.35rem;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--ice-50);
}

.provider-location-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--ice-50);
}

.provider-location-tools > div {
    display: grid;
    flex: 1;
    gap: 0.2rem;
}

.provider-location-tools strong {
    color: var(--navy-900);
    font-size: 0.72rem;
}

.provider-location-tools span {
    color: var(--muted);
    font-size: 0.63rem;
    line-height: 1.5;
}

.provider-location-tools .location-remove {
    border: 0;
    color: var(--danger);
    background: transparent;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 700px) {
    .provider-location-tools {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .provider-media-item {
        align-items: flex-start;
    }

    .provider-cover-editor {
        flex-direction: column;
    }

    .provider-cover-preview {
        width: 100%;
    }
}

.provider-form-footer p,
.provider-form-footer strong,
.provider-form-footer span {
    display: block;
}

.provider-form-footer p {
    margin: 0;
}

.provider-form-footer strong {
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
}

.provider-form-footer span {
    color: var(--muted);
    font-size: 0.66rem;
}

.provider-form-footer .button {
    flex: 0 0 auto;
}

.form-feedback[data-state="success"] {
    color: #128354;
}

.form-feedback[data-state="error"] {
    color: var(--danger);
}

/* Administrative experience */

.admin-page {
    background: var(--ice-50);
}

.admin-layout {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    min-height: 100vh;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 1.8rem 1.35rem;
    overflow: hidden;
    color: var(--white);
    background: radial-gradient(circle at 95% 85%, rgba(19, 169, 232, 0.4), transparent 32%), linear-gradient(165deg, var(--navy-950), var(--blue-700));
}

.admin-sidebar::after {
    position: absolute;
    right: -7rem;
    bottom: -5rem;
    width: 17rem;
    height: 17rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.admin-brand {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    padding: 0.65rem 0.8rem;
    border-radius: 0.9rem;
    background: var(--white);
}

.admin-brand .brand-logo {
    width: 10.4rem;
}

.admin-context {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.15rem;
    margin: 2.3rem 0 1rem;
    padding: 0 0.75rem;
}

.admin-context span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.admin-context strong {
    color: var(--white);
    font-size: 1.15rem;
}

.admin-nav {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.35rem;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.82rem 0.9rem;
    border-radius: 0.8rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: 160ms ease;
}

.admin-nav a:hover,
.admin-nav a.is-active {
    color: var(--white);
    background: rgba(255, 255, 255, 0.13);
}

.admin-nav-icon {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border-radius: 0.55rem;
    color: var(--yellow-400);
    background: rgba(255, 255, 255, 0.09);
    font-size: 1rem;
}

.admin-back {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 0.75rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
}

.admin-main {
    width: min(100% - 3rem, 82rem);
    margin-inline: auto;
    padding: 2rem 0 4rem;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.8rem;
}

.admin-topbar .eyebrow {
    margin-bottom: 0.3rem;
}

.admin-topbar h1 {
    margin: 0;
    color: var(--navy-950);
    font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.admin-topbar h1 strong {
    color: var(--blue-600);
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.admin-avatar {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: linear-gradient(135deg, var(--navy-800), var(--cyan-500));
    font-weight: 800;
}

.admin-user > div {
    display: grid;
    max-width: 15rem;
}

.admin-user > div strong {
    overflow: hidden;
    color: var(--navy-950);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user > div span {
    color: var(--muted);
    font-size: 0.68rem;
}

.admin-hero {
    position: relative;
    display: flex;
    min-height: 14rem;
    align-items: center;
    justify-content: space-between;
    padding: 2.2rem 2.5rem;
    overflow: hidden;
    border-radius: 1.5rem;
    color: var(--white);
    background: radial-gradient(circle at 82% 32%, rgba(19, 169, 232, 0.55), transparent 29%), linear-gradient(115deg, var(--navy-950), var(--blue-700));
    box-shadow: var(--shadow-sm);
}

.admin-hero::after {
    position: absolute;
    right: 5rem;
    bottom: -12rem;
    width: 24rem;
    height: 24rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    content: "";
}

.admin-hero > div {
    position: relative;
    z-index: 1;
    max-width: 38rem;
}

.admin-hero-label {
    color: var(--yellow-400);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.admin-hero h2 {
    margin: 0.55rem 0;
    color: var(--white);
    font-size: clamp(1.7rem, 3.5vw, 2.8rem);
}

.admin-hero p {
    max-width: 35rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
}

.admin-hero > img {
    position: relative;
    z-index: 1;
    width: 10rem;
    margin-right: 4rem;
    filter: drop-shadow(0 18px 22px rgba(3, 25, 72, 0.22));
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.admin-metrics article,
.admin-panel {
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    background: var(--white);
    box-shadow: 0 10px 35px rgba(16, 58, 122, 0.05);
}

.admin-metrics article {
    display: grid;
    padding: 1.25rem;
}

.admin-metrics span {
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: 600;
}

.admin-metrics strong {
    margin: 0.25rem 0;
    color: var(--navy-950);
    font-size: 1.8rem;
}

.admin-metrics small {
    color: var(--blue-600);
    font-size: 0.62rem;
}

.admin-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(15rem, 0.75fr);
    gap: 1rem;
    margin-top: 1rem;
}

.admin-panel {
    padding: 1.5rem;
}

.admin-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.admin-panel-heading span,
.admin-panel-heading h2 {
    margin: 0;
}

.admin-panel-heading > div > span {
    color: var(--blue-600);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-panel-heading h2,
.admin-next h2 {
    color: var(--navy-950);
    font-size: 1.12rem;
}

.status-badge {
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    color: var(--blue-700);
    background: var(--ice-100);
    font-size: 0.62rem;
    font-weight: 700;
}

.admin-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.admin-actions button {
    display: grid;
    gap: 0.22rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    text-align: left;
    background: var(--ice-50);
}

.admin-actions button span {
    color: var(--navy-950);
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-actions button small {
    color: var(--muted);
    font-size: 0.64rem;
}

.admin-next {
    background: linear-gradient(145deg, var(--white), var(--ice-100));
}

.admin-next .benefit-icon {
    margin-bottom: 1rem;
}

.admin-next h2 {
    margin: 0;
}

.admin-next p {
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 1020px) {
    .main-nav {
        display: none;
    }

    .site-header {
        grid-template-columns: 1fr auto;
    }

    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.65fr);
        min-height: 40rem;
        gap: 1rem;
    }

    .hero-visual > img {
        width: 16rem;
    }

    .hero-orbit-one { width: 18rem; height: 18rem; }
    .hero-orbit-two { width: 22rem; height: 22rem; }

    .benefits-grid {
        grid-template-columns: 1fr 1fr;
    }

    .benefits-grid article:nth-child(2) {
        border-right: 0;
    }

    .benefits-grid article:nth-child(-n + 2) {
        padding-bottom: 1.4rem;
        border-bottom: 1px solid var(--line);
    }

    .benefits-grid article:nth-child(n + 3) {
        padding-top: 1.4rem;
    }


    .admin-layout {
        grid-template-columns: 5.5rem minmax(0, 1fr);
    }

    .admin-sidebar {
        padding-inline: 0.8rem;
    }

    .admin-brand {
        padding: 0.6rem;
    }

    .admin-brand .brand-logo {
        width: 3.15rem;
        height: 2.3rem;
        object-fit: cover;
        object-position: left;
    }

    .admin-context {
        padding-inline: 0.25rem;
    }

    .admin-context span,
    .admin-context strong,
    .admin-back {
        display: none;
    }

    .admin-nav a {
        justify-content: center;
        padding-inline: 0.5rem;
        font-size: 0;
    }

    .admin-nav-icon {
        font-size: 1rem;
    }

    .admin-main {
        width: min(100% - 2rem, 72rem);
    }

    .admin-hero > img {
        margin-right: 0;
    }

    .admin-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .shell {
        width: min(100% - 1.5rem, 42rem);
    }

    .site-header {
        min-height: 5rem;
    }

    .brand-logo {
        width: 10.5rem;
    }

    .header-actions .text-link {
        /* Entrar continua visivel no mobile: era o unico acesso pelo topo. */
        padding-inline: 0.2rem;
        font-size: 0.72rem;
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-block: 1.75rem 0;
    }

    .hero::before {
        top: auto;
        right: -50vw;
        bottom: 6rem;
        height: 28rem;
    }

    /* A primeira tela do celular so existe uma vez: ela fica com a chamada,
       a busca e os anunciantes. A ilustracao some porque e decoracao, e a
       arte da marca ja aparece no cabecalho. */
    .hero-visual {
        display: none;
    }

    .hero h1 {
        font-size: clamp(3rem, 15vw, 4.3rem);
    }

    .search-fields,
    .search-actions {
        grid-template-columns: 1fr;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .benefits-grid article,
    .benefits-grid article:first-child,
    .benefits-grid article:last-child,
    .benefits-grid article:nth-child(n) {
        padding: 1rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .benefits-grid article:last-child {
        border-bottom: 0;
    }

    .section-heading,
    .business-cta,
    .site-footer,
    .dashboard-welcome,
    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-heading {
        display: flex;
        gap: 1rem;
    }

    .provider-grid,
    .dashboard-grid,
    .account-details,
    .provider-form,
    .provider-form-section-grid {
        grid-template-columns: 1fr;
    }

    .provider-onboarding {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .provider-onboarding-action {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    .provider-form-wide {
        grid-column: auto;
    }

    .provider-form-heading,
    .provider-form-footer,
    .provider-media-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .provider-form-heading > p {
        text-align: left;
    }

    .provider-media-heading p {
        text-align: left;
    }

    .provider-media-grid {
        grid-template-columns: 1fr;
    }

    .provider-form-footer .button {
        width: 100%;
    }

    .business-cta {
        margin-bottom: 4rem;
    }

    .site-footer {
        display: flex;
        text-align: left;
    }

    .site-footer p {
        text-align: left;
    }

    .site-footer nav {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .auth-page {
        padding: 0;
    }

    .auth-layout {
        grid-template-columns: 1fr;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .auth-brand-panel {
        min-height: 14rem;
        padding: 1.25rem;
    }

    .auth-brand-copy {
        display: none;
    }

    .auth-card {
        padding: 2rem 1.25rem 3rem;
    }

    .dashboard-header {
        min-height: auto;
        padding-block: 1.2rem;
    }

    .dashboard-header nav {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-welcome > img {
        position: absolute;
        right: -2rem;
        bottom: -3rem;
        width: 12rem;
        opacity: 0.25;
    }

    .admin-layout {
        display: block;
    }

    .admin-sidebar {
        position: static;
        display: flex;
        width: 100%;
        height: auto;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 1rem;
    }

    .admin-brand .brand-logo {
        width: 9.4rem;
        height: auto;
        object-fit: contain;
    }

    .admin-context,
    .admin-nav {
        display: none;
    }

    .admin-main {
        width: min(100% - 1.5rem, 42rem);
        padding-top: 1.4rem;
    }

    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-user {
        width: 100%;
    }

    .admin-user > div {
        min-width: 0;
        margin-right: auto;
    }

    .admin-hero {
        min-height: 18rem;
        padding: 1.6rem;
    }

    .admin-hero > img {
        position: absolute;
        right: -2rem;
        bottom: -2rem;
        width: 11rem;
        opacity: 0.45;
    }

    .admin-hero > div {
        max-width: 82%;
    }

    .admin-metrics,
    .admin-actions {
        grid-template-columns: 1fr;
    }

    .admin-panel-heading {
        flex-direction: column;
    }
}

/* MVP: publication, commercial status and accessible fields */

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--yellow-500);
    outline-offset: 3px;
}

.autocomplete-field {
    position: relative;
}

.autocomplete-options {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.35rem);
    right: 0;
    left: 0;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.autocomplete-options button,
.autocomplete-empty {
    display: block;
    width: 100%;
    padding: 0.75rem 0.8rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: var(--ink);
    font-size: 0.76rem;
    text-align: left;
}

.autocomplete-options button {
    cursor: pointer;
}

.autocomplete-options button:hover,
.autocomplete-options button:focus-visible {
    background: var(--ice-100);
    color: var(--navy-900);
}

.autocomplete-empty {
    color: var(--muted);
}

.provider-status-card strong[data-state="restricted"] {
    color: var(--danger);
}

.provider-status-card strong[data-state="restricted"]::before {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(169, 50, 50, 0.12);
}

.commercial-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
    background: linear-gradient(145deg, var(--white), var(--ice-100));
}

.commercial-card[hidden],
.notification-card[hidden],
.commercial-action[hidden] {
    display: none;
}

.commercial-summary > p {
    max-width: 48rem;
    margin: 0.8rem 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.65;
}

.status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.status-pills span {
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    background: var(--white);
    color: var(--navy-900);
    font-size: 0.66rem;
    font-weight: 700;
}

.commercial-summary .trial-period {
    margin-bottom: 0;
    color: var(--navy-800);
    font-weight: 600;
}

.commercial-action {
    display: grid;
    min-width: 15rem;
    gap: 0.55rem;
    justify-items: stretch;
}

.commercial-action > strong {
    color: var(--navy-900);
    font-size: 1.35rem;
    text-align: center;
}

.commercial-action small {
    max-width: 18rem;
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.5;
    text-align: center;
}

.commercial-action .plan-original {
    margin-top: -0.35rem;
    color: var(--navy-800);
    font-weight: 600;
}

.payer-email-field {
    display: grid;
    gap: 0.3rem;
    color: var(--navy-800);
    font-size: 0.64rem;
    font-weight: 700;
}

.payer-email-field input {
    width: 100%;
    min-height: 2.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: var(--white);
    color: var(--navy-900);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 500;
}

.commercial-summary .subscription-info {
    margin: 0.7rem 0 0;
    padding: 0.65rem 0.8rem;
    border-radius: 0.7rem;
    background: var(--white);
    color: var(--navy-800);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.55;
}

.commercial-summary .subscription-cancel {
    margin-top: 0.6rem;
    font-size: 0.7rem;
}

.payer-email-field[hidden],
.plan-original[hidden],
.commercial-summary .subscription-info[hidden],
.commercial-summary .subscription-cancel[hidden] {
    display: none;
}

.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
    border-color: #f3cf73;
    background: #fff9e9;
}

.notification-card strong {
    display: block;
    margin: 0.2rem 0 0.3rem;
}

.notification-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .commercial-card {
        grid-template-columns: 1fr;
    }

    .commercial-action {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Conta do usuario: avatar, edicao de dados e troca de senha */
.account-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line);
}

/* Sem foto, o círculo vira a inicial do nome sobre o azul da marca. */
.account-avatar {
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
    width: 4.25rem;
    height: 4.25rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(20, 60, 110, 0.18);
    place-items: center;
    background: linear-gradient(150deg, var(--blue-600), var(--navy-900));
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

.account-avatar > [data-avatar-initial] {
    display: grid;
    width: 101%;
    height: 101%;
    grid-area: 1 / 1;
    padding: 0;
    border-radius: 50%;
    transform: translateY(-0.03em);
    place-items: center;
    background: inherit;
    text-align: center;
}

.account-avatar > [data-avatar-initial][hidden] {
    display: none;
}

.account-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    grid-area: 1 / 1;
    object-fit: cover;
}

.account-avatar-actions {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.account-avatar-actions small {
    width: 100%;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.5;
}

.account-avatar-actions label {
    margin: 0;
    cursor: pointer;
}

.account-email-note {
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.85rem;
    border-left: 3px solid var(--yellow-500);
    border-radius: 0 0.6rem 0.6rem 0;
    background: var(--ice-50);
    color: var(--navy-900);
    font-size: 0.72rem;
    line-height: 1.6;
}

.account-email-note a {
    color: var(--blue-600);
    font-weight: 700;
}

.account-form {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.1rem;
}

.account-form .button {
    justify-self: start;
}

.account-password {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.account-password > summary {
    width: fit-content;
    color: var(--blue-700);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.form-feedback[data-state="success"] {
    color: #128354;
}

/* ---------------------------------------------------------------------
   Movimento do perfil (visitas e pedidos de contato)

   Fica no mesmo cartao da publicacao, ocupando a largura inteira abaixo do
   estado. O cartao e flex: sem o wrap, o bloco tentaria caber ao lado do
   icone e espremeria tudo.
   --------------------------------------------------------------------- */
.provider-status-card {
    flex-wrap: wrap;
}

.provider-stats {
    flex: 1 0 100%;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.provider-stats-title {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.provider-stats-numbers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.provider-stats-numbers div {
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--ice-50);
}

.provider-stats-numbers strong {
    display: block;
    color: var(--navy-900);
    font-size: 1.45rem;
    line-height: 1.1;
}

.provider-stats-numbers strong::before {
    content: none;
}

.provider-stats-numbers span {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

/* Grafico de barras sem biblioteca: uma div por dia, altura proporcional. */
.provider-stats-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 46px;
    margin-top: 0.9rem;
}

.provider-stats-bar {
    flex: 1 1 0;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--cyan-500), var(--blue-700));
}

.provider-stats-bar.is-empty {
    background: var(--line);
}

.provider-stats-note {
    margin: 0.7rem 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

/* Horario e galeria aparecem depois que o perfil existe. Como ficam fora do
   formulario principal, cada cartao reserva o mesmo intervalo das demais
   secoes do painel. */
.hours-card,
.gallery-card {
    margin-top: 1rem;
}

/* Rodape compacto da area logada: mantem a identidade do site publico, mas
   usa a mesma linguagem de cartoes do painel. */
.dashboard-footer {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 1.5rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-sm);
}

.dashboard-footer .brand-logo {
    width: 9.5rem;
}

.dashboard-footer p strong {
    color: var(--navy-900);
    font-size: 0.78rem;
}

.dashboard-footer nav a {
    padding: 0.45rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--ice-50);
    color: var(--navy-800);
    font-size: 0.72rem;
}

.dashboard-footer nav a:hover,
.dashboard-footer nav a:focus-visible {
    border-color: var(--line);
    background: var(--white);
    color: var(--blue-600);
}

/* ---------------------------------------------------------------------
   Galeria de fotos do anunciante
   --------------------------------------------------------------------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.9rem;
    margin-top: 0.4rem;
}

/* Mesmo enquadramento da pagina publica: o anunciante precisa ver aqui o
   que o visitante vai ver la. */
.gallery-item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--ice-50);
    aspect-ratio: 1 / 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-cover {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(11, 47, 120, 0.88);
    color: var(--white);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.gallery-item-actions {
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;
    display: flex;
    gap: 0.3rem;
}

.gallery-item-actions button {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 14px rgba(16, 58, 122, 0.22);
    color: var(--navy-900);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.gallery-item-actions button:disabled {
    opacity: 0.35;
    cursor: default;
}

.gallery-item-actions button:not(:disabled):hover {
    background: var(--white);
    color: var(--blue-700);
}

.gallery-item-actions .gallery-remove:not(:disabled):hover {
    color: var(--danger);
}

.gallery-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 1.6rem 1rem;
    border: 1px dashed var(--line);
    border-radius: 0.9rem;
    background: var(--ice-50);
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

.gallery-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.gallery-actions small {
    color: var(--muted);
    font-size: 0.72rem;
}

.gallery-actions small[data-state="error"] {
    color: var(--danger);
}

.gallery-actions small[data-state="success"] {
    color: var(--blue-700);
}

/* Label nao aceita disabled; sem ponteiro ela deixa de responder ao clique. */
.gallery-actions .is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   Link de recuperacao de senha, sob o formulario de login
   --------------------------------------------------------------------- */
.auth-forgot {
    margin: -0.35rem 0 0;
    text-align: right;
}

.auth-forgot a {
    color: var(--muted);
    font-size: 0.78rem;
    text-decoration: none;
}

.auth-forgot a:hover,
.auth-forgot a:focus-visible {
    color: var(--blue-700);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Horario de atendimento, no painel

   Sete linhas fixas, uma por dia. Campo em branco e "nao informei"; a caixa
   "Fechado" e uma afirmacao. Sao coisas diferentes na pagina publica, entao
   precisam ser distinguiveis aqui.
   --------------------------------------------------------------------- */
.hours-grid {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.hours-row {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(7rem, 1fr) auto auto auto auto;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--ice-50);
}

.hours-day {
    color: var(--navy-900);
    font-size: 0.78rem;
    font-weight: 700;
}

.hours-row input[type="time"] {
    min-height: 2.4rem;
    padding-inline: 0.55rem;
}

.hours-row input[type="time"]:disabled {
    opacity: 0.45;
}

.hours-separator {
    color: var(--muted);
    font-size: 0.74rem;
}

.hours-closed {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

.hours-closed input {
    width: auto;
    min-height: 0;
}

@media (max-width: 620px) {
    .hours-row {
        grid-template-columns: auto auto auto 1fr;
    }

    .hours-day {
        grid-column: 1 / -1;
    }

    .hours-closed {
        justify-content: flex-end;
    }
}