/* ==========================================================================
   Ulex Flava — layout.css
   Estrutura das páginas: cabeçalho, menu (incl. telemóvel), secções, rodapé.
   ========================================================================== */

/* --------------------------- Contentor central -------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--esp-5);
}
@media (max-width: 600px) {
  .container { padding-inline: var(--esp-4); }
}

/* ============================== CABEÇALHO =============================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cor-fundo);
  background: color-mix(in srgb, var(--cor-fundo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cor-borda);
}

.header-inner {
  display: flex;
  align-items: center;
  min-height: var(--altura-header);
  gap: var(--esp-3);
}

/* Marca (logótipo + nome) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--cor-carvao);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -.02em;
  flex: none;
}
.brand-logo { width: 38px; height: 38px; flex: none; }
.brand-sub {
  display: block;
  font-family: var(--fonte-texto);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

/* Menu principal */
.site-nav { margin-left: var(--esp-5); }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: var(--raio-pill);
  text-decoration: none;
  color: var(--cor-texto-suave);
  font-weight: 600;
  font-size: .95rem;
  transition: var(--trans);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--cor-carvao); background: var(--cor-superficie-2); }
.site-nav a[aria-current="page"] {
  color: var(--cor-carvao);
  background: var(--cor-destaque-clara);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

/* Sobreposição escura quando o menu de telemóvel está aberto */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23,20,16,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--trans), visibility var(--trans);
  z-index: 65;
}
body.nav-aberto .nav-overlay { opacity: 1; visibility: visible; }
body.nav-aberto { overflow: hidden; }

/* Rótulo do botão de idioma mostra o idioma para onde se vai mudar */
.lang-toggle { font-size: .82rem; font-weight: 800; letter-spacing: .02em; }

/* ================================ SECÇÕES =============================== */
main { display: block; }

.seccao { padding-block: var(--esp-8); }
.seccao--compacta { padding-block: var(--esp-6); }
.seccao--alt { background: var(--cor-superficie); border-block: 1px solid var(--cor-borda); }

.cabecalho-seccao {
  max-width: 62ch;
  margin-bottom: var(--esp-6);
}
.cabecalho-seccao--centrado {
  margin-inline: auto;
  text-align: center;
}

/* ------------------------------- HERO ---------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--esp-9) var(--esp-8);
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--cor-destaque-clara), transparent 60%),
    radial-gradient(900px 400px at -10% 110%, #EFE9DC, transparent 55%),
    var(--cor-fundo);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--esp-7);
  align-items: center;
}
.hero-texto p { font-size: clamp(1.02rem, 1rem + .35vw, 1.18rem); color: var(--cor-texto-suave); max-width: 52ch; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-5); }

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
}
.hero-placa {
  width: min(100%, 420px);
  aspect-ratio: 3 / 4;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-3);
  display: grid;
  place-items: center;
  padding: var(--esp-6);
  text-align: center;
  transform: rotate(-2deg);
}
.hero-placa span {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  color: var(--cor-branco);
  line-height: 1.2;
}
.hero-placa small {
  display: block;
  margin-top: var(--esp-3);
  font-family: var(--fonte-texto);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-destaque);
}

@media (max-width: 900px) {
  .hero { padding-block: var(--esp-8) var(--esp-7); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--esp-6); }
  .hero-visual { order: -1; }
  .hero-placa { width: min(80%, 320px); transform: none; }
}

/* ------------------------------- GRELHAS -------------------------------- */
.grelha { display: grid; gap: var(--esp-5); }
.grelha--2 { grid-template-columns: repeat(2, 1fr); }
.grelha--3 { grid-template-columns: repeat(3, 1fr); }
.grelha--4 { grid-template-columns: repeat(4, 1fr); }
.grelha--produtos { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media (max-width: 900px) {
  .grelha--4 { grid-template-columns: repeat(2, 1fr); }
  .grelha--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grelha--2, .grelha--3, .grelha--4 { grid-template-columns: 1fr; }
}

/* ------------------------------ PASSO A PASSO --------------------------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-5); counter-reset: passo; }
@media (max-width: 900px) { .passos { grid-template-columns: 1fr; } }

/* ================================ RODAPÉ ================================ */
.site-footer {
  margin-top: var(--esp-8);
  background: var(--cor-carvao);
  color: #CFC8BC;
  padding-block: var(--esp-8) var(--esp-5);
}
.site-footer a { color: #E7E1D6; text-decoration: none; transition: var(--trans); }
.site-footer a:hover { color: var(--cor-destaque); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--esp-6);
}
.footer-marca .brand { color: var(--cor-branco); }
.footer-marca .brand-sub { color: #9A9182; }
.footer-marca p { margin-top: var(--esp-4); font-size: .92rem; max-width: 34ch; color: #A79E90; }

.footer-titulo {
  font-family: var(--fonte-titulo);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor-branco);
  margin-bottom: var(--esp-4);
}
.footer-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); font-size: .94rem; }

.footer-base {
  margin-top: var(--esp-7);
  padding-top: var(--esp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-5);
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: #8E8577;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--esp-6) var(--esp-5); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==================== MENU DE TELEMÓVEL (<= 980px) ====================== */
.nav-toggle { display: none; }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    margin: 0;
    padding: calc(var(--altura-header) + var(--esp-5)) var(--esp-5) var(--esp-6);
    background: var(--cor-fundo);
    border-left: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-3);
    transform: translateX(105%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 70;
    overflow-y: auto;
  }
  body.nav-aberto .site-nav { transform: none; }

  .site-nav ul { flex-direction: column; align-items: stretch; gap: var(--esp-1); }
  .site-nav a { padding: .9rem 1rem; border-radius: var(--raio); font-size: 1.05rem; }
  .site-nav a[aria-current="page"] { background: var(--cor-destaque-clara); }
}