/* ============================================================================
   Sumido: folha unica, sem build, MOBILE PRIMEIRO.

   Linguagem visual: arquivo de memoria com acabamento contemporaneo.
   As tres regras que seguram o conjunto:
   1. O laranja e RARO: acao primaria, marca e estado ativo. Link comum e
      tinta; navegacao e neutra. Quando tudo e laranja, nada e.
   2. Profundidade por UMA camada: fio finissimo OU sombra suave, nunca os
      dois gritando juntos.
   3. O escuro nao e o claro invertido: e carvao quente, com o acento mais
      claro e o texto sobre ele escuro, porque contraste se calcula, nao se
      chuta.
   ========================================================================= */

:root {
    color-scheme: light dark;

    --papel: #faf7f0;
    --superficie: #fffefa;
    --superficie-2: #f1ebdf;
    --tinta: #211b12;
    --tinta-media: #574a3a;
    --tinta-fraca: #8b7c68;
    --linha: #e8e0d0;
    --linha-forte: #d8cdb8;

    --destaque: #b4491e;
    --destaque-escuro: #93370f;
    --destaque-fundo: #f8e9e0;
    --sobre-destaque: #ffffff;
    --enlace: #8a4a22;

    --verde: #3e6b35;      --verde-fundo: #e9f0e4;
    --ambar: #8f6e14;      --ambar-fundo: #f5edd3;
    --ferrugem: #a03a28;   --ferrugem-fundo: #f7e7e2;
    --cinza: #75706a;      --cinza-fundo: #efece6;

    --raio: 14px;
    --raio-p: 10px;
    --sombra: 0 1px 2px rgba(46, 35, 20, .04), 0 10px 30px -18px rgba(46, 35, 20, .28);
    --sombra-alta: 0 2px 6px rgba(46, 35, 20, .06), 0 22px 45px -20px rgba(46, 35, 20, .38);

    /* Altura da barra inferior mais a faixa do iPhone sem botao. */
    --barra: calc(58px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-color-scheme: dark) {
    :root {
        --papel: #131110;
        --superficie: #1c1916;
        --superficie-2: #262119;
        --tinta: #efe8dc;
        --tinta-media: #c6b8a2;
        --tinta-fraca: #94876f;
        --linha: #2c2820;
        --linha-forte: #3a3428;

        --destaque: #e06a38;
        --destaque-escuro: #f08a55;
        --destaque-fundo: #33221a;
        --sobre-destaque: #201009;
        --enlace: #dfa07b;

        --verde: #8fbb80;    --verde-fundo: #22301f;
        --ambar: #d3af56;    --ambar-fundo: #332b14;
        --ferrugem: #e38a75; --ferrugem-fundo: #38201b;
        --cinza: #9c968e;    --cinza-fundo: #2a2723;

        --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -18px rgba(0, 0, 0, .7);
        --sombra-alta: 0 2px 6px rgba(0, 0, 0, .55), 0 24px 50px -20px rgba(0, 0, 0, .8);
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

::selection { background: var(--destaque); color: var(--sobre-destaque); }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font: 16px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
    padding-bottom: calc(var(--barra) + 1rem);
}

h1, h2, h3 {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.15; letter-spacing: -.015em; margin-top: 0;
    text-wrap: balance;
}
h1 { font-size: 1.7rem; margin-bottom: .35rem; }
h2 { font-size: 1.2rem; margin: 2.2rem 0 .8rem; }
h3 { font-size: 1.02rem; }

p { margin: .55rem 0; }

a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:active { opacity: .65; }

:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; border-radius: 4px; }

img { max-width: 100%; }

.container { max-width: 880px; margin: 0 auto; padding: 0 1.1rem; }

/* ---------------------------------------------------------------- cabecalho */
header.topo {
    position: sticky; top: 0; z-index: 900;
    background: color-mix(in srgb, var(--papel) 88%, transparent);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--linha);
    padding-top: env(safe-area-inset-top, 0px);
}
.topo-linha { display: flex; align-items: center; gap: 1.1rem; padding: .7rem 0; }
.marca {
    font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; font-weight: 700;
    color: var(--tinta); text-decoration: none; white-space: nowrap; flex-shrink: 0;
    letter-spacing: -.01em;
}
.marca span { color: var(--destaque); }

/* No celular a busca e a navegacao moram na barra de baixo. */
.topo-busca { display: none; }
.topo-nav { display: none; }

/* ------------------------------------------------------- barra de navegacao */
.barra-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    display: flex; justify-content: space-around; align-items: stretch;
    background: color-mix(in srgb, var(--superficie) 94%, transparent);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid var(--linha);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.barra-inferior a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: .5rem .2rem .35rem;
    min-height: 52px;                     /* alvo de dedo */
    color: var(--tinta-fraca); text-decoration: none;
    font-size: .66rem; font-weight: 500; letter-spacing: .015em;
    position: relative; transition: color .15s;
}
.barra-inferior a svg { width: 22px; height: 22px; stroke-width: 1.6; }
.barra-inferior a.ativo { color: var(--destaque); font-weight: 600; }
.barra-inferior a.ativo::before {
    content: ""; position: absolute; top: 0; width: 18px; height: 2.5px;
    border-radius: 0 0 3px 3px; background: var(--destaque);
}
.barra-inferior .selo-contagem {
    position: absolute; top: .32rem; left: 50%; margin-left: 5px;
    background: var(--ferrugem); color: var(--papel); font-size: .58rem; font-weight: 700;
    min-width: 15px; height: 15px; line-height: 15px; border-radius: 99px;
    padding: 0 4px; text-align: center;
}

/* ------------------------------------------------------------- formularios */
input, select, button, textarea {
    font: inherit; color: inherit;
    border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
    font-size: 16px;                      /* Safari nao da zoom no foco */
    padding: .62rem .8rem; background: var(--superficie);
    transition: border-color .15s, box-shadow .15s, background .15s;
    min-height: 44px;
}
textarea { min-height: 88px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--tinta-fraca); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--destaque);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destaque) 18%, transparent);
}

button.principal, a.botao {
    background: var(--destaque);
    border: 1px solid color-mix(in srgb, var(--destaque) 80%, black);
    color: var(--sobre-destaque); cursor: pointer;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
    gap: .45rem; font-weight: 600; padding: .62rem 1.25rem;
    border-radius: var(--raio-p);
    transition: transform .1s, filter .15s, box-shadow .15s;
}
button.principal:hover, a.botao:hover { filter: brightness(1.06); box-shadow: var(--sombra); }
button.principal:active, a.botao:active { transform: scale(.98); filter: brightness(.95); }

button.discreta {
    background: none; border: none; color: var(--tinta-fraca); cursor: pointer;
    padding: .35rem .5rem; min-height: 40px; border-radius: 8px;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
button.discreta:hover { color: var(--ferrugem); background: var(--cinza-fundo); text-decoration: none; }

label { display: block; font-size: .86rem; margin: .95rem 0 .3rem; color: var(--tinta-media); font-weight: 500; }
.campo-erro { color: var(--ferrugem); font-size: .85rem; margin-top: .25rem; }
form .linha-campos { display: flex; gap: .8rem; flex-wrap: wrap; }
form .linha-campos > div { flex: 1; min-width: 132px; }

/* ------------------------------------------------------- cartoes e recados */
.cartao {
    background: var(--superficie); border: 1px solid var(--linha);
    border-radius: var(--raio); padding: 1.15rem 1.25rem; margin: .9rem 0;
}
.aviso {
    border-left: 3px solid var(--ambar); background: var(--ambar-fundo);
    padding: .8rem 1rem; border-radius: 0 var(--raio-p) var(--raio-p) 0; margin: 1rem 0;
    color: var(--tinta);
}
.aviso.extinto { border-left-color: var(--ferrugem); background: var(--ferrugem-fundo); }
.flash-sucesso {
    background: var(--verde-fundo); border: 1px solid color-mix(in srgb, var(--verde) 40%, transparent);
    color: var(--verde); padding: .7rem 1rem; border-radius: var(--raio-p); margin: 1rem 0;
    animation: entra .3s ease-out;
}
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }

/* Selo de status: tinta sobre fundo tingido, sem contorno berrando. */
.selo {
    display: inline-block; font-size: .66rem; font-weight: 650;
    padding: .28rem .6rem; border-radius: 99px; border: none;
    vertical-align: 2px; text-transform: uppercase; letter-spacing: .07em;
    white-space: nowrap;
}
.selo.ativo { color: var(--verde); background: var(--verde-fundo); }
.selo.paralisado { color: var(--ambar); background: var(--ambar-fundo); }
.selo.extinto, .selo.demolido { color: var(--ferrugem); background: var(--ferrugem-fundo); }
.selo.desconhecido { color: var(--cinza); background: var(--cinza-fundo); }

/* -------------------------------------------------------------- estado vazio */
.estado-vazio { text-align: center; padding: 2.2rem 1.4rem; }
.estado-vazio svg { width: 88px; height: 88px; margin-bottom: .6rem; color: var(--destaque); }
.estado-vazio h2 { margin: 0 0 .5rem; }
.estado-vazio p { max-width: 30rem; margin-left: auto; margin-right: auto; }
.estado-vazio .acao { margin-top: 1.2rem; }

/* -------------------------------------------------------------------- home */
.heroi { text-align: center; padding: 2.4rem 0 1.2rem; }
.heroi h1 {
    font-size: clamp(2rem, 7.5vw, 3rem); line-height: 1.06;
    letter-spacing: -.02em; margin-bottom: .6rem;
}
.heroi h1 em, .heroi h1 span { color: var(--destaque); font-style: normal; }
.heroi p.sub { color: var(--tinta-media); font-size: 1.02rem; max-width: 33rem; margin: 0 auto 1.5rem; }
/* O eco vem menor e mais claro: e um aceno, nao a manchete. Resolve o
   masculino generico da linha de cima sem virar aviso de rodape.
   Precisa vencer a regra `.heroi h1 span` que pinta de destaque, senao o
   aceno rouba a cor da palavra que importa e o acento deixa de ser raro. */
.heroi h1 span.heroi-eco {
    display: block; margin-top: .15em;
    font-size: .5em; color: var(--tinta-fraca);
    font-weight: 600; letter-spacing: 0;
}
.busca-grande {
    display: flex; gap: .45rem; max-width: 40rem; margin: 0 auto; flex-wrap: wrap;
    background: var(--superficie); border: 1px solid var(--linha);
    border-radius: var(--raio); padding: .45rem; box-shadow: var(--sombra-alta);
}
.busca-grande input[name=q] { flex: 1 1 100%; border: none; background: none; box-shadow: none; }
.busca-grande input[name=q]:focus { box-shadow: none; }
.busca-grande select { flex: 1; border: none; background: none; }
.busca-grande button { flex: 1; }

.numeros { display: flex; justify-content: center; gap: 0; margin: 2.2rem 0 1.6rem; }
.numero { text-align: center; padding: .2rem 1.1rem; border: none; background: none; }
.numero + .numero { border-left: 1px solid var(--linha-forte); }
.numero strong {
    display: block; font-size: clamp(1.3rem, 4.5vw, 1.8rem);
    font-family: "Fraunces", Georgia, serif; color: var(--tinta); line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.numero small { color: var(--tinta-fraca); font-size: .72rem; display: block; margin-top: .2rem; max-width: 9rem; }
.acoes-home {
    display: flex; flex-direction: column; align-items: center; gap: .8rem;
    margin: 0 0 2rem;
}
.passos { display: grid; gap: .8rem; }
.passos .cartao h3 { color: var(--destaque); }

/* --------------------------------------------------------- busca e listas */
.resultado { padding: .95rem 1.1rem; position: relative; transition: transform .18s ease, box-shadow .2s ease; }
.resultado h3 { margin: 0 0 .2rem; font-size: 1.05rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.resultado h3 a { text-decoration: none; color: var(--tinta); }
.resultado h3 a:hover { color: var(--destaque); }
.resultado .onde { color: var(--tinta-fraca); font-size: .87rem; margin: 0; }

/* O cartao inteiro e clicavel, e nao so o nome.
 *
 * O alvo antigo era o texto do titulo: um alvo estreito dentro de um cartao
 * alto. No celular a pessoa toca no cartao, fora das letras, e nada acontece.
 * O ::after cobre o cartao sem mexer no HTML e sem duplicar o link, o que
 * faria o leitor de tela anunciar o mesmo destino duas vezes. */
.resultado h3 a::after { content: ""; position: absolute; inset: 0; }

/* Realce ao passar o mouse.
 *
 * Fica em `@media (hover: hover)`, e nao numa media query de LARGURA como
 * estava. A diferenca aparece nas pontas, e nas duas o antigo errava: numa
 * janela de desktop com menos de 768px nao havia realce nenhum, e num tablet
 * de 1024 havia realce sem mouse para aciona-lo, o que em toque gruda no
 * cartao ate o proximo clique em outro lugar.
 *
 * A profundidade e UMA so, como manda a regra 2 da linguagem visual: sombra,
 * sem mexer no fio junto. O que acende o cartao e a soma de erguer dois
 * pixels, a sombra aparecendo por baixo e o nome indo para o laranja -- que
 * aqui e legitimo, porque hover e estado ativo, e nao decoracao. */
@media (hover: hover) {
    .resultado:hover, .cartao-indice:hover {
        transform: translateY(-2px);
        box-shadow: var(--sombra-alta);
    }
    .resultado:hover h3 a { color: var(--destaque); }
    .foto-cartao:hover { transform: rotate(0) scale(1.03); box-shadow: var(--sombra-alta); z-index: 5; }
}

/* O teclado tem que ver o mesmo que o mouse. Sem isto, quem navega por Tab
 * enxerga so o anel de foco no texto, e nao percebe qual cartao esta ativo. */
.resultado:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--sombra-alta);
}
.nome-antigo-nota {
    font-size: .86rem; color: var(--tinta-media); margin: .5rem 0 0;
    border-left: 2px solid var(--linha-forte); padding-left: .6rem;
}

.ficha-cabecalho { padding-top: 1.2rem; }
.ficha-cabecalho .onde { color: var(--tinta-fraca); font-size: .92rem; }
.ja-se-chamou { padding-left: 1.1rem; }
.ja-se-chamou li { margin: .3rem 0; }

.decadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.decada {
    border: 1px solid var(--linha); border-radius: var(--raio-p); padding: .85rem .95rem;
    background: var(--superficie);
}
.decada h3 {
    margin: 0 0 .4rem; font-family: "Inter", sans-serif; font-size: .68rem;
    font-weight: 650; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-fraca);
}
.decada ul { margin: 0; padding-left: 1rem; font-size: .89rem; }
.decada .mais { color: var(--tinta-fraca); font-size: .82rem; margin: .4rem 0 0; }
.nota-privacidade { font-size: .84rem; color: var(--tinta-fraca); }
.epoca-lista { border-left: 3px solid var(--destaque); }

/* ------------------------------------------- fotos: polaroides sobre a mesa */
.grade-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem; margin: 1.1rem 0; }
.foto-cartao {
    margin: 0; background: #fffdf7; border: 1px solid var(--linha);
    border-radius: 4px; padding: .55rem .55rem 0; box-shadow: var(--sombra);
    transform: rotate(-.8deg); transition: transform .18s, box-shadow .2s;
    position: relative;
}
.foto-cartao:nth-child(even) { transform: rotate(1deg); }
.foto-cartao:active { transform: rotate(0) scale(1.02); }
.foto-cartao::before {
    content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-2deg);
    width: 58px; height: 18px; background: color-mix(in srgb, var(--ambar) 26%, transparent);
    border-left: 1px dashed color-mix(in srgb, var(--tinta) 18%, transparent);
    border-right: 1px dashed color-mix(in srgb, var(--tinta) 18%, transparent);
}
.foto-cartao img { width: 100%; height: 145px; object-fit: cover; display: block; background: var(--superficie-2); }
.foto-cartao figcaption { padding: .5rem .15rem .7rem; font-size: .82rem; color: #2a2118; }

/* ------------------------------------------------------------- lembrancas */
.lembranca { background: var(--superficie-2); border-color: transparent; }
.lembranca > p:first-child { font-family: "Fraunces", Georgia, serif; font-size: 1.04rem; margin-top: 0; }

/* --------------------------------------------------------- utilitarios */
.esqueleto {
    background: linear-gradient(90deg, var(--superficie-2) 25%, var(--linha) 50%, var(--superficie-2) 75%);
    background-size: 200% 100%; animation: brilho 1.4s infinite; border-radius: var(--raio-p);
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.rolagem-lado {
    display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .4rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.rolagem-lado::-webkit-scrollbar { display: none; }
.rolagem-lado > * { scroll-snap-align: start; flex: 0 0 78%; }

/* --------------------------------------------------- indice por estado/cidade */
.grade-indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: 1rem 0; }
.cartao-indice {
    display: flex; flex-direction: column; gap: .15rem;
    background: var(--superficie); border: 1px solid var(--linha);
    border-radius: var(--raio-p); padding: .8rem .95rem; min-height: 58px;
    text-decoration: none; color: var(--tinta);
    transition: transform .18s ease, box-shadow .2s ease;
}
.cartao-indice strong { font-size: .95rem; }
.cartao-indice:active { transform: scale(.98); }

/* Chips de raio: o ativo e TINTA, nao laranja. O laranja e para acao. */
.chip-raio {
    display: inline-block; margin: .15rem .3rem .15rem 0; padding: .34rem .75rem;
    border: 1px solid var(--linha-forte); border-radius: 99px;
    background: var(--superficie); text-decoration: none; font-size: .84rem;
    color: var(--tinta-media);
}
.chip-raio.ativo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); font-weight: 600; }

/* ------------------------------------------------------------------ rodape */
footer.rodape {
    margin-top: 3rem; padding: 1.6rem 0 2rem; border-top: 1px solid var(--linha);
    color: var(--tinta-fraca); font-size: .84rem; background: var(--superficie);
}
footer.rodape a { color: var(--tinta-fraca); }
footer.rodape a:hover { color: var(--tinta); }

.cartao-estreito { max-width: 27rem; margin: 1.5rem auto; }

.passagem-item {
    display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
    padding: .7rem 0; border-bottom: 1px solid var(--linha);
}
.passagem-item:last-child { border-bottom: none; }

/* Pagina curta nao deixa o rodape flutuando no meio da tela. */
main.container { min-height: calc(100dvh - var(--barra) - 21rem); }

/* ================================================================= DESKTOP */
@media (min-width: 768px) {
    body { padding-bottom: 0; }
    .barra-inferior { display: none; }

    .topo-linha { padding: .8rem 0; gap: 1.4rem; }
    .marca { font-size: 1.28rem; }
    .container { padding: 0 1.4rem; }

    /* Busca do topo: pilula discreta, largura contida, sem botao gritando. */
    .topo-busca { display: flex; flex: 0 1 300px; }
    .topo-busca input {
        flex: 1; min-width: 0; border-radius: 999px;
        background: var(--superficie-2); border-color: transparent;
        min-height: 40px; padding: .45rem 1.05rem; font-size: .92rem;
    }
    .topo-busca input:focus { background: var(--superficie); border-color: var(--destaque); }
    .topo-busca button { display: none; }   /* Enter envia; o botao so ocupava */

    /* Navegacao neutra; o unico laranja e o botao de criar conta. */
    .topo-nav { display: flex; gap: 1.35rem; align-items: center; font-size: .92rem; margin-left: auto; }
    .topo-nav a { text-decoration: none; color: var(--tinta-media); font-weight: 500; white-space: nowrap; }
    .topo-nav a:hover { color: var(--tinta); }
    .topo-nav a.botao { color: var(--sobre-destaque); padding: .5rem 1.05rem; font-size: .9rem; }
    .topo-nav form { display: inline; }

    h1 { font-size: 2.05rem; }
    h2 { font-size: 1.3rem; }

    .heroi { padding: 4rem 0 2rem; }
    .heroi p.sub { font-size: 1.1rem; }
    .busca-grande { flex-wrap: nowrap; padding: .5rem; }
    .busca-grande input[name=q] { flex: 3 1 auto; padding: .8rem 1rem; font-size: 1.02rem; }
    .busca-grande select, .busca-grande button { flex: 0 0 auto; }
    .numero { padding: .2rem 1.8rem; }
    .acoes-home { flex-direction: row; justify-content: center; gap: 1.4rem; }
    .passos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }

    .foto-cartao img { height: 180px; }
    .grade-fotos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.4rem; }
    .decadas { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem; }
    .grade-indice { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .cartao { padding: 1.3rem 1.5rem; }
    .rolagem-lado > * { flex: 0 0 auto; }
}

/* No escuro, os tiles claros do OpenStreetMap viravam um retangulo aceso no
   meio da pagina. O filtro inverte e dessatura: o mapa vira noturno sem
   trocar de provedor. So os tiles; os pins e popups ficam como estao. */
@media (prefers-color-scheme: dark) {
    .leaflet-layer .leaflet-tile {
        filter: brightness(.65) invert(1) contrast(.82) hue-rotate(185deg) saturate(.35);
    }
    .leaflet-container { background: var(--superficie-2); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
    .foto-cartao { transform: none; }
}