/* Hipótese A · Lapidar — Instituto Patrícia Abrahão */

:root {
  /* cor (amostrada do retrato de estúdio e do logo) */
  --papel: #f6eee6;
  --papel-fundo: #efe2d5;
  --tinta: #2e221d;
  --tinta-suave: #51413a;
  --rosa: #a9746e;
  --rosa-texto: #7e4a44;
  --pessego: #ead2b9;
  --aco: #cfd3d6;
  --batom: #a3211d;
  --aresta: #fffaf3;

  /* tipografia */
  --f-titulo: "Italiana", "Bodoni MT", "Didot", Georgia, serif;
  --f-texto: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --t-grande: clamp(4.5rem, 11.6vw, 11.5rem);
  --t-menor: clamp(1.7rem, 3.05vw, 3rem);
  --t-apoio: clamp(1rem, 1.18vw, 1.125rem);
  --t-mini: .875rem;

  /* espaço */
  --margem: clamp(1.25rem, 4.6vw, 4.5rem);
  --nav-alt: 5.5rem;
  --chanfro: 11px;

  /* figura: altura da foto recortada (proporção 1720 × 1645) */
  --F: min(86svh, 57vw, 56rem);
  --giro: 37deg; /* o mesmo ângulo da placa que ela segura */
  --palco-dir: max(0px, calc((100vw - 1560px) / 2));
  /* coluna do texto: o que sobra à esquerda da figura */
  --col: min(41rem, calc(100vw - var(--F) * .9 - var(--margem) - var(--palco-dir) - 1.5rem));
  --col-base: min(41rem, calc(100vw - var(--F) * 1.0456 - var(--margem) - var(--palco-dir) - 1rem));

  --suave: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p, h1, figure, blockquote { margin: 0; }
img { display: block; }
:focus-visible { outline: 2px solid var(--rosa-texto); outline-offset: 4px; }

/* ───────── hero ───────── */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  padding-inline: var(--margem);
  overflow: hidden;
  overflow: clip;
  background: var(--papel);
}

/* granulado único, por cima de tudo */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .13 0 0 0 0 .11 0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* malha do papel: manchas grandes, vizinhas, lentas */
.malha { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.malha i {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.malha i:nth-child(1) {
  width: 78vmax; height: 78vmax; right: -18vmax; top: -22vmax;
  background: radial-gradient(closest-side in oklab, rgb(234 210 185 / .78), rgb(234 210 185 / .32) 52%, rgb(234 210 185 / 0));
  animation: deriva-a 34s ease-in-out infinite alternate;
}
.malha i:nth-child(2) {
  width: 62vmax; height: 62vmax; left: -22vmax; bottom: -30vmax;
  background: radial-gradient(closest-side in oklch, rgb(217 173 160 / .5), rgb(217 173 160 / .2) 55%, rgb(217 173 160 / 0));
  animation: deriva-b 28s ease-in-out infinite alternate;
}
.malha i:nth-child(3) {
  width: 52vmax; height: 52vmax; left: 22vw; top: -26vmax;
  background: radial-gradient(closest-side in oklab, rgb(207 211 214 / .55), rgb(207 211 214 / .2) 55%, rgb(207 211 214 / 0));
  animation: deriva-c 39s ease-in-out infinite alternate;
}
@keyframes deriva-a { to { transform: translate3d(-7vmax, 6vmax, 0) scale(1.08); } }
@keyframes deriva-b { to { transform: translate3d(9vmax, -5vmax, 0) scale(1.12); } }
@keyframes deriva-c { to { transform: translate3d(8vmax, 7vmax, 0) scale(.92); } }

/* ───────── navegação ───────── */
.nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  min-height: var(--nav-alt);
  animation: surge .8s var(--suave) both;
}
.marca { display: inline-flex; align-items: center; gap: .7rem; min-height: 48px; margin-right: auto; color: var(--rosa-texto); }
.marca-simbolo { width: auto; height: 2.6rem; flex: none; }
.marca-nome {
  font-family: var(--f-titulo);
  font-size: 1.22rem;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--tinta);
}
.marca-nome b { font-weight: 400; }
.marca-nome small {
  display: block;
  margin-top: .28rem;
  font-family: var(--f-texto);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rosa-texto);
}
.nav-links { display: flex; gap: clamp(.4rem, 1.6vw, 1.6rem); }
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--tinta);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: .5rem; right: .5rem; bottom: 12px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--suave);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }

/* botão: o contorno é o da pedra (cantos chanfrados) */
.botao {
  --c: var(--chanfro);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 1.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--papel);
  background: var(--tinta);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  transition: background-color .4s var(--suave);
  overflow: hidden;
}
.botao span { position: relative; z-index: 1; }
.botao::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgb(255 250 243 / .26) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform .9s var(--suave);
}
.botao:hover::after, .botao:focus-visible::after { transform: translateX(110%); }
.botao:hover { background: #46302a; }
.botao-nav {
  --c: 8px;
  min-height: 48px;
  padding: 0 1.4rem;
  font-size: .9375rem;
}

/* ───────── texto ───────── */
.texto {
  position: relative;
  z-index: 3;
  align-self: center;
  max-width: var(--col);
  padding-block: clamp(1rem, 3svh, 2.5rem);
}
.registro {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rosa-texto);
  animation: surge .8s var(--suave) .15s both;
}
.registro i { width: 2.2rem; height: 1px; background: currentColor; opacity: .6; }

.titulo {
  margin-top: clamp(.6rem, 1.6svh, 1.2rem);
  font-family: var(--f-titulo);
  font-weight: 400;
  color: var(--tinta);
}
.titulo > span { display: block; width: max-content; overflow: hidden; }
.titulo > span > span { display: block; animation: sobe 1.1s var(--suave) both; }
.t-grande {
  font-size: var(--t-grande);
  line-height: .92;
  letter-spacing: -.012em;
  margin-left: -.045em;
  padding-bottom: .2em;
  margin-bottom: -.16em;
}
.t-grande > span { animation-delay: .2s; }
.t-grande em { font-style: normal; color: var(--batom); margin-left: -.05em; }
.t-menor {
  font-size: var(--t-menor);
  line-height: 1.12;
  letter-spacing: .005em;
  padding-bottom: .12em;
  /* a segunda linha começa depois da perna do "p" */
  margin-left: calc(var(--t-grande) * 1.24);
}
.t-menor > span { animation-delay: .42s; }

.apoio {
  margin-top: clamp(1rem, 2.6svh, 1.75rem);
  max-width: 31em;
  font-size: var(--t-apoio);
  line-height: 1.6;
  color: var(--tinta-suave);
  animation: surge .9s var(--suave) .8s both;
}
.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.75rem;
  margin-top: clamp(1.25rem, 3.4svh, 2.25rem);
  animation: surge .9s var(--suave) 1s both;
}
.elo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--tinta);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 11px) / calc(100% - 1.7rem) 1px no-repeat;
}
.elo svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .45s var(--suave); }
.elo:hover svg { transform: translateX(5px); }

/* ───────── prova ───────── */
.prova {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  max-width: var(--col-base);
  padding: 1.15rem 0 clamp(1.5rem, 4svh, 2.5rem);
  border-top: 1px solid rgb(46 34 29 / .2);
  animation: surge .9s var(--suave) 1.25s both;
}
.nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .6rem;
  flex: none;
  max-width: 12.5rem;
  font-size: var(--t-mini);
  font-weight: 500;
  color: var(--tinta-suave);
}
.nota b {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--tinta);
}
.estrelas { display: inline-flex; }
.estrelas svg { width: 5rem; height: 1rem; fill: var(--rosa); }
.nota span:last-child { flex-basis: 100%; }
.fala { padding-left: clamp(1.25rem, 2.6vw, 2.5rem); border-left: 1px solid rgb(46 34 29 / .2); }
.fala p {
  font-family: var(--f-titulo);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.22;
  color: var(--tinta);
}
.fala footer { margin-top: .45rem; font-size: var(--t-mini); color: var(--tinta-suave); }

/* ───────── palco: gema + figura ───────── */
.palco {
  position: absolute;
  z-index: 1;
  right: var(--palco-dir);
  bottom: 0;
  width: calc(var(--F) * 1.0456);
  height: var(--F);
  pointer-events: none;
}
.figura {
  position: absolute;
  inset: 0;
  filter: drop-shadow(-14px 22px 34px rgb(74 44 34 / .26));
  animation: chega 1.2s var(--suave) .5s both;
}
.figura img {
  width: 100%; height: 100%; max-width: none;
  /* a manga esquerda termina na borda da foto: dissolve só ali */
  -webkit-mask: linear-gradient(#000, #000) top / 100% 56% no-repeat, linear-gradient(to right, transparent 0, #000 7%) bottom / 100% 44.1% no-repeat;
  mask: linear-gradient(#000, #000) top / 100% 56% no-repeat, linear-gradient(to right, transparent 0, #000 7%) bottom / 100% 44.1% no-repeat;
}

/* reflexo acetinado na placa do aplicador, no mesmo compasso da pedra */
.placa-luz {
  position: absolute;
  inset: 0;
  clip-path: polygon(25.8% 16.5%, 37.9% 27.1%, 30.3% 38.2%, 26.5% 43.2%, 14.7% 31.6%);
  background: linear-gradient(127deg, transparent 30%, rgb(255 255 255 / .6) 47%, rgb(232 238 242 / .5) 53%, transparent 70%) 0 0 / 300% 300% no-repeat;
  mix-blend-mode: soft-light;
  animation: placa 25.5s linear infinite;
}
@keyframes placa {
  0%, 82% { background-position: 110% 110%; opacity: 0; }
  84% { opacity: 1; }
  96% { opacity: 1; }
  100% { background-position: -10% -10%; opacity: 0; }
}

.gema {
  position: absolute;
  left: 50.5%;
  top: 44%;
  height: 82%;
  aspect-ratio: 1000 / 1300;
  transform: translate(-50%, -50%) rotate(var(--giro));
  filter: drop-shadow(0 30px 44px rgb(120 78 62 / .26));
}
.gema-corpo { position: absolute; inset: 0; isolation: isolate; }
.gm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.gm-faceta {
  transform-box: fill-box;
  transform-origin: center;
  animation: monta .72s var(--suave) both;
  animation-delay: calc(.2s + var(--i) * 66ms);
}
.gm-base {
  stroke: var(--aresta);
  stroke-width: 1.1;
  stroke-opacity: .92;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.gm-luz {
  fill: #fffaf2;
  opacity: 0;
  transition: opacity 2.2s ease-in-out;
}
.gm-faceta.acesa .gm-luz { opacity: .64; }
.gm-mesa.acesa .gm-luz { opacity: .42; }
.gm-pav line { stroke: var(--aresta); stroke-width: .8; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.gm-refl { stroke: var(--aresta); stroke-width: .8; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.gm-cinta {
  fill: none;
  stroke: #a9746e;
  stroke-opacity: .7;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  animation: surge 1s ease 1.3s both;
}

/* o gradiente em malha vive dentro da pedra */
.gema-malha, .gema-brilho {
  position: absolute;
  inset: 0;
  clip-path: polygon(20.5% 0, 79.5% 0, 100% 15.77%, 100% 84.23%, 79.5% 100%, 20.5% 100%, 0 84.23%, 0 15.77%);
  pointer-events: none;
}
.gema-malha { mix-blend-mode: soft-light; animation: surge 1.4s ease 1.2s both; }
.gema-malha i { position: absolute; border-radius: 50%; will-change: transform; }
.gema-malha i:nth-child(1) {
  width: 90%; aspect-ratio: 1; left: -25%; top: -12%;
  background: radial-gradient(closest-side in oklab, rgb(255 252 246 / .95), rgb(255 252 246 / .4) 50%, rgb(255 252 246 / 0));
  animation: pedra-a 24s ease-in-out infinite alternate;
}
.gema-malha i:nth-child(2) {
  width: 95%; aspect-ratio: 1; right: -30%; bottom: -8%;
  background: radial-gradient(closest-side in oklch, rgb(150 84 74 / .8), rgb(150 84 74 / .3) 55%, rgb(150 84 74 / 0));
  animation: pedra-b 31s ease-in-out infinite alternate;
}
.gema-malha i:nth-child(3) {
  width: 70%; aspect-ratio: 1; left: 8%; bottom: -14%;
  background: radial-gradient(closest-side in oklab, rgb(196 208 216 / .9), rgb(196 208 216 / .3) 55%, rgb(196 208 216 / 0));
  animation: pedra-c 27s ease-in-out infinite alternate;
}
@keyframes pedra-a { to { transform: translate3d(34%, 46%, 0) scale(1.15); } }
@keyframes pedra-b { to { transform: translate3d(-38%, -52%, 0) scale(.9); } }
@keyframes pedra-c { to { transform: translate3d(30%, -60%, 0) scale(1.2); } }

.gema-brilho {
  background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / .5) 49%, rgb(255 255 255 / .12) 53%, transparent 60%) 0 0 / 320% 100% no-repeat;
  mix-blend-mode: soft-light;
  animation: varre 25.5s linear infinite;
}
@keyframes varre {
  0%, 68% { background-position: 120% 0; }
  86%, 100% { background-position: -20% 0; }
}

/* contador: a luz anda um detalhe por vez */
.conta {
  position: absolute;
  right: 1.15rem;
  top: 56%;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rosa-texto);
  animation: surge 1s ease 1.7s both;
}
.conta-fio { width: 1px; height: 2.6rem; background: currentColor; opacity: .6; }
.conta b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }

/* ───────── entradas ───────── */
@keyframes surge { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sobe { from { transform: translateY(108%); } to { transform: none; } }
@keyframes chega { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes monta {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* ───────── telas médias ───────── */
@media (max-width: 1180px) {
  .nav-links { gap: .2rem; }
  .marca-nome small { display: none; }
  .prova { flex-direction: column; gap: .7rem; padding-top: 1rem; }
  .nota { max-width: none; }
  .nota span:last-child { flex-basis: auto; }
  .fala { padding-left: 0; border-left: 0; }
}

/* ───────── celular e tablet em pé: texto em cima, pedra e figura embaixo ───────── */
@media (max-width: 900px) {
  :root {
    --Fw: min(124vw, 39rem);
    --F: calc(var(--Fw) / 1.0456);
    --t-grande: clamp(4.4rem, 25.6vw, 9.5rem);
    --t-menor: clamp(1.65rem, 8.2vw, 3rem);
    --nav-alt: 4.5rem;
    --col: none;
    --col-base: none;
  }
  .hero { grid-template-rows: auto auto 1fr auto; }
  .nav-links { display: none; }
  .marca-nome small { display: block; font-size: .875rem; letter-spacing: .02em; text-transform: none; margin-top: .2rem; }
  .marca-simbolo { height: 2.5rem; }
  .marca-nome { font-size: 1.08rem; }
  .texto { align-self: start; padding-block: .25rem 0; }
  .t-menor { margin-left: 0; margin-top: .14em; }
  .registro { letter-spacing: .1em; gap: .6rem; }
  .registro i { width: 1.2rem; }
  .apoio { margin-top: .9rem; max-width: 34em; }
  .acoes { margin-top: 1.1rem; gap: .25rem 1.5rem; }
  .botao-principal { flex: 1 1 100%; max-width: 24rem; }

  .palco {
    position: relative;
    align-self: end;
    right: auto;
    left: calc(55vw - var(--Fw) * .53 - var(--margem));
    margin-top: -.75rem;
  }
  .gema { left: 49%; top: 44%; height: 71%; }
  .conta { display: none; }

  .prova {
    max-width: none;
    margin-inline: calc(var(--margem) * -1);
    padding: 1.25rem var(--margem) 1.6rem;
    border-top: 0;
    background: var(--tinta);
    color: var(--papel);
    justify-content: space-between;
  }
  .nota { color: #e4d5c8; }
  .nota b { color: var(--papel); font-size: 2.25rem; }
  .estrelas svg { fill: #d9a79c; }
  .fala { padding-top: .9rem; border-top: 1px solid rgb(246 238 230 / .22); align-self: stretch; }
  .fala p { color: var(--papel); font-size: 1.4rem; }
  .fala footer { color: #e4d5c8; }
}
@media (max-width: 380px) {
  .registro { letter-spacing: .06em; }
  .marca-nome b { display: block; }
  .marca-nome small { display: none; }
}

/* ───────── movimento reduzido ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .placa-luz, .gema-brilho { display: none; }
}

/* cena pausada quando o hero sai da tela */
.hero.pausado .malha i,
.hero.pausado .gema-malha i,
.hero.pausado .gema-brilho,
.hero.pausado .placa-luz { animation-play-state: paused; }