/* ==========================================================================
   Página inicial (templates/destinations/home.html)

   Topo com carrossel de fotos em tela cheia, busca por cima da borda do topo,
   e as faixas: próximas experiências, destinos mais amados, por que viajar,
   Soar 60+ com depoimentos, #ViajantesSoar, Guia Soar e a chamada final.
   Carrega depois do viagem.css e usa as mesmas variáveis de cor.
   ========================================================================== */

.pagina-inicio { background: var(--fundo); }
.pagina-inicio main { overflow-x: clip; }

/* ----- Topo ------------------------------------------------------------- */
.in-hero { position: relative; min-height: clamp(560px, 48vw, 660px); display: flex; flex-direction: column;
           justify-content: flex-end; color: #fff; background: #0c1a13; overflow: hidden; }
.in-hero__fotos { position: absolute; inset: 0; }
.in-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                 opacity: 0; transform: scale(1.015); transition: opacity 1s ease, transform 7s ease; }
.in-hero__foto.ativo { opacity: 1; transform: scale(1); }
.in-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
                  background: linear-gradient(90deg, rgba(6, 16, 11, .72) 0%, rgba(6, 16, 11, .35) 45%, rgba(6, 16, 11, .05) 75%),
                              linear-gradient(180deg, rgba(6, 16, 11, .55) 0%, rgba(6, 16, 11, 0) 22%, rgba(6, 16, 11, 0) 60%, rgba(6, 16, 11, .75) 100%); }

.in-hero > .wrap { width: 100%; }
.in-hero__conteudo { position: relative; z-index: 2; padding-top: 150px; }
.in-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.08;
              letter-spacing: -.02em; max-width: 13ch; }
.in-hero__conteudo > p { margin-top: 16px; max-width: 34ch; font-size: clamp(1rem, 1.6vw, 1.15rem);
                         color: rgba(255, 255, 255, .92); line-height: 1.5; }
.in-hero__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.in-btn-vazado { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .85); }
.in-btn-vazado:hover { background: rgba(255, 255, 255, .12); }

.in-hero__rodape { position: relative; z-index: 2; padding-top: 44px; padding-bottom: 96px; text-align: center; }
.in-hero__nomes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 0;
                  font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .95); }
.in-hero__nomes span + span::before { content: '•'; margin: 0 14px; color: var(--ouro); }
.in-hero__pontos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.in-hero__pontos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
                          background: rgba(255, 255, 255, .5); transition: width .25s, background .25s; }
.in-hero__pontos button.ativo { width: 24px; background: #fff; }

.in-hero__seta { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
                 width: 46px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer;
                 border: 0; background: none; color: #fff; opacity: .85; }
.in-hero__seta:hover { opacity: 1; }
.in-hero__seta .ic { width: 34px; height: 34px; stroke-width: 1.4; }
.in-hero__seta--esq { left: 10px; }
.in-hero__seta--dir { right: 10px; }

/* ----- Busca ------------------------------------------------------------- */
.in-busca { position: relative; z-index: 5; margin: -62px auto 0; max-width: 1100px; background: var(--cartao, #fff);
            border-radius: var(--r-lg); box-shadow: 0 18px 40px rgba(20, 32, 27, .16); padding: 18px 22px 22px; }
.in-busca__titulo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px;
                    font-size: .9rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--preto); }
.in-busca__titulo .ic { width: 20px; height: 20px; stroke-width: 2; }
.in-busca__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; }
.in-campo { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border: 1px solid var(--linha);
            border-radius: var(--r-sm); background: var(--cartao, #fff); cursor: text; }
.in-campo > span { font-size: .78rem; font-weight: 700; color: var(--preto); }
.in-campo input, .in-campo select { width: 100%; border: 0; padding: 0; background: transparent; font: inherit;
                                     font-size: .88rem; color: var(--tinta); outline: none; }
.in-campo select { cursor: pointer; }
.in-campo:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(20, 108, 67, .14); }
.in-busca__botao { height: auto; min-height: 58px; padding: 0 26px; line-height: 1.25; max-width: 190px; }

/* ----- Seções e títulos -------------------------------------------------- */
.in-secao { padding-top: clamp(40px, 5vw, 56px); }
.in-secao--junta { padding-top: clamp(34px, 4vw, 48px); }
.in-titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.in-titulo h2 { font-size: clamp(1.02rem, 1.6vw, 1.2rem); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--preto); }
.in-titulo h2 small { margin-left: 8px; font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 500;
                      letter-spacing: .04em; color: var(--tinta-suave); }
.in-titulo a { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.in-titulo a:hover { text-decoration: underline; }
/* o @ do Instagram é título, não link pequeno: herda o h2 e fica em minúsculas, como no perfil */
.in-titulo h2 .in-titulo__perfil { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.in-vazio { padding: 22px 0; color: var(--tinta-suave); }

/* ----- Carrossel de cartões ---------------------------------------------- */
.in-carrossel { position: relative; }
.in-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px;
             overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; }
.in-trilho::-webkit-scrollbar { display: none; }
.in-carrossel__seta { width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
                      border-radius: 50%; border: 1px solid var(--linha); background: var(--cartao, #fff); color: var(--preto);
                      box-shadow: var(--sombra-sm); transition: border-color .15s, color .15s; }
.in-carrossel__seta:hover { border-color: var(--verde); color: var(--verde); }
.in-carrossel > .in-carrossel__seta { position: absolute; top: 42%; z-index: 3; }
.in-carrossel__seta--esq { left: -20px; }
.in-carrossel__seta--dir { right: -20px; }

/* cartão de viagem */
.in-exp { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--cartao, #fff);
          border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden;
          box-shadow: var(--sombra-sm); transition: transform .15s, box-shadow .15s; }
.in-exp:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.in-exp__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.in-exp__foto img { width: 100%; height: 100%; object-fit: cover; }
.in-tag { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 4px;
          font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.in-tag--disponivel { background: var(--verde); }
.in-tag--ultimas { background: #e0a21b; color: #2b1d00; }
.in-tag--breve { background: #1f6fb2; }
.in-tag--esgotado { background: #6b7a80; }
.in-exp__corpo { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.in-exp__corpo h3 { font-size: .92rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.in-exp__corpo h3 a { color: var(--preto); }
.in-exp__corpo h3 a:hover { color: var(--verde); }
.in-exp__linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px;
                 font-size: .78rem; font-weight: 600; color: var(--tinta); }
.in-exp__dias { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--tinta-suave); }
.in-exp__dias .ic { width: 15px; height: 15px; }
.in-exp__rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.in-exp__rodape small { display: block; font-size: .72rem; color: var(--tinta-suave); }
.in-exp__rodape b { font-family: 'Sora', sans-serif; font-size: 1.02rem; color: var(--preto); }
.in-btn-mini { flex: none; padding: 7px 12px; border: 1px solid var(--linha); border-radius: 6px; background: var(--cartao, #fff);
               font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--preto); }
.in-btn-mini:hover { border-color: var(--verde); color: var(--verde); }
.in-estrelas { color: var(--ouro); letter-spacing: 1px; white-space: nowrap; }
.in-estrelas small { color: var(--tinta-suave); letter-spacing: 0; }
.in-estrelas .vazia { color: #d6ddd9; }
.in-estrelas--grande { font-size: 1.15rem; letter-spacing: 2px; }

/* ----- Destinos mais amados ---------------------------------------------- */
.in-amados { display: grid; grid-template-columns: repeat(var(--colunas, 6), minmax(0, 1fr)); gap: 14px; }
.in-amado { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px;
            padding: 14px; border-radius: var(--r-md); overflow: hidden; color: #fff; isolation: isolate; }
.in-amado img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.in-amado::after { content: ''; position: absolute; inset: 0; z-index: -1;
                   background: linear-gradient(180deg, rgba(6, 16, 11, .62) 0%, rgba(6, 16, 11, .1) 35%, rgba(6, 16, 11, .15) 55%, rgba(6, 16, 11, .82) 100%); }
.in-amado:hover img { transform: scale(1.05); }
.in-amado__topo b { display: block; font-family: 'Sora', sans-serif; font-size: 1rem; line-height: 1.2; }
.in-amado__topo small { font-size: .76rem; color: rgba(255, 255, 255, .85); }
.in-amado__base { display: flex; flex-direction: column; gap: 2px; }
.in-amado__base small { font-size: .7rem; color: rgba(255, 255, 255, .88); }
.in-amado__base b { font-family: 'Sora', sans-serif; font-size: 1.05rem; }
.in-estilo { align-self: flex-start; margin-bottom: 8px; padding: 3px 8px; border-radius: 4px; background: #0f8f8f;
             font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.in-estilo--expedicao { background: #0f8f8f; }
.in-estilo--natureza { background: var(--verde); }
.in-estilo--cultura { background: #e08a1e; }
.in-estilo--aventura { background: #c24d3b; }
.in-estilo--bate-volta { background: #8e44ad; }

/* ----- Por que viajar ---------------------------------------------------- */
.in-motivos { padding: clamp(26px, 3.4vw, 38px) clamp(18px, 3vw, 34px); border-radius: var(--r-lg); background: #f3f0e8; text-align: center; }
.in-motivos h2 { font-size: clamp(1.02rem, 1.6vw, 1.2rem); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--preto); }
.in-motivos__grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.in-motivo .ic { width: 42px; height: 42px; color: var(--verde-escuro); stroke-width: 1.6; }
.in-motivo b { display: block; margin-top: 10px; font-size: .88rem; color: var(--preto); line-height: 1.3; }
.in-motivo p { margin-top: 8px; font-size: .78rem; color: var(--tinta-suave); line-height: 1.5; }

/* ----- Soar 60+ e depoimentos -------------------------------------------- */
.in-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(22px, 3vw, 40px); align-items: stretch; }
.in-60 { position: relative; display: flex; align-items: center; min-height: 300px; border-radius: var(--r-lg); overflow: hidden;
         background: var(--verde-escuro); color: #fff; isolation: isolate; }
.in-60__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.in-60::after { content: ''; position: absolute; inset: 0; z-index: -1;
                background: linear-gradient(90deg, rgba(13, 79, 49, .96) 0%, rgba(13, 79, 49, .82) 45%, rgba(13, 79, 49, .2) 100%); }
.in-60__texto { padding: 28px; max-width: 320px; }
.in-60__selo { display: inline-block; padding: 4px 10px; border-radius: 4px; background: rgba(255, 255, 255, .92);
               color: var(--verde-escuro); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.in-60 h2 { margin-top: 14px; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.1; }
.in-60 p { margin-top: 12px; font-size: .88rem; color: rgba(255, 255, 255, .9); line-height: 1.5; }
.in-60 .btn { margin-top: 18px; }

.in-depo { display: flex; flex-direction: column; min-width: 0; }
.in-depo__caixa { display: flex; align-items: center; gap: 12px; flex: 1; }
.in-depo__slides { position: relative; flex: 1; min-width: 0; display: grid; }
.in-depo__item { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: center;
                 opacity: 0; visibility: hidden; transition: opacity .4s; }
.in-depo__item.ativo { opacity: 1; visibility: visible; }
.in-depo__texto p { margin-top: 12px; font-size: .98rem; font-weight: 600; color: var(--preto); line-height: 1.5; }
.in-depo__autor { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.in-depo__autor img { width: 38px; height: 38px; border-radius: 50%; }
.in-depo__autor b { display: block; font-size: .82rem; color: var(--preto); }
.in-depo__autor small { font-size: .76rem; color: var(--tinta-suave); }
.in-depo__foto { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; }
.in-depo__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.in-depo__foto:hover img { transform: scale(1.04); }

/* ----- #ViajantesSoar ---------------------------------------------------- */
.in-insta { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.in-insta a { display: block; aspect-ratio: 4 / 3.2; border-radius: var(--r-sm); overflow: hidden; }
.in-insta img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, filter .2s; }
.in-insta a:hover img { transform: scale(1.06); filter: brightness(1.05); }

/* ----- Guia Soar --------------------------------------------------------- */
.in-guia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.in-artigo { display: flex; flex-direction: column; background: var(--cartao, #fff); border: 1px solid var(--linha);
             border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sombra-sm); transition: transform .15s, box-shadow .15s; }
.in-artigo:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.in-artigo__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.in-artigo__foto img { width: 100%; height: 100%; object-fit: cover; }
.in-artigo__foto--vazia { background: linear-gradient(135deg, #1f6f4a 0%, #2e8c5f 45%, #d9a45b 100%); }
.in-artigo__tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: 4px; color: #fff;
                  font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tag--verde { background: #146c43; } .tag--teal { background: #0f8f8f; } .tag--roxo { background: #6b46c1; }
.tag--laranja { background: #e08a1e; } .tag--azul { background: #1f6fb2; } .tag--rosa { background: #c2476b; }
.in-artigo__corpo { padding: 12px 14px 16px; }
.in-artigo__corpo h3 { font-size: .86rem; font-weight: 800; line-height: 1.35; color: var(--preto); }
.in-artigo__corpo p { margin-top: 6px; font-size: .76rem; line-height: 1.5; color: var(--tinta-suave);
                      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ----- Chamada final ----------------------------------------------------- */
.in-cta { position: relative; margin-top: clamp(44px, 5vw, 64px); padding: clamp(44px, 6vw, 64px) 0; color: #fff; text-align: center;
          background: linear-gradient(0deg, rgba(8, 18, 13, .62), rgba(8, 18, 13, .62)), var(--fundo-cta) center 60% / cover no-repeat, #1b2b22; }
.in-cta h2 { color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.in-cta p { margin-top: 8px; color: rgba(255, 255, 255, .9); }
.in-cta .btn { margin-top: 18px; }
.pagina-inicio .rodape { margin-top: 0; }

/* ----- Telas menores ----------------------------------------------------- */
@media (max-width: 1180px) {
    .in-carrossel__seta--esq { left: -6px; }
    .in-carrossel__seta--dir { right: -6px; }
    .in-amados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .in-motivos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .in-guia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .in-guia > :nth-child(n+4) { display: none; }
    .in-insta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .in-insta > :nth-child(n+5) { display: none; }
}
@media (max-width: 1024px) {
    .in-busca__campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .in-busca__botao { grid-column: 1 / -1; max-width: none; min-height: 50px; }
    .in-trilho { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
    .in-duo { grid-template-columns: 1fr; }
    .in-hero__seta { display: none; }
}
@media (max-width: 760px) {
    .in-busca__campos { grid-template-columns: 1fr; }
    .in-hero { min-height: 600px; }
    .in-hero__conteudo { padding-top: 120px; }
    .in-hero__rodape { padding-bottom: 84px; }
    .in-hero__nomes { font-size: .82rem; }
    .in-hero__nomes span + span::before { margin: 0 8px; }
    .in-trilho { grid-auto-columns: 72%; }
    .in-carrossel > .in-carrossel__seta { display: none; }
    .in-amados { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 58%;
                 overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .in-amados::-webkit-scrollbar { display: none; }
    .in-amado { scroll-snap-align: start; min-height: 300px; }
    .in-motivos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .in-depo__item { grid-template-columns: 1fr; }
    .in-depo__caixa > .in-carrossel__seta { align-self: flex-start; margin-top: 4px; }
    .in-guia { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto;
               scroll-snap-type: x mandatory; scrollbar-width: none; }
    .in-guia > :nth-child(n+4) { display: flex; }
    .in-guia::-webkit-scrollbar { display: none; }
    .in-artigo { scroll-snap-align: start; }
    .in-insta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .in-insta > :nth-child(n+5) { display: block; }
    .in-insta > :nth-child(n+7) { display: none; }
}
@media (max-width: 520px) {
    .in-busca { padding: 16px; }
    .in-busca__campos { grid-template-columns: 1fr; }
    .in-hero__botoes .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .in-hero__foto { transition: opacity .01ms; transform: none; }
}

/* ----- Tema escuro ------------------------------------------------------- */
html[data-tema="escuro"] .in-busca,
html[data-tema="escuro"] .in-campo,
html[data-tema="escuro"] .in-exp,
html[data-tema="escuro"] .in-btn-mini,
html[data-tema="escuro"] .in-carrossel__seta,
html[data-tema="escuro"] .in-artigo { background-color: var(--cartao); }
html[data-tema="escuro"] .in-motivos { background: var(--cartao); }
html[data-tema="escuro"] .in-titulo h2 .in-titulo__perfil { color: inherit; }
html[data-tema="escuro"] .in-motivo .ic { color: var(--verde-texto); }
html[data-tema="escuro"] .in-titulo a { color: var(--verde-texto); }
html[data-tema="escuro"] .in-busca { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }