@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&display=swap');

/* =============================================
   VARIÁVEIS
   ============================================= */
:root {
    --verde-escuro:    #1B4332;
    --verde-medio:     #2D6A4F;
    --verde-claro:     #52B788;
    --verde-whatsapp:  #25D366;
    --verde-mapa:      #40916C;
    --offline:         #9E9E9E;
    --branco:          #FFFFFF;
    --preto:           #111111;
    --texto:           #2C2C2C;
    --bg-page:         #F0F0F0;
    --borda:           #E0E0E0;

    --fonte-titulo: 'Bebas Neue', Impact, sans-serif;
    --fonte-corpo:  'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

    --raio-card:    10px;
    --raio-btn:     6px;
    --sombra-card:  0 3px 14px rgba(0,0,0,.13);
    --transicao:    .2s ease;
    --max-width:    500px;
}

/* =============================================
   RESET
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--fonte-corpo);
    color: var(--texto);
    background: var(--bg-page);
    line-height: 1.15;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul, ol { list-style: none; }

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* =============================================
   WRAPPER CENTRAL — mobile-first, max 500px
   ============================================= */
.page-wrapper {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    /* primeiros 85px verdes (fica atrás do header fixo), resto branco */
    background: linear-gradient(var(--verde-escuro) 85px, var(--branco) 85px);
    overflow: hidden;
    /* sem sombra no mobile */
}

@media (min-width: 501px) {
    .page-wrapper {
        box-shadow:
            -6px 0 20px rgba(0,0,0,.08),
             6px 0 20px rgba(0,0,0,.08);
    }
}