/* ============================================================================
   CARDUME — Landing Page v2 (taste-skill: anti-slop, dials 8/8/5)
   Consome tokens.css + cardume-animations.css. Dark-locked. Conceito: descer no mar.
   Tipografia contida, layouts variados, glow com parcimônia, sem em-dash.
   ============================================================================ */

:root{
  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --cd-font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --nav-h:68px;
  /* escala de display mais contida (corrige "fontes grandes demais") */
  --t-hero:clamp(2.4rem, 1.4rem + 3vw, 3.8rem);
  --t-h2:clamp(1.7rem, 1.15rem + 1.9vw, 2.7rem);
  --t-h3:clamp(1.15rem, 1rem + .5vw, 1.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#01060A}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-body);font-size:var(--step-0);line-height:1.6;
  color:var(--hero-text);background:transparent;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.04}
p{margin:0}
button{font:inherit}
::selection{background:var(--c-cyan-300);color:var(--accent-ink)}

/* ---- Fundo: o palco da descida (sub-camadas em velocidades diferentes) ----
   ocean-descent.js move o gradiente, o mundo de criaturas e os raios em
   fatores distintos: o parallax entre elas é o que faz o scroll virar uma
   descida, e não um fundo parado. */
.ocean-stage{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#01060A}
/* Gradiente completo da coluna d'água (0 → 6600 m), transladado pelo scroll.
   UMA RAMPA SÓ: nenhuma seção pinta a própria água, então a cor nunca "troca"
   numa divisa — o navegador interpola entre os stops e a mudança acontece ao
   longo de telas inteiras. Os metros anotados são referência de onde a cor cai,
   não faixas por seção.
   Mapa: o topo da viewport, com progresso de scroll p, cai no stop 80·p%
   (o translate é de -400vh sobre 500vh), e a viewport cobre 20% por vez.
   A queda é front-loaded de propósito: na água real a luz morre rápido nos
   primeiros metros e depois o escuro é quase constante. */
.ocean-grad{position:absolute;left:0;top:0;width:100%;height:500vh;will-change:transform;
  background:linear-gradient(180deg,
    #1F7A93   0%,   /* superfície */
    #1C6E85   6%,   /* herói */
    #17596F  14%,
    #124A5E  20%,   /* fim do herói */
    #0E3B4C  32%,   /* ~200 m */
    #0B2E3C  44%,   /* ~600 a 1200 m */
    #08222D  58%,   /* ~2000 m */
    #061821  70%,   /* ~3600 m */
    #050F17  82%,   /* ~5000 m */
    #030A10  92%,
    #01060A 100%)}  /* ~6600 m, contato e rodapé */
/* superfície: o sol entrando na água. Mora DENTRO do .ocean-grad, então translada
   junto e sai de cena na descida em vez de ficar colado na viewport. */
.ocean-surface{position:absolute;left:-10%;right:-10%;top:0;height:150vh;pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(120% 62% at 50% -18%, rgba(196,246,255,.34) 0%, rgba(140,226,240,.14) 42%, rgba(140,226,240,0) 72%),
    radial-gradient(60% 26% at 22% -6%, rgba(226,252,255,.22) 0%, rgba(226,252,255,0) 70%)}
/* cáusticas: a trama de luz que a ondulação da superfície desenha na água */
.ocean-surface::after{content:"";position:absolute;left:-20%;right:-20%;top:0;height:78vh;
  opacity:.5;filter:blur(14px);mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 46%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 46%,transparent 100%);
  background:
    repeating-linear-gradient(102deg, rgba(206,248,255,.10) 0 2px, rgba(206,248,255,0) 2px 46px),
    repeating-linear-gradient(78deg,  rgba(160,232,245,.07) 0 3px, rgba(160,232,245,0) 3px 63px);
  animation:ocean-caustics 19s ease-in-out infinite alternate}
@keyframes ocean-caustics{
  from{transform:translate3d(-2.2%,0,0) scaleY(1)}
  to  {transform:translate3d(2.2%,0,0) scaleY(1.06)}}

/* ---- Feixes solares (a luz da superfície) --------------------------------
   Camada fixa: a luz vem sempre de cima, o que vende a descida é ela MORRER,
   não descer. ocean-descent.js faz o fade + um leve parallax sobre #problema.
   Sete feixes com largura, ângulo, opacidade e ritmo distintos: feixe clonado
   é o que entrega o efeito como CSS. */
/* sem z-index de propósito: com z-index a camada vira stacking context e o
   mix-blend-mode dos feixes passaria a misturar com o nada em vez de misturar
   com o gradiente da água. A ordem no DOM já a coloca acima do .ocean-grad. */
.sunbeams{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sunbeams span{position:absolute;top:-32%;height:172%;width:var(--b-w,8%);left:var(--b-x,10%);
  transform-origin:top center;transform:rotate(var(--b-rot,6deg));
  mix-blend-mode:screen;filter:blur(11px);will-change:transform,opacity;
  background:linear-gradient(180deg,
    rgba(198,247,255,var(--b-op,.16)) 0%,
    rgba(120,220,235,calc(var(--b-op,.16) * .62)) 46%,
    rgba(87,224,212,calc(var(--b-op,.16) * .22)) 74%,
    rgba(87,224,212,0) 100%);
  animation:sunbeam var(--b-dur,12s) ease-in-out var(--b-delay,0s) infinite alternate}
@keyframes sunbeam{
  from{opacity:.45;transform:rotate(var(--b-rot,6deg)) translate3d(-14px,0,0) scaleX(.94)}
  to  {opacity:1;  transform:rotate(calc(var(--b-rot,6deg) + 1.6deg)) translate3d(14px,0,0) scaleX(1.06)}}
@media (max-width:640px){
  /* menos feixes e menos blur no celular: é o filtro que custa caro */
  .sunbeams span{filter:blur(7px)}
  .sunbeams span:nth-child(3),.sunbeams span:nth-child(5),.sunbeams span:nth-child(7){display:none}
}
@media (prefers-reduced-motion:reduce){
  /* sem GSAP rodando, os feixes nunca apagam na descida: ficam mais discretos */
  .sunbeams{opacity:.55}
  .sunbeams span{animation:none;opacity:.75}
  .ocean-surface::after{animation:none}
}
/* mundo parallax: as criaturas moram aqui, ancoradas às suas profundidades */
.ocean-world{position:absolute;left:0;right:0;top:0;height:100vh;will-change:transform}
.ow{position:absolute;left:0;right:0;height:72vh;pointer-events:none}
/* neve marinha: quase invisível na água clara do herói, dominante no fundo.
   ocean-descent.js sobe esta opacidade ao longo do scroll. */
.ocean-snow{position:absolute;inset:0;opacity:.25}
@media (prefers-reduced-motion:reduce){.ocean-snow{display:none}}

/* ---- Utilidades ---------------------------------------------------------- */
.shell{width:min(100% - 2.6rem, var(--maxw));margin-inline:auto}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;left:-999px;top:0;z-index:10000;background:var(--accent);color:var(--accent-ink);padding:.7em 1.2em;border-radius:var(--r-2)}
.skip-link:focus{left:1rem;top:1rem}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:var(--step--1);
  color:var(--accent);margin:0 0 var(--space-3)}
.lead{font-size:var(--step-1);color:var(--c-silver-200);margin:0 0 var(--space-3);max-width:60ch;line-height:1.5}
.body{color:var(--c-silver-300);max-width:58ch}
.note{font-size:var(--step--1);color:var(--text-dim);margin-top:var(--space-3)}
em{font-style:normal;color:var(--accent)}
.section{position:relative;padding-block:clamp(4.5rem,10vh,8rem);overflow:hidden}
/* Oceano único: seções escuras não pintam a própria água — deixam a espinha fixa aparecer.
   (o .cd-deep continua dando overflow/stacking; só zeramos o radial que "reiniciava" o mar.
   c365 e contato mantêm o próprio glow/vinheta, que já sobrepõe o .cd-deep e é translúcido:
   como landing.css carrega depois da lib, o shorthand `background` deles substitui o radial
   inteiro. Não colocar .contato aqui — a regra venceria a vinheta por especificidade.) */
.cardume-sec.cd-deep,.depoimentos.cd-deep,.c365.cd-deep{background:transparent}
.section__head{max-width:760px;margin-bottom:var(--space-5)}
.section__title{font-size:var(--t-h2)}
/* quando o parágrafo vem colado no h2 (sem .section__head no meio), ele precisa
   do próprio respiro: sem isto o texto encosta na última linha do título */
.section__title + .lead{margin-top:var(--space-3)}
.photo-tag{position:absolute;left:0;bottom:0;margin:0;padding:.5em .9em;font-family:var(--font-mono);
  font-size:var(--step--1);letter-spacing:.04em;color:var(--c-silver-300);
  background:linear-gradient(0deg,rgba(6,15,23,.85),transparent)}

/* ---- Botões (glow só no hover, com parcimônia) --------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-display);
  font-weight:500;line-height:1;padding:.9em 1.5em;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--c-cyan-300);color:var(--accent-ink);cursor:pointer;will-change:transform;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease}
.btn:hover{background:var(--c-cyan-200);box-shadow:0 0 30px rgba(87,224,212,.28)}
.btn:focus-visible{outline:2px solid var(--c-cyan-200);outline-offset:3px}
.btn--lg{padding:1.05em 1.9em;font-size:var(--step-0)}
.btn--sm{padding:.6em 1.1em;font-size:var(--step--1)}
.btn--ghost{background:transparent;color:var(--hero-text);border-color:color-mix(in srgb,var(--c-silver-300) 40%,transparent)}
.btn--ghost:hover{background:color-mix(in srgb,var(--c-silver-300) 8%,transparent);border-color:var(--c-silver-300);box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-4)}
.chip{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.03em;color:var(--c-silver-300);
  border:1px solid var(--c-abyss-500);border-radius:var(--r-pill);padding:.4em .9em}
.pill{display:inline-block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;
  font-size:var(--step--1);color:var(--accent-ink);background:var(--c-cyan-300);padding:.45em 1.1em;
  border-radius:var(--r-pill);margin-bottom:var(--space-3)}

/* ---- Profundímetro ------------------------------------------------------- */
.depth-gauge{position:fixed;right:1.3rem;top:50%;transform:translateY(-50%);z-index:60;display:flex;
  flex-direction:column;align-items:center;gap:.3rem;font-family:var(--font-mono);opacity:0;transition:opacity .5s}
.depth-gauge.is-visible{opacity:1}
.depth-gauge__num{font-size:var(--step-0);color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.depth-gauge__unit{font-size:.7rem;color:var(--text-dim)}
.depth-gauge__track{width:2px;height:32vh;max-height:260px;margin-top:.4rem;background:color-mix(in srgb,var(--c-silver-300) 18%,transparent);border-radius:2px;overflow:hidden;position:relative}
.depth-gauge__fill{position:absolute;inset:0 0 auto 0;height:0%;background:linear-gradient(180deg,var(--c-cyan-200),var(--c-brand-600))}

/* ---- Nav (uma linha, <=68px) --------------------------------------------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:70;height:var(--nav-h);display:flex;align-items:center;
  gap:var(--space-4);padding-inline:clamp(1.2rem,4vw,2.4rem);transition:background .3s,backdrop-filter .3s,box-shadow .3s,height .3s}
/* sobre a água clara do topo, o abisso-900 a 74% virava uma barra cinza */
.nav--scrolled{height:58px;background:color-mix(in srgb,#041018 62%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 color-mix(in srgb,var(--c-silver-300) 10%,transparent)}
.brandmark{display:inline-flex;align-items:center;gap:.5em;color:var(--hero-text)}
.brandmark__sym{width:28px;height:28px;flex:none}
.brandmark__word{font-family:var(--font-display);font-weight:500;letter-spacing:.24em;font-size:1rem;padding-left:.1em}
.nav__links{display:flex;gap:clamp(.8rem,2vw,1.7rem);margin-left:auto}
.nav__links a{color:var(--c-silver-300);font-size:var(--step--1);font-family:var(--font-display);position:relative;padding:.3em 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .25s}
.nav__links a:hover{color:var(--hero-text)}.nav__links a:hover::after{width:100%}

/* ---- Herói (stack do portfólio, texto à esquerda) ------------------------ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden}
/* o herói não pinta a própria água: o gradiente contínuo da descida (.ocean-grad)
   atravessa sem emenda na divisa com a seção seguinte */
/* nada que é do herói pode existir na altura da divisa: sem a máscara, o halo do
   ponteiro e o canvas do cardume cortavam seco em cima de #problema */
.hero__bg{position:absolute;inset:0;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%)}
.hero__bg.cd-deep{background:transparent;
  /* água rasa é clara: os peixes precisam ler como silhueta, não como brilho.
     A lib lê estas vars com getComputedStyle no host do canvas, e custom
     property herda, então isto retinta o cardume do herói sem tocar no JS. */
  --cd-silver:#8FB2BF;
  --cd-glow:#CFF6F0}
.hero__bg .cdlayer{position:absolute;inset:0;pointer-events:none}
.hero__bg .cdlayer canvas{width:100%!important;height:100%!important;display:block}
/* bioluminescência a 0 m não faz sentido, e no claro ela quase não aparece */
.hero__bg .cd-glow-dot{opacity:.4}
/* o véu de leitura do texto se dissolve antes da borda de baixo: sem a máscara
   ele cortava seco na divisa com #problema e desenhava uma linha horizontal.
   Com a água do herói bem mais clara, o véu subiu de intensidade, então a
   máscara é ainda mais essencial: ela é o que impede o degrau na divisa.
   Só o gradiente horizontal: um segundo, vertical, brigava com a máscara e o
   produto dos dois desenhava uma banda escura no meio do herói (medido: #134454
   em 66% da altura contra #124C5F na base). O CTA já está dentro da faixa forte
   do horizontal, não precisa de reforço. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,12,18,.94) 0%,rgba(4,12,18,.80) 40%,rgba(4,12,18,.34) 74%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
/* No celular o texto ocupa a largura toda: um véu horizontal escurecia a esquerda
   e deixava a direita na água clara, virando uma diagonal visível. Aqui ele desce
   junto com o texto e já chega a zero antes dos 62% da máscara, para o produto dos
   dois seguir sempre decrescente (é o que evita a banda). */
@media (max-width:700px){
  .hero__scrim{background:linear-gradient(180deg,
    rgba(4,12,18,.92) 0%,rgba(4,12,18,.76) 32%,rgba(4,12,18,.36) 50%,rgba(4,12,18,0) 62%)}
}
.hero__inner{position:relative;z-index:3;padding-block:var(--space-6);max-width:760px}
/* assinatura da marca no herói: recebe a logo do preloader via FLIP */
.hero__brand{width:clamp(210px,24vw,300px);margin-bottom:var(--space-4)}
.hero__brand svg{display:block;width:100%;height:auto;overflow:visible}
.hero__brand-word{font-family:var(--cd-font-display);font-weight:300;font-size:5.4px;
  fill:#EAF3F5;text-rendering:geometricPrecision}
/* encenado: enquanto o preloader roda, o texto espera e a logo fica invisível
   (mas ocupando layout — o FLIP mede a caixa real; zero CLS) */
.hero--staged .hero__brand{visibility:hidden}
.hero--staged .hero__eyebrow,.hero--staged .hero__title,.hero--staged .hero__sub,
.hero--staged .hero__cta,.hero--staged .hero__scroll{opacity:0}
.hero__eyebrow{color:var(--c-silver-300)}
.hero__title{font-size:var(--t-hero);font-weight:500;margin-bottom:var(--space-4);text-wrap:balance;overflow-wrap:break-word}
.hero__sub{font-size:var(--step-1);color:var(--c-silver-200);max-width:46ch;margin-bottom:var(--space-5);line-height:1.45}
.hero__cta{display:flex;gap:var(--space-3);flex-wrap:wrap}
/* seta de rolagem: fecha o herói indicando que a descida continua */
.hero__scroll{display:inline-flex;margin-top:var(--space-5);padding:.4rem;border-radius:50%;
  color:var(--accent);opacity:.55;transition:opacity .25s ease}
.hero__scroll svg{width:22px;height:29px;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;animation:hero-bob 2.2s ease-in-out infinite}
.hero__scroll:hover,.hero__scroll:focus-visible{opacity:1}
@keyframes hero-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
/* Telas de pouca altura (notebook 768p, celular): o herói aperta para os CTAs
   nunca caírem abaixo da dobra. Mexe só em espaçamento e escala, nunca na copy.
   Vem ANTES das media queries de largura, que continuam mandando no que definem. */
@media (max-height:900px){
  .hero__inner{padding-block:var(--space-3)}
  .hero__brand{width:clamp(180px,18vw,230px);margin-bottom:var(--space-3)}
  .hero__eyebrow{margin-bottom:var(--space-2)}
  .hero__title{font-size:clamp(2rem, 1.1rem + 2.4vw, 3rem);margin-bottom:var(--space-3)}
  .hero__sub{margin-bottom:var(--space-4)}
  .hero__scroll{margin-top:var(--space-3)}
}

/* Peixes de seção não podem nascer nem morrer na divisa: as bordas de cima e de
   baixo do canvas coincidem com a emenda entre as seções, e o peixe cortado ao
   meio é o que denuncia onde uma acaba e a outra começa. */
.problema .cdlayer--soft,.servicos>.cdlayer{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}

/* ---- O problema (editorial assimétrico) ---------------------------------- */
.problema .cdlayer--soft{position:absolute;inset:0;opacity:.5;pointer-events:none}
.problema .cdlayer--soft canvas{width:100%!important;height:100%!important}
/* o peixe que atravessa é uma camada de seção inteira (inset:0 inline): sem isto
   ele engole o ponteiro em tudo que não está dentro do .problema__grid */
.problema .cd-fish-cross{pointer-events:none}
/* com movimento reduzido a lib estaciona o nadador em left:38% — ou seja, um peixe
   parado no meio do texto. Aqui ele simplesmente não aparece. */
@media (prefers-reduced-motion:reduce){.problema .cd-fish-cross{display:none}}
.problema__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative;z-index:2}
.duo{filter:url(#cardume-duotone)}
/* diagrama: 10 fornecedores emaranhados → um time só (traço fino 1.4 da marca) */
.problema__viz{position:relative}
.problema__viz svg{display:block;width:100%;height:auto}
.viz-tangle path{stroke:color-mix(in srgb,var(--c-silver-300) 38%,transparent);stroke-width:1.2}
.viz-tangle{opacity:0}                     /* sem JS/motion: mostra só o resolvido */
.viz-clean path{stroke:color-mix(in srgb,var(--accent) 62%,transparent);stroke-width:1.4}
.viz-clean .viz-spine{stroke:var(--accent);stroke-width:1.8}
.viz-node rect{stroke:color-mix(in srgb,var(--c-silver-300) 45%,transparent);stroke-width:1.4;
  fill:color-mix(in srgb,var(--c-abyss-700) 72%,transparent)}
.viz-node text,.viz-you text{font-family:var(--font-mono);font-size:11.5px;fill:var(--c-silver-200);
  text-anchor:middle;letter-spacing:.03em}
.viz-hub-ring{stroke:var(--accent);stroke-width:1.4;fill:color-mix(in srgb,var(--c-abyss-900) 82%,transparent);
  filter:drop-shadow(0 0 10px rgba(87,224,212,.35))}
.viz-ping{stroke:var(--accent);stroke-width:1;fill:none;opacity:0}
.viz-you rect{stroke:var(--accent);stroke-width:1.4;fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.viz-you text{fill:var(--accent);text-transform:uppercase;letter-spacing:.12em}
.problema__viz-tag{display:flex;flex-direction:column;gap:.15em;margin-top:var(--space-3);text-align:center}
.problema__viz-tag strong{font-family:var(--font-display);font-weight:500;font-size:var(--step-1);color:var(--accent);text-wrap:balance}
.problema__viz-tag > span{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.02em;color:var(--c-silver-300)}

/* ---- A Cardume ----------------------------------------------------------- */
.cardume-sec__grid{display:grid;grid-template-columns:1fr .8fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative;z-index:2}
.cardume-sec__photo{margin:0;position:relative;border-radius:var(--r-2);overflow:hidden;aspect-ratio:3/4}
.cardume-sec__photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* invertido: foto à esquerda, texto à direita (quebra o "texto sempre à esquerda") */
@media (min-width:901px){
  .cardume-sec__grid--flip{grid-template-columns:.8fr 1fr}
  .cardume-sec__grid--flip .cardume-sec__text{order:2}
  .cardume-sec__grid--flip .cardume-sec__photo{order:1}
}

/* ---- Método (régua de fio fino, dentro do mar) --------------------------- */
/* A seção não pinta fundo: o oceano fixo (.ocean-stage) atravessa por baixo. */
.metodo{background:transparent}
.regua{position:relative}
/* rota de sonar: era a arte do card 01 do bento, agora é a linha da régua inteira */
.regua__rota{display:block;width:100%;height:2px;overflow:visible;margin-bottom:-1px}
.mart-route{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:3 7;stroke-linecap:round;
  animation:mart-dash 6s linear infinite}
@keyframes mart-dash{to{stroke-dashoffset:-100}}
@media (prefers-reduced-motion:reduce){.mart-route,.regua__item::after{animation:none!important}}
.regua__lista{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2.2vw,2rem)}
.regua__item{position:relative;padding-top:var(--space-4);
  border-top:1px solid color-mix(in srgb,var(--c-silver-300) 18%,transparent)}
/* Traço tracejado por item, ligado só no responsivo: no desktop quem desenha a
   linha é o .regua__rota, que é um SVG único acima da <ol>. Quando a lista quebra
   em duas ou mais fileiras esse SVG só alcança a primeira, e as demais ficavam com
   o border-top estático. Período do dash (3+7=10px) e velocidade batem com o SVG:
   100u / 6s ≈ 16,7 u/s → um ciclo de 10px a cada .6s. */
.regua__item::after{content:"";position:absolute;top:-1px;left:0;right:0;height:1.4px;display:none;
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 10px);
  animation:regua-dash .6s linear infinite}
@keyframes regua-dash{to{background-position-x:-10px}}
/* o tique da régua nasce em cima da linha */
.regua__item::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
.regua__n{font-family:var(--font-mono);color:var(--accent);font-size:var(--step--1);letter-spacing:.1em}
.regua__item h3{font-size:var(--t-h3);color:var(--hero-text);margin:var(--space-2) 0 var(--space-2)}
.regua__item p{color:var(--c-silver-300);font-size:var(--step-0)}

/* ---- Serviços: as cinco linhas em cards --------------------------------- */
.servicos{position:relative;background:transparent;isolation:isolate}
/* o cardume em anel que ficava no painel de introdução do carrossel vira fundo da seção */
.servicos>.cdlayer{position:absolute;inset:0;z-index:0;opacity:.45;pointer-events:none}
.servicos>.cdlayer canvas{width:100%!important;height:100%!important}
.servicos .shell{position:relative;z-index:2}
.sols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.8vw,1.4rem)}
.sol{display:flex;flex-direction:column;padding:clamp(1.2rem,2.2vw,1.8rem);
  background:color-mix(in srgb,var(--c-abyss-700) 52%,transparent);
  border:1px solid var(--c-abyss-500);border-radius:var(--r-2);
  backdrop-filter:blur(3px);will-change:transform;transition:border-color .3s,transform .2s}
.sol:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.sol__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.sol__ic{width:32px;height:32px;stroke:var(--accent);fill:none;stroke-width:1.4;flex:none}
.sol__idx{font-family:var(--font-mono);color:var(--accent);font-size:var(--step--1);letter-spacing:.1em}
.sol>h3{font-size:clamp(1.02rem,.94rem + .42vw,1.28rem);color:var(--hero-text);margin:0 0 .35em;line-height:1.2}
.sol>.sol__for{display:block;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;
  font-size:var(--step--1);color:var(--accent);margin-bottom:.7em;line-height:1.35}
.sol>p{color:var(--c-silver-300);font-size:var(--step-0);margin:0}
/* "Cardume Estruturado" quebra em duas linhas e "eventos corporativos, internos e
   externos" em três: sem uma altura mínima os quatro cards ficam com título, rótulo
   e texto começando em alturas diferentes. */
@media (min-width:901px){
  .sol:not(.sol365)>h3{min-height:2.4em}
  .sol>.sol__for{min-height:3.9em}
}

/* card XL: a quinta linha ocupa a faixa inteira e carrega a órbita e o CTA */
/* O display e o título atravessam as duas colunas. Se ficam dentro da coluna de
   texto, ela empilha idx + display + título + lead + 4 tópicos + CTA num filete só
   e o card estica, enquanto a órbita ao lado sobra altura. Em faixa, a órbita fica
   ao lado da lista e o card encolhe. */
.sol365{grid-column:1/-1;position:relative;overflow:hidden;scroll-margin-top:96px;
  display:grid;grid-template-columns:1.15fr .85fr;
  grid-template-areas:"head head" "text orbit";align-items:start;
  gap:clamp(1.2rem,2.6vw,2.2rem) clamp(2rem,5vw,4rem);padding:clamp(2rem,4.5vw,3.6rem);
  margin-top:clamp(.6rem,1.5vw,1.2rem);
  border-color:rgba(87,224,212,.42);
  background:linear-gradient(115deg,rgba(30,133,125,.26) 0%,color-mix(in srgb,var(--c-abyss-700) 62%,transparent) 58%)}
.sol365:hover{border-color:rgba(87,224,212,.42)}   /* card grande não reage ao hover como os pequenos */
.sol365__head{grid-area:head;position:relative;z-index:2}
.sol365__text{grid-area:text;position:relative;z-index:2}
.sol365 .lead{color:var(--c-silver-300);font-size:var(--step-0);max-width:52ch}
.sol365__idx{display:block;font-family:var(--font-mono);color:var(--accent);
  font-size:var(--step--1);letter-spacing:.1em;margin-bottom:var(--space-3)}

/* ---- Cardume 365 (clímax, dentro do card XL de Serviços) ----------------- */
/* Sem fundo próprio além do gradiente do card: o oceano das seções vizinhas
   continua o mesmo, sem degrau de tonalidade nem linha nas divisas. */
/* o destaque de produto principal é o próprio nome, grande — sem pill */
.c365__display{font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);line-height:1;letter-spacing:.06em;
  margin-bottom:var(--space-2);color:var(--hero-text)}
.c365__display span{background:linear-gradient(180deg,#9BDCEA 0%,#48A7C7 45%,#2A7BA4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* o título aqui é uma frase-promessa, não um título curto: escala menor que a
   dos outros H2 para o display "CARDUME 365" continuar sendo o topo da hierarquia */
.c365__title{font-size:var(--t-h3);line-height:1.3;max-width:48ch;
  margin-bottom:0;text-wrap:balance}
.c365__list{list-style:none;padding:0;margin:var(--space-3) 0;display:grid;gap:0}
.c365__list li{display:flex;gap:.6em;align-items:flex-start;font-size:var(--step-0);color:var(--c-silver-200);
  padding:.55rem 0 .55rem .9rem;line-height:1.45;
  border-left:2px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.c365__list li span{color:var(--accent)}
/* órbita-calendário: o ano inteiro girando ao redor do símbolo */
/* width:100% é obrigatório: com margin-inline:auto o item de grid deixa de esticar e
   volta ao tamanho intrínseco do SVG (300px), que era o motivo de a órbita nascer
   pequena e o lado direito da seção parecer vazio. */
.c365__orbit{grid-area:orbit;position:relative;z-index:2;align-self:center;
  width:100%;max-width:420px;margin-inline:auto}
.c365__orbit svg{display:block;width:100%;height:auto;overflow:visible}
.c365-orbit-line{stroke:color-mix(in srgb,var(--c-silver-300) 26%,transparent);stroke-width:1.2;
  stroke-dasharray:2 7;fill:none}
.c365-ring{transform-box:fill-box;transform-origin:center}
.c365-ring--a{animation:c365-spin 90s linear infinite}
.c365-ring--b{animation:c365-spin 140s linear infinite reverse}
.c365-dot{fill:color-mix(in srgb,var(--c-silver-300) 55%,transparent)}
.c365-dot.c365-lit{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(87,224,212,.8))}
.c365-months text{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  fill:color-mix(in srgb,var(--c-silver-300) 60%,transparent);text-anchor:middle;text-transform:uppercase}
.c365-core-glow{fill:none;stroke:color-mix(in srgb,var(--accent) 30%,transparent);stroke-width:1;
  filter:drop-shadow(0 0 18px rgba(87,224,212,.35))}
@keyframes c365-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.c365-ring{animation:none!important}}

/* ---- Galeria automática (faixa silenciosa) ------------------------------- */
/* Dois trilhos lado a lado: o .proof-rail dos depoimentos à esquerda e o mesmo
   invertido à direita, com o quadro largo trocando de linha entre as metades.
   Precisam ser dois grids separados. Numa grade única de 4 colunas as duas
   linhas têm uma altura só cada, e o largo da direita cairia na linha curta
   saindo 1,75 em vez de 1,32; a conta não fecha para nenhuma repartição de
   linhas (o largo tem por força ~2× a largura do pequeno, e isso só bate com
   1,32 quando ele está na linha mais alta). Com um trilho por metade, cada um
   carrega o seu corte .86/1.14, invertido na direita.
   O aspect-ratio:3/2 dá a altura da faixa: lá nos depoimentos quem esticava o
   rail era a coluna de citações ao lado, e aqui não existe vizinho. */
.galeria{padding-block:clamp(2.4rem,6vh,4.5rem)}   /* faixa sem título respira menos que uma seção */
/* A faixa não usa a largura toda do .shell: em 1120px ela tomava quase a tela
   inteira e engolia as seções vizinhas. Encolher pelo contêiner, e não por
   quadro, mantém as proporções intactas. */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);aspect-ratio:3/2;
  width:min(100%,860px);margin-inline:auto}
.gal__rail{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:.86fr 1.14fr;
  gap:var(--space-2);min-height:0}
.gal__rail--flip{grid-template-rows:1.14fr .86fr}
.gal__shot--wide{grid-column:1/-1}
.gal__shot{position:relative;margin:0;min-height:0;overflow:hidden;
  border-radius:var(--r-2);background:var(--c-abyss-700);border:1px solid var(--c-abyss-500)}

/* Uma camada por foto, empilhadas. O clip-path fica na camada e o zoom no <img>
   de dentro: separados, um não sobrescreve o transform do outro. */
.gal__lay{position:absolute;inset:0;opacity:0;clip-path:var(--gal-from);
  transition:opacity .5s ease}
.gal__lay.is-on{opacity:1;clip-path:inset(0 0 0 0);
  transition:opacity .5s ease,clip-path 1.05s cubic-bezier(.62,.03,.2,1)}
/* A que sai só apaga: se voltasse ao clip inicial, ela seria cortada no meio da
   despedida. O JS tira o .is-out depois da transição, com a camada já invisível. */
.gal__lay.is-out{opacity:0;clip-path:inset(0 0 0 0);transition:opacity .75s ease}
.gal__lay img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;filter:saturate(.78) brightness(.94)}

/* de onde a foto nova entra; alterna por quadro para a faixa não pulsar igual */
.gal__shot[data-gal-dir="left"]  .gal__lay{--gal-from:inset(0 100% 0 0)}
.gal__shot[data-gal-dir="right"] .gal__lay{--gal-from:inset(0 0 0 100%)}
.gal__shot[data-gal-dir="up"]    .gal__lay{--gal-from:inset(100% 0 0 0)}
.gal__shot[data-gal-dir="down"]  .gal__lay{--gal-from:inset(0 0 100% 0)}

/* Zoom lento durante a permanência. A duração é o ciclo do quadro no
   landing.js (5×900 ms de rodada + 5 s de descanso = 9,5 s) e o fill:forwards
   segura o valor final, então a camada que sai congela em scale(1.05)
   exatamente onde parou: nenhum salto no meio do fade. */
.gal.is-live .gal__lay.is-on img{animation:gal-kb 9.5s ease-out forwards}
.gal__lay.is-out img{animation:none;transform:scale(1.05)}
@keyframes gal-kb{from{transform:scale(1)}to{transform:scale(1.05)}}

/* brilho bioluminescente no instante da troca; some junto com a transição */
.gal__shot::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  opacity:0;background:radial-gradient(120% 90% at 50% 100%,
    color-mix(in srgb,var(--accent) 26%,transparent) 0%,transparent 62%)}
.gal__shot.is-swiping::after{animation:gal-glow 1.05s ease-out}
@keyframes gal-glow{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .gal__lay,.gal__lay.is-on,.gal__lay.is-out{transition:none}
  .gal .gal__lay.is-on img,.gal__lay.is-out img{animation:none;transform:none}
  .gal__shot.is-swiping::after{animation:none}
}

/* ---- Ecossistema (grid interativo) --------------------------------------- */
.eco{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.eco__item{position:relative;padding:var(--space-4);border:1px solid var(--c-abyss-500);border-radius:var(--r-2);
  background:color-mix(in srgb,var(--c-abyss-700) 38%,transparent);overflow:hidden;will-change:transform;transition:border-color .3s,background .3s,transform .2s}
.eco__item::before{content:"";position:absolute;inset:auto auto -40% -20%;width:60%;height:80%;background:var(--grad-biolum);opacity:0;transition:opacity .4s;pointer-events:none}
.eco__item:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.eco__item:hover::before{opacity:.25}
.eco__icon{width:30px;height:30px;stroke:var(--accent);stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--space-2);display:block;position:relative}
.eco__item:hover .eco__icon{filter:drop-shadow(0 0 6px rgba(87,224,212,.5))}
.eco__n{font-family:var(--font-mono);color:var(--accent);font-size:var(--step--1);letter-spacing:.1em}
.eco__item h3{font-size:var(--t-h3);color:var(--hero-text);margin:.4em 0 .3em;position:relative}
.eco__item p{color:var(--c-silver-300);font-size:var(--step-0);position:relative}

/* ---- Depoimentos --------------------------------------------------------- */
/* Duas colunas: os quatro depoimentos em 2×2 à esquerda e o gráfico da pesquisa
   de satisfação à direita, para a prova escrita e a numérica chegarem juntas.
   Essa coluna da direita já foi um trilho de três fotos (.proof-rail); as fotos
   migraram para a faixa .gal lá em cima e o gráfico herdou o lugar. Um pouco
   mais larga que o trilho original (era clamp(240px,30vw,380px)): o donut
   precisa de diâmetro para o número central respirar e ainda sobram dois
   blocos de texto embaixo dele. */
.proof{display:grid;grid-template-columns:minmax(0,1fr) clamp(264px,30vw,400px);
  gap:clamp(1rem,2.2vw,1.8rem);align-items:stretch}
/* Respiro vertical maior que o horizontal de propósito: é o vão entre as linhas
   que dá altura à coluna, e é dessa altura que o donut ao lado vive (ver
   .donut__chart). Na horizontal um vão desses só espremeria o texto das citações. */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--space-5) var(--space-3);align-content:start}
.quote{margin:0;padding:var(--space-4);border-radius:var(--r-2);background:color-mix(in srgb,var(--c-abyss-700) 52%,transparent);
  border:1px solid var(--c-abyss-500);border-left:3px solid var(--accent);
  position:relative;transition:border-color .3s}
.quote:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);border-left-color:var(--accent)}
.quote::before{content:"“";position:absolute;top:.05em;left:.3em;font-family:var(--font-display);font-size:3.4rem;color:color-mix(in srgb,var(--accent) 30%,transparent);line-height:1}
.quote blockquote{margin:0 0 var(--space-3);font-size:var(--step-0);color:var(--c-silver-200);position:relative;z-index:1;padding-top:.7em;line-height:1.5}
/* atribuição em uma linha só, como no deck: nome · empresa · linha de atuação */
.quote__who{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.02em;
  color:var(--c-silver-300);line-height:1.4}
.quote__who strong{color:var(--accent);font-weight:400}

/* ---- Coluna do gráfico (pesquisa de satisfação) -------------------------- */
/* Mesmo tratamento de superfície da .quote logo acima, para a coluna do dado não
   parecer colada de outro site. Só porcentagens: as contagens absolutas e o
   total de respostas saíram por decisão do Junio em 2026-08-13. */
.proof-aside{margin:0;padding:var(--space-4);border-radius:var(--r-2);
  background:color-mix(in srgb,var(--c-abyss-700) 52%,transparent);border:1px solid var(--c-abyss-500);
  display:flex;flex-direction:column;gap:var(--space-3);min-height:0}
/* Quem manda na altura da linha é a coluna dos depoimentos, e o donut absorve a
   diferença: ele é o único item elástico daqui, então o card fecha exatamente na
   altura dos quatro cards ao lado sem ninguém precisar de altura fixa.
   ⚠️ Duas condições fazem isso funcionar, e as duas são obrigatórias:
   1) flex-basis 0, senão a base do flex é o conteúdo;
   2) o SVG fora do fluxo (ver regra do .donut__chart svg mais abaixo).
   No fluxo normal o SVG com height:100% não tem contra o que resolver a
   porcentagem, cai na proporção do viewBox e entra com a altura cheia como
   conteúdo mínimo: o card estoura abaixo dos depoimentos e não sobra pressão
   nenhuma para o flex encolher. É o mesmo motivo pelo qual a foto do antigo
   .proof-rail era absoluta. */
.donut__chart{position:relative;flex:1 1 0;min-height:150px}
/* absoluto de propósito: assim não dá altura nenhuma ao card (ver acima) e o
   height:100% passa a ter contra o que resolver. O preserveAspectRatio padrão do
   viewBox escala e centraliza o desenho na caixa que sobrar, seja ela qual for,
   então sobra de altura vira respiro em volta do donut, nunca deformação. */
.donut__chart svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.donut__track{fill:none;stroke:color-mix(in srgb,var(--c-abyss-500) 55%,transparent);stroke-width:18}
.donut__arc{fill:none;stroke-width:18;stroke-linecap:butt;
  stroke-dasharray:var(--len) 502.655;stroke-dashoffset:0}
.donut__arc--exc {stroke:var(--c-cyan-300)}
.donut__arc--bom {stroke:var(--c-brand-400)}
.donut__arc--reg {stroke:var(--c-silver-500)}
.donut__arc--ruim{stroke:var(--c-sand-200)}
/* o desenho só existe com JS: sem ele o dashoffset base (0) já mostra o donut
   inteiro, mesma lógica do .js .reveal */
.js .donut__arc{stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.js .proof-aside.is-in .donut__arc{stroke-dashoffset:0}
.js .proof-aside.is-in .donut__arc--bom {transition-delay:.18s}
.js .proof-aside.is-in .donut__arc--reg {transition-delay:.30s}
.js .proof-aside.is-in .donut__arc--ruim{transition-delay:.36s}
/* número no miolo em HTML, não em <text> SVG: escala pelos steps tipográficos
   e continua selecionável */
.donut__mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.2em;text-align:center;pointer-events:none}
.donut__num{font-family:var(--font-display);font-size:var(--step-3);line-height:1;
  color:var(--c-silver-200);font-variant-numeric:tabular-nums}
.donut__cap{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.06em;
  color:var(--c-silver-500);max-width:9ch;line-height:1.3}
.donut__legend{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;
  padding-top:var(--space-3);border-top:1px solid color-mix(in srgb,var(--c-abyss-500) 70%,transparent)}
/* três colunas desde que a contagem absoluta saiu: marcador · rótulo · porcentagem */
.donut__legend li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:.6rem;font-family:var(--font-mono);font-size:var(--step--1);color:var(--c-silver-300)}
.donut__dot{width:.62em;height:.62em;border-radius:var(--r-pill)}
.donut__dot--exc {background:var(--c-cyan-300)}
.donut__dot--bom {background:var(--c-brand-400)}
.donut__dot--reg {background:var(--c-silver-500)}
.donut__dot--ruim{background:var(--c-sand-200)}
.donut__legend b{font-weight:400;color:var(--c-silver-200);font-variant-numeric:tabular-nums}
/* título e subtítulo abrem a coluna, antes do gráfico. Tipografia contida de
   propósito: cada linha de texto a menos aqui é altura que sobra para o donut,
   e o papel deste bloco é apoiar o gráfico, não competir com o h2 da seção. */
.proof-aside__head{margin:0}
.proof-aside__title{margin:0 0 var(--space-2);font-family:var(--font-display);
  font-size:var(--step-0);line-height:1.3;color:var(--c-silver-200)}
.proof-aside__text{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--c-silver-300)}

@media (prefers-reduced-motion:reduce){
  .js .donut__arc{transition:none;stroke-dashoffset:0}
}

/* ---- Fundadoras ---------------------------------------------------------- */
.founders{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);position:relative;z-index:2}
.founder{display:flex;flex-direction:column;background:color-mix(in srgb,var(--c-abyss-700) 42%,transparent);
  border:1px solid var(--c-abyss-500);border-radius:var(--r-2);overflow:hidden;will-change:transform;transition:transform .2s}
/* As duas fotos são retrato, mas com enquadramentos muito diferentes (uma é de
   corpo, a outra fecha no rosto), então no mesmo quadro 4:3 uma cabeça saía bem
   maior que a outra. --fp escolhe a faixa vertical da foto e --fz o zoom; cada
   foto declara os seus valores no HTML, para as duas cabeças ficarem do mesmo
   tamanho e com os olhos na mesma linha. */
.founder__photo{aspect-ratio:4/3;overflow:hidden;background:var(--c-abyss-700)}
.founder__photo img{width:100%;height:100%;object-fit:cover;
  object-position:50% var(--fp,22%);transform:scale(var(--fz,1));transform-origin:50% 50%;
  filter:saturate(.95)}
.founder__body{padding:var(--space-4)}
.founder__body h3{font-size:var(--step-2);color:var(--hero-text)}
.founder__role{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;font-size:var(--step--1);color:var(--accent);margin:.3em 0 var(--space-2)}
.founder__body p:last-child{color:var(--c-silver-300)}

/* ---- Contato (CTA direto, sem formulário) -------------------------------- */
/* vinheta translúcida no fim da rampa (não pode ser mais clara que a água) */
.contato{text-align:center;background:radial-gradient(100% 100% at 50% 100%,rgba(1,6,10,.88) 30%,transparent)}
.contato__inner{position:relative;z-index:3;max-width:820px;margin-inline:auto}
.contato__title{font-size:var(--t-h2);margin-bottom:var(--space-3)}
.contato .lead{margin-inline:auto}
.contato__cta{margin-top:var(--space-5)}
.contato__hint{font-size:var(--step--1);color:var(--text-dim);margin-top:var(--space-2)}
.contato__alt{margin-top:var(--space-4);color:var(--c-silver-300);font-size:var(--step-0)}
.contato__alt a{border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}

/* ---- Rodapé -------------------------------------------------------------- */
/* opaco no fim da rampa: com o abisso-900 o rodapé ficava MAIS CLARO que a água */
.foot{padding-block:var(--space-6) var(--space-4);background:#01060A;border-top:1px solid var(--c-abyss-500);position:relative;z-index:2}
.foot__grid{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between}
.brandmark--foot .brandmark__sym{width:32px;height:32px}
.foot__tag{color:var(--c-silver-300);font-size:var(--step-0);text-align:center}
.foot__contact{font-family:var(--font-mono);font-size:var(--step--1);color:var(--c-silver-300);text-align:right}
.foot__contact a{color:var(--c-silver-300)}.foot__contact a:hover{color:var(--accent)}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-5);
  padding-top:var(--space-3);border-top:1px solid color-mix(in srgb,var(--c-silver-300) 10%,transparent);
  font-size:var(--step--1);color:var(--text-dim);font-family:var(--font-mono)}
.foot__by a{color:var(--text-dim);border-bottom:1px solid color-mix(in srgb,var(--c-silver-300) 20%,transparent)}
.foot__by a:hover{color:var(--accent)}

/* ============================================================================
   DESCANSOS CLAROS (areia quente) — Método, Depoimentos, Fundadoras
   Cortam o oceano de propósito: painel OPACO cor de areia, texto navy. Como a
   água é uma camada fixa, ela reaparece sozinha assim que o painel termina.
   ============================================================================ */
.section--rest{
  --rest-bg:#ECE4D3;              /* areia quente (base do painel) */
  --rest-ink:#182831;            /* navy do texto */
  --rest-ink-dim:#48585F;        /* texto secundário */
  --rest-accent:var(--c-teal-ink);
  --rest-card:#F6F1E6;           /* card claro */
  --rest-card-glow:#E0F0EC;      /* card em teal claro (destaque) */
  --rest-border:#D8CDB6;         /* borda quente */
  background:var(--rest-bg);color:var(--rest-ink);
  padding-block:clamp(5.2rem,11vh,8.5rem);isolation:isolate}
/* Seam com o oceano: bordas do painel escurecem para dentro da água (fundura).
   A cor tem que ser a da ÁGUA naquele trecho da rampa (~5000 a 5600 m, #050F17),
   senão a borda do painel brilha. Faixa mais alta que antes porque o contraste
   entre a areia e a água ficou maior. */
.section--rest::before,.section--rest::after{content:"";position:absolute;left:0;right:0;height:140px;pointer-events:none;z-index:0}
.section--rest::before{top:0;background:linear-gradient(180deg,rgba(5,15,23,.62),rgba(5,15,23,0))}
.section--rest::after{bottom:0;background:linear-gradient(0deg,rgba(5,15,23,.58),rgba(5,15,23,0))}
.section--rest > .shell{position:relative;z-index:1}
/* tipografia clara */
.section--rest .eyebrow{color:var(--rest-accent)}
.section--rest .section__title{color:var(--rest-ink)}
.section--rest .lead,.section--rest .body{color:var(--rest-ink-dim)}
/* Fundadoras na areia */
.section--rest .founder{background:var(--rest-card);border-color:var(--rest-border)}
.section--rest .founder__photo{background:var(--rest-border)}
.section--rest .founder__body h3{color:var(--rest-ink)}
.section--rest .founder__role{color:var(--rest-accent)}
.section--rest .founder__body p:last-child{color:var(--rest-ink-dim)}
/* HUD legível em qualquer fundo (areia inclusa): chip escuro sutil atrás do número */
.depth-gauge__num{padding:.14em .5em;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--c-abyss-900) 42%,transparent);text-shadow:0 1px 6px rgba(6,15,23,.7)}

/* ---- Reveal (scroll) ----------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
/* Máscara de revelação: o CLIP vai no <img>, não no container observado.
   Se o clip ficasse no próprio elemento, o IntersectionObserver mediria
   intersectionRatio 0 (área clipada = 0) e o reveal nunca dispararia (deadlock). */
.js .reveal-mask{overflow:hidden}
.js .reveal-mask img{clip-path:inset(0 0 101% 0);transform:scale(1.14);
  transition:clip-path 1s cubic-bezier(.7,0,.2,1),transform 1.3s cubic-bezier(.2,.7,.2,1)}
.js .reveal-mask.is-in img{clip-path:inset(0 0 0 0);transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal-mask{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .reveal-mask img{transform:none!important;clip-path:none!important}
  .hero__scroll svg{animation:none}
}

/* ---- Responsivo ---------------------------------------------------------- */
@media (max-width:900px){
  .nav__links{display:none}
  .depth-gauge{display:none}
  .problema__grid,.cardume-sec__grid{grid-template-columns:1fr}
  /* com uma coluna só o texto ocupa a largura toda e o nadador cruzava por cima da
     linha do título: ele fica, mas quase imperceptível */
  .problema .cd-fish-cross{opacity:.25}
  .problema .cd-swimmer{--cd-cross-size:26px}
  /* a linha vira uma por item, senão só a primeira fileira ficava animada */
  .regua__rota{display:none}
  .regua__item{border-top-color:transparent}
  .regua__item::after{display:block}
  .regua__lista{grid-template-columns:1fr 1fr}
  .sols{grid-template-columns:1fr 1fr}
  /* card XL: a órbita sobe para entre o cabeçalho e o texto, como na versão 2.
     Com áreas nomeadas o `order` não vale nada: quem reordena é o próprio
     grid-template-areas, que também precisa ser redeclarado para uma coluna. */
  .sol365{grid-template-columns:1fr;grid-template-areas:"head" "orbit" "text";gap:var(--space-4)}
  .sol365 .c365__orbit{max-width:380px}
  .eco{grid-template-columns:1fr 1fr}
  /* depoimentos: os cards empilham e o gráfico desce para a largura toda.
     O vão vertical largo das citações existe só para dar altura ao donut na
     versão de duas colunas; empilhado ele não serve para nada e deixaria as
     citações a 3rem uma da outra e o gráfico a 1rem da última. Aqui os cinco
     cards viram uma pilha só, com o mesmo vão entre todos. */
  .proof{grid-template-columns:1fr;gap:var(--space-3)}
  .quotes{grid-template-columns:1fr;gap:var(--space-3)}
  /* numa coluna só o card fica largo: o texto segura a medida de leitura e o
     donut volta a ter tamanho próprio, já que não há mais altura para igualar */
  .proof-aside__head{max-width:60ch}
  .donut__chart{flex:none;aspect-ratio:1;width:min(100%,232px);margin-inline:auto}
  /* Os dois trilhos empilham. Sem a altura fixa da faixa, quem passa a mandar
     na proporção é o aspect-ratio de cada quadro, e não mais as frações. */
  .gal{grid-template-columns:1fr;aspect-ratio:auto}
  .gal__rail,.gal__rail--flip{grid-template-rows:auto auto}
  .gal__shot--sm{aspect-ratio:5/6}
  .gal__shot--wide{aspect-ratio:4/3}
  .founders{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero__title{font-size:clamp(2rem,8.4vw,3rem)}
  .hero__sub{font-size:var(--step-0)}
  .hero__scroll svg{width:19px;height:25px}
  .hero__brand{width:min(62vw,240px)}
  .regua__lista{grid-template-columns:1fr}
  .sols{grid-template-columns:1fr}
  .eco{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:stretch}
  .foot__grid{flex-direction:column;align-items:flex-start;text-align:left}
  .foot__contact{text-align:left}.foot__legal{flex-direction:column}
}