/* ==========================================================================
   MARCA · Priscila Viotto
   Abertura como a da Yasmin: texto na metade esquerda, ela à direita na arte
   (PC ultrawide 2560x1080); no celular o texto em cima e ela embaixo (1080x3557). As
   artes já trazem os fios dourados do topo: por isso aqui só ficam os de baixo. Depois, dois cards editoriais: foto + painel (Site, WhatsApp).

   ANIMAÇÕES (só CSS; o gatilho é o .is-visible do js/main.js do núcleo):
     luz        sombras de folha (da arte do logo) balançando por cima da
                página, como luz de janela; fios dourados que se desenham
     abertura   logo sai do desfoque, título sobe linha a linha, texto, selos
                e botão em sequência; o botão pulsa
     cards      cortina de cima para baixo com zoom que assenta, moldura de
                fio dourado que se desenha, seta e brilho no hover
     rolagem    o texto da abertura se afasta enquanto a página sobe (só onde
                há animation-timeline; o resto ignora)
   Tudo desliga com prefers-reduced-motion.
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  --suave:   cubic-bezier(.22, 1, .36, 1);
  --cortina: cubic-bezier(.77, 0, .18, 1);
  --dourado: #B8976A;
}

/* ==========================================================================
   LUZ DA JANELA: camada fixa POR CIMA de tudo, sem receber clique. As folhas
   multiplicam (escurecem de leve o que estiver embaixo, como sombra de
   verdade) e balançam presas no canto da tela.
   ========================================================================== */
.luz {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
.folhas {
  position: absolute;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0;
  filter: blur(.6px);
  animation:
    folhas-chegam 2.4s var(--suave) .6s forwards,
    vento 9s ease-in-out 3s infinite alternate;
}
.folhas--topo { top: -2%; right: -2%; width: clamp(200px, 30vw, 470px); transform-origin: 100% 0; }
.folhas--base {
  bottom: -2%; left: -2%; width: clamp(180px, 26vw, 420px); transform-origin: 0 100%;
  animation-delay: .9s, 4.5s;
  animation-duration: 2.4s, 11s;
}
@keyframes folhas-chegam { to { opacity: .9; } }
@keyframes vento {
  0%   { rotate: 0deg;    scale: 1;    translate: 0 0; }
  35%  { rotate: -2.2deg; scale: 1.02; translate: -6px 4px; }
  70%  { rotate: 1.4deg;  scale: 1.01; translate: 4px -2px; }
  100% { rotate: -1deg;   scale: 1.03; translate: -3px 6px; }
}

/* fios dourados nos cantos, como os da arte do logo */
.fios {
  position: absolute;
  width: clamp(220px, 34vw, 520px);
  aspect-ratio: 1;
  overflow: visible;
}
.fios--topo { display: none; }       /* a arte da abertura já tem os fios do topo */
.fios--base { right: 0; bottom: 0; }
.fio {
  fill: none;
  stroke: url(#dourado);
  stroke-width: .32;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  opacity: .8;
  animation:
    fio-desenha 2.8s var(--suave) calc(.4s + var(--i) * .2s) forwards,
    fio-respira 6s ease-in-out calc(3.4s + var(--i) * .5s) infinite alternate;
}
@keyframes fio-desenha { to { stroke-dashoffset: 0; } }
@keyframes fio-respira { from { opacity: .8; } to { opacity: .35; } }

/* ==========================================================================
   ABERTURA
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  padding: 0;
  min-height: min(42.2vw, 100svh);    /* proporção da arte ultrawide, 2560x1080 */
}
.hero__bg {
  inset: 0 0 -3px 0;                   /* passa da borda: a altura em vw não é inteira e sobrava 1 linha da foto */
  transform: none !important;          /* sem o parallax do núcleo: a arte não corre */
  background-position: right bottom;
}
.hero__inner {
  grid-column: 1;
  width: 100%;
  max-width: 600px;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__logo {
  width: clamp(200px, 21vw, var(--hero-logo));
  max-width: 80%;
  margin: 0 0 26px;
  opacity: 0;
}
.hero__inner.is-visible .hero__logo { animation: logo-surge 1.6s var(--suave) .1s both; }
@keyframes logo-surge {
  from { opacity: 0; filter: blur(14px); scale: .94; }
  to   { opacity: 1; filter: blur(0);    scale: 1; }
}

.hero__title {
  font-size: clamp(2.3rem, 3.9vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.005em;
}
.hero__title em { font-style: italic; color: var(--acao); }

.hero__texto {
  margin-top: 16px;
  max-width: 30ch;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: var(--texto-suave);
  --d: .1s;
}

/* frase + selos, depois dos cards */
.sobre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px 0;
}
.sobre.reveal { opacity: 1; transform: none; }   /* quem anima são os itens */
.sobre .hero__texto { margin-top: 0; max-width: 34ch; }

.selos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  --d: .3s;
}
.selos li {
  padding: 7px 14px;
  border: 1px solid rgba(var(--acao-rgb), .28);
  border-radius: 999px;
  background: rgba(250, 248, 243, .6);
  backdrop-filter: blur(4px);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acao);
}

.hero__btn {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 40px;
  border-radius: 999px;
  background: var(--acao);
  color: var(--contraste);
  text-decoration: none;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .04em;
  box-shadow: 0 10px 26px rgba(var(--acao-rgb), .32);
  transition: transform .3s var(--suave), box-shadow .3s var(--suave);
  --d: .6s;
}
.hero__inner.is-visible .hero__btn {
  animation: surgir 1s var(--suave) var(--d) both, pulso 2.8s ease-in-out 2.2s infinite;
}
.hero__btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  animation: seta-desce 1.6s ease-in-out infinite;
}
.hero__btn:hover { transform: translateY(3px); box-shadow: 0 5px 16px rgba(var(--acao-rgb), .28); }
@keyframes pulso {
  0%, 100% { box-shadow: 0 10px 26px rgba(var(--acao-rgb), .32), 0 0 0 0 rgba(var(--acao-rgb), 0); }
  50%      { box-shadow: 0 10px 26px rgba(var(--acao-rgb), .32), 0 0 0 9px rgba(var(--acao-rgb), .16); }
}
@keyframes seta-desce {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 3px; }
}

/* título: cada linha sobe por trás de uma máscara */
.anima-linhas .linha {
  display: block;
  overflow: hidden;
  padding: .06em .1em .2em;            /* folga para acentos, descendentes e itálico */
  margin: -.06em -.1em -.2em;
}
.anima-linhas .linha > span { display: block; translate: 0 115%; }
.anima-linhas .linha:nth-child(2) > span { --n: 1; }
.is-visible .anima-linhas .linha > span {
  animation: linha-sobe 1.15s var(--suave) both;
  animation-delay: calc(.3s + var(--n, 0) * .13s);
}
@keyframes linha-sobe { from { translate: 0 115%; } to { translate: 0 0; } }

/* textos: sobem saindo do desfoque */
.anima-item { opacity: 0; }
.is-visible .anima-item { animation: surgir 1s var(--suave) var(--d, 0s) both; }
@keyframes surgir {
  from { opacity: 0; translate: 0 16px; filter: blur(8px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}

/* ==========================================================================
   LINKS: dois cards editoriais (foto em cima, painel embaixo)
   ========================================================================== */
.links { padding: 70px 0 20px; }
.links__rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 34px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rotulo-cor);
}
.links__rotulo::before,
.links__rotulo::after {
  content: "";
  width: 38px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.cards { margin-top: 0; gap: 40px; padding: 0 36px 10px 24px; }   /* a moldura passa 12px à direita */

.card--pv {
  position: relative;
  display: flex;                       /* os dois cards com a mesma altura */
  flex-direction: column;
  overflow: visible;
  box-shadow: none;
  background: none;
  line-height: normal;
  border-radius: var(--raio);
}
.card--pv.reveal { opacity: 1; transform: none; }   /* quem anima é o miolo */
.card--pv:hover,
.card--pv.is-visible:hover { transform: translateY(-6px); box-shadow: none; }
.card--pv:hover img { transform: none; }

/* moldura de fio dourado, deslocada, que se desenha */
.card--pv::before {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid rgba(184, 151, 106, .6);
  border-radius: var(--raio);
  pointer-events: none;
  clip-path: inset(0 100% 100% 0);
}

.card__miolo,
.card__janela,
.card__painel { display: block; }

.card__janela {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio) var(--raio) 0 0;
  aspect-ratio: 16 / 10;
  clip-path: inset(0 0 100% 0);
}
.card__janela img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.18;
  transition: transform 1.1s var(--suave);
}
.card--pv:hover .card__janela img { transform: scale(1.05); }

/* brilho que atravessa a foto no hover */
.card__janela::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 252, 246, .38) 50%, transparent 65%);
  translate: -120% 0;
  transition: translate 1s var(--suave);
}
.card--pv:hover .card__janela::after { translate: 120% 0; }

.card__painel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--superficie);
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: 0 26px 50px -24px rgba(var(--sombra-rgb), .45);
  opacity: 0;
  transition: box-shadow .4s var(--suave);
}
.card--pv:hover .card__painel { box-shadow: 0 34px 60px -24px rgba(var(--sombra-rgb), .55); }

.card__icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(var(--acao-rgb), .1);
  color: var(--acao);
}
.card__icone svg,
.card__seta svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.card--zap .card__icone { position: relative; }
.card__icone svg.cheio { width: 22px; height: 22px; fill: currentColor; stroke: none; }   /* símbolo oficial do WhatsApp, preenchido */
.card--zap .card__icone::after {          /* onda que sai do ícone do WhatsApp */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--acao-rgb), .5);
  animation: onda 2.6s ease-out infinite;
}
@keyframes onda {
  from { scale: 1;   opacity: .9; }
  to   { scale: 1.6; opacity: 0; }
}

.card__textos { flex: 1; min-width: 0; display: block; }
.card__titulo {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 2.6vw, 1.9rem);
  line-height: 1.05;
  color: var(--texto);
}
.card__sub,
.card__numero { display: block; margin-top: 3px; font-size: .92rem; color: var(--texto-suave); }
.card__numero { font-weight: 700; letter-spacing: .02em; color: var(--acao); }

.card__seta {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(var(--acao-rgb), .3);
  color: var(--acao);
  transition: background-color .35s var(--suave), color .35s var(--suave), rotate .35s var(--suave);
}
.card__seta svg { width: 18px; height: 18px; stroke-width: 2; }
.card--pv:hover .card__seta { background: var(--acao); color: var(--contraste); rotate: 45deg; }

/* entrada: cortina de cima para baixo, zoom que assenta, painel, moldura */
.cards .card { --d: 0s; }
.cards .card:nth-child(2) { --d: .2s; }
.cards .card.is-visible .card__janela     { animation: cortina 1.3s var(--cortina) var(--d) both; }
.cards .card.is-visible .card__janela img { animation: assentar 2.2s var(--suave) var(--d) both; }
.cards .card.is-visible .card__painel     { animation: surgir 1s var(--suave) calc(var(--d) + .55s) both; }
.cards .card.is-visible::before           { animation: moldura 1.3s var(--suave) calc(var(--d) + .7s) both; }
@keyframes cortina  { to { clip-path: inset(0 0 0 0); } }
@keyframes assentar { from { scale: 1.18; } to { scale: 1; } }
@keyframes moldura  { to { clip-path: inset(0 0 0 0); } }

/* ==========================================================================
   RODAPÉ: assinatura profissional (nome completo + CRP)
   ========================================================================== */
.footer {
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 60px 20px 34px;
}
.footer__simbolo { width: 46px; height: 46px; margin-bottom: 8px; opacity: .9; }
.footer small { color: var(--texto-suave); font-weight: 400; letter-spacing: .03em; text-align: center; }
.footer small span { display: inline-block; }   /* no celular quebra entre o nome e o CRP */
.footer .footer__direitos { font-size: .72rem; opacity: .75; }

/* ==========================================================================
   ROLAGEM: o texto da abertura se afasta enquanto a página sobe
   ========================================================================== */
@supports (animation-timeline: scroll()) {
  .hero__inner {
    animation: hero-sai linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 520px;
  }
  @keyframes hero-sai { to { opacity: .25; translate: 0 70px; scale: .96; } }
}

/* ---- Celular: texto em cima, ela na metade de baixo da arte ------------ */
@media (max-width: 700px) {
  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    /* a arte tem 1080x3557 (329vw); 293vw corta só a parede vazia do topo
       e deixa a cabeça dela (56% da arte) logo abaixo do botão */
    min-height: 293vw;
  }
  .hero__bg {
    background:
      linear-gradient(180deg, rgba(245,237,228,.6) 0%, rgba(245,237,228,.35) 30%, rgba(245,237,228,0) 45%),
      var(--hero-img-mobile) center bottom / cover no-repeat,
      var(--hero-base);
  }
  .hero__inner { padding: 44px 22px 0; max-width: 100%; }
  .hero__logo { width: var(--hero-logo-mobile); max-width: 62%; margin-bottom: 20px; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero__texto { font-size: .98rem; margin-top: 12px; }
  .selos { margin-top: 18px; gap: 6px; }
  .selos li { font-size: .64rem; padding: 6px 11px; letter-spacing: .1em; }
  .hero__btn { margin-top: 22px; padding: 15px 34px; }
  .links { padding-top: 56px; }
  .links__rotulo { font-size: .68rem; letter-spacing: .2em; }
  .cards { grid-template-columns: 1fr; gap: 38px; padding: 0 30px 10px 18px; }
}

/* ---- Quem pede menos movimento: tudo parado e visível ------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__inner, .hero__logo, .anima-item, .anima-linhas .linha > span, .hero__btn, .hero__btn svg,
  .folhas, .fio, .card__janela, .card__janela img, .card__painel, .card--pv::before, .card--zap .card__icone::after {
    animation: none !important;
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
    clip-path: none;
    stroke-dashoffset: 0;
  }
  .folhas { opacity: .9; }
  .card--zap .card__icone::after { display: none; }
}