/* Cajuice: site institucional. Paleta e tipografia de marca/tokens.css (docs/identidade.md).
   Recusas de forma: sem cápsula, sem squircle, sem cartão com sombra grande. Separação por fio. */

@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("fontes/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("fontes/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("fontes/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: italic; font-display: swap; src: url("fontes/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300; font-display: swap; src: url("fontes/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("fontes/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("fontes/jost-latin-500-normal.woff2") format("woff2"); }

:root {
  --creme: #F7EFE1;
  --creme-claro: #FCF8F0;
  --creme-linha: #E2D2B8;
  --caju: #C2442D;
  --caju-maduro: #A72F2A;
  --polpa: #E9A13B;
  --cajuina: #E8A93A;
  --folha: #4B6B35;
  --folha-clara: #8AA663;
  --castanha: #3A2A1F;
  --castanha-media: #6E4A32;
  --fonte-titulo: "Cormorant Garamond", "Garamond", Georgia, serif;
  --fonte-texto: "Jost", "Segoe UI", system-ui, sans-serif;
  --fonte-tecnica: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
  --suave: cubic-bezier(.22, .8, .24, 1);
  --largura: min(1180px, calc(100% - 64px));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  position: relative;
  background: var(--creme);
  color: var(--castanha);
  font: 300 17px/1.65 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* grão de papel: tira o chapado de tela sem dizer nada */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .17; 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--caju); text-decoration: none; }
a:hover { color: var(--caju-maduro); }
::selection { background: var(--polpa); color: var(--castanha); }
:focus-visible { outline: 2px solid var(--caju); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.06; letter-spacing: -.01em; }
h1 i, h2 i { font-weight: 500; color: var(--caju); }
.pagina { width: var(--largura); margin: 0 auto; position: relative; z-index: 2; }
.rotulo { font: 400 12.5px/1.4 var(--fonte-tecnica); letter-spacing: .04em; color: var(--castanha-media); margin-bottom: 16px; }
.ju { background: linear-gradient(180deg, #EBAE45 0%, #D2582E 55%, #A72F2A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pular { position: absolute; left: -999px; top: 8px; background: var(--castanha); color: var(--creme-claro); padding: 8px 16px; z-index: 100; }
.pular:focus { left: 12px; color: var(--creme-claro); }

/* botão carimbo: retângulo com sombra chapada, afunda ao clicar */
.botao {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 15px 26px; border: 1.5px solid var(--castanha); border-radius: 2px;
  background: var(--caju); color: var(--creme-claro);
  font: 400 15px/1 var(--fonte-texto); letter-spacing: .03em;
  box-shadow: 4px 4px 0 var(--castanha);
  transition: transform .18s var(--suave), box-shadow .18s var(--suave), background .25s;
}
.botao:hover { color: var(--creme-claro); background: var(--caju-maduro); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--castanha); }
.botao:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--castanha); }
.botao-creme { background: var(--creme-claro); color: var(--caju-maduro); }
.botao-creme:hover { background: #fff; color: var(--caju-maduro); }
.link-seta { display: inline-flex; align-items: center; gap: 10px; color: var(--folha); font-weight: 400; border-bottom: 1.5px solid currentColor; padding: 4px 0; }
.link-seta::after { content: "\2193"; transition: transform .3s var(--suave); }
.link-seta:hover { color: var(--folha); }
.link-seta:hover::after { transform: translateY(4px); }

/* topo */
.topo { position: sticky; top: 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.topo.rolou { background: rgba(247, 239, 225, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--creme-linha); }
.topo-dentro { width: var(--largura); margin: 0 auto; padding: 14px 0; display: flex; align-items: center; gap: 36px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--castanha); margin-right: auto; }
.logo:hover { color: var(--castanha); }
.logo span { font: italic 600 32px/1 var(--fonte-titulo); }
.logo img { width: 34px; transition: transform .6s var(--suave); transform-origin: 60% 10%; }
.logo:hover img { transform: rotate(-8deg); }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a { color: var(--castanha); font-size: 15px; font-weight: 400; position: relative; padding: 4px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--caju); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--suave); }
.menu a:hover::after, .menu a.ativo::after { transform: scaleX(1); }
.menu .menu-contato { color: var(--caju); }
.idioma { display: flex; gap: 2px; font: 400 12.5px var(--fonte-tecnica); }
.idioma a { color: var(--castanha-media); padding: 4px 6px; border-bottom: 1.5px solid transparent; }
.idioma a + a::before { content: "/"; color: var(--creme-linha); margin: 0 6px 0 -6px; }
.idioma a[aria-current] { color: var(--castanha); border-bottom-color: var(--caju); }
.menu-botao { display: none; }

/* abertura */
.abertura { position: relative; overflow-x: clip; min-height: calc(min(64vw, 1160px) * .67 + 40px); display: flex; align-items: center; }
.abertura-texto { padding: 24px 0 13vw; }
.abertura-texto > * { max-width: 600px; }
.abertura h1 { font-size: clamp(48px, 5.6vw, 88px); margin-bottom: 26px; }
.abertura h1 i { display: block; }
.abertura-sub { font-size: 19px; color: var(--castanha-media); max-width: 41ch; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-top: 38px; }
.abertura-arvore { position: absolute; right: -7vw; bottom: 0; width: min(64vw, 1160px); z-index: 0; }
.cajueiro { width: 100%; overflow: visible; }
.cajueiro .f1 { fill: #3B5729; } .cajueiro .f2 { fill: #4B6B35; } .cajueiro .f3 { fill: #5D7F40; }
.cajueiro .f4 { fill: #7A9A55; } .cajueiro .f5 { fill: #93AE6A; } .cajueiro .fn { fill: #A9653F; }
.cajueiro .tras { opacity: .85; }
.cajueiro .galho { fill: #6E4A32; }
.cajueiro .galho-sombra { fill: #4A3122; opacity: .55; }
.cajueiro .casca { fill: none; stroke: #3A2A1F; stroke-width: 1.6; opacity: .35; }
.cajueiro .nervura { fill: none; stroke: #DCE5C2; stroke-width: 1.2; opacity: .35; }
.cajueiro .cabo { fill: none; stroke: #405D30; stroke-width: 3; }
.cajueiro .castanha { fill: #726648; }
.cajueiro .chao { fill: none; stroke: var(--castanha-media); stroke-width: 2; opacity: .45; }
.cajueiro .raizes path { fill: none; stroke: #6E4A32; stroke-linecap: round; }
.cajueiro .trilhas path { fill: none; stroke: var(--castanha-media); stroke-width: 2.5; stroke-linejoin: round; opacity: .65; }
.cajueiro .pads circle { fill: var(--creme); stroke: var(--castanha-media); stroke-width: 2.5; }
.cajueiro .pulsos path { fill: none; stroke: var(--polpa); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .05 .95; stroke-dashoffset: 1; animation: pulso 3.6s linear infinite; animation-delay: calc(var(--i) * -.53s); }
@keyframes pulso { to { stroke-dashoffset: 0; } }
.cajueiro .copa { transform-box: view-box; transform-origin: 50% 82%; animation: vento 9s ease-in-out infinite; }
@keyframes vento { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.35deg) skewX(-.4deg); } }
.cajueiro .caju { transform-box: fill-box; transform-origin: 50% 0; animation: balanca 4.5s ease-in-out infinite; animation-delay: calc(var(--fase) * -1); }
.cajueiro #caju-fonte { animation: none; }
@keyframes balanca { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* anotações de prancha botânica com cara de desenho técnico */
.notas-fios { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.notas-fios path { fill: none; stroke: var(--castanha); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.notas-fios circle { fill: var(--castanha); opacity: .7; }
.nota { position: absolute; font: 400 11.5px/1.35 var(--fonte-tecnica); color: var(--castanha); max-width: 190px; opacity: 0; transition: opacity .8s var(--suave) .9s; }
.nota.posta { opacity: .85; }
.nota-fig { right: 6%; top: 2%; font-size: 12.5px; }
.nota-fig.posta { opacity: .75; }

/* a cascata de cajuína: escorre do caju até o copo, translúcida por trás do conteúdo */
.cascata { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; overflow: visible; }
.cascata .corpo { fill: url(#cascata-cor); }
.cascata .borda { fill: none; stroke: #A72F2A; stroke-width: 1.4; opacity: .45; }
.cascata .brilho { fill: none; stroke: #FFF7E2; stroke-linecap: round; stroke-dasharray: 26 70; animation: escorre 2.4s linear infinite; }
.cascata .brilho.b2 { stroke-dasharray: 12 90; animation-duration: 1.7s; opacity: .6; }
.cascata .brilho.b3 { stroke-dasharray: 40 120; animation-duration: 3.1s; opacity: .45; }
.cascata .corpo-escuro { fill: url(#cascata-cor-escuro); }
.cascata .caju-castanha { fill: #726648; }
.cascata .caju-cabo { fill: none; stroke: #405D30; stroke-width: 2.5; stroke-linecap: round; }
@keyframes escorre { to { stroke-dashoffset: -96; } }

/* vidro: só onde a cajuína passa por trás */
.vidro.com-vidro { background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(252, 248, 240, .5) 40%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55); backdrop-filter: blur(.7px) saturate(1.45); -webkit-backdrop-filter: blur(.7px) saturate(1.45); }

/* seções */
.secao { padding: 120px 0; }
.secao-clara { background: var(--creme-claro); }
.secao-cabeca { max-width: 640px; margin-bottom: 56px; }
.secao h2 { font-size: clamp(40px, 5vw, 62px); margin-bottom: 18px; }
.secao-cabeca > p:not(.rotulo) { font-size: 18px; color: var(--castanha-media); }

/* serviços: lista com fio, sem cartão */
.servicos-grade { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; }
.fixa { position: sticky; top: 120px; }
.servicos { list-style: none; border-bottom: 1px solid var(--creme-linha); }
.servico { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 28px 20px 28px 8px; border-top: 1px solid var(--creme-linha); transition: background .35s; }
.servico:hover { background: rgba(252, 248, 240, .85); }
.servico .num { font: italic 500 22px/1.3 var(--fonte-titulo); color: var(--caju); transition: transform .4s var(--suave); }
.servico:hover .num { transform: translateX(6px); }
.servico h3 { font-size: 31px; margin-bottom: 8px; }
.servico p { color: var(--castanha-media); font-size: 16px; max-width: 54ch; }
.servico .exemplos { margin-top: 12px; font: 400 12.5px var(--fonte-tecnica); color: var(--folha); letter-spacing: .02em; }

/* degraus: o galho com quatro cajus */
.degraus-cabeca { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; margin-bottom: 40px; }
.degraus-cabeca .secao-cabeca { margin-bottom: 0; }
.seletor { padding-bottom: 6px; }
.seletor-rotulo { display: block; font: 400 12.5px var(--fonte-tecnica); color: var(--castanha-media); margin-bottom: 4px; }
.escolha { position: relative; display: inline-block; }
.escolha-atual { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; padding: 2px 0; font: italic 500 34px/1.15 var(--fonte-titulo); color: var(--caju); text-align: left; }
.escolha-atual svg { width: 14px; height: 10px; flex: none; fill: none; stroke: var(--caju); stroke-width: 1.8; transition: transform .3s var(--suave); }
.escolha-atual[aria-expanded="true"] svg { transform: rotate(180deg); }
.escolha-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; min-width: 290px; list-style: none; background: var(--creme-claro); border: 1px solid var(--castanha); box-shadow: 4px 4px 0 rgba(58, 42, 31, .14); padding: 6px 0; }
.escolha-menu li { display: flex; align-items: center; gap: 10px; padding: 9px 18px; cursor: pointer; font-size: 16px; }
.escolha-menu li::before { content: ""; width: 14px; flex: none; }
.escolha-menu li[aria-selected="true"]::before { content: "\2713"; color: var(--caju); }
.escolha-menu li:hover, .escolha-menu li.foco { background: var(--creme); }
.seletor-nota { margin-top: 10px; font-size: 14px; color: var(--castanha-media); max-width: 40ch; }
.galho-degraus { position: relative; padding-top: 30px; }
.galho-ramo { position: absolute; top: 0; left: 0; width: 100%; height: 90px; overflow: visible; }
.galho-ramo path { fill: none; stroke: #6E4A32; stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.galho-ramo .galho-folha { fill: var(--folha); stroke: none; }
.degraus { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.degrau { position: relative; padding-right: 8px; }
.degrau-fio { display: none; }
.degrau-caju { width: 62px; height: 99px; margin: -6px 0 18px 26px; overflow: visible; transform-origin: 50% 0; animation: balanca-degrau 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
@keyframes balanca-degrau { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.degrau-cabo { fill: none; stroke: #405D30; stroke-width: 3; }
.degrau-polpa { fill: #9DB04A; transition: fill 1.4s var(--suave); transition-delay: calc(var(--i) * .45s); }
.degrau-castanha { fill: #726648; }
.degrau:nth-child(1) { --cor: #E9C13B; }
.degrau:nth-child(2) { --cor: #F0A12E; }
.degrau:nth-child(3) { --cor: #E8602A; }
.degrau:nth-child(4) { --cor: #C7262B; }
.degraus.maduros .degrau-polpa { fill: var(--cor); }
.degrau-n { display: block; font: 400 12.5px var(--fonte-tecnica); color: var(--castanha-media); }
.degrau b { display: block; font: 600 27px/1.1 var(--fonte-titulo); margin: 4px 0 8px; }
.degrau-texto { font-size: 16px; color: var(--castanha-media); transition: opacity .3s, transform .3s var(--suave); }
.degraus.trocando .degrau-texto { opacity: 0; transform: translateY(6px); }

/* como trabalhamos: passos ligados por trilha de circuito */
.passos-trilha { position: relative; }
.trilha { position: absolute; left: 0; top: 14px; width: 100%; height: 24px; overflow: visible; }
.trilha path { fill: none; stroke: var(--castanha-media); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .7; }
.trilha .trilha-pulso { stroke: var(--polpa); stroke-width: 4; opacity: 1; stroke-dasharray: .04 .96; stroke-dashoffset: 1; stroke-linecap: round; animation: pulso 4.5s linear infinite; }
.passos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.passo { position: relative; padding: 62px 16px 18px 0; }
.pad { position: absolute; left: 0; top: 19px; width: 15px; height: 15px; border-radius: 50%; background: var(--creme); border: 2px solid var(--castanha-media); }
.pad::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--castanha-media); }
.passo:nth-child(2) .pad { top: 11px; } .passo:nth-child(3) .pad { top: 19px; } .passo:nth-child(4) .pad { top: 27px; }
.passo-num { font: 400 12.5px var(--fonte-tecnica); color: var(--caju); }
.passo h3 { font-size: 27px; margin: 6px 0 10px; }
.passo p { font-size: 16px; color: var(--castanha-media); }

/* estúdio */
.estudio { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.estudio-col { display: grid; }
.estudio-item { display: grid; grid-template-columns: 96px 1fr; gap: 26px; padding: 30px 0; border-top: 1px solid var(--creme-linha); }
.estudio-item:last-child { border-bottom: 1px solid var(--creme-linha); }
.estudio-item .rotulo { margin-bottom: 6px; }
.estudio-item h3, .estudio-jogo h3 { font-size: 31px; margin-bottom: 10px; }
.estudio-item p:not(.rotulo), .estudio-jogo > p:not(.rotulo) { font-size: 16px; color: var(--castanha-media); }
.rabisco svg, .broto svg { width: 90px; overflow: visible; }
.rabisco .tela { fill: var(--creme); stroke: var(--castanha); stroke-width: 1.5; }
.rabisco path { fill: none; stroke: var(--castanha); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rabisco .rabisco-caju { stroke: var(--caju); }
.rabisco .rabisco-folha { stroke: var(--folha); }
.rabisco .rabisco-linha { stroke: var(--castanha-media); stroke-width: 3; }
.visivel .rabisco path { animation: rabisca 7s var(--suave) infinite; }
.visivel .rabisco .rabisco-castanha { animation-delay: .5s; }
.visivel .rabisco .rabisco-folha { animation-delay: .8s; }
.visivel .rabisco .l1 { animation-delay: 1.2s; }
.visivel .rabisco .l2 { animation-delay: 1.4s; }
@keyframes rabisca { 0% { stroke-dashoffset: 1; } 30%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.broto .broto-terra { stroke: var(--castanha-media); stroke-width: 1.5; }
.broto .broto-trilha { fill: none; stroke: var(--castanha-media); stroke-width: 1.4; opacity: .8; }
.broto .broto-pad { fill: var(--creme-claro); stroke: var(--castanha-media); stroke-width: 1.4; }
.broto .broto-caule { fill: none; stroke: var(--folha); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.broto .broto-f1, .broto .broto-f2 { fill: var(--folha-clara); transform-box: fill-box; transform: scale(0); }
.broto .broto-f1 { transform-origin: 100% 100%; } .broto .broto-f2 { transform-origin: 0 100%; fill: var(--folha); }
.visivel .broto .broto-caule { animation: cresce 6s var(--suave) infinite; }
.visivel .broto .broto-f1 { animation: brota 6s var(--suave) infinite .2s; }
.visivel .broto .broto-f2 { animation: brota 6s var(--suave) infinite .45s; }
@keyframes cresce { 0% { stroke-dashoffset: 1; } 25%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes brota { 0%, 18% { transform: scale(0); } 34%, 82% { transform: scale(1); } 100% { transform: scale(0); } }
.estudio-jogo { padding-top: 30px; border-top: 1px solid var(--creme-linha); }
.jogo { position: relative; margin-top: 22px; border: 1.5px solid var(--castanha); border-radius: 3px; background: #FBF4E6; box-shadow: 6px 6px 0 rgba(58, 42, 31, .12); overflow: hidden; touch-action: none; }
.jogo canvas { width: 100%; height: auto; aspect-ratio: 640 / 420; display: block; cursor: none; }
.jogo-placar { position: absolute; top: 12px; right: 14px; font: 400 12.5px var(--fonte-tecnica); color: var(--castanha); background: rgba(251, 244, 230, .85); padding: 2px 6px; }
.jogo-n { color: var(--caju); font-weight: 500; }
.jogo:has(.jogo-capa:not([hidden])) .jogo-placar { opacity: 0; }
.jogo-capa { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; background: rgba(58, 42, 31, .78); color: var(--creme-claro); padding: 24px; transition: opacity .3s; }
.jogo-capa[hidden] { display: none; }
.jogo-titulo { font: italic 600 46px/1 var(--fonte-titulo); color: var(--polpa); }
.jogo-instr { font-size: 16px; max-width: 34ch; }
.jogo-comandos { font: 400 12px var(--fonte-tecnica); opacity: .75; }
.jogo-capa .botao { margin: 8px 0 4px; }
.estudio-ponte { margin: 64px auto 0; max-width: 780px; text-align: center; font: italic 500 27px/1.35 var(--fonte-titulo); color: var(--castanha-media); }

/* quem somos */
.sobre-grade { display: grid; grid-template-columns: 1.35fr 1fr; gap: 72px; align-items: center; }
.sobre-texto { font-size: 18px; color: var(--castanha-media); max-width: 54ch; }
.socios { display: grid; }
.socio { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-top: 1px solid var(--creme-linha); }
.socio:last-child { border-bottom: 1px solid var(--creme-linha); }
.socio-mono { width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center; font: italic 600 25px var(--fonte-titulo); color: var(--creme-claro); background: linear-gradient(180deg, #EBAE45, #D2582E 55%, #A72F2A); }
.socio-mono.folha { background: linear-gradient(180deg, var(--folha-clara), var(--folha)); }
.socio h3 { font-size: 27px; }
.socio p { font: 400 12.5px var(--fonte-tecnica); color: var(--castanha-media); }
.principios { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 88px; }
.principios li { padding-left: 18px; border-left: 2px solid var(--folha-clara); }
.principios h3 { font-size: 24px; margin-bottom: 8px; }
.principios p { font-size: 15.5px; color: var(--castanha-media); }

/* perguntas */
.perguntas-grade { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; }
.perguntas-grade .secao-cabeca { margin-bottom: 0; }
.perguntas details { border-bottom: 1px solid var(--creme-linha); }
.perguntas details:first-child { border-top: 1px solid var(--creme-linha); }
.perguntas summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font: 600 24px/1.25 var(--fonte-titulo); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; position: absolute; right: 6px; top: 17px; font: 300 30px var(--fonte-texto); color: var(--caju); transition: transform .35s var(--suave); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { padding: 0 44px 24px 0; color: var(--castanha-media); font-size: 16px; }

/* contato */
.secao-contato { background: var(--castanha); color: var(--creme-claro); }
.secao-contato .rotulo { color: rgba(252, 248, 240, .7); }
.secao-contato h2 i { color: var(--polpa); }
.contato-grade { display: grid; grid-template-columns: 1fr 1.05fr 150px; gap: 56px; align-items: start; }
.contato-texto { font-size: 18px; opacity: .88; max-width: 38ch; }
.contato-email { display: inline-block; margin-top: 26px; font: italic 500 31px var(--fonte-titulo); color: var(--polpa); border-bottom: 1px solid rgba(233, 161, 59, .5); }
.contato-email:hover { color: var(--creme-claro); border-color: var(--creme-claro); }
.formulario { display: grid; gap: 20px; }
.formulario label { display: grid; gap: 4px; font: 400 12px var(--fonte-tecnica); letter-spacing: .03em; color: rgba(252, 248, 240, .7); }
.formulario input, .formulario select, .formulario textarea {
  font: 300 17px/1.5 var(--fonte-texto); color: var(--creme-claro); background: transparent;
  border: 0; border-bottom: 1.5px solid rgba(252, 248, 240, .35); border-radius: 0; padding: 8px 0; transition: border-color .3s;
}
.formulario select { cursor: pointer; }
.formulario select option { color: var(--castanha); }
.formulario textarea { resize: vertical; min-height: 96px; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--polpa); }
.formulario .invalido { border-color: #F08A6B; }
.formulario .botao { justify-self: start; margin-top: 8px; box-shadow: 4px 4px 0 var(--polpa); border-color: var(--creme-claro); }
.formulario .botao:hover { box-shadow: 6px 6px 0 var(--polpa); }
.formulario .botao:active { box-shadow: 1px 1px 0 var(--polpa); }
.formulario-aviso { font-size: 14px; min-height: 1.4em; color: var(--polpa); }
.copo-lugar { align-self: end; position: relative; z-index: 3; }
.copo { width: 150px; overflow: visible; cursor: pointer; }
.copo-vidro { fill: rgba(252, 248, 240, .07); stroke: var(--creme-claro); stroke-width: 2.5; stroke-linejoin: round; }
.copo-brilho { stroke: rgba(252, 248, 240, .5); stroke-width: 3; stroke-linecap: round; }
.copo-liquido { transform: translateY(166px); transition: transform .5s var(--suave); }
.copo-liquido > path { animation: onda 3s linear infinite; }
@keyframes onda { to { transform: translateX(60px); } }
.bolha { fill: #FFF3D0; opacity: .8; animation: bolha 2.8s ease-in infinite; }
.bolha.b2 { animation-duration: 3.4s; animation-delay: -1.2s; } .bolha.b3 { animation-duration: 2.2s; animation-delay: -.6s; }
@keyframes bolha { from { transform: translateY(0); opacity: .85; } to { transform: translateY(-120px); opacity: 0; } }
.copo.tim { animation: tim .5s var(--suave); }
@keyframes tim { 30% { transform: rotate(-6deg); } 65% { transform: rotate(4deg); } }

/* rodapé */
.rodape { background: #2E2119; color: rgba(252, 248, 240, .78); padding: 56px 0 40px; position: relative; z-index: 2; }
.rodape-grade { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 40px; align-items: center; }
.logo-rodape, .logo-rodape:hover { color: var(--creme-claro); margin-right: 0; }
.logo-rodape span { font-size: 28px; }
.rodape-lema { font: italic 500 20px var(--fonte-titulo); }
.rodape-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 15px; }
.rodape-links a { color: rgba(252, 248, 240, .85); }
.rodape-links a:hover { color: var(--polpa); }
.rodape-fino { grid-column: 1 / -1; font: 400 12px var(--fonte-tecnica); opacity: .6; border-top: 1px solid rgba(252, 248, 240, .12); padding-top: 22px; margin-top: 18px; }

/* entrada sem pressa; sem JS, tudo já está visível */
.js .surge { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--suave), transform .9s var(--suave); transition-delay: var(--atraso, 0s); }
.js .surge.visivel { opacity: 1; transform: none; }

/* até 1100: as anotações saem, o menu aperta */
@media (max-width: 1100px) {
  .nota, .notas-fios { display: none; }
  .menu { gap: 20px; }
  .topo-dentro { gap: 24px; }
}

/* até 1020: colunas caem, a árvore entra no fluxo */
@media (max-width: 1020px) {
  .abertura { flex-direction: column; min-height: 0; }
  .abertura-texto { padding: 56px 0 0; }
  .abertura-arvore { position: relative; right: auto; width: 112%; margin: 24px 0 0 -6%; }
  .servicos-grade, .perguntas-grade, .sobre-grade, .degraus-cabeca, .estudio { grid-template-columns: 1fr; gap: 40px; }
  .fixa { position: static; }
  .degraus { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .galho-ramo { display: none; }
  .degrau-caju { margin-top: 0; }
  .passos, .principios { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .trilha { display: none; }
  .passo { padding-top: 36px; } .passo .pad, .passo:nth-child(n) .pad { top: 0; }
  .contato-grade { grid-template-columns: 1fr 1fr; }
  .copo-lugar { grid-column: 1 / -1; justify-self: end; }
}

/* celular */
@media (max-width: 760px) {
  :root { --largura: calc(100% - 44px); }
  body { font-size: 16px; }
  .menu-botao { display: grid; gap: 7px; width: 44px; height: 44px; place-content: center; background: none; border: 0; cursor: pointer; margin-right: -10px; }
  .menu-botao span { display: block; width: 24px; height: 1.5px; background: var(--castanha); transition: transform .35s var(--suave); }
  .menu-botao[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-botao[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .topo { background: rgba(247, 239, 225, .92); }
  .topo-dentro { gap: 10px; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--creme); padding: 4px 22px 22px; box-shadow: 0 1px 0 var(--creme-linha), 0 18px 30px -20px rgba(58, 42, 31, .35);
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .45s var(--suave), visibility 0s .45s;
  }
  .menu.aberto { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .45s var(--suave); }
  .menu a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--creme-linha); }
  .menu a::after { display: none; }
  .abertura { padding-top: 28px; }
  .abertura-texto { padding-top: 12px; }
  .abertura-sub { font-size: 17px; }
  .secao { padding: 80px 0; }
  .secao-cabeca { margin-bottom: 36px; }
  .servico { grid-template-columns: 44px 1fr; padding: 22px 6px 22px 0; }
  .servico h3 { font-size: 27px; }
  .degraus, .passos, .principios { grid-template-columns: 1fr; }
  .degrau { display: grid; grid-template-columns: 70px 1fr; column-gap: 14px; }
  .degrau-caju { grid-row: span 3; margin: 0; width: 52px; height: 83px; }
  .escolha-atual { font-size: 28px; }
  .escolha-menu { min-width: min(290px, 86vw); }
  .estudio-item { grid-template-columns: 70px 1fr; gap: 18px; }
  .rabisco svg, .broto svg { width: 66px; }
  .jogo-titulo { font-size: 36px; }
  .estudio-ponte { font-size: 22px; text-align: left; }
  .contato-grade { grid-template-columns: 1fr; gap: 40px; }
  .copo { width: 110px; }
  .contato-email { font-size: 25px; }
  .rodape-grade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .surge { opacity: 1; transform: none; }
  .rabisco path, .broto .broto-caule { stroke-dashoffset: 0; }
  .broto .broto-f1, .broto .broto-f2 { transform: none; }
  .cajueiro .pulsos { display: none; }
  .trilha .trilha-pulso { display: none; }
  .nota { opacity: .85; }
}