:root {
  --papel: #f7f5f0;
  --papel-2: #efece6;
  --indigo-noite: #0e0c35;
  --indigo: #1d1b55;
  --indigo-fundo: #07072a;
  --royal: #1147b3;
  --royal-vivo: #0044cb;
  --pervinca: #9894dc;
  --petroleo: #2f5a6b;
  --tinta-texto: #0e0c35;
  --texto-suave: color-mix(in oklab, var(--indigo-noite) 72%, var(--papel));
  --f-display: "Imbue", "Didot", Georgia, serif;
  --f-texto: "Questrial", system-ui, sans-serif;
  --pad-x: clamp(20px, 5vw, 92px);
  --nav-h: 64px;
  --raio: 999px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papel);
  color: var(--tinta-texto);
  font-family: var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }

/* navegação */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-x);
}
.marca {
  text-decoration: none;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: .01em;
  display: flex; align-items: baseline; gap: .6em;
}
.marca small {
  font-family: var(--f-texto);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave);
}
.nav-cta {
  font-size: .86rem; letter-spacing: .04em;
  text-decoration: none;
  padding: .62em 1.15em;
  border-radius: var(--raio);
  background: color-mix(in oklab, var(--papel) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--indigo) 30%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--indigo);
  transition: background .3s, color .3s;
}
.nav-cta:hover { background: var(--indigo); color: var(--papel); }

/* hero */
.hero {
  position: relative;
  min-height: max(100svh, 640px);
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 20% 10% in oklab, #fbfaf6, var(--papel) 60%, var(--papel-2));
}
.tela {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
}
.retrato {
  position: absolute; z-index: 1;
  right: 0; bottom: 0; margin: 0;
  width: min(calc((max(100svh, 640px) - 36px) * .75), 50vw);
  aspect-ratio: 3 / 4;
  pointer-events: none;
}
.retrato img {
  width: 100%; height: 100%; display: block;
  /* sem JS: o recorte aparece sobre uma mancha de tinta em CSS */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%);
}
.retrato::before {
  content: ""; position: absolute; inset: 6% -8% -4% -30%; z-index: -1;
  border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%;
  background:
    radial-gradient(40% 50% at 30% 40% in oklab, var(--pervinca), transparent),
    radial-gradient(50% 60% at 70% 60% in oklab, var(--royal), transparent),
    radial-gradient(60% 60% at 50% 50% in oklab, var(--indigo), transparent);
  filter: blur(6px);
}
/* com JS o canvas desenha retrato e tinta; a imagem fica só como medida */
.js .retrato.pronto img { opacity: 0; }
.js .retrato.pronto::before { display: none; }

.copy {
  position: relative; z-index: 2;
  width: min(600px, 41vw);
  margin-left: var(--pad-x);
  padding: calc(var(--nav-h) + clamp(24px, 7vh, 88px)) 0 clamp(40px, 8vh, 80px);
  min-height: max(100svh, 640px);
  display: flex; flex-direction: column; justify-content: center;
}
.sobre {
  margin: 0 0 1.4rem;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-suave);
}
h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 380;
  font-variation-settings: "opsz" 100;
  font-size: clamp(3.1rem, 7.2vw, 7.4rem);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--indigo-noite);
}
h1 .linha { display: block; }
h1 .swash { font-weight: 520; color: var(--indigo); white-space: nowrap; }

.citacao {
  margin: clamp(1.3rem, 3vh, 2rem) 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--pervinca);
  max-width: 34rem;
}
.citacao blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 18;
  font-weight: 400;
  font-size: clamp(1.08rem, 1.45vw, 1.32rem);
  line-height: 1.38;
  color: var(--indigo);
}
.citacao figcaption {
  margin-top: .55rem;
  font-size: .8rem; letter-spacing: .08em;
  color: var(--texto-suave);
}
.apoio {
  margin: clamp(1.1rem, 2.6vh, 1.6rem) 0 0;
  max-width: 31rem;
  font-size: clamp(.98rem, 1.1vw, 1.06rem);
  line-height: 1.6;
  color: var(--texto-suave);
}
.acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
  margin-top: clamp(1.4rem, 3.2vh, 2.1rem);
}
.cta {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1em 1.6em;
  border-radius: var(--raio);
  text-decoration: none;
  font-size: 1rem; letter-spacing: .02em;
  color: #fff;
  background:
    radial-gradient(120% 160% at 15% 0% in oklab, var(--royal), transparent 60%),
    radial-gradient(120% 160% at 100% 100% in oklab, var(--petroleo), transparent 70%),
    var(--indigo);
  box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--indigo) 70%, transparent);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cta svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px color-mix(in oklab, var(--royal) 80%, transparent); }
.sec {
  font-size: .95rem;
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--pervinca) 80%, transparent);
  padding-bottom: 2px;
}
.sec:hover { border-color: var(--indigo); }
.prova {
  margin: 1.3rem 0 0;
  font-size: .92rem;
  color: var(--texto-suave);
}
.prova strong { color: var(--indigo-noite); font-weight: 400; font-size: 1.05rem; }
.estrela { color: var(--royal); }

a:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }

.dica {
  position: absolute; z-index: 3;
  left: var(--pad-x); bottom: 18px;
  margin: 0;
  font-size: .78rem; letter-spacing: .06em;
  color: var(--texto-suave);
  display: none; align-items: center; gap: .6em;
  pointer-events: none;
}
.js .dica { display: flex; }
.dica::before {
  content: ""; width: 26px; height: 8px;
  background: linear-gradient(90deg in oklab, var(--pervinca), var(--royal));
  border-radius: 8px 2px 8px 2px;
  opacity: .9;
}
.js .dica { opacity: 0; transition: opacity 1s ease 3.4s; }
.js .hero.viva .dica { opacity: 1; }
.js .hero.viva.pintou .dica { opacity: 0; transition: opacity .6s ease 0s; }
@media (hover: none), (pointer: coarse) { .dica { display: none; } }

.grao {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* entrada do texto (só com JS) */
.js [data-rev] { opacity: 0; transform: translateY(14px); }
.hero.entra [data-rev] {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.hero.entra [data-rev]:nth-child(1) { transition-delay: .05s; }
.hero.entra [data-rev]:nth-child(2) { transition-delay: .15s; }
.hero.entra [data-rev]:nth-child(3) { transition-delay: .5s; }
.hero.entra [data-rev]:nth-child(4) { transition-delay: .7s; }
.hero.entra [data-rev]:nth-child(5) { transition-delay: .85s; }
.hero.entra [data-rev]:nth-child(6) { transition-delay: 1s; }

/* telas de notebook mais baixas */
@media (max-height: 760px) and (min-width: 900px) {
  .citacao blockquote { font-size: 1.04rem; }
  .apoio { font-size: .95rem; }
  h1 { font-size: clamp(3rem, 6.2vw, 6rem); }
}

/* celular e tablet em pé */
@media (max-width: 899px) {
  :root { --nav-h: 56px; }
  .marca { font-size: 1.2rem; }
  .marca small { display: none; }
  .nav-cta { font-size: .78rem; padding: .55em .95em; }
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .retrato {
    position: relative; right: auto; bottom: auto;
    order: 0;
    margin: var(--nav-h) 0 0 auto;
    width: min(86vw, calc(44svh * .75), 460px);
    flex: none;
  }
  .retrato img {
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent), linear-gradient(90deg, transparent 0, #000 5%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(180deg, #000 82%, transparent), linear-gradient(90deg, transparent 0, #000 5%);
            mask-composite: intersect;
  }
  .copy {
    order: 1;
    width: auto; min-height: 0;
    margin: -16px var(--pad-x) 0;
    padding: 0 0 44px;
    display: flex; justify-content: flex-start;
  }
  .prova { order: 5; margin: .9rem 0 0; }
  .acoes { order: 6; }
  .sobre { margin-bottom: .9rem; font-size: .7rem; letter-spacing: .16em; }
  h1 { font-size: clamp(2.9rem, 13.5vw, 4.4rem); }
  .citacao { margin-top: 1rem; padding-left: .9rem; }
  .citacao blockquote { font-size: 1.02rem; line-height: 1.36; }
  .citacao figcaption { font-size: .74rem; margin-top: .4rem; }
  .apoio { font-size: .93rem; line-height: 1.5; margin-top: .9rem; }
  .acoes { margin-top: 1.2rem; gap: .8rem 1.1rem; }
  .cta { padding: .95em 1.35em; font-size: .98rem; }
  .sec { font-size: .88rem; }
  .prova { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-rev] { opacity: 1; transform: none; }
}