/* =========================================================
   Filipa Taborda, base comum
   Paleta e tipografia definidas pela cliente. Não alterar.
   ========================================================= */

:root {
  /* Paleta */
  --ivory:     #F4F2EB;
  --mushroom:  #B7AFA3;
  --taupe:     #7E7467;
  --grey:      #D3D1CC;
  --espresso:  #2B2621;

  /* Taupe escurecido para texto pequeno passar no contraste AA.
     O Taupe da paleta fica reservado a detalhes. */
  --taupe-texto: #6E6558;
  --taupe-forte: #635B4F;   /* texto pequeno sobre fundo areia */
  --corpo:       #4A423A;

  /* Fundos derivados da paleta, por mistura, sem cores novas */
  --areia: #E2DED5;         /* Mushroom a 30% sobre Warm Ivory */
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --pedra: #DFDDD7;         /* Soft Grey a 65% sobre Warm Ivory */

  /* Tipos */
  --serifa: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Ritmo */
  --u: 0.5rem;
  --margem: clamp(1.25rem, 5vw, 5rem);
  --medida: 65ch;
  --seccao: clamp(5rem, 12vw, 11rem);
  --topo-altura: 4.5rem;

  /* Movimento */
  --lento: 900ms cubic-bezier(0.16, 0.84, 0.32, 1);
  --medio: 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --rapido: 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--topo-altura);
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.tem-abertura { padding-top: 0; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--mushroom); color: var(--ivory); }

:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

/* Acessibilidade ------------------------------------------------ */
.salta {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--espresso); color: var(--ivory);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.salta:focus { left: var(--margem); top: var(--u); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Tipografia ---------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serifa);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.005em;
  margin: 0;
}

.rotulo {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe-texto);
  margin: 0;
}

/* Cabeçalho ------------------------------------------------------ */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5) calc(var(--u) * 3);
  align-items: center;
  justify-content: space-between;
  min-height: var(--topo-altura);
  padding: calc(var(--u) * 2) var(--margem);
  color: var(--espresso);
  background: transparent;
  transition: background-color var(--medio), transform var(--medio), color var(--medio);
}
.topo--fundo { background: rgba(244, 242, 235, 0.94); backdrop-filter: blur(10px); }
.topo--recolhido { transform: translateY(-101%); }
.topo:hover { transform: none; }

/* Sobre a fotografia de abertura o cabeçalho lê-se a claro.
   Fora do topo da página volta sempre ao escuro, para nunca ficar ilegível. */
body.tem-abertura .topo--topo { color: var(--ivory); }
/* abertura clara (About): o cabeçalho mantém-se escuro */
body.abertura-clara .topo--topo { color: var(--espresso); }
.js .topo:not(.topo--topo):not(.topo--fundo) { background: rgba(244, 242, 235, 0.94); backdrop-filter: blur(10px); }

.marca {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  text-decoration: none;
  color: inherit;
}
.marca__mono {
  position: relative;
  display: block;
  width: 3.25rem;
  height: 1.8rem;
  flex: none;
}
.marca__mono img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity var(--medio);
}
.marca__mono .mono--claro { opacity: 0; }
/* sobre a fotografia de abertura, o monograma é claro */
body.tem-abertura .topo--topo .marca__mono .mono--claro { opacity: 1; }
body.tem-abertura .topo--topo .marca__mono .mono--escuro { opacity: 0; }
body.abertura-clara .topo--topo .marca__mono .mono--claro { opacity: 0; }
body.abertura-clara .topo--topo .marca__mono .mono--escuro { opacity: 1; }
.marca__nome {
  font-family: var(--serifa);
  font-size: clamp(0.875rem, 2.4vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.barra { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

.menu {
  display: flex;
  gap: clamp(calc(var(--u) * 2), 3vw, calc(var(--u) * 5));
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  position: relative;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity var(--rapido);
  white-space: nowrap;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio);
}
.menu a:hover, .menu a:focus-visible { opacity: 1; }
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }
.menu a[aria-current="page"] { opacity: 1; }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

/* Seletor de idioma */
.idioma {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.75);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.idioma a { text-decoration: none; opacity: 0.55; transition: opacity var(--rapido); }
.idioma a:hover { opacity: 1; }
.idioma [aria-current="true"] { opacity: 1; }
.idioma span { opacity: 0.35; }

/* Secções -------------------------------------------------------- */
.seccao { padding: var(--seccao) var(--margem); }
.seccao--curta { padding-top: calc(var(--seccao) * 0.55); padding-bottom: calc(var(--seccao) * 0.55); }

.seccao__cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u) calc(var(--u) * 3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: calc(var(--u) * 7);
}
.seccao__titulo {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 300;
  /* o Cormorant desce abaixo da linha: a caixa tem de o acompanhar */
  line-height: 1.24;
  padding-bottom: 0.04em;
}

/* Ligação com seta ------------------------------------------------ */
.ligacao {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--taupe-texto);
  transition: color var(--rapido);
}
.ligacao svg { width: 26px; height: 10px; transition: transform var(--medio); }
.ligacao:hover, .ligacao:focus-visible { color: var(--espresso); }
.ligacao:hover svg { transform: translateX(6px); }

/* Entradas ao deslizar -------------------------------------------- */
.js [data-entra] {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1000ms cubic-bezier(0.16, 0.84, 0.32, 1),
              transform 1100ms cubic-bezier(0.16, 0.84, 0.32, 1);
  will-change: opacity, transform;
}

/* imagem revelada por cortina, de baixo para cima */
.js [data-entra="corta"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1300ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

/* imagem revelada da esquerda, com a fotografia a assentar */
.js [data-entra="cortina"] { opacity: 1; transform: none; overflow: hidden; }
.js [data-entra="cortina"] > * {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.12);
  transition: clip-path 1300ms cubic-bezier(0.16, 0.84, 0.32, 1),
              transform 1600ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
.js [data-entra="cortina"].entrou > * { clip-path: inset(0 0 0 0); transform: scale(1); }

/* texto que sobe por trás de uma máscara */
.js [data-entra="linha"] { opacity: 1; transform: none; overflow: hidden; }
.js [data-entra="linha"] > * {
  display: block;
  transform: translateY(105%);
  transition: transform 1100ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
.js [data-entra="linha"].entrou > * { transform: translateY(0); }

/* bloco que cresce a partir de 96% */
.js [data-entra="cresce"] { transform: translateY(34px) scale(0.965); transform-origin: center bottom; }

/* O recorte final só interessa às entradas que o animam. Deixá-lo em
   todas cortava os descendentes das letras, com line-height apertado. */
.js [data-entra].entrou {
  opacity: 1;
  transform: none;
  will-change: auto;   /* sem isto o Safari recorta o que sai da caixa */
}
.js [data-entra="corta"].entrou { clip-path: inset(0 0 0 0); }

/* Rodapé --------------------------------------------------------- */
.rodape {
  padding: calc(var(--seccao) * 0.7) var(--margem) calc(var(--u) * 6);
  font-size: 0.8125rem;
  color: var(--taupe-texto);
}
.rodape__grelha {
  display: grid;
  gap: calc(var(--u) * 6);
  margin-bottom: calc(var(--u) * 8);
}
.rodape__marca .marca__mono { width: 4.5rem; height: 2.5rem; }
.rodape__frase {
  font-family: var(--serifa);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--espresso);
  margin: calc(var(--u) * 3) 0 0;
  max-width: 26ch;
}
.rodape h2 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe-texto);
  margin: 0 0 calc(var(--u) * 2.5);
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: calc(var(--u) * 1.5); }
.rodape a { text-decoration: none; transition: color var(--rapido); overflow-wrap: anywhere; }
.rodape a:hover { color: var(--espresso); }
.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u) calc(var(--u) * 3);
  justify-content: space-between;
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--grey);
  font-size: 0.75rem;
}
.rodape__fim p { margin: 0; }

/* Menu do telemóvel ----------------------------------------------- */
/* O botão e o painel são criados pelo site.js. Sem JavaScript, a barra de
   sempre fica no lugar e continua a funcionar: por isso tudo o que troca
   está preso à classe .js. */
.menu-botao {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: calc(var(--u) * 1.5);
  margin: calc(var(--u) * -1.5);
  color: inherit;
  cursor: pointer;
  line-height: 0;
}
.menu-botao__risco {
  display: block;
  width: 1.375rem;
  height: 1px;
  background: currentColor;
  transition: transform var(--rapido), opacity var(--rapido);
}
.menu-botao__risco + .menu-botao__risco { margin-top: 0.3125rem; }
.menu-botao[aria-expanded="true"] .menu-botao__risco:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}
.menu-botao[aria-expanded="true"] .menu-botao__risco:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] .menu-botao__risco:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

.menu-painel {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: calc(var(--topo-altura) + var(--u) * 4) var(--margem) calc(var(--u) * 7);
  background: var(--espresso);
  color: var(--ivory);
}
.menu-painel[hidden] { display: none; }
.menu-painel__lista { list-style: none; margin: 0; padding: 0; }
.menu-painel__lista li + li { margin-top: calc(var(--u) * 3.5); }
.menu-painel__lista a {
  display: inline-block;
  font-family: var(--serifa);
  font-weight: 300;
  font-size: clamp(2rem, 11vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: inherit;
}
.menu-painel__lista [aria-current] { color: var(--mushroom); }
.menu-painel__idioma {
  display: flex;
  gap: calc(var(--u) * 2);
  margin-top: auto;
  padding-top: calc(var(--u) * 6);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}
.menu-painel__idioma a { color: inherit; text-decoration: none; }
.menu-painel__idioma [aria-current] { color: var(--ivory); }

/* A entrada: cada linha sobe um pouco depois da anterior. */
.js .menu-painel__lista li,
.js .menu-painel__idioma { opacity: 0; transform: translateY(0.625rem); }
.menu-painel--aberto .menu-painel__lista li,
.menu-painel--aberto .menu-painel__idioma {
  opacity: 1;
  transform: none;
  transition: opacity 380ms var(--suave), transform 380ms var(--suave);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* Com o menu aberto: a página não rola e o cabeçalho fica por cima,
   a claro, sem fundo e sem se esconder. */
.menu-aberto, .menu-aberto body { overflow: hidden; }
.menu-aberto .topo { z-index: 55; color: var(--ivory); }
.menu-aberto .topo.topo--fundo { background: transparent; backdrop-filter: none; }
.menu-aberto .topo.topo--recolhido { transform: none; }
.menu-aberto .topo .marca__mono .mono--claro { opacity: 1; }
.menu-aberto .topo .marca__mono .mono--escuro { opacity: 0; }

@media (max-width: 47.99rem) {
  .js .barra { display: none; }
  .js .menu-botao { display: block; }
}

/* Navegação entre peças ------------------------------------------ */
.saltos {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 3);
  justify-content: space-between;
  /* Filete a segurar os dois cantos: sem ele, numa pagina larga, as duas
     ligacoes ficam a boiar cada uma no seu lado. */
  margin: 0 var(--margem);
  padding: calc(var(--u) * 4) 0 0;
  border-top: 1px solid var(--grey);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.saltos > a { flex: 1 1 14rem; text-decoration: none; color: var(--taupe-texto); transition: color var(--rapido); }
.saltos a:hover { color: var(--espresso); }
.saltos span {
  display: block;
  font-family: var(--serifa);
  font-size: 1.375rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--espresso);
  margin-top: calc(var(--u) * 0.75);
}
.saltos .fim { text-align: right; }

/* Ecrãs estreitos: o menu passa para baixo do logótipo */
@media (max-width: 30rem) {
  :root { --topo-altura: 5.5rem; }
  .topo { justify-content: center; text-align: center; }
  .barra { width: 100%; justify-content: center; gap: 1.25rem; }
  .menu { gap: calc(var(--u) * 2.5); }
  .menu a { letter-spacing: 0.12em; }
}

/* Com o botão do menu, o cabeçalho cabe numa linha outra vez. */
@media (max-width: 30rem) {
  .js { --topo-altura: 4.5rem; }
  .js .topo { justify-content: space-between; text-align: left; }
}

@media (min-width: 48rem) {
  .rodape__grelha {
    /* A coluna do contacto cresce com o endereço: um email comprido estava a
       passar por cima da coluna do idioma. As outras duas ficam presas. */
    grid-template-columns: minmax(0, 1fr) minmax(7rem, 9rem) minmax(7rem, auto) minmax(7rem, 9rem);
    column-gap: calc(var(--u) * 5);
    row-gap: calc(var(--u) * 6);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-entra] { opacity: 1; transform: none; clip-path: none; }
}