/* ============================================================
   Madalena Sancho de Almeida — UGC Creator
   Tudo o que é cor, tipo e espaçamento vive nas variáveis abaixo.
   ============================================================ */

:root{
  --ink:        #0C0B0A;
  --ink-2:      #131110;
  --ink-3:      #1B1715;
  --cream:      #F2EDE4;
  --cream-dim:  rgba(242,237,228,.60);
  --taupe:      #A38B72;
  /* Fundo da secção "Sobre mim": o mesmo tom das caixas do Equipamento */
  --sobre-fundo: #1B1715;
  --line:       rgba(242,237,228,.13);

  /* Tom de espera dos blocos ainda sem foto */
  --espera: linear-gradient(155deg,#241C17 0%,#4A382A 55%,#7A5E45 100%);

  /* Filtro das fotos. Para preto e branco: grayscale(1) contrast(1.06) */
  --foto-filtro: none;

  /* TRATAMENTO DAS FOTOS NA GRELHA (galerias e tiras).
     O visualizador em grande mostra sempre a foto original.
     Para desligar, troca o valor por: none */
  --grelha-filtro: brightness(.95) saturate(.92) contrast(1.02);
  --grelha-veu: linear-gradient(180deg, rgba(60,40,25,.04), rgba(20,14,10,.08));

  --display: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --pad:   clamp(20px, 5vw, 56px);
  --gap-y: clamp(80px, 12vw, 150px);
  --max:   1340px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-size:16px; font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.03em; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--gap-y); }
.section--tight{ padding-top:0; }
/* As tiras de fotografia encostam-se ao Trabalho selecionado, que já traz respiro próprio */
#fotografia{ padding-bottom:clamp(24px,3vw,44px); }
.section--alt{ background:var(--ink-2); }
.section--cream{ background:var(--cream); color:var(--ink); }

/* ---------- Partilhados ---------- */
.eyebrow{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--taupe); margin:0 0 16px; font-weight:400;
}
.section--cream .eyebrow{ color:#8A705A; }

.section__bar{
  display:flex; flex-wrap:wrap; gap:18px 30px;
  align-items:flex-end; justify-content:space-between;
  padding-bottom:20px; margin-bottom:clamp(26px,4vw,44px);
  border-bottom:1px solid var(--line);
}
.section--cream .section__bar{ border-bottom-color:rgba(12,11,10,.16); }
.section__title{ font-size:clamp(28px,5vw,50px); }
.section__sub{ margin:0; font-size:14px; color:var(--cream-dim); max-width:38ch; }
.section--cream .section__sub{ color:rgba(12,11,10,.6); }

.btn{
  display:inline-flex; align-items:center; gap:.6em; align-self:flex-start;
  border:1px solid var(--line); border-radius:999px; padding:13px 26px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:background .4s ease, border-color .4s ease, color .4s ease;
}
.btn span{ transition:transform .4s ease; }
.btn:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn:hover span{ transform:translateX(4px); }
.btn--solid{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn--solid:hover{ background:transparent; color:var(--cream); border-color:var(--line); }
.btn--ghost{ border-color:rgba(242,237,228,.45); backdrop-filter:blur(4px); }

/* ============================================================
   BLOCOS DE IMAGEM (slots)
   Cada bloco mostra que foto leva. Grava o ficheiro em assets/img
   com o nome indicado e a legenda desaparece sozinha.
   ============================================================ */
.slot{
  position:relative; margin:0; overflow:hidden;
  background:var(--espera); display:grid; place-items:center;
}
.slot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .6s ease, transform 1.1s cubic-bezier(.2,.6,.2,1);
  filter:var(--foto-filtro);
}
.slot.is-filled img{ opacity:1; }
.slot.is-filled figcaption{ display:none; }
.slot figcaption{
  position:relative; z-index:1; text-align:center; padding:20px;
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
.slot__ratio{
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:4px 11px;
}
.slot__file{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px;
  color:#fff; background:rgba(0,0,0,.4); border-radius:3px; padding:3px 9px;
}
.slot__hint{ font-size:11px; line-height:1.5; color:rgba(255,255,255,.62); max-width:24ch; }

/* ---------- Navegação ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:60;
  border-bottom:1px solid transparent;
  transition:background .5s ease, backdrop-filter .5s ease, border-color .5s ease;
}
.nav.is-stuck{ background:rgba(12,11,10,.8); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav__inner{
  max-width:var(--max); margin-inline:auto; padding:16px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav__logo{ font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:-.01em; }
.nav__links,.nav__social{ display:none; }
.nav__links a,.nav__social a{ font-size:11.5px; letter-spacing:.09em; color:var(--cream-dim); transition:color .3s ease; }
.nav__links a:hover,.nav__social a:hover{ color:var(--cream); }

.nav__toggle{ width:26px; height:16px; position:relative; }
.nav__toggle span{ position:absolute; left:0; right:0; height:1px; background:var(--cream); transition:transform .4s ease; }
.nav__toggle span:first-child{ top:3px; }
.nav__toggle span:last-child{ bottom:3px; }
.nav.is-open .nav__toggle span:first-child{ transform:translateY(5px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child{ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:1023px){
  .nav.is-open{ background:var(--ink); height:100dvh; }
  .nav.is-open .nav__links{
    display:flex; flex-direction:column; gap:4px;
    position:absolute; inset:90px var(--pad) auto;
  }
  .nav.is-open .nav__links a{
    font-family:var(--display); font-weight:600; font-size:27px; letter-spacing:-.03em;
    color:var(--cream); padding-block:9px; border-bottom:1px solid var(--line);
  }
  .nav.is-open .nav__social{
    display:flex; gap:22px; position:absolute; inset:auto var(--pad) 40px;
  }
}
@media (min-width:1024px){
  .nav__links{ display:flex; gap:26px; }
  .nav__social{ display:flex; gap:20px; }
  .nav__toggle{ display:none; }
}

/* ---------- 1. Capa ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; justify-content:center;
  /* Telemóvel: texto em baixo, para não tapar a cara na composição vertical */
  align-items:flex-end;
  padding:110px var(--pad) clamp(44px,7vh,70px);
  isolation:isolate;
}
@media (min-width:768px){
  .hero{ align-items:center; }
}
/* Capa: imagem vertical no telemóvel, composição horizontal no computador.
   Para trocar qualquer uma delas, grava o ficheiro com o mesmo nome. */
.hero__media{
  position:absolute; inset:0; z-index:-2;
  background:#0C0B0A url("assets/img/capa-mobile.jpg?v=2") center/cover no-repeat;
}
@media (min-width:768px){
  .hero__media{ background-image:url("assets/img/capa-desktop.jpg?v=2"); }
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(12,11,10,.55) 0%, rgba(12,11,10,.22) 40%, rgba(12,11,10,.88) 100%);
}
.hero__content{ text-align:center; max-width:860px; }
.hero__mark{
  /* MAIÚSCULAS. Para voltar a minúsculas, apaga a linha do text-transform.
     O letter-spacing controla o ar entre as letras: 0 = colado, .18em = registo de marca. */
  font-family:var(--display); font-weight:600;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(29px,5.6vw,64px); line-height:1.06;
  margin-bottom:18px; text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero__tag{
  font-family:var(--display); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(17px,2.3vw,26px); line-height:1.3;
  color:var(--cream); max-width:30ch; margin:0 auto 32px;
  text-wrap:balance; text-shadow:0 1px 20px rgba(0,0,0,.65);
}
.hero__tag strong{ font-weight:600; }

/* ---------- 2. Faixa em movimento ---------- */
.marquee{
  background:var(--cream); color:var(--ink);
  overflow:hidden; padding:13px 0; white-space:nowrap;
}
.marquee__track{ display:inline-flex; animation:slide 34s linear infinite; }
/* Cada grupo nunca e' mais estreito do que o ecra. Sem isto, num monitor
   largo a faixa chegava ao fim do texto e ficava um pedaco branco vazio. */
.marquee__grupo{
  display:inline-flex; align-items:center; gap:26px;
  flex:0 0 auto; min-width:100vw; justify-content:space-around;
}
.marquee__track span{
  font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
}
.marquee__track i{ color:var(--taupe); font-style:normal; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- 3. Grelha de trabalho ---------- */
.filters{ display:flex; gap:20px; overflow-x:auto; scrollbar-width:none; }
.filters::-webkit-scrollbar{ display:none; }
/* Em ecras estreitos os filtros nao cabem numa linha e o ultimo ficava cortado.
   Passam a mudar de linha em vez de deslizarem para fora. */
@media (max-width:560px){
  .filters{ flex-wrap:wrap; overflow-x:visible; row-gap:12px; }
}
.filter{
  flex:0 0 auto; padding-bottom:5px;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cream-dim); border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.filter:hover{ color:var(--cream); }
.filter.is-active{ color:var(--cream); border-bottom-color:var(--taupe); }

/* Grelha em flex, para a última linha ficar centrada quando não está cheia */
.grid{
  --g:clamp(10px,1.8vw,18px);
  display:flex; flex-wrap:wrap; gap:var(--g);
  justify-content:flex-start;
}
.grid > .card{ flex:0 0 calc((100% - var(--g)) / 2); }
@media (min-width:760px){  .grid > .card{ flex-basis:calc((100% - 2 * var(--g)) / 3); } }
@media (min-width:1100px){ .grid > .card{ flex-basis:calc((100% - 3 * var(--g)) / 4); } }

.card{ display:block; width:100%; text-align:left; }
.card.is-hidden{ display:none; }
.card .slot{ aspect-ratio:9/16; border-radius:2px; }
.card:hover .slot.is-filled img{ transform:scale(1.04); }
.card__play{
  position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); display:grid; place-items:center; z-index:2;
  background:rgba(12,11,10,.22); backdrop-filter:blur(2px);
  transition:background .4s ease, transform .4s ease;
}
.card:hover .card__play{ background:rgba(242,237,228,.92); transform:scale(1.06); }
.card__play::before{
  content:""; border-left:8px solid var(--cream);
  border-block:5px solid transparent; margin-left:3px; transition:border-color .4s ease;
}
.card:hover .card__play::before{ border-left-color:var(--ink); }
.card__info{ padding:13px 2px 0; }
/* Título do cartão: reserva sempre a altura de duas linhas, para que a
   categoria por baixo fique alinhada em todos os cartões, tenha o título
   uma linha ou duas. */
.card__brand{
  font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.02em;
  line-height:1.25; min-height:2.5em;
}
.card__cat{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--taupe); margin-top:4px; }

/* ---------- 4. Categorias ---------- */
.cats{ display:grid; gap:clamp(10px,1.8vw,18px); grid-template-columns:1fr; }
@media (min-width:700px){ .cats{ grid-template-columns:repeat(2,1fr); } }
.cat{ position:relative; display:block; }
.cat .slot{ aspect-ratio:4/5; border-radius:2px; }
.cat:hover .slot.is-filled img{ transform:scale(1.05); }
.cat__label{
  position:absolute; inset:auto 0 22px; text-align:center; z-index:3;
  font-family:var(--display); font-weight:600; font-size:clamp(16px,2vw,21px);
  letter-spacing:-.02em; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.65);
  pointer-events:none;
}
.cat::after{
  content:""; position:absolute; inset:auto 0 0; height:45%; z-index:2; border-radius:0 0 2px 2px;
  background:linear-gradient(to top, rgba(12,11,10,.75), transparent);
  pointer-events:none;
}

/* ---------- 5. Faixa de marca ---------- */
.statement{ position:relative; display:grid; }
.slot--wide{ aspect-ratio:4/3; }
@media (min-width:900px){ .slot--wide{ aspect-ratio:16/9; } }
.statement__panel{ background:var(--ink-2); padding:clamp(40px,6vw,80px) var(--pad); }
.statement__inner{ max-width:46ch; }
.statement__title{ font-size:clamp(26px,3.6vw,44px); margin-bottom:18px; }
.statement__inner p{ color:var(--cream-dim); font-size:15px; margin:0 0 26px; }
@media (min-width:900px){
  .statement{ grid-template-columns:1fr; }
  .statement__panel{
    position:absolute; inset:0 0 0 auto; width:44%;
    background:linear-gradient(to right, rgba(12,11,10,0), rgba(12,11,10,.82) 22%, rgba(12,11,10,.94));
    display:flex; align-items:center;
  }
}

/* ---------- 6. Sobre ---------- */
.about{ display:grid; gap:clamp(30px,5vw,68px); }
@media (min-width:900px){ .about{ grid-template-columns:1fr 1fr; align-items:center; } }
.slot--portrait{ aspect-ratio:4/5; border-radius:2px; }
.about__text p{ color:var(--cream-dim); margin:0 0 20px; max-width:56ch; }
.about__titulo{
  font-family:var(--display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(26px,3.9vw,42px); line-height:1.12; color:var(--cream);
  margin:0 0 clamp(20px,2.6vw,28px); max-width:17ch;
}
.signature{ font-style:italic; color:var(--taupe) !important; }

/* ---------- 7. Equipamento ---------- */
.rail{
  display:flex; gap:14px; padding-inline:var(--pad); padding-bottom:8px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.gear{ flex:0 0 72%; scroll-snap-align:start; background:var(--ink-3); border-radius:2px; overflow:hidden; }
.gear .slot{ aspect-ratio:1/1; }
.gear__body{ padding:18px 18px 24px; }
.gear__name{ font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.02em; margin-bottom:7px; }
.gear__why{ font-size:13.5px; color:var(--cream-dim); margin:0; }
@media (min-width:700px){
  .rail{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,18px);
         overflow:visible; max-width:var(--max); margin-inline:auto; }
  .gear{ flex:none; }
}
@media (min-width:1100px){ .rail{ grid-template-columns:repeat(4,1fr); } }

/* ---------- 8. Processo ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(28px,4vw,38px); }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ border-top:1px solid var(--line); padding-top:18px; }
.step__num{ font-family:var(--display); font-weight:600; font-size:36px; letter-spacing:-.04em; color:var(--taupe); display:block; line-height:1; }
.step h3{ font-size:21px; margin:12px 0 9px; }
.step p{ font-size:13.5px; color:var(--cream-dim); margin:0; }
.terms{
  display:flex; flex-wrap:wrap; gap:12px 34px;
  margin-top:clamp(44px,6vw,72px); padding-top:24px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--cream-dim);
}

/* ---------- 9. Serviços ---------- */
.service{ border-top:1px solid rgba(12,11,10,.16); padding:26px 0; }
.service:last-child{ border-bottom:1px solid rgba(12,11,10,.16); }
.service h3{ font-size:clamp(23px,3.2vw,32px); margin-bottom:9px; }
.service p{ margin:0; color:rgba(12,11,10,.62); max-width:60ch; font-size:14.5px; }
@media (min-width:900px){
  .service{ display:grid; grid-template-columns:4fr 6fr; gap:38px; align-items:baseline; padding:32px 0; }
  .service h3{ margin:0; }
}
.services__note{ margin-top:32px; font-size:14px; color:rgba(12,11,10,.62); }
.services__note a{ border-bottom:1px solid rgba(12,11,10,.3); padding-bottom:2px; color:var(--ink); }

/* ---------- 10. Contacto ---------- */
.contact__title{ font-size:clamp(34px,7vw,72px); letter-spacing:-.045em; margin-bottom:24px; }
.contact__mail{
  display:inline-block; font-family:var(--display); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(20px,4vw,34px); color:var(--taupe);
  border-bottom:1px solid var(--line); padding-bottom:6px;
  transition:color .4s ease, border-color .4s ease;
}
.contact__mail:hover{ color:var(--cream); border-bottom-color:var(--cream); }

.form{ margin-top:clamp(44px,6vw,72px); max-width:660px; display:grid; gap:20px; }
.form__row{ display:grid; gap:20px; }
@media (min-width:640px){ .form__row{ grid-template-columns:1fr 1fr; } }
.form label{ display:block; }
.form label span{ display:block; font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--taupe); margin-bottom:7px; }
.form input,.form textarea{
  width:100%; background:none; border:0; border-bottom:1px solid var(--line);
  color:var(--cream); font:inherit; padding:8px 0; border-radius:0; transition:border-color .3s ease;
}
.form input:focus,.form textarea:focus{ outline:none; border-bottom-color:var(--taupe); }
.form textarea{ resize:vertical; }
.form__status{ font-size:13px; color:var(--taupe); margin:0; min-height:1em; }

/* ---------- Rodapé ---------- */
.footer{ border-top:1px solid var(--line); padding-block:clamp(44px,6vw,64px) 34px; }
.footer__cols{ display:grid; gap:34px; grid-template-columns:1fr; }
@media (min-width:700px){ .footer__cols{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .footer__cols{ grid-template-columns:repeat(4,1fr); gap:30px; } }
.footer__col{ display:flex; flex-direction:column; gap:9px; }
.footer__col h4{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--taupe); font-weight:400; margin-bottom:5px;
}
.footer__col a{ font-size:13.5px; color:var(--cream-dim); transition:color .3s ease; }
.footer__col a:hover{ color:var(--cream); }
.footer__loc{ font-size:13px; color:var(--cream-dim); margin:6px 0 0; }
.footer__col--mark{ justify-content:flex-end; }
.footer__mark{
  font-family:var(--display); font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:14px; margin:0 0 8px; line-height:1.3;
}
.footer__year{ font-size:11px; letter-spacing:.06em; color:var(--cream-dim); margin:0; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(8,7,6,.94); backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__stage{
  width:min(420px,92vw); aspect-ratio:9/16; max-height:86vh;
  background:var(--ink-3); border-radius:3px; overflow:hidden; display:grid; place-items:center;
}
.lightbox__stage video,.lightbox__stage iframe{ width:100%; height:100%; border:0; object-fit:cover; }
.lightbox__empty{ text-align:center; padding:26px; font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--cream-dim); }
.lightbox__close{ position:absolute; top:16px; right:20px; font-size:32px; line-height:1; color:var(--cream-dim); transition:color .3s ease; }
.lightbox__close:hover{ color:var(--cream); }

/* ---------- Animação ---------- */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* O botão do formulário não deve esticar na grelha */
.form .btn{ justify-self:start; }

/* ============================================================
   PÁGINAS DE CATEGORIA
   ============================================================ */
.catHero{
  position:relative; min-height:58svh; display:flex; align-items:flex-end;
  padding:120px 0 clamp(36px,6vw,64px); isolation:isolate; overflow:hidden;
}
.catHero__img{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center; transform:scale(1.02);
}
.catHero__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(12,11,10,.6) 0%, rgba(12,11,10,.35) 45%, rgba(12,11,10,.95) 100%);
}
.catHero__in{ width:100%; }
.voltar{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-dim); margin-bottom:18px; transition:color .3s ease;
}
.voltar:hover{ color:var(--cream); }
.catHero__titulo{
  font-size:clamp(34px,7vw,74px); letter-spacing:-.04em; margin-bottom:16px;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.catHero__frase{
  margin:0; max-width:52ch; font-size:clamp(14px,1.7vw,17px); color:var(--cream);
  text-shadow:0 1px 20px rgba(0,0,0,.6);
}

/* Galeria de fotografia — colunas que preservam a altura de cada foto */
.galeria{ columns:2; column-gap:clamp(8px,1.5vw,14px); }
@media (min-width:700px){ .galeria{ columns:3; } }
@media (min-width:1100px){ .galeria{ columns:4; } }
.foto{
  display:block; width:100%; padding:0; margin:0 0 clamp(8px,1.5vw,14px);
  break-inside:avoid; border-radius:2px; overflow:hidden; background:var(--ink-3);
  line-height:0;
}
.foto{ position:relative; }
.foto img{
  width:100%; height:auto; display:block;
  transition:transform 1s cubic-bezier(.2,.6,.2,1), opacity .5s ease;
  filter:var(--grelha-filtro);
}
.foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--grelha-veu);
}
.foto:hover img{ transform:scale(1.03); }

/* Lightbox em modo fotografia — respeita a forma da imagem */
.lightbox__stage--foto{
  width:auto; height:auto; aspect-ratio:auto;
  max-width:92vw; max-height:86vh; background:none;
}
.lightbox__stage--foto img{ max-width:92vw; max-height:86vh; width:auto; height:auto; object-fit:contain; }

/* Chamada final da página de categoria */
.catCta{ text-align:center; }
.catCta__titulo{ font-size:clamp(26px,4.4vw,44px); margin-bottom:12px; }
.catCta__sub{ color:var(--cream-dim); margin:0 0 26px; font-size:15px; }
.catCta .btn{ align-self:center; }

/* Enquanto o bloco não tiver imagem, o play não aparece — não faz sentido
   prometer um vídeo por cima de uma instrução. */
.slot:not(.is-filled) .card__play{ display:none; }

/* ---------- Tiras de fotografia na página inicial ---------- */
.tira{ margin-top:clamp(34px,5vw,54px); }
.tira__cab{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.tira__nome{ font-size:clamp(18px,2.4vw,24px); }
.tira__nome a:hover{ color:var(--taupe); }
.tira__n{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); }
.tira__ver{
  margin-left:auto; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-dim); transition:color .3s ease;
}
.tira__ver:hover{ color:var(--cream); }

.tira__scroll{
  display:flex; gap:clamp(8px,1.2vw,12px);
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
  padding-bottom:4px;
}
.tira__scroll::-webkit-scrollbar{ display:none; }
.tira__foto{
  flex:0 0 42%; scroll-snap-align:start; padding:0; border-radius:2px;
  overflow:hidden; background:var(--ink-3); line-height:0; cursor:pointer;
}
@media (min-width:600px){ .tira__foto{ flex-basis:26%; } }
@media (min-width:900px){ .tira__foto{ flex-basis:18%; } }
@media (min-width:1200px){ .tira__foto{ flex-basis:14.5%; } }
.tira__foto{ position:relative; }
.tira__foto img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform 1s cubic-bezier(.2,.6,.2,1); filter:var(--grelha-filtro);
}
.tira__foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--grelha-veu);
}
.tira__foto:hover img{ transform:scale(1.05); }

.tira__mais{
  flex:0 0 42%; scroll-snap-align:start; aspect-ratio:4/5; border-radius:2px;
  background:var(--ink-3); display:grid; place-items:center; align-content:center; gap:4px;
  font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.02em;
  color:var(--cream); transition:background .3s ease;
}
@media (min-width:600px){ .tira__mais{ flex-basis:26%; } }
@media (min-width:900px){ .tira__mais{ flex-basis:18%; } }
@media (min-width:1200px){ .tira__mais{ flex-basis:14.5%; } }
.tira__mais span{
  font-family:var(--sans); font-weight:400; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim);
}
.tira__mais:hover{ background:#241E1A; }

/* Legenda opcional sobre a capa de um vídeo (campo "legenda" no dados.js).
   Escreve-se "primeira linha|segunda linha". */
.card__legenda{
  position:absolute; inset:auto 12px 14px; z-index:3; text-align:center;
  display:flex; flex-direction:column; gap:2px; pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.card__legenda i{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(15px,1.9vw,21px); letter-spacing:-.01em; color:#fff;
}
.card__legenda b{
  font-family:var(--display); font-weight:400; font-size:clamp(9px,1.05vw,11.5px);
  letter-spacing:.06em; color:rgba(255,255,255,.9);
}

/* ---------- BOTÃO DE IDIOMA (PT / EN) ---------- */
.lang{
  display:flex; align-items:center; gap:4px;
  margin-left:auto; margin-right:14px;
  font-family:var(--sans); font-size:11px; letter-spacing:.14em;
}
.lang button{
  background:none; border:0; padding:4px 2px; cursor:pointer;
  font:inherit; letter-spacing:inherit;
  color:var(--cream-dim); transition:color .25s ease;
}
.lang button:hover{ color:var(--cream); }
.lang button.is-active{ color:var(--cream); }
.lang button.is-active::after{
  content:""; display:block; height:1px; margin-top:3px;
  background:var(--taupe);
}
.lang span{ color:rgba(242,237,228,.28); }

@media (min-width:860px){
  .lang{ margin-left:28px; margin-right:0; }
}

/* ---------- CONTACTO SEM FORMULÁRIO ---------- */
.contact__nota{
  font-family:var(--sans); font-size:clamp(15px,1.7vw,17px);
  line-height:1.6; color:var(--cream-dim);
  max-width:44ch; margin:22px 0 0;
}
.contact__redes{
  display:flex; flex-wrap:wrap; gap:26px;
  margin-top:34px; padding-top:26px;
  border-top:1px solid var(--line);
}
.contact__redes a{
  font-family:var(--sans); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream-dim);
  transition:color .25s ease;
}
.contact__redes a:hover{ color:var(--cream); }

/* ---------- BLOCO QUE PREENCHE O FIM DA GRELHA ---------- */
.fim{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:clamp(16px,2vw,24px);
  padding:0 clamp(14px,2.5vw,40px);
}
.fim.is-hidden{ display:none; }
.fim__titulo{
  font-family:var(--display); font-weight:600;
  font-size:clamp(26px,4.4vw,54px); letter-spacing:-.025em; line-height:1.05;
  color:var(--cream); max-width:11ch;
}
.fim__link{
  font-family:var(--sans); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream-dim);
  border-bottom:1px solid var(--line); padding-bottom:4px;
  transition:color .25s ease, border-color .25s ease;
}
.fim__link:hover{ color:var(--cream); border-color:var(--taupe); }

/* ---------- FUNDO DO "SOBRE MIM" ----------
   A secção tinha o mesmo preto de todas as outras e corria junto com o
   Trabalho selecionado. Um fundo quente separa-a e dá-lhe destaque,
   sem sair da paleta escura. Para mudar o tom, mexe em --sobre-fundo
   lá em cima. A secção não leva respiro próprio por cima: a mudança de
   cor já marca a separação e as duas margens somadas abriam um vão
   de mais de 200 px. */
#sobre{ background:var(--sobre-fundo); padding-block:clamp(44px,5.4vw,68px); }