/* =========================================================
   FEAT RECON — Landing Page
   Paleta do doc: #1D4B3A (principal) · #F0F1F0 (complementar)
   Derivadas: #0B1A14 (verde escurecido) · #7BBDA0 (ponto verde do logo SVG)
   Neutros do guia institucional: #0A0B0A / #111413 (pretos) · #16211C (texto sobre claro)
   ========================================================= */

:root{
    --green-900:#0B1A14;
    --green:#1D4B3A;
    --mint:#7BBDA0;
    --mint-soft:rgba(123,189,160,.16);
    --off-white:#F0F1F0;
    --black:#0A0B0A;
    --black-soft:#111413;

    --text-on-dark:#F0F1F0;
    --text-on-dark-muted:rgba(240,241,240,.72);
    --text-on-light:#16211C;
    --text-on-light-muted:rgba(22,33,28,.72);

    --line-dark:rgba(240,241,240,.14);
    --line-light:rgba(22,33,28,.12);

    --font-display:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --radius:18px;
    --radius-lg:26px;
    --max:1180px;
    --section-y:clamp(3.75rem, 6.5vw, 6rem);
}

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

html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;}

body{
    margin:0;
    font-family:var(--font-body);
    font-size:17px;
    line-height:1.68;
    color:var(--text-on-dark);
    background:var(--black);
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
}

img,svg{max-width:100%;display:block;}
a{color:inherit;}

h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:600;
    line-height:1.16;
    letter-spacing:-.015em;
    margin:0;
}

p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

.container{
    width:100%;
    max-width:var(--max);
    margin:0 auto;
    padding:0 24px;
}

.container-narrow{
    width:100%;
    max-width:820px;
    margin:0 auto;
    padding:0 24px;
}

/* ---------- Seções ---------- */
.section{
    position:relative;
    padding:var(--section-y) 0;
    overflow:clip;
}
.section--black{background:var(--black);}
.section--green{background:var(--green);}
.section--green-deep{background:var(--green-900);}
.section--light{
    background:var(--off-white);
    color:var(--text-on-light);
}
.section--light p{color:var(--text-on-light-muted);}

/* Motivo de círculos finos da identidade */
.rings{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    opacity:.55;
}
.rings span{
    position:absolute;
    border-radius:50%;
    border:1px solid var(--line-dark);
}
.section--light .rings span{border-color:var(--line-light);}
.rings .r1{width:min(1100px,120vw);aspect-ratio:1;top:-38%;left:-18%;}
.rings .r2{width:min(760px,90vw);aspect-ratio:1;bottom:-42%;right:-12%;}
.rings .dot{
    position:absolute;
    width:14px;height:14px;
    border-radius:50%;
    background:var(--mint);
    opacity:.85;
    border:0;
}

.section > .container,
.section > .container-narrow{position:relative;z-index:1;}

/* ---------- Cabeçalhos de seção ---------- */
.eyebrow{
    display:inline-block;
    font-family:var(--font-display);
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--mint);
    margin-bottom:1.25rem;
}
.section--light .eyebrow{color:var(--green);}

.section-title{
    font-size:clamp(1.9rem, 3.6vw, 3rem);
    margin-bottom:1.5rem;
    max-width:22ch;
}
.section-title--wide{max-width:34ch;}
.section-head{max-width:760px;margin-bottom:clamp(2.25rem,4vw,3.25rem);}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head--center .section-title{margin-left:auto;margin-right:auto;}

.lead{
    font-size:1.075rem;
    color:var(--text-on-dark-muted);
}
.section--light .lead{color:var(--text-on-light-muted);}

/* ---------- Header ---------- */
.site-header{
    position:sticky;
    top:0;
    z-index:60;
    background:rgba(11,26,20,.86);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-dark);
}
.site-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    min-height:76px;
}
.site-logo img{height:46px;width:auto;}

.site-nav{display:flex;align-items:center;gap:1.6rem;}
.site-nav a{
    font-family:var(--font-display);
    font-size:.665rem;
    font-weight:500;
    letter-spacing:.13em;
    white-space:nowrap;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--text-on-dark-muted);
    transition:color .2s ease;
}
.site-nav a:hover{color:var(--mint);}

.nav-toggle{
    display:none;
    width:44px;height:44px;
    background:none;
    border:1px solid var(--line-dark);
    border-radius:12px;
    cursor:pointer;
    padding:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--off-white);}

/* ---------- Hero ---------- */
.hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(1200px 620px at 72% 12%, rgba(29,75,58,.85), transparent 62%),
        radial-gradient(900px 520px at 8% 88%, rgba(123,189,160,.12), transparent 60%),
        var(--black);
    padding:clamp(4.5rem,9vw,7.5rem) 0 clamp(4.5rem,9vw,7.5rem);
    border-bottom:1px solid var(--line-dark);
}
.hero-inner{max-width:900px;}
.hero h1{
    font-size:clamp(2.2rem, 5.4vw, 4.05rem);
    font-weight:600;
    letter-spacing:-.025em;
    margin-bottom:1.75rem;
}
.hero-sub{
    font-size:clamp(1.05rem,1.7vw,1.24rem);
    color:var(--text-on-dark-muted);
    max-width:64ch;
    margin-bottom:1rem;
}
.hero-sub--strong{color:var(--off-white);}
.hero .cta-box{margin-top:2.5rem;margin-left:0;margin-right:auto;}

/* ---------- CTA (padrão da referência) ---------- */
.cta-box{
    position:relative;
    display:block;
    min-width:0;
    background:var(--black-soft);
    border:1px solid rgba(240,241,240,.08);
    border-left:0;
    border-radius:var(--radius);
    padding:1.15rem 1.35rem 1.15rem 1.6rem;
    overflow:hidden;
    width:fit-content;
    max-width:100%;
    margin:2.25rem auto 0;
    animation:cta-glow 3.8s ease-in-out infinite;
}
.cta-box:hover{animation-play-state:paused;}
.cta-box:hover::before{animation-play-state:paused;opacity:1;}
.cta-box::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:4px;
    background:var(--mint);
    border-radius:4px;
    animation:cta-bar 3.8s ease-in-out infinite;
}

/* Pulso sutil — chama atenção para o chat sem piscar */
@keyframes cta-glow{
    0%,100%{box-shadow:0 0 0 1px rgba(123,189,160,0), 0 0 0 0 rgba(123,189,160,0);}
    50%    {box-shadow:0 0 0 1px rgba(123,189,160,.16), 0 0 30px -8px rgba(123,189,160,.32);}
}
@keyframes cta-bar{
    0%,100%{opacity:.72;}
    50%    {opacity:1;}
}
.cta-box p{
    margin:0;
    font-family:var(--font-display);
    font-size:.96rem;
    font-weight:600;
    line-height:1.5;
    color:var(--off-white);
}
.section--light .cta-box p{color:var(--off-white);}


/* CTA que fecha uma seção: respira mais antes da caixa */
.cta-box--full{
    margin-top:clamp(2.75rem,5vw,4rem);
    padding-top:1.35rem;
    padding-bottom:1.35rem;
}

/* ---------- Experiências (layout editorial, sem caixas) ---------- */
.experiences{display:block;}

.exp{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    min-width:0;
    gap:clamp(1.75rem,4vw,4rem);
    padding:clamp(2.25rem,4.5vw,3.5rem) 0;
    border-top:1px solid var(--line-dark);
}
.exp:first-child{border-top:0;padding-top:0;}

.exp-aside{position:sticky;top:104px;align-self:start;}
.exp-title{
    font-size:clamp(1.25rem,2.2vw,1.7rem);
    letter-spacing:.005em;
    margin-bottom:.55rem;
}
.exp-tagline{
    font-family:var(--font-display);
    font-size:1.02rem;
    font-weight:400;
    font-style:italic;
    line-height:1.45;
    color:var(--mint);
    margin-bottom:1.4rem;
}
.exp-main{color:var(--text-on-dark-muted);padding-top:.35rem;}
.exp-main > p{margin-bottom:.95em;}
.exp-intro{color:var(--off-white);font-weight:500;}

.host{
    margin-top:1.75rem;
    padding-left:1.35rem;
    border-left:2px solid rgba(123,189,160,.4);
}
.host p{font-size:.955rem;margin-bottom:.8em;}
.host-name{
    font-family:var(--font-display);
    font-size:.95rem;
    font-weight:600;
    color:var(--off-white);
    margin-bottom:.65em;
}

/* Sub-bloco visível dentro da experiência */
.subsection{
    margin-top:1.85rem;
    padding-top:1.35rem;
    border-top:1px solid var(--line-dark);
}
.subsection-title{
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:600;
    color:var(--off-white);
    margin-bottom:.95rem;
}
.subsection p{margin-bottom:.9em;}

/* Meta (local, grupo, datas) */
.meta-list{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin:0;
    padding:0;
    list-style:none;
}
.meta-list li{
    font-family:var(--font-display);
    font-size:.82rem;
    font-weight:500;
    color:var(--off-white);
    background:var(--mint-soft);
    border:1px solid rgba(123,189,160,.24);
    border-radius:999px;
    padding:.42rem .95rem;
}

.cycle{margin-top:1.35rem;}
.cycle-title{
    font-family:var(--font-display);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--mint);
    margin-bottom:.7rem;
}
.dates{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    list-style:none;
    margin:0;
    padding:0;
}
.dates li{
    font-family:var(--font-display);
    font-size:.88rem;
    font-weight:500;
    border:1px solid var(--line-dark);
    border-radius:10px;
    padding:.45rem .9rem;
}

.exp-aside .cta-box{margin-top:1.6rem;}

@media (max-width:900px){
    /* minmax(0,1fr) + min-width:0 impedem que o conteúdo estique a coluna */
    .exp{grid-template-columns:minmax(0,1fr);gap:1.25rem;}
    .exp > *,
    .exp-aside > *{min-width:0;max-width:100%;}
    .exp-aside .exp-tagline{margin-bottom:0;}
    .exp-main{padding-top:0;}
    .exp-aside{position:static;display:contents;}
    .exp-aside .exp-title{order:1;}
    .exp-aside .exp-tagline{order:2;}
    .exp-main{order:3;}
    .exp-aside .meta-list{order:4;}
    .exp-aside .cycle{order:5;}
    .exp-aside .cta-box{order:6;margin-top:0;}
}

/* ---------- Placeholder de mídia (em branco, marcado) ---------- */
.media-slot{
    margin-top:2rem;
    border:1px dashed rgba(123,189,160,.45);
    border-radius:var(--radius);
    background:rgba(240,241,240,.02);
    aspect-ratio:16/6;
    min-height:150px;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem 1.5rem;
}
.media-slot span{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    font-family:var(--font-display);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(123,189,160,.8);
}
.media-slot--video{aspect-ratio:16/9;min-height:190px;}
.section--light .media-slot{
    border-color:rgba(29,75,58,.35);
    background:rgba(29,75,58,.03);
}
.section--light .media-slot span{color:rgba(29,75,58,.7);}

/* Quando a moldura recebe uma foto, ela deixa de ser moldura:
   sem padding e sem tracejado, a imagem preenche a área toda. */
.media-slot.has-img,
.media-slot:has(img){
    aspect-ratio:auto;
    width:100%;
    padding:0;
    border:0;
    background:none;
    overflow:hidden;
}
.media-slot.has-img:not(.exp-banner),
.media-slot:not(.exp-banner):has(img){
    aspect-ratio:auto;
    height:clamp(210px, 26vw, 360px);
    min-height:0;
}
.media-slot img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* Banner de abertura da imersão — ocupa as duas colunas */
.exp-banner{
    grid-column:1 / -1;
    aspect-ratio:auto;
    height:clamp(200px, 24vw, 330px);
    min-height:0;
    margin:0 0 clamp(1.5rem,3vw,2.25rem);
}

.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
    gap:1.5rem;
}
.video-grid .media-slot{margin-top:0;}

/* ---------- Cards de viagens personalizadas ---------- */
.cards-2{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
    gap:1.75rem;
}
.cards-2{gap:clamp(1.75rem,4vw,3.5rem);}
.card{
    background:none;
    border:0;
    border-top:1px solid var(--line-dark);
    border-radius:0;
    padding:1.5rem 0 0;
}
.card h3{
    font-size:1.2rem;
    margin-bottom:.5rem;
}
.card .exp-tagline{font-size:1rem;margin-bottom:1rem;}
.card p{color:var(--text-on-dark-muted);font-size:.975rem;}

/* ---------- Manifesto / texto corrido ---------- */
.statement{
    font-family:var(--font-display);
    font-size:clamp(1.5rem,3vw,2.35rem);
    font-weight:500;
    line-height:1.3;
    letter-spacing:-.02em;
    margin-bottom:2rem;
}
.prose{max-width:70ch;}
.prose p{color:var(--text-on-dark-muted);}
.section--light .prose p{color:var(--text-on-light-muted);}
.prose .accent{
    display:block;
    font-family:var(--font-display);
    font-size:1.12rem;
    font-weight:500;
    color:var(--off-white);
}
.section--light .prose .accent{color:var(--green);}

.split{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(2rem,5vw,4.5rem);
    align-items:start;
}
.split .section-head{margin-bottom:0;}
.split .section-head .section-title{max-width:16ch;}
.split .statement{max-width:18ch;}
.split .prose{max-width:none;}
@media (max-width:900px){
    .split{grid-template-columns:1fr;gap:2rem;}
    .split .section-head .section-title,
    .split .statement{max-width:22ch;}
}

/* ---------- Por que viajar (diferenciais) ---------- */
.reasons{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
    gap:2rem clamp(2rem,4vw,3.5rem);
}
.reason{
    background:none;
    border:0;
    border-top:1px solid var(--line-dark);
    border-radius:0;
    padding:1.35rem 0 0;
}
.reason h3{
    font-size:1.02rem;
    font-weight:600;
    margin-bottom:.65rem;
}
.reason p{
    color:var(--text-on-dark-muted);
    font-size:.95rem;
    margin:0;
}

/* ---------- Fechamento ---------- */
.closing{text-align:center;}
.closing .section-title{
    max-width:24ch;
    margin-left:auto;
    margin-right:auto;
}
.closing .prose{margin:0 auto;text-align:center;}

/* ---------- Rodapé ---------- */
.site-footer{
    background:var(--green-900);
    border-top:1px solid var(--line-dark);
    padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;
}
.footer-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:2.5rem;
}
.footer-brand img{height:58px;width:auto;margin-bottom:1.25rem;}
.footer-brand p{
    color:var(--text-on-dark-muted);
    max-width:42ch;
    margin:0;
}
.footer-brand .footer-name{
    font-family:var(--font-display);
    font-weight:600;
    color:var(--off-white);
    display:block;
}
.footer-links{
    display:flex;
    flex-direction:column;
    gap:.75rem;
}
.footer-links a{
    font-size:.92rem;
    color:var(--text-on-dark-muted);
    text-decoration:none;
    transition:color .2s ease;
}
.footer-links a:hover{color:var(--mint);}
.footer-bottom{
    margin-top:3rem;
    padding-top:1.75rem;
    border-top:1px solid var(--line-dark);
    font-size:.84rem;
    color:rgba(240,241,240,.5);
}

/* ---------- Página de política ---------- */
.legal{
    background:var(--off-white);
    color:var(--text-on-light);
    padding:clamp(3.5rem,7vw,6rem) 0;
}
.legal h1{
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    margin-bottom:.75rem;
}
.legal .updated{
    color:var(--text-on-light-muted);
    font-size:.94rem;
    margin-bottom:2.5rem;
}
.legal h2{
    font-size:1.12rem;
    font-weight:600;
    margin:2.75rem 0 1rem;
    color:var(--green);
}
.legal p{color:var(--text-on-light-muted);}
.legal ul{
    margin:0 0 1.15em;
    padding-left:1.25rem;
    color:var(--text-on-light-muted);
}
.legal li{margin-bottom:.4rem;}
.legal .company{
    background:#fff;
    border:1px solid var(--line-light);
    border-radius:var(--radius);
    padding:1.35rem 1.6rem;
    margin-bottom:1.15em;
}
.legal .company p{margin:0;color:var(--text-on-light);}
.legal a{color:var(--green);}
.back-link{
    display:inline-block;
    margin-top:3rem;
    font-family:var(--font-display);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--green);
    text-decoration:none;
}

/* ---------- Entrada intercalada na rolagem ---------- */
.has-reveal [data-reveal]{
    opacity:0;
    will-change:opacity, transform;
    transition:opacity .8s ease, transform .8s cubic-bezier(.22,.72,.28,1);
}
.has-reveal [data-reveal].is-visible{
    opacity:1;
    transform:none;
    will-change:auto;
}

/* imersões: colunas entram de lados opostos e o lado alterna a cada bloco */
.has-reveal .exp:nth-of-type(odd)  > .exp-aside[data-reveal]{transform:translate3d(-30px,16px,0);}
.has-reveal .exp:nth-of-type(odd)  > .exp-main[data-reveal]{transform:translate3d(30px,16px,0);transition-delay:.14s;}
.has-reveal .exp:nth-of-type(even) > .exp-aside[data-reveal]{transform:translate3d(30px,16px,0);}
.has-reveal .exp:nth-of-type(even) > .exp-main[data-reveal]{transform:translate3d(-30px,16px,0);transition-delay:.14s;}

/* precisa empatar a especificidade das regras direcionais acima */
.has-reveal .exp:nth-of-type(n) > .exp-aside[data-reveal].is-visible,
.has-reveal .exp:nth-of-type(n) > .exp-main[data-reveal].is-visible{transform:none;}

/* banner: entra subindo */
.has-reveal .exp-banner[data-reveal]{transform:translate3d(0,22px,0);}
.has-reveal .exp-banner[data-reveal].is-visible{transform:none;}

/* cards e diferenciais: sobem em cascata */
.has-reveal .card[data-reveal],
.has-reveal .reason[data-reveal]{transform:translate3d(0,22px,0);}
.has-reveal .card[data-reveal]:nth-child(2),
.has-reveal .reason[data-reveal]:nth-child(2){transition-delay:.1s;}
.has-reveal .reason[data-reveal]:nth-child(3){transition-delay:.2s;}
.has-reveal .reason[data-reveal]:nth-child(4){transition-delay:.3s;}
.has-reveal .reason[data-reveal]:nth-child(5){transition-delay:.4s;}

@media (max-width:900px){
    /* no mobile a coluna vira display:contents — entrada só na vertical */
    .has-reveal .exp:nth-of-type(n) > .exp-main[data-reveal]{transform:translate3d(0,20px,0);transition-delay:0s;}
    .has-reveal .exp:nth-of-type(n) > .exp-main[data-reveal].is-visible{transform:none;}
}

/* ---------- Responsivo ---------- */
/* o menu completo só cabe acima de ~1030px; abaixo disso vira hambúrguer */
@media (max-width:1030px){
    .site-nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        background:var(--green-900);
        border-bottom:1px solid var(--line-dark);
        padding:.5rem 24px 1.25rem;
    }
    .site-nav.is-open{display:flex;}
    .site-nav a{padding:.85rem 0;width:100%;}
    .nav-toggle{display:flex;}
}

@media (max-width:640px){
    body{font-size:16px;}
    .container,.container-narrow{padding:0 16px;}
    .site-logo img{height:38px;}
    .cta-box{padding:1.15rem 1.15rem 1.15rem 1.45rem;}
    .cta-box p{font-size:.96rem;}
    .meta-list li,.dates li{font-size:.84rem;}
    .media-slot:not(.has-img):not(:has(img)){min-height:150px;aspect-ratio:4/3;padding:1.25rem 1rem;}
    .exp-banner{aspect-ratio:auto;width:100%;margin-bottom:.25rem;}
    .media-slot--video{aspect-ratio:16/10;min-height:160px;}
    .media-slot span{font-size:.7rem;letter-spacing:.1em;}
    .footer-inner{flex-direction:column;gap:2rem;}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .cta-box,
    .cta-box::before{animation:none;}
}