/* ============================================================
   IMERSÃO BRASÍLIA — folha de estilo
   Landing page editorial. Traduz o PDF da agência para web,
   mantendo a identidade Galpão (paleta, tipografia Satoshi).
   Mobile-first. Desktop a partir de 900px.
   ============================================================ */

:root{
    --vermelho:      #c81517;
    --vermelho-esc:  #a01113;
    --creme:         #f4eddf;   /* fundo geral, como no PDF */
    --palha:         #f9f7ea;
    --branco:        #ffffff;
    --taupe:         #9a9088;
    --tinta:         #1a1a1a;   /* texto de corpo, quase preto */
    --tinta-suave:   #4a4a4a;
    --separador:     #ded6c2;   /* linha fina sobre o creme */

    --margem:        24px;
    --coluna:        720px;
    --nav-h:         64px;

    --fonte: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:80px; }
body{
    font-family:var(--fonte);
    background:var(--creme);
    color:var(--tinta);
    font-size:15px;
    line-height:1.6;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
img{ display:block; max-width:100%; }

p{ margin-bottom:1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }

/* ============================================================
   NAVEGAÇÃO STICKY
   ============================================================ */
.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }

.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(244, 237, 223, 0.94);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--separador);
    padding:14px var(--margem);
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
    min-height:var(--nav-h);
}
.nav__marca{ display:flex; align-items:center; gap:10px; }
.nav__marca img{ height:16px; width:auto; }
.nav__marca-txt{
    color:var(--vermelho);
    font-size:12px; font-weight:500;
    letter-spacing:.02em;
    line-height:1.2;
}
.nav__links{
    display:none;
    list-style:none;
    gap:32px;
    align-items:center;
}
.nav__links a{
    color:var(--tinta);
    text-decoration:none;
    font-size:13px; font-weight:400;
    transition:color .2s;
}
.nav__links a:hover{ color:var(--vermelho); }

.nav__cta{
    display:none;
    background:var(--vermelho);
    color:var(--creme);
    text-decoration:none;
    padding:10px 18px;
    font-size:12px; font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    transition:background .2s;
}
.nav__cta:hover{ background:var(--vermelho-esc); }

.nav__menu{
    display:flex; align-items:center; justify-content:center;
    background:none; border:0; padding:0;
    width:40px; height:40px;
    cursor:pointer;
}
.nav__menu span{
    display:block; width:24px; height:2px;
    background:var(--vermelho);
    position:relative;
}
.nav__menu span::before,
.nav__menu span::after{
    content:""; position:absolute; left:0; width:24px; height:2px;
    background:var(--vermelho);
}
.nav__menu span::before{ top:-7px; }
.nav__menu span::after{ top:7px; }

/* Drawer mobile */
.nav__drawer{
    position:fixed; inset:var(--nav-h) 0 0 0;
    background:var(--creme);
    transform:translateY(-100%);
    transition:transform .3s ease;
    z-index:40;
    padding:32px var(--margem);
    display:flex; flex-direction:column;
    gap:8px;
}
.nav-toggle:checked ~ .nav__drawer{ transform:translateY(0); }
.nav__drawer a{
    color:var(--tinta);
    text-decoration:none;
    font-size:22px; font-weight:500;
    padding:14px 0;
    border-bottom:1px solid var(--separador);
    letter-spacing:-.01em;
}
.nav__drawer a:last-of-type{ border-bottom:0; }
.nav__drawer .nav__cta{
    display:inline-block;
    align-self:flex-start;
    margin-top:16px;
    padding:14px 22px;
    font-size:13px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
    position:relative;
    min-height:calc(100vh - var(--nav-h));
    display:flex;
    align-items:flex-end;
    background:#2a2a2a;
    overflow:hidden;
}
.hero__foto{
    position:absolute; inset:0;
    z-index:0;
}
.hero__foto img{
    width:100%; height:100%;
    object-fit:cover;
}
.hero__conteudo{
    position:relative; z-index:2;
    padding:0 var(--margem) 48px;
    width:100%;
}
.hero__titulo{
    color:var(--palha);
    font-size:clamp(48px, 12vw, 96px);
    font-weight:500;
    line-height:1.02;
    letter-spacing:-.03em;
    max-width:900px;
}
.hero__logo{
    margin-top:32px;
}
.hero__logo img{ height:20px; width:auto; }

/* ============================================================
   MARCADOR DE SEÇÃO (Imersão — Brasília no canto)
   ============================================================ */
.marca-secao{
    color:var(--vermelho);
    font-size:13px;
    font-weight:500;
    line-height:1.3;
    letter-spacing:-.005em;
    margin-bottom:32px;
}

/* ============================================================
   ESTRUTURA GERAL DAS SEÇÕES
   ============================================================ */
.secao{
    padding:56px var(--margem);
    max-width:1200px;
    margin:0 auto;
}
.secao__titulo{
    color:var(--vermelho);
    font-size:clamp(36px, 8vw, 64px);
    font-weight:500;
    letter-spacing:-.02em;
    line-height:1.02;
    margin-bottom:32px;
}
.secao__titulo--medio{
    font-size:clamp(28px, 6vw, 44px);
    margin-bottom:20px;
}
.secao__subtitulo{
    font-weight:500;
    font-size:15px;
    color:var(--tinta);
    margin-bottom:16px;
}
.secao__texto p{
    color:var(--tinta);
    font-size:15px;
    line-height:1.65;
}

/* Bloco de texto largo (leitura confortável) */
.leitura{ max-width:var(--coluna); }

/* ============================================================
   FIGURAS
   ============================================================ */
.figura{
    margin:40px 0;
}
.figura img{
    width:100%; height:auto;
}
.figura figcaption{
    margin-top:12px;
    color:var(--vermelho);
    font-size:12px; font-weight:500;
    line-height:1.4;
}

.figura--sangrar{
    margin-left:calc(var(--margem) * -1);
    margin-right:calc(var(--margem) * -1);
}
.figura--sangrar figcaption{
    padding:0 var(--margem);
}

/* ============================================================
   INTRO (segunda página do PDF: data, curadores, bios)
   ============================================================ */
.intro__data{
    font-size:20px;
    font-weight:500;
    color:var(--tinta);
    margin-bottom:32px;
    line-height:1.3;
}
.intro__idealizacao,
.intro__curadoria{
    font-size:15px;
    color:var(--tinta-suave);
    margin-bottom:16px;
    max-width:520px;
    line-height:1.5;
}
.intro__curadoria{ margin-bottom:48px; }

.bio{
    margin-bottom:32px;
    max-width:var(--coluna);
}
.bio__nome{
    color:var(--vermelho);
    font-size:15px;
    font-weight:500;
    display:inline;
}
.bio__texto{
    display:inline;
    color:var(--tinta-suave);
    font-size:14px;
    line-height:1.6;
}

/* ============================================================
   BLOCO PRINCÍPIOS (lista com sublinhados vermelhos)
   ============================================================ */
.principios{
    list-style:none;
    margin:24px 0;
    padding:0;
}
.principios li{
    padding:14px 0;
    border-bottom:1px solid var(--vermelho);
    font-size:15px;
    color:var(--tinta);
    line-height:1.4;
}
.principios li:last-child{ border-bottom:1px solid var(--vermelho); }

/* ============================================================
   FRASES DE DESTAQUE (vermelho, peso 500)
   ============================================================ */
.destaque{
    color:var(--vermelho);
    font-size:18px;
    font-weight:500;
    line-height:1.4;
    margin:32px 0;
    max-width:640px;
}
.destaque--pequeno{
    font-size:15px;
}

/* ============================================================
   JORNADAS (cards horizontais alternados)
   ============================================================ */
.jornada{
    padding:48px 0;
    border-top:2px solid var(--vermelho);
    display:grid;
    gap:32px;
}
.jornada__rotulo{
    color:var(--vermelho);
    font-size:14px;
    font-weight:500;
    margin-bottom:8px;
    letter-spacing:.01em;
}
.jornada__titulo{
    color:var(--tinta);
    font-size:clamp(28px, 6vw, 40px);
    font-weight:500;
    line-height:1.05;
    letter-spacing:-.015em;
    margin-bottom:8px;
}
.jornada__sub{
    color:var(--tinta-suave);
    font-size:15px;
    margin-bottom:24px;
    line-height:1.4;
}
.jornada__lista{
    list-style:none;
    padding:0;
}
.jornada__lista li{
    padding:6px 0;
    font-size:14px;
    color:var(--tinta);
}
.jornada__figura img{ width:100%; height:auto; }

/* ============================================================
   BLOCO HOSPITALIDADE + INVESTIMENTO (dois cards)
   ============================================================ */
.dois-cards{
    display:grid;
    gap:48px;
    padding:48px 0;
    border-top:2px solid var(--vermelho);
}
.card-info__rotulo{
    color:var(--vermelho);
    font-size:14px;
    font-weight:500;
    margin-bottom:8px;
}
.card-info__titulo{
    color:var(--tinta);
    font-size:clamp(28px, 6vw, 40px);
    font-weight:500;
    line-height:1.05;
    letter-spacing:-.015em;
    margin-bottom:24px;
}
.card-info__lista{
    list-style:none;
    padding:0;
    margin-bottom:16px;
}
.card-info__lista li{
    padding:6px 0;
    font-size:14px;
    color:var(--tinta);
}
.card-info__obs{
    font-size:12px;
    color:var(--tinta-suave);
    line-height:1.6;
    margin-top:16px;
}

/* ============================================================
   BLOCO "TRÊS DIAS. TRÊS JORNADAS."
   ============================================================ */
.principios-jornada{
    padding:32px 0 48px;
}
.principios-jornada__titulo{
    color:var(--vermelho);
    font-size:20px;
    font-weight:500;
    margin-bottom:24px;
}
.principios-jornada__grid{
    display:grid;
    gap:24px;
}
.principios-jornada p{
    font-size:15px;
    color:var(--tinta);
    line-height:1.5;
    margin:0;
}

/* ============================================================
   CTA FINAL (data grande + botão)
   ============================================================ */
.cta{
    padding:96px var(--margem) 96px;
    text-align:center;
    max-width:1200px;
    margin:0 auto;
}
.cta__data{
    color:var(--vermelho);
    font-size:clamp(56px, 14vw, 128px);
    font-weight:500;
    line-height:1;
    letter-spacing:-.03em;
    margin-bottom:48px;
}
.cta__botao{
    display:inline-block;
    background:var(--vermelho);
    color:var(--creme);
    text-decoration:none;
    padding:18px 32px;
    font-size:14px;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:background .2s;
}
.cta__botao:hover{ background:var(--vermelho-esc); }

/* ============================================================
   FOOTER
   ============================================================ */
.rodape{
    background:var(--taupe);
    color:var(--creme);
    padding:48px var(--margem);
    text-align:center;
}
.rodape__logo{
    height:22px;
    width:auto;
    margin:0 auto 24px;
}
.rodape p{
    font-size:12px;
    line-height:1.7;
    letter-spacing:.05em;
    color:var(--creme);
    margin-bottom:8px;
}
.rodape a{
    color:var(--creme);
    text-decoration:none;
    border-bottom:1px solid rgba(249,247,234,.3);
    transition:border-color .2s;
}
.rodape a:hover{ border-color:var(--creme); }

/* ============================================================
   DESKTOP — a partir de 900px
   ============================================================ */
@media (min-width:900px){
    :root{
        --margem:64px;
        --nav-h:72px;
    }

    body{ font-size:16px; }

    .nav__links{ display:flex; }
    .nav__cta{ display:inline-block; }
    .nav__menu, .nav__drawer{ display:none !important; }

    .hero{
        min-height:calc(100vh - var(--nav-h));
    }
    .hero__conteudo{
        padding:0 var(--margem) 80px;
    }
    .hero__titulo{
        font-size:clamp(80px, 10vw, 128px);
    }

    .secao{
        padding:96px var(--margem);
    }

    /* Intro: 2 colunas (marca à esquerda, conteúdo à direita) */
    .intro{
        display:grid;
        grid-template-columns:280px 1fr;
        gap:64px;
        align-items:start;
    }
    .intro .marca-secao{ margin-bottom:0; position:sticky; top:calc(var(--nav-h) + 32px); }
    .intro__conteudo{ max-width:var(--coluna); }

    /* Seções: título à esquerda, texto à direita quando aplicável */
    .secao--split{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:64px;
        align-items:start;
    }
    .secao--split .secao__titulo{ margin-bottom:0; }

    .secao--split-marca{
        display:grid;
        grid-template-columns:280px 1fr;
        gap:64px;
        align-items:start;
    }
    .secao--split-marca .marca-secao{ margin-bottom:0; position:sticky; top:calc(var(--nav-h) + 32px); }

    /* Duas colunas de texto */
    .dois-textos{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:48px;
        margin-top:24px;
    }

    /* Bloco "para quem entende" + foto Embaixada */
    .para-quem{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:64px;
        align-items:start;
        margin-bottom:96px;
    }

    /* Jornadas: 2 colunas com foto */
    .jornada{
        grid-template-columns:1fr 1fr;
        align-items:center;
        gap:64px;
        padding:64px 0;
    }
    .jornada--invertida{
        grid-template-columns:1fr 1fr;
    }
    .jornada--invertida .jornada__conteudo{ order:2; text-align:right; }
    .jornada--invertida .jornada__figura{ order:1; }
    .jornada--invertida .jornada__lista li{ text-align:right; }

    /* Princípios da jornada em 2 colunas */
    .principios-jornada__grid{
        grid-template-columns:1fr 1fr;
        gap:48px;
    }

    /* Hospitalidade + Investimento lado a lado */
    .dois-cards{
        grid-template-columns:1fr 1fr;
        padding:64px 0;
    }

    /* Bloco de princípios (lista com sublinhados) */
    .principios-bloco{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:64px;
        align-items:start;
    }

    /* Figuras */
    .figura--sangrar{
        margin-left:0;
        margin-right:0;
    }
    .figura--sangrar figcaption{
        padding:0;
    }

    /* Rodapé */
    .rodape{
        padding:64px var(--margem);
    }
}