/* ==========================================================
   ECHOSPITALIDADE — folha única, v15
   25 de julho de 2026. Site Portugal, website ID 1.

   ESTA FOLHA SUBSTITUI DUAS:
     ativo 140  "Echospitalidade escala v13"        -> DESATIVAR
     ativo 141  "Echospitalidade ajustes visuais v14" -> DESATIVAR

   Enquanto as duas antigas estiverem ativas, esta não resolve
   nada. Foi a sobreposição delas que inverteu a escala, com os
   heróis pequenos e o conteúdo de baixo grande.

   Colocar em web.assets_frontend, ou no código personalizado
   das definições do site. NUNCA dentro de um template de página.
   ========================================================== */


/* ==========================================================
   AFINAÇÃO NUM SÍTIO SÓ

     0.95  aprovado pelo Fernando em 25/07/2026
     0.90  se ainda parecer grande
     0.88  o mínimo, abaixo disto o corpo passa a ter menos
           de 14 pixéis e deixa de se ler com conforto
     1.00  se ficar pequeno de mais

   Não mexer em html{font-size}. Nunca. O Odoo usa rem também
   para larguras de coluna, e reduzir a raiz parte o layout.

   NOTA DE ACESSIBILIDADE, registada de propósito.
   Com 0.95 o corpo de texto fica em 15,2 pixéis. A recomendação
   geral para leitura confortável é 16. Ficou assim porque foi o
   que o Fernando viu e aprovou na pré-visualização, e a diferença
   é pequena. Se algum cliente ou formando se queixar de o texto
   ser pequeno, subir o --e para 1.00 resolve tudo de uma vez.
   ========================================================== */
:root{
    --e: 0.95;

    /* escala aprovada na pré-visualização de 25/07 */
    --t-h1:    calc(46px   * var(--e));
    --t-h2:    calc(32px   * var(--e));
    --t-h3:    calc(19px   * var(--e));
    --t-lead:  calc(18px   * var(--e));
    --t-corpo: calc(16px   * var(--e));
    --t-meta:  calc(13.5px * var(--e));
    --t-kick:  calc(12px   * var(--e));
    --t-nav:   calc(14.5px * var(--e));
    --t-btn:   calc(14.5px * var(--e));

    --img-hero:   calc(400px * var(--e));
    --img-cartao: calc(132px * var(--e));

    --verde:  #0E3C39;
    --azul:   #1F6FA0;
    --euca:   #4F818A;
    --terra:  #BE6466;
    --marfim: #F5FAFB;
}


/* ----------------------------------------------------------
   1. TÍTULOS, incluindo as classes display do Bootstrap

   Esta secção é a mais importante da folha. Os títulos dos
   blocos do Odoo usam display-1 a display-6, que ganham a
   qualquer regra escrita só em h1. Tem de se apanhar as duas.
   ---------------------------------------------------------- */
#wrap h1, main h1, section h1, .h1,
#wrap .display-1, #wrap .display-2, #wrap .display-3,
main .display-1, main .display-2, main .display-3{
    font-size: var(--t-h1) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}
#wrap h2, main h2, section h2, .h2,
#wrap .display-4, #wrap .display-5, #wrap .display-6,
main .display-4, main .display-5, main .display-6{
    font-size: var(--t-h2) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}
#wrap h3, main h3, .h3{
    font-size: var(--t-h3) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}
#wrap h4, main h4, .h4{
    font-size: calc(17px * var(--e)) !important;
    line-height: 1.35 !important;
}
#wrap h5, #wrap h6, main h5, main h6{
    font-size: calc(15px * var(--e)) !important;
}

/* o sobretítulo, aquela linha pequena em maiúsculas */
.o_kicker, .o_eyebrow{
    font-size: var(--t-kick) !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--euca) !important;
    margin-bottom: 10px !important;
}


/* ----------------------------------------------------------
   2. CORPO DE TEXTO

   Piso de segurança: mesmo que alguém baixe o --e por engano,
   o corpo nunca desce abaixo de 15 pixéis.
   ---------------------------------------------------------- */
#wrap p, main p, #wrap li, main li,
#wrap td, #wrap dd, #wrap .o_default_snippet_text{
    font-size: max(15px, var(--t-corpo)) !important;
    line-height: 1.62 !important;
}
#wrap .lead, main .lead, .o_lead{
    font-size: var(--t-lead) !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}
#wrap small, main small, .o_meta, .badge, .o_tag{
    font-size: var(--t-meta) !important;
}


/* ----------------------------------------------------------
   3. BOTÕES
   ---------------------------------------------------------- */
#wrap .btn, main .btn, .o_cta{
    font-size: var(--t-btn) !important;
    font-weight: 700 !important;
    padding: calc(11px * var(--e)) calc(20px * var(--e)) !important;
    border-radius: 12px !important;
    line-height: 1.35 !important;
}
#wrap .btn-sm, main .btn-sm{
    font-size: var(--t-meta) !important;
    padding: calc(7px * var(--e)) calc(13px * var(--e)) !important;
}
/* área de toque mínima em telemóvel */
@media(max-width:767px){
    #wrap .btn, main .btn{ min-height: 44px !important; }
}


/* ----------------------------------------------------------
   4. CABEÇALHO E MENU

   O menu não estava grande. O cabeçalho é que estava cheio,
   com dois botões, lupa, conta e duas bandeiras. Com um botão
   só os sete itens cabem sem o "+".
   ---------------------------------------------------------- */
header .nav-link, #top .nav-link{
    font-size: var(--t-nav) !important;
    font-weight: 600 !important;
    padding: calc(8px * var(--e)) calc(10px * var(--e)) !important;
    white-space: nowrap !important;
}
header .navbar-brand img, #top .navbar-brand img{
    height: calc(40px * var(--e)) !important;
    width: auto !important;
}
header .navbar, #top .navbar{
    padding-top: calc(8px * var(--e)) !important;
    padding-bottom: calc(8px * var(--e)) !important;
}

/* TELEFONE FORA DO CABEÇALHO
   Decisão do Fernando, 25/07/2026. Ocupa perto de cem pixéis no
   meio da barra e o botão flutuante do WhatsApp já cobre o
   contacto imediato.

   Só esconde no cabeçalho. O telefone TEM de continuar visível
   no rodapé e na página de contacto, onde é dado fiscal e de
   contacto real. Ver a verificação no bloco 02. */
header a[href^="tel:"], #top a[href^="tel:"],
header .o_header_phone, #top .o_header_phone{ display:none !important; }

/* SEGUNDO BOTÃO DO CABEÇALHO
   Preferência: remover no editor, ver bloco 02.
   Esta regra é a rede de segurança se ficar lá. */
@media(min-width:992px){
    header .o_header_cta_secundario,
    header .btn.o_cta_conversamos{ display:none !important; }
}

/* as bandeiras e os ícones de apoio, mais discretos */
header .o_lang_flag img, header .js_language_selector img{
    height: calc(20px * var(--e)) !important;
    width: auto !important;
}

/* TODOS os itens visíveis, incluindo os que o Odoo empurrou
   para o botão "+". É por causa disto que a Equipa não
   aparecia no menu depois do v14. */
@media(min-width:992px){
    header .o_extra_menu_items{ display: contents !important; }
    header .navbar-nav > li,
    header .o_extra_menu_items > li{
        display: list-item !important;
        float: none !important;
    }
    header .dropdown-toggle.o_extra_menu,
    #top .dropdown-toggle.o_extra_menu{ display:none !important; }
    header .navbar-nav{ flex-wrap: nowrap !important; }
}

/* o cabeçalho fica sempre por cima do conteúdo.
   Na captura de /caminhos a barra de filtros estava a passar
   à frente dele. */
header#top, header .o_header_standard, header .o_header_sticky{
    z-index: 1030;
}


/* ----------------------------------------------------------
   5. SECÇÃO DE TOPO DE CADA PÁGINA

   A ilustração deixa de esticar a linha e passa a acompanhar
   o texto pelo centro.
   ---------------------------------------------------------- */
/* ATENÇÃO AO SELECTOR.
   Em /caminhos a primeira secção da página é a barra de filtros,
   não o herói. Sem o :not() abaixo, estas regras encolhiam os
   filtros e deixavam o herói na mesma. */
#wrap > section:first-of-type:not(.o_filtros):not(.o_svc_filtros),
#wrap .o_hero{
    padding-top: calc(44px * var(--e));
    padding-bottom: calc(40px * var(--e));
}
#wrap > section:first-of-type:not(.o_filtros):not(.o_svc_filtros) .row,
#wrap .o_hero .row{
    align-items: center;
}
#wrap > section:first-of-type:not(.o_filtros):not(.o_svc_filtros) img,
#wrap .o_hero img{
    max-height: var(--img-hero);
    width: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* nenhuma ilustração de topo com caixote branco à volta */
#wrap .o_hero .col-lg-5,
#wrap .o_hero .col-lg-6,
.o_hero_img, .o_hero_img_wrap{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* A página O que nos move ficou desproporcional desde o erro da
   raiz no v11.
   NÃO usar body[data-main-object*="valores"]. Esse atributo do
   Odoo guarda o modelo e o número de registo, do género
   website.page(14,), e nunca o endereço da página. Um selector
   assim nunca dispara. É preciso a classe no bloco. */
.o_manifesto img{
    max-height: calc(380px * var(--e));
    width: auto;
}


/* ----------------------------------------------------------
   6. OS NOSSOS CARTÕES

   Nas capturas de /caminhos a ilustração tinha 90 pixéis dentro
   de um cartão com 40 de folga de cada lado. Ficava vazio e as
   etiquetas eram maiores do que o nome do serviço.
   ---------------------------------------------------------- */
.o_svc_grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: calc(16px * var(--e));
    align-items: stretch;
}
.o_svc, .o_curso_card{
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4eef0;
    border-radius: 16px;
    padding: calc(22px * var(--e));
}
.o_svc:hover, .o_curso_card:hover{
    box-shadow: 0 8px 22px rgba(14,60,57,.08);
    border-color: #cfe0e3;
}
.o_svc[hidden]{ display:none !important; }

/* ilustração maior e sempre com o mesmo fundo redondo.
   Na captura um cartão tinha fundo bege e o outro não. */
.o_svc .o_svc_img,
.o_curso_card .o_svc_img{
    width: var(--img-cartao);
    height: var(--img-cartao);
    border-radius: 50%;
    background: #eef5f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(16px * var(--e));
    overflow: hidden;
}
.o_svc .o_svc_img img,
.o_curso_card .o_svc_img img,
.o_curso_card > img{
    max-width: 76%;
    max-height: 76%;
    width: auto;
    height: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.o_svc h3, .o_curso_card h3{
    font-size: var(--t-h3) !important;
    margin-bottom: calc(8px * var(--e)) !important;
}
.o_svc p, .o_curso_card p{
    font-size: max(14px, calc(15px * var(--e))) !important;
}

/* etiquetas dos cartões, abaixo do nome do serviço */
.o_svc .badge, .o_svc .o_tag,
.o_curso_card .badge, .o_curso_card .o_tag{
    font-size: var(--t-meta) !important;
    font-weight: 600 !important;
    padding: calc(4px * var(--e)) calc(10px * var(--e)) !important;
    border-radius: 99px !important;
}


/* ----------------------------------------------------------
   7. O MÉTODO ECOA, na página inicial

   As quatro letras passam a ser a primeira coisa que se vê.
   Antes estavam em corpo pequeno ao lado do ícone e ninguém
   percebia que formavam a palavra.
   ---------------------------------------------------------- */
.o_ecoa_passo{
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: calc(20px * var(--e));
}
.o_ecoa_passo .o_ecoa_letra{
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: calc(60px * var(--e));
    line-height: .9;
    color: #7EC4BC;
    margin-bottom: calc(6px * var(--e));
}
.o_ecoa_passo .o_ecoa_ico{
    position: absolute;
    top: calc(16px * var(--e));
    right: calc(16px * var(--e));
    width: calc(30px * var(--e));
    height: auto;
    opacity: .42;
}
.o_ecoa_passo h3{ color:#fff !important; }
.o_ecoa_passo p{ color:#BCDAD8 !important; margin-bottom:0 !important; }


/* ----------------------------------------------------------
   8. BARRA DE FILTROS

   Em /caminhos estava a passar à frente do cabeçalho.
   Fica por baixo dele e encostada ao conteúdo.
   ---------------------------------------------------------- */
.o_filtros, .o_svc_filtros{
    z-index: 20;
    padding-top: calc(14px * var(--e));
    padding-bottom: calc(14px * var(--e));
    margin-bottom: calc(8px * var(--e));
}
.o_filtros .btn, .o_svc_filtros .btn{
    font-size: var(--t-meta) !important;
    padding: calc(7px * var(--e)) calc(14px * var(--e)) !important;
}


/* ----------------------------------------------------------
   9. LOJA, CURSOS E PÁGINAS LEGAIS

   Estas ficaram de fora de tudo o que se fez até agora.
   É por isso que a navegação parecia mudar de casa.
   ---------------------------------------------------------- */
.oe_website_sale h1, .o_wslides_home h1, .o_wslides_lesson_main h1,
.oe_website_sale .h1, .o_wslides_home .h1{
    font-size: var(--t-h1) !important;
}
.oe_website_sale h2, .o_wslides_home h2, .o_wslides_lesson_main h2,
.oe_website_sale h3, .o_wslides_home h3{
    font-size: var(--t-h2) !important;
}
.oe_website_sale p, .oe_website_sale li,
.o_wslides_home p, .o_wslides_home li,
.o_wslides_lesson_main p, .o_wslides_lesson_main li{
    font-size: max(15px, var(--t-corpo)) !important;
    line-height: 1.62 !important;
}
.oe_website_sale .btn, .o_wslides_home .btn, .o_wslides_lesson_main .btn{
    font-size: var(--t-btn) !important;
}
.oe_website_sale .oe_product_image img,
.oe_website_sale .o_wsale_product_images img{
    background: transparent !important;
    border: 0 !important;
}

/* Páginas legais e de condições.
   Precisam de entrelinha maior porque são blocos longos de
   leitura corrida. Aplicar a classe o_legal ao bloco principal
   dessas páginas, no editor. Sem a classe, ficam com o corpo
   normal da secção 2, o que já é aceitável. */
.o_legal p, .o_legal li{
    font-size: max(15px, var(--t-corpo)) !important;
    line-height: 1.72 !important;
}


/* ----------------------------------------------------------
   10. AVISO DE ABERTURA DE CURSO

   O texto de privacidade e o "quero receber novidades" estavam
   do mesmo tamanho das opções de curso e competiam com elas.
   ---------------------------------------------------------- */
.o_aviso_curso .o_privacidade,
.o_aviso_curso .form-check-label.o_secundario,
.o_form_legal_note{
    font-size: calc(12.5px * var(--e)) !important;
    color: #5B6E70 !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   11. TELEMÓVEL
   ---------------------------------------------------------- */
@media(max-width:767px){
    :root{
        --t-h1: calc(31px * var(--e));
        --t-h2: calc(24px * var(--e));
        --img-hero: calc(260px * var(--e));
    }
    #wrap > section:first-of-type{
        padding-top: calc(26px * var(--e));
        padding-bottom: calc(24px * var(--e));
    }
    .o_ecoa_passo .o_ecoa_letra{ font-size: calc(46px * var(--e)); }
}


/* ----------------------------------------------------------
   12. GUARDAS

   Sem barra de deslocamento horizontal, e nenhuma imagem a
   rebentar a coluna onde vive.
   ---------------------------------------------------------- */
#wrap img{ max-width: 100%; height: auto; }

/* NÃO pôr overflow-x:hidden no body.
   Isso desliga o position:sticky de todos os elementos filhos em
   vários navegadores, e o cabeçalho deste site é fixo. Se houver
   barra horizontal, encontrar o elemento culpado com o teste 7 do
   bloco 99 e corrigir esse elemento, não tapar o sintoma. */

/* ==========================================================
   FIM. Nada nesta folha mexe em height, overflow, max-width
   ou position com seletores genéricos como section ou .card.
   A lição 12.4 do documento de continuidade é respeitada.
   ========================================================== */

/* Complementos estruturais v15 */
#wrap .o_quem_curto{padding:clamp(42px,6vw,72px) 0;background:#fff;border-top:1px solid #dce8e6}
#wrap .o_quem_curto h2{color:#0e3c39;margin:8px 0 14px}
#wrap .o_quem_curto p:not(.o_kicker){max-width:70ch;font-size:17px;line-height:1.65}
#wrap .o_quem_curto .eh2-btn{margin-top:18px}
#wrap .o_ecoa_passo{position:relative}
#wrap .o_ecoa_ico{position:absolute;right:18px;top:18px;opacity:.42}
#wrap .o_ecoa_letra{font:800 clamp(42px,5vw,64px)/1 Manrope,Inter,sans-serif!important;color:#7EC4BC!important;margin:0 0 8px!important}
header#top .oe_unremovable[href^="tel:"],header#top a[href^="tel:"]{display:none!important}
.o_cta_ico{width:28px;height:28px;object-fit:contain;margin-right:8px}