/* Cena subsolo (ROTEIRO.md §3–9): descida, problema, serviços, poço do vagonete, método,
   manto, núcleo e rodapé. O achado do convite saiu da descida em 14/10/2026 (virou a aba "Convite virtual"). Começa na cor do chão da superfície (--solo-1, sem emenda) e escurece
   camada a camada até o núcleo amarelo e a rocha-mãe.
   Camadas dentro de .subsolo: fundo e ondas das camadas (auto) → ruído (::before, 1) → raízes e
   lanterna (1) → conteúdo (2) → fita de obra (3).
   Sem JS e com movimento reduzido: tudo visível e parado, raízes desenhadas, pilha do método vira lista.
   Os estilos antigos de .footer, .steps e .service-list (styles.css) seguem valendo em /convites:
   aqui eles só são sobrescritos com escopo .subsolo / .rodape. */

.subsolo,.rodape{
  /* Texturas geradas (ondas das camadas, cristas, pedrinhas, ruído): SVG em data URI, sem requisição */
  --onda-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 30C150 12 270 44 420 30S690 10 840 24S1110 46 1260 30S1395 18 1440 24V64H0Z'/%3E%3C/svg%3E");
  --crista-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 30C150 12 270 44 420 30S690 10 840 24S1110 46 1260 30S1395 18 1440 24' fill='none' stroke='white' stroke-opacity='.16' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --onda-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 24C120 40 300 14 480 26S780 44 960 28S1260 8 1440 26V64H0Z'/%3E%3C/svg%3E");
  --crista-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 24C120 40 300 14 480 26S780 44 960 28S1260 8 1440 26' fill='none' stroke='white' stroke-opacity='.16' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --onda-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34C180 18 300 10 450 22S720 46 900 32S1200 12 1440 30V64H0Z'/%3E%3C/svg%3E");
  --crista-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34C180 18 300 10 450 22S720 46 900 32S1200 12 1440 30' fill='none' stroke='white' stroke-opacity='.16' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --crista-nucleo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 30C150 12 270 44 420 30S690 10 840 24S1110 46 1260 30S1395 18 1440 24' fill='none' stroke='%23fff4c2' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pedras:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='520'%3E%3Cg fill='black' fill-opacity='.2'%3E%3Cellipse cx='65' cy='98' rx='15' ry='12'/%3E%3Cellipse cx='213' cy='44' rx='7' ry='6'/%3E%3Cellipse cx='321' cy='172' rx='22' ry='17'/%3E%3Cellipse cx='473' cy='86' rx='9' ry='7'/%3E%3Cellipse cx='593' cy='214' rx='13' ry='10'/%3E%3Cellipse cx='123' cy='304' rx='10' ry='8'/%3E%3Cellipse cx='265' cy='396' rx='17' ry='13'/%3E%3Cellipse cx='423' cy='334' rx='6' ry='5'/%3E%3Cellipse cx='543' cy='444' rx='20' ry='15'/%3E%3Cellipse cx='39' cy='474' rx='8' ry='6'/%3E%3Cellipse cx='363' cy='492' rx='11' ry='8'/%3E%3Cellipse cx='171' cy='200' rx='5' ry='4'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.075'%3E%3Cellipse cx='62' cy='94' rx='15' ry='12'/%3E%3Cellipse cx='210' cy='40' rx='7' ry='6'/%3E%3Cellipse cx='318' cy='168' rx='22' ry='17'/%3E%3Cellipse cx='470' cy='82' rx='9' ry='7'/%3E%3Cellipse cx='590' cy='210' rx='13' ry='10'/%3E%3Cellipse cx='120' cy='300' rx='10' ry='8'/%3E%3Cellipse cx='262' cy='392' rx='17' ry='13'/%3E%3Cellipse cx='420' cy='330' rx='6' ry='5'/%3E%3Cellipse cx='540' cy='440' rx='20' ry='15'/%3E%3Cellipse cx='36' cy='470' rx='8' ry='6'/%3E%3Cellipse cx='360' cy='488' rx='11' ry='8'/%3E%3Cellipse cx='168' cy='196' rx='5' ry='4'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.11'%3E%3Cellipse cx='57.2' cy='89.4' rx='6.3' ry='3.6'/%3E%3Cellipse cx='207.8' cy='37.7' rx='2.9' ry='1.8'/%3E%3Cellipse cx='311.0' cy='161.5' rx='9.2' ry='5.1'/%3E%3Cellipse cx='467.1' cy='79.3' rx='3.8' ry='2.1'/%3E%3Cellipse cx='585.8' cy='206.2' rx='5.5' ry='3.0'/%3E%3Cellipse cx='116.8' cy='297.0' rx='4.2' ry='2.4'/%3E%3Cellipse cx='256.6' cy='387.1' rx='7.1' ry='3.9'/%3E%3Cellipse cx='418.1' cy='328.1' rx='2.5' ry='1.5'/%3E%3Cellipse cx='533.6' cy='434.3' rx='8.4' ry='4.5'/%3E%3Cellipse cx='33.4' cy='467.7' rx='3.4' ry='1.8'/%3E%3Cellipse cx='356.5' cy='485.0' rx='4.6' ry='2.4'/%3E%3Cellipse cx='166.4' cy='194.5' rx='2.1' ry='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --ruido: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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.subsolo{
  /* Distância mínima entre dois Formas: um Forma por quadro, em qualquer largura */
  --quadro:100vh;
  --onda-h:clamp(30px,4.4vw,64px);
  --pilha-topo:calc(78px + 3vh);--pilha-passo:26px;--pilha-folga:30vh;
  --fig-h:clamp(220px,36vh,380px);
  --card-h:clamp(440px,calc(100svh - var(--pilha-topo) - 3 * var(--pilha-passo) - 28px),600px);
  --card-h-lista:clamp(420px,62vh,560px);
  position:relative;color:var(--mist);background:var(--solo-1);
}
@supports (height:100lvh){.subsolo{--quadro:100lvh}}

/* Grão de terra contínuo por cima de todas as camadas; some no topo pra não marcar a emenda com o chão */
.subsolo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--ruido) 0 0/180px 180px;opacity:.07;-webkit-mask-image:linear-gradient(transparent,#000 280px);mask-image:linear-gradient(transparent,#000 280px)}
.subsolo .wrap{position:relative;z-index:2}
.subsolo :focus-visible{outline-color:var(--yellow)}
.subsolo h2{color:var(--mist);font-weight:720;line-height:1.08;letter-spacing:-.03em}
.subsolo h3{color:var(--mist)}
.subsolo figure{margin:0}
.subsolo .figura-quadro{position:relative}
.subsolo .figura-quadro img,.fossil img,.vagonete img{display:block;width:100%;height:auto}

/* Raízes: desenhadas pelo subsolo.js com a posição real dos serviços */
.raizes{position:absolute;left:0;top:0;z-index:1;width:100%;height:1px;overflow:visible;pointer-events:none}
.raizes path{fill:none;stroke:var(--raiz);stroke-linecap:round;stroke-linejoin:round}
.raizes .raiz-halo{stroke-width:8;stroke-opacity:.16}
.raizes .raiz{stroke-width:2.2}
.raizes .raiz-pelo{stroke-width:1.3;stroke-opacity:.7}
.raizes .raiz-ponta{fill:var(--nucleo-quente)}
.raizes .raiz-ponta-halo{fill:var(--raiz);fill-opacity:.22}

/* Lanterna: canvas fixo criado pelo lanterna.js, entre o fundo e o texto */
.subsolo .lanterna{position:fixed;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

/* Figuras do Forma: cantoneiras e legenda amarela inclinada da proposta da Maria Eduarda */
.subsolo .figura-forma{position:relative}
.subsolo .figura-forma:not(.nivel-figura)::before,.subsolo .figura-forma:not(.nivel-figura)::after{content:"";position:absolute;z-index:1;width:clamp(30px,3.4vw,50px);aspect-ratio:1;border:2px solid var(--neon-azul);pointer-events:none}
.subsolo .figura-forma:not(.nivel-figura)::before{right:-5%;top:3%;border-bottom:0;border-left:0;border-radius:0 16px 0 0;transform:rotate(8deg)}
.subsolo .figura-forma:not(.nivel-figura)::after{left:-5%;bottom:14%;border-top:0;border-right:0;border-radius:0 0 0 16px;transform:rotate(-8deg)}
.subsolo .figura-forma figcaption{position:relative;z-index:2;display:flex;align-items:center;gap:10px;width:fit-content;max-width:min(94%,26ch);margin:-12px auto 0;padding:12px 20px;border-radius:12px;background:var(--yellow);color:var(--ink);font-size:clamp(15px,1.15vw,17px);font-weight:650;line-height:1.3;transform:rotate(-4deg);box-shadow:0 10px 0 #0a0e2140}
.subsolo .figura-forma figcaption::before{content:"✦" / "";flex:none;color:var(--blue);font-size:1.1em;line-height:1}

/* Camadas: cada uma sobe com borda ondulada por cima da anterior, e uma crista clara marca o encontro */
.subsolo .camada{position:relative;background-color:var(--cor)}
.subsolo .camada::before,.subsolo .camada::after,.footer.rodape::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--onda-h);pointer-events:none}
.subsolo .camada::before{background:var(--cor);-webkit-mask:var(--onda,var(--onda-a)) 50% 100%/max(100%,1100px) 100% no-repeat;mask:var(--onda,var(--onda-a)) 50% 100%/max(100%,1100px) 100% no-repeat}
.subsolo .camada::after{background:var(--crista,var(--crista-a)) 50% 100%/max(100%,1100px) 100% no-repeat}

/* 3. Descida (−2 m): mesma cor do chão da superfície, frase grande, Forma saindo do buraco, fita de obra */
.descida{position:relative;padding-bottom:clamp(80px,10vw,140px);background:var(--solo-1)}
.descida::before{content:"";position:absolute;inset:clamp(160px,22vh,240px) 0 0;background:var(--pedras) 0 0/640px 520px;-webkit-mask-image:linear-gradient(transparent,#000 260px);mask-image:linear-gradient(transparent,#000 260px);pointer-events:none}
.descida-palco{min-height:var(--quadro);display:flex;align-items:center;padding-block:clamp(56px,10vh,120px)}
.descida-frase{max-width:19ch;font-size:clamp(34px,5.3vw,84px);font-weight:760;line-height:1.02;letter-spacing:-.035em}
.descida-frase span{display:block;margin-top:.14em;color:var(--yellow)}
.descida-frase .palavra{display:inline-block}
.descida-buraco{position:relative;z-index:2;display:flex;justify-content:flex-end;padding-inline:max(var(--gutter),calc((100% - 1240px) / 2 + var(--gutter)))}
.descida-forma{width:clamp(250px,31vw,450px);margin-right:5%}
.farelo{position:absolute;z-index:3;width:var(--t,10px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--blue-400),var(--blue) 60%);pointer-events:none}
.faixa-obra{position:absolute;z-index:3;left:0;right:0;bottom:15%;height:clamp(92px,10.5vw,160px);pointer-events:none}
.faixa-obra svg{display:block;width:100%;height:100%;overflow:visible;transform:rotate(-3.5deg);pointer-events:auto}
.faixa-borda{fill:none;stroke:var(--ink);stroke-width:66}
.faixa-fita{fill:none;stroke:var(--yellow);stroke-width:58}
.faixa-texto{font-family:Bricolage,Arial,sans-serif;font-size:36px;font-weight:800;letter-spacing:2px;fill:var(--ink);dominant-baseline:central}

/* 4. Problema (−40 m): fóssil e título no primeiro quadro, dores e Forma da lupa no segundo */
.camada-problema{--cor:var(--solo-2);--onda:var(--onda-a);--crista:var(--crista-a);padding:clamp(24px,4vw,48px) 0 clamp(88px,10vw,140px);background-image:var(--pedras);background-size:640px 520px;background-position:210px 140px}
.problema-cabeca{min-height:calc(var(--quadro) - var(--onda-h));display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(32px,6vw,96px)}
.problema-cabeca h2{grid-column:2;grid-row:1;max-width:20ch;font-size:clamp(30px,3.7vw,54px)}
.fossil{grid-column:1;grid-row:1;justify-self:center;width:clamp(210px,25vw,360px)}
.fossil img{filter:drop-shadow(0 22px 34px #0a0e2173)}
.fossil figcaption{display:flex;gap:10px;align-items:baseline;width:fit-content;max-width:32ch;margin:8px auto 0;padding:10px 16px;border-radius:10px;background:var(--mist);color:var(--ink);font-size:14px;line-height:1.4;transform:rotate(2.5deg);box-shadow:0 8px 0 #0a0e2147}
.fossil figcaption::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue);transform:translateY(-1px)}
.problema-corpo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start;gap:clamp(32px,5vw,80px);margin-top:clamp(16px,3vw,40px)}
.subsolo .camada-problema .pains{display:grid;grid-template-columns:1fr;gap:clamp(30px,3.6vw,48px);margin:0;max-width:640px}
.subsolo .camada-problema .pains li{--luz:0;position:relative;padding-top:24px;color:var(--mist);background:linear-gradient(var(--yellow),var(--yellow)) 0 0/24% 2px no-repeat,linear-gradient(#f1f3fa38,#f1f3fa38) 100% 0/70% 2px no-repeat}
/* Onde o feixe da lanterna do Forma passa, a rocha atrás da dor clareia (o texto nunca muda) */
.subsolo .camada-problema .pains li::after{content:"";position:absolute;inset:-4px -28px -18px;z-index:-1;border-radius:20px;background:radial-gradient(ellipse at 22% 34%,#ffe0652e,#ffe06500 70%);opacity:var(--luz);pointer-events:none}
.subsolo .camada-problema .pains h3{font-size:clamp(20px,1.7vw,24px);line-height:1.25}
.subsolo .camada-problema .pains p{margin-top:10px;max-width:46ch;color:var(--on-ink-soft)}
.problema-forma{justify-self:center;width:clamp(220px,25vw,370px)}
.lupa-feixe{position:absolute;z-index:-1;left:var(--feixe-x,46%);top:var(--feixe-y,24%);width:min(62vw,860px);height:clamp(150px,17vw,250px);transform-origin:0 50%;transform:translateY(-50%) rotate(calc(var(--feixe-de,186deg) + var(--feixe,0) * var(--feixe-varre,-30deg)));background:linear-gradient(90deg,#ffe0655c,#ffe06512 55%,#ffe06500 92%);clip-path:polygon(0 47%,100% 0,100% 100%,0 53%);pointer-events:none}

/* 5. Serviços (−300 m): três entradas em degrau, cada uma alimentada por uma raiz (nó + linha acesa) */
.camada-servicos{--cor:var(--solo-3);--onda:var(--onda-b);--crista:var(--crista-b);min-height:var(--quadro);padding:clamp(56px,8vw,112px) 0 clamp(96px,11vw,150px);background-image:var(--pedras);background-size:640px 520px;background-position:-160px 260px}
.camada-servicos h2{font-size:clamp(32px,4vw,56px)}
.subsolo .service-list{display:grid;gap:clamp(36px,4.6vw,64px);margin-top:clamp(44px,5.5vw,76px);border:0}
.subsolo .servico{--recuo:0%;position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr) auto;align-items:baseline;gap:14px clamp(24px,3.6vw,48px);margin-left:var(--recuo);padding:30px 0 0 38px;border:0;background:linear-gradient(#f1f3fa2e,#f1f3fa2e) 38px 0/calc(100% - 38px) 1px no-repeat}
.subsolo .servico:nth-child(2){--recuo:6%}
.subsolo .servico:nth-child(3){--recuo:12%}
.subsolo .servico::after{content:"";position:absolute;left:38px;right:0;top:0;height:2px;background:var(--yellow);transform-origin:0 50%;transition:transform .9s var(--ease-expo)}
.servico-no{position:absolute;left:4px;top:0;width:18px;height:18px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px #ffe06529,0 0 22px 2px #ffe0658c;transform:translateY(-50%);transition:transform .5s var(--ease-expo),background-color .3s,box-shadow .3s}
/* Com as raízes vivas (JS + movimento), serviço só acende quando a raiz chega nele */
.raizes-vivas .servico:not(.aceso)::after{transform:scaleX(0)}
.raizes-vivas .servico:not(.aceso) .servico-no{background:var(--solo-3);box-shadow:inset 0 0 0 2px #ffe065b3;transform:translateY(-50%) scale(.62)}
.subsolo .servico h3{font-size:clamp(28px,3vw,42px);line-height:1.08;color:var(--yellow)}
.subsolo .servico p{max-width:46ch;color:var(--on-ink-soft)}
.subsolo .service-link{grid-column:auto;justify-self:end;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1px solid #f1f3fa4d;border-radius:12px;color:var(--mist);font-weight:600;white-space:nowrap;transition:border-color .2s,color .2s,background-color .2s}
.subsolo .service-link:hover{border-color:var(--yellow);color:var(--yellow);background:#ffe0650f}
.camada-servicos .ads-note{margin-top:clamp(44px,5vw,72px);max-width:58ch;padding-left:38px;color:var(--on-ink-soft)}

/* Poço entre −300 e −1.000 m: o vagonete desce o trilho preso à rolagem, sem outro Forma no quadro */
.poco{--cor:var(--solo-4);--onda:var(--onda-c);--crista:var(--crista-c);position:relative;min-height:clamp(420px,76vh,760px);background-image:var(--pedras);background-size:640px 520px;background-position:330px 60px}
.trilho{--trilho-a:11deg;position:absolute;z-index:2;left:50%;top:56%;width:170vw;height:24px;transform:translate(-50%,-50%) rotate(var(--trilho-a));background:repeating-linear-gradient(90deg,var(--ink-700) 0 13px,transparent 13px 42px)}
.trilho-dormentes{position:absolute;left:0;right:0;top:4px;bottom:4px;background:linear-gradient(var(--ink-300),var(--ink-300)) 0 0/100% 3px no-repeat,linear-gradient(var(--ink-300),var(--ink-300)) 0 100%/100% 3px no-repeat}
.vagonete{position:absolute;left:50%;bottom:calc(100% - 14px);width:clamp(170px,21vw,320px);transform:translateX(-50%)}
.vagonete img{transform-origin:50% 90%}

/* 6. Método (−1.000 a −2.900 m): quatro níveis em lâminas de rocha. Sem JS: lista com folga entre Formas */
.camada-metodo{--cor:var(--solo-4);padding:clamp(40px,6vw,88px) 0 clamp(72px,12vh,140px)}
.subsolo .camada-metodo::before,.subsolo .camada-metodo::after{content:none}
.camada-metodo h2{max-width:18ch;font-size:clamp(32px,4vw,56px)}
.subsolo .pilha{display:block;margin-top:clamp(44px,5.5vw,80px);counter-reset:step}
.subsolo .pilha .nivel{--onda-card:clamp(26px,3vw,44px);--cor-nivel:var(--solo-1);counter-increment:step;position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px clamp(24px,4vw,56px);min-height:var(--card-h-lista);margin-bottom:max(56px,calc(var(--quadro) - var(--card-h-lista) + var(--fig-h)));padding:calc(var(--onda-card) + clamp(22px,3vw,40px)) clamp(22px,3.6vw,52px) 0;overflow:hidden;border-radius:0 0 24px 24px;color:var(--mist);background:var(--crista-a) 50% 0/max(100%,900px) var(--onda-card) no-repeat,var(--pedras) 120px 90px/640px 520px,var(--cor-nivel);-webkit-mask:var(--onda-a) 50% 0/max(100%,900px) var(--onda-card) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--onda-card) - 1px)/100% 100% no-repeat;mask:var(--onda-a) 50% 0/max(100%,900px) var(--onda-card) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--onda-card) - 1px)/100% 100% no-repeat}
.subsolo .pilha .nivel:nth-child(2){--cor-nivel:var(--solo-2)}
.subsolo .pilha .nivel:nth-child(3){--cor-nivel:var(--solo-3)}
.subsolo .pilha .nivel:nth-child(4){--cor-nivel:color-mix(in srgb,var(--solo-3) 55%,var(--solo-4))}
.subsolo .pilha .nivel:last-child{margin-bottom:0}
/* Sombra do nível coberto, alimentada pelo scroll-stack.js (--stack-shade) */
.subsolo .pilha .nivel::after{content:"";position:absolute;inset:0;z-index:3;background:var(--ink-950);opacity:var(--stack-shade,0);pointer-events:none}
.nivel-texto{align-self:start;padding-bottom:clamp(24px,3vw,40px)}
.nivel-texto::before{content:counter(step);display:block;margin-bottom:8px;font-size:clamp(56px,6vw,92px);font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--yellow)}
.subsolo .nivel h3{font-size:clamp(28px,3vw,42px);line-height:1.1}
.subsolo .nivel p{margin-top:12px;max-width:44ch;color:var(--on-ink-soft)}
.subsolo .nivel .deliverable{margin-top:20px;padding-top:14px;border-top:1px solid #f1f3fa2e;font-size:15px;color:var(--mist)}
.subsolo .nivel .deliverable strong{color:var(--yellow)}
.nivel-figura{align-self:end;justify-self:center;height:var(--fig-h);aspect-ratio:3/4}
.nivel-cristais{aspect-ratio:1}
.nivel-figura img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
/* Com JS e tela alta: pilha de lâminas (sticky). No celular a lâmina que chega cobre o Forma da anterior
   (a figura fica no pé de cada uma): um Forma por quadro sem esconder nenhum. No desktop as duas colunas
   deixam a figura de fora por mais tempo, então cada Forma só aparece no fim do pouso do próprio nível e
   some quando o próximo chega. */
@media (min-height:641px){
  html.animado .subsolo .pilha{padding-bottom:10vh}
  html.animado .subsolo .pilha .nivel{position:sticky;top:calc(var(--pilha-topo) + var(--i) * var(--pilha-passo));height:var(--card-h);min-height:0;margin-bottom:var(--pilha-folga);transform-origin:50% 0;will-change:transform}
  html.animado .subsolo .pilha .nivel:last-child{margin-bottom:0}
  html.animado .subsolo .pilha-medindo .nivel{position:relative;top:auto}
}
@media (min-height:641px) and (min-width:768px){
  html.animado .subsolo .pilha .nivel .figura-forma{--mostra:calc(clamp(0,(var(--stack-chegada,1) - .8) * 5,1) * clamp(0,1 - var(--stack-progresso,0) * 4,1));opacity:var(--mostra);transform:translateY(calc((1 - var(--mostra)) * 26%))}
}

/* Manto: a rocha mais funda, com brasas subindo do núcleo */
.manto{--cor:var(--solo-6);--onda:var(--onda-c);--crista:var(--crista-c);position:relative;min-height:calc(var(--quadro) * .42);background-image:var(--pedras);background-size:640px 520px;background-position:-60px 120px}
.brasa{position:absolute;bottom:6%;left:calc(9% + var(--b) * 11.5%);width:5px;height:5px;border-radius:50%;background:var(--nucleo);box-shadow:0 0 10px 2px #ffe06580;opacity:0;animation:brasa-sobe calc(7s + var(--b) * .9s) linear calc(var(--b) * -1.3s) infinite}
@keyframes brasa-sobe{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.9}70%{opacity:.45}100%{transform:translate3d(calc(var(--b) * 5px - 18px),-46vh,0);opacity:0}}

/* 8. Núcleo (−6.371 km): o fechamento amarelo da proposta; respira, esquenta e guarda o contato */
.subsolo .nucleo{--cor:var(--nucleo);--onda:var(--onda-a);--crista:var(--crista-nucleo);overflow-x:clip;color:var(--ink);padding:clamp(56px,8vw,112px) 0 clamp(120px,14vw,200px)}
.subsolo .nucleo :focus-visible{outline-color:var(--ink)}
.nucleo-calor{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.nucleo-calor::before{content:"";position:absolute;left:64%;top:56%;width:min(120vw,1500px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--nucleo-quente),#fff4c200 72%);transform:translate(-50%,-50%) scale(.94);animation:nucleo-respira 6.4s ease-in-out infinite alternate}
@keyframes nucleo-respira{from{transform:translate(-50%,-50%) scale(.92);opacity:.7}to{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
.nucleo-calor i{position:absolute;bottom:-18%;left:calc(6% + var(--k) * 23%);width:clamp(160px,22vw,340px);aspect-ratio:2/1;border-radius:50%;background:radial-gradient(closest-side,#ffffff5c,#fff0);opacity:0;animation:calor-sobe calc(10s + var(--k) * 1.7s) ease-in-out calc(var(--k) * -2.6s) infinite}
.nucleo-calor i:nth-child(1){--k:0}.nucleo-calor i:nth-child(2){--k:1}.nucleo-calor i:nth-child(3){--k:2}.nucleo-calor i:nth-child(4){--k:3}
@keyframes calor-sobe{0%{transform:translate3d(0,0,0) scale(.8,.7);opacity:0}25%{opacity:.8}60%{transform:translate3d(14px,-38vh,0) scale(1.15,.9)}100%{transform:translate3d(-10px,-72vh,0) scale(.9,1.1);opacity:0}}
.nucleo-estrela{position:absolute;z-index:0;right:-9%;top:-6%;width:min(64vw,680px);height:auto;aspect-ratio:1;fill:none;stroke:#353fc129;stroke-width:.55;pointer-events:none;animation:estrela-gira 90s linear infinite}
@keyframes estrela-gira{to{rotate:360deg}}
.nucleo-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,5vw,80px)}
.subsolo .nucleo h2{max-width:13ch;font-size:clamp(34px,4.4vw,64px);font-weight:740;line-height:1.04;letter-spacing:-.035em;color:var(--ink)}
.subsolo .nucleo .contact-copy{padding:clamp(28px,3.8vw,56px)}
.subsolo .nucleo .contact-copy p{margin:20px 0 32px;max-width:40ch;font-size:clamp(17px,1.3vw,19px);color:var(--ink-soft)}
.nucleo-forma{justify-self:center;width:clamp(240px,30vw,470px)}
.subsolo .nucleo-forma::before,.subsolo .nucleo-forma::after{border-color:var(--ink)}
.subsolo .nucleo-forma figcaption{background:var(--ink);color:var(--yellow);box-shadow:0 10px 0 #10162f26}
.subsolo .nucleo-forma figcaption::before{color:var(--yellow)}
.nucleo-forma .figura-quadro{animation:boia 4.8s ease-in-out infinite}
@keyframes boia{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}

/* Brilho de borda (BorderGlow do React Bits, via proposta): a mecânica é do border-glow.js; aqui o visual.
   No cartão do núcleo o fundo é claro, então o halo é azul presença com mistura normal. */
.border-glow{--edge-proximity:0;--cursor-angle:45deg;--edge-sensitivity:30;--color-sensitivity:calc(var(--edge-sensitivity) + 20);--border-radius:var(--radius-overlay);--glow-padding:40px;--cone-spread:25;--fill-opacity:.5;--card-bg:var(--ink-950);
  --glow-color:hsl(50deg 100% 79% / 100%);--glow-color-60:hsl(50deg 100% 79% / 60%);--glow-color-50:hsl(50deg 100% 79% / 50%);--glow-color-40:hsl(50deg 100% 79% / 40%);--glow-color-30:hsl(50deg 100% 79% / 30%);--glow-color-20:hsl(50deg 100% 79% / 20%);--glow-color-10:hsl(50deg 100% 79% / 10%);
  --gradient-one:radial-gradient(at 80% 55%,#ffe065 0px,transparent 50%);--gradient-two:radial-gradient(at 69% 34%,#8995f0 0px,transparent 50%);--gradient-three:radial-gradient(at 8% 6%,#ccd2ff 0px,transparent 50%);--gradient-four:radial-gradient(at 41% 38%,#ffe065 0px,transparent 50%);--gradient-five:radial-gradient(at 86% 85%,#8995f0 0px,transparent 50%);--gradient-six:radial-gradient(at 82% 18%,#ccd2ff 0px,transparent 50%);--gradient-seven:radial-gradient(at 51% 4%,#8995f0 0px,transparent 50%);--gradient-base:linear-gradient(#ffe065 0 100%);
  position:relative;display:grid;border-radius:var(--border-radius);isolation:isolate;transform:translate3d(0,0,.01px);border:1px solid rgb(255 255 255 / 15%);background:var(--card-bg);overflow:visible;box-shadow:rgba(0,0,0,.1) 0 1px 2px,rgba(0,0,0,.1) 0 2px 4px,rgba(0,0,0,.1) 0 4px 8px,rgba(0,0,0,.1) 0 8px 16px,rgba(0,0,0,.1) 0 16px 32px,rgba(0,0,0,.1) 0 32px 64px}
.border-glow::before,.border-glow::after,.border-glow>.edge-light{content:"";position:absolute;inset:0;border-radius:inherit;transition:opacity .25s ease-out;z-index:-1}
.border-glow:not(:hover):not(.sweep-active)::before,.border-glow:not(:hover):not(.sweep-active)::after,.border-glow:not(:hover):not(.sweep-active)>.edge-light{opacity:0;transition:opacity .75s ease-in-out}
.border-glow::before{border:1px solid transparent;background:linear-gradient(var(--card-bg) 0 100%) padding-box,linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,var(--gradient-one) border-box,var(--gradient-two) border-box,var(--gradient-three) border-box,var(--gradient-four) border-box,var(--gradient-five) border-box,var(--gradient-six) border-box,var(--gradient-seven) border-box,var(--gradient-base) border-box;opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));-webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,black calc(var(--cone-spread) * 1%),transparent calc((var(--cone-spread) + 15) * 1%),transparent calc((100 - var(--cone-spread) - 15) * 1%),black calc((100 - var(--cone-spread)) * 1%));mask-image:conic-gradient(from var(--cursor-angle) at center,black calc(var(--cone-spread) * 1%),transparent calc((var(--cone-spread) + 15) * 1%),transparent calc((100 - var(--cone-spread) - 15) * 1%),black calc((100 - var(--cone-spread)) * 1%))}
.border-glow::after{border:1px solid transparent;background:var(--gradient-one) padding-box,var(--gradient-two) padding-box,var(--gradient-three) padding-box,var(--gradient-four) padding-box,var(--gradient-five) padding-box,var(--gradient-six) padding-box,var(--gradient-seven) padding-box,var(--gradient-base) padding-box;-webkit-mask-image:linear-gradient(to bottom,black,black),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--cursor-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);mask-image:linear-gradient(to bottom,black,black),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--cursor-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);-webkit-mask-composite:source-out,source-over,source-over,source-over,source-over,source-over;mask-composite:subtract,add,add,add,add,add;opacity:calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));mix-blend-mode:soft-light}
.border-glow>.edge-light{inset:calc(var(--glow-padding) * -1);pointer-events:none;z-index:1;-webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));mix-blend-mode:normal}
.border-glow>.edge-light::before{content:"";position:absolute;inset:var(--glow-padding);border-radius:inherit;box-shadow:inset 0 0 0 1px var(--glow-color),inset 0 0 1px 0 var(--glow-color-60),inset 0 0 3px 0 var(--glow-color-50),inset 0 0 6px 0 var(--glow-color-40),inset 0 0 15px 0 var(--glow-color-30),inset 0 0 25px 2px var(--glow-color-20),inset 0 0 50px 2px var(--glow-color-10),0 0 1px 0 var(--glow-color-60),0 0 3px 0 var(--glow-color-50),0 0 6px 0 var(--glow-color-40),0 0 15px 0 var(--glow-color-30),0 0 25px 2px var(--glow-color-20),0 0 50px 2px var(--glow-color-10)}
.border-glow-inner{position:relative;z-index:1;display:flex;flex-direction:column;overflow:hidden;border-radius:inherit}
.contato-cartao{--card-bg:var(--nucleo-quente);
  --glow-color:hsl(235deg 57% 48% / 100%);--glow-color-60:hsl(235deg 57% 48% / 60%);--glow-color-50:hsl(235deg 57% 48% / 50%);--glow-color-40:hsl(235deg 57% 48% / 40%);--glow-color-30:hsl(235deg 57% 48% / 30%);--glow-color-20:hsl(235deg 57% 48% / 20%);--glow-color-10:hsl(235deg 57% 48% / 10%);
  --gradient-one:radial-gradient(at 80% 55%,#353fc1 0px,transparent 50%);--gradient-two:radial-gradient(at 69% 34%,#7c86ff 0px,transparent 50%);--gradient-three:radial-gradient(at 8% 6%,#ffffff 0px,transparent 50%);--gradient-four:radial-gradient(at 41% 38%,#353fc1 0px,transparent 50%);--gradient-five:radial-gradient(at 86% 85%,#7c86ff 0px,transparent 50%);--gradient-six:radial-gradient(at 82% 18%,#ffffff 0px,transparent 50%);--gradient-seven:radial-gradient(at 51% 4%,#7c86ff 0px,transparent 50%);--gradient-base:linear-gradient(#353fc1 0 100%);
  border-color:#10162f1f;box-shadow:0 1px 0 #ffffff80 inset,0 30px 70px -30px #10162f59,0 10px 24px -12px #10162f33}

/* 9. Rodapé: rocha-mãe escura, onda por cima do núcleo; folga embaixo pro painel do canto */
.footer.rodape{--onda-h:clamp(30px,4.4vw,64px);position:relative;padding:clamp(48px,6vw,80px) 0 clamp(104px,9vw,128px);background:var(--solo-6);color:var(--on-ink-soft);font-size:15px}
.footer.rodape::before{background:var(--solo-6);-webkit-mask:var(--onda-c) 50% 100%/max(100%,1100px) 100% no-repeat;mask:var(--onda-c) 50% 100%/max(100%,1100px) 100% no-repeat}
.rodape :focus-visible{outline-color:var(--yellow)}
.rodape .signature{color:var(--yellow)}
.rodape p{color:var(--on-ink-soft)}
.rodape .footer-links a{color:var(--mist)}
.rodape .footer-links a:hover{color:var(--yellow)}
.rodape .privacy{border-top-color:#f1f3fa1f;color:var(--on-ink-soft)}
.rodape .japao{grid-column:1/-1;justify-self:end;font-size:13px;color:var(--neon-azul)}

/* Tablet */
@media (max-width:1024px){
  .subsolo .servico{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .subsolo .service-link{grid-column:2;justify-self:start}
  .subsolo .servico:nth-child(2){--recuo:4%}
  .subsolo .servico:nth-child(3){--recuo:8%}
}

/* Celular: raízes na margem esquerda, uma coluna, figuras menores, pilha mais baixa */
@media (max-width:767px){
  .subsolo{--onda-h:26px;--pilha-topo:70px;--pilha-passo:12px;--pilha-folga:22vh;--fig-h:clamp(180px,27vh,240px);--card-h:clamp(500px,calc(100svh - var(--pilha-topo) - 3 * var(--pilha-passo) - 16px),640px);--card-h-lista:520px}
  .descida-palco{padding-block:64px}
  .descida-frase{max-width:none;font-size:clamp(31px,8.4vw,44px)}
  .descida-buraco{justify-content:center}
  .descida-forma{width:min(76vw,340px);margin-right:0}
  .faixa-obra{height:92px;bottom:17%}
  .faixa-obra svg{position:relative;left:50%;width:900px;max-width:none;transform:translateX(-50%) rotate(-3.5deg)}
  .problema-cabeca{grid-template-columns:1fr;align-content:center;gap:28px}
  .problema-cabeca h2{grid-column:auto;grid-row:auto}
  .fossil{grid-column:auto;grid-row:auto;width:min(62vw,260px)}
  .problema-corpo{grid-template-columns:1fr;gap:28px}
  .problema-forma{order:-1;width:min(60vw,260px);--feixe-x:50%;--feixe-y:22%;--feixe-de:118deg;--feixe-varre:-54deg}
  .subsolo .servico{grid-template-columns:1fr;gap:10px;margin-left:0;padding:26px 0 0 30px;background-position:30px 0;background-size:calc(100% - 30px) 1px}
  .subsolo .servico::after{left:30px}
  .subsolo .service-link{grid-column:auto;justify-self:start}
  .camada-servicos .ads-note{padding-left:30px}
  .poco{min-height:56vh}
  .trilho{--trilho-a:14deg}
  .vagonete{width:46vw}
  .subsolo .pilha .nivel{grid-template-columns:1fr;gap:10px;padding-inline:20px}
  .nivel-figura{justify-self:end}
  .nucleo-grid{grid-template-columns:1fr}
  .nucleo-forma{width:min(76vw,340px)}
  .subsolo .nucleo .button{width:100%;justify-content:space-between}
  .footer.rodape .footer-grid{grid-template-columns:1fr}
  .rodape .japao{justify-self:start}
}
@media print{
  .raizes,.subsolo .lanterna,.faixa-obra,.manto,.nucleo-calor,.nucleo-estrela,.poco{display:none}
  .subsolo .pilha .nivel{position:relative;top:auto;height:auto;transform:none!important}
}

/* Sem animação (movimento reduzido, sem JS): sem a pilha, o Evoluir encostava no núcleo. Uma tela de manto
   entre os dois mantém um Forma por quadro. */
html:not(.animado) .subsolo .manto{min-height:var(--quadro)}
