/* ===================================
    Crafto - Hotel and resort
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* --- algarismos ------------------------------------------------------------
   A Rufina só tem algarismos de estilo antigo: o 1 desenha-se como I, o 3 4 5
   7 9 descem abaixo da linha de base e o 6 8 sobem. Não é corrigível na própria
   fonte — o font-variant-numeric: lining-nums não tem efeito nela.

   Solução: a Newsreader (SIL OFL, alojada aqui) limitada por unicode-range aos
   algarismos e à pontuação numérica. Só os dígitos trocam de tipo; as letras
   continuam em Rufina e em Urbanist, sem tocar em nenhum texto do site.
   Ficheiro com 5,6 KB — só tem estes glifos. */
@font-face {
    font-family: 'OnzenasNum';
    src: url('../../fonts/newsreader-num.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0030-0039, U+002C, U+002E, U+003A, U+002F, U+2013;
}

/* variable */
:root {
    --base-color: #7f2529;
    --secondary-color: #cbb0a4;
    --surface-muted: #c5c0b9;
    --medium-gray:#817F7C;
    --very-light-gray:#F4F1ED;
    --alt-font: 'OnzenasNum', 'Rufina', serif;
    --primary-font: 'OnzenasNum', 'Urbanist', sans-serif;
}
body, .btn { font-family: var(--primary-font); }
/* reset */
body {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: .3px;
}
/* timeline — horizontal line with dots above each milestone */
/* Faixa de largura total sobre fotografia. Como tira tipográfica entre secções
   brancas nunca pertenceu à página; sobre imagem passa a ser um momento, ao
   nível da banda de fecho — e traz fotografia ao único bloco que não a tinha. */
.timeline-photo-band {
    position: relative;
    padding: 115px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.timeline-photo-band .container { position: relative; z-index: 1; }
.timeline-photo-band .eyebrow { color: rgba(255, 255, 255, .85); }
/* Especificidade a condizer com `.timeline-item .timeline-year`, definida mais
   abaixo: com um só nível esta regra perdia o desempate e os anos saíam escuros. */
.timeline-photo-band .timeline-item .timeline-year {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
.timeline-photo-band .timeline-item span { color: rgba(255, 255, 255, .72) !important; }
.timeline-photo-band .timeline::before { background-color: rgba(255, 255, 255, .45); opacity: 1; }
.timeline-photo-band .timeline-item::before { background-color: #fff; }
@media (max-width: 991px) {
    .timeline-photo-band { padding: 80px 0; background-attachment: scroll; }
}
@media (max-width: 575px) { .timeline-photo-band { padding: 60px 0; } }

.timeline {
    padding-top: 26px;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 8%;
    right: 8%;
    height: 1px;
    background-color: var(--base-color);
    opacity: .25;
    /* Desenha-se da esquerda para a direita quando entra em vista. `.appear` é
       posta pelo próprio tema (js/main.js) nos elementos com data-anime — não
       é preciso JS novo para isto. */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s cubic-bezier(.2, .8, .2, 1);
}
.timeline.appear::before { transform: scaleX(1); }

.timeline-item {
    position: relative;
    padding-top: 24px;
}
/* Os pontos surgem em cadeia, atrás da linha que os liga. */
.timeline-item::before {
    transform: translateX(-50%) scale(0);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.timeline.appear .timeline-item::before { transform: translateX(-50%) scale(1); }
.timeline.appear .timeline-item:nth-child(1)::before { transition-delay: .25s; }
.timeline.appear .timeline-item:nth-child(2)::before { transition-delay: .45s; }
.timeline.appear .timeline-item:nth-child(3)::before { transition-delay: .65s; }
.timeline.appear .timeline-item:nth-child(4)::before { transition-delay: .85s; }
.timeline.appear .timeline-item:nth-child(5)::before { transition-delay: 1.05s; }
@media (prefers-reduced-motion: reduce) {
    .timeline::before, .timeline .timeline-item::before { transition: none; transform: none; }
    .timeline::before { transform: scaleX(1); }
    .timeline .timeline-item::before { transform: translateX(-50%) scale(1); }
}
/* A faixa é um apontamento, não uma secção. Os anos não precisam de fs-55. */
.timeline-item .timeline-year {
    font-family: var(--alt-font);
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--dark-gray);
}
@media (max-width: 991px) { .timeline-item .timeline-year { font-size: 2rem; } }
@media (max-width: 575px) { .timeline-item .timeline-year { font-size: 1.7rem; } }
.timeline-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--base-color);
}
/* Abaixo dos 991px a cronologia passa a coluna (bloco TELEMÓVEL, no fim do
   ficheiro). As antigas regras de 2x2 viviam aqui e punham o ponto em
   `position: static` — o `left`/`top` da versão em coluna ficava sem efeito e
   os pontos caíam a meio do cartão. Removidas: nada acima dos 991px as usava. */
/* room link — arrow reveals on hover */
.btn-room-link {
    text-decoration: none;
    transition: background-color .3s ease;
}
.btn-room-link i {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition: max-width .3s ease, opacity .3s ease, margin-left .3s ease, transform .3s ease;
}
@media (hover: hover) { .btn-room-link:hover i {
    max-width: 20px;
    opacity: 1;
    margin-left: 10px;
    transform: translateX(0); } }
html {
    overflow-x: hidden;
}
section.half-section {
    padding-top: 70px;
    padding-bottom: 70px;
}
.icon-extra-large {
    font-size: 53px;
}
.mt-minus-5{
    margin-top: -5%;
}
h2 {
    line-height: 3.3rem;
}
h3 {
    line-height: 2.9rem;
}
h5 {
    line-height: 2.5rem;
}
h6 {
    line-height: 2.2rem;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 20px;
}
/* header */
header .navbar-brand {
    padding: 20px 0;
}
header .navbar-brand img {
    max-height: 54px;
}
.navbar .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 600;
    /* "A herdade" partia em duas linhas: os itens do menu nunca quebram. */
    white-space: nowrap;
}
/* Botão de reserva no topo — a acção principal do site vive no menu.
   Estilo próprio em vez das classes .btn do tema: dentro da coluna do navbar
   elas esticavam o botão à altura toda da barra e comiam-lhe os cantos. */
.nav-book-col { display: flex; align-items: center; justify-content: flex-end; }
header .navbar .nav-book-btn {
    display: none;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 11px 22px;
    border-radius: 100px;
    background-color: var(--base-color);
    color: #fff;
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .3s ease, transform .3s ease;
}
header .navbar .nav-book-btn i { font-size: 11px; transition: transform .3s ease; }
@media (hover: hover) { header .navbar .nav-book-btn:hover { background-color: #6a1f22; color: #fff; } }
@media (hover: hover) { header .navbar .nav-book-btn:hover i { transform: translateX(3px); } }
/* Abaixo dos 1200 o botão continua visível, mais pequeno: em telemóvel a barra
   tinha só o logótipo e o hamburger, com um vão morto no meio, e a única acção
   do site ficava escondida atrás de um clique. A coluna passa à frente da do
   hamburger (`order`), senão aparecia depois dele. */
@media (min-width: 1200px) { header .navbar .nav-book-btn { display: inline-flex; } }
/* Página focada (/retiro): não há menu, e entre os 992 e os 1199 o "Reservar"
   vivia dentro dele. O botão para o site tem de se ver também aí. */
@media (min-width: 992px) and (max-width: 1199px) { header .navbar .nav-site-btn { display: inline-flex; } }
/* Sem os itens do menu a barra encolhia para 44px (são eles que lhe dão os 96)
   e o logótipo, de 54px, ficava a sair por baixo, tapado pelo banner. */
@media (min-width: 992px) {
    header .navbar-focada { min-height: 96px; }
    header.sticky.sticky-active .navbar-focada { min-height: 72px; }
}
@media (min-width: 992px) and (max-width: 1399px) {
    .navbar .navbar-nav .nav-link { font-size: 16px; }
    .navbar .navbar-nav > .nav-item { padding-left: 12px; padding-right: 12px; }
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a span {
    font-size: 17px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu {
    width: 350px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a p {
    font-size: 15px;
}
.center-logo .navbar-left, .center-logo .navbar-right {
    width: 40%;
}
/* btn */
.btn {
    font-weight: 600;
    text-transform: inherit;
    font-family: var(--primary-font);
    letter-spacing: 0;
}
/* Um único tamanho e uma única forma para todos os botões do site. Havia cinco
   escalas (very-small a extra-large) com raios diferentes; a mesma acção mudava
   de aspecto conforme a secção. */
.btn.btn-switch-text.btn-extra-large,
.btn.btn-switch-text.btn-large,
.btn.btn-switch-text.btn-medium,
.btn.btn-switch-text.btn-small,
.btn.btn-switch-text.btn-very-small {
    padding: 0;
    border-radius: 150px;
}
.btn.btn-switch-text.btn-extra-large > span,
.btn.btn-switch-text.btn-large > span,
.btn.btn-switch-text.btn-medium > span,
.btn.btn-switch-text.btn-small > span,
.btn.btn-switch-text.btn-very-small > span {
    font-size: 16px;
    padding: 10px 20px;
}
/* Botões sem a estrutura de <span> do tema (ex.: o submit do formulário de
   contacto) mantêm o padding próprio, mas partilham a forma.
   O .btn-round-edge do tema impõe 4px com especificidade maior — daí repetir-se
   aqui em vez de bastar a regra em .btn. */
.btn,
.btn.btn-round-edge,
.btn.btn-round-edge-small { border-radius: 150px; }
.btn.btn-hover-animation-switch .btn-icon {
    margin-left: 5px;
}
/* page title */
.page-title-large h1 {
    font-size: 4.375rem;
    line-height: 5.313rem;
}
/* banner highlight separator */
.highlight-separator[data-shadow-animation] span img { 
    height: 8px;
    bottom: 10px;
}
/* bg transparent */
.bg-transparent-base-color {
    background-color: rgba(160,135,91,.2) !important;
}
.bg-gradient-dark-transparent {
    background: #FFFFFF00;
    background: -webkit-linear-gradient(top, #FFFFFF00, #131313);
    background: -moz-linear-gradient(top, #FFFFFF00, #131313);
    background: linear-gradient(to bottom, #FFFFFF00, #131313);
}
/* border color */
.border-color-transparent-base-color {
    border-color: rgba(160,135,91,.2) !important;
}
.border-color-transparent-dark-very-light {
    border-color: rgba(112, 112, 112, 0.2) !important;
}
/* tab style 07 */
.tab-style-07 .nav-tabs .nav-item .nav-link {
    border-color: rgba(112, 112, 112, 0.2) !important; 
}
.tab-style-07 .nav-tabs .nav-item .nav-link span >span {
    color: var(--base-color);
}
/* swiper slider */
.slider-navigation-style-01.swiper-button-next {
    right: 30px;
}
.slider-navigation-style-01.swiper-button-prev {
    left: 30px;
}
/* tab style 08 */
.tab-style-08 ul .nav-item .nav-link {
    color: var(--dark-gray);
}
.tab-style-08 ul .nav-item .nav-link.active, .tab-style-08 ul .nav-item .nav-link.show {
    color: var(--dark-gray);   
}
@media (hover: hover) { .tab-style-08 ul .nav-item .nav-link:hover {
    color: var(--dark-gray); } }
/* footer */
footer .nav-link {
    color:var(--dark-gray);
    line-height: normal;
}
footer .elements-social li {
    margin: 0 12px 0 0;
}
@media (max-width: 1399px) {
    .tab-style-07 .nav-tabs .nav-item .nav-link {
        padding: 40px 35px;
    }
}
@media (max-width: 1199px) {
    .tab-style-07 {
        border-right: 1px solid rgba(112, 112, 112, 0.2);
    }
    .navbar.center-logo .navbar-left, .navbar.center-logo .navbar-right {
        width: 37%;
    }
    .tab-style-08 ul .nav-item .nav-link {
        padding: 25px 40px;
    }
}
@media (max-width: 991px) {
    .tab-style-07 .nav-tabs .nav-item .nav-link {
        padding: 35px 25px;
    }
    .navbar.center-logo .navbar-left, .navbar.center-logo .navbar-right {
        width: 100%;
    }
    header.sticky .navbar-brand,
    header .navbar-brand {
        padding: 15px 0;
    }
    .tab-style-08 ul .nav-item .nav-link {
        padding: 20px 18px;
        line-height: 28px;
    }
}
@media (max-width: 767px) {
    .tab-style-07 .nav-tabs .nav-item .nav-link .number-box {
        right: 40px;
    }
    .tab-style-07 .nav-tabs .nav-item .nav-link {
        padding: 25px 25px;
    }
    .tab-style-07 {
        border-right: 0;
    }
    .slider-navigation-style-01.swiper-button-next {
        right: 15px;
    }
    .slider-navigation-style-01.swiper-button-prev {
        left: 15px;
    }
    .tab-style-08 ul .nav-item .tab-border {
        top: inherit;
        bottom: 0;
    }
}
@media (max-width: 575px) {
    .pricing-table-style-13 li {
        text-align: left;
    }
    .btn.btn-switch-text.btn-medium > span {
        padding: 10px 18px;
    }
}

/* ==========================================================================
   ONZENAS — camada de desenho
   Overrides do Crafto para o registo rural definido em .impeccable.md:
   contenção, cor com intenção, fotografia manda, mobile igual a desktop.
   ========================================================================== */
:root {
    --ink: #221f1d;                     /* quase-preto quente — tipografia */
    --cream: #faf8f5;                   /* branco quebrado — bandas claras */
    --sand: #f4f1ed;                    /* bege — bandas alternadas */
    --hairline: rgba(34, 31, 29, .13);  /* filetes e separadores */
    --shadow-soft: 0 18px 50px -28px rgba(34, 31, 29, .45);
}

/* --- ritmo vertical ------------------------------------------------------
   O Crafto empilha utilitários de margem por bloco, o que faz cada secção
   respirar de forma diferente. Aqui o espaçamento vem da secção, não do
   conteúdo. */
section.section-rhythm { padding-top: 120px; padding-bottom: 120px; }
section.section-rhythm.pt-0 { padding-top: 0; }
section.section-rhythm.seccao-quartos { padding-top: 90px; }
section.section-rhythm.pb-0 { padding-bottom: 0; }
@media (max-width: 991px) { section.section-rhythm { padding-top: 80px; padding-bottom: 80px; } }
@media (max-width: 575px) { section.section-rhythm { padding-top: 60px; padding-bottom: 60px; } }

/* cabeçalho de secção — sobrescrita, título, linha de apoio */
.section-head { max-width: 640px; margin: 0 auto 65px; text-align: center; }
.section-head.text-start { margin-left: 0; text-align: left; }
.section-head .eyebrow { display: block; margin-bottom: 18px; }
.section-head h2, .section-head h3 { margin-bottom: 14px; }
.section-head p { margin-bottom: 0; color: var(--medium-gray); font-size: 17px; }
@media (max-width: 991px) { .section-head { margin-bottom: 45px; } }

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--base-color);
}

/* O Crafto não traz utilitários de gap em px (o Bootstrap só tem gap-0..gap-5).
   Estavam a ser usados em três sítios e não faziam nada — elementos colados. */
.gap-10px { gap: 10px; }
.gap-15px { gap: 15px; }
.gap-20px { gap: 20px; }
.gap-30px { gap: 30px; }

/* --- scrim sobre fotografia ----------------------------------------------
   Um véu preto uniforme mata a foto. Gradiente: escurece onde assenta o
   texto e deixa o topo da imagem respirar. */
.photo-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom,
        rgba(20, 17, 15, .55) 0%,
        rgba(20, 17, 15, .28) 35%,
        rgba(20, 17, 15, .52) 75%,
        rgba(20, 17, 15, .78) 100%);
}
.photo-scrim-soft {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom,
        rgba(20, 17, 15, .05) 0%,
        rgba(20, 17, 15, .30) 55%,
        rgba(20, 17, 15, .72) 100%);
}

/* --- hero da homepage ---------------------------------------------------- */
/* Vídeo de fundo. O poster é a mesma foto que servia de fundo antes, por isso
   quem não recebe o vídeo (dados poupados, movimento reduzido, ecrã pequeno)
   continua a ver o hero completo — nunca um rectângulo preto. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

.hero-wordmark {
    font-family: var(--alt-font);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: .95;
    font-size: 9.5rem;
}
.hero-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}
.hero-lede {
    font-size: 20px;
    line-height: 32px;
    color: rgba(255, 255, 255, .88);
    max-width: 520px;
    margin-inline: auto;
}
.hero-rule {
    width: 60px;
    height: 1px;
    background: rgba(255, 255, 255, .45);
    margin: 30px auto;
}
@media (max-width: 1199px) { .hero-wordmark { font-size: 7.5rem; } }
@media (max-width: 767px)  { .hero-wordmark { font-size: 5rem; letter-spacing: -1px; } .hero-lede { font-size: 17px; line-height: 28px; } }
@media (max-width: 575px)  { .hero-wordmark { font-size: 3.8rem; } }

/* --- botões em contorno ----------------------------------------------------
   Cheios, os botões eram a coisa mais pesada de cada página — e repetem-se em
   todas. Passam a contorno: filete e texto na cor, fundo transparente. Com
   rato, ao passar por cima enchem-se, que é o que confirma que são botões.

   O `.btn` do tema já tem `border: 2px solid transparent`, por isso dar cor ao
   filete não mexe uma linha no alinhamento. A sombra sai: por baixo de um botão
   transparente lê-se como uma caixa a flutuar sem nada dentro. */
.btn.btn-base-color,
.btn.btn-dark-gray,
.btn.btn-white,
header .navbar .nav-book-btn { background-color: transparent; box-shadow: none; }
.btn.btn-base-color { border-color: var(--base-color); color: var(--base-color); }
.btn.btn-dark-gray { border-color: var(--dark-gray); color: var(--dark-gray); }
.btn.btn-white { border-color: #fff; color: #fff; }
header .navbar .nav-book-btn { border: 2px solid var(--base-color); color: var(--base-color); }

/* Só com rato e em ecrã largo: num ecrã táctil o estado ficava preso depois do
   toque (ver o bloco do fim do ficheiro). */
@media (hover: hover) and (min-width: 992px) {
    .btn.btn-base-color:hover, .btn.btn-base-color:active { background-color: var(--base-color); color: #fff; }
    .btn.btn-dark-gray:hover, .btn.btn-dark-gray:active { background-color: var(--dark-gray); color: #fff; }
    .btn.btn-white:hover, .btn.btn-white:active { background-color: #fff; color: var(--dark-gray); }
    header .navbar .nav-book-btn:hover { background-color: var(--base-color); color: #fff; }
}

/* --- cabeçalho de página interior ----------------------------------------
   Um só componente para /rooms, /amenities, /contact, /about, /bistro.
   Antes eram cinco cópias do mesmo markup com alturas diferentes. */
/* A altura acompanha o ecrã: num portátil de 800px um cabeçalho fixo de 460px
   empurrava as estatísticas do /about para fora da primeira dobra. */
/* A altura acompanha o ecrã: um valor fixo ou empurra o conteúdo seguinte para
   fora da primeira dobra num portátil, ou fica curto num monitor grande. */
.page-header {
    position: relative;
    min-height: min(600px, 62vh);
    display: flex;
    align-items: flex-end;
    padding: 70px 0 60px;
    background-size: cover;
    background-position: center center;
    /* Parallax sem JS: a imagem fica presa ao ecrã e o conteúdo desliza por
       cima. Mantém o enquadramento ao centro, coisa que o plugin do tema não
       fazia — escrevia background-position a contar do topo. */
    background-attachment: fixed;
}
/* iOS ignora background-attachment: fixed e estica a imagem. Em ecrãs pequenos
   volta a scroll, que é o comportamento normal e correcto. */
@media (max-width: 991px) {
    .page-header { background-attachment: scroll; }
}
.page-header .container { position: relative; z-index: 1; }
/* O texto assenta em baixo, mas nem todas as fotos de cabeçalho são escuras
   (a do bistro e a da herdade são quase brancas). Este véu é mais forte que o
   .photo-scrim-soft genérico para garantir contraste em qualquer uma delas. */
.page-header .photo-scrim-soft {
    background: linear-gradient(to bottom,
        rgba(20, 17, 15, .34) 0%,
        rgba(20, 17, 15, .48) 40%,
        rgba(20, 17, 15, .82) 100%);
}
/* A do bistro e a da herdade são fotos quase brancas na faixa do texto; este
   segundo véu, ancorado em baixo, garante o contraste sem chapar a imagem toda. */
.page-header::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(20, 17, 15, .55), rgba(20, 17, 15, 0));
    pointer-events: none;
}
.page-header h1 {
    font-family: var(--alt-font);
    font-weight: 400;
    letter-spacing: -2px;
    color: #fff;
    margin-bottom: 0;
    font-size: 4rem;
    line-height: 1.05;
}
.page-header .page-header-lede {
    color: rgba(255, 255, 255, .82);
    font-size: 19px;
    line-height: 30px;
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .page-header { min-height: 360px; padding: 70px 0 50px; }
    .page-header h1 { font-size: 3rem; }
    .page-header .page-header-lede { font-size: 17px; line-height: 28px; margin-top: 18px; }
}
/* 300px de fotografia com a faixa dos números logo a seguir, quase da mesma
   altura, lia-se como duas faixas iguais em vez de banner + apontamento. A
   fotografia manda: `svh` e não `vh` pela mesma razão do hero (a barra do
   browser conta como espaço visível), com tecto em px para não passar do ecrã
   inteiro num telemóvel comprido. */
@media (max-width: 575px) {
    .page-header { min-height: min(480px, 58svh); }
    .page-header h1 { font-size: 2.3rem; letter-spacing: -1px; }
}

/* Marcas de confirmação da coudelaria: 35px de círculo cheio pesavam mais que
   o texto que acompanham. Reduzidas para apontamento. */
.amenities-coudelaria-section .feature-box-icon-rounded {
    width: 20px !important;
    height: 20px !important;
    margin-top: 5px;
    flex-shrink: 0;
}
.amenities-coudelaria-section .feature-box-icon-rounded i { font-size: 8px !important; }
.amenities-coudelaria-section .icon-with-text-style-08 .feature-box-content { font-size: 16px; }

/* --- cartão de introdução que sobe sobre o banner -------------------------
   Fecha o vão branco entre a fotografia e o texto, e deixa a parte de cima do
   título do banner à vista. */
.intro-overlap { position: relative; z-index: 2; }
.intro-overlap-card {
    background: #fff;
    padding: 55px 60px 50px;
    border-radius: 6px;
    margin-top: -70px;
    box-shadow: var(--shadow-soft);
}
/* Quando o cartão sobe, o banner precisa de mais folga em baixo — senão o
   cartão tapa o título e a linha de apoio. */
.page-header:has(+ .intro-overlap) { padding-bottom: 150px; }
@media (max-width: 991px) {
    .intro-overlap-card { padding: 40px 30px 35px; margin-top: -50px; }
    .page-header:has(+ .intro-overlap) { padding-bottom: 110px; }
}
@media (max-width: 575px) {
    .intro-overlap-card { padding: 32px 22px 28px; margin-top: -35px; border-radius: 4px; }
    .page-header:has(+ .intro-overlap) { padding-bottom: 85px; }
}

/* --- grelha de cartões ---------------------------------------------------
   O tema desalinha os cartões com parallax por item (data-bottom-top). Lido
   como avaria, não como intenção. Aqui a grelha assenta na mesma linha de
   base e o realce fica no hover. */
.card-grid > [class*='col'] { display: flex; }
.card-grid .grid-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}
@media (hover: hover) { .card-grid .grid-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); } }
.card-grid .grid-card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.card-grid .grid-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
@media (hover: hover) { .card-grid .grid-card:hover .grid-card-media img { transform: scale(1.05); } }
.card-grid .grid-card-body { padding: 28px 30px 32px; flex: 1 1 auto; }
.card-grid .grid-card-body h4,
.card-grid .grid-card-body .grid-card-title {
    font-family: var(--alt-font);
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -.5px;
    color: var(--dark-gray);
    margin-bottom: 10px;
    display: block;
}
.card-grid .grid-card-body p { font-size: 16px; line-height: 27px; margin-bottom: 0; color: var(--medium-gray); }

/* --- serviços: carrossel (homepage) ----------------------------------------
   Carrossel em vez de grelha: com o cartão seguinte à espreita, diz que há
   mais para ver e evita seis caixas iguais alinhadas. O nome assenta sobre a
   fotografia, a descrição fica por baixo — fotografia primeiro, texto depois. */
.carrossel-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 45px;
}
.carrossel-setas { display: flex; gap: 10px; flex-shrink: 0; }
.carrossel-setas button {
    width: 48px; height: 48px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: transparent;
    color: var(--dark-gray);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
@media (hover: hover) { .carrossel-setas button:hover { background: var(--base-color); border-color: var(--base-color); color: #fff; } }
.carrossel-setas button.swiper-button-disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .carrossel-setas button.swiper-button-disabled:hover { background: transparent; border-color: var(--hairline); color: var(--dark-gray); } }

.servicos-swiper { overflow: hidden; }
.servico-cartao { display: block; text-decoration: none; }
.servico-foto {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    aspect-ratio: 3 / 4;
    margin-bottom: 20px;
}
.servico-foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) { .servico-cartao:hover .servico-foto img { transform: scale(1.06); } }
.servico-foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 15, 14, .82) 0%, rgba(18, 15, 14, .28) 32%, rgba(18, 15, 14, 0) 62%);
}
.servico-foto h3 {
    position: absolute;
    left: 22px; right: 22px; bottom: 20px;
    z-index: 1;
    font-family: var(--alt-font);
    font-size: 25px;
    line-height: 32px;
    letter-spacing: -.5px;
    color: #fff;
    margin: 0;
}
.servico-cartao p {
    font-size: 15px;
    line-height: 26px;
    color: var(--medium-gray);
    margin: 0;
    /* Duas linhas fixas, para as descrições não desalinharem os cartões. */
    height: calc(26px * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* O cartão do fim: em vez da fotografia, um convite. Mesma caixa e mesma
   proporção dos outros, para ficar na fila em vez de parecer um botão que
   alguém pousou ali. É um <button> porque abre o modal — não navega. */
.servico-novo {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    text-align: left;
    width: 100%;
    font: inherit;
    cursor: pointer;
}
.servico-mais {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 26px;
    background: var(--sand);
    border: 1px dashed rgba(34, 31, 29, .22);
    transition: border-color .3s ease, background-color .3s ease;
}
.servico-mais::after { display: none; }
.servico-mais-sinal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(127, 37, 41, .25);
    font-family: var(--alt-font);
    font-size: 34px;
    line-height: 1;
    color: var(--base-color);
    margin-bottom: 20px;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.servico-mais-titulo {
    font-family: var(--alt-font);
    font-size: 25px;
    line-height: 31px;
    letter-spacing: -.5px;
    color: var(--dark-gray);
}
.servico-mais-nota {
    font-size: 14px;
    line-height: 22px;
    color: var(--medium-gray);
    margin-top: 8px;
}
.servico-mais-botao {
    margin-top: 22px;
    padding: 10px 22px;
    border: 1px solid var(--base-color);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--base-color);
    transition: background-color .3s ease, color .3s ease;
}
.servico-mais-texto {
    display: block;
    font-size: 15px;
    line-height: 26px;
    color: var(--medium-gray);
    height: calc(26px * 2);
    overflow: hidden;
}
@media (hover: hover) and (min-width: 992px) {
    .servico-novo:hover .servico-mais { border-color: var(--base-color); background: #fff; }
    .servico-novo:hover .servico-mais-sinal { background: var(--base-color); color: #fff; border-color: var(--base-color); }
    .servico-novo:hover .servico-mais-botao { background: var(--base-color); color: #fff; }
}

/* --- pedido de experiência (modal) -----------------------------------------
   `<dialog>` nativo: o browser trata do foco, do Escape e do fundo escuro. */
.pedido-modal {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 30px 80px -30px rgba(20, 17, 15, .5);
}
.pedido-modal::backdrop { background: rgba(20, 17, 15, .55); }
/* Com uma janela aberta a página por trás fica parada: o <dialog> nativo não
   trava o scroll, e a roda do rato sobre o fundo escuro rolava a homepage.
   `scrollbar-gutter` guarda o lugar da barra, para a página não saltar para o
   lado quando ela some. `overscroll-behavior` impede que o scroll dentro da
   janela, ao chegar ao fim, passe para a página. */
html:has(dialog:modal) { overflow: hidden; scrollbar-gutter: stable; }
.pedido-modal { overscroll-behavior: contain; }
.pedido-corpo { padding: 34px 36px 36px; }
.pedido-fechar-form { position: absolute; top: 0; right: 0; margin: 0; }
.pedido-fechar {
    appearance: none;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    padding: 10px 16px;
    color: var(--medium-gray);
    cursor: pointer;
}
.pedido-modal h3 { font-size: 27px; line-height: 34px; margin-bottom: 8px; }
/* Aberta a partir de um cartão de experiência: fotografia em cima, descrição
   completa (o cartão só mostra duas linhas) e o formulário por baixo. */
.pedido-fechar-form { z-index: 1; }
.pedido-modal.tem-foto .pedido-fechar { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.pedido-foto { aspect-ratio: 16 / 7; overflow: hidden; border-radius: 8px 8px 0 0; }
.pedido-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pedido-descricao { font-size: 15px; line-height: 26px; color: var(--medium-gray); white-space: pre-line; margin: 4px 0 22px; }
.pedido-subtitulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--base-color);
    border-top: 1px solid var(--hairline);
    padding-top: 20px;
    margin-bottom: 16px;
}
.pedido-lede { font-size: 15px; line-height: 24px; color: var(--medium-gray); margin-bottom: 24px; }
.pedido-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dark-gray);
    margin-bottom: 16px;
}
.pedido-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pedido-form input,
.pedido-form select,
.pedido-form textarea {
    width: 100%;
    margin-top: 7px;
    padding: 11px 14px;
    border: 1px solid var(--hairline);
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dark-gray);
}
.pedido-form textarea { resize: vertical; }
.pedido-form input:focus,
.pedido-form select:focus,
.pedido-form textarea:focus { outline: none; border-color: var(--base-color); }
/* O campo-armadilha não pode ser `display: none`: há robôs que ignoram os que
   estão escondidos assim. Fica fora do ecrã. */
.pedido-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pedido-enviar { margin-top: 6px; }
.pedido-estado { margin: 14px 0 0; font-size: 14px; color: var(--medium-gray); }
.pedido-estado.is-boa { color: #2c6e49; }
.pedido-estado.is-ma { color: var(--base-color); }
@media (max-width: 575px) {
    .pedido-corpo { padding: 26px 20px 28px; }
    .pedido-linha { grid-template-columns: 1fr; }
    .pedido-modal h3 { font-size: 23px; line-height: 30px; }
}

/* Poucas experiências: grelha em vez de carrossel (ver home.blade.php). Dois
   cartões numa pista feita para 3,25 deixavam meia secção em branco.

   Com dois, a fotografia passa de 3:4 a 4:3: ao ocupar meia largura do
   container, um retrato ficava com 780px de altura — uma parede de imagem. Com
   três mantém-se o retrato, que é a proporção com que as fotografias entram no
   backoffice. */
.servicos-grelha {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (min-width: 992px) {
    .servicos-grelha[data-quantos="2"] .servico-foto { aspect-ratio: 4 / 3; }
    .servicos-grelha[data-quantos="1"] { grid-template-columns: minmax(0, 620px); }
    .servicos-grelha[data-quantos="1"] .servico-foto { aspect-ratio: 3 / 2; }
}

/* Em telemóvel a grelha volta a ser uma pista horizontal, com 1,6 cartões à
   vista — o mesmo gesto do carrossel das outras secções. Empilhados, dois
   cartões inteiros eram 1100px de scroll para duas frases. Sem Swiper: é
   `overflow-x` com encaixe, que não precisa de JavaScript nenhum. */
@media (max-width: 767px) {
    .carrossel-topo { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 32px; }
    .servico-foto h3 { font-size: 21px; line-height: 28px; }
    .servicos-grelha {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* Sem isto o último cartão encosta ao bordo do container e não se
           percebe que a pista acabou. */
        padding-bottom: 2px;
    }
    .servicos-grelha::-webkit-scrollbar { display: none; }
    .servicos-grelha > .servico-cartao {
        flex: 0 0 calc(62.5% - 10px);
        scroll-snap-align: start;
    }
    /* Retrato mesmo quando são dois: aqui o cartão é estreito e a fotografia
       deitada ficaria uma tira. */
    .servicos-grelha[data-quantos="2"] .servico-foto,
    .servicos-grelha[data-quantos="1"] .servico-foto { aspect-ratio: 3 / 4; }
    .servicos-grelha[data-quantos="1"] { grid-template-columns: none; }
}

/* --- manifesto (/about) ----------------------------------------------------
   Fundo claro. Era escuro e vinha imediatamente antes do fecho, que também é
   escuro — dois blocos escuros seguidos partiam o ritmo claro/areia da página.

   Sem cartões: eram três painéis de 620px com fotografia, numa página que já
   tem galeria, meia-secção a sangrar e fotografias por trás da cronologia (e as
   três imagens repetiam-se de outras secções). Aqui o que separa as colunas é
   um filete. O número grande faz de âncora visual no lugar da fotografia. */
.manifesto { background: #fff; padding: 110px 0; }
.manifesto .manifesto-head { max-width: 680px; margin-bottom: 58px; }
.manifesto h2 { margin-bottom: 18px; }
.manifesto .manifesto-lede { color: var(--medium-gray); font-size: 17px; line-height: 1.7; margin-bottom: 0; }

/* Uma faixa por princípio, à largura toda. Em três colunas estreitas ficavam
   três parágrafos pequenos com um número por cima — lia-se como rodapé, não
   como declaração. O peso vem da escala do título e do espaço, não de caixas:
   o que separa as faixas é um filete. */
.manifesto-lista { border-top: 1px solid var(--hairline); }
.manifesto-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 0 44px;
    padding: 46px 0;
    border-bottom: 1px solid var(--hairline);
    transition: background-color .45s ease;
}
.manifesto-num {
    grid-column: 1;
    font-family: var(--alt-font);
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: var(--base-color);
    padding-top: .35em;
}
.manifesto-item h3 {
    grid-column: 2;
    margin: 0;
    font-size: 2.3rem;
    line-height: 1.12;
    letter-spacing: -1.4px;
    color: var(--dark-gray);
    transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.manifesto-item p {
    grid-column: 3;
    margin: 0;
    padding-top: .5em;
    font-size: 17px;
    line-height: 1.75;
    color: var(--medium-gray);
}
/* Passar por cima acende a faixa inteira — é a faixa que é a unidade, não uma
   caixa dentro dela. */
@media (hover: hover) {
    .manifesto-item:hover { background-color: var(--cream); }
    .manifesto-item:hover h3 { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .manifesto-item, .manifesto-item h3 { transition: none; }
@media (hover: hover) { .manifesto-item:hover h3 { transform: none; } }
}
@media (max-width: 1199px) {
    .manifesto-item { grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; padding: 38px 0; }
    .manifesto-item h3 { font-size: 1.9rem; }
}
/* Empilhado: o número passa para cima do título, na mesma linha. */
@media (max-width: 767px) {
    .manifesto { padding: 76px 0; }
    .manifesto .manifesto-head { margin-bottom: 40px; }
    .manifesto-item { grid-template-columns: 1fr; gap: 0; padding: 30px 0; }
    .manifesto-num { grid-column: 1; padding-top: 0; margin-bottom: 10px; font-size: 1.25rem; }
    .manifesto-item h3 { grid-column: 1; font-size: 1.6rem; letter-spacing: -.8px; margin-bottom: 12px; }
    .manifesto-item p { grid-column: 1; padding-top: 0; font-size: 16px; }
@media (hover: hover) { .manifesto-item:hover { background-color: transparent; } }
@media (hover: hover) { .manifesto-item:hover h3 { transform: none; } }
}

/* --- mosaico da mesa (/bistro) ---------------------------------------------
   Fotografia inteira, legenda por baixo.

   Era um cartão branco pousado sobre a fotografia. Como em cada fotografia o
   assunto está num sítio diferente — a mesa posta em baixo, a sala ao centro —
   o cartão tinha de mudar de canto para não tapar a comida, e cinco cartões em
   cinco cantos diferentes lêem-se como desalinhamento, não como composição.
   Fora da fotografia o problema deixa de existir: nada fica tapado e as
   legendas alinham-se sozinhas. É também o que a versão de telemóvel já fazia.

   Altura da fotografia em px e não em proporção: a primeira linha tem colunas
   de 7 e 5, e com `aspect-ratio` cada uma ficava com uma altura diferente — as
   duas legendas começavam a alturas diferentes, que é o defeito que se veio
   corrigir. */
.table-mosaic .tm-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.table-mosaic .tm-foto {
    overflow: hidden;
    border-radius: 6px;
    height: 360px;
}
.table-mosaic .tm-panel.is-feature .tm-foto { height: 460px; }
.table-mosaic .tm-foto > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (min-width: 992px) { .table-mosaic .tm-panel:hover .tm-foto > img { transform: scale(1.05); } }
.tm-card { padding: 20px 0 0; }
/* Medida de leitura: na coluna de 7 a linha do parágrafo ia aos 100 caracteres,
   e o olho perde-se a voltar ao início. */
.tm-card p { max-width: 54ch; }
.tm-card .tm-tag {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--base-color);
    margin-bottom: 9px;
}
.tm-card h3 {
    font-family: var(--alt-font);
    font-size: 25px;
    line-height: 31px;
    letter-spacing: -.5px;
    color: var(--dark-gray);
    margin-bottom: 10px;
}
.tm-card .is-feature-title { font-size: 32px; line-height: 39px; }
.tm-card p { font-size: 15px; line-height: 25px; color: var(--medium-gray); margin-bottom: 0; }
@media (min-width: 768px) and (max-width: 991px) {
    .table-mosaic .tm-foto,
    .table-mosaic .tm-panel.is-feature .tm-foto { height: 300px; }
    .tm-card h3, .tm-card .is-feature-title { font-size: 22px; line-height: 28px; }
}
@media (max-width: 575px) {
    .table-mosaic .tm-panel,
    .table-mosaic .tm-panel.is-feature { min-height: 330px; }
    .tm-card p { font-size: 14px; line-height: 23px; }
}

/* --- fotografia larga com cartão sobreposto -------------------------------- */
.wide-photo { position: relative; }
.wide-photo > img { width: 100%; height: 620px; object-fit: cover; display: block; }
.wide-photo .container { position: relative; }
.wide-photo-card {
    background: #fff;
    padding: 48px 45px;
    border-radius: 6px;
    box-shadow: var(--shadow-soft);
    margin-top: -180px;
}
/* Os dois cartões sobem alturas diferentes: é o desencontro que faz o encaixe.
   O da direita entra na fotografia; o do CTA fica pouco abaixo dela, a ocupar
   o vazio branco que sobrava à esquerda. */
.wide-photo-row { padding-bottom: 90px; }
.reserve-card-tuck { margin-top: -60px; }
@media (max-width: 991px) {
    .wide-photo > img { height: 380px; }
    .wide-photo-card { margin-top: -70px; margin-bottom: 60px; padding: 36px 30px; }
}
@media (max-width: 575px) {
    .wide-photo > img { height: 280px; }
    .wide-photo-card { margin-top: -50px; margin-bottom: 45px; padding: 30px 24px; }
}

/* --- avaliações -----------------------------------------------------------
   Nota agregada + marca do Google + link para a fonte à esquerda; citações à
   direita. As citações sozinhas, em cartões iguais, lêem-se como inventadas. */
.rating-block { padding-top: 30px; border-top: 1px solid var(--hairline); }
.rating-score {
    font-family: var(--alt-font);
    font-size: 4.6rem;
    line-height: .85;
    letter-spacing: -3px;
    color: var(--dark-gray);
}
.rating-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 11px 20px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-gray);
    text-decoration: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}
@media (hover: hover) { .rating-link:hover { border-color: rgba(34, 31, 29, .3); box-shadow: var(--shadow-soft); color: var(--dark-gray); } }
.rating-link i { color: var(--medium-gray); }
.google-mark { flex-shrink: 0; }

.review-quote {
    position: relative;
    margin: 0 0 18px;
    padding: 34px 38px 28px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    transition: box-shadow .35s ease, transform .35s ease;
}
.review-quote:last-child { margin-bottom: 0; }
@media (hover: hover) { .review-quote:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); } }
.review-quote::before {
    /* \201C e não o carácter literal: o servidor entrega este ficheiro sem
       charset, e em UTF-8 literal as aspas saíam como "“" no ecrã. */
    content: '\201C';
    position: absolute;
    top: 6px;
    left: 20px;
    font-family: var(--alt-font);
    font-size: 5rem;
    line-height: 1;
    color: var(--base-color);
    opacity: .13;
}
.review-quote blockquote {
    position: relative;
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 30px;
    color: var(--dark-gray);
}
.review-quote figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
}
.review-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--base-color);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-meta { display: flex; flex-direction: column; min-width: 0; }
.review-meta .review-name { font-weight: 600; font-size: 16px; color: var(--dark-gray); }
.review-meta .review-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--medium-gray);
}
.review-quote .review-stars { margin-left: auto; flex-shrink: 0; font-size: 13px; color: var(--base-color); }
@media (max-width: 575px) {
    .review-quote { padding: 28px 24px 24px; }
    .review-quote blockquote { font-size: 16px; line-height: 28px; }
    .review-quote figcaption { flex-wrap: wrap; }
    .review-quote .review-stars { margin-left: 56px; }
    .rating-score { font-size: 3.6rem; letter-spacing: -2px; }
}

/* --- composição de duas fotos --------------------------------------------
   A sobreposição original colidia: duas imagens de proporção livre em
   posição absoluta. Aqui as proporções são fixas, por isso o recorte é
   previsível em qualquer largura. */
.photo-pair { position: relative; padding-bottom: 70px; padding-left: 60px; }
.photo-pair .photo-pair-main {
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-soft);
}
.photo-pair .photo-pair-main img { width: 100%; height: 100%; object-fit: cover; }
.photo-pair .photo-pair-inset {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52%;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow-soft);
}
.photo-pair .photo-pair-inset img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
    .photo-pair { padding-bottom: 50px; padding-left: 40px; }
    .photo-pair .photo-pair-main { aspect-ratio: 4 / 3; }
    .photo-pair .photo-pair-inset { width: 46%; border-width: 6px; }
}

/* --- números / factos ----------------------------------------------------
   Padding explícito em vez dos utilitários: o Crafto redefine `.pt-5` como
   `padding-top: 5% !important` (percentagem da largura, não os 3rem do
   Bootstrap), por isso num ecrã largo abria um vão enorme aqui. */
/* Faixa baixa mas simétrica. Antes tinha 52px em baixo mais 30px do `.fact`,
   que se somavam aos 120px de `section-rhythm` da secção seguinte — 172px de
   branco a seguir aos números. Tirar só o de baixo desequilibrava: o vão em
   cima e em baixo tem de ser igual ou os números lêem-se descaídos.
   O ar entre esta faixa e o que vem a seguir é dado pela secção seguinte. */
.fact-band { padding: 20px 0; }
@media (max-width: 767px) { .fact-band { padding: 14px 0; } }

.fact-row { display: flex; flex-wrap: wrap; gap: 0; }
.fact-row .fact {
    flex: 1 1 0;
    min-width: 150px;
    padding: 22px 20px;
    text-align: center;
    border-right: 1px solid var(--hairline);
}
.fact-row .fact:last-child { border-right: 0; }
/* Sans, não serif: na Rufina o algarismo 1 desenha-se quase como um I, e
   "100" lia-se "IOO". Nos anos da cronologia o contexto resolve; aqui o
   número é a mensagem e não pode ficar ambíguo. */
.fact-row .fact-value {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 2.9rem;
    line-height: 1;
    color: var(--dark-gray);
    letter-spacing: -1.5px;
    display: block;
}
.fact-row .fact-label {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--medium-gray);
}
@media (max-width: 767px) {
    /* Em duas colunas há filete entre as linhas: sem vão em baixo ficava colado
       à legenda. Na última linha não há filete nenhum — uma risca encostada à
       secção seguinte não separa nada, só suja. */
    .fact-row .fact { flex: 0 0 50%; min-width: 0; border-bottom: 1px solid var(--hairline); }
    .fact-row .fact:nth-child(2n) { border-right: 0; }
    .fact-row .fact:nth-last-child(-n+2) { border-bottom: 0; }
    .fact-row .fact-value { font-size: 2rem; }
    /* A faixa é um apontamento por baixo do banner, não uma secção: em 2x2 com
       o espaçamento do desktop ficava tão alta como a fotografia. O que a
       encolhe sem apertar é o padding e a legenda numa linha só — a 12px com
       1.5px de entreletra, "HECTARES DE MONTADO" partia em duas. */
    .fact-band { padding: 8px 0; }
    .fact-row .fact { padding: 15px 8px; }
    .fact-row .fact-label { margin-top: 7px; font-size: 10.5px; letter-spacing: .8px; }
}

/* --- meia-secção com imagem a sangrar --------------------------------------
   Usada no /about para não repetir o par de fotos sobrepostas da homepage: a
   imagem encosta à borda do ecrã e o texto fica numa coluna estreita ao lado. */
.bleed-media { position: relative; min-height: 640px; }
.bleed-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* O texto centra-se dentro da própria coluna. Centrar a linha inteira deixava
   a foto presa no min-height, com vão por cima e por baixo. */
.bleed-texto { display: flex; align-items: center; }
.bleed-copy { max-width: 560px; padding: 70px 15px 70px 70px; }
.bleed-split.reverse .bleed-copy { margin-left: auto; padding: 70px 70px 70px 15px; }
@media (max-width: 991px) {
    .bleed-media { min-height: 420px; }
    .bleed-copy,
    .bleed-split.reverse .bleed-copy { max-width: none; padding: 55px 15px; }
}
@media (max-width: 575px) { .bleed-media { min-height: 320px; } }

/* --- cronologia vertical (só /about) ---------------------------------------
   A home mostra a faixa horizontal — o resumo. Aqui cabe a história com um
   parágrafo por marco, que é o que justifica existir uma página "Sobre". */
/* Vão da secção mais curto do que o `section-rhythm` normal (120px): esta
   secção é alta por natureza e não precisava de mais ar em cima e em baixo. */
.cronologia-seccao { position: relative; padding-top: 84px; padding-bottom: 84px; overflow: hidden; }
/* Duas fotografias a entrar de lado pelas margens, inclinadas. Estão a 18% e
   não a 7%: à primeira tentativa, cobrindo a secção toda e muito desfocadas,
   não se via nada — a esse ponto mais valia não as ter.

   Aqui é o contrário: leem-se como fotografias tortas espreitando pela margem.
   O que as impede de competir com o texto é a máscara, que as apaga em
   direcção ao centro (onde o texto está) e nos topos. O `overflow: hidden` da
   secção corta o que sai para fora. */
.cronologia-fundo {
    position: absolute;
    top: 6%;
    height: 82%;
    width: 30%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    opacity: .38;
    pointer-events: none;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
/* Recuadas para fora do `container`: o texto da esquerda é alinhado à direita
   mas começa no bordo, por isso o que ficasse dentro da caixa passava-lhe por
   trás. O degradê apaga-as cedo, ainda antes de chegarem ao texto. */
.cronologia-fundo.is-esq {
    left: -11%;
    transform: rotate(-7deg);
    -webkit-mask-image: linear-gradient(to right, #000 8%, transparent 78%), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(to right, #000 8%, transparent 78%), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.cronologia-fundo.is-dir {
    right: -8%;
    transform: rotate(6deg);
    -webkit-mask-image: linear-gradient(to left, #000 8%, transparent 78%), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(to left, #000 8%, transparent 78%), linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
/* Em ecrã estreito o texto ocupa a largura toda: as fotografias passariam por
   baixo dele. Ficam mais discretas e mais para fora. */
@media (max-width: 991px) {
    .cronologia-fundo { width: 40%; opacity: .1; }
    .cronologia-fundo.is-esq { left: -24%; }
    .cronologia-fundo.is-dir { right: -22%; }
}
.cronologia-seccao > .container { position: relative; z-index: 1; }

/* Margem curta e medida larga: o título cabe numa linha e o primeiro marco cai
   logo a seguir e à direita, na diagonal dele. */
.cronologia-cabeca { max-width: 860px; margin-bottom: 22px; }
.cronologia-cabeca h2 { margin-bottom: 16px; }
.cronologia-lede { font-size: 17px; line-height: 1.6; color: var(--medium-gray); margin: 0; max-width: 56ch; }
/* Só a partir daqui é que "Oitenta anos na mesma família." cabe numa linha —
   abaixo disto deixa-se partir, que é melhor do que encolher a letra. */
@media (min-width: 1200px) { .cronologia-cabeca h2 { white-space: nowrap; } }

.cronologia { position: relative; }

/* O SVG cobre a largura toda e o viewBox é 0..100, por isso x=68 no caminho cai
   exactamente em `left: 68%` — que é onde o ícone é posto. É a única coisa que
   os mantém em cima um do outro. */
.cronologia-linha {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
/* Duas cópias do mesmo caminho: a cinzenta fica sempre visível, a bordô é a que
   enche ao rolar (revelada pelo rectângulo de corte — ver a view). */
.cronologia-linha path { fill: none; stroke-width: 1.5; }
.cr-trilho { stroke: rgba(34, 31, 29, .18); }
.cr-progresso { stroke: var(--base-color); }

/* Linhas todas da mesma altura (`1fr`): é isto que põe os centros dos itens nas
   mesmas fracções que os nós do caminho. */
.cronologia-itens {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-rows: 1fr;
}
/* O nó cai a meio da linha da grelha. Para o ícone ficar à altura do TÍTULO e
   não do meio do parágrafo, o parágrafo sai do fluxo e passa a pendurar por
   baixo (ver `.cr-corpo p`): assim o que se centra no nó é o título.

   Antes a ligação apontava para o meio do texto, e como os marcos alternam de
   lado, o parágrafo de um ficava mais perto do ícone do seguinte — dava a
   entender que era esse o texto daquele ícone.

   Com o parágrafo fora do fluxo a linha deixaria de ter altura, daí o
   `min-height`: é ele que fixa a distância entre marcos (e a altura da secção). */
.cr-item { position: static; display: flex; align-items: center; min-height: 168px; }
/* O texto cai do lado contrário ao nó, que é o lado que tem espaço, e encosta ao
   traço — alinhado a contar do lado por onde chega a ligação. */
/* 60% de vão e não 54%: com as curvas mais abertas o traço chega aos 41% da
   largura dentro da faixa de dois marcos, e a 46% o texto era atravessado pela
   linha. Medido — ver a verificação da folga no fim deste bloco. */
.cr-item.is-esquerda { justify-content: flex-start; padding-right: 55%; text-align: right; }
.cr-item.is-direita  { justify-content: flex-end;  padding-left: 55%; }

/* Ícone e ligação posicionam-se contra a lista inteira (não contra o item), por
   isso `--x` e `--y` são percentagens do todo — os mesmos números do caminho. */
.cr-marca,
.cr-ligacao { position: absolute; top: var(--y); }
.cr-marca {
    left: var(--x);
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: var(--sand);
    border: 1.5px solid rgba(34, 31, 29, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--base-color);
    transition: background-color .4s ease, border-color .4s ease, color .4s ease, transform .4s ease;
    z-index: 1;
}
.cr-marca i, .cr-marca .icone { font-size: 25px; line-height: 1; }
/* Fio do nó até ao texto: sem ele ficavam duas coisas soltas na mesma linha. */
.cr-ligacao { height: 1px; margin-top: -.5px; background: rgba(34, 31, 29, .14); transition: background-color .4s ease; }
.cr-corpo { position: relative; width: 100%; }
.cr-corpo p { position: absolute; top: calc(100% + 4px); left: 0; right: 0; }
/* Arranca 2% para lá do bordo do texto: o texto da esquerda é alinhado à
   direita, acaba exactamente no limite da caixa, e a linha encostava-lhe à
   última letra. */
.cr-item.is-esquerda .cr-ligacao { left: 47%; right: calc(100% - var(--x)); }
.cr-item.is-direita  .cr-ligacao { left: var(--x); right: 47%; }

/* Ano e título ao centro um do outro, e não pela linha de base: partilhando a
   linha de base, a caixa fica com a altura do ano (que é maior) e o título
   assentava 4px abaixo do meio — a ligação chegava-lhe acima do centro das
   letras. Ao centro, o meio do título é o meio da caixa, que é onde está o nó.
   Sem número mágico: corrige-se sozinho se as medidas mudarem. */
.cr-cabeca { display: flex; align-items: center; gap: 13px; }
.cr-item.is-esquerda .cr-cabeca { justify-content: flex-end; }
.cr-ano {
    flex: 0 0 auto;
    font-family: var(--alt-font);
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--base-color);
}
.cr-titulo {
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -.3px;
    color: var(--dark-gray);
}
.cr-item p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--medium-gray); }
.cr-corpo { transition: transform .4s ease; }

/* Só com rato **e** em ecrã largo. O `hover: hover` sozinho não chega: há
   telemóveis e emuladores que se dizem capazes de hover, e aí o ícone ficava
   aceso a bordô depois do toque, como se houvesse ali um link. */
@media (hover: hover) and (min-width: 992px) {
    .cr-item:hover .cr-marca {
        background: var(--base-color);
        border-color: var(--base-color);
        color: #fff;
        transform: scale(1.08);
    }
    .cr-item:hover .cr-ligacao { background: rgba(127, 37, 41, .45); }
    .cr-item.is-direita:hover  .cr-corpo { transform: translateX(5px); }
    .cr-item.is-esquerda:hover .cr-corpo { transform: translateX(-5px); }
}
@media (prefers-reduced-motion: reduce) {
    .cr-marca, .cr-corpo, .cr-ligacao { transition: none; }
    .cr-item:hover .cr-marca, .cr-item:hover .cr-corpo { transform: none; }
}

/* Coluna estreita: a serpentina não tem por onde varrer e o texto não pode
   alternar sem ficar aos bocados. Volta a ser um fio recto com os ícones em
   cima, tudo do mesmo lado. */
/* Abaixo dos 1400 a coluna é mais estreita, o parágrafo ocupa mais uma linha
   e chegava mais abaixo — a curva, que aí já vai a caminho do nó seguinte,
   apanhava-o. Mais altura por marco afasta os dois. */
@media (min-width: 992px) and (max-width: 1399px) {
    .cr-item { min-height: 218px; }
}
@media (max-width: 991px) {
    .cronologia-cabeca { margin-bottom: 42px; }
    .cronologia-linha, .cr-ligacao { display: none; }
    .cronologia-itens { display: block; }
    .cr-item,
    .cr-item.is-esquerda,
    .cr-item.is-direita {
        position: relative;
        display: block;
        text-align: left;
        padding: 0 0 38px 66px;
    }
    .cr-item:last-child { padding-bottom: 0; }
    .cr-item::before {
        content: '';
        position: absolute;
        left: 22px;
        top: 46px;
        bottom: -8px;
        width: 1.5px;
        background: rgba(34, 31, 29, .18);
    }
    .cr-item:last-child::before { display: none; }
    /* O traço enche-se a rolar, como a serpentina do desktop e com o mesmo
       valor (`--cr-p`, posto pelo script da view). Aqui a linha é feita de um
       segmento por marco: cada um enche entre 0 e 1 conforme o progresso total
       passa pela sua fatia — daí o `* --n - --i`. Sem JavaScript `--cr-p` não
       existe, o fallback é 1 e vê-se a linha inteira, como no desktop. */
    .cr-item::after {
        content: '';
        position: absolute;
        left: 22px;
        top: 46px;
        bottom: -8px;
        width: 1.5px;
        background: var(--base-color);
        transform: scaleY(clamp(0, var(--cr-p, 1) * var(--n) - var(--i), 1));
        transform-origin: top center;
    }
    .cr-item:last-child::after { display: none; }
    .cr-marca { top: 0; left: 0; margin: 0; width: 44px; height: 44px; }
    /* A marca enche-se quando o traço lhe chega — o mesmo que o rato faz no
       desktop, mas comandado pelo scroll. `--aceso` usa o cálculo do
       preenchimento do segmento anterior: 0 antes de a linha chegar, 1 depois.
       A transição de .4s que a `.cr-marca` já tem suaviza a passagem.
       `@supports` porque sem `color-mix` a declaração ficaria inválida e a
       marca saía sem fundo — assim fica simplesmente como está hoje. */
    @supports (background: color-mix(in srgb, red 50%, blue)) {
        .cr-item { --aceso: clamp(0, calc((var(--cr-p, 1) * var(--n) - var(--i)) * 8), 1); }
        .cr-marca {
            background: color-mix(in srgb, var(--base-color) calc(var(--aceso) * 100%), var(--sand));
            border-color: color-mix(in srgb, var(--base-color) calc(var(--aceso) * 100%), rgba(34, 31, 29, .18));
            color: color-mix(in srgb, #fff calc(var(--aceso) * 100%), var(--base-color));
        }
    }
    .cr-marca i, .cr-marca .icone { font-size: 20px; }
    .cr-cabeca { display: block; margin-bottom: 8px; }
    .cr-ano { display: block; font-size: 1.6rem; margin-bottom: 4px; }
    /* Sem serpentina não há nó a alinhar: o parágrafo volta ao fluxo normal. */
    .cr-corpo p { position: static; }
    .cr-item { min-height: 0; }
}
@media (max-width: 575px) {
    .cr-item,
    .cr-item.is-esquerda,
    .cr-item.is-direita { padding-left: 54px; }
    .cr-item::before,
    .cr-item::after { left: 18px; top: 40px; }
    .cr-marca { width: 38px; height: 38px; }
    .cr-marca i, .cr-marca .icone { font-size: 17px; }
}

/* --- barra de disponibilidade ----------------------------------------------
   Sobe sobre o banner: é a primeira acção da página, não uma secção a seguir. */
/* padding: 0 — sendo um <section>, apanhava os 110px que o tema dá a todas as
   secções e abria um vão morto por baixo da pílula. */
/* --- faixa de reserva ------------------------------------------------------
   A barra flutuava sozinha no branco, sem pertencer a nada. Numa faixa bege
   ganha lugar próprio, e passa a branco por cima — o que se clica é o elemento
   mais claro da faixa, e não mais uma superfície bege entre superfícies beges. */
/* Fundo igual ao das secções normais: a faixa inteira em bege cortava a página
   ao meio e obrigava a pílula a ser branca para se ver. Invertido, o bloco deixa
   de ser uma barra estranha e a pílula é que ganha a cor. */
.faixa-reserva { position: relative; z-index: 3; background: #fff; padding: 52px 0 26px; }
.faixa-reserva + section.section-rhythm { padding-top: 90px; padding-bottom: 90px; }

.faixa-titulo { max-width: 620px; margin: 0 auto 28px; text-align: center; }
.faixa-titulo h2 { font-size: 32px; line-height: 40px; margin-bottom: 10px; }
.resumo-estadia { margin: 0; font-size: 15px; color: var(--medium-gray); }

/* Quatro dados, todos verificáveis. Diz o que é a herdade sem um parágrafo. */
.faixa-provas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 32px;
    margin: 26px 0 0;
    padding: 0;
}
.faixa-provas li { position: relative; font-size: 13px; letter-spacing: .4px; color: var(--medium-gray); }
.faixa-provas li + li::before {
    content: '';
    position: absolute;
    left: -17px; top: 50%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--base-color);
    opacity: .45;
    transform: translateY(-50%);
}
@media (max-width: 767px) {
    .faixa-reserva { padding: 38px 0 22px; }
    .faixa-titulo h2 { font-size: 25px; line-height: 33px; }
    .faixa-provas { gap: 8px 22px; }
    .faixa-provas li { font-size: 12px; }
    .faixa-provas li + li::before { left: -12px; }
}
/* Pílula segmentada: dois campos em vez de quatro, e a escolha das datas faz-se
   num só gesto. Sem campos sublinhados em linha nem calendário do sistema. */
.stay-bar {
    position: relative;
    display: flex;
    align-items: center;
    /* Bege sobre o branco da página, com filete: destaca-se do fundo sem
       precisar de uma faixa colorida à volta. */
    background: var(--sand);
    border: 1px solid var(--hairline);
    border-radius: 100px;
    box-shadow: 0 14px 34px -24px rgba(34, 31, 29, .3);
    padding: 8px 14px 8px 8px;
    margin-top: 0;
}
/* A margem lateral é o que impede o fundo do hover de encostar ao filete
   do meio — sem ela os dois tocavam-se. */
.stay-seg {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 5px;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 100px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background-color .25s ease;
}
/* Pílula bege: o segmento activo levanta-se em branco, em vez de escurecer.
   Ler-se como um campo que se acende é mais claro do que uma mancha bege sobre
   bege, que era o que fazia antes. */
.stay-seg.is-active { background: #fff; box-shadow: 0 2px 10px -4px rgba(34, 31, 29, .28); }
/* Toda a barra: hover só com rato **e** em ecrã largo. Só `hover: hover`
   deixava passar telemóveis e emuladores que se dizem capazes de hover, e aí
   o campo ficava branco e o botão escuro depois do toque, sem voltar atrás. */
@media (hover: hover) and (min-width: 992px) { .stay-seg:hover { background: #fff; box-shadow: 0 2px 10px -4px rgba(34, 31, 29, .28); } }
.stay-seg.is-active .stay-icone { color: var(--base-color); }
@media (hover: hover) and (min-width: 992px) { .stay-seg:hover .stay-icone { color: var(--base-color); } }
.stay-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--medium-gray);
    margin-bottom: 4px;
}
.stay-value {
    display: block;
    font-family: var(--alt-font);
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: var(--dark-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* O ícone diz de que campo se trata antes de se ler a etiqueta. */
.stay-icone { flex: 0 0 auto; font-size: 19px; line-height: 1; color: var(--medium-gray); transition: color .25s ease; }
.stay-texto { min-width: 0; }
.stay-sub { display: block; font-size: 11px; color: var(--medium-gray); margin-top: 2px; }
/* Sem datas escolhidas: o texto é um convite, não um valor. */
.stay-value.is-vazio { color: var(--medium-gray); }
.stay-div { flex: 0 0 1px; align-self: stretch; margin: 16px 0; background: var(--hairline); }
.stay-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 100px;
    background: var(--base-color);
    color: #fff;
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 600;
    padding: 15px 28px;
    margin-left: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .3s ease;
}
.stay-go i { font-size: 11px; transition: transform .3s ease; }
@media (hover: hover) and (min-width: 992px) { .stay-go:hover { background: #6a1f22; } }
@media (hover: hover) and (min-width: 992px) { .stay-go:hover i { transform: translateX(3px); } }

/* painéis */
.stay-panel {
    position: absolute;
    top: calc(100% + 14px);
    z-index: 30;
    display: none;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 28px 60px -24px rgba(34, 31, 29, .45);
    border: 1px solid var(--hairline);
    padding: 26px 28px 22px;
}
.stay-panel.is-open { display: block; }
.stay-panel-datas { left: 0; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.stay-panel-quem { left: 34%; min-width: 340px; }

/* calendário */
.stay-panel-datas { position: absolute; }
.cal-seta {
    position: absolute;
    top: 24px;
    z-index: 1;
    width: 34px; height: 34px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: #fff;
    color: var(--dark-gray);
    cursor: pointer;
    font-size: 12px;
    transition: border-color .25s ease, color .25s ease;
}
@media (hover: hover) and (min-width: 992px) { .cal-seta:hover:not(:disabled) { border-color: var(--base-color); color: var(--base-color); } }
.cal-seta:disabled { opacity: .3; cursor: default; }
.cal-seta-ant { left: 24px; }
.cal-seta-seg { right: 24px; }
.cal-months { display: flex; gap: 34px; }
.cal-month { width: 266px; }
.cal-mes-nome {
    font-family: var(--alt-font);
    font-size: 15px;
    color: var(--dark-gray);
    text-align: center;
    margin-bottom: 12px;
    text-transform: capitalize;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--medium-gray);
    text-align: center;
    padding-bottom: 8px;
}
.cal-dia {
    aspect-ratio: 1;
    border: 0;
    background: transparent;
    border-radius: 50%;
    font-family: var(--primary-font);
    font-size: 14px;
    color: var(--dark-gray);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
@media (hover: hover) and (min-width: 992px) { .cal-dia:hover:not(:disabled):not(.is-inicio):not(.is-fim) { background: var(--sand); } }
.cal-dia.is-off, .cal-dia:disabled { color: rgba(34, 31, 29, .22); cursor: default; }
.cal-dia.is-entre,
.cal-dia.is-entre-espreita { background: var(--sand); border-radius: 0; }
.cal-dia.is-inicio, .cal-dia.is-fim { background: var(--base-color); color: #fff; }
/* Fim provisório, enquanto o rato percorre o calendário: bordeaux mais claro,
   para se distinguir do dia já confirmado. */
.cal-dia.is-fim-espreita { background: rgba(127, 37, 41, .55); color: #fff; }

.cal-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 16px;
}
.cal-nota { font-size: 12px; color: var(--medium-gray); margin: 0; }
.cal-reset {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--base-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.cal-reset[hidden] { display: none; }

/* hóspedes */
.quem-linha { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 14px 0; }
.quem-linha + .quem-linha { border-top: 1px solid var(--hairline); }
.quem-titulo { display: block; font-size: 16px; font-weight: 600; color: var(--dark-gray); }
.quem-nota { display: block; font-size: 12px; color: var(--medium-gray); margin-top: 2px; }
.quem-passos { display: flex; align-items: center; gap: 14px; }
.quem-passos button {
    width: 34px; height: 34px;
    border: 1px solid rgba(34, 31, 29, .25);
    border-radius: 50%;
    background: #fff;
    color: var(--dark-gray);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease;
}
@media (hover: hover) and (min-width: 992px) { .quem-passos button:hover:not(:disabled) { border-color: var(--base-color); color: var(--base-color); } }
.quem-passos button:disabled { opacity: .3; cursor: default; }
.quem-passos span { min-width: 18px; text-align: center; font-size: 16px; color: var(--dark-gray); }

/* Em telemóvel a pílula era uma coluna de três blocos altos: 258px, quase
   metade do ecrã, para dois campos e um botão. Passa a duas colunas lado a lado
   com o botão por baixo — o mesmo conteúdo em pouco mais de 100px.

   Os valores deixam a serifa grande e passam a corpo de interface: em 18px
   serifa, "Check-in — Check-out" não cabia em meia largura. */
@media (max-width: 991px) {
    .stay-bar {
        display: grid;
        grid-template-columns: 1fr 1px 1fr;
        align-items: stretch;
        gap: 0;
        border-radius: 16px;
        padding: 6px;
        margin-top: 0;
    }
    .stay-seg { grid-row: 1; padding: 12px 14px; margin: 0; gap: 10px; border-radius: 12px; }
    .stay-icone { font-size: 16px; }
    .stay-label { font-size: 9px; letter-spacing: 1.4px; margin-bottom: 2px; }
    .stay-value { font-family: var(--primary-font); font-size: 14px; font-weight: 600; letter-spacing: 0; }
    .stay-div { grid-row: 1; align-self: center; width: 1px; height: 34px; margin: 0; }
    /* O botão ocupa as três colunas da grelha, por baixo dos campos. */
    .stay-go { grid-column: 1 / -1; grid-row: 2; margin: 6px 0 0; padding: 13px 20px; justify-content: center; font-size: 14px; }
    .stay-panel { left: 6px !important; right: 6px; min-width: 0; padding: 20px 18px 16px; }
    .cal-months { gap: 0; }
    .cal-month + .cal-month { display: none; }   /* um mês só em ecrã pequeno */
    .cal-month { width: 100%; }
    /* A faixa à volta também apertava: 412px para uma barra de 258. */
    .faixa-reserva { padding: 26px 0 18px; }
    .faixa-provas { gap: 6px 18px; margin-top: 18px; }
}
/* Com o ecrã mais estreito, "Check-in — Check-out" ainda não cabe: fica só a
   palavra que interessa até haver datas escolhidas. */
@media (max-width: 400px) {
    .stay-seg { padding: 11px 11px; gap: 8px; }
    .stay-value { font-size: 13px; }
}

/* --- cartão de reserva (/bistro) -------------------------------------------
   Fecho contido, com a fotografia como imagem e não como fundo escurecido: aqui
   a tábua vê-se inteira, com as cores dela, em vez de servir de textura por
   baixo de um véu preto. As outras páginas fecham em faixa de largura total. */
.reserve-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.reserve-card .reserve-media { flex: 0 0 42%; position: relative; min-height: 300px; }
.reserve-card .reserve-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reserve-card .reserve-body {
    flex: 1 1 auto;
    padding: 60px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.reserve-card h3 {
    font-family: var(--alt-font);
    font-weight: 400;
    font-size: 34px;
    line-height: 44px;
    letter-spacing: -1px;
    color: var(--dark-gray);
    margin: 18px 0 16px;
}
.reserve-card p {
    color: var(--medium-gray);
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 32px;
}
.reserve-card .btn { align-self: flex-start; }
@media (max-width: 991px) {
    .reserve-card { flex-direction: column; }
    .reserve-card .reserve-media { flex: none; min-height: 260px; }
    .reserve-card .reserve-body { padding: 42px 32px 45px; }
    .reserve-card h3 { font-size: 28px; line-height: 37px; }
}
@media (max-width: 575px) {
    .reserve-card .reserve-body { padding: 34px 24px 38px; }
    .reserve-card h3 { font-size: 25px; line-height: 33px; }
}

/* --- banda de fecho / chamada final --------------------------------------- */
.cta-band { position: relative; background-size: cover; background-position: center; padding: 130px 0; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2, .cta-band h3 { color: #fff; font-family: var(--alt-font); font-weight: 400; letter-spacing: -1px; }
.cta-band p { color: rgba(255, 255, 255, .82); }
@media (max-width: 767px) { .cta-band { padding: 90px 0; } }

/* --- a escolha da barra comanda a lista (/rooms) --------------------------- */
.resumo-estadia {
    margin: 0;
    padding: 22px 0 0;
    font-size: 14px;
    color: var(--medium-gray);
    text-align: center;
}
/* Assinalado, não escondido: fazer desaparecer alojamentos deixaria a página a
   encolher sem o visitante perceber porquê. */
.room-card-row.is-pequeno { opacity: .48; }
@media (hover: hover) { .room-card-row.is-pequeno:hover { opacity: 1; } }
.aviso-lotacao {
    display: inline-block;
    margin-bottom: 15px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(127, 37, 41, .09);
    color: var(--base-color);
    font-size: 12px;
    font-weight: 600;
}
.aviso-lotacao[hidden] { display: none; }

/* O título da /room-details passou de <h3> a <h1> — a página não tinha nenhum.
   Mantém o tamanho do h3 para o aspecto não mudar; o que muda é a semântica. */
.rd-titulo { font-size: 2.813rem; line-height: 2.9rem; }
@media (max-width: 767px) { .rd-titulo { font-size: 2rem; line-height: 2.4rem; } }

/* --- ficha de alojamento ---------------------------------------------------
   Leitura de cima para baixo: o que é (tipo), como se chama, o que tem de bom,
   e só depois os números. Antes as pílulas entravam entre o tipo e o nome e
   empurravam o título para o meio do cartão.

   Dois blocos de informação, dois desenhos diferentes de propósito: os factos
   são uma linha de ícones, as comodidades uma lista com visto. Quando os dois
   eram pílulas, ficavam duas filas iguais a competir e o olho não sabia qual
   das duas era a importante.

   Padding em px e não com os utilitários do Crafto: `p-8` e `pt-11` são
   percentagens da largura (ver CLAUDE.md) e num cartão de altura fixa o vão
   crescia com o ecrã até o conteúdo não caber. */
.room-card-info-col { display: flex; flex-direction: column; background: var(--cream); }
.room-info-body { flex: 1 1 auto; padding: 34px 32px 0; min-height: 0; }
.room-info-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 32px 20px;
    border-top: 1px solid var(--hairline);
}
.room-nome { margin: 7px 0 13px; }
.room-texto { font-size: 16px; line-height: 1.62; color: var(--medium-gray); margin: 0 0 20px; }

/* factos: o que decide a escolha. Linha única, sem caixa. */
.room-factos {
    list-style: none;
    margin: 0 0 18px;
    padding: 17px 0 0;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}
.room-factos li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.room-factos li:first-child { font-weight: 600; }
.room-factos i { font-size: 15px; color: var(--base-color); }

/* comodidades: lista, não etiquetas. Duas colunas para caberem sem crescer. */
.room-extras {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 18px;
}
.room-extras li {
    position: relative;
    padding-left: 19px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--medium-gray);
}
.room-extras li::before {
    content: '';
    position: absolute;
    left: 1px;
    top: .72em;
    width: 9px;
    height: 5px;
    border-left: 1.5px solid var(--base-color);
    border-bottom: 1.5px solid var(--base-color);
    transform: translateY(-50%) rotate(-45deg);
}

/* Altura fixa a partir do desktop: as fotografias alinham de cartão para
   cartão e a coluna deixa de crescer com o número de comodidades. Abaixo
   disto a coluna empilha e a altura volta a ser a do conteúdo. */
@media (min-width: 992px) {
    /* 560px é a medida do cartão mais cheio (a Casa T1, com cinco factos e a
       lista mais longa). Menos do que isto e a coluna crescia para lá do
       cartão — o `align-items: stretch` do Bootstrap estica até à altura da
       linha mas deixa passar o que for maior, e o botão saía por baixo. */
    .room-card-row { height: 630px; }
    /* O slider estica por flex e não por `height: 100%`: quando o cartão abre,
       a linha passa a altura automática, o 100% deixa de ter contra o que
       resolver e a coluna da fotografia ficava a zero — cartão aberto com
       metade branca.

       Aqui não serve `position: absolute` + `inset: 0`, que era o reflexo:
       o tema tem `.swiper-button-next { left: inherit }`, por isso a seta
       herdava o `left: 0` do inset e ia parar em cima da seta esquerda. */
    .room-card-slider-col { display: flex; }
    .room-card-slider-col .swiper { flex: 1 1 auto; min-width: 0; }
    .room-card-slider-col .swiper-slide { height: 100%; }
    /* Altura explícita e não só `stretch`: obriga o corpo a encolher em vez de
       empurrar o rodapé. Se um dia o cliente escrever de mais, corta-se em
       baixo — o botão fica onde está. */
    .room-card-info-col { height: 100%; }
    .room-info-body { padding: 44px 46px 0; overflow: hidden; }
    .room-info-footer { flex: 0 0 auto; padding: 14px 46px 20px; }
    /* Rede de segurança, não corte de conteúdo: a altura fixa está medida para
       caber o alojamento mais cheio por inteiro. Este limite só existe para o
       dia em que alguém escrever um texto muito maior — e aí prefere-se cortar
       o parágrafo a rebentar o cartão. */
    .room-texto {
        display: -webkit-box;
        -webkit-line-clamp: 9;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* Entre 992 e 1199 a coluna da direita é bem mais estreita: os mesmos factos e
   as mesmas comodidades ocupam mais linhas e não cabiam nos 560px — o corte
   era limpo mas escondia texto sem avisar. Aqui o cartão é mais alto. */
/* Entre 992 e 1199 a coluna do texto fica estreita de mais: as comodidades
   partem quase todas em duas linhas e o cartão da Casa T1 precisava de 704px
   contra os 630 dos outros. Em vez de esticar a altura para o pior caso —
   ou de esconder metade da lista atrás de um botão — dá-se mais largura ao
   texto. Menos quebras, e o cartão volta à mesma altura dos outros. */
@media (min-width: 992px) and (max-width: 1199px) {
    .room-card-row { height: 630px; }
    .room-card-slider-col { flex: 0 0 50%; max-width: 50%; }
    .room-card-info-col { flex: 0 0 50%; max-width: 50%; }
    .room-info-body { padding: 36px 34px 0; }
    .room-info-footer { padding: 14px 34px 20px; }
}
/* Numa coluna só, sete comodidades eram sete linhas e um cartão comprido; em
   duas colunas fixas, "Casa de banho privativa" partia em duas e ficava um
   degrau ao lado de "TV". A lista flui: cada uma ocupa o que precisa e as
   curtas partilham a linha. */
@media (max-width: 575px) {
    .room-extras {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: none;
        gap: 8px 20px;
    }
}
/* --- horários (/rooms) -----------------------------------------------------
   Linha de informação e não cartão: com a pílula de pesquisa logo acima, um
   segundo cartão com o mesmo botão eram duas barras a competir. */
.horarios {
    list-style: none;
    margin: 26px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 46px;
}
.horarios li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    color: var(--medium-gray);
}
.horarios i { font-size: 15px; color: var(--base-color); }
.horarios strong { font-weight: 600; color: var(--dark-gray); }
@media (max-width: 575px) { .horarios { gap: 12px 24px; font-size: 14px; } }

/* --- barra de separadores (/amenities) -------------------------------------
   O tema dá 30px de vão em cima e em baixo a cada separador — quase 90px de
   fita só para quatro palavras. Metade chega e a barra passa a ler-se como uma
   régua fina a fechar a secção. O selector tem de repetir `.tab-style-08 ul`
   porque a regra do tema é `.tab-style-08 ul .nav-item .nav-link` e uma classe
   isolada perde na cascata. */
.barra-separadores .tab-style-08 ul.amenities-tab-nav .nav-item .nav-link {
    padding: 16px 15px;
    font-size: 16px;
    letter-spacing: .2px;
}

/* --- ficha ao lado da fotografia (/amenities, separadores) ------------------
   O que desarrumava a coluna era o bordo direito: o título ia até 95% da
   largura, o parágrafo até 85% e a lista até 90%. Três medidas empilhadas
   liam-se como desalinhamento. Aqui é uma medida só, e o ritmo vertical passa
   a crescer — pouco espaço onde as peças se pertencem (sobrescrito e título),
   mais espaço onde muda de assunto (texto e lista).

   Entrelinha a 1,5: os 1,67 do tema espalhavam cinco linhas por um bloco alto
   de mais para a coluna estreita ao lado da fotografia. */
/* A coluna estica à altura da fotografia mesmo com `align-items-center` na
   linha. Com o texto mais curto, ficava encostado ao topo e sobrava um vão
   morto em baixo — centra-se aqui dentro. */
.amenities-tab-text-col { display: flex; align-items: center; }
.ficha-coudelaria { width: 100%; }
.ficha-coudelaria .eyebrow { margin-bottom: 13px; }
.ficha-titulo {
    margin: 0 0 16px;
    font-size: 2rem;
    line-height: 1.16;
    letter-spacing: -.8px;
}
.ficha-texto {
    margin: 0 0 26px;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--medium-gray);
}
.ficha-pontos { list-style: none; margin: 0; padding: 0; }
.ficha-pontos li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    font-size: 15.5px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--ink);
    border-top: 1px solid var(--hairline);
}
.ficha-pontos li:last-child { padding-bottom: 0; }
/* Visto alinhado com a primeira linha e não ao centro do bloco: quando o ponto
   passa a duas linhas, um visto a meio da altura parece solto. */
.ficha-pontos i {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--base-color);
    color: #fff;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 991px) {
    .ficha-titulo { font-size: 1.75rem; }
}
@media (max-width: 575px) {
    .ficha-titulo { font-size: 1.5rem; }
    .ficha-texto { font-size: 16px; }
}

/* --- galeria com legenda (/about e /amenities) ------------------------------------
   Quatro fotografias sem legenda nenhuma eram bonitas e mudas. Ficam alinhadas
   (degraus já foram tentados aqui e leram-se como avaria) e ganham vida por
   três coisas que não mexem no alinhamento: a legenda que diz o que é, a
   sobrelinha que lhes dá ordem, e a aproximação lenta ao passar por cima.

   A legenda está sempre visível e não só no hover — em ecrã táctil não há
   hover, e uma legenda que só metade das pessoas vê não serve de nada.

   Markup em `partials/galeria.blade.php`, usada na /about e na /amenities. */
.galeria {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.galeria-item {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background: var(--sand);
}
.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s cubic-bezier(.2, .6, .2, 1);
}
/* Véu só no fundo: escurecer a fotografia toda para pousar quatro palavras
   estraga a fotografia, que é o que se veio ver. */
.galeria-item::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    background: linear-gradient(to top, rgba(24, 21, 19, .78), rgba(24, 21, 19, 0));
    transition: opacity .5s ease;
    opacity: .92;
}
.galeria-item figcaption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    z-index: 1;
    color: #fff;
    transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.galeria-quando {
    display: block;
    margin-bottom: 5px;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.galeria-legenda {
    display: block;
    font-family: var(--alt-font);
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.3px;
}
@media (hover: hover) {
    .galeria-item:hover img { transform: scale(1.06); }
    .galeria-item:hover::after { opacity: 1; }
    .galeria-item:hover figcaption { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .galeria-item img { transition: none; }
@media (hover: hover) { .galeria-item:hover img { transform: none; } }
}
@media (max-width: 767px) {
    .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .galeria-item figcaption { left: 14px; right: 14px; bottom: 13px; }
    .galeria-legenda { font-size: 15.5px; }
}

/* --- oferta da coudelaria (/amenities) -------------------------------------
   Doze itens seguidos, todos com o mesmo sinal, liam-se como uma parede: nada
   se destacava e as colunas não queriam dizer nada. Passam a três grupos, cada
   um com título e com a pergunta a que responde. A força visual está no filete
   grosso e no título; os itens ficam quietos, que é o que se quer de uma lista
   que se percorre com os olhos. */
.oferta-grelha {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Vão de 26px e corpo 15px: entre 992 e 1199 a coluna é a mais estreita da
       página (a fotografia ao lado come 4/12) e com mais do que isto o
       "Demonstrações equestres" partia em duas linhas, sozinho entre onze
       itens de uma só. */
    gap: 38px 26px;
    margin-top: 46px;
}
.oferta-bloco { padding-top: 22px; border-top: 2px solid var(--ink); }
.oferta-bloco > i, .oferta-bloco > .icone { display: block; font-size: 32px; line-height: 1; color: var(--base-color); margin-bottom: 16px; }
.oferta-titulo { font-size: 1.375rem; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.5px; }
.oferta-nota {
    display: block;
    margin-bottom: 16px;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--medium-gray);
}
.oferta-itens { list-style: none; margin: 0; padding: 0; }
.oferta-itens li {
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
    border-bottom: 1px solid var(--hairline);
}
.oferta-itens li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Três colunas estreitas partiam "Observação dos cavalos" ao meio; abaixo dos
   768px os grupos deixam de ser grelha.

   Empilhados eram três blocos seguidos de doze linhas ao todo, cada uma com o
   seu filete — muita régua para pouca informação, e um scroll longo por uma
   lista que se lê de relance. Passam a três cartões que se arrastam de lado:
   vê-se um de cada vez, com o seguinte a espreitar na borda. */
@media (max-width: 767px) {
    .oferta-grelha {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Sem isto o browser encosta o primeiro cartão ao bordo do ecrã: com
           `snap-align: start` o alinhamento é feito ao início do scrollport, e
           para lá chegar rola os 15px do padding logo ao carregar. */
        scroll-padding-left: 15px;
        scrollbar-width: none;
        gap: 12px;
        margin-top: 30px;
    }
    .oferta-grelha::-webkit-scrollbar { display: none; }
    .oferta-bloco {
        flex: 0 0 74%;
        scroll-snap-align: start;
        padding: 20px 18px 18px;
        border-top: 0;
        border-radius: 10px;
        background: var(--cream);
    }
    .oferta-bloco > i, .oferta-bloco > .icone { font-size: 26px; margin-bottom: 12px; }
    /* Filete entre itens, mas mais leve que o `--hairline` do resto do site:
       dentro do cartão em areia o contraste é menor e o de .13 lia-se como
       tabela. */
    .oferta-itens li {
        padding: 7px 0;
        font-size: 14.5px;
        border-bottom: 1px solid rgba(34, 31, 29, .07);
    }
}


/* --- rodapé -------------------------------------------------------------- */
.site-footer { padding: 55px 0 0; }
.footer-heading {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark-gray);
    margin-bottom: 18px;
}
/* Blocos dobráveis do rodapé (`<details>`). No desktop têm de ser invisíveis
   enquanto mecanismo: o `<summary>` é só o título de sempre — sem seta, sem
   triângulo do browser e sem cursor de mão. Quem dobra é o telemóvel. */
.footer-bloco > summary { display: block; list-style: none; }
.footer-bloco > summary::-webkit-details-marker { display: none; }
.footer-bloco > summary::marker { content: ''; }
.footer-bloco > summary .footer-heading { margin-bottom: 18px; }
.footer-bloco > summary > i { display: none; }
.footer-paginas { list-style: none; padding: 0; margin: 0; }

.footer-contacts { list-style: none; padding: 0; margin: 0; }
.footer-contacts li { display: flex; gap: 12px; margin-bottom: 14px; font-size: 15px; line-height: 24px; color: var(--medium-gray); }
.footer-contacts li:last-child { margin-bottom: 0; }
.footer-contacts i { color: var(--base-color); font-size: 15px; line-height: 24px; }
.footer-contacts a { color: var(--dark-gray); }
@media (hover: hover) { .footer-contacts a:hover { color: var(--base-color); } }
.footer-contacts small { font-size: 12px; color: var(--medium-gray); line-height: 18px; margin-top: 2px; }

.complaints-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark-gray);
    text-decoration: none;
    transition: border-color .3s ease;
}
@media (hover: hover) { .complaints-link:hover { border-color: var(--base-color); color: var(--base-color); } }
/* Com o selo oficial instalado a caixa é só o suporte da imagem: sem contorno
   nem espaço próprio, que o selo já tem o seu. */
/* Dentro do bloco dos contactos, com ar entre ele e o email. */
.footer-bloco .complaints-link { margin-top: 22px; }
.complaints-link.complaints-selo { padding: 0; border: 0; background: none; }
.complaints-link.complaints-selo img { display: block; width: auto; height: 46px; }
@media (max-width: 991px) { .complaints-link.complaints-selo img { height: 42px; } }
.site-footer .footer-top { padding-bottom: 40px; }
.assinatura { margin-top: 4px; font-size: 13px; }
/* O bordô da casa e não o vermelho do Bootstrap: é a única cor de destaque do site. */
.assinatura .coracao { color: var(--base-color); }
.assinatura a { color: var(--medium-gray); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .assinatura a:hover { color: var(--base-color); } }
.site-footer .footer-bottom {
    padding: 22px 0 26px;
    border-top: 1px solid var(--hairline);
}
footer .footer-navbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
footer .footer-navbar li { margin: 0; }
footer .footer-navbar .nav-link { padding: 0; font-size: 15px; }

.footer-social { display: inline-flex; gap: 10px; }
.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--dark-gray);
    border: 1px solid var(--hairline);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
@media (hover: hover) { .footer-social a:hover { background: var(--base-color); border-color: var(--base-color); color: #fff; } }
/* Rodapé em telemóvel.

   Alinhar tudo à esquerda resolveu o desalinhamento mas não a arrumação: ficava
   uma pilha corrida de sete blocos, todos com o mesmo peso e sem nada a
   separá-los — não se percebia onde acabava um assunto e começava o outro.

   Agora tem três secções separadas por um fio (marca · contactos · novidades),
   os contactos são linhas tocáveis com o ícone em bolha, e o menu é uma grelha
   de duas colunas em vez de uma lista que se enrola. O que era uma parede de
   texto passa a ter forma. */
@media (max-width: 991px) {
    .site-footer { padding-top: 45px; }
    .site-footer .footer-top { padding-bottom: 32px; }
    .site-footer .footer-top > [class*="col-"],
    .site-footer .footer-bottom > [class*="col-"] { text-align: left !important; }
    footer .footer-navbar { justify-content: flex-start; gap: 10px 22px; }
    .footer-social { justify-content: flex-start; }
    /* A barra de baixo empilha três blocos: links, redes e o legal. Sem folga
       entre eles ficavam três linhas coladas com pesos diferentes. */
    .site-footer .footer-bottom { padding-top: 26px; }
    .site-footer .footer-bottom > [class*="col-"] + [class*="col-"] { margin-top: 20px; }

    /* Um fio entre as três secções do topo: sem ele os blocos encostavam-se e
       o rodapé lia-se como um parágrafo só.

       O fio vai num pseudo-elemento e não no `border-top` da coluna: a `.row`
       do tema tem `margin: 0 -15px` escrito à mão, por isso a caixa da coluna
       é mais larga do que o container e um `border` ia de aresta a aresta do
       ecrã. Assim acompanha o texto. */
    .site-footer .footer-top > [class*="col-"] + [class*="col-"] {
        position: relative;
        padding-top: 24px;
    }
    .site-footer .footer-top > [class*="col-"] + [class*="col-"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        border-top: 1px solid var(--hairline);
    }
    /* Mesma medida para o fio da barra de baixo. */
    .site-footer .footer-bottom {
        border-top: 0;
        position: relative;
    }
    .site-footer .footer-bottom::before {
        content: '';
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        border-top: 1px solid var(--hairline);
    }
    .site-footer .footer-heading { margin-bottom: 16px; }

    /* Contactos: linha por contacto, com o ícone em bolha e a área de toque a
       ocupar a linha toda. Antes eram três parágrafos com um ícone à frente. */
    .footer-contacts li {
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 0;
        padding: 13px 0;
    }
    .footer-contacts li + li { border-top: 1px solid var(--hairline); }
    .footer-contacts li:first-child { padding-top: 0; }
    .footer-contacts li:last-child { padding-bottom: 0; }
    .footer-contacts i {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        /* Branco e não `--sand`: o fundo do rodapé já é bege e a bolha
           desaparecia nele. */
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
    .footer-contacts li > span { padding-top: 7px; }
    .footer-contacts a { display: inline-block; }

    /* Contactos e Links úteis dobram-se: o rodapé passa a caber num ecrã em vez
       de ser uma tira de 900px que se rola às cegas, e não se perde nada — abre
       quem quiser. A linha do título é a área de toque, com 52px de altura. */
    .site-footer .footer-bloco > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 0;
        cursor: pointer;
        user-select: none;
    }
    .site-footer .footer-bloco > summary .footer-heading { margin-bottom: 0; }
    .site-footer .footer-bloco > summary > i {
        display: block;
        font-size: 13px;
        color: var(--medium-gray);
        transition: transform .25s ease;
    }
    .site-footer .footer-bloco[open] > summary > i { transform: rotate(180deg); }
    .site-footer .footer-bloco[open] > summary { padding-bottom: 6px; }
    .site-footer .footer-bloco > *:not(summary) { padding-bottom: 16px; }


    /* Os blocos dobráveis trazem o seu próprio espaço na linha do título: o
       vão da coluna somava-se e ficavam 40px entre o fio e a palavra. */
    /* Os blocos dobráveis trazem o seu próprio espaço na linha do título: com o
       vão da grelha por cima ficavam quase 90px por linha fechada. */
    .site-footer .footer-top > [class*="col-"]:has(.footer-bloco) { padding-top: 4px; margin-top: 6px; }

    .footer-paginas li + li { border-top: 1px solid var(--hairline); }
    .footer-paginas a {
        display: block;
        padding: 13px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--dark-gray);
    }

    /* Bloco da marca mais apertado: o logótipo, a frase e o registo tinham vãos
       de secção entre si, e são três linhas da mesma coisa. */
    .site-footer .footer-top > [class*="col-"]:first-child img { width: 78px; }
    .site-footer .footer-top > [class*="col-"]:first-child p { margin-top: 12px !important; margin-bottom: 6px !important; }

    /* Sem lista de páginas em telemóvel. São as mesmas seis do menu, que está a
       um toque no cabeçalho — e é a única coisa do rodapé que não se procura
       aqui. Em duas colunas ficavam desencontradas, numa linha só enrolavam-se,
       e em qualquer dos casos eram 230px de rodapé a repetir o que já existe.
       Ficam no HTML (contam para os motores de busca), só não se mostram. */
    .site-footer .footer-bottom > [class*="col-"]:has(.footer-navbar) { display: none; }

    /* Alvo de toque a sério: 38px é o mínimo que um dedo acerta sem pensar. */
    .footer-social a { width: 44px; height: 44px; font-size: 19px; }
}

/* --- roleta de avaliações (homepage) ---------------------------------------
   As avaliações ficam empilhadas e a do meio é a legível; rolar dentro do bloco
   faz as outras passarem por trás dela, como um tambor a rodar.

   O CSS trata do recorte, do encaixe (`scroll-snap`) e do repouso; é o JS que
   mede a distância de cada cartão ao centro e escreve a escala, a opacidade e o
   `z-index`. Sem JS a pista fica uma lista normal, legível de fio a pavio — o
   efeito é enfeite, a leitura não depende dele. */
.roleta {
    position: relative;
    height: 560px;
    cursor: grab;
    overflow-y: auto;
    /* `proximity` e não `mandatory`: com o encaixe obrigatório o bloco nunca
       chegava ao fim (parava a 9px) e ficava a puxar de volta, o que impedia o
       scroll de passar à página. `proximity` assenta na avaliação à mesma. */
    scroll-snap-type: y proximity;
    /* Explícito: nada de reter o scroll dentro do bloco. */
    overscroll-behavior-y: auto;
    scrollbar-width: none;
    /* Desvanece nos topos para as avaliações parecerem entrar e sair do tambor
       em vez de serem cortadas a direito. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
/* Enquanto se arrasta: sem encaixe (puxava contra o dedo) e sem selecção de
   texto, que é o que torna um arrasto desagradável. */
.roleta.is-agarrado { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.roleta::-webkit-scrollbar { width: 0; height: 0; }
.roleta:focus-visible { outline: 2px solid var(--base-color); outline-offset: 6px; }
/* Vão inicial só para não haver salto antes de o JS medir; o valor certo é
   calculado lá (metade do que sobra para centrar o primeiro e o último cartão),
   e é isso que faz o bloco repousar exactamente em 0 e no máximo. */
.roleta-pista { padding: 170px 0; }
.roleta .review-quote {
    scroll-snap-align: center;
    /* Sobreposição: cada cartão sobe para cima do anterior. É isto que faz o de
       trás cobrir o da frente quando a roda gira. */
    margin: -26px 0;
    transform-origin: center center;
    will-change: transform, opacity;
}
@media (hover: hover) { .roleta .review-quote:hover { transform: none; box-shadow: var(--shadow-soft); } }
/* Estado de repouso (sem JS): tudo legível e sem sobreposição. */
.roleta:not(.is-viva) .review-quote { margin: 0 0 22px; }

/* Na /contact a nota não vem a seguir a um título, precisa do seu próprio ar. */
.rating-block-solto { padding-top: 0; border-top: 0; margin-bottom: 26px; }

.roleta-dica {
    margin: 14px 0 0;
    font-size: 12.5px;
    letter-spacing: .3px;
    color: var(--medium-gray);
    text-align: center;
}
/* Na /contact a coluna acompanha a altura do formulário ao lado: `flex-basis: 0`
   faz o bloco não contar com a sua própria altura para o tamanho da linha, e
   depois estica para o que sobrar. Fixar um número dava 619px contra os 717 do
   formulário — e mudava a cada alteração do formulário. */
/* `align-self` explícito: a linha tem `align-items-start` (para o formulário)
   e sem isto a coluna não esticava — ficava nos 579px contra os 717 dele. */
.contact-reviews-col { display: flex; flex-direction: column; align-self: stretch; }
.contact-reviews-col .rating-block-solto,
.contact-reviews-col .roleta-dica { flex: 0 0 auto; }
.contact-reviews-col .roleta { flex: 1 1 0; height: auto; min-height: 360px; }
@media (max-width: 991px) {
    .roleta { height: 460px; }
    .contact-reviews-col { display: block; }
    .contact-reviews-col .roleta { height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
    .roleta .review-quote { transition: none; }
}

/* --- mosaico da /about -----------------------------------------------------
   Duas colunas, a da direita descida um degrau fixo.

   A primeira tentativa espalhou as fotografias em células soltas da grelha e
   leu-se desarrumado: nenhuma partilhava aresta com nenhuma. O que arruma não é
   alinhar tudo — é **larguras alinhadas** (as duas colunas) com **alturas
   diferentes** (retrato e paisagem alternados) e um desfasamento que é sempre o
   mesmo valor. Sobra uma sobreposição deliberada, a do texto, em vez de quatro
   acidentais. */
.mosaico-cabeca { max-width: 720px; margin-bottom: 56px; }

.mosaico { display: grid; grid-template-columns: 1fr 1.06fr; gap: 30px; align-items: start; }
.mos-coluna { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
/* O degrau. Fixo, e não proporcional: é o que se lê como intenção. */
.mos-coluna.is-dir { margin-top: 118px; }

.mos-foto { position: relative; margin: 0; }
.mos-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    transition: transform 1.1s cubic-bezier(.2, .6, .2, 1);
}
/* Só as alturas variam — as larguras vêm da coluna, e é isso que arruma.
   Alturas explícitas e não proporções: com `aspect-ratio` a fotografia retrato
   dava 817px de altura na coluna larga e a secção ia a 2128px. Estes valores
   estão escolhidos para as duas colunas acabarem à mesma altura. */
.mos-coluna.is-esq .mos-foto:nth-of-type(1) { height: 340px; }
.mos-coluna.is-esq .mos-foto:nth-of-type(2) { height: 400px; }
.mos-coluna.is-dir .mos-foto:nth-of-type(1) { height: 540px; }
.mos-coluna.is-dir .mos-foto:nth-of-type(2) { height: 420px; }
.mos-foto::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(to top, rgba(24, 21, 19, .5), rgba(24, 21, 19, 0) 55%);
    pointer-events: none;
    z-index: 1;
}

/* A única sobreposição: o texto avança da coluna esquerda para dentro da
   goteira, por baixo da primeira fotografia da direita. */
.mos-texto {
    position: relative;
    z-index: 3;
    margin: 0 -110px 0 0;
    padding: 34px 38px;
    background: var(--cream);
    border-radius: 6px;
    box-shadow: 0 24px 60px -34px rgba(34, 31, 29, .45);
}
.mos-texto h3 { font-size: 1.7rem; line-height: 1.18; letter-spacing: -.9px; margin-bottom: 14px; }
.mos-texto p { margin: 0; font-size: 16px; line-height: 1.72; color: var(--medium-gray); }

/* Legenda meia dentro, meia fora — é o que a distingue de uma legenda
   encostada ao rodapé da imagem. O vão de 74px entre fotografias é maior do que
   a saliência de 20px, senão a legenda aterrava na fotografia seguinte. */
/* Cada coluna põe a legenda na sua aresta de fora. Todas à esquerda, a da
   coluna direita ficava por baixo do cartão de texto e lia-se cortada. */
.mos-coluna.is-dir .mos-foto figcaption { left: auto; right: 22px; }
.mos-foto figcaption {
    position: absolute;
    left: 22px;
    bottom: -20px;
    z-index: 2;
    padding: 12px 18px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 14px 34px -20px rgba(34, 31, 29, .5);
}
.mos-quando {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--base-color);
}
.mos-legenda {
    display: block;
    font-family: var(--alt-font);
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: var(--dark-gray);
}
@media (hover: hover) { .mos-foto:hover img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .mos-foto img, .mos-foto:hover img { transition: none; transform: none; } }

@media (max-width: 1199px) {
    .mosaico { gap: 22px; }
    .mos-coluna { gap: 46px; }
    .mos-coluna.is-dir { margin-top: 92px; }
    .mos-coluna.is-esq .mos-foto:nth-of-type(1) { height: 290px; }
    .mos-coluna.is-esq .mos-foto:nth-of-type(2) { height: 340px; }
    .mos-coluna.is-dir .mos-foto:nth-of-type(1) { height: 460px; }
    .mos-coluna.is-dir .mos-foto:nth-of-type(2) { height: 360px; }
    .mos-texto { margin: 0 -74px 0 0; padding: 28px 30px; }
    .mos-texto h3 { font-size: 1.45rem; }
}
/* Empilhado: sem duas colunas não há degrau nem sobreposição que faça sentido.
   O texto abre a secção e as fotografias seguem, com a legenda ainda de fora. */
@media (max-width: 991px) {
    .mosaico-cabeca { margin-bottom: 38px; }
    .mosaico { display: flex; flex-direction: column; gap: 56px; }
    .mos-coluna { gap: 56px; }
    .mos-coluna.is-dir { margin-top: 0; }
    .mos-texto { margin: 0; padding: 0; background: none; box-shadow: none; }
    .mos-coluna .mos-foto { height: auto; aspect-ratio: 4 / 3; }
}


/* ══════════════════════════════════════════════════════════════════════
   TELEMÓVEL — tudo daqui para baixo está dentro de media queries de
   largura, para o desktop ficar exactamente como está.
   ══════════════════════════════════════════════════════════════════════ */

/* --- hero à altura toda ----------------------------------------------------
   O tema limitava-o a 600/500px em telemóvel. `svh` e não `vh`: com `vh` a
   barra do browser conta como espaço visível e o hero fica cortado por baixo
   dela ou salta quando ela se esconde. Com `100svh` assenta na área realmente
   visível. O `100vh` fica antes como recurso para browsers sem `svh`. */
@media (max-width: 991px) {
    .home-hero { height: 100vh; height: 100svh; min-height: 520px; }
}

/* --- botão "Conhecer a herdade" por baixo das fotografias ------------------
   Em telemóvel o par de fotografias vem depois do texto e a fotografia pequena
   sobe por cima do botão. Empurrar o botão para o fim da secção e dar-lhe a
   largura toda resolve o encavalitamento e dá-lhe um alvo de toque decente. */
@media (max-width: 991px) {
    .home-herdade .row { display: flex; flex-direction: column; }
    /* `display: contents` deixa os filhos serem items da .row — e a .row tem
       margem negativa de meia goteira (gx-5 = 48px), que era compensada pelo
       padding da coluna. Sem ele o texto e o botão saíam para lá do container.
       Devolver a meia goteira a cada filho repõe o alinhamento. */
    .home-herdade .col-lg-5 { display: contents; }
    .home-herdade .col-lg-5 > * { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); }
    .home-herdade .col-lg-6 { order: 2; margin-bottom: 34px; }
    .home-herdade .btn-conhecer { order: 3; width: 100%; }
    /* Esticar o contentor não chega — o `.btn` do tema é inline-block. */
    .home-herdade .btn-conhecer .btn { display: flex; width: 100%; justify-content: center; }
    .home-herdade p { margin-bottom: 30px !important; }
}

/* --- cronologia em coluna --------------------------------------------------
   Em 2x2 a leitura fazia ziguezague e o traço do tema ficava sem sentido: a
   linha liga marcos que estão lado a lado, não um a seguir ao outro. Em coluna,
   com um traço vertical, a ordem lê-se pela ordem. */
@media (max-width: 991px) {
    .timeline-photo-band .timeline { flex-direction: column; padding-left: 34px; }
    .timeline-photo-band .timeline::before { display: none; }
    .timeline-photo-band .timeline-item.col {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: 100%;
        margin-bottom: 0 !important;
        padding: 0 0 30px 0;
        text-align: left !important;
        position: relative;
    }
    .timeline-photo-band .timeline-item.col:last-child { padding-bottom: 0; }
    /* Traço vertical a ligar os marcos, um segmento por marco, que se enche
       conforme se rola — o mesmo `--cr-p` da cronologia da /about, escrito pelo
       script do partial.

       O trilho e a parte preenchida vivem no mesmo pseudo-elemento (só há dois
       por item e o outro é o ponto): a cor de fundo é o trilho, e por cima uma
       imagem de gradiente branco cuja *altura* é a fracção do percurso que toca
       a este marco. Sem JS `--cr-p` não existe, o fallback é 1 e vê-se a linha
       toda — nunca nenhuma. */
    .timeline-photo-band .timeline-item.col::after {
        content: '';
        position: absolute;
        left: -22px;
        top: 14px;
        bottom: -6px;
        width: 1px;
        background-color: rgba(255, 255, 255, .22);
        background-image: linear-gradient(#fff, #fff);
        background-repeat: no-repeat;
        background-size: 100% calc(clamp(0, var(--cr-p, 1) * var(--n) - var(--i), 1) * 100%);
    }
    .timeline-photo-band .timeline-item.col:last-child::after { display: none; }
    /* O ponto cresce quando o traço lhe chega. `--aceso` é o mesmo cálculo do
       preenchimento do segmento, mas multiplicado: passa de 0 a 1 em 1/8 de
       marco, por isso lê-se como um estalido no momento em que a linha bate no
       ponto, e não como um crescimento lento ao longo de todo o percurso.
       Sem JS `--cr-p` não existe, o fallback é 1 e ficam todos acesos. */
    .timeline-photo-band .timeline-item.col {
        --aceso: clamp(0, calc((var(--cr-p, 1) * var(--n) - var(--i)) * 8), 1);
    }
    .timeline-photo-band .timeline-item.col::before {
        left: -27px !important;
        top: 6px !important;
        transform: scale(calc(1 + .5 * var(--aceso))) !important;
        box-shadow: 0 0 0 calc(var(--aceso) * 5px) rgba(255, 255, 255, .16);
        transition: box-shadow .3s ease;
    }
    .timeline-photo-band .timeline-item .timeline-year { line-height: 1.1; }
}

/* --- barra de navegação que se esconde ao descer ---------------------------
   Só em telemóvel: ganha-se a altura do cabeçalho para o conteúdo, e ela volta
   assim que se sobe, que é quando se procura o menu.

   O `transform` vai no `.navbar` e NÃO no `<header>`. Duas razões, e a segunda
   partiu o site:
   1. o `<header>` tem altura zero (quem é fixo é o `.navbar`), portanto
      `translateY(-100%)` dele não move coisa nenhuma;
   2. um `transform` num ascendente torna-o bloco de contenção dos filhos
      `position: fixed` — o `.navbar` deixava de ser fixo, rolava com a página e
      nunca mais voltava. O menu do hamburguer abria fora do ecrã. */
@media (max-width: 991px) {
    header .navbar {
        transition: transform .32s cubic-bezier(.2, .6, .2, 1);
        will-change: transform;
    }
    /* O tema já esconde e mostra a barra com `header.sticky .navbar` e
       `header.sticky.sticky-active .header-reverse`. Essa segunda regra tem
       especificidade 0-3-1 e ganhava à minha, por isso a barra nunca se
       escondia. Aqui repete-se o padrão dele com a nossa classe à mistura, para
       ficar 0-4-1 — encaixar no sistema do tema em vez de lutar com ele.
       (O caso "menu aberto" é tratado no script: a classe não chega a ser
       posta, senão a barra levava o menu consigo.) */
    header.nav-escondida .navbar,
    header.sticky.sticky-active.nav-escondida .navbar,
    header.sticky.sticky-active.nav-escondida .header-reverse { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    header .navbar { transition: none; }
}


/* --- sem hover em ecrã táctil ----------------------------------------------
   O CSS deste ficheiro já tem os seus `:hover` dentro de `@media (hover: hover)`.
   O que falta é o do tema, que são milhares de regras e não se reescrevem uma a
   uma sem risco. Neutraliza-se aqui o efeito, não a regra.

   Porque interessa: num ecrã táctil o `:hover` não é um estado passageiro — ao
   tocar fica agarrado ao elemento até se tocar noutro sítio. Um cartão fica
   levantado, uma fotografia fica ampliada, e parece avaria.

   `hover: none` apanha exactamente os dispositivos sem rato — não é o mesmo que
   ser um ecrã estreito, e por isso não afecta um portátil pequeno. */
@media (hover: none) {
    /* `:not(.navbar-brand)` — e não é detalhe. O logótipo é um `<a>` e é
       **centrado por transform** (`translate(-50%, -50%)`, bloco do cabeçalho em
       telemóvel). Num ecrã táctil o `:hover` cola-se ao tocar, esta regra
       apagava-lhe o transform e o logótipo saltava 37px para a direita e 23px
       para baixo — meia largura e meia altura dele — ficando cortado pela aresta
       da barra até se tocar noutro sítio. Era o que acontecia ao carregar no
       logótipo para ir para a homepage.

       A regra existe para matar *animações* de hover; nunca pode apanhar um
       transform que é posicionamento. Se algum dia puseres outro elemento no
       sítio com transform, acrescenta-o aqui. */
    a:hover:not(.navbar-brand), button:hover,
    .btn:hover, .btn:hover span,
    figure:hover img, figure:hover > img,
    [class*="card"]:hover, [class*="cartao"]:hover,
    [class*="panel"]:hover, [class*="painel"]:hover,
    .swiper-slide:hover, .swiper-slide:hover img,
    .feature-box:hover, .interactive-banner-style-07:hover {
        transform: none !important;
    }
    /* Nada de `box-shadow: inherit` aqui. Parece inofensivo e não é: apanhava
       todos os cartões nossos por `[class*="card"]` (.intro-overlap-card,
       .wide-photo-card, .reserve-card, .tm-card) e, como o pai não tem sombra,
       `inherit` é **sem sombra**. Ao tocar no cartão o `:hover` prendia-se e a
       sombra desaparecia até se tocar noutro sítio — exactamente o contrário do
       que a regra queria. Nenhum destes cartões tem sombra de hover; o
       `transform: none` acima já chega para não levantarem. */
    /* O texto duplo dos botões do tema desliza no hover e, preso, mostra as duas
       linhas ao mesmo tempo. */
    .btn-switch-text:hover span span,
    .btn-switch-text:hover .btn-double-text::before { transform: none !important; }
}

/* --- /about: mosaico em telemóvel ------------------------------------------
   Três problemas, um por linha:

   1. As fotografias saíam do ecrã. O `.mosaico` mantém `align-items: start` da
      versão em grelha; ao passar a flex-column esse start é no eixo horizontal
      e cada coluna encolhia para a largura *natural* da imagem (453 e 613px num
      ecrã de 390). Repor `stretch`.
   2. O texto ficava entre fotografias, no meio da sequência, porque em coluna
      empilhada a ordem do DOM é foto → texto → foto. Vai para o fim.
   3. Quatro fotografias seguidas, todas 4/3 e todas à mesma largura, lêem-se
      como uma lista. Com as colunas em `display: contents` as cinco caixas
      passam a items da mesma grelha e alternam largura inteira / meia largura.

   Vale até aos 991px — o mesmo limiar em que a versão de duas colunas com
   degrau deixa de caber (bloco acima); os três problemas eram todos dela. */
@media (max-width: 991px) {
    .mosaico {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: stretch;
    }
    .mos-coluna { display: contents; }
    .mos-foto { height: auto !important; }
    /* larga em cima, duas em retrato lado a lado, larga em baixo */
    .mos-coluna.is-esq .mos-foto:nth-of-type(1) { grid-column: 1 / -1; aspect-ratio: 16 / 10; order: 1; }
    .mos-coluna.is-esq .mos-foto:nth-of-type(2) { aspect-ratio: 3 / 4; order: 2; }
    .mos-coluna.is-dir .mos-foto:nth-of-type(1) { aspect-ratio: 3 / 4; order: 2; }
    .mos-coluna.is-dir .mos-foto:nth-of-type(2) { grid-column: 1 / -1; aspect-ratio: 16 / 10; order: 3; }
    .mos-texto { grid-column: 1 / -1; order: 4; margin: 18px 0 0; }
    /* px e não rem: em telemóvel o tema põe o `html` a 12px, e 1.9rem sai a 23px. */
    .mos-texto h3 { font-size: 27px; letter-spacing: -1px; }
    /* A legenda meia-fora precisa de vão entre fotografias; aqui não há.
       Passa para dentro, sobre o gradiente que a foto já tem. */
    .mos-foto figcaption,
    .mos-coluna.is-dir .mos-foto figcaption {
        left: 14px; right: 14px; bottom: 12px;
        padding: 0;
        background: none;
        box-shadow: none;
    }
    .mos-quando { color: rgba(255, 255, 255, .8); font-size: 9px; }
    .mos-legenda { color: #fff; font-size: 15px; }
    /* O gradiente do tema só escurece o terço de baixo; com a legenda lá dentro
       precisa de mais pé para o texto branco se ler sobre céu claro. */
    .mos-foto::before { background: linear-gradient(to top, rgba(24, 21, 19, .62), rgba(24, 21, 19, 0) 62%); }
}

/* --- /about: manifesto em telemóvel ----------------------------------------
   Empilhado ficavam três blocos de texto cinzento separados por um filete — a
   secção que devia ser a declaração da casa lia-se como rodapé. Cada princípio
   passa a cartão em areia, com o número em grande por trás a fazer de âncora
   (é o que a fotografia faz nas outras secções, e aqui não há fotografia).
   Só muda o desenho: o HTML e o texto são os mesmos do desktop. */
@media (max-width: 767px) {
    .manifesto-lista { border-top: 0; display: grid; gap: 12px; }
    .manifesto-item {
        position: relative;
        overflow: hidden;
        padding: 30px 24px 28px;
        border-bottom: 0;
        border-radius: 8px;
        background: var(--cream);
    }
    .manifesto-num {
        position: absolute;
        top: -6px;
        right: 10px;
        margin: 0;
        font-size: 64px;
        line-height: 1;
        opacity: .13;
    }
    .manifesto-item h3 { font-size: 27px; letter-spacing: -1.1px; margin-bottom: 14px; padding-right: 54px; }
    .manifesto-item p { font-size: 15.5px; line-height: 1.72; }
    .manifesto .manifesto-lede { font-size: 16px; }
}

/* --- /about: a coudelaria em telemóvel -------------------------------------
   Empilhado, a coluna da fotografia vem primeiro e a imagem aparecia antes do
   título da secção — lia-se como se a fotografia pertencesse à secção anterior.

   Não chega dar `order` à coluna da foto: isso manda-a para depois do botão. O
   que se quer é a foto *dentro* do texto, a seguir ao primeiro parágrafo. Com
   a coluna e o `.bleed-copy` em `display: contents` os cinco elementos de texto
   passam a items da mesma linha e podem ser ordenados um a um.

   Nota: `display: contents` faz perder o padding do `.bleed-copy`, e o
   contentor é `container-fluid p-0` — sem o repor, o texto encostava ao ecrã.
   Vai em margens e não em padding por causa do botão, que tem fundo próprio. */
@media (max-width: 991px) {
    .bleed-split .bleed-texto,
    .bleed-split .bleed-copy { display: contents; }
    .bleed-split .bleed-copy > * { margin-left: 20px; margin-right: 20px; }
    .bleed-split .bleed-copy > :first-child { margin-top: 55px; }
    .bleed-split .bleed-copy > :last-child { margin-bottom: 55px; }
    /* eyebrow, título e primeiro parágrafo · FOTO · segundo parágrafo e botão */
    .bleed-split .bleed-media { order: 2; margin: 8px 0 34px; }
    .bleed-split .bleed-copy > :nth-child(n+4) { order: 3; }
}

/* --- /rooms: cabeça da página em telemóvel ---------------------------------
   O botão da pílula, os horários e os quatro ícones ocupavam três blocos
   altos antes de se ver o primeiro alojamento. */
@media (max-width: 575px) {
    /* Menos altura no botão sem lhe tirar alvo de toque: 44px continua acima
       do mínimo recomendado. */
    .stay-go { padding: 12px 20px; line-height: 1.2; }

    /* Check-in e check-out numa linha só. Em 14px as duas entradas somavam
       400px numa faixa de 360 e a segunda descia. O corpo acompanha a largura
       do ecrã para caber também num telemóvel de 320. */
    .horarios { flex-wrap: nowrap; gap: 0 clamp(8px, 3vw, 26px); }
    /* O corpo vai no `li` e não na lista: o `li` tem font-size próprio (15px)
       e herdava coisa nenhuma. Acompanha a largura do ecrã para caber também
       num telemóvel de 320. */
    .horarios li { gap: 6px; white-space: nowrap; font-size: clamp(10px, 3vw, 14px); }
    .horarios i { font-size: 1em; }

    /* Os quatro ícones em linha, como no desktop: em 2x2 liam-se como quatro
       cartões e ocupavam meio ecrã. Em linha são o que são — um friso. O
       parágrafo de cada um já estava escondido em telemóvel. */
    .room-features-row.row > .col { flex: 0 0 25% !important; max-width: 25% !important; }
    .room-features-row .feature-box-icon i, .room-features-row .feature-box-icon .icone { font-size: 27px !important; margin-bottom: 8px !important; }
    .room-features-row .feature-box-content span { font-size: 10.5px; line-height: 1.3; letter-spacing: -.1px; }
    .room-features-row { --bs-gutter-x: 8px; }
}

/* --- /rooms: cartão de alojamento em telemóvel -----------------------------
   Empilhado, o cartão lia-se como uma página: fotografia curta, parágrafo, e
   depois sete comodidades em coluna, uma por linha, com visto — sozinhas
   ocupavam metade da altura do cartão e liam-se como letra pequena. Cinco
   alojamentos assim davam quatro mil pixéis de scroll.

   A lista com visto é a mesma do desktop — de propósito, para o cartão ser o
   mesmo objecto nos dois sítios. O que muda é a moldura: fotografia mais alta,
   arestas e sombra, botão à largura toda. Continua tudo visível: sem "ver
   mais" e sem página de detalhe. */
@media (max-width: 991px) {
    /* O cartão em creme sobre branco são 2% de diferença e desaparecia. Fica o
       creme (a secção mantém-se branca), e o que lhe dá aresta é o filete a
       toda a volta mais uma sombra curta e escura — a de antes era larga e
       fraca de mais para se ver num ecrã pequeno. */
    .room-card-row {
        border-radius: 14px;
        border: 1px solid var(--hairline);
        box-shadow: 0 10px 26px -14px rgba(34, 31, 29, .32);
    }
    /* A fotografia deixa de ter altura de tema (260px fixos) e passa a 4:3.
       `width: 100%` e `height: auto` fazem falta: o `.swiper` tem a classe
       `h-100` do Bootstrap (`height: 100% !important`), e com a altura definida
       o `aspect-ratio` calculava a *largura* a partir dela — a fotografia saía
       a 347px num cartão de 358 e ficava um vão de cada lado. As alturas fixas
       (320px e 260px, no fim do style.css) também têm de sair, senão cortam a
       fotografia por baixo. */
    .room-card-slider-col,
    .room-card-slider-col .swiper,
    .room-card-slider-col .swiper-slide { height: auto !important; }
    .room-card-slider-col .swiper {
        aspect-ratio: 4 / 3;
        width: 100%;
    }
    /* Setas de 50px sobre uma fotografia de meio ecrã tapavam-na; num ecrã
       táctil o gesto é arrastar, elas são só a indicação de que há mais. */
    .room-card-row .swiper-button-prev,
    .room-card-row .swiper-button-next {
        width: 34px !important;
        height: 34px !important;
        opacity: .85;
    }
    .room-info-body { padding: 22px 20px 0; }
    .room-nome { margin: 6px 0 10px; }
    .room-texto { font-size: 15px; margin-bottom: 16px; }
    .room-factos { padding-top: 15px; margin-bottom: 14px; gap: 8px 18px; }
    /* À largura toda; a cor vem do estilo geral de botão em contorno. */
    .room-info-footer { border-top: 0; padding: 16px 20px 20px; }
    .room-info-footer .btn { display: flex; width: 100%; justify-content: center; padding: 0; font-size: 14px; }
    .room-info-footer .btn.btn-medium > span { padding: 11px 19px !important; line-height: 1.25; }
    .room-info-footer .btn i { font-size: 11px; }
}

/* --- /amenities: cartão de introdução em telemóvel -------------------------
   Subia 35px sobre o banner mas ocupava a largura toda, com fundo branco sobre
   secção branca: sem aresta visível de nenhum lado, lia-se como a secção
   seguinte e não como um cartão pousado sobre a fotografia. Ganha margem
   lateral (a goteira da `.row` é que o encostava às bordas), mais sobreposição
   e uma sombra que se vê. */
@media (max-width: 575px) {
    /* Largura explícita e não a goteira: neste tema a `.row` tem `margin: 0
       -15px` escrito à mão, que não depende de `--bs-gutter-x`. Zerar a goteira
       tira o padding da coluna mas deixa a margem negativa — e o cartão fica
       15px para fora do container, encostado às bordas do ecrã. */
    .intro-overlap .row { --bs-gutter-x: 0; }
    .intro-overlap-card {
        width: calc(100% - 32px);
        margin: -70px auto 0;
        padding: 30px 22px 28px;
        border-radius: 8px;
        box-shadow: 0 22px 48px -26px rgba(34, 31, 29, .6);
    }
    /* Mais folga em baixo no banner: o cartão sobe mais e tapava a linha de
       apoio do título. */
    .page-header:has(+ .intro-overlap) { padding-bottom: 118px; }
}

/* --- /amenities: fotografias antes das listas em telemóvel ------------------
   A coluna das fotografias vem depois da coluna do texto, por isso empilhada
   caíam no fim: primeiro a frase de abertura, depois doze itens em três
   grupos, e só então as fotografias — que a essa altura já não ilustram nada.
   Sobem para logo a seguir à frase.

   `display: contents` na coluna do texto para a frase e a grelha passarem a
   items da mesma linha e poderem ser ordenadas em separado. Como sempre que se
   faz isto neste tema, o padding de 15px da coluna desaparece e a `.row` fica
   com a sua margem negativa — daí repô-lo nos filhos. */
@media (max-width: 991px) {
    .row:has(> .amenities-img-side-col) > .col-xl-7 { display: contents; }
    /* `width: 100%` também: os selectores continuam a casar com o DOM, por isso
       o `.row > *` do Bootstrap aplica-se à coluna (que já não tem caixa) e não
       a estes — sem isto a grelha media o conteúdo e ficava a meia largura. */
    .row:has(> .amenities-img-side-col) > .col-xl-7 > * {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    /* O `.photo-pair` já traz 50px por baixo, para a fotografia pequena poder
       descair. Somados ao padding da coluna davam mais de 100px de branco. */
    .amenities-img-side-col { order: 1; margin-bottom: 6px; padding-bottom: 0; }
    .oferta-grelha { order: 2; }
}

/* --- /amenities: ficha do separador em telemóvel ----------------------------
   Empilhada, a ficha era um bloco só: sobrescrito, título, parágrafo e os dois
   pontos com visto, todos com o espaçamento pensado para a coluna estreita ao
   lado da fotografia. Sem a fotografia ao lado a medir o ritmo, lia-se tudo
   amontoado. Aqui o vão cresce onde muda de assunto e o título passa a px — em
   `rem` saía a 18px, que é corpo de texto e não de título (o tema põe o `html`
   a 12px em telemóvel). */
@media (max-width: 767px) {
    .amenities-tab-img-col { margin-bottom: 26px !important; }
    /* A fotografia com proporção em vez de altura máxima: a 200px ficava uma
       tira e o cavalo saía do enquadramento. */
    .amenities-tab-img-col img { max-height: none !important; aspect-ratio: 4 / 3; object-fit: cover; }
    .ficha-coudelaria .eyebrow { margin-bottom: 16px; }
    .ficha-titulo { font-size: 23px; line-height: 1.22; margin-bottom: 16px; }
    .ficha-texto { font-size: 16px; line-height: 1.65; margin-bottom: 30px; }
    /* Cada ponto numa linha só. O mais comprido — "Passeios guiados para todos
       os níveis de experiência." — mede 382px a 15,5px para 333 de espaço, por
       isso o corpo acompanha a largura do ecrã em vez de ser fixo. */
    .ficha-pontos li { padding: 16px 0; gap: 10px; line-height: 1.5; font-size: clamp(10.5px, 3.35vw, 15.5px); }
    .ficha-pontos i { width: 17px; height: 17px; font-size: 10px; }
    /* O último ponto ficava colado à barra dos separadores, que vem logo a
       seguir. `!important` para passar o `margin-bottom: 1rem` do style.css. */
    .amenities-coudelaria-row.mb-7 { margin-bottom: 30px !important; }
}

/* --- /bistro: momentos à mesa em telemóvel ----------------------------------
   Empilhados eram cinco painéis do mesmo tamanho, um a seguir ao outro, com o
   cartão branco a tapar quase toda a fotografia: 1736px de scroll para cinco
   parágrafos, e nenhum deles com mais peso do que os outros.

   Passam a cartões que se arrastam de lado, um por ecrã. A fotografia deixa de
   servir de fundo ao texto e é vista inteira, que é o que uma página sobre
   comida pede. As duas `.row` (2 + 3 painéis) entram em `display: contents`
   para os cinco ficarem na mesma fila. */
@media (max-width: 767px) {
    .table-mosaic {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .table-mosaic::-webkit-scrollbar { display: none; }
    .table-mosaic > .row { display: contents; }
    .table-mosaic > .row > [class*="col-"] {
        flex: 0 0 80%;
        width: auto;
        max-width: none;
        padding: 0;
        scroll-snap-align: start;
    }
    .table-mosaic .tm-panel,
    .table-mosaic .tm-panel.is-feature {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        border-radius: 10px;
        border: 1px solid var(--hairline);
        background: #fff;
    }
    /* Os dois selectores: `.tm-panel.is-feature .tm-foto` tem mais especificidade
       do que `.tm-foto` e a altura de destaque passava por cima desta. */
    .table-mosaic .tm-foto,
    .table-mosaic .tm-panel.is-feature .tm-foto {
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 10px 10px 0 0;
    }
    .table-mosaic .tm-card {
        flex: 1 1 auto;
        padding: 18px 18px 20px;
    }
    .table-mosaic .tm-card h3,
    .table-mosaic .tm-card .is-feature-title { font-size: 20px; line-height: 26px; margin-bottom: 7px; }
    .table-mosaic .tm-card p { font-size: 14px; line-height: 21px; }
}

/* --- /bistro: cartão "onde se come" em telemóvel ----------------------------
   Sobe -50px para entrar na fotografia larga, que no desktop tem ao lado. Em
   coluna a fotografia fica em cima e o cartão passa a vir *depois* do cartão do
   CTA — a margem negativa deixava de morder a fotografia e passava a cortar o
   botão "Falar connosco". */
@media (max-width: 991px) {
    .wide-photo-card { margin-top: 34px; margin-bottom: 0; }
    .wide-photo-row { padding-bottom: 60px; }
}

/* --- botões sem animação de hover em telemóvel ------------------------------
   O `@media (hover: none)` acima não chegava, por duas razões: o tema anima o
   texto duplo em `:hover` **e** em `:active`, e o `:active` dispara em qualquer
   toque; e há telemóveis e emuladores que se declaram capazes de hover. Por
   largura apanha os dois casos.

   Sem isto, ao tocar num botão o texto sobe e fica lá — as duas linhas do texto
   duplo à vista ao mesmo tempo, como se o botão tivesse partido. */
@media (max-width: 991px) {
    .btn.btn-switch-text:hover .btn-double-text,
    .btn.btn-switch-text:active .btn-double-text { transform: none !important; }
    .btn.btn-switch-text:hover .btn-double-text::before,
    .btn.btn-switch-text:active .btn-double-text::before {
        transform: translate(-50%, 100%) !important;
        opacity: 0 !important;
    }
}

/* --- botões sem reacção ao toque em telemóvel -------------------------------
   Faltava o resto: além do texto duplo (bloco acima), o tema levanta o botão
   2px e engorda a sombra em `:hover`, e as variantes de cor trocam para
   contorno em `:hover` **e** em `:active`. Num ecrã táctil o `:active` dispara
   em qualquer toque e o estado fica preso — botão levantado ou em contorno até
   se tocar noutro sítio.

   Por largura e não por `hover: none`: há aparelhos e emuladores que se dizem
   capazes de hover. */
@media (max-width: 991px) {
    .btn:hover, .btn:active,
    .btn-box-shadow:hover, .btn-box-shadow:active { transform: none !important; }
    .btn.btn-box-shadow:hover, .btn.btn-box-shadow:active { box-shadow: 0 5px 20px rgba(0, 0, 0, .1); }
    /* O toque não pode mudar nada: repõe-se o contorno, que é o estado normal. */
    .btn.btn-base-color:hover, .btn.btn-base-color:active {
        background-color: transparent; border-color: var(--base-color); color: var(--base-color);
    }
    .btn.btn-dark-gray:hover, .btn.btn-dark-gray:active {
        background-color: transparent; border-color: var(--dark-gray); color: var(--dark-gray);
    }
    .btn.btn-white:hover, .btn.btn-white:active {
        background-color: transparent; border-color: #fff; color: #fff;
    }
    header .navbar .nav-book-btn:hover, header .navbar .nav-book-btn:active {
        background-color: transparent; color: var(--base-color);
    }
}

/* --- /contact: sem roleta de testemunhos em telemóvel -----------------------
   Empilhada por baixo do formulário, a roleta ficava a ~500px de citações
   entre o formulário e o mapa — e o gesto de rolar dentro do bloco compete com
   o de rolar a página. A prova social fica na nota do Google e no link, que
   estão logo acima e são o que se verifica. Só aqui: na homepage a roleta é a
   secção, não um acompanhamento. */
@media (max-width: 991px) {
    .contact-reviews-col .roleta,
    .contact-reviews-col .roleta-dica { display: none; }
}

/* --- /about: primeira dobra certa ao ecrã ----------------------------------
   O banner e a faixa dos números somavam menos do que um ecrã e sobrava uma
   tira da secção seguinte por baixo — lia-se como se a página tivesse
   escorregado. O banner passa a valer o que falta: um ecrã menos o cabeçalho
   (84px) e menos a faixa. Os 4px a mais garantem que a tira não volta quando a
   faixa cresce um pixel por causa de arredondamentos.

   `:has(+ .fact-band)` para não apanhar os banners das outras páginas, que não
   têm faixa por baixo e mantêm a altura própria. */
@media (max-width: 575px) {
    .fact-band { padding: 6px 0; }
    .fact-row .fact { padding: 11px 8px; }
    .fact-row .fact-label { margin-top: 5px; }
    .page-header:has(+ .fact-band) { min-height: calc(100svh - 84px - 172px); }

    /* Quatro linhas de título eram meia dobra só para uma frase. */
    .mosaico-cabeca h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.8px; }

    /* Botão à largura toda, como nos outros da versão de telemóvel. */
    .bleed-split .bleed-copy > .btn { display: flex; justify-content: center; flex: 1 1 auto; }
}

/* --- homepage em telemóvel: faixa de provas, vãos e cartão de quarto --------
   Tudo aqui é altura: a primeira dobra tinha 258px de barra de reserva, e o
   cartão do quarto media 907px — mais do que um ecrã, obrigando a subir e
   descer para ver um alojamento. */
@media (max-width: 767px) {
    /* As quatro provas numa linha. O corpo acompanha a largura do ecrã; os
       textos já vêm curtos da view, senão nem a 9px cabiam. */
    .faixa-provas {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0 clamp(11px, 3.4vw, 32px);
        margin-top: 18px;
    }
    .faixa-provas li { white-space: nowrap; font-size: clamp(9.5px, 2.95vw, 13px); }
    .faixa-provas li + li::before { left: calc(clamp(11px, 3.4vw, 32px) / -2 - 1px); }

    /* Vão entre a barra de reserva e "A herdade": eram 112px de branco. */
    .home-herdade { padding-top: 48px !important; }

    /* --- cartão de quarto: um ecrã, não dois --- */
    .seccao-quartos .slider-room-row [role="img"] { height: 220px !important; }
    .room-info-panel { padding: 24px 20px !important; }
    .room-info-panel h3 { font-size: 24px; margin-bottom: 16px !important; }
    /* Os factos passam de cinco linhas a duas: em linha, com o ícone colado ao
       texto. É o que tira mais altura sem tirar informação. */
    .room-info-panel ul {
        display: flex;
        flex-wrap: wrap;
        gap: 7px 14px;
        margin-bottom: 18px !important;
    }
    .room-info-panel ul li { margin-bottom: 0 !important; font-size: 13px; }
    .room-info-panel ul li i { margin-right: 6px !important; font-size: 15px; }
    .room-info-panel p {
        font-size: 14px;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .room-info-panel .justify-content-between { margin-top: 20px !important; }
    /* Todos os cartões à altura do mais cheio (mediam 587 a 624 e a aresta de
       baixo saltava a cada swipe). O painel já distribui com
       `justify-content: between`, por isso o botão desce para o fundo em vez de
       ficar um vão morto. */
    .seccao-quartos .swiper-wrapper { align-items: stretch; }
    .seccao-quartos .swiper-slide { height: auto; }
    .seccao-quartos .slider-room-row { height: 100% !important; }

    /* --- serviços: menos vão em cima e sem setas --- */
    .seccao-servicos { padding-top: 46px !important; }
    /* Ninguém carrega em setas num ecrã táctil — arrasta-se o carrossel. */
    .seccao-servicos .carrossel-setas { display: none; }
}

/* --- avaliações em telemóvel -----------------------------------------------
   Dois problemas.

   O tambor: um bloco com scroll vertical próprio dentro do scroll da página,
   com uma medição de posição por fotograma para escalar dez cartões. No
   telemóvel isso arrastava-se — e o gesto era o mesmo da página, por isso
   nunca se sabia o que ia rolar. Passa a carrossel horizontal, com encaixe
   nativo e sem JS nenhum (o script sai por si abaixo dos 768).

   A nota: o "4,7" estava alinhado pelo fundo com as estrelas, que ficavam
   levantadas, e o botão do Google sobrava sozinho à esquerda. Fica tudo ao
   centro, na mesma linha de base. */
@media (max-width: 767px) {
    .roleta {
        height: auto !important;
        overflow-x: auto;
        overflow-y: hidden;
        cursor: default;
        scroll-snap-type: x mandatory;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .roleta-pista { display: flex; gap: 12px; padding: 0; }
    .roleta .review-quote {
        flex: 0 0 84%;
        margin: 0 !important;
        scroll-snap-align: start;
    }
    .roleta-dica { display: none; }

    .rating-block { text-align: center; }
    .rating-block > .d-flex {
        justify-content: center;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }
    .rating-block .pb-10px { padding-bottom: 0 !important; text-align: left; }
    .rating-score { font-size: 3.2rem; }
    /* A goteira de 48px do `g-5` entre a nota e as avaliações era vão a mais
       quando as duas colunas passam a estar uma por cima da outra. */
    .rating-block { margin-bottom: -18px; }
}

/* --- /amenities: títulos e separadores por cima do painel -------------------
   A barra dos separadores está no HTML depois do painel — no desktop é a régua
   que fecha a secção. Em telemóvel isso obrigava a descer para trocar de tópico
   e a subir outra vez para o ler. Sobe para debaixo do título.

   Com a `.container` em `display: contents`, as duas linhas lá dentro passam a
   items da secção e podem ser ordenadas com a barra pelo meio. Como sempre que
   se faz isto neste tema, o padding de 15px da `.container` desaparece e as
   `.row` ficam com a sua margem negativa — daí repô-lo nelas. */
@media (max-width: 767px) {
    .amenities-intro-text h3 { font-size: 26px; line-height: 1.16; }
    /* "O que pode encontrar" numa linha só. */
    .amenities-coudelaria-section h2 { font-size: clamp(24px, 7.6vw, 34px); line-height: 1.15; }

    .amenities-coudelaria-section { display: flex; flex-direction: column; }
    .amenities-coudelaria-section > .container { display: contents; }
    /* 30px e não 15: a `.row` traz `margin: 0 -15px`, por isso são precisos 15
       para a anular e outros 15 para repor o padding da `.container`. */
    .amenities-coudelaria-section > .container > .row { padding-left: 30px; padding-right: 30px; }
    .amenities-coudelaria-section > .container > .row:first-child { order: 1; }
    /* Sem o fundo branco: a barra atravessava a secção em areia como uma tira
       de outra cor. Fica transparente, com um filete por baixo — que é o que
       precisa para se ler como uma régua de separadores e não como um bloco. */
    .barra-separadores {
        order: 2;
        margin-bottom: 26px;
        background: transparent !important;
        border-bottom-color: var(--hairline) !important;
    }
    .amenities-coudelaria-row { order: 3; }
}

/* --- /bistro: a fotografia repetida não pode vir a seguir a si própria ------
   Empilhados, o cartão "Diga-nos o que gosta de comer" vinha logo a seguir à
   fotografia larga da mesa posta — e a fotografia dele é a mesma sala, quase o
   mesmo enquadramento. Trocam de ordem: primeiro o texto sobre o alpendre (sem
   fotografia), e a segunda fotografia só aparece depois. As margens trocam com
   eles: entra na fotografia quem vem primeiro. */
@media (max-width: 991px) {
    .wide-photo-row > .col-lg-5 { order: -1; }
    /* Botão à largura toda, como o resto do site em telemóvel. */
    .reserve-card .btn { display: flex; width: 100%; justify-content: center; }
    .wide-photo-card { margin-top: -50px; margin-bottom: 0; }
    .reserve-card-tuck { margin-top: 34px; }
}

/* --- /contact: a nota do Google numa caixa só -------------------------------
   O "4,7" grande, as estrelas ao lado e a pílula do Google por baixo eram três
   peças soltas numa coluna vazia — sem a roleta por baixo (escondida em
   telemóvel) não havia nada que as agrupasse. Passam a um cartão só, que é todo
   ele o link. */
@media (max-width: 991px) {
    .contact-reviews-col .rating-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 18px;
        border: 1px solid var(--hairline);
        border-radius: 12px;
        background: #fff;
        margin-bottom: 0;
    }
    /* Abaixo dos ~390px a nota e o link deixam de caber lado a lado. Sem isto o
       browser resolve o aperto por dentro: "100 avaliações" parte em duas linhas
       e "Ver no Google" noutras duas, e o cartão cresce de 87 para 135px de
       altura com as duas colunas desalinhadas. Assim quebra-se entre as duas
       peças — o link passa a uma linha própria e cada uma fica inteira. Por
       `flex-wrap` e não por uma largura fixa: o ponto de quebra é onde
       realmente deixa de caber, seja qual for o telemóvel. */
    .contact-reviews-col .rating-block { flex-wrap: wrap; row-gap: 12px; }
    .contact-reviews-col .rating-block .fs-14,
    .contact-reviews-col .rating-link { white-space: nowrap; }
    .contact-reviews-col .rating-block > .d-flex { margin-bottom: 0 !important; gap: 12px !important; }
    .contact-reviews-col .rating-score { font-size: 2.6rem; }
    .contact-reviews-col .rating-block .pb-10px { padding-bottom: 0 !important; }
    /* Pílula dentro de pílula lia-se como dois botões. */
    .contact-reviews-col .rating-link {
        margin-top: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        font-size: 13.5px;
    }
}

/* --- selector de idioma ----------------------------------------------------
   Duas siglas separadas por um traço fino, no fim do menu. Sem bandeiras: uma
   bandeira diz o país, não a língua, e a inglesa serviria a meio mundo. */
/* `flex: 0 0 auto` e `nowrap`: a lista do menu é `flex-wrap: nowrap` e espremia
   o item até "PT" e "EN" partirem ao meio, uma letra por linha. */
/* Na coluna da esquerda, em qualquer largura. `z-index` porque a lista do menu
   transborda a sua coluna e passa por cima desta: sem isso era o menu a apanhar
   o clique e o EN não fazia nada. */
.menu-logo { display: flex; align-items: center; gap: 18px; }
.nav-idioma { display: flex; align-items: center; position: relative; z-index: 3; }
.nav-book-col { display: flex; align-items: center; justify-content: flex-end; }
.seletor-idioma { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .5px; }
.seletor-idioma > * + *::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 11px;
    margin-right: 8px;
    background: var(--hairline);
    vertical-align: -1px;
}
.seletor-idioma a { color: var(--medium-gray); text-decoration: none; transition: color .25s ease; }
.seletor-idioma .is-actual { color: var(--base-color); }
@media (hover: hover) and (min-width: 992px) { .seletor-idioma a:hover { color: var(--dark-gray); } }
/* No menu de telemóvel a lista é vertical e centrada: aqui a linha das duas
   siglas fica com o mesmo vão das entradas do menu. */
@media (max-width: 1199px) {
}

/* --- homepage: cartão de quarto entre 992 e 1439 ---------------------------
   A linha tem 650px fixos e o painel do lado esquerdo não cabia: com o nome a
   ocupar três linhas (o "Quarto Triplo com Terraço e Vista Monte") o conteúdo
   ia a 683px e o botão e as setas ficavam cortados por baixo. O que sobra é
   vão, não texto — por isso encolhe o vão. */
@media (min-width: 992px) and (max-width: 1439px) {
    /* Recuo para browsers sem container queries (Safari < 16). A regra boa está
       fora deste bloco e mede a coluna, não o ecrã. */
    .slider-room-row .room-info-panel h3 { font-size: clamp(26px, 2.55vw, 34px); line-height: 1.14; }
}

/* Espaçamento do painel em todos os ecrãs de computador, com os 650px fixos.
   A partir de 1440 o painel voltava aos vãos do tema e o "Duplo com Vista
   Montado" pedia 684px: o carrossel cortava o fundo e o botão e as setas
   colavam à aresta. Cabe tudo em 650 com o botão a 30px do fundo. Ao mudar
   textos dos alojamentos, medir outra vez — o que não cabe é cortado. */
@media (min-width: 992px) {
    .slider-room-row .room-info-panel { padding-top: 34px !important; padding-bottom: 30px !important; }
    .slider-room-row .room-info-panel h3 { margin-bottom: 14px !important; }
    .slider-room-row .room-info-panel ul { margin-bottom: 14px !important; }
    .slider-room-row .room-info-panel ul li:not(:last-child) { margin-bottom: 7px !important; }
    .slider-room-row .room-info-panel p { line-height: 1.8; }
    .slider-room-row .room-info-panel .justify-content-between { margin-top: 16px !important; }
}
/* Coluna estreita (4/12 de 1000px): o texto parte em mais linhas. */
@media (min-width: 992px) and (max-width: 1199px) {
    .slider-room-row .room-info-panel { padding-top: 26px !important; padding-bottom: 20px !important; }
}

/* --- menu entre 992 e 1199 -------------------------------------------------
   Nesta faixa o tema mostra o menu completo (seis entradas) mas a largura mal
   chega: o "Contacto" já acabava colado à borda antes de existir selector de
   idioma. Menos entreletra em cada entrada abre os ~90px que o PT/EN precisa,
   sem tocar no menu acima dos 1200. */
@media (min-width: 992px) and (max-width: 1199px) {
    /* As três colunas do cabeçalho somam 13 de 12 nesta faixa (`col-lg-1` +
       `col-lg-10` + `col-lg-2`): a última era empurrada para fora do ecrã. Com
       o botão "Reservar" escondido até aos 1200 ninguém dava por isso — o
       selector de idioma, que agora vive lá, ficava fora do ecrã e sem clique. */
    .navbar .menu-order { flex: 0 0 auto; width: 74%; }
    .navbar .navbar-nav .nav-link { padding-left: 10px !important; padding-right: 10px !important; }
}

/* --- cabeçalho em telemóvel: idioma e reserva à vista ----------------------
   A barra tinha o logótipo à esquerda, o hamburger à direita e nada no meio.
   Passa a ter o selector de idioma logo a seguir ao logótipo e o botão de
   reserva antes do hamburger — as duas coisas que se decidem à chegada e que
   não deviam obrigar a abrir o menu. Em troca, saem de dentro do menu. */
@media (max-width: 991px) {
    header .navbar .nav-book-btn {
        display: inline-flex;
        padding: 9px 16px;
        font-size: 13.5px;
        gap: 6px;
    }
    /* A coluna do botão passa à frente da do hamburger, senão aparecia depois
       dele. Entre os 992 e os 1199 isto não se aplica: aí o menu está aberto e
       não há hamburger — o botão fica no seu lugar, à direita. */
    header .navbar .nav-book-col { order: 2; padding-right: 8px; }
    header .navbar .menu-order { order: 3; }
    header .navbar .menu-logo { gap: 12px; }
}
@media (max-width: 575px) {
    /* Num ecrã de 360 o logótipo centrado e o botão tocavam-se: sai a seta do
       botão (o texto chega) e o logótipo encolhe o suficiente para sobrar vão
       dos dois lados. */
    header .navbar .nav-book-btn { padding: 8px 12px; font-size: 12px; }
    header .navbar .nav-book-btn i { display: none; }
    header .navbar .navbar-brand img { max-width: 74px; height: auto; }
    header .navbar .menu-logo { gap: 8px; }
    .seletor-idioma { font-size: 12px; gap: 6px; }
}

/* Logótipo ao centro em telemóvel. O tema desliga o centrado abaixo dos 992
   (`.center-logo .navbar-brand` volta a `position: relative`) e o logótipo
   ficava colado ao selector de idioma. Sai do fluxo para ficar mesmo a meio da
   barra, independentemente do que está de cada lado; o `min-height` guarda a
   altura da barra, que era ele que a dava. */
@media (max-width: 991px) {
    header .navbar .navbar-brand {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
    }
    header .navbar > .container-fluid { min-height: 84px; }
}

/* Abaixo dos 360 já não cabem as três coisas com o logótipo ao meio: ele volta
   para junto do selector, que é onde estava. Vale para o iPhone SE antigo e
   pouco mais. */
@media (max-width: 359px) {
    header .navbar .navbar-brand { position: static; transform: none; }
}

/* Menos vão entre a faixa da cronologia e "Os nossos quartos" em telemóvel.
   Os 90px do desktop são ar entre duas secções largas; num ecrã estreito, a
   seguir a uma faixa escura e fechada, lêem-se como um buraco branco antes de
   se chegar ao título. */
@media (max-width: 767px) {
    section.section-rhythm.seccao-quartos { padding-top: 56px; }
}

/* --- /amenities: ar entre o cartão de introdução e a secção seguinte --------
   A galeria de quatro fotografias que estava aqui pelo meio foi removida (as
   fotografias eram as mesmas dos separadores logo abaixo), e a faixa em areia
   passou a encostar à aresta do cartão — que ficava sentado na costura. O vão
   vai na secção e não no cartão porque o mesmo cartão é usado na /bistro, onde
   a secção seguinte já traz o seu próprio espaço. */
section.amenities-coudelaria-section { margin-top: 72px; }
@media (max-width: 767px) { section.amenities-coudelaria-section { margin-top: 44px; } }

/* --- ícones em SVG ---------------------------------------------------------
   Substituem o `<i class="line-icon-…">` do tema, que puxava um `icomoon.woff`
   de 1,15 MB para onze ícones. `1em` e `currentColor` para continuarem a
   obedecer ao `font-size` e à cor das classes do tema que já estavam no HTML. */
.icone {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
    vertical-align: -0.125em;
    flex: 0 0 auto;
}

/* --- título do cartão de quarto: duas linhas, seja qual for o ecrã ----------
   O nome mais comprido ("Quarto Triplo com Terraço e Vista Monte") partia em
   três linhas e empurrava o botão e as setas para fora do cartão, que tem 650px
   fixos. Prendê-lo a media queries obrigava a adivinhar larguras — e falhava
   sempre na que não estava na lista.

   `cqw` mede a **coluna**, não o ecrã: o título passa a ter o tamanho que a
   caixa onde vive comporta, em qualquer largura, zoom ou tamanho de janela. */
@supports (container-type: inline-size) {
    .slider-room-row .room-info-panel { container-type: inline-size; }
    .slider-room-row .room-info-panel h3 {
        font-size: clamp(26px, 10.5cqw, 45px);
        line-height: 1.14;
    }
}

/* --- horário das refeições (/a-mesa) ---------------------------------------
   Quatro horas não são uma secção: eram um título, um parágrafo e quatro linhas
   de 22px sobre fundo bege — mais peso do que a comida da página inteira. Passa
   a uma linha de informação, no mesmo registo da linha de check-in da
   /alojamento: sem fundo, sem título, os nomes pequenos e as horas a seguir. */
.horarios-refeicoes { padding: 64px 0 70px; }
.horarios-linha {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding: 26px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    text-align: center;
}
.horarios-linha li { position: relative; padding: 0 18px; }
.horarios-linha li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--hairline);
}
.horarios-linha .h-nome {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--medium-gray);
    margin-bottom: 9px;
}
.horarios-linha .h-hora {
    display: block;
    font-family: var(--alt-font);
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--dark-gray);
    white-space: nowrap;
}
.horarios-linha small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--medium-gray);
}
/* A nota da refeição — incluído, à carta, com reserva — separada da hora por um
   fio curto, para não se ler como parte dela. */
.horarios-linha .h-nota {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--hairline);
    display: inline-block;
    font-size: 12.5px;
    letter-spacing: .2px;
}
.horarios-linha .h-nota.is-incluido { color: #2c6e49; }   /* o que já está pago */
.horarios-linha .h-nota.is-aviso { color: var(--base-color); }   /* o que precisa de aviso */
/* As duas horas do jantar, cada uma com a estação por baixo. */
.horarios-linha .h-duas { display: flex; justify-content: center; gap: 30px; }
.horarios-linha .h-duas > span { display: block; }
@media (max-width: 767px) {
    .horarios-refeicoes { padding: 44px 0 48px; }
    .horarios-linha { grid-template-columns: 1fr 1fr; gap: 26px 0; padding: 24px 0; }
    /* Em duas colunas o fio vertical só faz sentido entre pares. */
    .horarios-linha li:nth-child(odd)::before { display: none; }
    .horarios-linha .h-hora { font-size: 18px; }
}

/* A secção a seguir ao horário não precisa do vão de topo: o horário já traz
   70px por baixo e a barra dele fecha o bloco. Os 120px somavam-se a isso. */
.horarios-refeicoes + .section-rhythm { padding-top: 0; }

/* --- avaliações escritas no site -------------------------------------------
   O botão fica com a roleta, por isso aparece nos dois sítios onde ela está. */
.roleta-acao { margin-top: 26px; text-align: center; }
.review-estrelas { display: block; margin-bottom: 14px; color: #e8a33d; font-size: 14px; letter-spacing: 2px; }

/* Estrelas do formulário: rádios em ordem inversa no HTML, para o `~` poder
   pintar as anteriores — é o único modo de fazer isto sem JavaScript. */
.avaliacao-estrelas { border: 0; padding: 0; margin: 0 0 16px; }
.avaliacao-estrelas legend {
    float: none;
    width: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dark-gray);
    margin-bottom: 8px;
}
.estrelas-campo { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.estrelas-campo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrelas-campo label {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    color: rgba(34, 31, 29, .18);
    cursor: pointer;
    transition: color .15s ease;
}
.estrelas-campo input:checked ~ label,
.estrelas-campo label:hover,
.estrelas-campo label:hover ~ label { color: #e8a33d; }
.estrelas-campo input:focus-visible + label { outline: 2px solid var(--base-color); outline-offset: 3px; }
.avaliacao-nota { margin: 14px 0 0; font-size: 12px; line-height: 19px; color: var(--medium-gray); }

/* --- agradecimento depois de enviar a avaliação -----------------------------
   O visto desenha-se: o círculo e o risco são traços com `stroke-dasharray`
   igual ao próprio comprimento, e a animação puxa o `dashoffset` a zero. Duas
   keyframes, sem biblioteca nenhuma. */
/* Com o agradecimento à vista, o cabeçalho do formulário sai: a pergunta
   "Como foi a sua estadia?" já foi respondida. */
.pedido-corpo:has(.pedido-obrigado:not([hidden])) > .eyebrow,
.pedido-corpo:has(.pedido-obrigado:not([hidden])) > h3,
.pedido-corpo:has(.pedido-obrigado:not([hidden])) > .pedido-lede { display: none; }
.pedido-obrigado { text-align: center; padding: 18px 0 6px; }
.pedido-obrigado h4 { font-size: 25px; line-height: 32px; margin: 22px 0 10px; }
.pedido-obrigado p { font-size: 15px; line-height: 25px; color: var(--medium-gray); max-width: 42ch; margin: 0 auto 26px; }
.visto-anim { display: inline-block; width: 76px; height: 76px; }
.visto-anim svg { width: 100%; height: 100%; }
.visto-circulo, .visto-risco {
    stroke: var(--base-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.visto-circulo { stroke-dasharray: 151; stroke-dashoffset: 151; }
.visto-risco { stroke-dasharray: 36; stroke-dashoffset: 36; }
.pedido-obrigado.is-visivel .visto-circulo { animation: visto-traco .55s cubic-bezier(.65, 0, .45, 1) forwards; }
.pedido-obrigado.is-visivel .visto-risco { animation: visto-traco .3s cubic-bezier(.65, 0, .45, 1) .45s forwards; }
.pedido-obrigado.is-visivel h4,
.pedido-obrigado.is-visivel p,
.pedido-obrigado.is-visivel form { animation: visto-sobe .45s ease .5s both; }
@keyframes visto-traco { to { stroke-dashoffset: 0; } }
@keyframes visto-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .pedido-obrigado.is-visivel .visto-circulo,
    .pedido-obrigado.is-visivel .visto-risco { animation: none; stroke-dashoffset: 0; }
    .pedido-obrigado.is-visivel h4,
    .pedido-obrigado.is-visivel p,
    .pedido-obrigado.is-visivel form { animation: none; }
}

/* --- resposta da casa a uma avaliação ---------------------------------------
   Por baixo da avaliação e recuada, com um fio à esquerda: lê-se como resposta
   e não como uma segunda opinião. */
.review-resposta {
    margin: 18px 0 0 52px;
    padding-left: 16px;
    border-left: 2px solid var(--sand);
}
.review-resposta-quem {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--base-color);
    margin-bottom: 6px;
}
.review-resposta p { margin: 0; font-size: 14px; line-height: 24px; color: var(--medium-gray); }
@media (max-width: 767px) {
    .review-resposta { margin-left: 0; }
}

/* --- notícias ---------------------------------------------------------------
   Grelha de cartões e página de leitura. É a única página do site com detalhe:
   uma notícia é texto para ler, não um cartão. */
.noticias-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 46px 30px;
}
.noticia-cartao { display: block; text-decoration: none; }
.noticia-foto {
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 3 / 2;
    margin-bottom: 20px;
}
.noticia-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (min-width: 992px) { .noticia-cartao:hover .noticia-foto img { transform: scale(1.05); } }
.noticia-cartao time,
.noticia-topo time {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--base-color);
    margin-bottom: 10px;
}
.noticia-cartao h3 {
    font-family: var(--alt-font);
    font-size: 24px;
    line-height: 31px;
    letter-spacing: -.5px;
    color: var(--dark-gray);
    margin-bottom: 10px;
}
.noticia-cartao p {
    font-size: 15px;
    line-height: 26px;
    color: var(--medium-gray);
    margin: 0;
    /* Três linhas fixas: os resumos têm comprimentos diferentes e sem isto os
       cartões da mesma linha acabavam a alturas diferentes. */
    height: calc(26px * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Página de uma notícia.

   A fotografia é o cabeçalho — a mesma gramática das outras páginas do site.
   Antes o topo era um vão branco entre o menu e o título, e a imagem vinha a
   meio, à largura do container, com o texto numa coluna mais estreita: dois
   alinhamentos diferentes na mesma página, que é o que se lia como avaria. */
.noticia-hero { min-height: min(520px, 56vh); }
.noticia-hero time {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 12px;
}
.noticia-hero h1 {
    font-size: 46px;
    line-height: 56px;
    letter-spacing: -1.5px;
    color: #fff;
    margin: 0;
}
/* Sem fotografia o cabeçalho não pode ser texto branco sobre nada. */
.noticia-hero:not([style]) { background: var(--sand); }
.noticia-hero:not([style]) .photo-scrim-soft, .noticia-hero:not([style])::after { display: none; }
.noticia-hero:not([style]) h1 { color: var(--dark-gray); }
.noticia-hero:not([style]) time { color: var(--base-color); }
.noticia-hero:not([style]) .noticia-voltar { color: var(--medium-gray); border-color: var(--hairline); }

.noticia-voltar {
    display: inline-block;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: 3px;
}
@media (hover: hover) { .noticia-voltar:hover { color: #fff; border-color: #fff; } }

.noticia-leitura { padding: 70px 0 90px; }
/* Medida de leitura: a coluna de 8 dá quase 90 caracteres por linha e o olho
   perde-se a voltar ao início. */
.noticia-leitura .noticia-resumo,
.noticia-leitura .noticia-corpo,
.noticia-leitura .noticia-fim { max-width: 68ch; }
/* Entrada do texto: maior que o corpo, mais escuro, sem ser um título. */
.noticia-resumo {
    font-size: 21px;
    line-height: 34px;
    color: var(--dark-gray);
    margin: 0 0 34px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--hairline);
}
.noticia-corpo { font-size: 17px; line-height: 32px; color: var(--medium-gray); }
.noticia-corpo p { margin-bottom: 22px; }
.noticia-corpo p:last-child { margin-bottom: 0; }
.noticia-corpo h2, .noticia-corpo h3 {
    font-family: var(--alt-font);
    color: var(--dark-gray);
    letter-spacing: -.5px;
    margin: 40px 0 14px;
}
.noticia-corpo h2 { font-size: 27px; line-height: 35px; }
.noticia-corpo h3 { font-size: 22px; line-height: 30px; }
/* O tema tira o marcador em `ul li` (não no `ul`), por isso repor no `ul` não
   fazia nada — a regra tem de apanhar o `li`. */
.noticia-corpo ul, .noticia-corpo ol { margin: 0 0 22px 20px; }
.noticia-corpo ul li { list-style: disc; }
.noticia-corpo ol li { list-style: decimal; }
.noticia-corpo li { margin-bottom: 8px; }
.noticia-corpo li::marker { color: var(--base-color); }
.noticia-corpo strong { color: var(--dark-gray); font-weight: 600; }
.noticia-corpo img { max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0 26px; }
.noticia-corpo a { color: var(--base-color); text-decoration: underline; text-underline-offset: 3px; }
.noticia-fim { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--hairline); }

/* --- galeria de uma notícia -------------------------------------------------
   Três fotografias ao lado do texto, encavalitadas e um pouco tortas. A régua
   é de propósito: alinhadas e do mesmo tamanho seriam uma grelha, e uma grelha
   ao lado de um texto lê-se como anexo. Assim lê-se como as fotografias que
   alguém pousou em cima da mesa.

   Cada uma tem a sua rotação e o seu recuo — nada é aleatório, é escolhido para
   os cantos se sobreporem sem tapar o assunto de nenhuma. */
.noticia-galeria {
    position: sticky;
    top: 120px;
    padding-left: 20px;
}
.noticia-galeria figure {
    position: relative;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 40px -22px rgba(20, 17, 15, .55);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.noticia-galeria img { display: block; width: 100%; height: 100%; object-fit: cover; }
.noticia-galeria .ng-1 {
    aspect-ratio: 4 / 5;
    width: 78%;
    margin-left: auto;
    transform: rotate(1.2deg);
    z-index: 1;
}
.noticia-galeria .ng-2 {
    aspect-ratio: 1 / 1;
    width: 58%;
    margin-top: -14%;
    transform: rotate(-2.4deg);
    z-index: 2;
}
.noticia-galeria .ng-3 {
    aspect-ratio: 3 / 2;
    width: 66%;
    margin-left: auto;
    margin-right: 6%;
    margin-top: -8%;
    transform: rotate(2deg);
    z-index: 3;
}
/* Com duas ou uma, o desenho ajusta-se em vez de deixar buracos. */
.noticia-galeria[data-quantas="1"] .ng-1 { width: 100%; transform: rotate(-1.2deg); }
.noticia-galeria[data-quantas="2"] .ng-1 { width: 86%; }
.noticia-galeria[data-quantas="2"] .ng-2 { width: 64%; margin-top: -18%; }
@media (hover: hover) and (min-width: 992px) {
    .noticia-galeria figure:hover { transform: rotate(0deg) scale(1.02); z-index: 4; }
}
/* Em telemóvel a composição vem depois do texto e deita-se: três fotos tortas
   numa coluna estreita ficam pequenas e sem ar. */
@media (max-width: 991px) {
    .noticia-galeria {
        position: static;
        padding-left: 0;
        margin-top: 50px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        align-items: start;
    }
    .noticia-galeria .ng-1 { width: 100%; margin: 0; grid-row: span 2; aspect-ratio: 3 / 4; transform: rotate(-1deg); }
    .noticia-galeria .ng-2 { width: 100%; margin: 0; aspect-ratio: 1 / 1; transform: rotate(1.5deg); }
    .noticia-galeria .ng-3 { width: 100%; margin: 0; aspect-ratio: 4 / 3; transform: rotate(-1.5deg); }
}

/* As outras notícias fecham a página numa faixa bege, para se lerem como um
   convite a continuar e não como o resto do texto. */
.noticias-outras { padding: 80px 0 90px; background: var(--sand); }

@media (max-width: 767px) {
    .noticias-grelha { grid-template-columns: 1fr; gap: 38px; }
    .noticia-hero { min-height: min(420px, 52vh); }
    .noticia-hero h1 { font-size: 30px; line-height: 38px; }
    .noticia-leitura { padding: 44px 0 60px; }
    .noticia-resumo { font-size: 18px; line-height: 29px; margin-bottom: 26px; padding-bottom: 24px; }
    .noticia-corpo { font-size: 16px; line-height: 29px; }
    .noticia-corpo h2 { font-size: 23px; line-height: 30px; margin-top: 32px; }
    .noticias-outras { padding: 55px 0 60px; }
}

/* ═══ Retiro (/retiro, /en/retreat) ═══════════════════════════════════════════
   Só o que a página do retiro tem de próprio. O resto são componentes do site:
   .page-header, .intro-overlap-card, .fact-band, .photo-pair, .bleed-split,
   .cta-band e o formulário .pedido-form. */
.retiro-cabeca { text-align: center; max-width: 720px; margin: 0 auto 50px; }

.retiro-experiencias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.retiro-experiencia img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.retiro-experiencia h3 { font-size: 22px; line-height: 28px; margin: 20px 0 6px; }
.retiro-experiencia p { font-size: 16px; line-height: 26px; color: var(--medium-gray); margin: 0; }

.retiro-programa-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.retiro-programa-cabeca img { width: 170px; height: auto; flex-shrink: 0; }
.retiro-dia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; padding: 75px 0; border-top: 1px solid var(--hairline); }
/* O "Dia N" fica preso no ecrã enquanto se lê esse dia e é substituído pelo
   seguinte: o sticky só vale dentro do próprio <article>. `align-self: start`
   porque um item de grelha esticado à altura toda não tem para onde deslizar. */
@media (min-width: 992px) { .retiro-dia-cabeca { position: sticky; top: 130px; align-self: start; } }
/* O tema põe overflow-x: hidden no <body> e no <html>. Com os dois assim, o body
   passa a ser um contentor de scroll que nunca rola e o sticky prende-se a ele —
   não pega. `clip` corta o mesmo sem criar contentor. Só nesta página. */
@supports (overflow: clip) { body.overflow-x-hidden:has(.retiro-dia) { overflow-x: clip !important; } }
.retiro-dia-numero { display: block; font-size: 54px; line-height: 1; letter-spacing: -1px; color: var(--dark-gray, #232323); }
.retiro-dia-titulo { font-size: 26px; line-height: 34px; margin: 10px 0 0; }
.retiro-dia-nota { font-size: 15px; line-height: 24px; color: var(--medium-gray); margin: 10px 0 0; }
.retiro-dia-nota-lista { display: none; margin: 0 0 18px; }
.retiro-linha { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
.retiro-linha::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--hairline); }
.retiro-linha li { position: relative; padding-bottom: 28px; }
.retiro-linha li:last-child { padding-bottom: 0; }
.retiro-linha li::before { content: ''; position: absolute; left: -30px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--base-color); }
.retiro-linha strong { display: block; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--dark-gray, #232323); }
.retiro-linha span { display: block; margin-top: 2px; font-size: 17px; line-height: 28px; color: var(--medium-gray); }

.retiro-golega-sub { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--medium-gray); margin-bottom: 18px; }
.retiro-golega-itens { list-style: none; padding: 0; margin: 30px 0 0; border-top: 1px solid var(--hairline); }
.retiro-golega-itens li { display: flex; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.retiro-golega-num { font-size: 22px; line-height: 30px; color: var(--base-color); flex-shrink: 0; }
.retiro-golega-itens h3 { font-size: 21px; line-height: 28px; margin: 0 0 4px; }
.retiro-golega-itens p { font-size: 16px; line-height: 26px; color: var(--medium-gray); margin: 0; }
.retiro-dica { margin-top: 28px; padding: 20px 24px; background: #fff; border-radius: 6px; }
.retiro-dica p { font-size: 16px; line-height: 26px; }

.retiro-pratico { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); }
.retiro-bloco { padding: 32px 30px 32px 0; border-bottom: 1px solid var(--hairline); }
.retiro-bloco:nth-child(even) { padding-left: 30px; border-left: 1px solid var(--hairline); }
.retiro-bloco ul { margin: 0; padding-left: 18px; }
.retiro-bloco li, .retiro-bloco p { font-size: 17px; line-height: 28px; }
.retiro-bloco li { margin-bottom: 6px; }
.retiro-bloco .retiro-discreto { font-size: 14px; line-height: 22px; color: var(--medium-gray); }
.retiro-link { color: var(--base-color); font-weight: 600; font-size: 16px; }

.retiro-form-cartao { max-width: 680px; margin: 0 auto; background: #fff; border-radius: 8px; padding: 40px 44px; box-shadow: var(--shadow-soft); }
.retiro-form-cartao h3 { font-size: 30px; line-height: 38px; margin-bottom: 8px; }

.retiro-logo-dc { display: block; width: 120px; height: auto; margin: 0 auto; }

@media (max-width: 991px) {
    .retiro-experiencias { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
    .retiro-dia { grid-template-columns: 1fr; gap: 22px; padding: 30px 0 40px; }
    .retiro-programa-cabeca img { width: 120px; }
    /* Em telemóvel o "Dia N" fica preso em cima, compacto, logo abaixo do
       cabeçalho — e sobe para o topo quando o cabeçalho se esconde ao descer. */
    .retiro-dia-cabeca {
        position: sticky; top: 84px; z-index: 2; align-self: start;
        background: #fff; padding: 12px 0 14px;
        box-shadow: 0 12px 14px -14px rgba(34, 31, 29, .4);
        transition: top .35s ease;
    }
    html:has(header.nav-escondida) .retiro-dia-cabeca { top: 0; }
    .retiro-dia-numero { font-size: 32px; }
    .retiro-dia-cabeca .eyebrow { margin-top: 6px !important; }
    .retiro-dia-titulo { font-size: 20px; line-height: 27px; margin-top: 4px; }
    .retiro-dia-cabeca .retiro-dia-nota { display: none; }
    .retiro-dia-nota-lista { display: block; }
}
@media (max-width: 767px) {
    .retiro-pratico { grid-template-columns: 1fr; }
    .retiro-bloco, .retiro-bloco:nth-child(even) { padding: 26px 0; border-left: 0; }
    .retiro-form-cartao { padding: 28px 20px; }
    .retiro-form-cartao .pedido-enviar { width: 100%; padding-top: 11px; padding-bottom: 11px; }
    .retiro-experiencia h3 { font-size: 19px; line-height: 25px; }
}