/* Espaço extra para o cartão de pesquisa do hero (metade da sua altura
sobrepõe-se aqui) não cobrir o título da 1ª secção depois do hero. */
/* tablet/telemóvel: calc(var(--space-6) + 110px) — o cartão é mais alto lá */
#home-first-section { padding-top: calc(var(--space-7) + 60px); }
/* ========== Section head (eyebrow + title + action) ========== */
.section__head {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.section__title {
font-size: var(--fs-heading);
line-height: max(0.9em, calc(1.05em - 10px));
margin-top: 0.2em;
}
.section__title--caps { text-transform: uppercase; }
/* Eyebrow → title: single source of truth for the gap, site-wide
(eyebrow's own margin is already 0 via the base `p` reset). */
.eyebrow + h1,
.eyebrow + h2 { margin-top: calc(0.1em - 17px); } /* telemóvel: calc(0.1em + 8px) */
/* Button aligned to the title's visual glyph-bottom, not its line-box
(Bebas Neue's line-box extends below where the capitals actually end).
Ratio proportional to --fs-heading so it holds across the clamp's range. */
.section__head--stacked .btn { margin-bottom: calc(var(--fs-heading) * 0.228 - 6px); }
/* ========== Hero (Home) ========== */
.hero-viewport {
position: relative;
/* tablet: clamp(720px, 90svh, 860px) · telemóvel: clamp(860px, 100svh, 940px) */
min-height: clamp(600px, 80svh, 780px);
display: flex;
flex-direction: column;
/* O ::before do .hero__inner sai 18% para cada lado (inset: -14% -18%) e
fazia a PÁGINA INTEIRA arrastar na horizontal em todas as larguras
(+69px a 1440, +184px a 1024, +68px a 375 — medido).
`clip` e não `hidden`: hidden criaria contexto de scroll e cortaria o
cartão de pesquisa, que sai de propósito para fora do hero. */
overflow-x: clip;
/* Scrim escuro sobre a foto de fundo full-bleed */
background:
linear-gradient(rgba(13, 25, 50, 0.70), rgba(13, 25, 50, 0.60)),
var(--color-navy) url("../img/hero-barreiro.jpg")
center calc(62% + 50px) / auto max(calc(100% + 120px), 52.5vw) no-repeat;
}
.hero {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
padding-block: var(--space-5);
background: transparent; /* deixa a foto do .hero-viewport aparecer (anula o charcoal do .section--navy) */
}
.hero__inner {
position: relative;
top: 17px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
} /* telemóvel: top: 0 */
/* Foco escurecido + desfoque suave atrás do texto, para legibilidade sobre a foto */
.hero__inner::before {
content: "";
position: absolute;
inset: -14% -18%;
z-index: -1;
pointer-events: none;
background: radial-gradient(ellipse at center, rgba(13, 25, 50, 0.82) 0%, rgba(13, 25, 50, 0.68) 60%, transparent 88%);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
-webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 88%);
mask-image: radial-gradient(ellipse at center, #000 60%, transparent 88%);
}
.hero__logo {
width: clamp(250px, 55vw, 540px);
height: auto;
margin-bottom: var(--space-4);
} /* telemóvel: width: clamp(300px, 65vw, 420px) */
.hero__title {
font-family: var(--font-display);
font-size: var(--fs-display);
line-height: 1.05;
letter-spacing: 0.01em;
color: var(--color-white);
}
.hero__inner .eyebrow { margin-top: calc(var(--space-2) - 15px); }
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-top: calc(var(--space-4) - 5px);
} /* telemóvel: gap --space-2, margin-top --space-3 */
/* Cartão de pesquisa sobreposto à fronteira hero/main, ao estilo Standvirtual:
metade em cima da foto, metade a "espreitar" para a secção Novidades. */
.hero-search {
position: absolute;
left: 0;
right: 0;
bottom: 0;
transform: translateY(50%);
z-index: 5;
padding-inline: var(--grid-margin);
}
.hero-search__form {
max-width: var(--grid-max);
margin-inline: auto;
background: var(--color-white);
border-radius: var(--radius);
box-shadow: var(--shadow-card-hover);
padding: var(--space-3);
display: grid;
/* tablet: 3 colunas · telemóvel: 2 colunas (ver ficheiros de tier) */
grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
align-items: end;
gap: var(--space-2) var(--space-3);
}
.hero-search__field {
display: flex;
flex-direction: column;
gap: 0.3em;
text-align: left;
}
.hero-search__field label {
font-size: var(--fs-caption);
font-weight: 600;
color: var(--color-muted);
}
.hero-search__field select,
.hero-search__field input {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.6em 0.7em;
font-size: var(--fs-body-sm);
background: var(--color-white);
color: var(--color-ink);
}
.hero-search__submit {
grid-column: auto; /* tablet/telemóvel: 1 / -1 (ocupa a linha toda) */
white-space: nowrap;
justify-content: center;
}
.hero__portrait-slot {
aspect-ratio: 4 / 5;
border-radius: var(--radius);
border: 1px dashed var(--color-border-on-navy);
background: rgba(255,255,255,0.03);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-3);
}
.hero__portrait-slot--light {
border-color: var(--color-border);
background: var(--color-bg-alt);
}
/* ========== About teaser (Home) ========== */
.about-teaser {
display: grid;
gap: var(--space-5);
align-items: start;
/* 12-col grid: 5/7 split — telemóvel: 1 coluna */
grid-template-columns: 5fr 7fr;
}
.about-teaser__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); }
/* Título mais longo que os outros section__title — sem isto quebra em 3
linhas a partir de ~1440px (a 2ª metade do texto passa a precisar de mais
largura do que a coluna 7fr tem). */
.about-teaser h2 { font-size: calc(var(--fs-heading) * 0.85); }
/* ========== Testimonial grid ========== */
.testimonial-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(3, minmax(0, 1fr)); /* telemóvel: 1 coluna */
}
/* ========== CTA final band ========== */
.cta-final {
padding-bottom: var(--space-5);
}
.cta-final__inner {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.cta-final__inner .btn { margin-top: var(--space-2); }
/* ========== Simple content page hero (páginas internas) ========== */
.page-hero {
padding-block: var(--space-6) var(--space-5);
}
.page-hero h1 { color: var(--color-white); font-size: var(--fs-heading); }
/* 22px de whitespace óptico real entre a base das maiúsculas do H1 (Bebas Neue)
e o topo visível do lede — não 22px de margin: o line-box do Bebas tem ~0.3em
de descent invisível abaixo do cap, medido empiricamente (headless Chrome,
4 larguras de viewport) em vez de calculado só pela métrica da fonte. */
.page-hero p { margin-top: calc(18.38px - 0.327 * var(--fs-heading)); max-width: 58ch; }
/* ========== Info card grid (Financiamento/Garantia/Serviços) ========== */
.info-grid {
display: grid;
gap: var(--space-3);
/* tablet: 2 colunas · telemóvel: 1 coluna */
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* ========== Two-column content layout (Sobre) ========== */
.split-content {
display: grid;
gap: var(--space-5);
align-items: start;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* telemóvel: 1 coluna */
}
/* ========== Form (Vender / Contactos) ========== */
/* minmax(0,…) + min-width:0 + width:100% em toda a cadeia: sem isto a largura
por omissão dos /