/* =========================================================================
   BeFly Travel — Promoções
   global.css — resets, variáveis de cor/tipografia e utilitários.
   CSS puro, sem framework.
   ========================================================================= */

:root {
    /* Marca (extraída do layout) */
    --laranja:        #f68d2e;
    --laranja-escuro: #f37c24;
    --laranja-suave:  #fef8f3;
    --roxo:           #753bbd;
    --roxo-escuro:    #3d1f66;
    --roxo-tinta:     #2e1a47;
    --lilas:          #b885cc;
    --azul-marinho:   #041e42;
    --verde:          #25c982;
    --verde-escuro:   #1fb574;
    --verde-whatsapp:        #06c270;   /* botão do banner */
    --verde-whatsapp-escuro: #05a75f;

    /* Texto e superfícies */
    --tinta:   #2c445a;
    --texto:   #5a5670;
    --suave:   #8b8798;
    --borda:   #e7e3ee;
    --branco:  #ffffff;

    /* Formas */
    --raio-card:  14px;
    --raio-pill:  999px;
    --sombra:     0 6px 24px rgba(46, 26, 71, .08);
    --sombra-alt: 0 14px 36px rgba(46, 26, 71, .16);

    /* Gradiente da marca (Main color/BeFly Travel): claro à esquerda, escuro à direita */
    --laranja-grad-claro: #f4a971;
    --laranja-grad-escuro: #f26e0d;
    --laranja-grad: linear-gradient(90deg, #f4a971 0%, #f26e0d 100%);

    /* Layout — no mockup o conteúdo tem 1140px (1188 - 2x24 de gutter) */
    --largura: 1188px;
    --gutter:  24px;
    --gap:     24px;

    /* Tipografia */
    --fonte-titulo: "Ample Soft Pro", "Segoe UI", system-ui, sans-serif;
    --fonte-texto:  "Ample Soft Pro", "Segoe UI", system-ui, sans-serif;
    /* Lista dos cards. Os arquivos da Open Sans ainda não estão em src/fonts/ */
    --fonte-lista:  "Open Sans", "Segoe UI", system-ui, sans-serif;
}

/* ----------------------------------------------------------------- reset -- */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--branco);
    font-family: var(--fonte-texto);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

button { font: inherit; }

/* ------------------------------------------------------------- utilitários -- */

.container {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- botões -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--fonte-titulo);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    border-radius: var(--raio-pill);
    padding: 12px 22px;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }

.btn-orange {
    background: var(--laranja-grad);
    color: #fff;
    box-shadow: 0 6px 14px rgba(30, 25, 40, .13);
}

.btn-orange:hover { filter: saturate(1.08) brightness(.98); }

.btn-green {
    background: var(--verde);
    color: #fff;
    padding: 14px 26px;
    font-size: .95rem;
}
.btn-green:hover { background: var(--verde-escuro); }

.btn:disabled { opacity: .6; cursor: default; transform: none; }

/* Link de acessibilidade — só aparece ao navegar por teclado. */

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--roxo);
    color: #fff;
    font-size: .85rem;
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}

.pular-para-conteudo:focus {
    left: 0;
}


/* Botão de WhatsApp — 163x48 no hero, 212x48 nos benefícios: mesma pastilha. */

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 48px;
    padding: 0 27px;
    border-radius: var(--raio-pill);
    background: var(--verde-whatsapp);
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, transform .2s ease;
}

.btn-whatsapp svg { width: 20px; height: 20px; flex: none; }
.btn-whatsapp:hover { background: var(--verde-whatsapp-escuro); transform: translateY(-1px); }
.btn-whatsapp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------------------------------------------------------------- mobile -- */

/* Gutters do mockup: 24px no desktop, 46px no tablet, 16px no celular. */
@media (max-width: 1100px) {
    :root { --gutter: 46px; }
}

@media (max-width: 560px) {
    :root { --gutter: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}