/* Hipótese C · A parede — Goubetti & Alves Advocacia
   Classes com prefixo hc- (o hero escolhido vira a base do site). */

:root {
  /* reboco amostrado de maps-05.jpg */
  --hc-reboco-1: #c7c5c6;
  --hc-reboco-2: #b3b4bc;
  --hc-reboco-quente: #948d7a;
  --hc-reboco-sombra: #7c7660;
  --hc-noite: #1d1716;
  --hc-noite-2: #120e0d;
  --hc-bordo: #4a1f22;
  --hc-bordo-fundo: #291315;
  --hc-bordo-vivo: #7a2a31;
  --hc-luz: #fff1dc;
  --hc-marfim: #f3eadc;
  --hc-marfim-2: #d9cdbb;
  --hc-tinta: #1a1414;

  --hc-f-titulo: "Della Respira", "Iowan Old Style", Georgia, serif;
  --hc-f-texto: "Ysabeau Office", "Segoe UI", system-ui, sans-serif;
  --hc-f-marca: "Cinzel", "Trajan Pro", serif;

  --hc-margem: clamp(20px, 6vw, 96px);
  --hc-raio: 999px;
  --hc-ease: cubic-bezier(.22, .7, .18, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--hc-noite); }
body {
  color: var(--hc-marfim);
  font-family: var(--hc-f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- moldura ---------- */
.hc {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  overflow: clip;
  background: var(--hc-noite);
  --hc-dw: min(68vw, 120vh);          /* largura da dupla */
  --hc-dr: -5vw;                      /* quanto a dupla passa da borda direita */
}

/* parede sem WebGL (e sem JS): mesma luz, em CSS */
.hc-parede-css {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 30% 62% at var(--hc-lx-css, 64%) 4%, rgb(255 241 220 / .62), rgb(255 241 220 / 0) 70%),
    radial-gradient(ellipse 70% 95% at var(--hc-lx-css, 64%) 0%, #a8a29a 0%, #6d6861 34%, #3a3330 62%, var(--hc-noite) 92%);
}
.hc-parede-css::after {
  content: ""; position: absolute; inset: 0;
  background: url("../img/c-reboco-manchas.png") 0 0 / auto 38vh repeat;
  mix-blend-mode: soft-light; opacity: .3;
}
.hc-canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .3s linear;
}
.hc.is-gl .hc-canvas { opacity: 1; }

/* chão: a base da dupla se dissolve aqui */
.hc-chao {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  z-index: 2; pointer-events: none;
  background: linear-gradient(in oklab 180deg, rgb(29 23 22 / 0) 0%, rgb(29 23 22 / .72) 58%, var(--hc-noite-2) 100%);
}

/* ---------- navegação ---------- */
.hc-nav {
  position: absolute; z-index: 10; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(16px, 3.2vh, 30px) var(--hc-margem);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
}
.hc-nav a { color: inherit; text-decoration: none; }
.hc-nav__marca { color: rgb(243 234 220 / .78); }
.hc-nav__links { display: flex; gap: clamp(18px, 2.4vw, 36px); align-items: center; }
.hc-nav__links a { color: rgb(243 234 220 / .7); transition: color .25s; }
.hc-nav__links a:hover, .hc-nav__links a:focus-visible { color: var(--hc-marfim); }
.hc-nav__zap {
  border: 1px solid rgb(243 234 220 / .32); border-radius: var(--hc-raio);
  padding: 9px 16px; letter-spacing: .08em; text-transform: none; font-size: 14px;
  color: var(--hc-marfim) !important;
}

/* ---------- a placa na parede ---------- */
.hc-placa {
  position: absolute; z-index: 2;
  left: calc(100vw - var(--hc-dr) - var(--hc-dw) * .547);
  top: clamp(64px, 10.5vh, 112px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  filter: brightness(var(--hc-e, 1));
  pointer-events: none;
}
.hc-brasao {
  position: relative;
  width: clamp(78px, min(10vw, 15.5vh), 168px);
  aspect-ratio: 976 / 960;
}
.hc-brasao svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hc-brasao__sombra {
  position: absolute; inset: 0;
  background: #0b0707;
  -webkit-mask: url("../img/c-brasao-placa.png") center / 100% 100% no-repeat;
          mask: url("../img/c-brasao-placa.png") center / 100% 100% no-repeat;
  filter: blur(var(--hc-sb, 5px));
  opacity: var(--hc-so, .62);
  transform: translate(var(--hc-sx, 0px), var(--hc-sy, 10px));
  will-change: transform;
}
.hc-letreiro {
  margin-top: clamp(10px, 2vh, 22px);
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--hc-f-marca);
  color: var(--hc-tinta);
  text-shadow:
    0 -1px 0 rgb(255 241 220 / .28),
    var(--hc-tx, 0px) var(--hc-ty, 5px) var(--hc-tb, 4px) rgb(10 6 6 / .5);
}
.hc-letreiro__nome {
  font-size: clamp(19px, min(2.25vw, 3.4vh), 36px);
  font-weight: 600; letter-spacing: .035em; line-height: 1; white-space: nowrap;
}
.hc-letreiro__nome span { font-size: 1.26em; line-height: .8; }
.hc-letreiro__sub {
  display: flex; align-items: center; gap: .9em; width: 100%;
  margin-top: .45em;
  font-size: clamp(9px, min(.92vw, 1.4vh), 15px); font-weight: 500; letter-spacing: .32em;
}
.hc-letreiro__sub::before, .hc-letreiro__sub::after {
  content: ""; flex: 1; height: max(2px, .22em); background: currentColor;
  box-shadow: var(--hc-tx, 0px) var(--hc-ty, 5px) var(--hc-tb, 4px) rgb(10 6 6 / .45);
}
.hc-letreiro__sub b { font-weight: 500; margin-right: -.32em; }

/* ---------- a dupla ---------- */
.hc-dupla {
  position: absolute; z-index: 3; margin: 0;
  right: var(--hc-dr); bottom: -2.5vh;
  width: var(--hc-dw); aspect-ratio: 1720 / 975;
}
.hc-dupla img { display: block; width: 100%; height: 100%; }
.hc-dupla__foto { position: relative; }
.hc-dupla__sombra {
  position: absolute; inset: 0;
  filter: brightness(0) blur(22px);
  opacity: .5;
  transform: translate(var(--hc-dsx, 0px), var(--hc-dsy, 26px)) scale(1.02);
  will-change: transform;
}
.hc-dupla__luz, .hc-dupla__sombreado {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../img/c-dupla-flow.webp") center / 100% 100% no-repeat;
          mask: url("../img/c-dupla-flow.webp") center / 100% 100% no-repeat;
}
.hc-dupla__sombreado {
  background: radial-gradient(ellipse 62% 105% at var(--hc-dlx, 50%) var(--hc-dly, -20%),
              rgb(29 23 22 / 0) 40%, rgb(22 16 15 / .5) 100%);
  mix-blend-mode: multiply;
}
.hc-dupla__luz {
  background: radial-gradient(ellipse 46% 70% at var(--hc-dlx, 50%) var(--hc-dly, -20%),
              rgb(255 236 206 / .55) 0%, rgb(255 236 206 / 0) 72%);
  mix-blend-mode: soft-light;
}
.hc-dupla__nomes {
  position: absolute; left: 0; right: 0; bottom: 9%;
  z-index: 2;
}
.hc-nome {
  position: absolute; bottom: 0;
  transform: translateX(-50%);
  text-align: center; white-space: nowrap;
  font-size: clamp(12px, 1vw, 15px); line-height: 1.35; letter-spacing: .02em;
  color: rgb(243 234 220 / .86);
  text-shadow: 0 1px 10px rgb(10 6 6 / .9);
}
.hc-nome em { font-style: normal; }
.hc-nome strong {
  display: block; font-family: var(--hc-f-titulo); font-weight: 400;
  font-size: 1.5em; letter-spacing: .01em; color: var(--hc-marfim);
  font-kerning: none; /* o par a+n da Della Respira abre um buraco em "Juliana" */
}
.hc-nome--juliana { left: 26%; }
.hc-nome--karina { left: 63.5%; }
.hc-nome i { font-style: normal; }

/* ---------- texto ---------- */
.hc-texto {
  position: absolute; z-index: 6;
  left: var(--hc-margem);
  top: 50%; transform: translateY(-54%);
  width: min(calc(100vw - var(--hc-dr) - var(--hc-dw) - var(--hc-margem) + 1.5vw), 600px);
}
/* sombra da sala atrás do texto: garante leitura onde a luz do spot respinga */
.hc-texto::before {
  content: ""; position: absolute; z-index: -1; inset: -14% -18% -14% -30%;
  background: radial-gradient(closest-side, rgb(18 13 12 / .5), rgb(18 13 12 / .28) 60%, rgb(18 13 12 / 0));
  pointer-events: none;
}
.hc-olho {
  margin: 0 0 clamp(14px, 2.6vh, 26px);
  font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #d8c3a6;
}
.hc-olho span { color: rgb(243 234 220 / .5); padding: 0 .5em; }
.hc-titulo {
  margin: 0;
  font-family: var(--hc-f-titulo); font-weight: 400;
  font-size: clamp(34px, min(3.7vw, 6.6vh), 62px);
  line-height: 1.07; letter-spacing: -.005em;
  color: var(--hc-marfim);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgb(12 8 8 / .55);
}
.hc-titulo em { font-style: normal; color: #ecd2b0; }
.hc-apoio {
  margin: clamp(16px, 2.8vh, 26px) 0 0;
  max-width: 34em;
  font-size: clamp(15.5px, min(1.18vw, 2vh), 18px); line-height: 1.55;
  color: rgb(243 234 220 / .8);
  text-wrap: pretty;
}
.hc-acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  margin-top: clamp(20px, 3.6vh, 34px);
}
.hc-botao {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 24px 15px 20px; border-radius: var(--hc-raio);
  background: linear-gradient(in oklab 180deg, #f6eee2, #e7d8c3);
  color: var(--hc-bordo-fundo);
  font-weight: 600; font-size: 16.5px; letter-spacing: .01em; text-decoration: none;
  box-shadow: 0 10px 30px -12px rgb(255 236 206 / .45), inset 0 -1px 0 rgb(74 31 34 / .18);
  transition: transform .35s var(--hc-ease), box-shadow .35s;
}
.hc-botao:hover, .hc-botao:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgb(255 236 206 / .6); }
.hc-botao svg { width: 20px; height: 20px; flex: none; }
.hc-botao small { font-weight: 500; opacity: .7; font-size: .86em; }
.hc-link {
  color: rgb(243 234 220 / .82); font-size: 15.5px; text-decoration: none;
  border-bottom: 1px solid rgb(243 234 220 / .3); padding-bottom: 3px;
}
.hc-link:hover, .hc-link:focus-visible { color: var(--hc-marfim); border-color: currentColor; }

.hc-prova {
  position: absolute; z-index: 6;
  left: var(--hc-margem); bottom: clamp(18px, 5vh, 48px);
  display: flex; align-items: center; gap: 18px;
  max-width: min(calc(100vw - var(--hc-dr) - var(--hc-dw) - var(--hc-margem)), 560px);
  font-size: 14px; line-height: 1.45; color: rgb(243 234 220 / .74);
}
.hc-prova__nota { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.hc-prova__nota b { font-family: var(--hc-f-titulo); font-weight: 400; font-size: 30px; color: var(--hc-marfim); line-height: 1; }
.hc-estrelas { color: #e2c59c; letter-spacing: 2px; font-size: 13px; }
.hc-prova__frase { margin: 0; padding-left: 18px; border-left: 1px solid rgb(243 234 220 / .22); }
.hc-prova__frase q { font-style: italic; color: rgb(243 234 220 / .9); quotes: "“" "”"; }

.hc-grao {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .11; mix-blend-mode: overlay;
}

.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- entrada (só com JS) ---------- */
.js .hc-anim { opacity: 0; transform: translateY(14px); }
.js .hc-dupla.hc-anim { transform: translateY(22px); }
.js .hc.is-texto .hc-anim--texto,
.js .hc.is-dupla .hc-dupla.hc-anim {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--hc-ease), transform 1.3s var(--hc-ease);
  transition-delay: calc(var(--hc-i, 0) * 130ms);
}
.js .hc.is-dupla .hc-dupla.hc-anim { transition: opacity 1.6s var(--hc-ease), transform 1.9s var(--hc-ease); }

/* ---------- 981–1180 px: coluna de texto mais larga ---------- */
@media (min-width: 981px) and (max-width: 1180px) {
  .hc { --hc-dw: min(62vw, 120vh); --hc-dr: -8vw; }
  .hc-olho { font-size: 11.5px; letter-spacing: .15em; }
  .hc-prova__frase { display: none; }
}

/* ---------- notebook baixo ---------- */
@media (max-height: 760px) and (min-width: 981px) {
  .hc-olho { margin-bottom: 12px; }
  .hc-nav { font-size: 12px; }
  .hc-prova__nota b { font-size: 26px; }
}

/* ---------- tablet e celular: a parede em pé ---------- */
@media (max-width: 980px), (max-aspect-ratio: 5/6) and (max-width: 1400px) {
  .hc {
    height: auto; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center;
    --hc-dw: max(132vw, 520px);
    padding-bottom: 28px;
  }
  .hc-nav { position: relative; padding: 16px 20px; font-size: 11.5px; letter-spacing: .12em; }
  .hc-nav__links a:not(.hc-nav__zap) { display: none; }
  .hc-nav__zap { padding: 8px 13px; font-size: 13px; }
  .hc-placa { position: relative; left: auto; top: auto; transform: none; margin-top: 6px; }
  .hc-brasao { width: clamp(64px, 19vw, 110px); }
  .hc-letreiro__nome { font-size: clamp(18px, 5.6vw, 32px); }
  .hc-letreiro__sub { font-size: clamp(8.5px, 2.3vw, 13px); }
  .hc-texto {
    position: relative; left: auto; top: auto; transform: none;
    width: auto; max-width: 560px;
    margin-top: clamp(26px, 6vh, 46px); padding: 0 22px;
    text-align: center;
  }
  .hc-olho { font-size: 12px; letter-spacing: .15em; margin-bottom: 14px; color: #f2e5d1; text-shadow: 0 1px 10px rgb(12 8 8 / .9), 0 0 2px rgb(12 8 8 / .6); }
  .hc-texto::before { inset: -16% -8% -6%; background: radial-gradient(closest-side, rgb(18 13 12 / .62), rgb(18 13 12 / .4) 62%, rgb(18 13 12 / 0)); }
  .hc-olho span { padding: 0 .35em; }
  .hc-titulo { font-size: clamp(30px, 8.4vw, 52px); line-height: 1.1; }
  .hc-apoio { font-size: 15.5px; margin-left: auto; margin-right: auto; }
  .hc-acoes { justify-content: center; margin-top: 22px; gap: 12px 22px; }
  .hc-dupla {
    position: relative; right: auto; bottom: auto;
    flex: none;
    margin: 18px 0 0;
    margin-left: calc(50vw - var(--hc-dw) * .447);
    align-self: flex-start;
  }
  .hc-nome { font-size: 11.5px; }
  .hc-nome i { display: none; }
  .hc-nome em { display: block; font-style: normal; }
.hc-nome strong { font-size: 1.42em; }
  .hc-dupla__nomes { bottom: 15%; }
  .hc-prova {
    position: relative; left: auto; bottom: auto;
    max-width: 520px; margin-top: -4%; padding: 0 22px;
    flex-direction: column; gap: 10px; text-align: center;
  }
  .hc-prova__frase { padding-left: 0; border-left: 0; }
  .hc-chao { display: none; }
}
@media (min-width: 600px) and (max-width: 1400px) and (max-aspect-ratio: 5/6), (min-width: 600px) and (max-width: 980px) {
  .hc { --hc-dw: min(112vw, 1100px); }
  .hc-nome { font-size: 14px; }
}
@media (max-width: 380px) {
  .hc-olho { font-size: 10.5px; letter-spacing: .12em; }
  .hc-nav__marca { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hc-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hc-botao { transition: none; }
}