/* Ricardo Teixeira Fotografia & Vídeo */
:root {
  --papel: #FAF8F4;   /* branco quente: fundo */
  --bege: #E3DACD;    /* areia: secções secundárias */
  --marfim: #F2EDE4;
  --verde: #151413;   /* ébano: cor principal da marca */
  --texto: #2B2926;
  --cinza: #6F6A63;   /* pedra escurecida, legível */
  --ouro: #B08A3E;    /* ouro metálico: só detalhes */
  --linha: rgba(21, 20, 19, .14);
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
  --m: clamp(1.25rem, 4.5vw, 4.5rem);          /* margem lateral */
  --seccao: clamp(5.5rem, 13vw, 11rem);        /* espaço entre secções */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--texto);
  font: 300 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; }
.escondido { display: none; }
.escondido-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--verde); }
h2 { font-size: clamp(2.4rem, 5.4vw, 4.5rem); line-height: 1.02; letter-spacing: -.01em; }
h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.15; }
p { margin: 0 0 1.1em; }

.ligacao {
  display: inline-block; font-weight: 400; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--verde); text-decoration: none;
  padding-bottom: .2rem; border-bottom: 1px solid currentColor;
}
.ligacao:hover { border-bottom-color: transparent; }
.botao {
  display: inline-block; border: 1px solid var(--verde); background: var(--verde); color: var(--papel);
  font: 400 .8rem var(--sans); letter-spacing: .24em; text-transform: uppercase; padding: 1.15rem 2.4rem; cursor: pointer; text-decoration: none;
  transition: background .25s, color .25s;
}
.botao:hover { background: transparent; color: var(--verde); }

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--m);
  transition: background .35s, padding .35s, color .35s;
  color: var(--verde);
}
.topo.sobre-imagem { color: var(--papel); }
.topo.solido { background: rgba(250, 248, 244, .96); padding-block: .9rem; color: var(--verde); box-shadow: 0 1px 0 var(--linha); }
.marca { line-height: 0; position: relative; }
.marca img { height: 48px; width: auto; }
.marca-escura { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.marca-clara { transition: opacity .35s; }
.topo.solido .marca-escura, .topo:not(.sobre-imagem) .marca-escura { opacity: 1; }
.topo.solido .marca-clara, .topo:not(.sobre-imagem) .marca-clara { opacity: 0; }
.menu { display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); align-items: center; }
.menu a { text-decoration: none; font-size: .78rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.menu a:hover { opacity: .65; }
.menu-destaque { border: 1px solid currentColor; padding: .7rem 1.2rem; }
.menu-botao { display: none; }

/* ---------- Imagens ---------- */
.moldura { position: relative; margin: 0; background: #E9E3D9; overflow: hidden; }
.moldura picture { display: contents; }
.moldura img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.moldura img.carregada { opacity: 1; }
.moldura-retrato { aspect-ratio: 4 / 5; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #24221F; color: var(--papel); }
.hero-imagens, .hero-video { position: absolute; inset: 0; }
.hero-imagens picture { display: contents; }
.hero-imagens img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 2.2s ease;
}
.hero-imagens img.ativa { opacity: 1; }
.hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.hero-video.pronto { opacity: 1; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%);
}
.hero-texto { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: clamp(2.5rem, 7vh, 5rem); }
.hero h1 {
  color: var(--papel); font-size: clamp(3rem, 8.2vw, 8.25rem); line-height: .95; letter-spacing: -.03em;
  animation: entrada 1.6s .2s both cubic-bezier(.2, .7, .2, 1);
}
.hero-texto p { margin: 1.5rem 0 0; font-size: 1.05rem; letter-spacing: .02em; animation: entrada 1.6s .5s both cubic-bezier(.2, .7, .2, 1); }
@keyframes entrada { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Manifesto ---------- */
.manifesto { padding: var(--seccao) var(--m); max-width: 1500px; }
.manifesto-texto {
  font-family: var(--serif); font-size: clamp(1.75rem, 3.6vw, 3.1rem); line-height: 1.22; letter-spacing: -.01em;
  color: var(--verde); max-width: 28ch; margin-bottom: 2.5rem;
}

/* ---------- Cabeçalhos de secção ---------- */
.seccao-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 3rem;
  padding: 0 var(--m); margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.seccao-topo p { margin: 0; color: var(--cinza); max-width: 36ch; }

/* ---------- Histórias ---------- */
.historias { padding-bottom: var(--seccao); }
.historia-bloco {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.4vw, 2.5rem);
  padding: 0 var(--m); margin-bottom: clamp(5rem, 11vw, 10rem); text-decoration: none; color: inherit;
}
.historia-bloco .principal { grid-column: 1 / span 7; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.historia-bloco .secundaria { grid-column: 9 / span 4; grid-row: 1; aspect-ratio: 4 / 5; align-self: start; margin-top: 18%; }
.historia-bloco .legenda { grid-column: 9 / span 4; grid-row: 2; align-self: end; }
.historia-bloco:nth-child(even) .principal { grid-column: 6 / span 7; }
.historia-bloco:nth-child(even) .secundaria,
.historia-bloco:nth-child(even) .legenda { grid-column: 1 / span 4; }
.legenda .tipo { color: var(--cinza); font-size: .95rem; margin-bottom: .75rem; }
.legenda h3 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.05; letter-spacing: -.015em; margin-bottom: .6rem; }
.legenda .sub { color: var(--cinza); margin-bottom: 1.75rem; }
.historia-bloco:hover .ligacao { border-bottom-color: transparent; }
.historia-bloco .moldura img { transition: opacity .7s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.historia-bloco:hover .principal img.carregada { transform: scale(1.025); }

/* ---------- Filmes ---------- */
.filmes { background: var(--verde); color: var(--marfim); padding: var(--seccao) 0; }
.filmes h2, .filmes h3 { color: var(--marfim); }
.filmes .seccao-topo p { color: rgba(242, 237, 228, .68); }
.filmes-lista { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2.4vw, 2.5rem); padding: 0 var(--m); }
.filme { grid-column: span 6; background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.filmes-lista.impar .filme:first-child { grid-column: 1 / -1; }
.filme .moldura { aspect-ratio: 16 / 9; background: #2A2826; }
.filme-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(64px, 7vw, 92px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(250, 248, 243, .85); display: grid; place-items: center;
  transition: background .3s, transform .3s;
}
.filme-play::before { content: ""; margin-left: 5px; border-left: 15px solid var(--marfim); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.filme:hover .filme-play { background: rgba(250, 248, 243, .14); transform: translate(-50%, -50%) scale(1.06); }
.filme-info { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.25rem; }
.filme-info span { color: rgba(242, 237, 228, .68); }

/* ---------- Serviços ---------- */
.servicos { padding: var(--seccao) 0; }
.servicos-lista { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 7rem); padding: 0 var(--m); }
.servico:nth-child(2) { margin-top: clamp(0rem, 12vw, 12rem); }
.servico h3 { margin: 2rem 0 1rem; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.servico p { max-width: 44ch; }

/* ---------- Processo ---------- */
.processo { background: var(--bege); padding: var(--seccao) var(--m); }
.processo h2 { margin-bottom: clamp(3rem, 6vw, 5rem); }
.processo-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; counter-reset: passo; }
.processo-lista li { counter-increment: passo; border-top: 1px solid var(--linha); padding-top: 1.5rem; }
.processo-lista li::before { content: counter(passo); display: block; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--ouro); margin-bottom: 1.25rem; }
.processo-lista h3 { font-size: 1.45rem; margin-bottom: .75rem; }
.processo-lista p { color: #4A4642; }

/* ---------- Sobre ---------- */
.sobre { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.4vw, 2.5rem); padding: var(--seccao) var(--m); align-items: center; }
.sobre-foto { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.sobre-texto { grid-column: 7 / span 5; }
.sobre-texto h2 { margin-bottom: 2rem; }
.sobre-texto p { max-width: 52ch; }
.assinatura { font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--ouro); margin-top: 2rem; }

/* ---------- Testemunhos ---------- */
.testemunhos { padding: 0 var(--m) var(--seccao); }
.testemunho { max-width: 900px; margin: 0 auto 4rem; text-align: center; }
.testemunho blockquote { margin: 0 0 1.25rem; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.3; color: var(--verde); }
.testemunho figcaption { color: var(--cinza); }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.4vw, 2.5rem); padding: var(--seccao) var(--m); border-top: 1px solid var(--linha); }
.contacto-intro { grid-column: 1 / span 5; }
.contacto-intro h2 { margin-bottom: 2rem; }
.contacto-intro > p { max-width: 36ch; }
.formulario { grid-column: 7 / span 6; display: grid; gap: 1.9rem; }
.contactos { margin: 3rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.75rem; }
.contactos dt { color: var(--cinza); }
.contactos dd { margin: 0; overflow-wrap: anywhere; }
.contactos a { text-decoration: none; }
.contactos a:hover { text-decoration: underline; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1.9rem; }
.campo { display: grid; gap: .4rem; min-width: 0; }
.campo label, .campo legend { font-size: .92rem; color: var(--cinza); }
.campo input, .campo select, .campo textarea {
  font: 300 1.05rem var(--sans); color: var(--texto); width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid rgba(21, 20, 19, .3); border-radius: 0;
  padding: .55rem 0;
}
.campo textarea { resize: vertical; border: 1px solid rgba(21, 20, 19, .3); padding: .75rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 1px 0 var(--verde); }
.campo input::placeholder { color: #A9A39A; }
.escolha { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.escolha legend { width: 100%; margin-bottom: .6rem; }
.escolha label { display: flex; align-items: center; gap: .5rem; color: var(--texto); font-size: 1rem; }
.escolha input, .consentimento input { accent-color: var(--verde); }
.consentimento { display: flex; gap: .75rem; align-items: flex-start; font-size: .92rem; color: var(--cinza); }
.consentimento input { margin-top: .4rem; }
.formulario .botao { justify-self: start; }
.form-estado { margin: 0; min-height: 1.5em; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--verde); color: var(--marfim); padding: clamp(4rem, 8vw, 7rem) var(--m) 2.5rem; display: grid; gap: 3rem; justify-items: center; text-align: center; }
.rodape-logo { width: min(420px, 78vw); height: auto; justify-self: center; }
.rodape-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.25rem; }
.rodape-nav a { text-decoration: none; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; }
.rodape-nav a:hover { text-decoration: underline; }
.rodape-legal { justify-self: stretch; margin: 0; font-size: .88rem; color: rgba(242, 237, 228, .6); border-top: 1px solid rgba(242, 237, 228, .16); padding-top: 1.5rem; }

/* ---------- Leitor de filmes ---------- */
.leitor { position: fixed; inset: 0; z-index: 60; background: rgba(12, 11, 10, .97); display: grid; place-items: center; padding: 4rem var(--m); }
.leitor[hidden] { display: none; }
.leitor-video { width: min(1400px, 100%); aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--marfim); }
.leitor-video iframe { width: 100%; height: 100%; border: 0; }
.leitor-fechar { position: absolute; top: 1.5rem; right: var(--m); background: none; border: 0; color: var(--marfim); font: 400 1rem var(--sans); cursor: pointer; }

/* ---------- Página de história ---------- */
.historia-capa { position: relative; height: 100svh; min-height: 560px; background: #24221F; color: var(--papel); overflow: hidden; }
.historia-capa-foto { position: absolute; inset: 0; }
.historia-capa-foto picture { display: contents; }
.historia-capa-foto img { width: 100%; height: 100%; object-fit: cover; }
.historia-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45)); }
.historia-capa-texto { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: clamp(2.5rem, 7vh, 5rem); }
.historia-capa h1 { color: var(--papel); font-size: clamp(3rem, 8vw, 7.5rem); line-height: .95; letter-spacing: -.03em; margin: .5rem 0 1.25rem; }
.historia-tipo { margin: 0; }
.historia-intro { padding: var(--seccao) var(--m) clamp(3rem, 6vw, 6rem); }
.historia-intro p { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.3; color: var(--verde); max-width: 30ch; margin: 0 auto; }
.historia-sequencia { display: grid; gap: clamp(1rem, 2.4vw, 2.5rem); padding: 0 var(--m); }
.seq-larga { width: 100%; }
.seq-par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 2.5rem); align-items: start; }
.seq-par .moldura:nth-child(2) { margin-top: 14%; }
.seq-centro { width: min(62%, 900px); margin: clamp(2rem, 5vw, 5rem) auto; }
.seq-esquerda { width: min(52%, 760px); }
.seq-direita { width: min(52%, 760px); margin-left: auto; }
.historia-filme { padding: var(--seccao) var(--m) 0; }
.historia-filme .filme { width: 100%; display: block; }
.historia-seguinte { padding: var(--seccao) var(--m); text-align: center; }
.historia-seguinte p { color: var(--cinza); margin-bottom: 1rem; }
.historia-seguinte a { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1; color: var(--verde); text-decoration: none; }
.historia-seguinte a:hover { opacity: .7; }

/* ---------- Página de texto ---------- */
.pagina-texto { max-width: 72ch; padding: 10rem var(--m) 6rem; }
.pagina-texto h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 2.5rem; }
.pagina-texto h2 { font-size: 1.6rem; margin: 2.75rem 0 .75rem; }

/* ---------- Ecrãs mais pequenos ---------- */
@media (max-width: 1000px) {
  .processo-lista { grid-template-columns: 1fr 1fr; }
  .sobre-foto { grid-column: 1 / span 6; }
  .sobre-texto { grid-column: 7 / span 6; }
  .contacto-intro, .formulario { grid-column: 1 / -1; }
  .contacto-intro { margin-bottom: 4rem; }
}
@media (max-width: 820px) {
  .menu-botao {
    display: block; background: none; border: 1px solid currentColor; color: inherit;
    font: 400 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: .6rem .9rem; cursor: pointer;
  }
  .marca img { height: 34px; }
  .menu {
    display: none; position: fixed; inset: 0; z-index: -1; background: var(--papel); color: var(--verde);
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.5rem; padding: var(--m);
  }
  .menu a { font-family: var(--serif); font-size: 2.2rem; text-transform: none; letter-spacing: 0; }
  .menu-destaque { border: 0; padding: 0; }
  .menu.aberto { display: flex; }
  .topo.menu-aberto { color: var(--verde); }
  .topo.menu-aberto .marca-escura { opacity: 1; }
  .topo.menu-aberto .marca-clara { opacity: 0; }

  .historia-bloco { display: block; }
  .historia-bloco .principal { aspect-ratio: 4 / 5; }
  .historia-bloco .secundaria { display: none; }
  .historia-bloco .legenda { margin-top: 1.75rem; }
  .filme, .filmes-lista.impar .filme:first-child { grid-column: 1 / -1; }
  .servicos-lista { grid-template-columns: 1fr; }
  .servico:nth-child(2) { margin-top: 0; }
  .processo-lista { grid-template-columns: 1fr; }
  .sobre { display: block; }
  .sobre-foto { margin-bottom: 3rem; }
  .linha { grid-template-columns: 1fr; }
  .seq-par { grid-template-columns: 1fr; }
  .seq-par .moldura:nth-child(2) { margin-top: 0; }
  .seq-centro, .seq-esquerda, .seq-direita { width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}