/* ===================================================================
   DR VISUALS — Sistema visual
   Direção: CLARO, CLÁSSICO, MONOCROMÁTICO COM COBRE.
   A paleta vem do preçário do Diogo: branco de papel, carvão e um único
   acento cobre/rose-gold. A interface é neutra de propósito — toda a cor
   do site vem das fotografias.
   =================================================================== */

:root{
  /* ===== PALETA: retirada do preçário do Diogo =====
     Monocromático (branco → cinza claro → carvão) com UM acento:
     cobre / rose-gold. A cor toda vem das fotografias — a interface
     fica neutra para as deixar respirar. */

  /* --- BASE: branco de papel, quase neutro --- */
  --white:#FBFAF9;
  --sand:#F2F0ED;      /* secções alternadas (cinza-claro, não areia) */
  --sand-2:#E4E1DD;    /* blocos e placeholders */

  /* --- TINTA: carvão quente, como o serif do preçário --- */
  --ink:#211E1C;
  --ink-2:#332F2C;

  /* --- ACENTO ÚNICO: cobre / rose-gold do preçário --- */
  --sun:#B4795A;              /* cobre — texto e ações */
  --sun-soft:#CFA98F;         /* rose-gold claro — decorativo */
  --sun-wash:rgba(180,121,90,.08);

  /* --- TEXTO --- */
  --text:#3F3A36;
  --text-soft:#797169;
  --on-dark:rgba(251,250,249,.86);
  --on-dark-soft:rgba(251,250,249,.58);

  /* --- LINHAS (sempre translúcidas) --- */
  --line:rgba(33,30,28,.12);
  --line-dark:rgba(251,250,249,.16);

  /* --- TIPOGRAFIA ---
     Playfair Display: serifada clássica de alto contraste — é a família
       do preçário ("Pricing Guide", os valores).
     DM Sans: geométrica legível para interface e corpo. */
  --serif:'Playfair Display', Georgia, serif;
  --sans:'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* --- RAIOS: discretos. O preçário é clássico, não arredondado. --- */
  --r-sm:6px; --r-md:10px; --r-lg:14px;

  /* --- MOVIMENTO --- */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,.24,1);

  --maxw:1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background:var(--white);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.container--narrow{ max-width:820px; }

.section{ padding:clamp(64px,9vw,132px) 0; }
.section--sand{ background:var(--sand); }
.section--dark{ background:var(--ink); color:var(--on-dark); }
.section--center{ text-align:center; }

/* ===================================================================
   TIPOGRAFIA
   =================================================================== */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;              /* Playfair: nunca bold — o contraste já é alto */
  line-height:1.1;
  letter-spacing:-.005em;
  color:var(--ink);
}
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--white); }

h1{ font-size:clamp(2.6rem,6.5vw,4.6rem); }
h2{ font-size:clamp(2.1rem,4.6vw,3.4rem); }
h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); }

.eyebrow{
  font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sun);
}
.divider{
  width:72px; height:2px; margin:18px 0 22px;
  background:linear-gradient(90deg,var(--sun),transparent);
  border-radius:2px;
}
.section--center .divider{ margin-left:auto; margin-right:auto;
  background:linear-gradient(90deg,transparent,var(--sun),transparent); }

.lead{
  font-size:clamp(1.02rem,1.5vw,1.16rem);
  color:var(--text-soft);
  max-width:62ch;
}
.section--center .lead{ margin-left:auto; margin-right:auto; }
.section--dark .lead{ color:var(--on-dark-soft); }

em{ font-style:italic; color:var(--sun); }

/* ===================================================================
   BOTÕES
   =================================================================== */
/* O atributo hidden tem de ganhar ao display do .btn. Sem esta linha, um
   <button class="btn" hidden> aparecia na mesma — o display:inline-flex abaixo
   vence o display:none que o [hidden] traz por omissão do navegador. Aconteceu
   com o "Desfazer as marcas", que estava sempre à vista. */
[hidden]{ display:none !important; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:17px 36px; border:1.5px solid transparent; border-radius:3px;
  cursor:pointer; text-decoration:none;
  transition:all .45s var(--ease);
}
.btn--sun{
  background:var(--sun); color:#fff; border-color:var(--sun);
  box-shadow:0 12px 30px -10px rgba(180,121,90,.42);
}
.btn--sun:hover{
  background:#9E6849; border-color:#9E6849;
  transform:translateY(-2px);
  box-shadow:0 18px 40px -12px rgba(180,121,90,.52);
}
.btn--ink{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.btn--ink:hover{ background:transparent; color:var(--ink); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--sun); color:var(--sun); transform:translateY(-2px); }
.section--dark .btn--ghost{ color:var(--white); border-color:var(--line-dark); }
.section--dark .btn--ghost:hover{ border-color:var(--sun-soft); color:var(--sun-soft); }

/* ===================================================================
   HEADER
   =================================================================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.header__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.header.scrolled,.header--solid{
  background:rgba(251,250,249,.92);
  backdrop-filter:saturate(140%) blur(14px);
  padding:14px 0;
  box-shadow:0 1px 0 var(--line);
}
/* --- Logótipo duplo: claro sobre a foto, escuro no header sólido ---
   Usamos o WORDMARK (script + tagline, sem as alianças) porque é 4,2:1 —
   o logótipo completo é 2,6:1 e fica ilegível na altura de um header.
   As alianças aparecem sozinhas no favicon e no loader. */
.brand{ display:block; line-height:0; text-decoration:none; flex:0 0 auto; }
.brand img{
  width:auto; height:44px; display:block;
  transition:height .5s var(--ease), opacity .4s var(--ease);
}
.brand .logo-dark{ display:none; }
.header.scrolled .brand img,.header--solid .brand img{ height:36px; }
.header.scrolled .logo-light,.header--solid .logo-light{ display:none; }
.header.scrolled .logo-dark,.header--solid .logo-dark{ display:block; }

/* ===================================================================
   LOADER DE ENTRADA — uma vez por sessão
   =================================================================== */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__mark{ width:92px; height:auto; animation:loader-breathe 2.4s var(--ease-soft) infinite; }
@keyframes loader-breathe{
  0%,100%{ opacity:.55; transform:scale(.97); }
  50%    { opacity:1;   transform:scale(1); }
}
.loader__bar{
  width:150px; height:2px; background:var(--sand-2);
  border-radius:2px; overflow:hidden;
}
.loader__fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--sun-soft),var(--sun));
  transition:width .35s var(--ease);
}
.loader__word{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--text-soft);
}
@media (prefers-reduced-motion:reduce){
  .loader__mark{ animation:none; }
}

.nav{ display:flex; gap:30px; }
.nav a{
  font-size:13.5px; letter-spacing:.04em; text-decoration:none;
  color:rgba(251,250,249,.9); position:relative; padding:4px 0;
  transition:color .3s;
}
.header.scrolled .nav a,.header--solid .nav a{ color:var(--text); }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--sun); transition:width .4s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{ width:100%; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{
  display:block; width:24px; height:2px; margin:5px 0; border-radius:2px;
  background:var(--white); transition:.35s var(--ease);
}
.header.scrolled .nav-toggle span,.header--solid .nav-toggle span{ background:var(--ink); }
/* Aberto, as três barras viram um ×: a do meio desaparece e as outras cruzam-se.
   Sem isto não havia sinal nenhum de que aquilo também fecha — carregava-se no
   mesmo sítio às cegas. */
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===================================================================
   HERO
   =================================================================== */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }

/* Rotação com dissolução. Cada imagem ocupa a mesma caixa e só a ativa tem
   opacidade — assim a passagem é um fundido, sem salto de layout. */
.hero__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.8s var(--ease-soft);
}
.hero__slide.is-on{ opacity:1; }
.hero__slide picture{ display:block; width:100%; height:100%; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  /* --foco é ONDE O ROSTO ESTÁ dentro da fotografia, em percentagem dela
     própria. Não é um ajuste estético: com object-position em percentagem, o
     ponto que está a p% da imagem fica exatamente a p% do ecrã — em 16:9, em
     ultrawide, em 32:9 ou no telemóvel ao alto. Um único valor serve todos os
     formatos, e o assunto nunca sai do enquadramento.
     Antes havia um valor para computador e outro para telemóvel, afinados a
     olho num 16:9: num ecrã ultrawide cortavam rostos. */
  object-position: var(--foco, 50% 35%);
  /* --zoom aproxima a fotografia a partir do ponto de ancoragem. O corte é só
     de apresentação — o ficheiro fica inteiro e continua a adaptar-se a cada
     ecrã. A origem é o mesmo ponto do --foco: é lá que está o assunto, e é de
     lá que a aproximação tem de partir. */
  transform: scale(var(--zoom, 1));
  transform-origin: var(--foco, 50% 35%);
}
/* O zoom lento só corre na imagem visível, senão as quatro animavam ao mesmo
   tempo em segundo plano e gastavam bateria à toa. */
.hero__slide.is-on img{ animation:hero-zoom 11s var(--ease-soft) forwards; }
@keyframes hero-zoom{
  from{ transform:scale(calc(var(--zoom, 1) * 1.07)); }
  to{   transform:scale(var(--zoom, 1)); }
}

@media (prefers-reduced-motion:reduce){
  .hero__slide{ transition:none; }
  .hero__slide.is-on img{ animation:none; }
}
/* Duplo gradiente: vertical para o header + radial em baixo-esquerda,
   onde assenta o texto. Sem isto, o título perde-se em fotos claras. */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(33,30,28,.46) 0%,rgba(33,30,28,.10) 34%,rgba(33,30,28,.30) 64%,rgba(33,30,28,.74) 100%),
    radial-gradient(115% 80% at 0% 100%,rgba(33,30,28,.62) 0%,rgba(33,30,28,.18) 45%,transparent 70%);
}
.hero__content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(64px,10vh,120px);
}
.hero__eyebrow{ color:var(--sun-soft); }
.hero h1{ color:#fff; max-width:15ch; margin:16px 0 20px;
  text-shadow:0 2px 40px rgba(0,0,0,.25); }
.hero__sub{ color:rgba(255,255,255,.9); max-width:46ch; margin-bottom:32px; font-size:1.08rem; }

/* ===================================================================
   PROVA SOCIAL — a barra de credibilidade (5.0 · 14 avaliações)
   =================================================================== */
.trust{ background:var(--ink); padding:26px 0; }
.trust__inner{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(20px,5vw,64px); flex-wrap:wrap; text-align:center;
}
.trust__item{ color:var(--on-dark); font-size:14px; }
.trust__num{
  display:block; font-family:var(--serif); font-size:1.9rem;
  color:var(--sun-soft); line-height:1;
}
.trust__stars{ color:var(--sun-soft); letter-spacing:3px; }

/* ===================================================================
   TESTEMUNHOS
   =================================================================== */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.quote{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:32px 28px; display:flex; flex-direction:column; gap:16px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.quote:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -24px rgba(33,30,28,.18); }
.quote__stars{ color:var(--sun); letter-spacing:2px; font-size:14px; }
.quote__text{
  font-family:var(--serif); font-size:1.1rem; line-height:1.5; color:var(--ink);
}
.quote__author{ font-size:13px; color:var(--text-soft); margin-top:auto; }
.quote__author strong{ color:var(--ink); font-weight:500; }

/* ===================================================================
   PACOTES
   =================================================================== */
.packs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; align-items:start; }
.pack{
  position:relative; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(30px,4vw,46px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.pack:hover{ transform:translateY(-5px); box-shadow:0 32px 64px -32px rgba(33,30,28,.22); }
.pack--featured{ border-color:var(--sun); background:linear-gradient(180deg,var(--sun-wash),transparent 42%); }
.pack__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--sun); color:#fff; font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:7px 18px; border-radius:999px; white-space:nowrap;
}
.pack__name{ font-family:var(--serif); font-size:2.1rem; color:var(--ink); }
.pack__kind{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft); }
.pack__price{
  font-family:var(--serif); font-size:3rem; color:var(--sun);
  line-height:1; margin:14px 0 6px;
}
.pack__list{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.pack__list li{ position:relative; padding-left:30px; font-size:15.5px; }
.pack__list li::before{
  content:"✓"; position:absolute; left:0; top:2px;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--sun);
  border:1.5px solid var(--sun-soft); border-radius:50%;
}
.pack .btn{ width:100%; margin-top:30px; }
.pack__list li.is-off{ color:var(--text-soft); opacity:.62; }
.pack__list li.is-off::before{
  content:"—"; border-color:var(--line); color:var(--text-soft); font-size:.7rem;
}

/* ===================================================================
   EXTRAS
   =================================================================== */
.extras{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0 40px; margin-top:44px;
  border-top:1px solid var(--line);
}
.extra{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.extra__name{ font-size:15px; color:var(--text); }
.extra__price{
  font-family:var(--serif); font-size:1.12rem; color:var(--sun);
  white-space:nowrap;
}

/* ===================================================================
   PALETA (bloco de referência — remover antes de publicar)
   =================================================================== */
.swatches{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:40px; }
.sw__chip{ height:86px; border-radius:var(--r-sm); border:1px solid var(--line); }
.sw__name{ font-size:12px; margin-top:9px; color:var(--ink); font-weight:500; }
.sw__hex{ font-size:11.5px; color:var(--text-soft); letter-spacing:.04em; }
.typespec{ margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.typespec__box{ border:1px solid var(--line); border-radius:var(--r-md); padding:28px; }

/* ===================================================================
   GALERIA (mosaico)
   =================================================================== */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:48px; }
.grid__item{
  position:relative; overflow:hidden; border-radius:var(--r-sm);
  aspect-ratio:3/4; background:var(--sand-2);
}
.grid__item--wide{ grid-column:span 2; aspect-ratio:3/2; }
.grid__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-soft);
}
.grid__item:hover img{ transform:scale(1.05); }
.grid__cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 20px 18px;
  background:linear-gradient(0deg,rgba(33,30,28,.72),transparent);
  color:#fff; font-family:var(--serif); font-size:1.15rem;
  opacity:0; transform:translateY(8px); transition:.45s var(--ease);
}
.grid__item:hover .grid__cap{ opacity:1; transform:none; }

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{ background:var(--ink); color:var(--on-dark-soft); padding:64px 0 28px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; }
.footer h4{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sun-soft);
  margin-bottom:16px;
}
.footer a{ color:var(--on-dark); text-decoration:none; display:block; padding:5px 0; font-size:14.5px; }
.footer a:hover{ color:var(--sun-soft); }
.footer__base{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-dark);
  font-size:12.5px; text-align:center;
}

/* ===================================================================
   REVEAL
   =================================================================== */
.reveal{ opacity:0; transform:translateY(18px);
  transition:opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ===================================================================
   UTILITÁRIOS
   =================================================================== */
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn--on-photo{ color:#fff; border-color:rgba(255,255,255,.45); }
.btn--on-photo:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.header__cta{ padding:12px 24px; font-size:12px; }

.link-arrow{
  color:var(--sun); text-decoration:none; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid transparent; transition:border-color .35s var(--ease);
}
.link-arrow span{ display:inline-block; transition:transform .35s var(--ease); }
.link-arrow:hover{ border-color:var(--sun); }
.link-arrow:hover span{ transform:translateX(5px); }

figure.grid__item{ margin:0; }
.grid__cap{ display:block; }

/* ===================================================================
   ACESSIBILIDADE
   =================================================================== */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:14px 22px; border-radius:0 0 4px 0;
  font-size:14px; text-decoration:none;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--sun); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .hero__media img{ animation:none; }
}

/* ===================================================================
   MOBILE — testar a 390px E 380px
   =================================================================== */
@media (max-width:1080px){
  .packs{ grid-template-columns:1fr; max-width:620px; margin-left:auto; margin-right:auto; }
  .extras{ grid-template-columns:repeat(2,1fr); gap:0 28px; }
  .swatches{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:920px){
  .quotes{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:28px; }
  .typespec{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:640px){
  .extras{ grid-template-columns:1fr; }
}
/* 940px, não 760: com 6 itens no menu + logótipo + CTA, o cabeçalho
   deixa de caber bem antes do telemóvel — a 768px partia em duas linhas
   e cortava o botão. */
@media (max-width:940px){
  body{ font-size:16px; }
  /* A CAUSA DA AVARIA DO MENU NO TELEMÓVEL.
     O .header.scrolled tem backdrop-filter, e um backdrop-filter faz com que o
     position:fixed dos elementos lá dentro deixe de se referir ao ecrã e passe
     a referir-se à CAIXA DO CABEÇALHO. Assim que se deslizava 40 px, o menu
     colapsava para dentro do cabeçalho (375x88), os links empilhavam-se lá em
     cima e não se clicava em nada. Só funcionava no topo da página, que é
     exactamente o que o Caio descreveu.
     No telemóvel o cabeçalho fica sólido, sem desfoque — não se perde nada. */
  .header.scrolled, .header--solid{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:var(--white);
  }

  .nav{
    position:fixed; inset:0; background:var(--white);
    flex-direction:column; align-items:center; justify-content:center; gap:8px;
    transform:translateX(100%); transition:transform .45s var(--ease);
    padding:96px 24px calc(40px + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .nav.open{ transform:none; }
  .nav a{
    color:var(--ink) !important; font-size:1.45rem; font-family:var(--serif);
    padding:14px 24px; width:100%; max-width:320px; text-align:center;
    border-radius:var(--r-sm);
    /* Cada item entra com um pequeno atraso, um a seguir ao outro. */
    opacity:0; transform:translateY(10px);
    transition:opacity .4s var(--ease), transform .4s var(--ease), background .2s;
  }
  .nav a:active{ background:var(--sand-2); }
  .nav.open a{ opacity:1; transform:none; }
  .nav.open a:nth-child(1){ transition-delay:.10s; }
  .nav.open a:nth-child(2){ transition-delay:.15s; }
  .nav.open a:nth-child(3){ transition-delay:.20s; }
  .nav.open a:nth-child(4){ transition-delay:.25s; }
  .nav.open a:nth-child(5){ transition-delay:.30s; }
  .nav.open a:nth-child(6){ transition-delay:.35s; }
  .nav-toggle{ display:block; z-index:110; position:relative; }
  body.nav-open{ overflow:hidden; }

  /* Com o menu aberto o fundo passa a branco, mas o cabeçalho continuava com
     o logótipo claro e as barras do botão claras — branco sobre branco.
     Desapareciam os dois: não se via a marca nem o botão de fechar. */
  body.nav-open .brand .logo-light{ display:none; }
  body.nav-open .brand .logo-dark{ display:block; }
  body.nav-open .nav-toggle span{ background:var(--ink); }
  /* Ordem de camadas com o menu aberto: conteúdo < menu < marca e botão.
     Ao dar z-index ao menu, o logótipo (que não tinha nenhum) ficou por baixo
     do fundo branco e desapareceu — só se via o botão, que já tinha 110. */
  .nav{ z-index:105; }
  body.nav-open .brand{ position:relative; z-index:110; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .grid__item--wide{ grid-column:span 2; }
  .btn{ width:100%; }
  .header__cta{ display:none; }
  .trust__inner{ gap:22px; }
}
@media (max-width:380px){
  .pack__price{ font-size:2.5rem; }
  .hero h1{ font-size:2.3rem; }
}

/* ===================================================================
   PORTFÓLIO — grelha de galerias
   =================================================================== */
.pf{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pf__card{ text-decoration:none; display:block; }
.pf__media{
  overflow:hidden; border-radius:var(--r-sm); aspect-ratio:4/5;
  background:var(--sand-2);
}
.pf__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-soft);
}
.pf__card:hover .pf__media img{ transform:scale(1.045); }
.pf__meta{ padding:18px 2px 0; }
.pf__nome{
  font-family:var(--serif); font-size:1.45rem; color:var(--ink);
  transition:color .35s var(--ease);
}
.pf__card:hover .pf__nome{ color:var(--sun); }
.pf__tipo{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-soft); margin-top:6px;
}

/* ===================================================================
   GALERIA — masonry por colunas
   =================================================================== */
.gal-head{ padding-bottom:clamp(30px,4vw,52px); }
.gal-head h1{ font-size:clamp(2.4rem,5.4vw,3.8rem); }

.mas{ column-count:3; column-gap:14px; }
.mas__item{
  display:block; margin:0 0 14px; break-inside:avoid;
  overflow:hidden; border-radius:var(--r-sm); background:var(--sand-2);
  position:relative; cursor:zoom-in;
}
.mas__item img{ width:100%; height:auto; display:block; transition:transform .9s var(--ease-soft); }
.mas__item:hover img{ transform:scale(1.035); }

.gal-nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-top:52px; padding-top:32px; border-top:1px solid var(--line);
}

/* ===================================================================
   LIGHTBOX
   =================================================================== */
.lb{
  position:fixed; inset:0; z-index:500;
  background:rgba(20,18,16,.96);
  display:flex; align-items:center; justify-content:center;
  animation:lb-in .3s var(--ease);
}
/* `display:flex` acima vence o atributo [hidden] do browser — sem esta regra
   o lightbox nasce aberto. */
.lb[hidden]{ display:none; }
@keyframes lb-in{ from{opacity:0} to{opacity:1} }
.lb__img{
  max-width:92vw; max-height:88vh; width:auto; height:auto;
  object-fit:contain; border-radius:4px;
}
.lb__x,.lb__nav{
  position:absolute; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.72); transition:color .3s, transform .3s;
  line-height:1; padding:14px;
}
.lb__x:hover,.lb__nav:hover{ color:#fff; }
.lb__x{ top:14px; right:20px; font-size:38px; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:56px; }
.lb__nav--prev{ left:8px; }
.lb__nav--next{ right:8px; }
.lb__nav:hover{ transform:translateY(-50%) scale(1.12); }
.lb__count{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.66); font-size:12.5px; letter-spacing:.14em;
}
body.lb-open{ overflow:hidden; }

@media (max-width:1080px){
  .pf{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .mas{ column-count:2; }
}
@media (max-width:600px){
  .pf{ grid-template-columns:1fr; }
  .mas{ column-count:1; }
  .gal-nav{ flex-direction:column; gap:16px; text-align:center; }
  .lb__nav{ font-size:40px; padding:10px; }
}

/* ===================================================================
   FAQ (preçário)
   =================================================================== */
.faq{ margin-top:34px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 34px 20px 0; position:relative;
  font-family:var(--serif); font-size:1.18rem; color:var(--ink);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--sun); font-size:1.4rem; transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq summary:hover{ color:var(--sun); }
.faq details p{ padding:0 0 22px; color:var(--text-soft); max-width:66ch; }

/* ===================================================================
   PASSOS (sobre)
   =================================================================== */
.passos{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-top:52px; }
.passo{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:32px 30px;
}
.passo__n{
  font-family:var(--serif); font-size:1.6rem; color:var(--sun-soft);
  display:block; margin-bottom:10px;
}
.passo h3{ margin-bottom:10px; }
.passo p{ color:var(--text-soft); font-size:15.5px; }

.citacao{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.35rem,2.8vw,1.9rem); line-height:1.45; color:var(--ink);
  max-width:24ch; margin:0 auto;
}
.citacao cite{
  display:block; font-style:normal; font-family:var(--sans);
  font-size:13px; letter-spacing:.1em; color:var(--text-soft); margin-top:20px;
}

/* ===================================================================
   CASAIS REAIS — grelha completa
   =================================================================== */
.quotes--todas{ grid-template-columns:repeat(3,1fr); margin-top:0; }

/* ===================================================================
   CONTACTO
   =================================================================== */
.ct-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:34px; align-items:start; }
.ct-form{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(26px,3.4vw,40px);
}
.ct-campo{ display:flex; flex-direction:column; margin-bottom:18px; }
.ct-linha{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ct-campo label{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-soft); margin-bottom:8px;
}
.req{ color:var(--sun); }
.ct-campo input,.ct-campo select,.ct-campo textarea{
  font-family:var(--sans); font-size:15.5px; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:4px;
  background:var(--white); transition:border-color .3s var(--ease);
}
.ct-campo input:focus,.ct-campo select:focus,.ct-campo textarea:focus{
  outline:none; border-color:var(--sun);
}
.ct-campo input.is-invalid{ border-color:#B4543F; }
.ct-campo textarea{ resize:vertical; line-height:1.6; }
.ct-ajuda{ font-size:12.5px; color:var(--text-soft); margin-top:6px; }
.ct-erro{ color:#B4543F; font-size:14px; margin-top:14px; }
.ct-nota{ font-size:12.5px; color:var(--text-soft); margin-top:16px; line-height:1.6; }

.ct-lado{ display:flex; flex-direction:column; gap:18px; }
.ct-cartao{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:26px 24px;
}
.ct-cartao--nota{ background:var(--sun-wash); border-color:rgba(180,121,90,.2); }

/* ===================================================================
   TEXTO CORRIDO (privacidade)
   =================================================================== */
.texto h2{ font-size:1.5rem; margin:38px 0 12px; }
.texto p{ color:var(--text-soft); margin-bottom:14px; }
.texto a{ color:var(--sun); }
.texto .aviso{
  margin-top:40px; padding:20px 22px; border-left:2px solid var(--sun);
  background:var(--sun-wash); font-size:14.5px;
}

@media (max-width:1080px){
  .quotes--todas{ grid-template-columns:repeat(2,1fr); }
  .ct-grid{ grid-template-columns:1fr; }
  .passos{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:760px){
  .quotes--todas{ grid-template-columns:1fr; }
  .ct-linha{ grid-template-columns:1fr; gap:0; }
}

/* ===================================================================
   SOBRE — o Diogo
   =================================================================== */
.sobre-grid{
  display:grid; grid-template-columns:1fr .85fr; gap:clamp(30px,5vw,64px);
  align-items:center;
}
.sobre-grid__foto{ margin:0; overflow:hidden; border-radius:var(--r-md); }
.sobre-grid__foto img{ width:100%; height:auto; display:block; }

.sobre-tira{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:clamp(34px,5vw,60px);
}
.sobre-tira figure{ margin:0; overflow:hidden; border-radius:var(--r-sm); aspect-ratio:3/4; }
.sobre-tira img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-soft);
}
.sobre-tira figure:hover img{ transform:scale(1.04); }

@media (max-width:940px){
  .sobre-grid{ grid-template-columns:1fr; gap:26px; }
  .sobre-grid__foto{ max-width:460px; margin:0 auto; }
}
@media (max-width:600px){
  .sobre-tira{ grid-template-columns:1fr 1fr; gap:10px; }
  .sobre-tira figure:last-child{ grid-column:span 2; aspect-ratio:16/10; }
}

/* telefone visível no cartão de contacto — texto, não só um botão,
   para ficar indexável e copiável */
.ct-telefone{ margin:0 0 14px; }
.ct-telefone a{
  font-family:var(--serif); font-size:1.25rem; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--sun-soft);
  transition:color .3s var(--ease);
}
.ct-telefone a:hover{ color:var(--sun); }
.ct-email{ margin:0 0 16px; font-size:15px; }
.ct-email a{ color:var(--text-soft); text-decoration:none; border-bottom:1px solid var(--sand-2); }
.ct-email a:hover{ color:var(--sun); }

/* ===================================================================
   CARREGAMENTO DAS FOTOGRAFIAS
   As fotografias passaram a 4K. São ficheiros grandes de propósito — é um
   site de fotografia — por isso o utilizador tem de perceber que está a
   carregar, senão parece que o clique não funcionou.
   =================================================================== */
.lb__loader{
  position:absolute; top:50%; left:50%; width:42px; height:42px;
  margin:-21px 0 0 -21px; border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:var(--sun-soft);
  animation:lb-gira .9s linear infinite;
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.lb.is-loading .lb__loader{ opacity:1; }
.lb.is-loading .lb__img{ opacity:0; }
.lb__img{ transition:opacity .35s var(--ease); }
@keyframes lb-gira{ to{ transform:rotate(360deg); } }

/* Grelha: fundo suave enquanto a miniatura não chega, para a página não
   "saltar" nem mostrar buracos brancos. */
.mas__item{ background:var(--sand-2); }
.mas__item img{ opacity:0; transition:opacity .5s var(--ease); }
.mas__item img.is-carregada{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .lb__loader{ animation-duration:2s; }
  .mas__item img{ transition:none; }
}

/* ===================================================================
   SIMULADOR DE ORÇAMENTO
   Mesma linguagem do amaralfilms.com: o total sobe ligeiramente e ganha
   halo enquanto o número corre. É esse detalhe que faz o valor parecer
   calculado em vez de trocado.
   =================================================================== */
.calc{
  display:grid; grid-template-columns:1fr 340px; gap:clamp(24px,4vw,48px);
  margin-top:clamp(30px,4vw,48px); align-items:start;
}
.calc__titulo{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sun); margin-bottom:14px; font-weight:500;
}

.calc-pacotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.calc-pacote{
  position:relative; display:flex; flex-direction:column; gap:3px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-md); padding:18px 16px;
  background:var(--white); transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.calc-pacote input{ position:absolute; opacity:0; pointer-events:none; }
.calc-pacote:hover{ border-color:var(--sun-soft); }
.calc-pacote.is-on{
  border-color:var(--sun); box-shadow:0 0 0 1px var(--sun) inset, 0 14px 30px -20px rgba(180,121,90,.5);
}
.calc-pacote__nome{ font-family:var(--serif); font-size:1.2rem; color:var(--ink); }
.calc-pacote__tipo{ font-size:11.5px; color:var(--text-soft); }
.calc-pacote__preco{ margin-top:6px; font-size:15px; color:var(--sun); }

.calc-extras{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.calc-extra{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
  background:var(--white); font-size:14px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.calc-extra input{ accent-color:var(--sun); width:16px; height:16px; flex:0 0 auto; }
.calc-extra:hover{ border-color:var(--sun-soft); }
.calc-extra.is-on{ border-color:var(--sun); background:var(--sun-wash); }
.calc-extra__nome{ flex:1; }
.calc-extra__preco{ color:var(--text-soft); font-size:13px; white-space:nowrap; }

.calc__painel{ position:relative; }
.calc__sticky{
  position:sticky; top:96px; background:var(--ink); color:var(--on-dark);
  border-radius:var(--r-md); padding:28px 26px;
}
.calc__rotulo{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sun-soft); margin-bottom:6px;
}
.calc__total{
  font-family:var(--serif); font-size:2.9rem; line-height:1; color:#fff;
  transition:transform .3s var(--ease), color .3s var(--ease), text-shadow .3s var(--ease);
}
.calc__total.is-changing{
  transform:translateY(-3px); color:var(--sun-soft);
  text-shadow:0 0 26px rgba(207,169,143,.32);
}
.calc__resumo{ list-style:none; margin:20px 0 0; padding:20px 0 0; border-top:1px solid rgba(255,255,255,.14); }
.calc__resumo li{
  display:flex; justify-content:space-between; gap:14px;
  font-size:13.5px; padding:5px 0; color:rgba(255,255,255,.82);
}
.calc__resumo li strong{ font-weight:500; color:#fff; }
.calc__resumo li span{ white-space:nowrap; color:var(--sun-soft); }
.calc__cta{ width:100%; margin-top:22px; text-align:center; }
.calc__nota{ font-size:11.5px; color:rgba(255,255,255,.5); margin-top:14px; line-height:1.5; }

@media (max-width:940px){
  .calc{ grid-template-columns:1fr; }
  .calc__sticky{ position:static; }
  .calc-pacotes{ grid-template-columns:1fr; }
  .calc-extras{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .calc__total{ transition:none; }
}

/* Extras indisponíveis: cinzentos e sem cursor, mas ainda legíveis. Esconder
   dava a impressão de que o extra não existe; assim vê-se que existe e que
   depende de haver vídeo no pacote. */
.calc-extra.is-bloqueado{
  opacity:.42; cursor:not-allowed; background:var(--sand);
  border-color:var(--line);
}
.calc-extra.is-bloqueado input{ cursor:not-allowed; }
.calc__aviso{
  font-size:12.5px; color:var(--sun); background:var(--sun-wash);
  border-left:2px solid var(--sun-soft); padding:9px 12px;
  border-radius:0 var(--r-sm) var(--r-sm) 0; margin-bottom:12px;
}
.calc__aviso[hidden]{ display:none; }

/* Campo-armadilha: invisível para pessoas, preenchido por robôs. Fora do ecrã
   em vez de display:none — alguns robôs ignoram campos escondidos assim. */
.ct-armadilha{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ct-feito{
  margin-top:12px; font-size:13.5px; color:var(--sun);
  background:var(--sun-wash); border-left:2px solid var(--sun-soft);
  padding:10px 12px; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.ct-feito[hidden]{ display:none; }

/* Horas extra: contador, não caixa de seleção. O preço por hora muda com o
   pacote, por isso mostra-se sempre quanto custa e porquê. */
.calc-horas{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 18px; background:var(--white);
}
.calc-horas__texto{ display:flex; flex-direction:column; gap:3px; }
.calc-horas__nome{ font-size:14.5px; color:var(--ink); }
.calc-horas__preco{ font-size:12.5px; color:var(--text-soft); }
.calc-horas__preco strong{ color:var(--sun); font-weight:500; }
.calc-horas__contador{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.calc-horas__btn{
  width:34px; height:34px; border:1px solid var(--line); background:var(--white);
  border-radius:var(--r-sm); font-size:17px; line-height:1; color:var(--ink);
  cursor:pointer; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.calc-horas__btn:hover{ border-color:var(--sun); background:var(--sun-wash); }
.calc-horas__valor{
  min-width:38px; text-align:center; font-family:var(--serif);
  font-size:1.25rem; color:var(--ink);
}
@media (max-width:520px){
  .calc-horas{ flex-direction:column; align-items:flex-start; }
}

/* ---------- estado da entrega, na página do casal ---------- */
.en-recado{
  margin-top:18px; font-size:15px; line-height:1.6; color:var(--text-soft);
  border-left:2px solid var(--sun); padding-left:16px; text-align:left;
}
.en-estado{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.en-peca{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px; text-align:center;
}
.en-peca__nome{ font-family:var(--serif); font-size:1.05rem; color:var(--ink); }
.en-peca__estado{ font-size:13px; color:var(--text-soft); margin:6px 0 10px; }
.en-peca--entregue{ border-color:#2e7d5b; }
.en-peca--entregue .en-peca__estado{ color:#2e7d5b; }
.en-peca--atrasado .en-peca__estado{ color:var(--sun); }
@media (max-width:700px){ .en-estado{ grid-template-columns:1fr; } }

/* Listas dentro dos textos legais. A política de privacidade passou a ter
   alíneas quando as galerias privadas entraram — sem isto os pontos ficavam
   colados à margem e sem marcador. */
.texto ul{ margin:14px 0 18px 22px; display:flex; flex-direction:column; gap:8px; }
.texto li{ font-size:16px; line-height:1.68; color:var(--text-soft); list-style:disc; }
.texto li strong{ color:var(--ink); font-weight:500; }

/* ---- seletor de idioma ----
   No computador é um PT|EN discreto ao lado do botão; no telemóvel entra
   dentro do painel do menu, porque lá fora ficaria escondido por trás dele. */
.header__idioma{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--white); opacity:.85;
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  padding:6px 12px; transition:background .25s, color .25s, border-color .25s, opacity .25s;
}
.header__idioma:hover{ opacity:1; background:rgba(255,255,255,.16); }
.header.scrolled .header__idioma, .header--solid .header__idioma{
  color:var(--text); border-color:var(--line);
}
.header.scrolled .header__idioma:hover, .header--solid .header__idioma:hover{
  background:var(--sand-2); color:var(--ink); border-color:var(--sun);
}
.nav__idioma{ display:none; }
@media (max-width:940px){
  .header__idioma{ display:none; }
  .nav__idioma{
    display:block; margin-top:10px;
    font-size:.95rem !important; font-family:var(--sans) !important;
    letter-spacing:.16em; text-transform:uppercase; opacity:.75;
  }
}