:root {
  --dark: #050d18;
  --cream: #f0ebe1;
  --tenor: "Tenor Sans", Georgia, serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--dark);
}
body { overflow-x: hidden; }

.portfolio-canvas {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: var(--dark);
  overflow: hidden;
}

.portfolio-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   PRIMEIRA PÁGINA
   A arte vetorial original continua por baixo. Esta camada cobre somente a
   primeira página com a foto limpa e recoloca logo/textos/ícones separadamente,
   o que permite animações sem duplicação visual.
   -------------------------------------------------------------------------- */
.hero-rebuild {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 14.2857142857%;
  overflow: hidden;
  pointer-events: none;
}

.hero-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-piece {
  position: absolute;
  display: block;
  height: auto;
  opacity: 0;
  animation: hero-enter .82s cubic-bezier(.20,.72,.23,1) forwards;
}

.hero-bulb {
  left: 57.9899%;
  top: 24.70%;
  width: 6.6229%;
  animation-name: bulb-enter;
  animation-duration: .9s;
  animation-delay: .10s;
}
.hero-name {
  left: 31.2504%;
  top: 42.42%;
  width: 61.3060%;
  animation-delay: .28s;
}
.hero-role {
  left: 44.5564%;
  top: 59.03%;
  width: 35.5373%;
  animation-delay: .46s;
}
.hero-descriptor {
  left: 49.7804%;
  top: 68.37%;
  width: 24.8785%;
  animation-delay: .62s;
}

@keyframes hero-enter {
  0%   { opacity: 0; transform: translateY(18px) scale(.985); }
  58%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes bulb-enter {
  0%   { opacity: 0; transform: translateY(-12px) scale(.70); }
  65%  { opacity: 1; transform: translateY(1px) scale(1.07); }
  100% { opacity: 1; transform: none; }
}

.hero-social {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 0;
  width: 100%;
  height: 14.2857142857%;
  pointer-events: none;
}

.social-icon {
  position: absolute;
  top: 80.33%;
  display: block;
  height: 4.58%;
  pointer-events: auto;
  line-height: normal;
  opacity: 0;
  transform-origin: center;
  animation: social-enter .62s cubic-bezier(.17,.82,.32,1.14) forwards;
}
.social-linkedin {
  left: 55.8240%;
  width: 3.0015%;
  animation-delay: .82s;
}
.social-email {
  left: 60.2331%;
  width: 2.5622%;
  animation-delay: .92s;
}
.social-instagram {
  left: 64.2057%;
  width: 2.5622%;
  animation-delay: 1.02s;
}
.social-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}
.social-icon:hover img,
.social-icon:focus-visible img {
  transform: translateY(-9%) scale(1.20);
  filter: drop-shadow(0 0 6px rgba(240,235,225,.78));
}
.social-icon:focus-visible {
  outline: 1px solid rgba(240,235,225,.85);
  outline-offset: 4px;
  border-radius: 4px;
}

@keyframes social-enter {
  0%   { opacity: 0; transform: translateY(12px) scale(.70); }
  72%  { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   JUNÇÕES ENTRE AS SETE PÁGINAS DO CANVA
   Tiras de 4–10 px cobrem a linha de rasterização/antialiasing da junção.
   -------------------------------------------------------------------------- */
.page-seam {
  position: absolute;
  z-index: 5;
  left: 0;
  width: 100%;
  height: clamp(4px, .24vw, 10px);
  transform: translateY(-50%);
  pointer-events: none;
}
.seam-1 { top: 14.2857142857%; background: var(--dark); }
.seam-2 { top: 28.5714285714%; background: var(--cream); }
.seam-3 { top: 42.8571428571%; background: var(--dark); }
.seam-4 { top: 57.1428571429%; background: var(--cream); }
.seam-5 { top: 71.4285714286%; background: var(--dark); }
.seam-6 { top: 85.7142857143%; background: var(--cream); }

/* --------------------------------------------------------------------------
   CAMADA DE LINKS
   -------------------------------------------------------------------------- */
.link-layer {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  display: block;
  pointer-events: auto;
  line-height: normal;
  cursor: pointer;
  outline: none;
}

/* Botões de ROTEIRO / OUTROS PROJETOS — restaura a inversão de cor da v1. */
.project-hotspot {
  width: 17.6984%;
  height: .925353%;
  border-radius: 1px;
}
.project-hotspot::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tenor);
  font-weight: 400;
  font-size: clamp(7px, 1.12vw, 22px);
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--cream);
  background: var(--dark);
  border: 1px solid var(--dark);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 0 0 rgba(5,13,24,0);
}
.project-hotspot:hover::after,
.project-hotspot:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 5px 16px rgba(5,13,24,.16);
}
.project-hotspot-light::after {
  color: var(--dark);
  background: var(--cream);
  border-color: var(--cream);
  box-shadow: 0 0 0 rgba(240,235,225,0);
}
.project-hotspot-light:hover::after,
.project-hotspot-light:focus-visible::after {
  box-shadow: 0 5px 18px rgba(240,235,225,.16);
}
.porta-story::after { font-size: clamp(6px, .95vw, 19px); }

.trailer            { left: 13.36545%; top: 39.727223%; }
.porta-story         { left: 40.98530%; top: 39.614723%; }
.frapa-2017          { left: 69.01690%; top: 39.609723%; }
.frapa-2019-project  { left: 69.15970%; top: 52.788423%; }

/* Links de texto: fundo sutil + underline animado + brilho. */
.text-hotspot {
  border-radius: 3px;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.text-hotspot::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -24%;
  height: max(2px, .10vw);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .20s ease, box-shadow .20s ease;
}
.dark-link:hover,
.dark-link:focus-visible {
  background: rgba(5,13,24,.16);
  box-shadow: 0 0 0 1px rgba(5,13,24,.24), 0 7px 18px rgba(5,13,24,.16);
  transform: translateY(-2px) scale(1.015);
}
.dark-link::after { background: var(--dark); }
.dark-link:hover::after,
.dark-link:focus-visible::after {
  transform: scaleX(1);
  box-shadow: 0 0 10px rgba(5,13,24,.42);
}
.light-link:hover,
.light-link:focus-visible {
  background: rgba(240,235,225,.18);
  box-shadow: 0 0 0 1px rgba(240,235,225,.34), 0 7px 20px rgba(0,0,0,.24), 0 0 14px rgba(240,235,225,.10);
  transform: translateY(-2px) scale(1.015);
}
.light-link::after { background: var(--cream); }
.light-link:hover::after,
.light-link:focus-visible::after {
  transform: scaleX(1);
  box-shadow: 0 0 12px rgba(240,235,225,.62);
}

/* Redação */
.tv-foco        { left: 50.0000%; top: 61.1490%; width:  7.1010%; height: .4278%; }
.resumo-novelas { left: 50.0000%; top: 63.2617%; width: 18.1552%; height: .4278%; }
.area-vip       { left: 50.0000%; top: 64.9605%; width:  7.1742%; height: .4278%; }
.fatos-tv       { left: 50.0000%; top: 67.0812%; width: 10.3953%; height: .4278%; }

/* Reconhecimentos */
.rec-frapa17    { left: 5.6223%; top: 72.6605%; width: 19.1801%; height: .4278%; }
.rec-frapa19    { left: 5.6223%; top: 73.9619%; width: 22.4012%; height: .4278%; }
.rec-hcf        { left: 5.6223%; top: 75.2630%; width: 37.3353%; height: .4278%; }
.rec-prisma     { left: 5.6223%; top: 76.5643%; width: 41.7277%; height: .4278%; }
.rec-script     { left: 5.6223%; top: 77.8655%; width: 45.8272%; height: .4278%; }
.rec-curtas     { left: 5.6223%; top: 79.1668%; width: 45.0220%; height: .4278%; }
.rec-argumentos { left: 5.6223%; top: 80.5106%; width: 50.4392%; height: .4278%; }
.rec-gpr        { left: 5.6223%; top: 81.8414%; width: 44.7291%; height: .4278%; }

/* Contato */
.contact-email     { left: 10.9822%; top: 97.6999%; width:  6.0761%; height: .6138%; }
.contact-linkedin  { left: 56.9987%; top: 97.7574%; width:  8.6384%; height: .6138%; }
.contact-instagram { left: 79.0760%; top: 97.7574%; width:  9.8097%; height: .6138%; }

/* Cópia textual equivalente ao layout visual para acessibilidade e indexação. */
.semantic-copy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-piece,
  .social-icon {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .social-icon img,
  .project-hotspot::after,
  .text-hotspot,
  .text-hotspot::after {
    transition: none !important;
  }
}

/* ========================================================================== 
   V4 — refinamentos de interação, onda e texto selecionável
   ========================================================================== */
:root { --biryani: "Biryani", Arial, sans-serif; }
.portfolio-canvas { container-type: inline-size; }

/* Onda real entre a capa e a seção Sobre. A base vetorial continua por baixo,
   mas esta curva encobre o corte reto da reconstrução da primeira página. */
.hero-wave {
  position: absolute;
  z-index: 2;
  left: -1%;
  bottom: -0.1%;
  width: 102%;
  height: 10.8%;
  display: block;
  pointer-events: none;
}
.hero-background { z-index: 0; }
.hero-piece { z-index: 3; }

/* A junção 1 é curva; as demais continuam usando apenas a microcorreção de
   rasterização para que a página permaneça visualmente contínua. */
.seam-1 { display: none !important; }

/* --------------------------------------------------------------------------
   Botões — efeito da primeira versão sem redesenhar texto/borda.
   Uma camada em modo difference inverte exatamente os pixels do botão
   original, evitando a sensação de duas cópias desalinhadas.
   -------------------------------------------------------------------------- */
.project-hotspot::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  display: block;
  background: #f5f5f5;
  mix-blend-mode: difference;
  opacity: 0;
  transform: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: opacity .18s ease;
  pointer-events: none;
}
.project-hotspot:hover::after,
.project-hotspot:focus-visible::after {
  opacity: 1;
  transform: none !important;
  box-shadow: none !important;
}
.project-hotspot-light::after { background: #f5f5f5; }

/* Corrige o deslocamento vertical de ~23 px observado na arte renderizada. */
.trailer            { top: 39.93258%; }
.porta-story         { top: 39.82008%; }
.frapa-2017          { top: 39.81508%; }
.frapa-2019-project  { top: 52.99378%; }

/* --------------------------------------------------------------------------
   Links textuais — sem caixas. O destaque passa a ser uma linha nítida que
   cresce sob o link e recebe um brilho discreto.
   -------------------------------------------------------------------------- */
.text-hotspot {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
.text-hotspot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1%;
  height: max(2px, .09vw);
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(.25);
  transform-origin: center;
  transition: transform .20s ease, opacity .16s ease, filter .20s ease;
  pointer-events: none;
}
.text-hotspot::after { display: none !important; }
.dark-link::before { background: var(--dark); }
.light-link::before { background: var(--cream); }
.text-hotspot:hover::before,
.text-hotspot:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}
.dark-link:hover::before,
.dark-link:focus-visible::before {
  filter: drop-shadow(0 0 4px rgba(5,13,24,.55));
}
.light-link:hover::before,
.light-link:focus-visible::before {
  filter: drop-shadow(0 0 5px rgba(240,235,225,.72));
}
.text-hotspot:focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Efeito "pop" nas fotografias (exceto a primeira página).
   A cópia da imagem só fica visível durante o hover/foco, de modo que a arte
   vetorial continua sendo a referência exata em repouso.
   -------------------------------------------------------------------------- */
.image-pop-layer {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
}
.pop-image {
  position: absolute;
  overflow: hidden;
  pointer-events: auto;
  cursor: default;
  transform: translateZ(0) scale(1);
  transform-origin: center;
}
.pop-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .001;
  transform: scale(1);
  transition: opacity .16s ease, transform .28s cubic-bezier(.2,.75,.25,1), filter .28s ease;
  will-change: transform, opacity, filter;
}
.pop-image:hover img {
  opacity: 1;
  transform: scale(1.055);
  filter: brightness(1.06) drop-shadow(0 .45cqw .75cqw rgba(0,0,0,.24));
}
.pop-about { left:13.4709cqw; top:71.2777cqw; width:28.6735cqw; height:28.6735cqw; border-radius:50%; }
.pop-eu { left:11.97175cqw; top:128.7067cqw; width:20.5661cqw; height:12.1523cqw; border-radius:50%; }
.pop-porta { left:39.69255cqw; top:128.7067cqw; width:20.5661cqw; height:12.1523cqw; border-radius:50%; }
.pop-ringue { left:67.51105cqw; top:128.7067cqw; width:20.5661cqw; height:12.1523cqw; border-radius:50%; }
.pop-vingador { left:11.97175cqw; top:186.7155cqw; width:20.5661cqw; height:12.1523cqw; border-radius:50%; }
.pop-aquela { left:39.69255cqw; top:186.7155cqw; width:20.5661cqw; height:12.1523cqw; border-radius:50%; }
.pop-aquela img { object-position:50% 56%; }
.pop-pajeu { left:67.51105cqw; top:186.7155cqw; width:20.5661cqw; height:12.1523cqw; border-radius:50%; }
.pop-pajeu img { object-position:50% 0; }
.pop-contact { left:31.8019cqw; top:349.9926cqw; width:36.3963cqw; height:36.3963cqw; border-radius:50% 50% 0 0 / 50% 50% 0 0; }

/* --------------------------------------------------------------------------
   Texto HTML real e selecionável sobre a composição vetorial.
   A cor é transparente para não duplicar visualmente a tipografia do PDF;
   o texto ocupa as mesmas áreas, pode ser selecionado/copied e permanece no
   fluxo semântico do documento para indexação e tecnologias assistivas.
   -------------------------------------------------------------------------- */
.copy-layer {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--biryani);
  line-height: 1.35;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: none;
}
.copy-layer section,
.copy-layer header,
.copy-layer article,
.copy-layer div,
.copy-layer h1,
.copy-layer h2,
.copy-layer h3,
.copy-layer p,
.copy-layer span,
.copy-layer strong {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
.copy-layer h1,
.copy-layer h2,
.copy-layer h3,
.copy-layer p { margin: 0; padding: 0; }
.copy-layer section,
.copy-layer header,
.copy-layer article,
.copy-layer div { pointer-events: auto; }
.copy-layer ::selection {
  background: rgba(110,155,205,.38);
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.copy-hero { position:absolute; left:31.2504cqw; top:23.2cqw; width:61.3060cqw; text-align:center; font-family:var(--tenor); }
.copy-hero h1 { font-size:6.25cqw; line-height:1; font-weight:400; }
.copy-role { margin-top:2.6cqw !important; font:400 2.20cqw/1 var(--tenor); }
.copy-descriptor { margin-top:2.7cqw !important; font:400 1.28cqw/1 var(--tenor); }

.copy-about { position:absolute; left:50cqw; top:66.9930cqw; width:40.0195cqw; }
.copy-about h2 { margin-bottom:3.15cqw; font:400 5.8477cqw/1 var(--tenor); }
.copy-about p { margin-bottom:1.53cqw; font:200 1.4388cqw/1.323 var(--biryani); }
.copy-about strong { font-weight:700; }

.copy-screenplay > h2 { position:absolute; left:23.1847cqw; top:118.2203cqw; width:53.622cqw; text-align:center; font:400 4.4168cqw/1 var(--tenor); }
.copy-other > h2 { position:absolute; left:19.610cqw; top:174.481cqw; width:60.780cqw; text-align:center; font:400 4.4168cqw/1 var(--tenor); }
.copy-card { position:absolute; width:24.5974cqw; text-align:center; font-family:var(--tenor); }
.copy-card h3 { margin-bottom:.48cqw; font:400 1.9024cqw/1.08 var(--tenor); }
.copy-card p { font:400 1.0249cqw/1.50 var(--tenor); }
.copy-eu, .copy-porta, .copy-ringue { top:142.05cqw; }
.copy-eu { left:9.9561cqw; } .copy-porta { left:37.6769cqw; } .copy-ringue { left:65.4954cqw; }
.copy-vingador, .copy-aquela, .copy-pajeu { top:200.05cqw; }
.copy-vingador { left:9.9561cqw; } .copy-aquela { left:37.6769cqw; } .copy-pajeu { left:65.4954cqw; }

.copy-content-brand { position:absolute; left:5.6223cqw; top:250.5cqw; width:38.5cqw; text-align:left; }
.copy-content-brand h2 { font:400 5.5344cqw/.99 var(--tenor); }
.copy-content-brand p { margin-top:1.65cqw; font:400 1.5325cqw/1.3 var(--tenor); }
.copy-content-text { position:absolute; left:50cqw; top:230.0049cqw; width:38.1cqw; }
.copy-content-text > p { margin-bottom:3.38cqw; font:200 1.5129cqw/1.36 var(--biryani); }
.copy-content-text article { margin-bottom:2.05cqw; }
.copy-content-text h3 { margin-bottom:.42cqw; font:400 1.472cqw/1 var(--tenor); }
.copy-content-text article p { font:200 1.2152cqw/1.37 var(--biryani); }

.copy-recognitions { position:absolute; inset:0; }
.copy-rec-list { position:absolute; left:5.6223cqw; top:285.8956cqw; width:52.7086cqw; }
.copy-rec-list article { margin-bottom:1.50cqw; }
.copy-rec-list h3 { margin-bottom:.27cqw; font:400 1.472cqw/1.06 var(--tenor); }
.copy-rec-list p { font:200 1.2152cqw/1.2 var(--biryani); }
.copy-recognitions > h2 { position:absolute; left:60.8379cqw; top:299.3cqw; width:33.55cqw; text-align:center; font:400 3.0961cqw/1 var(--tenor); }

.copy-contact { position:absolute; left:5.6223cqw; top:343.0105cqw; width:88.80cqw; }
.copy-contact h2 { margin-bottom:1.25cqw; font:400 6.3524cqw/1 var(--tenor); }
.copy-contact > p { width:65cqw; font:200 1.5081cqw/1.36 var(--biryani); }
.copy-contact-links { position:absolute; left:0; top:41.15cqw; width:88.80cqw; display:grid; grid-template-columns:repeat(4,1fr); text-align:center; font:400 2.0498cqw/1.2 var(--tenor); }

/* O antigo semantic-copy não é mais necessário nesta versão. */
.semantic-copy { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  .pop-image img { transition:none !important; }
  .text-hotspot::before { transition:none !important; }
}

/* Ajustes finos após comparação com o PDF original. */
.hero-wave { height: 14%; }
.pop-vingador img { object-position: 50% 65%; }
.pop-aquela img { object-position: 50% 56%; transform: scale(1.13); }
.pop-aquela:hover img { transform: scale(1.19); }

/* ========================================================================== 
   V5 — interação refinada + texto extraído diretamente do PDF
   ========================================================================== */

/* Remove apenas a linha horizontal da junção da capa. A onda continua sendo
   desenhada pela .hero-wave; esta máscara fica somente na faixa já azul-marinho. */
.hero-seam-mask {
  position: absolute;
  z-index: 5;
  left: 0;
  top: calc(14.2857142857% - 3px);
  width: 100%;
  height: 8px;
  background: var(--dark);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Botões — mesma lógica visual da primeira versão: o botão original fica
   intocado em repouso e, no hover, recebe uma camada opaca exatamente sobre
   sua moldura, sem blend-mode e sem uma segunda borda desalinhada.
   -------------------------------------------------------------------------- */
.project-hotspot {
  width: 17.673928%;
  height: .910714%;
  border-radius: 0;
  overflow: visible;
}
.project-hotspot::before,
.project-hotspot::after { display: none !important; }
.project-hotspot > span {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .10cqw solid transparent;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font: 400 1.1635cqw/1 var(--tenor);
  letter-spacing: .01em;
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
  transition: background-color .20s ease, color .20s ease, border-color .20s ease, box-shadow .20s ease;
}
.project-hotspot:hover > span,
.project-hotspot:focus-visible > span {
  background: var(--dark);
  color: var(--cream);
  -webkit-text-fill-color: var(--cream);
  border-color: var(--dark);
  box-shadow: 0 .28cqw .70cqw rgba(5,13,24,.18);
}
.project-hotspot-light:hover > span,
.project-hotspot-light:focus-visible > span {
  background: var(--cream);
  color: var(--dark);
  -webkit-text-fill-color: var(--dark);
  border-color: var(--cream);
  box-shadow: 0 .28cqw .70cqw rgba(0,0,0,.18);
}
.trailer           { left:13.387210%; top:39.937500%; }
.porta-story        { left:40.969782%; top:39.821429%; }
.frapa-2017         { left:69.009136%; top:39.821429%; }
.frapa-2019-project { left:69.184821%; top:53.000000%; }

/* --------------------------------------------------------------------------
   Links — sem caixa e sem sublinhado adicional. O destaque é um halo que
   acompanha as próprias letras, portanto permanece alinhado ao texto.
   -------------------------------------------------------------------------- */
.text-hotspot {
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}
.text-hotspot::before,
.text-hotspot::after { display: none !important; }
.link-copy {
  position: absolute;
  inset: 0;
  display: block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font: 400 1.47145cqw/1.17 var(--tenor);
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
  transition: text-shadow .22s ease, filter .22s ease;
}
.dark-link:hover .link-copy,
.dark-link:focus-visible .link-copy {
  text-shadow:
    0 0 .07cqw rgba(5,13,24,.95),
    0 0 .36cqw rgba(5,13,24,.68),
    0 0 .78cqw rgba(5,13,24,.28);
}
.light-link:hover .link-copy,
.light-link:focus-visible .link-copy {
  text-shadow:
    0 0 .07cqw rgba(240,235,225,.98),
    0 0 .38cqw rgba(240,235,225,.78),
    0 0 .82cqw rgba(240,235,225,.30);
}
.text-hotspot:focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 3px;
}

/* Coordenadas dos links passam a seguir os bboxes reais do texto no PDF. */
.tv-foco { left:50.000000%; top:61.317708%; width:7.068814%; height:.437500%; }
.resumo-novelas { left:50.000000%; top:63.430308%; width:18.168863%; height:.437500%; }
.area-vip { left:50.000000%; top:65.129216%; width:7.142020%; height:.437500%; }
.fatos-tv { left:50.000000%; top:67.250000%; width:10.373841%; height:.437252%; }
.rec-frapa17 { left:5.622255%; top:72.829117%; width:19.156662%; height:.437500%; }
.rec-frapa19 { left:5.622255%; top:74.130456%; width:22.365056%; height:.437500%; }
.rec-hcf { left:5.622255%; top:75.431796%; width:37.363592%; height:.437252%; }
.rec-prisma { left:5.622255%; top:76.732887%; width:41.710102%; height:.437500%; }
.rec-script { left:5.622255%; top:78.034226%; width:45.796974%; height:.437500%; }
.rec-curtas { left:5.622255%; top:79.335565%; width:45.028795%; height:.437252%; }
.rec-argumentos { left:5.622255%; top:80.679315%; width:51.264031%; height:.437500%; }
.rec-gpr { left:5.622255%; top:82.010169%; width:44.727184%; height:.437252%; }
.contact-email { left:10.981942%; top:97.900794%; width:6.069302%; height:.609375%; }
.contact-linkedin { left:56.998536%; top:97.958333%; width:8.603221%; height:.609375%; }
.contact-instagram { left:79.075647%; top:97.958333%; width:9.777452%; height:.609375%; }
.contact-email .link-copy,
.contact-linkedin .link-copy,
.contact-instagram .link-copy { font-size:2.0498cqw; line-height:1.17; }

/* --------------------------------------------------------------------------
   Imagens — o pop agora escala o recorte inteiro, e não a fotografia dentro
   dele. Isso elimina o zoom repentino e impede a foto de escapar da máscara.
   -------------------------------------------------------------------------- */
.pop-image {
  transform: translateZ(0) scale(1) !important;
  transition: transform .36s cubic-bezier(.18,.72,.22,1), filter .36s ease;
  will-change: transform, filter;
}
.pop-image img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center !important;
  opacity: .001;
  transform: none !important;
  transition: opacity .20s ease, filter .36s ease !important;
  will-change: opacity, filter;
}
.pop-image:hover {
  transform: translateZ(0) scale(1.032) !important;
  filter: drop-shadow(0 .38cqw .62cqw rgba(0,0,0,.22));
}
.pop-image:hover img {
  opacity: 1;
  transform: none !important;
  filter: brightness(1.035);
}
/* Na seção Outros Projetos, o movimento é ainda mais discreto e lento. */
.pop-vingador:hover,
.pop-aquela:hover,
.pop-pajeu:hover { transform: translateZ(0) scale(1.024) !important; }
/* A fotografia final é grande; um pop mínimo preserva o enquadramento. */
.pop-contact:hover { transform: translateZ(0) scale(1.015) !important; }
.pop-contact img {
  object-fit: cover;
  object-position: center center !important;
}

/* --------------------------------------------------------------------------
   Camada textual — os 101 trechos únicos do PDF são representados no HTML;
   82 ficam nesta camada e 19 rótulos clicáveis permanecem nos próprios links.
   Todos usam coordenadas reais do PDF, inclusive os textos da página 1.
   -------------------------------------------------------------------------- */
.pdf-text-layer {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.pdf-text {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: pre;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
  cursor: text;
  font-kerning: normal;
  font-variant-ligatures: normal;
  transform-origin: left top;
}
.pdf-tenor { font-family: var(--tenor); font-weight: 400; }
.pdf-biryani-light { font-family: var(--biryani); font-weight: 200; }
.pdf-biryani-bold { font-family: var(--biryani); font-weight: 700; }
/* Alta não é redistribuída; para a camada invisível de seleção basta um
   fallback de largura semelhante, enquanto o lettering visual segue vetorial. */
.pdf-alta { font-family: var(--tenor); font-weight: 400; }
.pdf-text::selection,
.link-copy::selection,
.project-hotspot > span::selection {
  background: rgba(92,142,198,.42);
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* A camada manual da v4 é desativada por completo. */
.copy-layer { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  .pop-image { transition:none !important; }
  .project-hotspot > span,
  .link-copy { transition:none !important; }
}

/* ========================================================================== 
   V6 — correções finais: camada de texto no canvas + retrato final contido
   ========================================================================== */

/* A camada de texto precisa pertencer ao .portfolio-canvas. As coordenadas do
   PDF são percentuais da página inteira; fora desse contêiner elas eram
   calculadas contra o viewport e acabavam concentradas visualmente no início. */
.pdf-text-layer {
  position: absolute !important;
  z-index: 6 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.pdf-text {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1.18 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto !important;
  cursor: text !important;
  transform: none !important;
}
.pdf-text::selection,
.link-copy::selection,
.project-hotspot > span::selection {
  background: rgba(85, 143, 205, .46) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* O texto dos hotspots continua selecionável quando o link está por cima da
   camada PDF, mas não cria nenhuma área textual fantasma fora da sua posição. */
.link-copy,
.project-hotspot > span {
  user-select: text;
  -webkit-user-select: text;
}

/* Retrato final: a moldura nunca escala. O efeito acontece apenas dentro do
   recorte fixo, então a fotografia não pode ultrapassar seus limites. */
.pop-contact,
.pop-contact:hover {
  transform: none !important;
  overflow: hidden !important;
  filter: none !important;
  transition: filter .42s ease !important;
}
.pop-contact:hover {
  filter: drop-shadow(0 .30cqw .56cqw rgba(0,0,0,.20)) !important;
}
.pop-contact img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1) !important;
  transform-origin: center center !important;
  transition: opacity .22s ease, transform .42s cubic-bezier(.2,.72,.2,1), filter .42s ease !important;
}
.pop-contact:hover img {
  opacity: 1 !important;
  transform: scale(1.008) !important;
  filter: brightness(1.035) contrast(1.015) !important;
}

/* --------------------------------------------------------------------------
   MODAL DO TRAILER — Eu Sou a Lei
   -------------------------------------------------------------------------- */
body.modal-open {
  overflow: hidden;
}

.video-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 56px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, visibility 0s linear .24s;
}

.video-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 7, 13, .86);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1100px, 92vw);
  max-height: 90vh;
  background: #050d18;
  border: 1px solid rgba(240, 235, 225, .48);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .58);
  transform: translateY(12px) scale(.975);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.75,.25,1), opacity .22s ease;
}

.video-modal.is-open .video-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.video-modal__frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.video-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  z-index: 3;
  top: -18px;
  right: -18px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  border: 1px solid rgba(240, 235, 225, .78);
  border-radius: 50%;
  background: #050d18;
  color: #f0ebe1;
  font: 300 32px/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .42);
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
  transform: scale(1.09);
  background: #f0ebe1;
  color: #050d18;
  outline: none;
}

@media (max-width: 700px) {
  .video-modal {
    padding: 18px;
  }
  .video-modal__dialog {
    width: 100%;
  }
  .video-modal__close {
    top: -14px;
    right: -8px;
    width: 38px;
    height: 38px;
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-modal,
  .video-modal__dialog,
  .video-modal__close {
    transition: none;
  }
}

/* V9 — o gatilho do trailer é um <button>, não um link. Assim nunca há
   navegação para o YouTube; o visual continua vindo da arte original. */
button.trailer {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
body.modal-open {
  overflow: hidden;
}

/* ========================================================================== 
   V10 — layout responsivo real para celulares
   O desktop aprovado permanece intacto. Em telas de até 820px, a prancha
   1024×4032 deixa de ser reduzida e entra uma composição móvel própria.
   ========================================================================== */
.mobile-site { display: none; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 820px) {
  html { scroll-behavior: smooth; }
  body { background: var(--dark); overflow-x: hidden; }
  .portfolio-canvas { display: none !important; }
  .mobile-site {
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--dark);
    color: var(--cream);
    line-height: 1.45;
  }
  .mobile-site * { box-sizing: border-box; }
  .mobile-inner {
    width: min(100%, 560px);
    margin: 0 auto;
    padding-left: clamp(22px, 7vw, 38px);
    padding-right: clamp(22px, 7vw, 38px);
  }
  .mobile-dark { background: var(--dark); color: var(--cream); }
  .mobile-cream { background: var(--cream); color: var(--dark); }
  .mobile-section { position: relative; }
  .mobile-wave {
    position: absolute;
    z-index: 2;
    left: -1px;
    bottom: -1px;
    width: calc(100% + 2px);
    height: clamp(48px, 13vw, 76px);
    display: block;
    pointer-events: none;
  }
  .mobile-wave--bottom { transform: translateY(1px); }

  /* Capa */
  .mobile-hero {
    position: relative;
    height: max(620px, 100svh);
    min-height: 620px;
    max-height: 860px;
    overflow: hidden;
    background: #02070d;
  }
  .mobile-hero__bg,
  .mobile-hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .mobile-hero__bg {
    object-fit: cover;
    object-position: 45% center;
  }
  .mobile-hero__shade {
    background: linear-gradient(180deg, rgba(1,5,9,.08) 0%, rgba(1,5,9,.13) 48%, rgba(1,5,9,.46) 100%);
  }
  .mobile-hero__content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 70px 22px 112px;
    text-align: center;
  }
  .mobile-hero__bulb,
  .mobile-hero__name,
  .mobile-hero__role,
  .mobile-hero__descriptor,
  .mobile-social {
    opacity: 0;
    animation: mobile-hero-in .78s cubic-bezier(.2,.72,.23,1) forwards;
  }
  .mobile-hero__bulb { width: clamp(48px, 14vw, 68px); margin-bottom: 30px; animation-delay: .08s; }
  .mobile-hero__name { width: min(88vw, 430px); height: auto; animation-delay: .24s; }
  .mobile-hero__role { width: min(55vw, 255px); height: auto; margin-top: 20px; animation-delay: .39s; }
  .mobile-hero__descriptor { width: min(47vw, 218px); height: auto; margin-top: 24px; animation-delay: .54s; }
  .mobile-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 34px;
    animation-delay: .70s;
  }
  .mobile-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: transform .18s ease, filter .18s ease;
  }
  .mobile-social img { width: 26px; height: 26px; object-fit: contain; }
  .mobile-social a:active { transform: scale(.92); }
  @keyframes mobile-hero-in {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
  .mobile-wave--hero { height: clamp(70px, 20vw, 108px); }

  /* Sobre */
  .mobile-about { padding: 66px 0 104px; }
  .mobile-about__grid { display: flex; flex-direction: column; align-items: center; }
  .mobile-about__portrait {
    display: block;
    width: min(46vw, 205px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 38px;
  }
  .mobile-about__copy { width: 100%; }
  .mobile-about h2,
  .mobile-contact h2 {
    margin: 0 0 24px;
    font: 400 clamp(42px, 12vw, 62px)/1.03 var(--tenor);
    letter-spacing: -.02em;
  }
  .mobile-about p,
  .mobile-contact p,
  .mobile-writing__intro {
    margin: 0 0 18px;
    font: 200 clamp(15px, 4.1vw, 18px)/1.58 var(--biryani);
  }
  .mobile-about strong { font-weight: 700; }

  /* Títulos */
  .mobile-section-title {
    margin: 0 0 44px;
    text-align: center;
    font: 400 clamp(38px, 10.8vw, 54px)/1 var(--tenor);
    letter-spacing: .06em;
  }

  /* Cards de roteiro / projetos */
  .mobile-screenplay { padding: 78px 0 108px; }
  .mobile-other { padding: 72px 0 108px; }
  .mobile-cards { display: grid; gap: 58px; }
  .mobile-project-card { text-align: center; }
  .mobile-project-card > img {
    display: block;
    width: min(86%, 390px);
    aspect-ratio: 1.68 / 1;
    object-fit: cover;
    margin: 0 auto 22px;
    border-radius: 50%;
  }
  .mobile-project-card h3 {
    margin: 0 0 8px;
    font: 400 clamp(26px, 7.4vw, 36px)/1.12 var(--tenor);
  }
  .mobile-project-card p {
    margin: 0 0 9px;
    font: 400 clamp(13px, 3.55vw, 16px)/1.48 var(--tenor);
  }
  .mobile-project-card--dark { color: var(--cream); }
  .mobile-project-button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(82%, 310px);
    min-height: 45px;
    margin-top: 13px;
    padding: 10px 18px;
    border: 1px solid var(--dark);
    background: transparent;
    color: var(--dark);
    text-decoration: none;
    font: 400 clamp(12px, 3.1vw, 14px)/1.15 var(--tenor);
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
  }
  .mobile-project-button:active { background: var(--dark); color: var(--cream); transform: scale(.985); }
  .mobile-project-button--light { border-color: var(--cream); color: var(--cream); }
  .mobile-project-button--light:active { background: var(--cream); color: var(--dark); }

  /* Redação */
  .mobile-writing { padding: 82px 0 108px; }
  .mobile-writing__header { margin-bottom: 32px; }
  .mobile-writing h2 {
    margin: 0 0 13px;
    font: 400 clamp(43px, 12vw, 62px)/.94 var(--tenor);
    letter-spacing: -.025em;
  }
  .mobile-writing__kicker {
    margin: 0;
    font: 400 clamp(14px, 3.8vw, 17px)/1.4 var(--tenor);
  }
  .mobile-writing__intro { margin-bottom: 32px; }
  .mobile-writing__links { display: grid; gap: 12px; }
  .mobile-writing__links a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 0 15px;
    border-bottom: 1px solid rgba(5,13,24,.18);
    color: var(--dark);
    text-decoration: none;
  }
  .mobile-writing__links strong { font: 400 18px/1.25 var(--tenor); }
  .mobile-writing__links span { font: 200 14px/1.45 var(--biryani); }
  .mobile-writing__links a:active { opacity: .62; }

  /* Reconhecimentos */
  .mobile-recognitions { padding: 78px 0 108px; }
  .mobile-rec-list { display: grid; gap: 10px; }
  .mobile-rec-list a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 0 14px;
    color: var(--cream);
    text-decoration: none;
    border-bottom: 1px solid rgba(240,235,225,.17);
  }
  .mobile-rec-list strong { font: 400 clamp(14px, 3.8vw, 17px)/1.35 var(--tenor); }
  .mobile-rec-list span { font: 200 clamp(13px, 3.45vw, 15px)/1.45 var(--biryani); opacity: .86; }
  .mobile-rec-list a:active { opacity: .62; }

  /* Contato */
  .mobile-contact { padding: 80px 0 52px; text-align: left; }
  .mobile-contact h2 { font-size: clamp(43px, 12vw, 62px); }
  .mobile-contact > .mobile-inner > p { margin-bottom: 36px; }
  .mobile-contact__portrait {
    display: block;
    width: min(72vw, 340px);
    aspect-ratio: 1.25 / 1;
    object-fit: cover;
    object-position: center 35%;
    margin: 0 auto 34px;
    border-radius: 50% 50% 0 0 / 54% 54% 0 0;
  }
  .mobile-contact__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(5,13,24,.18);
  }
  .mobile-contact__links a,
  .mobile-contact__links span {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--dark);
    text-decoration: none;
    font: 400 clamp(15px, 4vw, 18px)/1.2 var(--tenor);
    border-bottom: 1px solid rgba(5,13,24,.18);
  }
  .mobile-contact__links > :nth-child(odd) { border-right: 1px solid rgba(5,13,24,.18); }
  .mobile-contact__links a:active { background: rgba(5,13,24,.07); }

  /* Modal no mobile */
  .video-modal { padding: 16px; }
  .video-modal__dialog { width: 100%; }
}

@media (min-width: 821px) {
  .mobile-site { display: none !important; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .mobile-hero__bulb,
  .mobile-hero__name,
  .mobile-hero__role,
  .mobile-hero__descriptor,
  .mobile-social { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ========================================================================== 
   V11 — e-mail confiável em desktop e mobile
   O clique no endereço abre um pequeno seletor interno. Isso evita que um
   navegador/webview sem manipulador mailto pareça não responder.
   ========================================================================== */
.email-modal {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.email-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.email-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 7, 13, .76);
  backdrop-filter: blur(6px);
}
.email-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 520px);
  background: #f0ebe1;
  color: #050d18;
  border: 1px solid rgba(240,235,225,.35);
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
  padding: clamp(28px, 5vw, 44px);
  transform: translateY(10px) scale(.985);
  transition: transform .22s cubic-bezier(.2,.72,.23,1);
}
.email-modal.is-open .email-modal__dialog { transform: none; }
.email-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #050d18;
  font: 300 32px/1 Arial, sans-serif;
  cursor: pointer;
}
.email-modal__content h2 {
  margin: 0 44px 10px 0;
  font: 400 clamp(30px, 5vw, 44px)/1.05 "Tenor Sans", sans-serif;
}
.email-modal__address {
  margin: 0 0 26px;
  font: 200 clamp(14px, 2.8vw, 17px)/1.4 "Biryani", sans-serif;
  overflow-wrap: anywhere;
}
.email-modal__actions {
  display: grid;
  gap: 10px;
}
.email-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid #050d18;
  background: transparent;
  color: #050d18;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font: 400 14px/1.25 "Tenor Sans", sans-serif;
  transition: background-color .17s ease, color .17s ease, transform .17s ease;
}
.email-action:hover,
.email-action:focus-visible {
  background: rgba(5,13,24,.08);
  outline: none;
}
.email-action:active { transform: scale(.985); }
.email-action--primary {
  background: #050d18;
  color: #f0ebe1;
}
.email-action--primary:hover,
.email-action--primary:focus-visible {
  background: #111c2a;
  color: #f0ebe1;
}
.email-modal__status {
  min-height: 1.4em;
  margin: 14px 0 0;
  text-align: center;
  font: 200 13px/1.4 "Biryani", sans-serif;
}
body.email-modal-open { overflow: hidden; }

@media (max-width: 820px) {
  .email-modal { padding: 18px; }
  .email-modal__dialog { width: 100%; padding: 30px 22px 24px; }
  .email-action { min-height: 52px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .email-modal,
  .email-modal__dialog,
  .email-action { transition: none !important; }
}

/* ========================================================================== 
   V12 — formulário de contato integrado ao Netlify Forms
   ========================================================================== */
.contact-form-section {
  position: relative;
  z-index: 30;
  width: 100%;
  margin: 0;
  padding: 150px 0 96px;
  background: var(--dark);
  color: var(--cream);
  line-height: 1.4;
  overflow: hidden;
}
.contact-form-wave {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  display: block;
  pointer-events: none;
}
.contact-form-inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 72px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  gap: clamp(56px, 7vw, 110px);
  align-items: start;
}
.contact-form-copy { padding-top: 10px; }
.contact-form-kicker {
  margin: 0 0 18px;
  color: rgba(240,235,225,.64);
  font: 700 12px/1.2 "Biryani", sans-serif;
  letter-spacing: .24em;
}
.contact-form-copy h2 {
  margin: 0 0 24px;
  max-width: 520px;
  color: var(--cream);
  font: 400 clamp(42px, 5vw, 72px)/.98 var(--tenor);
  letter-spacing: -.02em;
}
.contact-form-copy > p:last-child {
  max-width: 520px;
  margin: 0;
  color: rgba(240,235,225,.78);
  font: 200 clamp(15px, 1.45vw, 18px)/1.75 "Biryani", sans-serif;
}
.contact-form {
  display: grid;
  gap: 22px;
  width: 100%;
}
.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.contact-field {
  display: grid;
  gap: 8px;
}
.contact-field > span {
  color: rgba(240,235,225,.78);
  font: 400 13px/1.25 var(--tenor);
  letter-spacing: .04em;
}
.contact-field > span em {
  font-style: normal;
  opacity: .62;
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid rgba(240,235,225,.32);
  border-radius: 0;
  outline: none;
  background: rgba(240,235,225,.025);
  color: var(--cream);
  caret-color: var(--cream);
  font: 200 15px/1.5 "Biryani", sans-serif;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.contact-field input { min-height: 52px; padding: 12px 14px; }
.contact-field textarea { min-height: 154px; padding: 13px 14px; resize: vertical; }
.contact-field input:hover,
.contact-field textarea:hover { border-color: rgba(240,235,225,.56); }
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--cream);
  background: rgba(240,235,225,.055);
  box-shadow: 0 0 0 3px rgba(240,235,225,.07);
}
.contact-form-footer {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 20px;
  align-items: center;
}
.contact-submit {
  min-height: 50px;
  padding: 13px 24px;
  border: 1px solid var(--cream);
  background: var(--cream);
  color: var(--dark);
  cursor: pointer;
  font: 400 13px/1.2 var(--tenor);
  letter-spacing: .08em;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.contact-submit:hover,
.contact-submit:focus-visible {
  background: transparent;
  color: var(--cream);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  outline: none;
}
.contact-submit:active { transform: scale(.985); }
.contact-submit:disabled { opacity: .55; cursor: wait; }
.contact-form-privacy {
  margin: 0;
  color: rgba(240,235,225,.47);
  font: 200 11px/1.45 "Biryani", sans-serif;
}
.contact-form-status {
  min-height: 1.5em;
  margin: -8px 0 0;
  color: rgba(240,235,225,.82);
  font: 200 13px/1.5 "Biryani", sans-serif;
}
.contact-form-status.is-success { color: #f0ebe1; }
.contact-form-status.is-error { color: #ffd6d6; }
.contact-form-honeypot {
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 820px) {
  .contact-form-section {
    padding: 126px 0 70px;
  }
  .contact-form-wave { top: 0; height: 92px; }
  .contact-form-inner {
    width: min(100% - 36px, 620px);
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .contact-form-copy { padding-top: 0; }
  .contact-form-copy h2 {
    font-size: clamp(42px, 12vw, 58px);
    max-width: none;
  }
  .contact-form-copy > p:last-child { font-size: 15px; }
  .contact-form-row { grid-template-columns: 1fr; gap: 22px; }
  .contact-field input { min-height: 54px; font-size: 16px; }
  .contact-field textarea { min-height: 170px; font-size: 16px; }
  .contact-form-footer {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contact-submit { width: 100%; min-height: 54px; font-size: 14px; }
  .contact-form-privacy { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-field input,
  .contact-field textarea,
  .contact-submit { transition: none !important; }
}

/* ========================================================================== 
   V13 — microajuste final da junção com o formulário
   Remove a linha de 1–2 px na divisão da última página sem alterar a onda.
   ========================================================================== */
.contact-form-section {
  margin-top: -2px;
}
.contact-form-wave {
  top: -2px;
  left: -1px;
  width: calc(100% + 2px);
  height: 112px;
}
@media (max-width: 820px) {
  .contact-form-wave {
    top: -2px;
    height: 94px;
  }
}

/* ========================================================================== 
   V15 — rodapé e acesso à Política de Privacidade
   ========================================================================== */
.contact-form-privacy a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .18s ease, opacity .18s ease;
}
.contact-form-privacy a:hover,
.contact-form-privacy a:focus-visible {
  color: var(--cream);
  opacity: 1;
  outline: none;
}
.site-footer {
  position: relative;
  z-index: 30;
  width: 100%;
  margin: 0;
  background: var(--dark);
  color: var(--cream);
  border-top: 1px solid rgba(240,235,225,.14);
}
.site-footer__inner {
  width: min(1120px, calc(100% - 72px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer p {
  margin: 0;
  color: rgba(240,235,225,.55);
  font: 200 12px/1.5 "Biryani", sans-serif;
}
.site-footer nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.site-footer a {
  color: rgba(240,235,225,.72);
  text-decoration: none;
  font: 400 12px/1.4 var(--tenor);
  letter-spacing: .035em;
  transition: color .18s ease, opacity .18s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--cream);
  outline: none;
}

@media (max-width: 820px) {
  .site-footer__inner {
    width: min(100% - 36px, 620px);
    min-height: 92px;
    padding: 22px 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  .site-footer p,
  .site-footer a { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form-privacy a,
  .site-footer a { transition: none !important; }
}