/* Hero B · Papel de ECG — Dr. Eduardo Zanoni */
:root {
  /* cor (marca + amostras do ensaio de estúdio) */
  --verde: #033e30;        /* verde-garrafa da marca */
  --verde-fundo: #01241c;  /* sombra do veludo */
  --verde-veludo: #1d4a37; /* veludo da poltrona, iluminado */
  --verde-medio: #0b5141;
  --vinho-noite: #2a0d0b;  /* quase-vermelho muito escuro */
  --vermelho: #9d1715;     /* vermelho-sangue da marca (tinta no papel) */
  --vermelho-caneta: #e0533f; /* caneta de correção sobre o verde */
  --creme: #f1efea;        /* creme papel */
  --creme-80: rgb(241 239 234 / .8);
  --creme-60: rgb(241 239 234 / .62);
  --papel: #f3efe6;
  --tinta: #0d1f19;        /* traço do eletro */
  --marinho: #161722;      /* terno */

  /* tipo */
  --f-titulo: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --f-nota: "Victor Mono", ui-monospace, monospace;
  --t-grande: clamp(3.4rem, min(1.2rem + 7.6vw, 14.2svh), 8.4rem);
  --t-medio: clamp(1.7rem, min(.9rem + 2.9vw, 6.4svh), 4rem);
  --t-corpo: clamp(1.02rem, .95rem + .3vw, 1.18rem);

  /* espaço */
  --marg: clamp(1.25rem, 5.5vw, 5.5rem);
  --gap: clamp(1rem, 2vw, 1.75rem);
  --tira-h: clamp(128px, 20svh, 196px);
  --hf: min(108svh, 1120px); /* altura do recorte no desktop */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--verde-fundo);
  color: var(--creme);
  font-family: var(--f-titulo);
  font-size: var(--t-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------- moldura ---------- */
.b-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: var(--marg) minmax(0, 1fr) var(--marg);
  grid-template-rows: auto 1fr var(--tira-h) auto;
  overflow: clip;
  isolation: isolate;
  background: var(--verde);
}
.b-hero > * { grid-column: 2; }

/* ---------- malha ---------- */
.b-malha { position: absolute; inset: 0; z-index: -2; overflow: hidden; grid-column: 1 / -1;
  background: radial-gradient(120% 90% at 30% 40% in oklab, var(--verde) 0%, #022f25 70%, var(--verde-fundo) 100%);
}
.b-mancha { position: absolute; border-radius: 50%; will-change: transform; }
.m1 { /* luz de estúdio atrás da cabeça */
  width: 70vmax; height: 70vmax; right: -14vmax; top: -30vmax;
  background: radial-gradient(closest-side in oklab, rgb(241 239 234 / .16), rgb(120 150 132 / .07) 55%, transparent);
  animation: deriva1 34s ease-in-out infinite alternate;
}
.m2 { /* veludo verde */
  width: 80vmax; height: 80vmax; left: -22vmax; top: -18vmax;
  background: radial-gradient(closest-side in oklab, rgb(29 74 55 / .85), rgb(11 81 65 / .25) 60%, transparent);
  animation: deriva2 28s ease-in-out infinite alternate;
}
.m3 { /* quase-vermelho escuro embaixo à esquerda */
  width: 74vmax; height: 74vmax; left: -26vmax; bottom: -44vmax;
  background: radial-gradient(closest-side in oklab, rgb(58 18 15 / .9), rgb(42 13 11 / .4) 55%, transparent);
  animation: deriva3 38s ease-in-out infinite alternate;
}
.m4 { /* verde mais fundo, centro-baixo */
  width: 66vmax; height: 66vmax; left: 30%; bottom: -36vmax;
  background: radial-gradient(closest-side in oklab, rgb(1 30 23 / .95), transparent);
  animation: deriva2 31s ease-in-out infinite alternate-reverse;
}
.m5 { /* marinho do terno, sopro à direita */
  width: 50vmax; height: 50vmax; right: -16vmax; bottom: -16vmax;
  background: radial-gradient(closest-side in oklab, rgb(22 23 34 / .55), transparent);
  animation: deriva1 26s ease-in-out infinite alternate-reverse;
}
@keyframes deriva1 { to { transform: translate3d(-5vmax, 4vmax, 0) scale(1.08); } }
@keyframes deriva2 { to { transform: translate3d(6vmax, 3vmax, 0) scale(.94); } }
@keyframes deriva3 { to { transform: translate3d(4vmax, -5vmax, 0) scale(1.1); } }

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

/* ---------- navegação ---------- */
.b-nav {
  grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: clamp(.9rem, 2.6svh, 1.8rem); position: relative; z-index: 4;
}
.b-assinatura {
  text-decoration: none; font-weight: 400; letter-spacing: .32em; font-size: .82rem; color: var(--creme-80);
}
.b-assinatura b { font-weight: 700; color: var(--creme); }
.b-nav-dir { display: flex; align-items: center; gap: 1.6rem; }
.b-nav-local { font-family: var(--f-nota); font-size: .76rem; color: var(--creme-60); letter-spacing: .02em; }
.b-nav-zap {
  font-family: var(--f-nota); font-size: .8rem; text-decoration: none; color: var(--creme);
  padding: .5em .95em; border: 1px solid rgb(241 239 234 / .3); border-radius: 99px;
  transition: background .3s, border-color .3s;
}
.b-nav-nota { display: none; font-family: var(--f-nota); font-size: .72rem; color: var(--creme-80); padding: .45em .8em; border: 1px solid rgb(241 239 234 / .22); border-radius: 99px; white-space: nowrap; }
.b-nav-nota b { color: var(--creme); font-weight: 600; }
.b-nav-nota i { font-style: normal; color: #e9b44c; }
.b-nav-zap:hover { background: rgb(241 239 234 / .08); border-color: rgb(241 239 234 / .6); }

/* ---------- topo: registro + título ---------- */
.b-topo { grid-row: 2; align-self: end; position: relative; z-index: 3; padding-bottom: clamp(.8rem, 3.2svh, 2.2rem); max-width: 58vw; }
.b-registro {
  margin: 0 0 clamp(.8rem, 2vh, 1.3rem); font-family: var(--f-nota); font-size: clamp(.74rem, .7rem + .2vw, .86rem);
  letter-spacing: .03em; color: var(--creme-80); display: flex; flex-wrap: wrap; gap: .2em .9em; align-items: baseline;
}
.b-nome { font-weight: 600; color: var(--creme); }
.b-reg { position: relative; padding-left: 1.1em; }
.b-reg::before { content: ""; position: absolute; left: 0; top: 50%; width: .55em; height: 1px; background: var(--vermelho-caneta); }

.b-titulo { margin: 0; font-weight: 700; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; }
.b-titulo > span { display: block; }
.b-t1 { font-size: var(--t-medio); font-weight: 300; letter-spacing: .015em; color: var(--creme-80); margin-bottom: .6em; }
.b-t2, .b-t3 { font-size: var(--t-grande); }
.b-clara { position: relative; display: inline-block; }
.b-sublinha {
  position: absolute; left: -.04em; right: -.02em; bottom: -.16em; width: calc(100% + .06em); height: .2em; overflow: visible;
}
.b-sublinha path { fill: none; stroke: var(--vermelho-caneta); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------- palco: tira + figura ---------- */
.b-palco { grid-row: 3; grid-column: 1 / -1; position: relative; z-index: 2; }
.b-tira {
  position: absolute; left: -2vw; right: -2vw; top: 0; bottom: 0;
  transform: rotate(-1.1deg);
  background: var(--papel);
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 34px 60px -26px rgb(0 0 0 / .7), 0 8px 18px -8px rgb(0 0 0 / .45);
}
.b-tira::after { /* luz rasante no papel */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg in oklab, rgb(255 255 255 / .18), transparent 30%, transparent 62%, rgb(40 30 20 / .12));
}
.b-ecg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.b-papel-cab {
  position: absolute; left: calc(2vw + var(--marg)); top: 7px; font-family: var(--f-nota); font-size: 11px; letter-spacing: .04em;
  color: rgb(157 23 21 / .92); font-weight: 500; white-space: nowrap;
}

.b-notas { position: absolute; inset: 0; pointer-events: none; }
.b-nota {
  position: absolute; font-family: var(--f-nota); font-style: italic; font-weight: 500; color: var(--vermelho);
  font-size: 24px; line-height: 1; white-space: nowrap; transform: translate(-50%, -100%);
}
.n-qrs { transform: translate(-50%, 0); display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; }
.n-qrs svg { width: var(--qrs-w, 40px); height: 12px; overflow: visible; }
.n-ritmo { transform: translate(0, 0); font-size: 22px; }
.n-ritmo small { display: block; font-size: 13.5px; font-style: italic; margin-top: 4px; opacity: .85; font-weight: 400; }
.n-ritmo svg { position: absolute; width: 96px; height: 32px; right: 100%; top: 14px; margin-right: 4px; overflow: visible; }
.b-nota svg path { fill: none; stroke: var(--vermelho); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }

.b-figura {
  position: absolute; margin: 0; z-index: 3; pointer-events: none;
  height: var(--hf); aspect-ratio: 710 / 1200;
  top: calc(var(--hf) * -.285); right: max(2vw, calc(50vw - 640px));
}
.b-figura img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(-22px 26px 34px rgb(0 0 0 / .42)) saturate(1.03);
}

/* ---------- base: apoio, ações, prova ---------- */
.b-base {
  grid-row: 4; position: relative; z-index: 4; max-width: min(820px, calc(100vw - var(--hf) * .5917 - max(2vw, 50vw - 640px) - var(--marg) + 2vw));
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap) clamp(1.5rem, 3.5vw, 3.5rem);
  padding-block: clamp(1.1rem, 4svh, 2.8rem) clamp(1rem, 3.4svh, 2.6rem); align-items: start;
}
.b-apoio { margin: 0; color: var(--creme-80); max-width: 40ch; grid-column: 1; }
.b-acoes { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.b-btn {
  display: inline-flex; align-items: center; gap: .6em; text-decoration: none; font-weight: 600; letter-spacing: .02em;
  font-size: 1.06rem; color: var(--verde-fundo); background: var(--creme); padding: .9em 1.4em .9em 1.15em; border-radius: 99px;
  box-shadow: 0 10px 28px -12px rgb(0 0 0 / .6); transition: transform .3s, background .3s;
}
.b-btn svg { width: 1.25em; height: 1.25em; fill: var(--verde); }
.b-btn:hover { transform: translateY(-2px); background: #fff; }
.b-sec { font-family: var(--f-nota); font-size: .86rem; color: var(--creme); text-underline-offset: .35em; text-decoration-color: rgb(224 83 63 / .8); }
.b-btn:focus-visible, .b-sec:focus-visible, .b-nav-zap:focus-visible, .b-assinatura:focus-visible { outline: 2px solid var(--vermelho-caneta); outline-offset: 4px; }

.b-prova { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-left: clamp(1rem, 1.6vw, 1.5rem); border-left: 1px solid rgb(241 239 234 / .22); }
.b-nota-google { margin: 0 0 .5rem; font-family: var(--f-nota); font-size: .8rem; color: var(--creme-80); display: flex; flex-wrap: wrap; gap: .1em .5em; align-items: baseline; }
.b-nota-google b { font-family: var(--f-titulo); font-size: 1.5rem; color: var(--creme); font-weight: 600; }
.b-estrelas { color: #e9b44c; letter-spacing: .1em; font-size: .85rem; }
.b-prova blockquote { margin: 0; font-family: var(--f-nota); font-style: italic; font-size: clamp(.95rem, .88rem + .25vw, 1.08rem); line-height: 1.45; color: var(--creme); }
.b-prova figcaption { margin-top: .45rem; font-size: .82rem; color: var(--creme-60); letter-spacing: .04em; }

/* ---------- entrada ---------- */
.js .b-registro, .js .b-t1, .js .b-t2, .js .b-t3, .js .b-base > *, .js .b-nav { animation: sobe .9s cubic-bezier(.2,.7,.2,1) both; }
.js .b-nav { animation-delay: 0s; }
.js .b-registro { animation-delay: .1s; }
.js .b-t1 { animation-delay: .18s; }
.js .b-t2 { animation-delay: .28s; }
.js .b-t3 { animation-delay: .38s; }
.js .b-apoio { animation-delay: .5s; }
.js .b-acoes { animation-delay: .6s; }
.js .b-prova { animation-delay: .7s; }
.js .b-figura { animation: figura 1.4s .15s cubic-bezier(.2,.7,.2,1) both; }
.js .b-tira { animation: foco 2.2s .45s cubic-bezier(.3,.6,.2,1) both; }
.js .b-sublinha path { stroke-dashoffset: 1; animation: traco .9s 2.7s cubic-bezier(.6,0,.3,1) forwards; }
.js .b-nota { opacity: 0; transition: opacity .5s ease, translate .6s ease; translate: 0 4px; }
.js .b-nota.on { opacity: 1; translate: 0 0; }
.js .b-nota svg path { stroke-dashoffset: 1; transition: stroke-dashoffset .8s .15s ease; }
.js .b-nota.on svg path { stroke-dashoffset: 0; }

@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
@keyframes figura { from { opacity: 0; transform: translateY(36px); } }
@keyframes foco {
  0% { filter: blur(18px); opacity: 0; }
  25% { opacity: .75; }
  100% { filter: blur(0); opacity: 1; }
}
@keyframes traco { to { stroke-dashoffset: 0; } }

/* ---------- notebook estreito ---------- */
@media (min-width: 901px) and (max-width: 1180px) {
  :root { --hf: min(96svh, 900px); }
  .b-base { gap: .9rem clamp(1.2rem, 2.6vw, 2rem); }
  .b-apoio { font-size: .95rem; line-height: 1.45; }
  .b-btn { white-space: nowrap; font-size: .96rem; padding: .8em 1.15em .8em .95em; }
  .b-prova blockquote { font-size: .88rem; }
  .b-nota-google { font-size: .72rem; }
  .b-nota-google b { font-size: 1.3rem; }
}

/* ---------- tablet estreito e celular ---------- */
@media (max-width: 900px) {
  :root { --tira-h: clamp(118px, 31vw, 150px); --t-grande: clamp(2.9rem, 1rem + 9.4vw, 5rem); --t-medio: clamp(1.32rem, .7rem + 3.2vw, 2.2rem); }
  .b-hero { grid-template-rows: auto auto auto auto; min-height: 0; }
  .b-nav { padding-block: 1rem .6rem; }
  .b-nav-local { display: none; }
  .b-assinatura { font-size: .7rem; letter-spacing: .22em; white-space: nowrap; }
  .b-nav-zap { display: none; }
  .b-nav-nota { display: inline-block; }

  .b-palco { grid-row: 2; height: calc(var(--tira-h) + min(88vw, 520px)); }
  .b-tira { top: 6px; bottom: auto; height: var(--tira-h); left: -3vw; right: -3vw; transform: rotate(-1.6deg); }
  .b-papel-cab { left: calc(3vw + var(--marg)); top: 5px; font-size: 9.5px; }
  .b-figura {
    height: auto; width: min(96vw, 560px); top: calc(var(--tira-h) * .58); right: max(-6vw, calc(50vw - 300px));
    -webkit-mask-image: linear-gradient(to bottom, #000 47%, transparent 61%); mask-image: linear-gradient(to bottom, #000 47%, transparent 61%);
  }
  .b-figura img { filter: saturate(1.03); }
  .n-ritmo svg { display: none; }
  .b-palco { overflow: clip; overflow-clip-margin: 0; }
  .b-topo { grid-row: 3; max-width: none; padding-bottom: 0; margin-top: -7vw; }
  .b-registro { font-size: .74rem; margin-bottom: .75rem; }
  .b-apoio { max-width: none; }
  .b-base { grid-row: 4; max-width: none; grid-template-columns: 1fr; padding-block: 1.1rem 1.8rem; gap: 1rem; }
  .b-prova { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; border-top: 1px solid rgb(241 239 234 / .2); padding-top: 1rem; }
  .b-acoes { flex-wrap: nowrap; gap: .9rem; }
  .b-btn { font-size: .98rem; padding: .85em 1.15em .85em .95em; white-space: nowrap; }
  .b-sec { white-space: nowrap; font-size: .8rem; }
  .b-nota { font-size: 16px; }
  .n-ritmo { font-size: 14.5px; }
  .n-ritmo small { font-size: 10.5px; margin-top: 2px; }
}
@media (max-width: 380px) {
  .b-assinatura { font-size: .66rem; letter-spacing: .2em; white-space: nowrap; }
  .b-nav-nota { font-size: .66rem; padding: .4em .7em; }
  .b-palco { height: calc(var(--tira-h) + 77vw); }
  .b-figura { width: 92vw; right: -5vw;
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 56%); mask-image: linear-gradient(to bottom, #000 42%, transparent 56%); }
  .b-topo { margin-top: -5vw; }
  .b-apoio { font-size: .96rem; line-height: 1.45; }
  .b-btn { font-size: .92rem; padding: .8em 1em .8em .85em; }
  .b-acoes { gap: .7rem; }
  .b-sec { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .b-mancha { animation: none !important; }
  .js .b-registro, .js .b-t1, .js .b-t2, .js .b-t3, .js .b-base > *, .js .b-nav, .js .b-figura, .js .b-tira { animation: none !important; }
  .js .b-sublinha path { animation: none; stroke-dashoffset: 0; }
  .js .b-nota { opacity: 1; translate: none; transition: none; }
  .js .b-nota svg path { stroke-dashoffset: 0; transition: none; }
}

/* =====================================================================
   BASE DO SITE (além do hero) — sistema em 02-conceito/sistema.md
   ===================================================================== */
:root {
  --t-texto: clamp(1.0625rem, 1rem + .28vw, 1.2rem);   /* corpo das seções ≥ 17–19 px */
  --t-secao: clamp(2.4rem, 1.2rem + 4.2vw, 5.4rem);     /* título forte de seção */
  --t-sobre: clamp(1.3rem, .9rem + 1.6vw, 2.4rem);      /* linha leve acima do título */
  --t-mini: .875rem;                                     /* rótulos (mínimo 14 px) */
  --ouro: #e9b44c;
  --texto-papel: #3b4a44;                                /* texto secundário sobre papel (AA) */
  --linha-escuro: rgb(241 239 234 / .22);
  --linha-papel: rgb(157 23 21 / .25);
  --respiro: clamp(5rem, 11vw, 10rem);
  --largura: 1280px;
  --mm: 6px;                                             /* grade do papel nas seções */
  --curva: cubic-bezier(.2,.7,.2,1);
  --curva-traco: cubic-bezier(.6,0,.3,1);
}
html { scroll-padding-top: 5rem; }
body { overflow-x: clip; }
img { max-width: 100%; height: auto; }

/* menu do hero (desktop) */
.b-menu { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; font-family: var(--f-nota); font-size: .8rem; }
.b-menu a { text-decoration: none; color: var(--creme-80); padding-block: .4rem; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.b-menu a:hover { color: var(--creme); border-color: var(--vermelho-caneta); }
@media (max-width: 1180px) { .b-menu { display: none; } }

/* ---------- seções ---------- */
.secao { position: relative; isolation: isolate; overflow: clip; padding-block: var(--respiro); font-size: var(--t-texto); line-height: 1.55; }
.secao-in { width: min(100% - 2 * var(--marg), var(--largura)); margin-inline: auto; }
.s-escuro { background: var(--verde); color: var(--creme); }
.s-escuro::after { /* granulado */
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
}
.s-fundo { background: var(--verde-fundo); color: var(--creme); }
.s-papel { background-color: var(--papel); color: var(--tinta);
  background-image:
    linear-gradient(rgb(157 23 21 / .07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(157 23 21 / .07) 1px, transparent 1px),
    linear-gradient(rgb(157 23 21 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(157 23 21 / .035) 1px, transparent 1px);
  background-size: calc(var(--mm) * 5) calc(var(--mm) * 5), calc(var(--mm) * 5) calc(var(--mm) * 5), var(--mm) var(--mm), var(--mm) var(--mm);
}
.s-papel-liso { background: var(--papel); color: var(--tinta); }

/* título de seção: linha leve + linha forte, caixa-alta */
.titulo-secao { margin: 0; font-family: var(--f-titulo); text-transform: uppercase; line-height: .9; letter-spacing: -.005em; }
.titulo-secao .ts-sobre { display: block; font-size: var(--t-sobre); font-weight: 300; letter-spacing: .015em; margin-bottom: .45em; }
.titulo-secao .ts-forte { display: block; font-size: var(--t-secao); font-weight: 700; }
.s-escuro .ts-sobre, .s-fundo .ts-sobre { color: var(--creme-80); }
.s-papel .ts-sobre, .s-papel-liso .ts-sobre { color: var(--texto-papel); }
.s-papel .ts-forte, .s-papel-liso .ts-forte { color: var(--verde); }

/* rótulo técnico (como o cabeçalho do papel de ECG) */
.rotulo { font-family: var(--f-nota); font-size: var(--t-mini); letter-spacing: .04em; font-weight: 500; }
.s-escuro .rotulo, .s-fundo .rotulo { color: var(--creme-60); }
.s-papel .rotulo, .s-papel-liso .rotulo { color: var(--vermelho); }
/* anotação à mão do professor */
.anot { font-family: var(--f-nota); font-style: italic; font-weight: 500; }
.s-escuro .anot, .s-fundo .anot { color: var(--vermelho-caneta); }
.s-papel .anot, .s-papel-liso .anot { color: var(--vermelho); }

/* botões globais */
.btn { display: inline-flex; align-items: center; gap: .6em; min-height: 48px; text-decoration: none; font-family: var(--f-titulo); font-weight: 600; letter-spacing: .02em; font-size: 1.06rem; padding: .85em 1.4em .85em 1.15em; border-radius: 99px; transition: transform .3s, background .3s, color .3s; }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn-creme { background: var(--creme); color: var(--verde-fundo); box-shadow: 0 10px 28px -12px rgb(0 0 0 / .6); }
.btn-creme svg { fill: var(--verde); }
.btn-creme:hover { background: #fff; }
.btn-verde { background: var(--verde); color: var(--creme); box-shadow: 0 10px 28px -14px rgb(3 62 48 / .7); }
.btn-verde svg { fill: var(--creme); }
.btn-verde:hover { background: #02503d; }
.link-nota { font-family: var(--f-nota); font-size: .9rem; text-underline-offset: .35em; min-height: 48px; display: inline-flex; align-items: center; }
.s-escuro .link-nota, .s-fundo .link-nota { color: var(--creme); text-decoration-color: rgb(224 83 63 / .8); }
.s-papel .link-nota, .s-papel-liso .link-nota { color: var(--verde); text-decoration-color: rgb(157 23 21 / .6); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--vermelho-caneta); outline-offset: 4px; border-radius: 4px; }
.s-papel a:focus-visible, .s-papel button:focus-visible, .s-papel summary:focus-visible { outline-color: var(--vermelho); }

/* revelação por rolagem (só com JS) */
.js [data-rev] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--curva), transform .9s var(--curva); transition-delay: calc(var(--d, 0) * 1s); }
.js [data-rev].on { opacity: 1; transform: none; }
.js [data-rev="foco"] { transform: none; filter: blur(14px); transition: opacity 1.6s var(--curva), filter 2s var(--curva); }
.js [data-rev="foco"].on { filter: blur(0); }

/* barra fixa que aparece depois do hero */
.barra { position: fixed; z-index: 50; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--marg); background: rgb(1 36 28 / .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha-escuro); color: var(--creme); transform: translateY(-110%); transition: transform .5s var(--curva); }
.barra.on { transform: none; }
.barra .b-assinatura { font-size: .78rem; }
.barra nav { display: flex; align-items: center; gap: 1.4rem; }
.barra .b-menu { font-size: .78rem; }
.barra-zap { font-family: var(--f-nota); font-size: .8rem; text-decoration: none; color: var(--verde-fundo); background: var(--creme); padding: .55em 1em; border-radius: 99px; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }

/* WhatsApp flutuante (celular) */
.zap-flutua { position: fixed; z-index: 49; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%;
  display: none; place-items: center; background: var(--creme); box-shadow: 0 12px 30px -10px rgb(0 0 0 / .55), 0 0 0 1px rgb(3 62 48 / .15);
  opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .4s, transform .4s var(--curva); pointer-events: none; }
.zap-flutua svg { width: 28px; height: 28px; fill: var(--verde); }
.zap-flutua.on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 900px) {
  .zap-flutua { display: grid; }
  .barra { display: none; }
}

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