/* =====================================================================
   LANDING PAGES
   Só é carregado quando o microsite é uma landing page (index.asp e
   menu.asp). Os websites nunca recebem este ficheiro.
   ===================================================================== */

/* Fonte das LP: Griffith Gothic (ficheiros em /bluesky/fonts/) */
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-thin.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-thinitalic.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-thinitalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-light.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-lightitalic.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-lightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-regular.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-italic.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-bold.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-bolditalic.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-ultra.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-ultra.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-ultraitalic.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-ultraitalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-black.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic';
    src: url('/bluesky/fonts/griffithgothic-blackitalic.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-blackitalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic Condensed';
    src: url('/bluesky/fonts/griffithgothic-cond-thin.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-cond-thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic Condensed';
    src: url('/bluesky/fonts/griffithgothic-cond-light.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-cond-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic Condensed';
    src: url('/bluesky/fonts/griffithgothic-cond-regular.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-cond-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic Condensed';
    src: url('/bluesky/fonts/griffithgothic-cond-bold.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-cond-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Griffith Gothic Condensed';
    src: url('/bluesky/fonts/griffithgothic-cond-ultra.woff2') format('woff2'),
        url('/bluesky/fonts/griffithgothic-cond-ultra.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

body.landing-page {
    --font-family-lp: 'Griffith Gothic', serif;
    --font-family-lp-cond: 'Griffith Gothic Condensed', 'Griffith Gothic', serif;
}

/* Landing pages: secção com cor de fundo (div.lp-secao-bg do modules.asp).
   A margem da secção passa a padding da faixa, para a cor cobrir o espaço à volta */
body.landing-page main .lp-secao-bg { padding-block: 45px; }
body.landing-page main .lp-secao-bg > :is(section, div) { margin-block: 0 !important; } /* ganha ao .index section:not(.banners):first-of-type */
@media(min-width: 992px) {
    body.landing-page main .lp-secao-bg { padding-block: 120px; }
}
/* Landing pages: o banner do topo não leva margem (a seguinte secção trata do espaço) */
body.landing-page main > section.banners { margin-block: 0; }

/* !important: o bluesky.css usa seletores muito específicos e este ficheiro só existe para os sobrepor nas LP */
/* Tipografia (Zeplin Ancorá LP): títulos em Griffith Gothic, resto em Gotham */
body.landing-page {
    --font-family: 'Gotham', sans-serif !important;
}
body.landing-page main :is(h1, h2, h3:not(.h4)),
body.landing-page main .banners :is(h1, h2) {
    font-family: var(--font-family-lp) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: rgb(53, 56, 46) !important;
}
body.landing-page main .banners :is(h1, h2) { color: var(--white) !important; }
body.landing-page main :is(h3.h4, h4.h4, .h4) {
    font-family: var(--font-family-2) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 20.5px !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    color: rgb(53, 56, 46) !important;
}
body.landing-page main p {
    font-family: var(--font-family-2) !important;
    font-weight: 300 !important;
    color: rgb(106, 107, 95) !important;
}

body.landing-page .galeria .header, :where(section:not(.content,.related-section)) .container .header:not(.text-left,.text-right ) {
    text-align: start;
}

body.landing-page .hp_texto {
    max-width: 1150px;
    margin: auto;
}
body.landing-page .hp_texto .container .header h2,
body.landing-page .hp_texto .container .header {
    margin-bottom: 0;
}
body.landing-page .galeria .slider .legend small {
    font-size: 14px;
}
body.landing-page main .banners p { color: var(--white) !important; }
@media(min-width: 992px) {
    body.landing-page.index main :is(h1, h2) { font-size: 55px !important; line-height: 60.5px !important; }
    body.landing-page main .banners :is(h1, h2) { font-size: 70px !important; line-height: 75px !important; }
    body.landing-page main p,body.landing-page main ul li  { font-size: 18px !important; line-height: 28px !important; }
}

/* Header das LP (Zeplin): botão e seletor de idioma com 31px de altura */
@media(min-width: 992px) {
    body.landing-page header .header-content .button,
    body.landing-page header .header-content .select-wrapper,
    body.landing-page header .header-content .select-wrapper .custom-select,
    body.landing-page header .header-content div .select-wrapper .custom-select > .placeholder,
    body.landing-page header .header-content div .select-wrapper .custom-select.isSelected > .placeholder {
        height: 31px !important;
        min-height: 0 !important;
    }
    body.landing-page header .header-content .button,
    body.landing-page header .header-content div .select-wrapper .custom-select > .placeholder,
    body.landing-page header .header-content div .select-wrapper .custom-select.isSelected > .placeholder {
        display: flex;
        align-items: center;
        padding-block: 2px 0 !important; /* Gotham: as maiúsculas ficam altas na linha, desce 2px para centrar à vista */
        font-size: 12px !important;
        line-height: 18px !important;
    }
    body.landing-page header .header-content .button { padding-inline: 10px !important; }
}

/* Secção com fundo escuro (opção "Fundo: Escuro" do módulo) - cores do Zeplin, secção "A linguagem da matéria" */
body.landing-page main :is(.lp-secao-bg, .lp-tema).escuro :is(h1, h2, h3, h4, h5, .h4),
body.landing-page main :is(.lp-secao-bg, .lp-tema).escuro :is(strong, b) {
    color: var(--white) !important;
}
body.landing-page main :is(.lp-secao-bg, .lp-tema).escuro :is(p, li) {
    color: rgb(140, 141, 132) !important;
}
body.landing-page main :is(.lp-secao-bg, .lp-tema).escuro :is(strong, b) { font-weight: 500 !important; }
body.landing-page main :is(.lp-secao-bg, .lp-tema).escuro a:not(.button) { color: var(--white) !important; }

/* Vídeo da galeria + texto: preenche a caixa como o poster (por defeito o browser usa contain) */
body.landing-page .galeria_txt .slide.video :is(video, iframe) { object-fit: cover; }
/* setas das listas (máscara com a cor primária) a branco no fundo escuro */
body.landing-page main :is(.lp-secao-bg, .lp-tema).escuro ul li::before { background-color: var(--white) !important; }

/* Duas faixas seguidas com a mesma cor: os paddings somavam-se (as margens anulavam-se), a segunda não leva padding em cima */
body.landing-page main .lp-secao-bg.mesma-cor { padding-top: 0 !important; }

/* Legendas sobre as imagens/vídeos (Zeplin: Gotham 300 14/20 branco) - ganham à regra geral do texto (main p) */
body.landing-page main .legend p {
    color: var(--white) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-bottom: 0;
}
body.landing-page main .legend { padding-bottom: 25px; }

/* Vídeo da galeria + texto: sem o véu cinzento por cima e com o degradê da legenda só na metade de baixo (como nas imagens) */
body.landing-page .galeria_txt .slide.video > div::before { display: none; }
/* o degradê passa do ::before do slide para o fundo da própria legenda: a legenda está dentro de um
   div com will-change (contexto de sobreposição próprio) e nenhum z-index a punha à frente do ::before */
body.landing-page .galeria_txt .slide.video:has(.legend)::before { display: none; }
body.landing-page .galeria_txt .slide.video .container .legend,
body.landing-page .galeria_txt .container .slide.video .legend {
    background: linear-gradient(to top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 50%) !important; /* escurece como o multiply cinzento a 50% */
    mix-blend-mode: normal;
}

/* Imagem a toda a largura (M8 FullW): legenda por cima da imagem, em baixo e a branco, com degradê como nas galerias */
body.landing-page main .template-module.module8.FullW { position: relative; }
body.landing-page main .template-module.module8.FullW:has(small)::after {
    content: "";
    position: absolute;
    inset: 50% 0 0 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
    pointer-events: none;
}
body.landing-page main .template-module.module8.FullW small {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    z-index: 1;
    margin: 0 !important;
    padding-inline: 20px;
    font-family: var(--font-family-2) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 20px !important;
    color: var(--white) !important;
    text-align: center;
}

/* Texto pequeno / grande das descrições (menu Estilos do CKEditor: <small> / <big>) */
body.landing-page main p small,
body.landing-page main small:not(.text-center) {
    font-size: 14px;
    line-height: 22px;
}
body.landing-page main p big,
body.landing-page main big {
    font-size: 22px;
    line-height: 30px;
}

/* CTA com imagem (Zeplin): título até 940px e botão de contorno branco */
body.landing-page main .cta .container :is(h2, h3, h4, h5, .h3) {
    width: 100%;
    max-width: 940px !important;
    margin-inline: auto !important;
}
body.landing-page main .cta .container .button {
    padding: 18px 30px !important;
    font-family: var(--font-family-2) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    text-transform: uppercase;
    color: var(--white) !important;
}
body.landing-page main .cta .container .button::before {
    background-color: transparent !important;
    border: 1px solid var(--white);
}
body.landing-page main .cta .container .button:hover { color: var(--primary) !important; }
body.landing-page main .cta .container .button:hover::before { background-color: var(--white) !important; }
/* CTA com imagem de fundo: sem margem (a imagem é a própria faixa) */
body.landing-page main section.cta { margin-block: 0 !important; }

/* Módulo de texto: alinhamento escolhido no BO (forçado) */
body.landing-page main .hp_texto.align-left :is(.header, .header *, .container) { text-align: left !important; margin-inline: 0 auto; }
body.landing-page main .hp_texto.align-center :is(.header, .header *, .container) { text-align: center !important; }
body.landing-page main .hp_texto.align-right :is(.header, .header *, .container) { text-align: right !important; }
body.landing-page main .hp_texto.align-left .header { margin-left: 0 !important; }
body.landing-page main .hp_texto.align-right .header { margin-right: 0 !important; }
body.landing-page main .hp_texto:is(.align-left, .align-right) .container { align-items: stretch; }
body.landing-page main .hp_texto.align-left .button { align-self: flex-start; }
body.landing-page main .hp_texto.align-right .button { align-self: flex-end; }

/* Rodapé das LP (Zeplin): sem margem em cima, fundo primary, texto branco Gotham 300 16/26 */
body.landing-page footer {
    margin-top: 0 !important;
}
body.landing-page footer > div.middle {
    padding-block: 90px;
    background-color: var(--primary);
}
body.landing-page footer > div:not(.newsletter)::before { display: none; }
body.landing-page footer,
body.landing-page footer :is(p, a, span, li, small, div) {
    font-family: var(--font-family-2) !important;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    color: var(--white) !important;
}
body.landing-page footer a:hover { opacity: .7; }

/* Botoes fixos (Contacte-nos): texto em Gotham Light */
body.landing-page .follow a, body.landing-page .follow a span { font-family: var(--font-family-2) !important; font-weight: 300 !important; }