/* ============ 04 · Contato — "Volta ao rio" ============ */
.contato {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  overflow: hidden;
  background: var(--igapo);
  color: var(--bege);
  display: flex; flex-direction: column; justify-content: flex-end;
  z-index: 1;
  overflow-x: clip;
}
.ct-cena { position: absolute; inset: 0; }
.ct-cena picture { position: absolute; inset: -8% 0; display: block; }
.ct-fundo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
  will-change: transform;
}
.ct-veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--noite) 0%, rgba(8, 21, 14, .15) 26%, rgba(8, 21, 14, 0) 45%, rgba(5, 13, 8, .72) 78%, var(--igapo) 100%),
    linear-gradient(90deg, rgba(5, 13, 8, .55), rgba(5, 13, 8, 0) 60%);
}
.ct-galhos { position: absolute; left: -4vw; top: -6vh; width: 56vw; height: 56vh; color: var(--igapo); opacity: .9; }
.ct-frente { position: absolute; color: var(--igapo); }
.ct-frente--esq { left: -10vw; bottom: -18vh; width: 34vw; height: 76vh; filter: blur(4px); }

.ct-conteudo {
  position: relative; z-index: 3;
  padding: 26vh calc(var(--margem) + 60px) 0 var(--margem);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas: "rot rot" "tit tit" "conv ficha";
  column-gap: 6vw;
  align-items: end;
}
.ct-conteudo > .rotulo { grid-area: rot; }
.ct-titulo-wrap { grid-area: tit; position: relative; margin-bottom: clamp(30px, 6vh, 70px); }
.ct-titulo {
  font-size: clamp(46px, 8.6vw, 168px);
  line-height: .9;
  --soft: 100;
  position: relative; z-index: 2;
}
/* "JUNTOS?": itálica clássica (Cormorant Garamond), com interrogação de desenho tradicional */
.ct-titulo em {
  color: var(--ouro-reflexo);
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.1em;            /* compensa a altura das maiúsculas, menor que a da Fraunces */
  letter-spacing: .01em;
  font-variation-settings: normal;
}
.ct-titulo .palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.ct-titulo .palavra > span { display: inline-block; will-change: transform; }

.ct-convite {
  grid-area: conv;
  font-family: var(--serif); font-weight: 320;
  font-size: clamp(20px, 1.9vw, 30px); line-height: 1.3;
  font-variation-settings: 'opsz' 48, 'SOFT' 100, 'WONK' 0;
  max-width: 20em;
  margin: 0 0 8px;
  color: rgba(243, 239, 229, .9);
}

.ct-ficha {
  grid-area: ficha;
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid rgba(216, 167, 99, .35);
}
.ct-ficha li {
  display: grid; grid-template-columns: 96px 1fr; align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid rgba(243, 239, 229, .12);
  gap: 6px 12px;
}
.ct-rot { font: 700 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); }
.ct-ficha a {
  text-decoration: none;
  font-size: clamp(17px, 1.35vw, 22px);
  background: linear-gradient(var(--ouro-reflexo), var(--ouro-reflexo)) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease-org), color .3s;
  justify-self: start;
}
.ct-ficha a:hover, .ct-ficha a:focus-visible { background-size: 100% 1px; color: var(--ouro-reflexo); }

.ct-rodape {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: clamp(60px, 12vh, 120px) calc(var(--margem) + 60px) 34px var(--margem);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: rgba(243, 239, 229, .55);
}
.ct-rodape p { margin: 0; }
.ct-assinatura { width: 64px; }
.ct-assinatura img {
  --seiva: 100;
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--seiva) * 1% - 14%), transparent calc(var(--seiva) * 1%));
          mask-image: linear-gradient(to bottom, #000 calc(var(--seiva) * 1% - 14%), transparent calc(var(--seiva) * 1%));
}

@media (max-width: 860px) {
  .ct-conteudo {
    padding: 22vh 20px 0;
    grid-template-columns: 1fr;
    grid-template-areas: "rot" "tit" "conv" "ficha";
    row-gap: 24px;
  }
  .ct-titulo { font-size: clamp(42px, 13vw, 80px); }
  .ct-ficha li { grid-template-columns: 1fr; }
  .ct-galhos { width: 100vw; height: 36vh; }
  .ct-frente--esq { width: 70vw; height: 50vh; left: -30vw; }
  .ct-rodape { padding: 60px 20px 30px; }
}