/* Página inicial: pouco texto. Primeiro a mensagem e a imagem da casa; logo a
   seguir as três missões (Galeria, Loja, Atelier) lado a lado; depois a
   exposição e os mais vendidos a passar, e o atelier em dois cartões. */

/* ── Topo: galeria virtual aberta a artistas (8 Out 2026) ──
   A foto da loja (parede azul, cadeirão, palmeira) ocupa o topo inteiro; um
   véu verde-escuro à esquerda segura o texto em creme e dourado, com grão de
   película. Em baixo, os quatro passos para expor. No telemóvel o véu vem de
   baixo e o texto assenta no fundo da foto. */
.hero { --creme: #F5EFE3; --ouro: #C2A366; position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--nav-h)); display: grid; grid-template-rows: 1fr auto;
  padding: clamp(48px, 7vh, 96px) clamp(24px, 7.8vw, 150px) clamp(28px, 5vh, 64px); background: #14291F; color: var(--creme); }
.hero-foto { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; filter: saturate(.92) contrast(1.04); }
.hero-veu { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(14,26,20,.94) 0%, rgba(14,26,20,.84) 30%, rgba(14,26,20,.45) 52%, rgba(14,26,20,.08) 72%, rgba(14,26,20,0) 100%),
  linear-gradient(0deg, rgba(14,26,20,.86) 0%, rgba(14,26,20,0) 34%),
  radial-gradient(120% 90% at 70% 40%, transparent 50%, rgba(0,0,0,.3) 100%); }
.hero-grao { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hero-texto { align-self: center; max-width: 900px; }
.hero-olho { display: flex; align-items: center; gap: 18px; font-size: clamp(.7rem, .9vw, 1.05rem); font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ouro); }
.hero-olho i { display: block; width: clamp(36px, 3.4vw, 64px); height: 1px; background: currentColor; opacity: .8; }
.hero-h { margin-top: clamp(24px, 4vh, 44px); font-family: var(--f-disp); font-size: clamp(3.2rem, 6.9vw, 8.25rem); font-weight: 300; line-height: .9; letter-spacing: -.025em; color: var(--creme); }
.hero-h .sig { display: block; margin: .05em 0 0 .04em; font-family: var(--f-sign); font-weight: 400; font-size: 1.14em; line-height: 1.05; letter-spacing: 0; color: var(--ouro); font-style: normal; }
.hero-p { margin-top: clamp(16px, 2.6vh, 28px); max-width: 620px; font-size: clamp(1rem, 1.25vw, 1.5rem); font-weight: 300; line-height: 1.6; color: rgba(245,239,227,.86); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4.3vh, 46px); }
.hero-btns .btn { padding: clamp(15px, 1.6vw, 24px) clamp(24px, 2vw, 38px); border-radius: 2px; font-size: clamp(.78rem, .94vw, 1.12rem); letter-spacing: .08em; text-transform: uppercase; }
.hero-btns .btn svg { width: 16px; height: 12px; margin-left: 6px; }
.hero-passos { list-style: none; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px clamp(28px, 4vw, 72px);
  max-width: min(1000px, calc(100% - 170px)); margin: clamp(32px, 5vh, 56px) 0 0; padding: clamp(18px, 2.4vh, 26px) 0 0; border-top: 1px solid rgba(194,163,102,.45); }
.hero-passos li { display: flex; align-items: baseline; gap: 14px; font-size: clamp(.85rem, 1vw, 1.2rem); font-weight: 300; color: rgba(245,239,227,.85); }
.hero-passos b { font-family: var(--f-disp); font-weight: 400; font-size: 1.55em; color: var(--ouro); }

/* ── Carrossel do topo: os destaques lado a lado (js/topo.js) ── */
.topo { position: relative; }
.topo-faixa { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.topo-faixa::-webkit-scrollbar { display: none; }
.topo-faixa > .hero { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.topo-ctrl { position: absolute; z-index: 2; right: clamp(24px, 7.8vw, 150px); bottom: clamp(28px, 5vh, 64px); display: flex; align-items: center; gap: 10px; color: #F5EFE3; }
.topo-ctrl button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #F5EFE3; border: 1px solid rgba(245,239,227,.35); background: rgba(14,26,20,.25); transition: border-color .25s, background .25s; }
.topo-ctrl button:hover { border-color: #C2A366; background: rgba(194,163,102,.18); }
.topo-ctrl button:focus-visible { outline: 2px solid #C2A366; outline-offset: 2px; }
.topo-pontos { display: flex; gap: 8px; padding: 0 4px; }
.topo-ctrl .topo-ponto { width: 26px; height: 26px; border: 0; background: none; border-radius: 0; position: relative; }
.topo-ponto::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: rgba(245,239,227,.4); transition: background .3s; }
.topo-ponto[aria-current="true"]::after { background: #C2A366; }
.topo-ctrl .topo-ponto:hover { background: none; }
.topo-pausa .i-play, .topo-pausa[aria-pressed="true"] .i-pausa { display: none; }
.topo-pausa[aria-pressed="true"] .i-play { display: block; }

/* ── Destaque 2: workshop de pintura expressionista ──
   O quadro «Fonte de Vida» é pequeno (613×1043): no computador aparece
   inteiro, à direita, como pendurado; por trás, o mesmo quadro desfocado dá a
   luz quente. No telemóvel o quadro ocupa o fundo, que é vertical como ele. */
.hero-ws .ws-fundo { inset: -8%; width: 116%; height: 116%; object-position: 50% 45%; filter: blur(42px) saturate(1.15) brightness(.78); }
.hero-ws .hero-veu { background:
  linear-gradient(90deg, rgba(14,26,20,.95) 0%, rgba(14,26,20,.86) 32%, rgba(14,26,20,.5) 56%, rgba(14,26,20,.28) 100%),
  linear-gradient(0deg, rgba(14,26,20,.8) 0%, rgba(14,26,20,0) 34%); }
.ws-quadro { position: absolute; z-index: 0; right: clamp(24px, 9vw, 190px); top: 50%; transform: translateY(-54%); height: min(74%, 780px); aspect-ratio: 613 / 1043; margin: 0; }
.ws-quadro img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.3); }
/* A mesma grelha do destaque 1: mesmo título, mesma barra (aqui rótulo + valor
   na mesma linha, em vez de 01–04, porque são factos e não passos). */
.hero-ws .hero-texto { position: relative; z-index: 1; max-width: min(900px, 58%); }
.hero-factos b { font-family: var(--f-body); font-size: .66em; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }

/* ── As três missões ──────────────────────────────────── */
.in-missoes { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--pad) clamp(24px, 4vw, 48px); }
.in-pilares { --vao: clamp(14px, 3vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vao); }
.in-pilar { display: flex; flex-direction: column; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.in-pilar-foto { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--warm); }
.in-pilar-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.in-pilar-nome { position: relative; display: block; margin-top: 12px; font-family: var(--f-disp); font-weight: 400; font-size: clamp(1.3rem, 3.4vw, 2.2rem); line-height: 1.1; color: var(--ink); }
.in-pilar-o { margin-top: 3px; font-size: clamp(.74rem, 1.4vw, .92rem); line-height: 1.45; color: var(--mid); }
.in-pilar:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
@media (min-width: 861px) { .in-pilar-foto { aspect-ratio: 4 / 3; } .in-pilar:first-child .in-pilar-foto img { object-position: 50% 22%; } }
/* Fotografias largas em cartões ao alto: mostra-se o essencial de cada uma. */
.in-pilar:last-child .in-pilar-foto img { object-position: 18% 50%; }
.in-pilar:nth-child(2) .in-pilar-foto img { object-position: 62% 50%; }
@media (hover: hover) and (pointer: fine) {
  .in-pilar:hover .in-pilar-foto img { transform: scale(1.04); }
}

/* ── Blocos seguintes: título curto e ligação ─────────── */
.in-bloco { padding: clamp(40px, 7vw, 88px) 0 0; }
.in-cabeca { max-width: 1240px; margin: 0 auto clamp(16px, 3vw, 28px); padding: 0 var(--pad); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.in-h2s { font-family: var(--f-disp); font-weight: 300; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.05; color: var(--ink); }
.in-ligacao { flex-shrink: 0; color: var(--ink); font-size: .88rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.in-ligacao:hover { color: var(--gold-btn); }
.exposicao { margin-top: clamp(24px, 4vw, 40px); }

/* Mais vendidos: fita contínua de produtos, como a da exposição. */
.in-fita-janela { position: relative; overflow: hidden; padding: 6px 0 10px; }
.in-fita-janela::before, .in-fita-janela::after { content: ''; position: absolute; top: 0; bottom: 0; width: 6%; z-index: 1; pointer-events: none; }
.in-fita-janela::before { left: 0; background: linear-gradient(to right, var(--white), rgba(255, 255, 255, 0)); }
.in-fita-janela::after { right: 0; background: linear-gradient(to left, var(--white), rgba(255, 255, 255, 0)); }
.in-fita { display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
  will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0);
  animation: in-passar var(--duracao, 60s) linear infinite; }
@keyframes in-passar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.in-fita:focus-within, .in-fita-janela.segura .in-fita { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .in-fita-janela:hover .in-fita { animation-play-state: paused; } }
.in-produto { flex: none; width: clamp(150px, 20vw, 220px); margin: 0 clamp(8px, 1.2vw, 14px); }
.in-produto a { display: block; color: inherit; text-decoration: none; }
/* Caixa quadrada fixa: uma embalagem alta (um pincel) já não estica o cartão. */
.in-produto-img { display: block; aspect-ratio: 1; padding: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.in-produto-img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.in-produto-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-family: var(--f-disp); font-size: 1.05rem; line-height: 1.25; color: var(--ink); }
.in-produto-preco { display: block; margin-top: 4px; font-size: .85rem; font-weight: 500; color: var(--gold-btn); }
.in-produto a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .in-produto a:hover .in-produto-img img { transform: scale(1.05); } }

/* Atelier: dois cartões com fotografia e o título por cima. */
.in-atelier { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 3fr 2fr; gap: clamp(10px, 2vw, 24px); }
.in-cartao { position: relative; display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 3 / 2; color: #fff; text-decoration: none; background: var(--ink); }
.in-cartao:last-child { aspect-ratio: auto; }
.in-cartao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.in-cartao::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 25, 20, .75), rgba(15, 25, 20, 0) 55%); }
.in-cartao-texto { position: absolute; left: clamp(14px, 2.4vw, 28px); right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 26px); z-index: 1; display: grid; gap: 4px; }
.in-cartao-t { font-family: var(--f-disp); font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.1; }
.in-cartao-o { font-size: .85rem; color: rgba(255, 255, 255, .85); }
.in-cartao:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .in-cartao:hover img { transform: scale(1.04); } }

/* ── Visite-nos ───────────────────────────────────────── */
.in-visita { margin-top: clamp(56px, 9vw, 112px); padding: clamp(48px, 8vw, 96px) var(--pad); background: var(--warm); color: var(--ink); }
.in-visita-dentro { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.in-visita .in-h2s { color: var(--ink); }
.in-visita-foto { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; }
.in-visita-foto img { width: 100%; height: 100%; object-fit: cover; }
.in-dados { margin: 22px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; font-size: .95rem; line-height: 1.6; }
.in-dados dt { color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding-top: .25em; }
.in-dados dd { margin: 0; }
.in-dados a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.in-accoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ── Telemóvel ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-passos { grid-template-columns: repeat(2, auto); }
  .ws-quadro { display: none; }
  .hero-ws .ws-fundo { inset: 0; width: 100%; height: 100%; object-position: 50% 30%; filter: saturate(1.05); }
  .hero-ws .hero-texto { max-width: 900px; }
}
@media (max-width: 768px) {
  .hero-foto { object-position: 58% 30%; }
  .hero { padding-bottom: 96px; } /* a barra fica acima do botão flutuante do WhatsApp */
  .hero-veu { background:
    linear-gradient(0deg, rgba(14,26,20,.96) 0%, rgba(14,26,20,.9) 45%, rgba(14,26,20,.35) 72%, rgba(14,26,20,.15) 100%); }
  .hero-texto { align-self: end; }
  .hero-olho { gap: 12px; letter-spacing: .24em; }
  .hero-h { font-size: clamp(2.9rem, 13vw, 4.2rem); }
  .hero-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-top: 28px; max-width: none; }
  .hero-factos li { flex-direction: column; gap: 2px; }
  .hero-passos li { gap: 10px; font-size: .82rem; }
  .hero-ws .hero-veu { background: linear-gradient(0deg, rgba(14,26,20,.97) 0%, rgba(14,26,20,.92) 56%, rgba(14,26,20,.62) 80%, rgba(14,26,20,.4) 100%); }
  .topo-ctrl { top: 14px; bottom: auto; right: 14px; gap: 6px; }
  .topo-ctrl button { width: 34px; height: 34px; }
  .in-atelier { grid-template-columns: 1fr 1fr; }
  .in-cartao, .in-cartao:last-child { aspect-ratio: 3 / 4; }
  .in-visita-dentro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .in-cabeca { align-items: center; }
  .in-cartao-o { font-size: .74rem; }
  .in-dados { grid-template-columns: 1fr; gap: 2px 0; }
  .in-dados dd { margin-bottom: 12px; }
  .in-accoes .btn { flex: 1 1 auto; justify-content: center; }
  .hero-btns .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .in-fita { animation: none; }
  .in-fita-janela { overflow-x: auto; }
  .in-produto[aria-hidden="true"] { display: none; }
  .in-pilar-foto img, .in-cartao img, .in-produto-img img { transition: none; animation: none; }
}