/* =============================================================
   POKEAUTO — componentes
   ============================================================= */

/* ================================================================== NAVBAR */
/* O logótipo entra grande e encolhe ao descer (pedido do cliente). A altura da
   barra é uma variável para o resto da página poder contar com ela: sem isso as
   âncoras das secções ficavam por baixo da barra fixa. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--nav-h);
  display: flex; align-items: center;
  /* No topo a barra não tem fundo nenhum: o hero é uma fotografia e a barra
     flutua por cima dela. Só ganha fundo quando se começa a descer, senão o
     texto passaria por baixo do logótipo sem nada a separar. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--t), background var(--t), border-color var(--t),
              backdrop-filter var(--t);
}
/* véu subtil só por trás do logótipo e dos links, para se lerem sobre a foto
   clara sem pintar a barra toda */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 11, 13, .55), transparent);
  opacity: 1; transition: opacity var(--t);
}
.nav.is-scrolled::before { opacity: 0; }
.nav.is-scrolled {
  height: var(--nav-h-min);
  background: rgba(11, 11, 13, .97);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--aco);
}
.nav__wrap { display: flex; align-items: center; gap: 1rem; width: min(100% - 2 * var(--gutter), var(--largura)); margin-inline: auto; }

.nav__marca { display: flex; align-items: center; flex: none; text-decoration: none; }
.nav__logo {
  height: 84px; width: auto;
  transition: height var(--t);
}
.nav.is-scrolled .nav__logo { height: 52px; }

.nav__links { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav__link {
  padding: .55rem .7rem;
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--prata); text-decoration: none; border-radius: var(--raio);
  transition: color var(--t), background var(--t);
}
.nav__link:hover, .nav__link.is-actual { color: var(--branco); background: var(--carbono-alto); }
.nav__cta { margin-left: .6rem; }

/* --- botão hambúrguer (só telemóvel) --- */
.nav__toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--aco); border-radius: var(--raio);
  cursor: pointer;
}
.nav__toggle span {
  display: block; position: relative;
  width: 22px; height: 2px; background: var(--branco); border-radius: 2px;
  transition: background var(--t);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px;
  background: var(--branco); border-radius: 2px; transition: transform var(--t), top var(--t);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }
body.menu-aberto .nav__toggle span { background: transparent; }
body.menu-aberto .nav__toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-aberto .nav__toggle span::after { top: 0; transform: rotate(-45deg); }

/* ==================================================== MENU DE ECRÃ INTEIRO */
/* Pedido do cliente: em telemóvel o menu ocupa o ecrã todo. Fixed + inset:0 +
   fundo opaco — nada de painel deslizante a meio, que deixa ver o conteúdo por
   trás e confunde. */
.menu {
  position: fixed; inset: 0; z-index: 130;   /* acima da navbar (120) */
  display: none; flex-direction: column;
  background: var(--preto);
  padding: calc(var(--nav-h) + 1.25rem) var(--gutter) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.menu-aberto { overflow: hidden; }
body.menu-aberto .menu { display: flex; }

.menu__links { display: flex; flex-direction: column; gap: .25rem; }
.menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem .25rem;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 7vw, 2rem); letter-spacing: .01em; text-transform: uppercase;
  color: var(--branco); text-decoration: none;
  border-bottom: 1px solid var(--aco);
}
.menu__link::after { content: '›'; color: var(--dourado); font-size: 1.3em; line-height: 1; }
.menu__acoes { display: grid; gap: .6rem; margin-block: 1.4rem; flex: none; }
@media (max-height: 620px) {
  .menu__link { padding: .62rem .25rem; font-size: clamp(1.15rem, 5vw, 1.5rem); }
  .menu__acoes { grid-template-columns: 1fr 1fr; margin-block: 1rem; }
  .menu__rodape { padding-block: .7rem 0; }
  .menu__tel .mono { font-size: 1.15rem; }
}
.menu__acoes .btn { width: 100%; }

/* ==================================================================== HERO */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(1.5rem, 5vw, 3rem)); padding-bottom: var(--seccao-y); }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(225, 18, 28, .16), transparent 62%),
    radial-gradient(45% 40% at 8% 82%, rgba(245, 185, 33, .10), transparent 60%);
}
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1.6rem, 5vw, 3.4rem); align-items: center; }
.hero__copy { max-width: 44ch; }
.hero .h-hero { margin-block: .6rem 1rem; }
.hero .h-hero em { font-style: normal; color: var(--dourado); }
.hero__lead { margin-bottom: 1.5rem; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .7rem; }

.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--raio-g);
  border: 1px solid var(--aco);
}
.hero__legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem .9rem .8rem;
  font-size: .82rem; color: #E8ECF0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .86));
  border-radius: 0 0 var(--raio-g) var(--raio-g);
}

/* ------------------------------------------------- faixa de chips (amarelo) */
/* O segundo e último sítio com o amarelo do letreiro. Texto sempre preto. */

/* Os 8 chips somam ~1490px e o contentor tem no máximo 1180. Antes ficavam
   cortados em TODAS as larguras, sem barra (scrollbar-width:none), sem gradiente
   e sem forma de lá chegar — a roda vertical do rato nem sequer os desloca.
   Agora quebram para a linha seguinte a partir dos 900px, onde há espaço para
   duas filas; abaixo disso continuam numa fila deslizante, mas com um degradê
   no bordo direito a dizer que há mais. */

/* ======================================================== ANTES DE LIGAR */

  background: var(--carbono);
  display: grid; grid-template-columns: 92px 1fr; gap: 1.4rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  transition: background var(--t);
}
.svc:hover { background: var(--carbono-alto); }

/* serviços com fotografia ganham duas colunas de conteúdo */

/* ============================================================ FAIXA-TEXTURA */
.faixa { position: relative; }
.faixa img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.faixa__txt {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(11, 11, 13, .9) 18%, rgba(11, 11, 13, .18) 70%);
}
.faixa__txt p {
  width: min(100% - 2 * var(--gutter), var(--largura)); margin-inline: auto;
  max-width: 26ch;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 3.6vw, 2.2rem); color: var(--branco); line-height: 1.1;
}
.faixa__txt em { font-style: normal; color: var(--dourado); }

/* ================================================================== PEÇAS */
/* Linhas, nunca grelha de cartões: com 4 peças uma grelha parece uma loja
   vazia; uma lista parece um inventário — que é o que isto é. */
.pecas__aviso {
  border-left: 3px solid var(--vermelho-claro);
  background: #FFFFFF; padding: .9rem 1.1rem; border-radius: var(--raio);
  font-size: .9rem; color: var(--claro-2); margin-bottom: 1.4rem;
}
.pecas__filtros { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.filtro {
  padding: .34rem .85rem; font-size: .88rem; font-weight: 600;
  background: #FFFFFF; color: var(--claro-tinta);
  border: 1px solid #D9DDE3; border-radius: 999px; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.filtro:hover { border-color: var(--claro-tinta); }
.filtro.is-on { background: var(--claro-tinta); color: #FFFFFF; border-color: var(--claro-tinta); }

.pecas__lista { border: 1px solid #E1E5EA; border-radius: var(--raio-g); overflow: hidden; background: #FFFFFF; }
/* A lista é agora <ul>/<li> por semântica; o marcador e o recuo saem. */
.pecas__ul { list-style: none; margin: 0; padding: 0; }
/* A navbar é fixa: sem isto, ao tabular pela lista o elemento focado podia
   ficar por baixo dela e o anel de foco desaparecia atrás da barra. */
.peca__btn, .filtro { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.peca {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center;
  padding: .95rem 1.1rem;
  border-top: 1px solid #EDF0F3;
}
.peca:first-child { border-top: 0; }
.peca__fig {
  width: 64px; height: 64px; border-radius: var(--raio); overflow: hidden;
  background: #E6E8EC; display: grid; place-items: center; flex: none;
}
/* `cover` é o certo para uma fotografia de uma peça. Para as ilustrações
   de categoria, que já vêm com a margem desenhada, `cover` cortava-lhes
   as pontas — daí o contain nessas. */
.peca__fig img { width: 100%; height: 100%; object-fit: cover; }
.peca__fig img[src*="/cat-"] { object-fit: contain; }
/* peça sem foto é uma linha DESENHADA, não um rectângulo cinzento vazio */
.peca__fig--vazia { color: #9AA2AC; }
.peca__fig--vazia svg { width: 26px; height: 26px; }
.peca__nome { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--claro-tinta); line-height: 1.2; }
.peca__meta { font-size: .84rem; color: var(--claro-2); margin-top: .15rem; }
.peca__ref { font-family: var(--f-mono); font-size: .8rem; color: var(--claro-2); }
.peca__dir { text-align: right; display: grid; gap: .35rem; justify-items: end; }
.peca__preco { font-family: var(--f-mono); font-weight: 500; font-size: 1.05rem; color: var(--claro-tinta); white-space: nowrap; }
.peca__preco small { display: block; font-family: var(--f-corpo); font-size: .7rem; color: var(--claro-2); }
.peca__btn {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: .42rem .9rem; font-size: .84rem; font-weight: 600;
  background: var(--claro-tinta); color: #FFFFFF; text-decoration: none;
  border-radius: var(--raio); white-space: nowrap;
}
.peca__btn:hover { background: var(--vermelho-claro); }
.pecas__data { margin-top: 1rem; font-size: .82rem; color: var(--claro-2); }

/* =================================================================== FAQ */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--aco); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 600; font-size: 1.16rem; color: var(--branco);
}
.faq summary::-webkit-details-marker { display: none; }
/* Numa faixa clara o dourado cai para 2,2:1. O vermelho escuro da marca
   é o único acento que aguenta fundo claro. */
.faq summary::after { content: '+'; color: var(--dourado); font-size: 1.5rem; line-height: 1; flex: none; }
.seccao--claro .faq summary::after { color: var(--vermelho-claro); }
.seccao--claro .faq summary { color: var(--claro-tinta); }
.seccao--claro .faq details p { color: var(--claro-2); }
.seccao--claro .faq details { border-bottom-color: rgba(20,22,26,.16); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding-bottom: 1.1rem; max-width: 70ch; }

/* ============================================================== CONTACTOS */
/* O mapa acompanha a altura da coluna de contactos — do topo até à linha dos
   botões — em vez de ser um retrato alto que fazia a secção crescer sozinha. */
/* Duas colunas e duas linhas: o cabeçalho e os contactos empilham-se à
   esquerda, e o mapa ocupa as duas linhas à direita. Assim começa à altura do
   título — antes o canto superior direito ficava vazio — e continua a acabar
   exactamente na linha dos botões, que era o que estava pedido. */
.contactos__grid { display: grid; grid-template-columns: 1.05fr .95fr;
  grid-template-rows: auto 1fr;
  gap: clamp(1.2rem, 3vw, 2rem) clamp(1.6rem, 4vw, 3rem); align-items: stretch; }
.contactos__grid > .cabeca { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.contactos__lista { grid-column: 1; grid-row: 2; align-content: start; }
.contactos__grid .mapa { grid-column: 2; grid-row: 1 / 3; }
/* O conteúdo do mapa é absoluto para não contribuir para a altura da linha:
   quem manda na altura é a coluna dos contactos, e o mapa preenche-a. */
.contactos__grid .mapa { position: relative; min-height: 240px; }
.contactos__grid .mapa__facade,
.contactos__grid .mapa iframe { position: absolute; inset: 0; height: 100%; width: 100%;
  aspect-ratio: auto; }
.contactos__grid .mapa iframe { min-width: 100%; }
.contactos__grid .mapa__facade img { height: 100%; width: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: 50% 38%; }
.contactos__lista { display: grid; gap: 1.1rem; }
.contacto-item { display: grid; grid-template-columns: 26px 1fr; gap: .85rem; align-items: start; }
.contacto-item svg { width: 22px; height: 22px; color: var(--dourado); margin-top: .18rem; }
.contacto-item strong { display: block; color: var(--branco); font-size: 1.06rem; }
.contacto-item a { color: var(--branco); text-decoration: none; }
.contacto-item a:hover { color: var(--dourado); }
.custo-chamada { display: block; font-size: .76rem; color: var(--legenda); }

/* mapa por clique: nada é pedido ao Google antes de o visitante decidir */
.mapa { position: relative; border: var(--borda); border-radius: var(--raio-g); overflow: hidden; background: var(--carbono); }
.mapa__sobre {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem;
  padding: 1.5rem; text-align: center;
  background: linear-gradient(rgba(11, 11, 13, .55), rgba(11, 11, 13, .82));
}
.mapa__nota { font-size: .8rem; color: var(--legenda); max-width: 34ch; }
.mapa iframe { display: block; width: 100%; aspect-ratio: 4 / 5; border: 0; }


/* ================================================================= RODAPÉ */
.rodape { background: var(--carbono); border-top: 1px solid var(--aco); padding-block: clamp(2.4rem, 5vw, 3.4rem) 1.6rem; }
.rodape__topo { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.rodape__logo { height: 76px; width: auto; margin-bottom: .9rem; }
.rodape h4 { font-size: 1.06rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .7rem; }
.rodape ul { display: grid; gap: .42rem; }
.rodape a { color: var(--prata); text-decoration: none; font-size: .93rem; }
.rodape a:hover { color: var(--dourado); }

.redes { display: flex; gap: .6rem; margin-top: 1rem; }
.rede {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--aco); border-radius: var(--raio);
  color: var(--prata); transition: color var(--t), border-color var(--t), background var(--t);
}
.rede:hover { color: var(--dourado); border-color: var(--dourado); background: var(--carbono-alto); }
.rede svg { width: 20px; height: 20px; }

.rodape__legal { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--aco); }
.rodape__legal p { font-size: .8rem; color: var(--legenda); max-width: 90ch; }
.rodape__links { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .9rem; }
.rodape__links a { font-size: .84rem; }
.selo-lr { display: inline-flex; align-items: center; gap: .4rem; }
.selo-lr svg { width: 16px; height: 16px; color: var(--dourado); }

/* ========================================================== RESPONSIVO */
@media (max-width: 1000px) {
  .rodape__topo { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --nav-h: 88px; --nav-h-min: 66px; }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__logo { height: 64px; }
  .nav.is-scrolled .nav__logo { height: 44px; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 420px; }
  .contactos__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .contactos__grid > .cabeca,
  .contactos__lista,
  .contactos__grid .mapa { grid-column: auto; grid-row: auto; }
  /* Volta ao fluxo normal, mas SEM perder o position: a sobreposição «Ver o
     mapa» é absoluta e precisa do .mapa__facade como referência — com static
     escapava para o primeiro antepassado posicionado, e ia parar às Peças. */
  .contactos__grid .mapa { position: relative; min-height: 0; }
  /* width: auto num <iframe> NÃO é 100%: um iframe é um elemento substituído e a
     sua largura intrínseca é 300px. Ficava uma faixa escura à direita do mapa
     num telemóvel de 390px, e no iPhone o mapa aparecia cortado. */
  .contactos__grid .mapa__facade,
  .contactos__grid .mapa iframe { position: relative; inset: auto;
    height: auto; width: 100%; aspect-ratio: 4 / 3; min-height: 300px; }
  /* O Safari do iPhone dimensiona iframes pelo conteúdo e ignora a largura em
     percentagem. O par width:1px + min-width:100% é o que o obriga. */
  .contactos__grid .mapa iframe { width: 1px; min-width: 100%; }
  .contactos__grid .mapa__facade img { height: 100%; width: 100%; aspect-ratio: auto;
    /* No recorte 4:3 do telemóvel, 38% mostrava o céu e o topo do toldo. A foto
       está ali para se reconhecer a porta na rua. */
    object-position: 50% 54%; }

  .svc { grid-template-columns: 60px 1fr; gap: 1rem; }

}

@media (max-width: 620px) {
  .rodape__topo { grid-template-columns: 1fr; }
  .peca { grid-template-columns: 52px 1fr; row-gap: .6rem; }
  .peca__fig { width: 52px; height: 52px; }
  .peca__dir { grid-column: 1 / -1; justify-items: start; text-align: left;
               display: flex; align-items: center; gap: .9rem; }
  .faixa img { aspect-ratio: 2 / 1; }
  .faixa__txt { background: linear-gradient(90deg, rgba(11, 11, 13, .92) 40%, rgba(11, 11, 13, .3)); }
}

/* Revelação suave — desligada para quem pede menos movimento */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--t), transform .5s var(--t); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ============================================================ PÁGINAS LEGAIS */
.legalhead { border-bottom: 1px solid var(--aco); padding-block: 1rem; background: var(--carbono); }
.legalhead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.legalhead img { height: 54px; width: auto; }
.legalhead a { color: var(--prata); text-decoration: none; font-weight: 600; font-size: .92rem; }
.legalhead a:hover { color: var(--dourado); }

.doc { padding-block: clamp(2.4rem, 6vw, 4rem); }
.doc__corpo { max-width: 74ch; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); text-transform: uppercase; margin-bottom: .4rem; }
.doc h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); margin-block: 2rem .6rem; }
.doc h3 { font-size: 1.08rem; margin-block: 1.2rem .35rem; color: var(--dourado); }
.doc p, .doc li { margin-bottom: .7rem; }
.doc ul { list-style: disc; padding-left: 1.3rem; }
.doc ul li { margin-bottom: .4rem; }
.doc .meta { margin-bottom: 1.6rem; }
.doc a { color: var(--dourado); }
/* As tabelas legais têm 4 colunas e não cabem em 390px: sem isto, a largura
   mínima da tabela esticava a viewport e o telemóvel abria a página reduzida.
   O contentor desliza e é focável, para também funcionar só com teclado. */
.doc .tabela { overflow-x: auto; margin-block: .8rem 1.4rem;
  -webkit-overflow-scrolling: touch; }
.doc .tabela:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.doc table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .92rem; }
.doc table :where(td, th) { overflow-wrap: anywhere; }
.doc th, .doc td { text-align: left; padding: .6rem .7rem; border: 1px solid var(--aco); vertical-align: top; }
.doc th { background: var(--carbono); color: var(--branco); font-family: var(--f-display); font-weight: 600; }
.doc__caixa { border-left: 3px solid var(--dourado); background: var(--carbono); padding: 1rem 1.1rem; border-radius: var(--raio); margin-block: 1.2rem; }

/* estado vazio do balcão de peças: um convite, não um buraco */
.pecas__vazio { padding: 1.6rem 1.2rem; text-align: center; }
.pecas__vazio p { max-width: 52ch; margin-inline: auto; margin-bottom: .7rem; color: var(--claro-2); }
.pecas__vazio strong { color: var(--claro-tinta); }
.pecas__vazio .peca__btn { display: inline-block; margin-top: .5rem; padding: .6rem 1.2rem; }
.contacto-item:empty { display: none; }

/* ============================================================================
   MODERNIZAÇÃO — cartões 3D, hero de fotografia e galeria
   Tudo em CSS nativo, zero bibliotecas, zero JavaScript: 1,9 KB gzip medidos.
   Medido em Chrome headless a 390x844 com a CPU 4x e 6x mais lenta: 0 frames
   acima de 33 ms, 2,1% de thread principal a rolar e 0,0% com a página parada.

   Duas regras que saíram da medição e que não se quebram:
   1. NADA animado por temporizador. O mesmo gradiente animado com
      `animation: girar 9s infinite` custava 43 ms POR SEGUNDO para sempre — um
      custom property animado não vai para o compositor. Ligado a
      animation-timeline: view() dá o mesmo e custa zero enquanto ninguém rola.
   2. O estado por omissão de cada elemento é o ESTADO FINAL. As animações vivem
      dentro de @supports; sem isso, no Firefox (que em 2026 ainda tem
      scroll-timeline atrás de flag) a animação corria na timeline do documento
      e o cartão ficava preso invisível.
   ========================================================================== */

@property --ang { syntax: "<angle>";      inherits: false; initial-value: 120deg; }
@property --bx  { syntax: "<percentage>"; inherits: true;  initial-value: 50%; }
@property --by  { syntax: "<percentage>"; inherits: true;  initial-value: 0%; }

/* ------------------------------------------------------------- HERO NOVO */
.hero--foto { position: relative; min-height: min(92svh, 780px); display: flex;
  align-items: flex-end; padding-bottom: clamp(2.5rem, 7vw, 5rem); overflow: hidden; }
.hero--foto::before { content: none; }
/* overflow: a animação de aproximação faz a foto crescer ~11% além do ecrã */
.hero__fundo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* 3:2 paisagem: o volante fica ligeiramente à direita, a deixar o lado
   esquerdo — onde assenta o texto — na zona escura do painel. */
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 52%; }
.hero__veu { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--preto) 4%, rgba(11,11,13,.72) 42%, rgba(11,11,13,.35) 72%),
    linear-gradient(to right, rgba(11,11,13,.86), rgba(11,11,13,.15) 62%); }
.hero--foto .hero__copy { max-width: min(54ch, 58vw); }
.hero--foto .hero__lead { max-width: 46ch; }
.hero--foto .h-hero { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1;
  margin-block: .5rem .9rem; text-wrap: balance; }
.hero__nota { margin-top: 1.1rem; font-size: .9rem; color: var(--legenda);
  display: flex; align-items: center; gap: .5rem; }
.hero__nota::before { content: ''; width: 20px; height: 2px; background: var(--dourado); flex: none; }

/* -------------------------------------------------------- CARTÕES 3D */
.fichas { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 2vw, 1.4rem); }
.ficha { min-width: 0; }

.placa {
  perspective: 900px;              /* tem de estar no PAI do que roda */
  perspective-origin: 50% 45%;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  aspect-ratio: 4 / 5;
}
/* As 9 zonas de rato precisam de linha E coluna EXPLÍCITAS. Sem isso a grelha
   empurra-as para linhas implícitas de altura zero, ficam fora do cartão e o
   hover nunca dispara — em silêncio, sem erro nenhum. */
.placa > i { z-index: 3; }
.placa > i:nth-child(3n+1) { grid-column: 1; }
.placa > i:nth-child(3n+2) { grid-column: 2; }
.placa > i:nth-child(3n)   { grid-column: 3; }
.placa > i:nth-child(-n+3) { grid-row: 1; }
.placa > i:nth-child(n+4):nth-child(-n+6) { grid-row: 2; }
.placa > i:nth-child(n+7)  { grid-row: 3; }

.camadas {
  grid-area: 1 / 1 / 4 / 4; position: relative;
  border-radius: var(--raio); transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform .5s cubic-bezier(0,0,0,1), box-shadow .5s cubic-bezier(0,0,0,1),
              --bx .45s ease-out, --by .45s ease-out;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 24px 48px -12px rgba(0,0,0,.75),
              0 0 0 1px var(--aco);
}
.camadas > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio); }
.camadas::after { content: ''; position: absolute; inset: 0; border-radius: var(--raio);
  pointer-events: none;
  background: linear-gradient(to top, rgba(11,11,13,.97) 6%, rgba(11,11,13,.82) 34%,
              rgba(11,11,13,.28) 62%, transparent 82%); }

/* reflexo. SEM mix-blend-mode: cria um grupo de composição e o Safari achata o
   preserve-3d do pai — o 3D desaparecia exactamente no iPhone. */
.brilho { position: absolute; inset: 0; border-radius: var(--raio); pointer-events: none;
  opacity: 0; transform: translateZ(30px);
  background: radial-gradient(38% 34% at var(--bx) var(--by), rgba(255,255,255,.3), transparent 70%);
  transition: opacity .45s ease-out; }

/* moldura com gradiente das cores da marca, sem SVG e sem imagem */
.moldura { position: absolute; inset: -1px; border-radius: calc(var(--raio) + 1px);
  padding: 1px; pointer-events: none; transform: translateZ(12px);
  background: conic-gradient(from var(--ang), transparent 0 42%, var(--dourado) 52%,
              var(--amarelo) 57%, var(--vermelho) 66%, transparent 76%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; }

.selo { position: absolute; top: 12px; left: 14px; transform: translateZ(70px);
  font-family: var(--f-mono); font-weight: 500; font-size: .82rem;
  background: var(--amarelo); color: #0B0B0D; padding: .16rem .5rem; border-radius: 3px; }
.ficha__corpo { position: absolute; inset: auto 0 0; padding: 0 16px 16px;
  transform: translateZ(48px); }
.ficha__corpo .risca { display: block; width: 26px; height: 3px; background: var(--vermelho);
  border-radius: 2px; margin-bottom: .5rem; }
.ficha__corpo h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); text-transform: uppercase;
  line-height: 1.06; margin-bottom: .3rem; }

/* ------------------------------------------------------------- MOVIMENTO */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .placa > i:hover ~ .camadas { --s: 1.02;
      box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 40px 70px -16px rgba(0,0,0,.85), 0 0 0 1px #3a3f47; }
    .placa > i:hover ~ .camadas .brilho { opacity: 1; }
    .placa > i:nth-child(-n+3):hover ~ .camadas { --rx: 7deg; --by: 0%; }
    .placa > i:nth-child(n+4):nth-child(-n+6):hover ~ .camadas { --rx: 0deg; --by: 45%; }
    .placa > i:nth-child(n+7):hover ~ .camadas { --rx: -7deg; --by: 92%; }
    .placa > i:nth-child(3n+1):hover ~ .camadas { --ry: -9deg; --bx: 18%; }
    .placa > i:nth-child(3n+2):hover ~ .camadas { --ry: 0deg; --bx: 50%; }
    .placa > i:nth-child(3n):hover ~ .camadas { --ry: 9deg; --bx: 82%; }
  }
  /* @supports OBRIGATÓRIO — ver a nota 2 no topo deste bloco */
  @supports (animation-timeline: view()) {
    .ficha { animation: surgir linear both; animation-timeline: view();
      animation-range: entry 6% cover 26%; }
    .ficha .moldura { animation: rodar linear both; animation-timeline: view();
      animation-range: entry 0% exit 100%; }
    .hero__fundo img { animation: aproximar linear both; animation-timeline: view();
      animation-range: cover 0% cover 100%; }
  }
}
@keyframes surgir { from { opacity: 0; transform: translateY(26px) rotateX(9deg); }
                    to   { opacity: 1; transform: none; } }
@keyframes rodar  { from { --ang: 0deg; } to { --ang: 360deg; } }
@keyframes aproximar { from { transform: scale(1.06); } to { transform: scale(1.16); } }

/* Os chips do «inclui» passaram para o painel de detalhe. Repeti-los no
   cartão só empurrava o «Ver detalhe» para baixo do bordo. */
@media (max-width: 1000px) { .fichas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .hero--foto .hero__copy { max-width: 100%; } }
@media (max-width: 560px)  { .fichas { gap: .7rem; }
  .hero--foto { min-height: min(86svh, 640px); } }

/* Os links legais são uma FILA de links, não prosa — a excepção do WCAG 2.5.5
   para links dentro de texto corrido não se aplica. Alvo de 44px. */
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; }

/* contactos do rodapé com ícone, alinhados pela primeira linha de texto */
.rodape__contactos { display: grid; gap: .8rem; }
.rodape__contactos li { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; }
.rodape__contactos svg { width: 18px; height: 18px; color: var(--dourado); margin-top: .28rem; }
.rodape__contactos small { display: block; font-size: .78rem; color: var(--legenda); }
.rodape__contactos a { color: var(--branco); }
.rodape__contactos a:hover { color: var(--dourado); }

/* ================================================================ COOKIES */
/* Não é cookie-wall: não tapa o conteúdo nem impede a navegação. Fica no fundo,
   com Aceitar e Recusar do MESMO tamanho e peso visual — a lei exige que recusar
   seja tão fácil como aceitar, e um botão cinzento pequeno ao lado de um botão
   grande e colorido é um padrão enganoso. */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  padding: var(--gutter);
  display: flex; justify-content: center;
  animation: subir .3s cubic-bezier(0,0,0,1) both;
}
.cookies[hidden] { display: none; }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }

.cookies__caixa {
  width: min(100%, 640px);
  background: var(--carbono); border: 1px solid var(--aco);
  border-radius: var(--raio-g); box-shadow: var(--sombra);
  padding: clamp(1.1rem, 3vw, 1.5rem);
}
.cookies__t { font-size: 1.15rem; text-transform: uppercase; margin-bottom: .45rem; }
.cookies__d { font-size: .9rem; color: var(--prata); margin-bottom: 1rem; }
.cookies__d strong { color: var(--branco); }
.cookies__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cookies__acoes .btn { width: 100%; }

/* o botão que reabre as definições vive na fila dos links legais */
.rodape__botao {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--prata); font-size: .84rem; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.rodape__botao:hover { color: var(--dourado); }

/* a fachada do mapa deixa de ser um botão e passa a ser um contentor */
.mapa__facade { position: relative; display: block; width: 100%; }
.mapa__facade img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; opacity: .45; }
#mapa-aceitar { pointer-events: auto; }

@media (max-width: 460px) { .cookies__acoes { grid-template-columns: 1fr; } }

/* A identificação legal é obrigatória (DL 7/2004 art.10) mas a lei não exige
   destaque — só acesso fácil e permanente. Fica discreta; o que a lei manda
   destacar é o Livro de Reclamações, e esse tem ícone e vem primeiro. */
.rodape__ident { font-size: .78rem; color: var(--legenda); opacity: .85; }
.rodape__copy { margin-top: 1rem; font-size: .8rem; color: var(--legenda); }
.rodape__links .selo-lr { color: var(--branco); font-weight: 600; }
.rodape__links .selo-lr:hover { color: var(--dourado); }

/* Aceitar e Recusar TÊM de ter o mesmo peso visual. Um botão dourado grande ao
   lado de um contorno apagado é o padrão que o Comité Europeu de Protecção de
   Dados trata como indução (Guidelines 03/2022) e que invalida o consentimento.
   Mesmo tamanho, mesma cor, mesma tipografia — só a ordem os distingue. */
.btn--consent {
  background: transparent; color: var(--branco);
  border: 2px solid var(--dourado);
}
.btn--consent:hover { background: rgba(245, 185, 33, .14); border-color: var(--dourado-luz); }

/* ==================================================== MENU — TOPO E RODAPÉ */
/* O painel está acima da navbar (z-index 130), por isso o botão do hambúrguer
   ficava POR TRÁS dele: visível mas não clicável. O fecho tem de viver dentro
   do painel. */
.menu__topo { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem; }
.menu__logo { height: 56px; width: auto; }
.menu__fechar {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--branco);
  border: 1px solid var(--aco); border-radius: var(--raio); cursor: pointer;
}
.menu__fechar svg { width: 22px; height: 22px; }
.menu__fechar:hover { border-color: var(--dourado); color: var(--dourado); }

/* o painel já não precisa de reservar espaço para a navbar: tem topo próprio */
.menu { padding-top: clamp(1rem, 4vw, 1.6rem); }

/* rodapé do menu: sem o painel amarelo. Uma linha de contacto sóbria, com o
   número em destaque dourado — que é a cor de acento do site — em vez de um
   bloco amarelo que competia com tudo o resto. */
.menu__rodape {
  margin-top: auto; margin-inline: 0; flex: none;
  background: none; color: inherit;
  border-top: 1px solid var(--aco);
  padding: 1.1rem 0 1.4rem;
}
.menu__tel { display: inline-flex; align-items: center; gap: .6rem;
  color: var(--dourado); text-decoration: none; }
.menu__tel svg { width: 20px; height: 20px; }
.menu__tel .mono { font-size: 1.5rem; letter-spacing: .01em; }
.menu__rodape small { display: block; color: var(--legenda); font-size: .8rem; margin-top: .2rem; }

/* ================================================ WHATSAPP FLUTUANTE */
/* Substitui a barra fixa de dois botões, que ocupava uma faixa permanente do
   ecrã e obrigava a um padding no body. */
.wa-flutua {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 100;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #0B0B0D;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform var(--t), box-shadow var(--t);
}
.wa-flutua svg { width: 32px; height: 32px; }
/* Pedido para o telemóvel, a substituir a barra fixa. No computador não faz
   falta e ficava por cima do último link legal do rodapé. */
@media (min-width: 861px) { .wa-flutua { display: none; } }
.wa-flutua:hover { transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .2); }
body.menu-aberto .wa-flutua { display: none; }
/* não tapar o banner de cookies enquanto ele estiver aberto */
body:has(#cookies:not([hidden])) .wa-flutua { display: none; }

/* ======================================================== RODAPÉ NOVO */
.rodape__topo { display: grid; grid-template-columns: 1.35fr auto auto; gap: 2.5rem;
  align-items: start; }
.rodape__menu { justify-self: center; }
@media (min-width: 861px) and (max-width: 1080px) {
  .rodape__topo { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .rodape__menu { justify-self: start; }
}
.rodape__marca { max-width: 44ch; }
.rodape__contacto-col { justify-self: end; text-align: left; }
.rodape__contacto-col .redes { margin-top: 1.2rem; }

/* última linha: © à esquerda, links à direita */
.rodape__barra { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem 1.4rem; }
/* No telemóvel o botão flutuante do WhatsApp ocupa o canto: os links legais
   precisam de espaço por baixo para não ficarem tapados. */
@media (max-width: 860px) { .rodape__barra { padding-bottom: 4.6rem; } }
.rodape__barra .rodape__copy { margin: 0; order: 0; }
.rodape__barra .rodape__links { margin: 0; justify-content: flex-end; }

@media (max-width: 860px) {
  .rodape__topo { grid-template-columns: 1fr; gap: 1.8rem; }
  .rodape__contacto-col { justify-self: start; }
  .rodape__menu { justify-self: start; }
  .rodape__barra { justify-content: flex-start; }
  .rodape__barra .rodape__links { justify-content: flex-start; }
}

/* Alvos de toque (WCAG 2.2 SC 2.5.8): os links de telefone e Instagram são
   linhas de texto isoladas, com 18–20px de altura. A área tocável é alargada
   por pseudo-elemento para não alterar o espaçamento nem o desenho. */
.contacto-item a,
.rodape__contactos a,
.menu__tel { position: relative; }
.contacto-item a::after,
.rodape__contactos a::after {
  content: ''; position: absolute; inset: -12px -10px; border-radius: 6px;
}

/* ==================================================== FOLHA DE DETALHE ====
   Cards clicáveis. O detalhe vive num <details> dentro do HTML servido (logo,
   indexável e funcional sem JavaScript) e é MOVIDO para um <dialog> partilhado
   quando há JavaScript: folha que sobe de baixo no telemóvel, caixa centrada
   no computador. Mesmo nó, duas personalidades — só muda a media query.
   ------------------------------------------------------------------------ */

/* O <details> é o caminho sem JavaScript. Fica escondido por omissão para não
   piscar antes de o app.js assumir; o <noscript> e a classe .sem-folha
   devolvem-no a quem precisa dele. */
.ficha__det { display: none; }
.sem-folha .ficha__det { display: block; margin-top: .7rem; }
.sem-folha .ficha__mais { display: none; }
.sem-folha .ficha { cursor: auto; }
.ficha__det > summary { cursor: pointer; padding: .5rem .2rem; font-weight: 600;
  color: var(--dourado); }
.sem-folha .ficha__det-corpo { padding: .6rem .2rem 0; }

/* --- o cartão passa a ser um alvo --------------------------------------- */
.ficha { cursor: pointer; }
/* As 9 zonas de rato ficam por cima do cartão (z-index 3) e engoliriam o toque.
   No computador são precisas para a inclinação e o clique borbulha na mesma;
   no telemóvel não fazem nada e só estorvam. */
@media (hover: none) { .placa > i { pointer-events: none; } }
/* Sem sobreposição esticada de propósito: o clique é apanhado por delegação no
   .ficha, e um pseudo-elemento a cobrir o cartão ficaria por cima das zonas de
   rato e partia a inclinação 3D no terço de baixo. */
.ficha__abrir { color: inherit; text-decoration: none; }
.ficha__mais { display: inline-flex; align-items: center; gap: .34rem;
  margin-top: .6rem; font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--dourado); }
.ficha__mais::after { content: '›'; font-size: 1.25em; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .ficha__mais { transition: gap .3s cubic-bezier(0,0,0,1); }
    .placa:hover .ficha__mais { gap: .62rem; }
  }
}
.ficha__abrir:focus-visible { outline: none; }
.ficha:has(.ficha__abrir:focus-visible) .camadas { outline: 2px solid var(--dourado);
  outline-offset: 3px; }

/* --- a folha ------------------------------------------------------------ */
.folha { padding: 0; border: 0; background: transparent; color: var(--branco);
  max-block-size: none; }
/* A opacidade do fundo é uma variável para o arrasto a poder baixar em
   tempo real: o fundo clareia à medida que a folha sai do ecrã. */
.folha::backdrop { background: rgba(6, 6, 8, .82); opacity: var(--fundo-op, 1); }
.folha__caixa { position: relative; background: var(--carbono);
  border: 1px solid var(--aco); }
.folha__corpo { overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.3rem var(--gutter) max(1.3rem, env(safe-area-inset-bottom)); }
.folha__x { position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(11,11,13,.66); border: 1px solid var(--aco); border-radius: 50%;
  color: var(--branco); cursor: pointer; }
.folha__x svg { width: 19px; height: 19px; }
.folha__x:hover { background: var(--vermelho); border-color: var(--vermelho); }
.folha__pega, .folha__puxador { display: none; }

.folha__tit { font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.4rem, 5vw, 1.9rem); text-transform: uppercase;
  line-height: 1.05; padding-right: 3rem; }
.folha__tit:focus { outline: none; }
.folha__desc { color: var(--prata); margin-top: .5rem; }
.folha__texto { color: var(--prata); margin-top: .7rem; }
.folha__tempo { font-family: var(--f-mono); font-size: .82rem; color: var(--legenda);
  margin-top: .6rem; }
.folha__inclui { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.folha__inclui li { font-size: .8rem; color: var(--branco);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: .26rem .7rem; background: rgba(255,255,255,.03); }
/* ------------------------------------------------------------ CARROSSEL
   A pista é um scroller com scroll-snap: arrasta-se com o dedo, navega-se com
   as setas do teclado, e funciona sem uma linha de JavaScript. As setas e os
   pontos são um atalho por cima — sem JavaScript ficam escondidos e as
   fotografias empilham-se. */
.carrossel { position: relative; margin-top: 1.3rem; }
.carrossel__pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: .8rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--raio);
}
.carrossel__pista::-webkit-scrollbar { display: none; }
.carrossel__pista:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.folha__foto { margin: 0; scroll-snap-align: start; min-width: 0; }
/* As fotografias têm proporções diferentes (4:5, 3:2, 3:1). Uniformiza-se o
   recorte para o carrossel não saltar de altura entre uma e outra. */
.folha__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--raio); display: block; background: var(--carvao); }
/* No computador a folha tem 46rem de largura: a 4:3 a fotografia ficava com meio
   ecrã de altura e empurrava tudo o resto para fora da vista. */
@media (min-width: 48rem) { .folha__foto img { aspect-ratio: 16 / 10; } }
.folha__foto figcaption { font-size: .78rem; color: var(--legenda); margin-top: .45rem;
  min-height: 2.2em; }

.carrossel__seta {
  position: absolute; top: calc(50% - 1.4rem); translate: 0 -50%;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(11,11,13,.72); border: 1px solid var(--aco); border-radius: 50%;
  color: var(--branco); cursor: pointer;
  transition: opacity .2s ease-out, background .2s ease-out;
}
.carrossel__seta svg { width: 20px; height: 20px; }
.carrossel__seta--ant { left: .5rem; }
.carrossel__seta--seg { right: .5rem; }
.carrossel__seta:hover:not(:disabled) { background: var(--vermelho); border-color: var(--vermelho); }
.carrossel__seta:disabled { opacity: 0; pointer-events: none; }
/* Num ecrã de toque o gesto é o vocabulário certo; as setas só tapavam foto. */
@media (hover: none) { .carrossel__seta { display: none; } }

.carrossel__pontos { display: flex; justify-content: center; gap: .45rem; margin-top: .7rem; }
.carrossel__ponto {
  width: 34px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.carrossel__ponto::before {
  content: ''; width: 100%; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.22); transition: background .25s ease-out;
}
.carrossel__ponto[aria-current]::before { background: var(--dourado); }
.carrossel__ponto:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px;
  border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .carrossel__pista { scroll-behavior: auto; }
  .carrossel__seta { transition: none; }
}

/* Sem JavaScript não há quem mexa na pista: as fotografias empilham-se e os
   atalhos desaparecem, em vez de ficarem botões mortos. */
.sem-folha .carrossel__pista { grid-auto-flow: row; grid-auto-columns: auto;
  overflow: visible; scroll-snap-type: none; }
.sem-folha .carrossel__seta, .sem-folha .carrossel__pontos { display: none; }

/* O scroll de fundo trava-se no <html>. NÃO se usa body{position:fixed}: este
   site tem animation-timeline: view() nos cards e no hero, e trocar o contentor
   de scroll faz essas linhas de tempo re-resolverem — a página saltava ao
   fechar a folha. */
.folha-aberta { overflow: hidden; }

/* --- telemóvel: folha que sobe de baixo -------------------------------- */
@media (max-width: 47.999rem) {
  .folha { margin: auto auto 0; width: 100%; max-width: none; }
  .folha__caixa { border-radius: 1.15rem 1.15rem 0 0; border-bottom: 0;
    max-height: 88svh; display: flex; flex-direction: column; }
  .folha__corpo { padding-top: 1.6rem; }
  .folha__x { top: 1.05rem; z-index: 3; }
  /* A faixa de agarrar apanha o gesto em toda a largura e cobre o cabeçalho
     inteiro — é aí que a mão vai. Tem de ter touch-action: none, senão o
     browser reclama o gesto para o scroll e o arrasto nunca chega ao
     JavaScript. Medido: com 40px só, arrastar a partir do título não fazia
     nada. O X fica por cima (z-index 3) e continua a receber o toque. */
  .folha__pega { display: block; position: absolute; inset: 0 0 auto 0; height: 76px;
    z-index: 1; touch-action: none; cursor: grab; }
  .folha__pega:active { cursor: grabbing; }
  .folha__puxador { display: block; position: absolute; top: .55rem; left: 50%;
    translate: -50% 0; width: 38px; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,.26); transition: background .2s, width .2s; }
  .folha.a-arrastar .folha__puxador { background: rgba(255,255,255,.5); width: 52px; }
  /* Enquanto o dedo está em cima, o movimento tem de seguir o dedo sem atraso. */
  .folha.a-arrastar { transition: none; }
  .folha.a-arrastar::backdrop { transition: none; }
  .folha { translate: 0 100%;
    transition: translate .3s cubic-bezier(.32,.72,0,1),
                display .3s allow-discrete, overlay .3s allow-discrete; }
  .folha[open] { translate: 0 0; }
  @starting-style { .folha[open] { translate: 0 100%; } }
}

/* --- computador: caixa centrada ---------------------------------------- */
@media (min-width: 48rem) {
  .folha { margin: auto; width: min(46rem, 92vw); }
  .folha__caixa { border-radius: var(--raio-g); max-height: 86svh;
    display: flex; flex-direction: column; }
  .folha__fotos { grid-template-columns: 1fr 1fr; }
  .folha__foto--larga { grid-column: 1 / -1; }
  .folha { opacity: 0; scale: .97;
    transition: opacity .22s ease-out, scale .22s cubic-bezier(0,0,0,1),
                display .22s allow-discrete, overlay .22s allow-discrete; }
  .folha[open] { opacity: 1; scale: 1; }
  @starting-style { .folha[open] { opacity: 0; scale: .97; } }
}

@media (prefers-reduced-motion: reduce) {
  .folha { transition: none; translate: none; opacity: 1; scale: 1; }
}

/* ============================================ AJUSTES DE NAVEGAÇÃO ======= */

/* O logótipo desce um pouco enquanto a barra está transparente: sem fundo
   atrás, ganha ar e deixa de parecer colado ao bordo do ecrã. Ao descer na
   página volta ao sítio, junto com o encolhimento que já existia. */
.nav__logo { translate: 0 14px; transition: height var(--t), translate var(--t); }
.nav.is-scrolled .nav__logo { translate: 0 0; }
@media (max-width: 860px) {
  .nav__logo { translate: 0 10px; }
  .nav.is-scrolled .nav__logo { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .nav__logo { transition: none; } }

/* --- menu de ecrã inteiro ----------------------------------------------- */
/* Só os nomes das secções. A seta «›» que aqui esteve não dizia nada — era o
   mesmo símbolo a apontar para quatro sítios diferentes — e os ícones e as
   descrições que a substituíram enchiam o ecrã sem acrescentar informação:
   quem abre um menu de quatro opções já sabe o que quer. */
.menu__link { justify-content: flex-start; text-align: left; }
.menu__link::after { content: none; }
.menu__link { transition: color var(--t), padding-left var(--t); }
.menu__link:active,
.menu__link:focus-visible { color: var(--dourado); }
@media (hover: hover) {
  .menu__link:hover { color: var(--dourado); padding-left: .75rem; }
}

/* --- menu no rodapé ----------------------------------------------------- */
.rodape__menu h4 { font-family: var(--f-display); font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .8rem; }
.rodape__menu ul { display: grid; gap: .45rem; }
.rodape__menu a { color: var(--prata); text-decoration: none; font-size: .92rem;
  transition: color var(--t); }
.rodape__menu a:hover { color: var(--dourado); }

/* --- botão flutuante do WhatsApp: só depois de se começar a descer ------- */
.wa-flutua { opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity .28s ease-out, translate .28s cubic-bezier(0,0,0,1),
              visibility 0s linear .28s, transform .2s ease-out; }
.desceu .wa-flutua { opacity: 1; visibility: visible; translate: 0 0;
  transition-delay: 0s, 0s, 0s, 0s; }
@media (prefers-reduced-motion: reduce) {
  .wa-flutua { transition: opacity .01s, visibility 0s; translate: none; }
}

/* Link para o backoffice. Fica no fim da linha legal, discreto: é para o dono
   da oficina, não para os visitantes. */
.rodape__gestao { color: var(--legenda); text-decoration: none;
  border: 1px solid var(--aco); border-radius: 999px; padding: .12rem .6rem;
  font-size: .82rem; transition: color var(--t), border-color var(--t); }
.rodape__gestao:hover { color: var(--dourado); border-color: var(--dourado); }

/* ------------------------------------------------- VER MAIS NO BALCÃO ---- */
/* [hidden] no <li> não chegava: o atributo só vale display:none pela folha do
   browser, e `.peca { display: grid }` é mais específico e ganhava — as peças
   ficavam «escondidas» e à vista na mesma. */
.peca[hidden] { display: none; }
/* Estado inicial: a partir da sexta peça, escondidas já na primeira pintura,
   para a lista não saltar quando o JavaScript arranca. A classe --js é posta
   pelo JavaScript à primeira interacção e desliga isto, porque com um filtro
   activo as visíveis já não são as primeiras cinco. */
.pecas__ul > .peca:nth-child(n+6) { display: none; }
/* Tem de repetir o :nth-child: sem ele esta regra fica com menos especificidade
   do que a de cima e nunca ganhava — o «Ver mais» não mostrava nada. */
.pecas__ul--js > .peca:nth-child(n+6) { display: grid; }
.pecas__ul--js > .peca[hidden] { display: none; }
.pecas__mais { display: flex; justify-content: center; margin-top: 1.1rem; }
.pecas__mais:empty { display: none; }
.pecas__btn-mais { min-width: 14rem; }
/* A faixa é clara: o botão fantasma, pensado para fundo escuro, ficava
   invisível. Aqui a moldura e o texto são a tinta escura da secção. */
.seccao--claro .pecas__btn-mais { color: var(--claro-tinta); border-color: rgba(20,22,26,.28); }
.seccao--claro .pecas__btn-mais:hover { background: var(--claro-tinta); color: #FFFFFF;
  border-color: var(--claro-tinta); }