/* -------------------------------------------------------------------------
   ofertas.css — bloco compartilhado pelas quatro seções alimentadas por JSON:
   Ofertas Especiais, Cruzeiros Imperdíveis, Pacotes Nacionais e Internacionais.

   Tipografia e espaçamentos especificados; medidas de grid e card conferidas
   no mockup 1920:
     card ......... 273px de largura, gap de 16px (4 x 273 + 3 x 16 = 1140)
     imagem ....... 160px de altura (é a altura dos PNGs exportados)
     tags ......... 8px do topo e da esquerda da imagem
     duração ...... 16px da direita, descendo 12px abaixo da imagem
     corpo ........ padding lateral de 16px
   ------------------------------------------------------------------------- */

.ofertas-section {
    position: relative;
    overflow: hidden;
    padding: 72px 0 80px;
    background: var(--branco);
}

.ofertas-container {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------- cabeçalho -- */

.ofertas-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.ofertas-titulo {
    font-family: var(--fonte-titulo);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--roxo-tinta);
    margin-bottom: 8px;
}

.ofertas-subtitulo {
    font-family: var(--fonte-titulo);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #403d42;
    margin-bottom: 24px;
}

/* --------------------------------------------------------------- filtros -- */

.ofertas-filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}

.ofertas-filtro {
    display: inline-flex;
    align-items: center;
    font-family: var(--fonte-titulo);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--laranja-grad-escuro);
    background: transparent;
    border: 1px solid var(--laranja);
    border-radius: var(--raio-pill);
    height: 40px;
    padding: 0 12px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ofertas-filtro:hover { background: var(--laranja-suave); }

.ofertas-filtro.is-active {
    background: var(--laranja-grad);
    border-color: transparent;
    color: #fff;
}

.ofertas-filtro:focus-visible {
    outline: 2px solid var(--roxo);
    outline-offset: 2px;
}

/* ---------------------------------------------------------- grid / slider -- */

.ofertas-slider { position: relative; }

.ofertas-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.ofertas-grid.is-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.ofertas-grid.is-slider::-webkit-scrollbar { display: none; }

.ofertas-grid.is-slider > .card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: calc((100% - 16px * 3) / 4);
}

.ofertas-grid.is-tablet > .card { width: calc((100% - 16px) / 2); }
.ofertas-grid.is-mobile > .card { width: min(86%, 273px); scroll-snap-align: center; }

.card[hidden] { display: none; }

.ofertas-slider-nav {
    display: none;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.ofertas-slider.has-slider .ofertas-slider-nav { display: flex; }

.ofertas-slider-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--laranja);
    background: #fff;
    color: var(--laranja-grad-escuro);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.ofertas-slider-btn:hover:not(:disabled) {
    background: var(--laranja);
    color: #fff;
}

.ofertas-slider-btn:disabled { opacity: .35; cursor: default; }
.ofertas-slider-btn svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ card -- */

.card {
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border-radius: var(--raio-card);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(46, 26, 71, .10);
    transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-alt);
}

/* mídia --------------------------------------------------------------- */

.card-media {
    position: relative;
    height: 160px;
    background: #ece8f2;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Selos: mesma pastilha para as tags do topo e para a duração. */
.card-tag,
.card-duracao {
    font-family: var(--fonte-titulo);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    background: var(--roxo-tinta);
    border-radius: 4px;
    padding: 6px 8px;
}

/* Só as tags do topo vão em caixa alta — no layout a duração aparece
   como "6 Dias / 5 Noites", com as iniciais maiúsculas. */
.card-tag { text-transform: uppercase; }

.card-tags {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
}

/* A duração fica a cavaleiro da borda inferior da imagem. */
.card-duracao {
    position: absolute;
    right: 16px;
    bottom: -12px;
    z-index: 1;
}

/* corpo --------------------------------------------------------------- */

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 16px 0;
}

.card-tipo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-titulo);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: var(--lilas);
    margin-bottom: 8px;
}

.card-tipo-icone {
    width: 20px;
    height: 20px;
    flex: none;
    display: block;
    color: var(--lilas);
}

.card-titulo {
    font-family: var(--fonte-titulo);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--roxo-tinta);
    margin-bottom: 16px;
}

.card-lista {
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
}

.card-lista li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    font-family: var(--fonte-lista);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #615d65;
}

.card-check {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--lilas);
}

/* preço --------------------------------------------------------------- */

.card-preco { margin-top: auto; }

.card-preco-rotulo {
    font-family: var(--fonte-titulo);
    font-size: 13px;
    line-height: 1.2;
    color: #87828c;
    margin-bottom: 2px;
}

.card-preco-valor {
    font-family: var(--fonte-titulo);
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--roxo-tinta);
}

.card-preco-parcelas { font-size: 13px; font-weight: 500; }
.card-preco-numero { font-size: 20px; font-weight: 700; line-height: 1.1; }

.card-preco-total {
    font-family: var(--fonte-titulo);
    font-size: 13px;
    line-height: 1.2;
    color: #87828c;
    margin-top: 2px;
}

/* ações --------------------------------------------------------------- */

.card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    height: 40px;
    border-radius: 8px;
    background: var(--verde-whatsapp);
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease;
}

.card-cta:hover { background: var(--verde-whatsapp-escuro); }
.card-cta svg { width: 18px; height: 18px; flex: none; }

.card-obs {
    margin-top: 16px;
    padding: 13px 0 16px;
    border-top: 1px solid #e5e4e6;
    font-family: var(--fonte-titulo);
    font-size: 10px;
    line-height: 1.3;
    color: #b5b2b8;
    text-align: center;
}

/* --------------------------------------------------------- ver mais / vazio -- */

.ofertas-mais {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.btn-mais {
    font-family: var(--fonte-titulo);
    font-size: 14px;
    font-weight: 400;
    color: var(--roxo);
    background: #fff;
    border: 1px solid var(--roxo);
    border-radius: var(--raio-pill);
    padding: 12px 24px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.btn-mais:hover { background: var(--roxo); color: #fff; }
.btn-mais[hidden] { display: none; }

.ofertas-vazio {
    text-align: center;
    font-size: 14px;
    color: var(--suave);
    padding: 32px 0;
}

/* ------------------------------------------------- decoração por seção -- */

.ofertas-ofertas-especiais { padding-top: 80px; }

.ofertas-cruzeiros-imperdiveis,
.ofertas-pacotes-nacionais,
.ofertas-pacotes-internacionais { overflow: hidden; }



.ofertas-pacotes-internacionais { padding-bottom: 96px; }


/* ------------------------------------------------------------ responsivo -- */

@media (max-width: 1100px) {
    .ofertas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .ofertas-section { padding: 56px 0 60px; }
    .ofertas-grid { grid-template-columns: 1fr; }
    .ofertas-filtros { margin-bottom: 32px; }
    .ofertas-pacotes-internacionais { padding-bottom: 72px; }
    
}

/* ------------------------------------------------- linhas decorativas -- */

/* Arcos de linhas do layout (wave-svg 1920x889 e wave2svg 1920x374).
   Ficam atrás do conteúdo e são recortados pelo overflow da seção. */
.ofertas-linhas {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Offsets medidos: wave-svg em +236px do topo da seção de Cruzeiros,
   wave2svg em +626px do topo de Pacotes Nacionais. */
.ofertas-linhas--cruzeiros-imperdiveis { top: 236px; }
.ofertas-linhas--pacotes-nacionais     { top: 626px; }

/* Abaixo de 1100px o offset vira proporcional — as seções encurtam junto.
   12.3vw e 32.6vw dão exatamente 236px e 626px em 1920. */
@media (max-width: 1100px) {
    .ofertas-linhas--cruzeiros-imperdiveis { top: 12.3vw; }
    .ofertas-linhas--pacotes-nacionais     { top: 32.6vw; }
}

/* O "Ver mais ofertas" das seções que emendam numa faixa roxa fica por cima
   da onda, que é puxada para cima pela seção seguinte. */
/* A onda ocupa os últimos 400px; o botão fica 80px acima da base. */
.ofertas-ofertas-especiais,
.ofertas-pacotes-internacionais { padding-bottom: 80px; }

.ofertas-ofertas-especiais .ofertas-mais,
.ofertas-pacotes-internacionais .ofertas-mais {
    position: relative;
    z-index: 2;
}

.ofertas-ofertas-especiais .btn-mais,
.ofertas-pacotes-internacionais .btn-mais {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.ofertas-ofertas-especiais .btn-mais:hover,
.ofertas-pacotes-internacionais .btn-mais:hover {
    background: #fff;
    color: var(--roxo);
}

/* Onda orgânica que emenda com a faixa roxa seguinte. Fica no rodapé da
   seção branca, atrás do conteúdo (o botão "Ver mais ofertas" passa por cima). */
.ofertas-onda {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 0;
}