/* Fonte oficial da marca (hospedada no proprio site, pasta fonts/) */
@font-face {
    font-family: 'Advercase';
    src: url('fonts/advercase-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Advercase';
    src: url('fonts/advercase-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Identidade visual "Fronteiras que conectam a Cristo" (estampa) */
    --verde-900: #0b2215;
    --verde-800: #122d1e;
    --verde-700: #1b3a28;
    --verde-600: #2e5139;
    --areia: #c9d780;        /* verde-limao da estampa */
    --areia-clara: #fef5e2;  /* creme da estampa */
    --creme: #fef5e2;
    --limao-escuro: #5f7424; /* limao legivel sobre o creme */
    --texto: #22262220;
    --fonte-titulo: 'Advercase', Georgia, 'Times New Roman', serif;
    --fonte-rotulo: 'Advercase', Georgia, 'Times New Roman', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.65;
    color: #2a2e2a;
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
}

/* ===== ANIMACOES ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ===== ESTRUTURA DE SECAO ===== */
.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 6rem 0;
}

/* Alterna fundo claro e escuro ao longo da pagina */
.sec-escura {
    background: var(--verde-800);
    color: #e8eae6;
}

.sec-clara {
    background: var(--creme);
    color: #2a2e2a;
}

.sec-branca {
    background: #fff;
}

/* Cabecalho de secao: alinhado a esquerda, com kicker acima */
.sec-kicker {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--areia);
    margin-bottom: 1.2rem;
}

/* Traco antes do texto, para o rotulo ganhar peso */
.sec-kicker::before {
    content: '';
    width: 2.5rem;
    height: 3px;
    background: currentColor;
    flex-shrink: 0;
}

/* Em fundo claro o areia fica fraco: usa um tom mais escuro */
.sec-clara .sec-kicker,
.sec-branca .sec-kicker {
    color: var(--limao-escuro);
}

.chamada-final .sec-kicker { justify-content: center; }

section h2 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin-bottom: 1.2rem;
    max-width: 18ch;
}

.sec-escura h2 { color: #fff; }
.sec-clara h2,
.sec-branca h2 { color: var(--verde-700); }

.sec-intro {
    font-size: 1.1rem;
    max-width: 56ch;
    opacity: 0.85;
    margin-bottom: 3.5rem;
}

/* ===== HEADER ===== */
header {
    background: rgba(11, 34, 21, 0.96);
    backdrop-filter: blur(8px);
    color: white;
    padding: 1.1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .logo {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 1.6rem;
    align-items: center;
}

nav li { white-space: nowrap; }

nav a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.25s;
}

nav a:hover { color: var(--areia-clara); }

/* ===== HERO ===== */
.hero {
    background: var(--verde-900);
    color: white;
    padding: 7rem 0 6rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(201, 215, 128, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 90%, rgba(46, 81, 57, 0.5) 0%, transparent 55%);
    pointer-events: none;
}

.hero .wrap {
    position: relative;
    z-index: 1;
}

.hero-kicker {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--areia);
    animation: fadeInUp 0.7s ease-out;
}

.hero h1 {
    font-size: clamp(3.5rem, 11vw, 7.5rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-weight: 800;
    margin: 1.2rem 0 1.8rem;
    animation: fadeInUp 0.7s ease-out 0.1s backwards;
}

.hero-lead {
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    max-width: 34ch;
    opacity: 0.82;
    line-height: 1.5;
    animation: fadeInUp 0.7s ease-out 0.2s backwards;
}

.hero-paises {
    display: flex;
    gap: 1.6rem;
    margin: 2.5rem 0;
    flex-wrap: wrap;
    animation: fadeInUp 0.7s ease-out 0.3s backwards;
}

.hero-pais {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    animation: fadeInUp 0.7s ease-out 0.4s backwards;
}

.btn {
    padding: 1rem 2.2rem;
    border: 2px solid transparent;
    border-radius: 2px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.25s ease;
}

.btn-primary {
    background: var(--areia);
    color: var(--verde-900);
}

.btn-primary:hover {
    background: var(--areia-clara);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-secondary:hover {
    border-color: var(--areia);
    color: var(--areia-clara);
    transform: translateY(-2px);
}

/* ===== FAIXA DE NUMEROS ===== */
.numeros {
    background: var(--verde-700);
    padding: 0;
}

.numeros-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.numero-item {
    padding: 3.2rem 24px;
    color: white;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.numero-item:last-child { border-right: none; }

.numero-valor {
    display: block;
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--areia-clara);
}

.numero-label {
    display: block;
    margin-top: 0.7rem;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.72;
}

/* ===== BANDEIRAS SVG ===== */
.bandeira {
    width: 1.9em;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    vertical-align: middle;
}

.bandeira-sprite { display: none; }

/* ===== SOBRE ===== */
.sobre-content {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 4rem;
    align-items: start;
}

.sobre-text h3 {
    font-size: 1.5rem;
    color: var(--verde-700);
    margin-bottom: 1.2rem;
    letter-spacing: -0.01em;
}

.sobre-text p { margin-bottom: 1rem; }

/* Painel do Brasil como base de envio */
.base-envio {
    background: var(--verde-800);
    color: white;
    padding: 2.5rem 2rem;
    border-top: 4px solid var(--areia);
    animation: slideInRight 0.7s ease-out;
}

.base-envio .bandeira {
    width: 3.2rem;
    margin-bottom: 1.2rem;
}

.base-envio strong {
    display: block;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

.base-rotulo {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--areia);
}

.base-texto {
    margin-top: 1.2rem;
    font-size: 0.92rem;
    opacity: 0.8;
    line-height: 1.6;
}

/* Texto que o usuario ainda precisa preencher */
.placeholder {
    color: #9a9a92;
    font-style: italic;
    border-left: 3px solid #d7d4c8;
    padding-left: 1rem;
}

/* ===== MAPA ===== */
.mapa-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.mapa-leaflet {
    width: 100%;
    /* 600px e o minimo para a regiao (lat -56 a -18,5) caber no zoom 4.
       Com menos que isso o Leaflet cai para o zoom 3 e sobra oceano. */
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    animation: slideInLeft 0.7s ease-out;
}

.mapa-offline {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--verde-700);
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    padding: 2rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.info-paises {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: slideInRight 0.7s ease-out;
}

/* Card de dados do pais selecionado */
.card-info {
    background: #fff;
    color: #2a2e2a;
    border-top: 4px solid var(--areia);
}

.card-header {
    padding: 1.4rem 1.8rem;
    border-bottom: 1px solid #e7e4da;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.card-header h3 {
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: var(--verde-700);
    margin: 0;
}

.card-body {
    padding: 1.8rem;
    min-height: 180px;
    font-size: 0.94rem;
    line-height: 1.75;
    color: #4a4f4a;
}

/* Lista de paises ao lado do mapa */
.info-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.info-item {
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid transparent;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    align-items: center;
    transition: all 0.25s ease;
}

.info-item:hover {
    background: rgba(255, 255, 255, 0.11);
}

.info-item.active {
    background: rgba(255, 255, 255, 0.14);
    border-left-color: var(--areia);
}

.info-item .bandeira { width: 2.1rem; }

.info-item h4 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
}

.info-item p {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* Brasil e base de envio, nao campo */
.info-item.base p { color: var(--areia); }

/* ===== BARREIRAS ===== */
.barreiras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2rem;
}

.barreira {
    background: #fff;
    padding: 2.2rem 2rem;
    border-top: 4px solid var(--verde-600);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.barreira:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(11, 34, 21, 0.12);
    border-top-color: var(--areia);
}

.barreira-topo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.4rem;
}

.barreira-pais {
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8c8f88;
    font-weight: 700;
}

.barreira h3 {
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--verde-700);
    margin-bottom: 0.9rem;
}

.barreira > p {
    flex-grow: 1;
    font-size: 0.95rem;
    color: #55594f;
}

.barreira-dados {
    margin-top: 1.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid #ebe8de;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dado-linha {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    font-size: 0.85rem;
    color: #7b7f76;
}

.dado-valor {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--verde-700);
    min-width: 3.4rem;
    letter-spacing: -0.02em;
}

/* ===== CONTATO ===== */
.contato-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

.contato-button {
    padding: 1rem 2.2rem;
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: white;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

.contato-button:hover {
    border-color: var(--areia);
    color: var(--areia-clara);
    transform: translateY(-2px);
}

.sec-escura .placeholder {
    color: rgba(255, 255, 255, 0.5);
    border-left-color: rgba(255, 255, 255, 0.2);
}

/* ===== FOOTER ===== */
footer {
    background: var(--verde-900);
    color: rgba(255, 255, 255, 0.65);
    padding: 2.5rem 0;
    font-size: 0.88rem;
}

footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-fontes { opacity: 0.6; }

/* ===== RESPONSIVO ===== */
@media (max-width: 900px) {
    section { padding: 4rem 0; }

    nav ul { gap: 1.1rem; }
    nav a { font-size: 0.82rem; }

    .sobre-content,
    .mapa-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .mapa-leaflet { height: 380px; }

    .numero-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2.2rem 24px;
    }

    .btn { width: 100%; text-align: center; }

    footer .wrap { flex-direction: column; }
}

@media (max-width: 560px) {
    /* Em telas estreitas o menu quebra em duas linhas em vez de espremer */
    nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    nav ul {
        gap: 1.3rem;
        flex-wrap: wrap;
    }

    .hero { padding: 4rem 0 3.5rem; }

    .hero-paises { gap: 1rem 1.4rem; }
}
/* ===== VERSICULO ===== */
.versiculo {
    border-left: 3px solid var(--areia);
    padding-left: 1.2rem;
    font-style: italic;
    font-size: 1.05rem;
    opacity: 0.85;
    margin: 2rem 0;
    max-width: 46ch;
}

.versiculo cite {
    display: block;
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--areia);
    margin-top: 0.6rem;
}

/* ===== FRASE DE DESTAQUE ===== */
.destaque {
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.35;
    letter-spacing: -0.02em;
    font-weight: 700;
    max-width: 34ch;
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 2px solid var(--areia);
}

.sec-escura .destaque { color: #fff; }
.sec-clara .destaque,
.sec-branca .destaque { color: var(--verde-700); }

/* ===== TEXTO COMPLEMENTAR DO HERO ===== */
.hero-complemento {
    max-width: 46ch;
    margin-top: 1rem;
    font-size: 1rem;
    opacity: 0.62;
    line-height: 1.6;
    animation: fadeInUp 0.7s ease-out 0.25s backwards;
}

/* ===== FORMULARIO ===== */
.formulario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    margin-top: 1rem;
    max-width: 760px;
}

.campo { display: flex; flex-direction: column; }

.campo-largo { grid-column: 1 / -1; }

.campo label {
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--areia);
    margin-bottom: 0.5rem;
}

.campo input,
.campo select,
.campo textarea {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    padding: 0.85rem 1rem;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.25s, background 0.25s;
}

.campo textarea { resize: vertical; }

.campo select option { background: var(--verde-800); color: #fff; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--areia);
    background: rgba(255, 255, 255, 0.11);
}

/* Campo invalido so fica vermelho depois da primeira tentativa de envio */
.formulario.validar input:invalid,
.formulario.validar textarea:invalid {
    border-color: #c97a6a;
}

.consentimento label {
    flex-direction: row;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
    cursor: pointer;
}

.consentimento input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex-shrink: 0; }

.form-retorno {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--areia-clara);
    min-height: 1.3rem;
}

@media (max-width: 700px) {
    .formulario { grid-template-columns: 1fr; }
}

/* ===== SUB-TITULO DENTRO DE UMA SECAO ===== */
.sub-titulo {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 4.5rem 0 0.8rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    max-width: 24ch;
}

.sec-escura .sub-titulo { color: #fff; }

.sec-clara .sub-titulo,
.sec-branca .sub-titulo {
    color: var(--verde-700);
    border-top-color: #e0ddd2;
}

.sub-intro {
    max-width: 56ch;
    opacity: 0.82;
    margin-bottom: 2rem;
    font-size: 1rem;
}

/* ===== TEXTO CORRIDO ===== */
.texto-bloco {
    max-width: 62ch;
    font-size: 1.02rem;
}

.texto-bloco p + p { margin-top: 1.1rem; }

/* ===== MISSAO / VISAO / PROPOSITO ===== */
.mvp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.mvp-item {
    border-top: 3px solid var(--areia);
    padding-top: 1.4rem;
}

.mvp-item h4 {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--areia);
    margin-bottom: 0.8rem;
}

.mvp-item p { font-size: 0.97rem; opacity: 0.88; }

/* ===== ETAPAS DA MISSAO ===== */
.etapas {
    counter-reset: etapa;
    margin-top: 1rem;
}

.etapa {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1.5rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    align-items: start;
}

.sec-clara .etapa,
.sec-branca .etapa { border-top-color: #e0ddd2; }

.etapa:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

.sec-clara .etapa:last-child,
.sec-branca .etapa:last-child { border-bottom-color: #e0ddd2; }

.etapa-num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--areia);
    opacity: 0.55;
}

.etapa h3 {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

.sec-escura .etapa h3 { color: #fff; }
.sec-clara .etapa h3,
.sec-branca .etapa h3 { color: var(--verde-700); }

.etapa p { font-size: 0.95rem; opacity: 0.82; max-width: 60ch; }

/* ===== CARDS DE PARTICIPACAO ===== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.card-acao {
    background: rgba(255, 255, 255, 0.055);
    border-top: 3px solid var(--areia);
    padding: 2.2rem 1.9rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.sec-clara .card-acao,
.sec-branca .card-acao {
    background: #fff;
    box-shadow: 0 2px 14px rgba(11, 34, 21, 0.06);
}

.card-acao:hover { transform: translateY(-5px); }

.card-acao h3 {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.9rem;
}

.sec-escura .card-acao h3 { color: #fff; }
.sec-clara .card-acao h3,
.sec-branca .card-acao h3 { color: var(--verde-700); }

.card-acao p {
    flex-grow: 1;
    font-size: 0.94rem;
    opacity: 0.84;
    margin-bottom: 1.6rem;
}

.link-acao {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--areia);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    align-self: flex-start;
    transition: border-color 0.25s;
}

.sec-clara .link-acao,
.sec-branca .link-acao { color: var(--verde-600); }

.link-acao:hover { border-bottom-color: currentColor; }

/* ===== TERRITORIOS ===== */
.territorios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.6rem;
    margin-top: 3rem;
}

.territorio {
    border-top: 3px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.3rem;
}

.territorio.ativo { border-top-color: var(--areia); }

.territorio-topo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.territorio-topo .bandeira { width: 1.7rem; }

.territorio h4 {
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -0.01em;
}

.territorio-etapa {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--areia);
    margin-bottom: 0.5rem;
}

.territorio p { font-size: 0.9rem; opacity: 0.8; }

/* ===== BENEFICIOS (EMPRESARIOS) ===== */
.beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.8rem;
    margin-top: 1rem;
    list-style: none;
}

.beneficio {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 1.3rem;
}

.beneficio-num {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--areia);
    margin-bottom: 0.5rem;
}

.beneficio h4 {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.45rem;
}

.beneficio p { font-size: 0.9rem; opacity: 0.8; }

/* ===== VALOR DESTAQUE ===== */
.valor-destaque {
    margin: 3rem 0 1rem;
    padding: 2rem 0;
    border-top: 2px solid var(--areia);
    border-bottom: 2px solid var(--areia);
    max-width: 44ch;
}

.valor-numero {
    display: block;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--areia-clara);
}

.valor-obs {
    display: block;
    margin-top: 0.8rem;
    font-size: 0.9rem;
    opacity: 0.75;
}

/* ===== CATEGORIAS DE NOTICIAS ===== */
.categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
    list-style: none;
}

.categorias li {
    padding: 0.55rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.sec-clara .categorias li,
.sec-branca .categorias li {
    border-color: #d8d4c6;
    color: #5d6159;
}

/* ===== AVISO (itens ainda nao implementados) ===== */
.aviso-implantacao {
    margin-top: 2.5rem;
    padding: 1.1rem 1.3rem;
    border-left: 3px solid var(--areia);
    background: rgba(201, 215, 128, 0.09);
    font-size: 0.88rem;
    opacity: 0.85;
    max-width: 62ch;
}

/* ===== CHAMADA FINAL ===== */
.chamada-final { text-align: center; }

.chamada-final h2 {
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
}

.chamada-final .texto-bloco {
    margin-left: auto;
    margin-right: auto;
}

.chamada-final .destaque {
    margin-left: auto;
    margin-right: auto;
    border-top: none;
    padding-top: 0;
}

.chamada-final .cta-buttons { justify-content: center; }

/* ===== BOTAO FIXO DO MENU ===== */
.nav-cta {
    padding: 0.55rem 1.2rem !important;
    background: var(--areia);
    color: var(--verde-900) !important;
    font-size: 0.76rem !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 0.25s;
}

.nav-cta:hover { background: var(--areia-clara); color: var(--verde-900) !important; }

/* ===== RODAPE EM COLUNAS ===== */
footer .wrap {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.footer-marca strong {
    display: block;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 0.02em;
}

.footer-assinatura {
    display: block;
    color: var(--areia);
    font-size: 0.85rem;
    margin: 0.3rem 0 0.9rem;
}

.footer-col h5 {
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--areia);
    margin-bottom: 0.9rem;
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 0.45rem; }

.footer-col a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.25s;
}

.footer-col a:hover { color: var(--areia-clara); }

.footer-base {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    opacity: 0.6;
}

@media (max-width: 900px) {
    .etapa { grid-template-columns: 3.5rem 1fr; gap: 1rem; }
    .etapa-num { font-size: 1.7rem; }
    footer .wrap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    footer .wrap { grid-template-columns: 1fr; gap: 1.8rem; }
    .nav-cta { display: none; }
}

/* =========================================================
   SITE DE VARIAS PAGINAS
   ========================================================= */

/* Logo virou link para o inicio */
nav .logo { color: #fff; text-decoration: none; }

nav ul.menu { gap: 1.3rem; }
nav ul.menu a { font-size: 0.86rem; }
nav ul.menu a.ativo { color: var(--areia-clara); }
nav ul.menu a.nav-cta.ativo { color: var(--verde-900) !important; }

.menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 0.45rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Com 8 itens o menu nao cabe em telas medias: recolhe abaixo de 1100px */
@media (max-width: 1100px) {
    nav { flex-wrap: wrap; flex-direction: row !important; align-items: center !important; }
    .menu-toggle { display: block; }
    nav ul.menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
        padding: 1.2rem 0 0.4rem;
    }
    nav.aberto ul.menu { display: flex; }
    nav ul.menu a { font-size: 0.95rem; }
    .nav-cta { display: inline-block !important; }
}

/* Abertura das paginas internas: mesma linguagem do hero, mais baixa */
.hero.hero-pagina { padding: 5.5rem 0 4.5rem; }
.hero.hero-pagina h1 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); max-width: 18ch; line-height: 1; }

/* Botoes ao final de uma secao */
.acoes-secao { margin-top: 2.5rem; }
.sec-clara .btn-secondary,
.sec-branca .btn-secondary { color: var(--verde-700); border-color: rgba(27, 58, 40, 0.35); }
.sec-clara .btn-secondary:hover,
.sec-branca .btn-secondary:hover { color: var(--verde-900); border-color: var(--verde-700); }

/* Cards de acao com botao no rodape */
.card-acao .btn { margin-top: auto; align-self: flex-start; padding: 0.8rem 1.4rem; font-size: 0.78rem; }

/* Lista simples com marcador em areia */
.lista-destaques { list-style: none; margin: 1.5rem 0; max-width: 62ch; }
.lista-destaques li {
    padding: 0.7rem 0 0.7rem 1.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
}
.sec-clara .lista-destaques li,
.sec-branca .lista-destaques li { border-bottom-color: #e3dfd3; }
.lista-destaques li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.25rem;
    width: 0.6rem;
    height: 2px;
    background: var(--areia);
}

/* Noticias */
.noticias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}
.noticia-card {
    background: #fff;
    border-top: 3px solid var(--verde-600);
    display: flex;
    flex-direction: column;
}
.noticia-imagem {
    aspect-ratio: 16 / 9;
    background:
        repeating-linear-gradient(135deg, #ece8dc 0 12px, #e4dfd0 12px 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9b9786;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.noticia-corpo { padding: 1.6rem; display: flex; flex-direction: column; flex-grow: 1; }
.noticia-cat {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--areia);
    font-weight: 700;
    margin-bottom: 0.6rem;
}
.noticia-corpo h3 { color: var(--verde-700); font-size: 1.1rem; line-height: 1.3; margin-bottom: 0.6rem; }
.noticia-corpo p { color: #6b6f66; font-size: 0.9rem; flex-grow: 1; margin-bottom: 1.2rem; }

/* Formularios em secao clara */
.sec-clara .campo input,
.sec-clara .campo select,
.sec-clara .campo textarea,
.sec-branca .campo input,
.sec-branca .campo select,
.sec-branca .campo textarea {
    background: #fff;
    border-color: #d8d4c6;
    color: #2a2e2a;
}
.sec-clara .campo label,
.sec-branca .campo label { color: var(--verde-600); }
.sec-clara .consentimento label,
.sec-branca .consentimento label { color: #5d6159; }
.sec-clara .form-retorno,
.sec-branca .form-retorno { color: var(--verde-700); }
.sec-clara .campo select option,
.sec-branca .campo select option { background: #fff; color: #2a2e2a; }

/* Portal do mantenedor (previa) */
.portal-acesso {
    max-width: 440px;
    background: rgba(255, 255, 255, 0.05);
    border-top: 3px solid var(--areia);
    padding: 2.4rem 2rem;
    margin-top: 2rem;
}
.portal-acesso .formulario { grid-template-columns: 1fr; max-width: none; }
.portal-acesso fieldset { border: none; display: contents; }
.portal-acesso input:disabled,
.portal-acesso button:disabled { opacity: 0.45; cursor: not-allowed; }
.link-discreto { color: var(--areia); font-size: 0.85rem; }

/* Filtro de categorias (noticias) */
.filtro-categorias li { padding: 0; border: none; }
.filtro-categorias button {
    background: transparent;
    border: 1px solid #d8d4c6;
    color: #5d6159;
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.filtro-categorias button:hover { border-color: var(--verde-600); color: var(--verde-700); }
.filtro-categorias button.ativo { background: var(--verde-700); border-color: var(--verde-700); color: #fff; }

.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* Telas do portal alternam pelo atributo hidden; algumas classes definem display */
[hidden] { display: none !important; }

/* Botao "Area do Mantenedor" no menu: contorno, ao lado do "Faca Parte" */
.nav-acesso {
    padding: 0.5rem 1rem !important;
    border: 1px solid rgba(201, 215, 128, 0.6);
    color: var(--areia-clara) !important;
    font-size: 0.76rem !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.25s;
}
.nav-acesso:hover,
.nav-acesso.ativo { background: rgba(201, 215, 128, 0.15); border-color: var(--areia); }

/* Itens do portal que ainda nao existem */
.em-breve {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9a9a92;
    border: 1px dashed #cfcbbd;
    padding: 0.45rem 0.9rem;
}

/* Cabecalho com 9 itens (inclui Area do Mantenedor): faixa mais larga,
   espaco garantido entre logo e menu, e menu recolhido abaixo de 1340px */
header nav { max-width: 1320px; gap: 2rem; }
nav ul.menu { gap: 1.1rem; }
nav ul.menu a { font-size: 0.84rem; }

@media (max-width: 1340px) {
    nav { flex-wrap: wrap; flex-direction: row !important; align-items: center !important; }
    .menu-toggle { display: block; }
    nav ul.menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
        padding: 1.2rem 0 0.4rem;
    }
    nav.aberto ul.menu { display: flex; }
    nav ul.menu a { font-size: 0.95rem; }
    .nav-cta, .nav-acesso { display: inline-block !important; }
}

/* =========================================================
   FLUIDEZ — transicoes e movimento do site todo
   ========================================================= */
:root {
    --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
}

/* O cabecalho fixo nao cobre o titulo ao seguir um link #ancora */
html { scroll-padding-top: 6rem; }

/* Troca de pagina com fade (Chrome, Edge e Safari recentes; os demais ignoram) */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: var(--ease-suave);
}

/* Entrada dos blocos ao rolar (classes postas pelo app.js) */
html .revelar {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.8s var(--ease-suave) var(--atraso, 0s),
        transform 0.8s var(--ease-suave) var(--atraso, 0s);
}

html .revelar.visivel {
    opacity: 1;
    transform: none;
}

/* Cabecalho: sombra suave depois que a pagina sai do topo */
header { transition: box-shadow 0.35s ease, background-color 0.35s ease; }
header.rolou {
    background: rgba(11, 34, 21, 0.985);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

/* Botoes e cards: curva mais macia e resposta ao clique */
.btn,
.contato-button,
.card-acao,
.barreira,
.info-item,
.nav-cta,
.nav-acesso {
    transition-timing-function: var(--ease-suave);
    transition-duration: 0.35s;
}

.btn:active,
.contato-button:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }

.btn-primary:hover { box-shadow: 0 10px 24px rgba(201, 215, 128, 0.28); }

.sec-clara .card-acao:hover,
.sec-branca .card-acao:hover { box-shadow: 0 16px 36px rgba(11, 34, 21, 0.12); }

.noticia-card { transition: transform 0.35s var(--ease-suave), box-shadow 0.35s var(--ease-suave); }
.noticia-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(11, 34, 21, 0.12); }

.info-item:hover { transform: translateX(4px); }

/* Sublinhado dos links do menu cresce a partir da esquerda */
nav ul.menu a:not(.nav-cta):not(.nav-acesso) {
    position: relative;
    padding-bottom: 3px;
}
nav ul.menu a:not(.nav-cta):not(.nav-acesso)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-suave);
}
nav ul.menu a:not(.nav-cta):not(.nav-acesso):hover::after,
nav ul.menu a.ativo:not(.nav-cta):not(.nav-acesso)::after { transform: scaleX(1); }

/* Foco visivel para quem navega pelo teclado */
a:focus-visible,
button:focus-visible,
.info-item:focus-visible {
    outline: 2px solid var(--areia);
    outline-offset: 3px;
}

/* Menu do celular abre e fecha deslizando, em vez de aparecer de uma vez */
@media (max-width: 1340px) {
    nav ul.menu {
        display: flex;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        transition:
            max-height 0.45s var(--ease-suave),
            opacity 0.25s ease,
            padding 0.45s var(--ease-suave),
            visibility 0s linear 0.45s;
    }
    nav.aberto ul.menu {
        max-height: 34rem;
        opacity: 1;
        visibility: visible;
        padding-top: 1.2rem;
        padding-bottom: 0.4rem;
        transition:
            max-height 0.5s var(--ease-suave),
            opacity 0.35s ease 0.05s,
            padding 0.5s var(--ease-suave),
            visibility 0s;
    }
    nav ul.menu li {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.3s ease, transform 0.4s var(--ease-suave);
    }
    nav.aberto ul.menu li { opacity: 1; transform: none; }
    nav.aberto ul.menu li:nth-child(2) { transition-delay: 0.03s; }
    nav.aberto ul.menu li:nth-child(3) { transition-delay: 0.06s; }
    nav.aberto ul.menu li:nth-child(4) { transition-delay: 0.09s; }
    nav.aberto ul.menu li:nth-child(5) { transition-delay: 0.12s; }
    nav.aberto ul.menu li:nth-child(6) { transition-delay: 0.15s; }
    nav.aberto ul.menu li:nth-child(7) { transition-delay: 0.18s; }
    nav.aberto ul.menu li:nth-child(n+8) { transition-delay: 0.21s; }
}

/* Filtro de noticias: os cards somem e voltam em vez de pular */
.noticias-grid { transition: opacity 0.2s ease, transform 0.2s ease; }
.noticias-grid.filtrando { opacity: 0; transform: translateY(8px); }

/* Portal: troca entre login e area do mantenedor com fade */
@keyframes telaEntrando {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.tela-entrando { animation: telaEntrando 0.55s var(--ease-suave); }

/* Respeita quem pediu menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
    @view-transition { navigation: none; }
}

/* =========================================================
   IDENTIDADE VISUAL — estampa "Fronteiras que conectam a Cristo"
   Verde-escuro, verde-limao e creme; serifa de alto contraste nos
   titulos; arcos concentricos, rosa dos ventos e bandeiras nas cores reais.
   ========================================================= */

/* Fundo branco das secoes vira creme mais claro, para casar com a paleta */
.sec-branca { background: #fffbf1; }

/* Titulos em serifa, como "FRONTEIRAS" */
.hero h1,
section h2,
.destaque,
.sub-titulo,
.numero-valor,
.valor-numero,
.etapa-num,
.base-envio strong,
.card-header h3,
.barreira h3,
.footer-marca strong,
nav .logo {
    font-family: var(--fonte-titulo);
    font-weight: 700;
}

.hero h1 { color: var(--creme); letter-spacing: -0.02em; line-height: 0.95; }
section h2 { letter-spacing: -0.015em; line-height: 1.05; }
.destaque { letter-spacing: -0.005em; }
.numero-valor, .etapa-num { letter-spacing: -0.01em; }
nav .logo, .footer-marca strong { letter-spacing: 0.01em; }

/* Rotulos condensados, como "CONE SUL" e "QUE CONECTAM A CRISTO" */
.hero-kicker,
.sec-kicker,
.territorio-etapa,
.barreira-pais,
.footer-assinatura {
    font-family: var(--fonte-rotulo);
    font-weight: 400;
}
.sec-kicker { font-size: 1.35rem; letter-spacing: 0.08em; }
.hero-kicker { font-size: 1.15rem; letter-spacing: 0.12em; }
.footer-assinatura { font-size: 1.05rem; }

/* "CONE SUL ———" : o rotulo do topo ganha o fio que segue ate a borda */
.hero-kicker {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 46rem;
}
.hero-kicker::after {
    content: '';
    flex: 1;
    min-width: 2rem;
    height: 3px;
    background: var(--areia);
}

/* Arcos concentricos em limao, saindo do canto, como na estampa */
.hero::before {
    background:
        repeating-radial-gradient(circle at 88% 115%,
            transparent 0 22px,
            rgba(201, 215, 128, 0.30) 22px 25px);
    -webkit-mask-image: radial-gradient(circle at 88% 115%, #000 0, #000 35%, transparent 70%);
            mask-image: radial-gradient(circle at 88% 115%, #000 0, #000 35%, transparent 70%);
}

/* Rosa dos ventos */
.hero::after {
    content: '';
    position: absolute;
    right: 6%;
    top: 14%;
    width: clamp(90px, 14vw, 170px);
    aspect-ratio: 1;
    opacity: 0.55;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='%23c9d780' stroke-width='1.2'%3E%3Ccircle r='20'/%3E%3Ccircle r='24'/%3E%3C/g%3E%3Cg fill='%23c9d780'%3E%3Cpath d='M0-46 5-5 0 0-5-5Z M46 0 5 5 0 0 5-5Z M0 46-5 5 0 0 5 5Z M-46 0-5-5 0 0-5 5Z'/%3E%3Cpath opacity='.7' d='M24-24 4 0 0 0 0-4Z M24 24 0 4 0 0 4 0Z M-24 24-4 0 0 0 0 4Z M-24-24 0-4 0 0-4 0Z'/%3E%3C/g%3E%3Cg fill='%23c9d780' font-family='Georgia,serif' font-size='7' text-anchor='middle'%3E%3Ctext y='-38' x='8'%3EN%3C/text%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* Fio duplo, como as duas barras no rodape da estampa */
footer { position: relative; }
footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 9px;
    border-top: 3px solid var(--areia);
    border-bottom: 3px solid var(--areia);
    opacity: 0.85;
}

/* Bandeiras nas cores reais, com o contorno creme da estampa */
.bandeira { box-shadow: 0 0 0 1.5px var(--creme); border-radius: 0; }

/* Faixa de numeros: valores em limao */
.numero-valor { color: var(--areia); }

/* Botoes: limao com texto escuro, cantos retos */
.btn-primary,
.nav-cta { background: var(--areia); color: var(--verde-900); }
.btn-primary:hover,
.nav-cta:hover { background: var(--creme); }

/* Fundo do mapa em tons apagados, para conversar com a paleta */
.leaflet-tile-pane { filter: grayscale(0.75) sepia(0.2) brightness(1.03); }

/* Rodape: a linha final ocupa a largura toda, nao so a primeira coluna */
.footer-base { grid-column: 1 / -1; }

/* No celular a rosa dos ventos ficaria sobre o titulo */
@media (max-width: 700px) {
    .hero::after { display: none; }
}

/* Abertura no verde exato da estampa */
.hero { background: var(--verde-800); }

/* Portal (entrar) e Faca Parte (cadastro de mantenedor) */
.portal-acesso.largo { max-width: 760px; }
.portal-acesso.largo .formulario { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) {
    .portal-acesso.largo .formulario { grid-template-columns: 1fr; }
}

.acesso-alternativo { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.92rem; opacity: 0.85; }
.acesso-alternativo a { color: var(--areia); font-weight: 700; }

/* Perguntas de sim/nao */
.campo.escolha { display: block; border: none; min-width: 0; }
.campo.escolha .opcoes { display: flex; gap: 1.6rem; }
.campo.escolha legend {
    width: 100%;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--areia);
    margin-bottom: 0.6rem;
}
.campo.escolha label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    cursor: pointer;
}
.campo.escolha input { width: 1.05rem; height: 1.05rem; accent-color: var(--areia); }
.campo input[type="date"] { color-scheme: dark; }
.formulario.validar .escolha:has(input:invalid) legend { color: #e7a08f; }

/* =========================================================
   CAMPANHA INTERNA (seja-mantenedor.html):
   "Eu faco parte dessa missao" — Semeadores, Construtores, Expansores
   ========================================================= */
.campanha-topo {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem 4rem;
    align-items: end;
    margin-bottom: 3rem;
}
.campanha-topo .sec-intro { margin-bottom: 0; }
.campanha-topo .versiculo { margin: 0; }
.campanha h2 { max-width: 16ch; }
.campanha h2 .realce { color: var(--areia); display: block; }

.campanhas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.6rem;
}

.campanha-card {
    background: var(--creme);
    color: #2a2e2a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 4px solid var(--areia);
    transition: transform 0.35s var(--ease-suave), box-shadow 0.35s var(--ease-suave);
}
.campanha-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35); }
.campanha-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}
.campanha-corpo {
    padding: 1.6rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.campanha-num {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--verde-800);
}
.campanha-num::after { content: ''; width: 1.8rem; height: 2px; background: var(--areia); }
.campanha-card h3 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--verde-800);
    margin: 0.6rem 0 0.4rem;
}
.campanha-lema { font-weight: 700; color: var(--verde-800); margin-bottom: 1.2rem; }

.campanha-valor {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: rgba(201, 215, 128, 0.45);
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    margin-bottom: 1.2rem;
}
.campanha-icone,
.pilar-icone {
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.campanha-icone {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--verde-800);
    color: var(--creme);
}
.campanha-icone svg,
.pilar-icone svg {
    width: 55%;
    height: 55%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.campanha-valor strong {
    display: block;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--verde-800);
    line-height: 1.2;
}
.campanha-valor small {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #55594f;
}
.campanha-desc { font-size: 0.93rem; color: #4a4f4a; margin-bottom: 1.2rem; }

.campanha-lista {
    list-style: none;
    border-top: 1px solid #e3dccb;
    padding-top: 1rem;
    margin-bottom: 1.6rem;
    flex-grow: 1;
}
.campanha-lista li {
    position: relative;
    padding-left: 1.8rem;
    font-size: 0.9rem;
    color: #3d423d;
    margin-bottom: 0.45rem;
}
.campanha-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #7fa33a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.3 2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.campanha-btn {
    background: var(--verde-800);
    color: var(--creme);
    text-align: center;
    border-radius: 999px;
    padding: 0.95rem 1.4rem;
    font-size: 0.8rem;
}
.campanha-btn span { display: inline-block; margin-left: 0.4rem; transition: transform 0.3s var(--ease-suave); }
.campanha-btn:hover { background: var(--verde-900); color: var(--areia); transform: translateY(-2px); }
/* Sem link de pagamento ainda: aparece, mas nao reage */
.campanha-btn[aria-disabled="true"] { cursor: default; pointer-events: none; }
.campanha-btn:hover span { transform: translateX(4px); }

.pilares {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.pilar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.pilar:last-child { border-right: none; }
.pilar-icone { width: 2.8rem; height: 2.8rem; color: var(--creme); }
.pilar-icone svg { width: 100%; height: 100%; stroke-width: 1.3; }
.pilar strong {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}
.pilar small {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}

.campanha-assinatura {
    text-align: center;
    margin-top: 2.2rem;
    font-family: var(--fonte-rotulo);
    font-size: 1.3rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--areia);
}

@media (max-width: 900px) {
    .campanha-topo { grid-template-columns: 1fr; }
    .pilar { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .pilar:last-child { border-bottom: none; }
}

/* Duas secoes escuras seguidas: fio duplo marca a divisao */
.sec-escura + .sec-escura { position: relative; }
.sec-escura + .sec-escura::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: min(1132px, calc(100% - 48px));
    height: 9px;
    border-top: 3px solid var(--areia);
    border-bottom: 3px solid var(--areia);
    opacity: 0.85;
}

/* Beneficios com mais de um paragrafo */
.beneficio p + p { margin-top: 0.6rem; }

/* Beneficios dos Expansores no portal: cards claros, logo no inicio */
.beneficios-destaque .beneficios { gap: 1.4rem; margin-top: 2rem; }
.beneficios-destaque .beneficio {
    background: #fff;
    border-top: 4px solid var(--areia);
    padding: 1.6rem 1.5rem 1.7rem;
    box-shadow: 0 6px 24px rgba(11, 34, 21, 0.08);
    transition: transform 0.35s var(--ease-suave), box-shadow 0.35s var(--ease-suave);
}
.beneficios-destaque .beneficio:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(11, 34, 21, 0.14); }
.beneficios-destaque .beneficio-num {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--verde-800);
    color: var(--areia);
    letter-spacing: 0.04em;
    margin-bottom: 0.9rem;
}
.beneficios-destaque .beneficio h4 { color: var(--verde-800); font-size: 1.1rem; }
.beneficios-destaque .beneficio p { color: #4a4f4a; opacity: 1; }
.beneficios-destaque + #tela-portal { padding-top: 0; }

/* Paginas juridicas (politica de privacidade e termos de uso) */
.texto-bloco.juridico { max-width: 70ch; }
.texto-bloco.juridico h3 {
    font-family: var(--fonte-titulo);
    font-weight: 400;
    font-size: 1.45rem;
    color: var(--verde-700);
    margin: 2.4rem 0 0.7rem;
}
.texto-bloco.juridico a { color: var(--verde-600); font-weight: 600; }
.texto-bloco.juridico .lista-destaques { margin: 1rem 0 1.2rem; }

/* =========================================================
   CAIXA DE ACESSO EM BRANCO (login e cadastro)
   O quadro era translucido sobre o fundo verde; passa a ser um
   cartao branco, e os campos dentro dele seguem a versao clara.
   ========================================================= */
.portal-acesso {
    background: #fff;
    color: #2a2e2a;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    padding: 2.4rem 2.2rem;
}

.portal-acesso .campo label,
.portal-acesso .campo.escolha legend { color: var(--limao-escuro); }
.portal-acesso .esqueci-texto { color: #2a2e2a; }

.portal-acesso .campo input,
.portal-acesso .campo select,
.portal-acesso .campo textarea {
    background: #fff;
    border-color: #cfcbbd;
    color: #2a2e2a;
}

.portal-acesso .campo input:focus,
.portal-acesso .campo select:focus,
.portal-acesso .campo textarea:focus {
    border-color: var(--limao-escuro);
    background: #fff;
}

.portal-acesso .campo input::placeholder,
.portal-acesso .campo textarea::placeholder { color: #9a9a92; }

.portal-acesso .campo input[type="date"] { color-scheme: light; }

.portal-acesso .campo.escolha label { color: #3d423d; }
.portal-acesso .campo.escolha input { accent-color: var(--limao-escuro); }

.portal-acesso .consentimento label { color: #55594f; }

.portal-acesso .form-retorno { color: var(--verde-700); }

.portal-acesso .cadastro-intro { color: #55594f; opacity: 1; }

.portal-acesso .link-discreto { color: var(--limao-escuro); font-weight: 600; }

.portal-acesso .acesso-alternativo {
    border-top-color: #e3dccb;
    color: #55594f;
    opacity: 1;
}
.portal-acesso .acesso-alternativo a { color: var(--limao-escuro); }

.portal-acesso .btn-primary { box-shadow: 0 6px 18px rgba(95, 116, 36, 0.25); }

.formulario.validar .portal-acesso input:invalid { border-color: #c97a6a; }

/* =========================================================
   CALENDARIO 2027 (area do mantenedor)
   ========================================================= */
.agenda-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1rem;
}
.agenda-item {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--areia);
    padding: 1.1rem 1.2rem;
}
.agenda-data {
    flex-shrink: 0;
    width: 4.2rem;
    text-align: center;
    padding-right: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.agenda-data strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-weight: 400;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--areia);
}
.agenda-data span {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: #fff;
}
.agenda-data small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}
.agenda-info h4 { font-size: 0.98rem; color: #fff; margin-bottom: 0.25rem; }
.agenda-info p { font-size: 0.86rem; opacity: 0.78; margin: 0; }

.devocionais-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 4rem;
    align-items: start;
}
.meses-lista { list-style: none; }
.meses-lista li {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 0.8rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.92rem;
}
.meses-lista .mes {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--areia);
    padding-top: 0.15rem;
}
.meses-lista small { display: block; font-size: 0.78rem; opacity: 0.6; }

@media (max-width: 800px) {
    .devocionais-grid { grid-template-columns: 1fr; }
}

/* ===== MODO EDICAO (ferramenta temporaria, visivel a todos) ===== */
#barra-edicao {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

#barra-edicao button {
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
}

#btn-editar {
    padding: 0.9rem 1.4rem;
    background: var(--areia);
    color: var(--verde-900);
    font-size: 0.8rem;
}

#btn-editar:hover {
    background: var(--areia-clara);
    transform: translateY(-2px);
}

#barra-edicao-extra { display: flex; gap: 0.5rem; }
#barra-edicao-extra button {
    padding: 0.6rem 0.9rem;
    font-size: 0.68rem;
    background: var(--verde-800);
    color: var(--areia-clara);
    border: 1px solid rgba(201, 215, 128, 0.5);
}
#barra-edicao-extra button:hover { background: var(--verde-900); border-color: var(--areia); }

@media (max-width: 560px) {
    #barra-edicao { bottom: 16px; right: 16px; }
    #btn-editar { padding: 0.75rem 1.1rem; font-size: 0.72rem; }
}

/* =========================================================
   MAPA INTERATIVO (mapa/mapa.js)
   ========================================================= */
/* Contexto proprio: os controles do Leaflet (z-index 1000) nao
   passam por cima do cabecalho fixo ao rolar a pagina */
.mapa-leaflet { position: relative; z-index: 0; }
.leaflet-container { font-family: inherit; background: #d9dfe3; }
.leaflet-container a.leaflet-control-zoom-in,
.leaflet-container a.leaflet-control-zoom-out { color: var(--verde-800); }

.mapa-dica {
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--verde-900);
    border: none;
    border-left: 3px solid var(--areia);
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Ficha do territorio selecionado */
.ficha-territorio {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e7e4da;
    white-space: normal;
}
.ficha-territorio div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.6rem; }
.ficha-territorio dt {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--limao-escuro);
    padding-top: 0.15rem;
}
.ficha-territorio dd { margin: 0; color: #2a2e2a; font-weight: 600; }
.ficha-descricao { white-space: pre-line; }

.info-item:focus-visible { outline: 2px solid var(--areia); outline-offset: 2px; }

@media (max-width: 900px) {
    .mapa-leaflet { height: 420px; }
}
@media (max-width: 560px) {
    .mapa-leaflet { height: 360px; }
    .ficha-territorio div { grid-template-columns: 6.5rem 1fr; }
}

/* Campanha em faixas horizontais, uma embaixo da outra
   (Expansor, Construtor, Semeador): foto a esquerda, conteudo a direita */
.campanhas { grid-template-columns: 1fr; gap: 1.4rem; }
.campanha-card { flex-direction: row; border-top: none; border-left: 4px solid var(--areia); }
.campanha-card img {
    width: 28%;
    max-width: 340px;
    aspect-ratio: auto;
    height: auto;
    min-height: 100%;
    flex-shrink: 0;
}
.campanha-corpo {
    display: grid;
    grid-template-columns: minmax(310px, 1fr) 1.25fr;
    grid-template-areas:
        "num     desc"
        "titulo  desc"
        "lema    lista"
        "valor   lista"
        "benef   lista"
        "benef   botao";
    column-gap: 2.2rem;
    align-content: start;
    padding: 1.8rem 2rem;
}
.campanha-num { grid-area: num; }
.campanha-card h3 { grid-area: titulo; }
.campanha-lema { grid-area: lema; }
.campanha-valor { grid-area: valor; align-self: start; margin-bottom: 0; }
.campanha-valor strong { white-space: nowrap; }
.campanha-desc { grid-area: desc; margin-bottom: 0.8rem; }
.campanha-lista { grid-area: lista; margin-bottom: 1.2rem; }
.campanha-btn { grid-area: botao; justify-self: start; align-self: end; padding-left: 2rem; padding-right: 2rem; }

@media (max-width: 900px) {
    .campanha-corpo {
        grid-template-columns: 1fr;
        grid-template-areas: "num" "titulo" "lema" "valor" "benef" "desc" "lista" "botao";
        padding: 1.5rem 1.4rem 1.7rem;
    }
    .campanha-valor { margin-bottom: 1.2rem; }
    .campanha-btn { justify-self: stretch; }
}
@media (max-width: 680px) {
    .campanha-card { flex-direction: column; border-left: none; border-top: 4px solid var(--areia); }
    .campanha-card img { width: 100%; max-width: none; aspect-ratio: 3 / 1; min-height: 0; }
}

/* Beneficios de cada nivel, dentro da faixa da campanha */
.campanha-beneficios {
    grid-area: benef;
    align-self: start;
    margin-top: 1.1rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid #e3dccb;
    background: #fff;
}
.campanha-beneficios-titulo {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--limao-escuro);
    margin-bottom: 0.55rem;
}
.campanha-beneficios ul { list-style: none; }
.campanha-beneficios li {
    position: relative;
    padding-left: 1.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--verde-800);
    line-height: 1.4;
    margin-bottom: 0.35rem;
}
.campanha-beneficios li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42rem;
    width: 0.55rem;
    height: 0.55rem;
    background: var(--areia);
    transform: rotate(45deg);
}
.campanha-beneficios li:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .campanha-beneficios { margin: 0 0 1.2rem; }
}

/* Pins das cidades no mapa (mapa/locais.js) */
.pin-local svg {
    width: 24px;
    height: 32px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    transition: transform 0.2s var(--ease-suave);
    transform-origin: 50% 100%;
}
.pin-local svg path { fill: var(--verde-800); stroke: var(--creme); stroke-width: 1.6; }
.pin-local svg circle { fill: var(--areia); }
.pin-local:hover svg { transform: scale(1.15); }

.pin-grupo {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--verde-800);
    border: 3px solid var(--areia);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    color: var(--creme);
    font-weight: 800;
    font-size: 0.85rem;
}

/* Lista de cidades abaixo do mapa */
.locais { margin-top: 3rem; }
.locais .sub-titulo { margin-top: 0; }
.locais-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.6rem;
}
.locais-grupo h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--areia);
}
.locais-grupo h4 small { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin-left: 0.4rem; }
.locais-grupo ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.local-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(201, 215, 128, 0.35);
    color: var(--creme);
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s var(--ease-suave);
}
.local-btn:hover,
.local-btn.ativo { background: var(--areia); color: var(--verde-900); border-color: var(--areia); }

/* Coluna ao lado do mapa (Onde Estamos): abas Cidades / Territorios */
.abas-mapa {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.abas-mapa button {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 0.7rem 1rem;
    color: rgba(255, 255, 255, 0.65);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s, border-color 0.35s var(--ease-suave);
}
.abas-mapa button:hover { color: var(--creme); }
.abas-mapa button[aria-selected="true"] { color: var(--areia); border-bottom-color: var(--areia); }

/* Lista de cidades dentro da coluna */
.info-paises .locais-lista { grid-template-columns: 1fr; gap: 1.2rem; }
.info-paises .locais-grupo h4 { font-size: 0.92rem; }

/* Fotos da cidade no quadro */
.galeria-local {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
    white-space: normal;
}
.galeria-foto {
    padding: 0;
    border: none;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e7e4da;
}
.galeria-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-suave);
}
.galeria-foto:hover img { transform: scale(1.06); }
.galeria-vazia {
    display: grid;
    place-items: center;
    min-height: 140px;
    border: 1px dashed #cfcbbd;
    color: #8c8f88;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: normal;
    background: repeating-linear-gradient(135deg, #f6f3ea 0 12px, #efebdf 12px 24px);
}

/* Foto ampliada */
.visor-foto {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(8, 20, 13, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
}
.visor-foto[hidden] { display: none; }
.visor-foto figure { max-width: min(1100px, 100%); max-height: 100%; text-align: center; }
.visor-foto img { max-width: 100%; max-height: 78vh; object-fit: contain; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.visor-foto figcaption { color: var(--creme); margin-top: 0.8rem; font-size: 0.95rem; }
.visor-foto button {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(201, 215, 128, 0.5);
    color: var(--creme);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}
.visor-foto button:hover { background: var(--areia); color: var(--verde-900); }
.visor-fechar { top: 1.2rem; right: 1.2rem; }
.visor-ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.visor-prox { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Inicio, "O que e o Cone Sul?": titulo mais largo */
section h2.titulo-largo { max-width: 24ch; }

/* Faixa verde "Pessoas nao crentes", logo abaixo */
.nao-crentes-faixa { padding-top: 2.6rem; }
.nao-crentes-faixa .sec-kicker { color: var(--areia); margin-bottom: 0.4rem; }
.nao-crentes-faixa .numero-item { padding-top: 1.6rem; padding-bottom: 3rem; }
.nao-crentes-faixa .numero-valor { font-size: clamp(3rem, 7vw, 5.2rem); }
.nao-crentes-faixa .numero-label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; opacity: 0.9; }
.nao-crentes-faixa .bandeira { width: 1.8rem; }

/* Duas secoes claras seguidas: fio fino separa */
.sec-clara + .sec-clara .wrap,
.sec-clara + .sec-branca .wrap,
.sec-branca + .sec-clara .wrap { border-top: 1px solid #e3dccb; padding-top: 4rem; }
.sec-clara + .sec-clara, .sec-clara + .sec-branca, .sec-branca + .sec-clara { padding-top: 0; }

/* Modo edicao: blocos ocultos e controle de bloco */
body:not(.modo-edicao) .bloco-oculto { display: none !important; }
body.modo-edicao .bloco-oculto { opacity: 0.3; filter: grayscale(1); }
body.modo-edicao .bloco-alvo { box-shadow: inset 0 0 0 2px rgba(201, 215, 128, 0.9); }
#ctrl-bloco {
    position: absolute;
    z-index: 1400;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem;
    background: var(--verde-900);
    border: 1px solid var(--areia);
    border-radius: 2px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    font-family: inherit;
}
#ctrl-bloco[hidden], #ctrl-bloco button[hidden] { display: none; }
#ctrl-bloco .ctrl-tipo {
    padding: 0 0.4rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--areia-clara);
    white-space: nowrap;
}
#ctrl-bloco button {
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 2px;
    background: var(--areia);
    color: var(--verde-900);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
#ctrl-bloco button[data-acao="apagar"] { background: #e8b4a0; }
#ctrl-bloco button:disabled { opacity: 0.35; cursor: default; }
#barra-edicao-extra { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.dica-edicao {
    padding: 0.4rem 0.6rem;
    background: rgba(18, 45, 30, 0.9);
    color: var(--areia-clara);
    font-size: 0.65rem;
    border-radius: 2px;
}

/* Card de campanha sem descricao: a lista sobe para o topo da coluna direita */
.campanha-corpo:not(:has(.campanha-desc)) {
    grid-template-areas:
        "num     lista"
        "titulo  lista"
        "lema    lista"
        "valor   lista"
        "benef   lista"
        "benef   botao";
}
.campanha-corpo:not(:has(.campanha-desc)) .campanha-lista { border-top: none; padding-top: 0.4rem; }
@media (max-width: 900px) {
    .campanha-corpo:not(:has(.campanha-desc)) {
        grid-template-areas: "num" "titulo" "lema" "valor" "benef" "lista" "botao";
    }
}

/* Campanha: os beneficios ("Receba acesso a:") sao o destaque do card.
   Ficam na coluna direita, em caixa verde e letra maior; os itens com
   check passam a ser informacao de apoio, na coluna esquerda. */
.campanha-corpo,
.campanha-corpo:not(:has(.campanha-desc)) {
    grid-template-areas:
        "num     benef"
        "titulo  benef"
        "lema    benef"
        "valor   benef"
        "desc    benef"
        "lista   botao";
    row-gap: 0;
}
.campanha-corpo .campanha-lista { border-top: none; padding-top: 0; margin: 1.3rem 0 0; }
.campanha-corpo .campanha-desc { margin-top: 1rem; }
.campanha-beneficios {
    margin-top: 0;
    padding: 1.5rem 1.6rem 1.6rem;
    border: none;
    border-left: 4px solid var(--areia);
    background: var(--verde-900);
    box-shadow: 0 10px 28px rgba(18, 45, 30, 0.18);
}
.campanha-beneficios-titulo {
    font-size: 0.78rem;
    color: var(--areia);
    margin-bottom: 1rem;
}
.campanha-beneficios li {
    padding-left: 2rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--creme);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}
.campanha-beneficios li::before {
    top: 0.12rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    transform: none;
    background: var(--areia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122d1e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.campanha-corpo .campanha-btn { margin-top: 1.3rem; }
@media (max-width: 900px) {
    .campanha-corpo,
    .campanha-corpo:not(:has(.campanha-desc)) {
        grid-template-areas: "num" "titulo" "lema" "valor" "benef" "desc" "lista" "botao";
    }
    .campanha-beneficios { margin: 0.4rem 0 0; padding: 1.2rem 1.2rem 1.3rem; }
    .campanha-beneficios li { font-size: 1rem; }
}

/* Arte "Pessoas que ainda nao conhecem a Cristo" (inicio). A imagem tem
   1600px de largura: nunca passa disso, para nao perder nitidez; nas
   telas maiores o fundo verde continua dos dois lados. */
.nao-crentes-arte { background: #0f2419; line-height: 0; padding: 0; }
.nao-crentes-arte img {
    display: block;
    width: 100%;
    max-width: 1600px;
    height: auto;
    margin: 0 auto;
}

/* =========================================================
   CAMPANHA — faixas horizontais, uma por plano
   Esquerda: nome, frase, valor, texto e botao. Direita: a caixa de
   beneficios, na altura toda da faixa. Expansores (a primeira) e o
   plano em destaque: fundo limao e selo "Mais completo".
   ========================================================= */
.campanhas { grid-template-columns: 1fr; gap: 1.6rem; }
.campanha-card {
    position: relative;
    flex-direction: row;
    overflow: visible;
    border: none;
    border-left: 6px solid var(--areia);
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.campanha-corpo,
.campanha-corpo:not(:has(.campanha-desc)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
        "titulo benef"
        "lema   benef"
        "valor  benef"
        "desc   benef"
        "botao  benef";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 2.6rem;
    padding: 2.2rem 2.4rem;
}
.campanha-card h3 { font-size: 2.6rem; margin-bottom: 0.2rem; }
.campanha-lema { margin-bottom: 1.2rem; }
.campanha-corpo .campanha-valor {
    background: none;
    padding: 0.9rem 0;
    margin: 0 0 1rem;
    border-top: 1px solid rgba(18, 45, 30, 0.14);
    border-bottom: 1px solid rgba(18, 45, 30, 0.14);
}
.campanha-valor strong { font-size: 1.3rem; }
.campanha-corpo .campanha-desc { margin: 0 0 1.4rem; font-size: 0.92rem; }
.campanha-beneficios {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.8rem 2rem;
    box-shadow: none;
}
.campanha-beneficios li { font-size: 1.05rem; }
.campanha-corpo .campanha-btn {
    margin-top: 0;
    align-self: end;
    justify-self: start;
    padding: 1rem 2rem;
}

/* Plano em destaque */
.campanha-card:first-child { background: var(--areia); border-left-color: var(--verde-900); }
.campanha-card:first-child::before {
    content: 'Mais completo';
    position: absolute;
    top: -0.85rem;
    left: 2.4rem;
    padding: 0.35rem 0.8rem;
    background: var(--verde-900);
    color: var(--areia);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 999px;
}
.campanha-card:first-child .campanha-desc,
.campanha-card:first-child .campanha-valor small { color: #2f3a24; }

@media (max-width: 900px) {
    .campanha-corpo,
    .campanha-corpo:not(:has(.campanha-desc)) {
        grid-template-columns: 1fr;
        grid-template-areas: "titulo" "lema" "valor" "desc" "benef" "botao";
        grid-template-rows: none;
        padding: 1.8rem 1.4rem;
    }
    .campanha-beneficios { padding: 1.3rem 1.3rem 1.4rem; }
    .campanha-corpo .campanha-btn { margin-top: 1.4rem; justify-self: stretch; }
}

/* =========================================================
   MAPA — visual na identidade do site (Onde Estamos)
   Mar verde escuro, vizinhos em verde medio, territorios em verde
   (paises) e dourado (estados do Brasil). Rotulos em serifa.
   ========================================================= */
.mapa-leaflet {
    border: 1px solid rgba(201, 215, 128, 0.35);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.leaflet-container {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(201, 215, 128, 0.07), transparent 60%),
        #0e2218;
}
.leaflet-bar { border: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; }
.leaflet-bar a,
.leaflet-container a.leaflet-control-zoom-in,
.leaflet-container a.leaflet-control-zoom-out {
    background: var(--verde-900);
    color: var(--areia);
    border-bottom-color: rgba(201, 215, 128, 0.25);
}
.leaflet-bar a:hover { background: var(--verde-800); color: var(--creme); }
.leaflet-container .leaflet-control-attribution {
    background: rgba(14, 34, 24, 0.75);
    color: rgba(254, 245, 226, 0.55);
    font-size: 0.62rem;
}
.leaflet-container .leaflet-control-attribution a { color: var(--areia); }

.rotulo-mapa { pointer-events: none; }
.rotulo-mapa span {
    display: block;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-family: 'Advercase', Georgia, serif;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.rotulo-mapa.pais span { font-size: 0.82rem; font-weight: 700; color: #10261a; }
.rotulo-mapa.pais.lado span { color: var(--areia); transform: translate(-100%, -50%); }
.rotulo-mapa.vizinho span { font-size: 0.68rem; color: rgba(254, 245, 226, 0.45); }
.rotulo-mapa.oceano span { font-size: 0.66rem; font-style: italic; letter-spacing: 0.3em; color: rgba(201, 215, 128, 0.45); }

.pin-local svg path { fill: var(--verde-900); stroke: var(--areia); stroke-width: 1.6; }
.pin-local svg circle { fill: var(--areia); }
.pin-grupo { background: var(--verde-900); border-color: var(--areia); color: var(--areia); }

/* Quadro ao lado do mapa */
.mapa-container .card-info {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.mapa-container .card-body { min-height: 0; }
@media (max-width: 560px) {
    .rotulo-mapa.vizinho, .rotulo-mapa.oceano { display: none; }
    .rotulo-mapa.pais span { font-size: 0.7rem; }
}

/* Pop-up de fotos sobre o pin da cidade (Onde Estamos) */
.popup-fotos-wrap .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--verde-900);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.popup-fotos-wrap .leaflet-popup-content { margin: 0; width: 300px !important; }
.popup-fotos-wrap .leaflet-popup-tip { background: var(--verde-900); }
.popup-fotos-wrap a.leaflet-popup-close-button {
    top: 8px; right: 8px; width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(14, 34, 24, 0.75);
    color: var(--creme);
    font: 700 18px/28px inherit;
    text-align: center;
}
.popup-fotos-wrap a.leaflet-popup-close-button:hover { background: var(--verde-900); color: var(--areia); }
.pf-foto { display: block; width: 100%; padding: 0; border: none; background: #000; cursor: zoom-in; }
.pf-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pf-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    color: var(--creme);
    font-size: 0.85rem;
}
.pf-rodape strong { font-family: 'Advercase', Georgia, serif; font-size: 1.1rem; font-weight: 700; }
.pf-setas { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: rgba(254, 245, 226, 0.7); }
.pf-setas button {
    width: 28px; height: 28px;
    border: 1px solid rgba(201, 215, 128, 0.5);
    border-radius: 50%;
    background: transparent;
    color: var(--areia);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.pf-setas button:hover { background: var(--areia); color: var(--verde-900); }
@media (max-width: 560px) {
    .popup-fotos-wrap .leaflet-popup-content { width: 230px !important; }
}
.pf-setas span { white-space: nowrap; }
@media (max-width: 560px) {
    .pf-rodape strong { font-size: 0.95rem; }
}

/* =========================================================
   CAMISETAS (camisetas.html, loja/) — vitrine simples:
   foto em fundo claro, nome em negrito e preco embaixo
   ========================================================= */
.produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2.4rem 1.6rem;
    margin-top: 2.2rem;
}
.produto { display: block; color: inherit; text-decoration: none; }
.produto-foto {
    position: relative;
    aspect-ratio: 4 / 5;
    background: #ebe7df;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.produto-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
    transition: transform 0.5s var(--ease-suave), opacity 0.4s ease;
}
.produto:hover .produto-foto img { transform: scale(1.04); }
.produto-foto .produto-foto-2 { opacity: 0; }
.produto:hover .produto-foto-2 { opacity: 1; }
.produto-sem-foto { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9a968b; }
.produto-selo {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    padding: 0.3rem 0.65rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--verde-800);
}
.produto-nome { margin: 1.1rem 0 0.25rem; font-family: inherit; font-size: 1.02rem; font-weight: 700; letter-spacing: 0; color: #1d211d; }
.produto-preco { margin: 0; font-size: 1rem; color: #2a2e2a; }
.produto-tamanhos { margin: 0.5rem 0 0; }
.produto-tamanhos-titulo { display: block; margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--limao-escuro); }
.produto-tamanhos ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.produto-tamanhos li { display: flex; flex-direction: column; align-items: center; min-width: 2.9rem; padding: 0.3rem 0.45rem; border: 1px solid #d7d4c8; border-radius: 4px; font-size: 0.8rem; color: #2a2e2a; line-height: 1.2; }
.produto-tamanhos li strong { font-size: 0.85rem; }
.produto-tamanhos li span { font-size: 0.66rem; color: #8a8d86; }
.produto-tamanhos li.esgotado { opacity: 0.45; text-decoration: line-through; }
.produto:hover .produto-nome { text-decoration: underline; text-underline-offset: 3px; }
.produto-indisponivel { cursor: default; }
.produto-indisponivel:hover .produto-nome { text-decoration: none; }
.produtos-aviso { margin-top: 2rem; font-size: 0.82rem; color: #6b6f68; }

/* Menu com o item Camisetas: um pouco mais compacto (recolhe abaixo
   de 1340px, nas regras do cabecalho acima) */
header nav { max-width: 1400px; }
nav ul.menu { gap: 0.85rem; }
.fotos-no-mapa { margin: 0; font-size: 0.88rem; color: #5a5f58; white-space: normal; }

/* Quadro do mapa: sai de cena com suavidade quando a cidade tem fotos */
.mapa-container .card-info {
    max-height: 1200px;
    transition:
        max-height 0.55s var(--ease-suave),
        opacity 0.35s ease,
        transform 0.45s var(--ease-suave),
        margin 0.45s var(--ease-suave),
        border-width 0.45s var(--ease-suave);
}
.mapa-container .card-info.recolhido {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    margin-bottom: -1.5rem;
    border-top-width: 0;
    pointer-events: none;
}

/* Ficha do territorio: nao crentes em destaque e barras de religiao */
.ficha-rotulo {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--limao-escuro);
    white-space: normal;
}
.ficha-destaque {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--verde-900);
    border-left: 4px solid var(--areia);
    border-radius: 4px;
    white-space: normal;
}
.ficha-destaque strong { font-family: 'Advercase', Georgia, serif; font-size: 2.2rem; line-height: 1; color: var(--areia); }
.ficha-destaque span { font-size: 0.85rem; line-height: 1.35; color: rgba(254, 245, 226, 0.85); max-width: 14rem; }
.ficha-texto { margin: 0 0 1rem; white-space: normal; }
.ficha-pop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.7rem 0;
    border-top: 1px solid #e7e4da;
    border-bottom: 1px solid #e7e4da;
    margin-bottom: 1rem;
}
.ficha-pop span,
.religioes-titulo {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--limao-escuro);
}
.ficha-pop strong { color: var(--verde-800); font-size: 1.05rem; }
.religioes { display: grid; gap: 0.55rem; white-space: normal; }
.religioes-titulo { margin-bottom: 0.15rem; }
.religiao { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: 0.7rem; font-size: 0.86rem; }
.religiao-nome { color: #2a2e2a; font-weight: 600; line-height: 1.25; }
.religiao-barra { height: 8px; border-radius: 999px; background: #eeebe1; overflow: hidden; }
.religiao-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--verde-800), #7d9f52); }
.religiao-pct { font-weight: 800; color: var(--verde-800); white-space: nowrap; font-size: 0.82rem; }
.religioes small { font-size: 0.74rem; color: #8c8f88; }
@media (max-width: 560px) {
    .religiao { grid-template-columns: 6.5rem 1fr auto; }
    .ficha-destaque strong { font-size: 1.8rem; }
}
.produto-item { display: flex; flex-direction: column; }
.produto-comprar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding: 0.85rem 1.2rem;
    background: var(--verde-800);
    color: var(--creme);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-suave);
}
a.produto-comprar:hover { background: var(--verde-900); color: var(--areia); transform: translateY(-2px); }
.produto-comprar[aria-disabled="true"] { cursor: default; }

/* =========================================================
   PORTAL: nivel do mantenedor
   ========================================================= */
.nivel-selo {
    display: inline-block;
    margin: 0.6rem 0 0.2rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--areia);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--areia);
}
.nivel-beneficios {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9rem;
    margin: 1.8rem 0 0;
    padding: 0;
}
.nivel-beneficios li {
    position: relative;
    padding: 1rem 1rem 1rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: var(--creme);
    font-weight: 600;
    line-height: 1.4;
}
.nivel-beneficios li::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 1.05rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--areia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122d1e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
/* Cartao do pin para cidade ainda sem fotos */
.popup-sem-fotos .pf-rodape { padding: 0.9rem 2.6rem 0.2rem 1rem; }
.pf-onde { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; color: var(--areia); }
.pf-aviso {
    margin: 0;
    padding: 0.2rem 1rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(254, 245, 226, 0.6);
}
.popup-fotos-wrap .leaflet-popup-content:has(.popup-sem-fotos) { width: 230px !important; }

/* Cadastro vindo de um plano (fazer-parte.html?plano=...) */
.plano-escolhido, .plano-ja-cadastrado {
    max-width: 760px;
    margin-top: 1.6rem;
    padding: 1.1rem 1.3rem;
    background: rgba(201, 215, 128, 0.1);
    border-left: 3px solid var(--areia);
    border-radius: 4px;
    color: var(--creme);
}
.plano-escolhido p, .plano-ja-cadastrado p { margin: 0.5rem 0 0.3rem; }
.plano-escolhido strong { color: var(--areia); font-size: 1.05rem; }
.plano-escolhido small { display: block; font-size: 0.8rem; color: rgba(254, 245, 226, 0.7); }
.plano-passos { display: flex; gap: 1.2rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(254, 245, 226, 0.45); }
.plano-passos .ativo { color: var(--areia); }
.plano-ja-cadastrado .btn { margin-top: 0.8rem; }
/* Como o nivel e definido (fazer-parte.html) */
.cadastro-aviso {
    max-width: 760px;
    margin-top: 1.2rem;
    padding: 1rem 1.3rem;
    background: rgba(201, 215, 128, 0.1);
    border-left: 3px solid var(--areia);
    border-radius: 4px;
    color: var(--creme);
    font-size: 0.92rem;
}
.cadastro-aviso p { margin: 0 0 0.4rem; color: var(--areia); }
.cadastro-aviso ul { margin: 0; padding-left: 1.2rem; }
.cadastro-aviso li { margin: 0.25rem 0; }
.cadastro-aviso li strong { color: var(--areia); }
.plano-ja-cadastrado .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* =========================================================
   IMPORTAR RELATORIO (importar.html) — bastidor da equipe
   ========================================================= */
.importar-aviso {
    margin: 0 0 2rem;
    padding: 0.9rem 1.1rem;
    background: #fff7d6;
    border-left: 3px solid #d9b64a;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #5a4a12;
}
.importar-passo { margin-bottom: 2.6rem; }
.importar-arquivo {
    display: inline-flex;
    align-items: center;
    margin-top: 0.8rem;
    padding: 0.9rem 1.4rem;
    background: var(--verde-800);
    color: var(--creme);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.importar-arquivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.importar-arquivo:hover { background: var(--verde-900); color: var(--areia); }
.importar-nome { margin-top: 0.6rem; font-size: 0.88rem; color: #5a5f58; }
.importar-mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.importar-campo { display: grid; gap: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--limao-escuro); }
.importar-campo select,
.importar-opcoes select { padding: 0.6rem 0.7rem; border: 1px solid #d7d4c8; border-radius: 4px; background: #fff; font: inherit; font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: #2a2e2a; }
.importar-opcoes { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; margin-top: 1.4rem; font-size: 0.9rem; color: #2a2e2a; }
.importar-opcoes label { display: flex; align-items: center; gap: 0.5rem; }
.importar-resumo { font-size: 1rem; color: #2a2e2a; }
.importar-ignoradas { color: #9a5a2a; }
.importar-tabela { max-height: 420px; overflow: auto; margin-top: 1rem; background: #fff; border-radius: 4px; box-shadow: 0 10px 26px rgba(18, 45, 30, 0.08); }
.importar-tabela table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.importar-tabela th { position: sticky; top: 0; background: var(--verde-800); color: var(--creme); text-align: left; padding: 0.7rem 0.9rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.importar-tabela td { padding: 0.6rem 0.9rem; border-bottom: 1px solid #efece3; color: #2a2e2a; }
.nivel-tag { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; background: #efece3; color: #6b6f68; }
.nivel-tag.expansor { background: var(--verde-800); color: var(--areia); }
.nivel-tag.construtor { background: #c3d68f; color: var(--verde-900); }
.nivel-tag.semeador { background: #f0e6c0; color: #5a4a12; }
#btn-importar:disabled { opacity: 0.5; cursor: not-allowed; }
.importar .btn-primary { background: var(--verde-800); color: var(--creme); box-shadow: none; }
.importar .btn-primary:hover:not(:disabled) { background: var(--verde-900); color: var(--areia); }

/* Portal: senha provisoria, trocar senha e "esqueci minha senha" */
button.link-discreto { background: none; border: none; padding: 0; font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
.esqueci-texto { margin: 0; font-size: 0.9rem; color: rgba(254, 245, 226, 0.8); }
.aviso-senha {
    display: inline-block;
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.9rem;
    background: rgba(201, 215, 128, 0.12);
    border-left: 3px solid var(--areia);
    border-radius: 4px;
    font-size: 0.88rem;
    color: var(--creme);
}
.aviso-senha a { color: var(--areia); font-weight: 700; }
.portal-senha {
    max-width: 560px;
    margin-top: 1.6rem;
    padding: 1.8rem;
    background: #fff;
    border-top: 3px solid var(--areia);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(18, 45, 30, 0.08);
}
.portal-senha .formulario { grid-template-columns: 1fr 1fr; max-width: none; }
.portal-senha label { color: #2a2e2a; }
.portal-senha .btn-primary { background: var(--verde-800); color: var(--creme); box-shadow: none; }
.portal-senha .btn-primary:hover { background: var(--verde-900); color: var(--areia); }
@media (max-width: 640px) { .portal-senha .formulario { grid-template-columns: 1fr; } }
/* Campos claros no cartao branco (o padrao e para fundo verde) */
.portal-senha .campo input { background: #fff; border-color: #cfcbbd; color: #2a2e2a; }
.portal-senha .campo input:focus { border-color: var(--verde-800); }

/* Link de "Esqueci minha senha" na area da equipe: so a senha nova */
.so-senha header,
.so-senha footer { display: none; }
.so-senha #editar-senha { min-height: 100vh; }

/* Importar: lista de acessos para mandar pelo WhatsApp */
.acessos { list-style: none; display: grid; gap: 0.8rem; margin: 1.2rem 0 0; padding: 0; }
.acesso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: #fff;
    border-left: 4px solid var(--areia);
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(18, 45, 30, 0.07);
}
.acesso.enviado { border-left-color: #7fa33a; opacity: 0.75; }
.acesso.enviado .acesso-dados strong::after { content: '  ✓ enviado'; font-size: 0.75rem; color: #5f7424; }
.acesso-dados { display: grid; gap: 0.15rem; font-size: 0.88rem; color: #4a4f4a; }
.acesso-dados strong { font-size: 1rem; color: #1d211d; }
.acesso-dados code { font-size: 0.95rem; font-weight: 800; color: var(--verde-800); background: #f3f1ea; padding: 0.05rem 0.4rem; border-radius: 3px; }
.acesso-sem-tel { color: #9a5a2a; font-size: 0.8rem; }
.acesso-acoes { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.btn-whats { background: #1f8f4e; color: #fff; border-radius: 999px; padding: 0.7rem 1.2rem; font-size: 0.75rem; }
.btn-whats:hover { background: #17733e; color: #fff; }
.btn-copiar { background: none; border: none; padding: 0; font: inherit; font-size: 0.82rem; color: var(--verde-800); text-decoration: underline; cursor: pointer; }
.importar-nova-senha { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; }
.importar-nova-senha input { flex: 1 1 260px; max-width: 380px; padding: 0.75rem 0.9rem; border: 1px solid #d7d4c8; border-radius: 4px; font: inherit; }

/* Edicao com publicacao (contas ligadas) */
html.esperando-edicoes body > section { visibility: hidden; }
body.modo-edicao section img[data-img] { cursor: pointer; outline: 2px dashed rgba(201, 215, 128, 0.9); outline-offset: -2px; }
body.modo-edicao section img[data-img]:hover { filter: brightness(0.85); }
#barra-edicao-extra button:disabled { opacity: 0.45; cursor: default; }
#btn-publicar { background: var(--areia) !important; color: var(--verde-900) !important; border-color: var(--areia) !important; }
.painel-historico {
    width: min(420px, calc(100vw - 32px));
    max-height: 60vh;
    overflow: auto;
    padding: 1rem 1.1rem;
    background: var(--verde-900);
    border: 1px solid rgba(201, 215, 128, 0.5);
    border-radius: 4px;
    color: var(--creme);
    font-size: 0.85rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.painel-historico ol { list-style: none; margin: 0.7rem 0; padding: 0; display: grid; gap: 0.5rem; }
.painel-historico li { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.painel-historico em { color: var(--areia); font-style: normal; font-weight: 700; }
.painel-historico button { padding: 0.35rem 0.7rem !important; font-size: 0.66rem !important; background: transparent !important; color: var(--areia) !important; border: 1px solid rgba(201, 215, 128, 0.5) !important; box-shadow: none !important; }
/* Tabela de medidas das camisetas */
.produto-medidas { margin-top: 0.8rem; font-size: 0.85rem; color: #2a2e2a; }
.produto-medidas summary { cursor: pointer; font-weight: 700; color: var(--verde-800); text-decoration: underline; text-underline-offset: 3px; }
.produto-medidas table { width: 100%; margin-top: 0.6rem; border-collapse: collapse; background: #fff; border-radius: 4px; overflow: hidden; }
.produto-medidas th, .produto-medidas td { padding: 0.4rem 0.5rem; text-align: center; border-bottom: 1px solid #efece3; }
.produto-medidas thead th { background: var(--verde-800); color: var(--creme); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.produto-medidas tbody th { text-align: left; font-weight: 800; }
.produto-medidas .medida-breve { color: #8a8d86; font-style: italic; }
.produto-medidas table { table-layout: fixed; font-size: 0.8rem; }
.produto-medidas thead th { font-size: 0.6rem; letter-spacing: 0.04em; padding: 0.45rem 0.2rem; }
.produto-medidas th:first-child { width: 2.8rem; }
.produto-medidas thead th { text-transform: none; letter-spacing: 0; font-size: 0.72rem; font-weight: 700; }
.produto-medidas th:first-child { width: 2.2rem; }
.produto-medidas thead th { font-size: 0.68rem; padding-left: 0.1rem; padding-right: 0.1rem; }
.rotulo-mapa.oceano.lado span { transform: translate(-100%, -50%); text-align: right; line-height: 1.5; }

/* Mapa acompanha a rolagem no computador: a lista de cidades e territorios
   e longa, e o mapa (com o cartao das fotos) continua a vista */
@media (min-width: 901px) {
    .mapa-container { align-items: start; }
    .mapa-container .mapa-leaflet { position: sticky; top: 90px; }
}

/* Mapa mais fluido: cartao do pin e dicas entram com suavidade */
@keyframes cartao-entra { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.popup-fotos-wrap .leaflet-popup-content-wrapper { animation: cartao-entra 0.35s var(--ease-suave) both; transform-origin: 50% 100%; }
.pf-foto img { transition: opacity 0.25s ease; }
.leaflet-tooltip.mapa-dica { animation: cartao-entra 0.2s ease-out both; }
.leaflet-container { cursor: grab; }
.leaflet-container.leaflet-dragging, .leaflet-dragging .leaflet-interactive { cursor: grabbing; }
.local-btn { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-suave); }
.local-btn:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
    .popup-fotos-wrap .leaflet-popup-content-wrapper, .leaflet-tooltip.mapa-dica { animation: none; }
}

/* Conteudo exclusivo vindo do banco (noticias e beneficios dos Expansores) */
.conteudo-restrito-aviso {
    margin-top: 2rem;
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--areia);
    background: rgba(201, 215, 128, 0.09);
    font-size: 0.95rem;
}
.conteudo-restrito-aviso[hidden] { display: none; }
.noticia-imagem { overflow: hidden; }
.noticia-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noticia-corpo a.btn { align-self: flex-start; }

/* ===== Alteracoes no site (editar.html) ===== */
.editar-demo {
    margin-top: 1.5rem;
    max-width: 640px;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--areia);
    background: rgba(201, 215, 128, 0.12);
    font-size: 0.92rem;
}
.editar-passos {
    margin: 1.5rem 0 2rem;
    padding-left: 1.3rem;
    display: grid;
    gap: 0.5rem;
    max-width: 720px;
}
.editar-lista {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}
.editar-lista a {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border-top: 3px solid var(--verde-600);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.editar-lista a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); }
.editar-lista span { font-size: 0.8rem; opacity: 0.65; }
.editar-outros { margin-top: 2.5rem; }

/* Link de volta ao painel, na barra de edicao */
#barra-edicao .barra-painel {
    padding: 0.5rem 0.8rem;
    background: var(--verde-800);
    color: var(--areia-clara);
    border: 1px solid rgba(201, 215, 128, 0.5);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ===== Editor: textos, links e secoes novas ===== */
body.modo-edicao [data-txt] { outline: 1px dashed rgba(201, 215, 128, 0.9); outline-offset: 4px; cursor: text; }
body.modo-edicao [data-txt]:focus { outline: 2px solid var(--areia); background: rgba(201, 215, 128, 0.08); }
body.modo-edicao a[data-link] { cursor: pointer; }
#ctrl-bloco { flex-wrap: wrap; max-width: min(560px, calc(100vw - 16px)); }
#ctrl-bloco .ctrl-novo { display: inline-flex; align-items: center; gap: 0.3rem; padding-left: 0.4rem; border-left: 1px solid rgba(201, 215, 128, 0.4); }
#ctrl-bloco .ctrl-novo[hidden] { display: none; }
#ctrl-bloco .ctrl-novo > span { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--areia-clara); white-space: nowrap; }

#ctrl-link {
    position: absolute;
    z-index: 1450;
    width: min(420px, calc(100vw - 16px));
    display: grid;
    gap: 0.4rem;
    padding: 0.8rem;
    background: var(--verde-900);
    border: 1px solid var(--areia);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    color: var(--areia-clara);
    font-size: 0.8rem;
}
#ctrl-link input {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(201, 215, 128, 0.6);
    background: #fff;
    color: #1b1b1b;
    font: inherit;
    font-size: 0.85rem;
}
#ctrl-link small { opacity: 0.75; font-size: 0.7rem; line-height: 1.4; }
#ctrl-link div { display: flex; gap: 0.4rem; flex-wrap: wrap; }
#ctrl-link button {
    padding: 0.45rem 0.7rem;
    border: none;
    background: var(--areia);
    color: var(--verde-900);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
#ctrl-link button[type="button"] { background: transparent; color: var(--areia-clara); border: 1px solid rgba(201, 215, 128, 0.5); }

/* Secoes novas criadas pelo editor */
.secao-nova h2 { margin-bottom: 1.2rem; }
.secao-nova-figura { margin: 1.5rem 0 0; }
.secao-nova-figura img { width: 100%; max-height: 70vh; object-fit: cover; display: block; }
.secao-nova-figura figcaption { margin-top: 0.6rem; font-size: 0.9rem; opacity: 0.75; }
.secao-nova-video { position: relative; aspect-ratio: 16 / 9; margin-top: 1.5rem; background: rgba(0, 0, 0, 0.25); }
.secao-nova-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.secao-nova-sem-video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.7; }
.so-edicao { display: none; }
body.modo-edicao .so-edicao {
    display: inline-block;
    margin-top: 0.8rem;
    padding: 0.5rem 0.9rem;
    border: none;
    background: var(--areia);
    color: var(--verde-900);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
body.modo-edicao img[data-img] { cursor: pointer; }
.editar-passos ul { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.25rem; list-style: disc; }

/* ===== Painel de configuracoes (editar.html) ===== */
.painel-config h2 { margin-bottom: 0.8rem; }
.pc-dica { font-size: 0.88rem; opacity: 0.75; margin: 0.4rem 0 1rem; max-width: 760px; }
.pc-bloco { margin-top: 1.2rem; background: #fff; border-top: 3px solid var(--verde-600); }
.pc-bloco > summary { padding: 1.1rem 1.3rem; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.pc-bloco > div { padding: 0 1.3rem 1.4rem; }
.pc-bloco h4 { margin: 1.2rem 0 0.6rem; font-size: 0.95rem; }
.pc-bloco h5 { margin: 1rem 0 0.5rem; font-size: 0.85rem; }
.pc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem 1.2rem; }
.pc-campo { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.pc-campo small { font-weight: 400; opacity: 0.7; font-size: 0.75rem; }
.pc-campo input, .pc-campo select, .pc-campo textarea,
.pc-tabela input, .pc-foto input {
    width: 100%; padding: 0.55rem 0.65rem; border: 1px solid #cfc9b6; background: #fffdf7;
    font: inherit; font-weight: 400; font-size: 0.9rem; color: inherit;
}
.pc-tabela { border-collapse: collapse; margin: 1rem 0; font-size: 0.85rem; }
.pc-tabela th, .pc-tabela td { padding: 0.3rem 0.4rem; border-bottom: 1px solid #ece6d4; text-align: left; }
.pc-tabela input { width: 5.5rem; padding: 0.35rem 0.45rem; }
.pc-produto { padding: 1rem 0 1.4rem; border-bottom: 1px solid #ece6d4; }
.pc-produto-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.pc-fotos { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.5rem 0; }
.pc-foto { width: 150px; display: flex; flex-direction: column; gap: 0.3rem; }
.pc-foto img { width: 150px; height: 110px; object-fit: cover; display: block; background: #eee; }
.pc-foto-acoes { display: flex; gap: 0.25rem; }
.pc-foto-acoes button, .pc-noticia-acoes button, .pc-produto-topo button, .pc-cidade-linha button, .pc-versoes button {
    padding: 0.3rem 0.55rem; border: 1px solid #cfc9b6; background: #fff; font: inherit; font-size: 0.75rem; cursor: pointer;
}
.pc-foto-acoes button:disabled { opacity: 0.35; cursor: default; }
.pc-perigo { color: #9b2c1a; border-color: #e4b7a8 !important; }
.pc-foto-nova { width: 150px; height: 110px; border: 2px dashed #cfc9b6; background: transparent; font: inherit; font-size: 0.8rem; cursor: pointer; }
.pc-cidade-linha { display: flex; align-items: flex-start; gap: 1rem; border-bottom: 1px solid #ece6d4; padding: 0.5rem 0; }
.pc-cidade { flex: 1; }
.pc-cidade > summary { cursor: pointer; padding: 0.3rem 0; }
.pc-cidade > summary span { opacity: 0.65; font-size: 0.85rem; }
.pc-mostrar { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; white-space: nowrap; padding-top: 0.35rem; }
.pc-nova-cidade, .pc-noticia-form { margin-top: 1.4rem; display: grid; gap: 0.8rem; justify-items: start; }
.pc-nova-cidade .pc-grade, .pc-noticia-form .pc-grade { width: 100%; }
.pc-salvar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; padding: 0.9rem 1.3rem; background: var(--verde-900); color: var(--areia-clara); }
.pc-salvar .pc-dica { margin: 0; opacity: 0.9; }
.pc-salvar .btn-secondary { color: var(--areia-clara); }
.pc-versoes { margin-top: 0.6rem; padding: 1rem 1.3rem; background: #fff; font-size: 0.85rem; }
.pc-versoes li { display: flex; gap: 0.8rem; align-items: center; padding: 0.25rem 0; }
.pc-noticia { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid #ece6d4; }
.pc-noticia small { display: block; opacity: 0.65; }
.pc-escondida { opacity: 0.55; }
.pc-noticia-acoes { display: flex; gap: 0.4rem; align-items: center; }
.pc-noticia-foto-linha { display: flex; align-items: center; gap: 1rem; }
.pc-noticia-foto { width: 160px; height: 90px; background: #eee; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; overflow: hidden; }
.pc-noticia-foto img { width: 100%; height: 100%; object-fit: cover; }
.pc-cadastros-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem 1.2rem; }
.pc-cadastros-filtros .pc-campo { min-width: 240px; }
.pc-cadastro { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid #ece6d4; }
.pc-cadastro small { display: block; opacity: 0.65; overflow-wrap: anywhere; }
.pc-nivel { font-size: 0.75rem; padding: 0.25rem 0.55rem; background: #f3eedd; white-space: nowrap; }
.pc-nivel.com-nivel { background: var(--areia); color: var(--verde-900); font-weight: 700; }
.pc-whats { padding: 0.3rem 0.65rem; background: #1f7a45; color: #fff; font-size: 0.75rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) { .pc-cadastro { flex-direction: column; align-items: flex-start; gap: 0.4rem; } }
@media (max-width: 640px) {
    .pc-cidade-linha { flex-direction: column; gap: 0.2rem; }
    .pc-foto, .pc-foto img, .pc-foto-nova { width: 130px; }
}
.pf-legenda { margin: 0; padding: 0.55rem 0.9rem 0; color: rgba(254, 245, 226, 0.85); font-size: 0.8rem; line-height: 1.4; }
/* Barra de edicao: Painel e Baixar edicoes sempre a mao (demonstracao) */
#barra-edicao .barra-linha { display: flex; gap: 0.5rem; align-items: center; }
#barra-edicao .barra-baixar {
    padding: 0.5rem 0.8rem;
    background: var(--areia-clara);
    color: var(--verde-900);
    font-size: 0.66rem;
}

/* Area do Mantenedor: faixa de noticias que desliza para o lado */
.faixa-noticias-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }
.faixa-noticias-topo .sub-titulo { margin: 0; }
.faixa-controles { display: flex; align-items: center; gap: 0.5rem; }
.faixa-seta {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--verde-600); background: transparent; color: var(--verde-800);
    font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease;
}
.faixa-seta:hover:not(:disabled) { background: var(--verde-800); color: var(--areia-clara); }
.faixa-seta:disabled { opacity: 0.3; cursor: default; }
.noticias-faixa {
    display: flex; gap: 1.5rem; margin-top: 1.5rem; padding-bottom: 0.8rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: thin; scrollbar-color: var(--verde-600) transparent;
}
.noticias-faixa .noticia-card { flex: 0 0 min(320px, 82%); scroll-snap-align: start; }
@media (max-width: 640px) { .faixa-seta { display: none; } }

/* ===== Mapa (Onde Estamos): visual renovado ===== */
/* Mar: verde profundo com luz no centro e bordas mais escuras */
.mapa-leaflet.leaflet-container,
.mapa-leaflet .leaflet-container {
    background: radial-gradient(ellipse 85% 75% at 58% 42%, #1a4231 0%, #11301f 55%, #0a1e14 100%);
}
.mapa-leaflet { border-color: rgba(201, 215, 128, 0.25); border-radius: 10px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
/* Rotulos com sombra leve, para ler melhor sobre qualquer cor */
.rotulo-mapa.pais span { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.rotulo-mapa.pais.lado span, .rotulo-mapa.vizinho span, .rotulo-mapa.oceano span { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* Pins: maiores, com sombra; o escolhido fica dourado e pulsa */
.pin-local { position: relative; }
.pin-local svg { width: 30px; height: 40px; display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); transition: transform 0.25s var(--ease-suave); transform-origin: 50% 100%; }
.pin-local svg path { fill: var(--verde-900); stroke: var(--creme); stroke-width: 1.8; }
.pin-local svg circle { fill: var(--areia); }
.pin-local:hover svg { transform: scale(1.12); }
.pin-ativo svg { transform: scale(1.18); }
.pin-ativo svg path { fill: var(--areia); stroke: var(--verde-900); }
.pin-ativo svg circle { fill: var(--verde-900); }
.pin-pulso {
    position: absolute; left: 50%; bottom: 0; width: 26px; height: 10px; margin-left: -13px;
    border-radius: 50%; background: rgba(201, 215, 128, 0.55);
    animation: pinPulso 1.8s ease-out infinite;
}
@keyframes pinPulso {
    from { transform: scale(0.6); opacity: 0.9; }
    to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pin-pulso { animation: none; opacity: 0.5; } }

/* Grupos de pins: circulo com anel claro */
.pin-grupo {
    background: radial-gradient(circle at 35% 30%, #2a5a3e, var(--verde-900));
    border: 2px solid var(--areia);
    box-shadow: 0 0 0 5px rgba(201, 215, 128, 0.18), 0 4px 10px rgba(0, 0, 0, 0.4);
    color: var(--creme);
    transition: transform 0.2s var(--ease-suave);
}
.pin-grupo:hover { transform: scale(1.08); }

/* Lista de cidades: fotinho ao lado do nome */
.local-btn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 36px; }
.local-mini { display: none; width: 22px; height: 22px; margin-left: -0.35rem; border-radius: 50%; background: center / cover no-repeat; box-shadow: 0 0 0 2px rgba(201, 215, 128, 0.5); flex: none; }
.local-btn.com-foto .local-mini { display: inline-block; }
.local-btn.ativo .local-mini { box-shadow: 0 0 0 2px var(--verde-900); }

/* Mapa: nome das cidades ao lado do pin */
.leaflet-tooltip.rotulo-cidade {
    padding: 0.15rem 0.5rem;
    background: rgba(14, 34, 24, 0.82);
    border: 1px solid rgba(201, 215, 128, 0.35);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    color: var(--creme);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}
.leaflet-tooltip.rotulo-cidade::before { display: none; }
.leaflet-tooltip.rotulo-cidade.rotulo-ativo { background: var(--areia); color: var(--verde-900); border-color: var(--areia); font-weight: 800; z-index: 1; }
/* Lista de cidades de um grupo de pins (ao passar o mouse) */
.leaflet-tooltip.mapa-dica {
    background: var(--verde-900);
    color: var(--creme);
    border: 1px solid rgba(201, 215, 128, 0.4);
    border-left: 3px solid var(--areia);
}
.leaflet-tooltip.mapa-dica::before { display: none; }

/* Mapa sem moldura e sem fundo: os territorios ficam soltos sobre o fundo
   da secao; os vizinhos so com um contorno leve */
.mapa-leaflet,
.mapa-leaflet.leaflet-container {
    background: transparent !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.mapa-leaflet .leaflet-control-attribution { background: transparent; }
.mapa-leaflet .leaflet-bar { box-shadow: none !important; border: 1px solid rgba(201, 215, 128, 0.35) !important; }
.rotulo-mapa.vizinho span { color: rgba(254, 245, 226, 0.35); }
/* Bordas esfumacadas: ao aproximar, o mapa se mistura com o fundo em vez
   de terminar numa linha reta. Zoom e creditos ficam fora da faixa que some */
.mapa-leaflet {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
                        linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-composite: intersect;
}
.mapa-leaflet .leaflet-control-zoom { margin: 44px 0 0 44px !important; }
.mapa-leaflet .leaflet-control-attribution { margin: 0 44px 40px 0 !important; }
@media (max-width: 640px) {
    .mapa-leaflet {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%),
                            linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%),
                    linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    .mapa-leaflet .leaflet-control-zoom { margin: 20px 0 0 20px !important; }
    .mapa-leaflet .leaflet-control-attribution { margin: 0 18px 16px 0 !important; }
}
/* Mapa sem cores por territorio: nomes claros sobre o fundo escuro */
.rotulo-mapa.pais span { color: var(--creme); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.rotulo-mapa.pais.lado span { color: var(--creme); }

/* ===== Mapa com fundo de mapa de verdade (CARTO / OpenStreetMap) =====
   Volta a moldura (o fundo e claro) e sai o esfumacado das bordas */
.mapa-leaflet,
.mapa-leaflet.leaflet-container {
    background: #f2efe9 !important;
    border: 1px solid rgba(201, 215, 128, 0.35);
    border-radius: 10px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
.mapa-leaflet .leaflet-control-zoom { margin: 12px 0 0 12px !important; }
.mapa-leaflet .leaflet-control-attribution { margin: 0 !important; background: rgba(255, 255, 255, 0.8); color: #555; }
.mapa-leaflet .leaflet-control-attribution a { color: #2f6b48; }

/* ===== Mapa em satelite escuro, com contornos e rotas douradas =====
   Sem moldura; bordas somem no fundo da secao */
.mapa-leaflet,
.mapa-leaflet.leaflet-container {
    background: #0b1d14 !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%),
                        linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%) !important;
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%) !important;
    mask-composite: intersect;
}
/* Satelite escurecido e puxado para o verde e o dourado */
.mapa-leaflet .leaflet-tile-pane { filter: brightness(0.62) contrast(1.15) saturate(0.7) sepia(0.28) hue-rotate(28deg); }
.mapa-leaflet .leaflet-control-zoom { margin: 52px 0 0 52px !important; }
.mapa-leaflet .leaflet-control-attribution { margin: 0 52px 46px 0 !important; background: rgba(11, 29, 20, 0.6); color: rgba(254, 245, 226, 0.6); }
.mapa-leaflet .leaflet-control-attribution a { color: var(--areia); }
.rotulo-sat { pointer-events: none; }
.rotulo-sat span {
    display: block;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.5);
}
.rotulo-sat.oceano span { font-size: 0.68rem; font-weight: 500; font-style: italic; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(254, 245, 226, 0.55); }
@media (max-width: 640px) {
    .mapa-leaflet,
    .mapa-leaflet.leaflet-container {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%),
                            linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
        mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%),
                    linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
    }
    .mapa-leaflet .leaflet-control-zoom { margin: 20px 0 0 20px !important; }
    .mapa-leaflet .leaflet-control-attribution { margin: 0 18px 16px 0 !important; }
    .rotulo-sat.oceano { display: none; }
}
/* Pagina de noticias: mesma faixa que desliza, setas acima, a direita */
.faixa-controles-pagina { justify-content: flex-end; margin-top: 1.5rem; }
#noticias-lista { transition: opacity 0.2s ease, transform 0.2s ease; }
#noticias-lista.filtrando { opacity: 0; transform: translateY(8px); }
/* Faixa de noticias sem barra de rolagem: setas, dedo ou arrastar com o mouse */
.noticias-faixa { scrollbar-width: none; -ms-overflow-style: none; cursor: grab; user-select: none; }
.noticias-faixa::-webkit-scrollbar { display: none; }
.noticias-faixa.arrastando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.noticias-faixa img { -webkit-user-drag: none; }
/* Espaco para o cartao subir no hover sem cortar a linha de cima e a sombra */
.noticias-faixa { padding: 10px 0 28px; margin-top: 0.8rem; }

/* "Eu faco parte dessa missao": mosaico com as fotos das cidades ao fundo,
   bem escurecido (img/mosaico-missao.jpg, montado a partir de
   img/locais/<cidade>/; gerar de novo quando chegarem fotos novas) */
.campanha {
    background:
        linear-gradient(180deg, rgba(11, 34, 21, 0.94) 0%, rgba(11, 34, 21, 0.84) 35%, rgba(11, 34, 21, 0.86) 70%, rgba(11, 34, 21, 0.96) 100%),
        url('img/mosaico-missao.jpg?v=3') center / cover no-repeat,
        var(--verde-900);
}

/* Arcos do topo somem aos poucos antes da borda de baixo (sem a linha reta
   de corte onde o topo encontra a secao seguinte) */
.hero::before {
    -webkit-mask-image: radial-gradient(circle at 88% 115%, #000 0, #000 35%, transparent 70%),
                        linear-gradient(to bottom, #000 0, #000 30%, transparent 82%);
    -webkit-mask-composite: source-in;
            mask-image: radial-gradient(circle at 88% 115%, #000 0, #000 35%, transparent 70%),
                        linear-gradient(to bottom, #000 0, #000 30%, transparent 82%);
            mask-composite: intersect;
}

/* Pagina inicial: o fundo do topo e a arte do Cone Sul (mapa com os arcos),
   no lugar dos arcos desenhados e da rosa dos ventos. Mesmo verde da arte */
body[data-pagina="inicio"] .hero {
    background: #0f2d1b url('img/fundo-inicio.webp?v=1') right 4% bottom / auto 104% no-repeat;
}
body[data-pagina="inicio"] .hero::before,
body[data-pagina="inicio"] .hero::after { display: none; }
@media (min-width: 901px) and (max-width: 1600px) {
    /* Notebook: a arte encosta no titulo; fica menor e mais apagada atras do texto */
    body[data-pagina="inicio"] .hero {
        background:
            linear-gradient(90deg, rgba(15, 45, 27, 0.92) 0%, rgba(15, 45, 27, 0.7) 50%, rgba(15, 45, 27, 0) 72%),
            #0f2d1b url('img/fundo-inicio.webp?v=1') right -2% bottom / auto 96% no-repeat;
    }
}
@media (max-width: 900px) {
    /* No celular a arte fica atras do texto: mais apagada */
    body[data-pagina="inicio"] .hero {
        background:
            linear-gradient(rgba(15, 45, 27, 0.72), rgba(15, 45, 27, 0.72)),
            #0f2d1b url('img/fundo-inicio.webp?v=1') right -30% bottom / auto 100% no-repeat;
    }
}

/* Logo do menu (imagem): altura fixa, sem o texto */
nav .logo { display: inline-flex; align-items: center; line-height: 0; }
nav .logo img { height: 46px; width: auto; display: block; }
@media (max-width: 700px) { nav .logo img { height: 40px; } }

/* Link da Politica de Privacidade nas autorizacoes do cadastro */
.consentimento a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Area do Mantenedor aberta pela equipe: blocos de um nivel so, com etiqueta */
.so-nivel-edicao { position: relative; outline: 2px dashed var(--areia); outline-offset: -8px; }
.so-nivel-edicao::before {
    content: attr(data-so-nivel); position: absolute; top: 14px; right: 14px; z-index: 2;
    padding: 0.25rem 0.6rem; background: var(--areia); color: var(--verde-900);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}