/* ============================================================
   Cinematic Hero — porte em JS puro do componente 21st.dev
   (cinematic-landing-hero, original em React + Tailwind + GSAP)

   Um capítulo rolável logo após o hero: os letreiros abrem, um cartão
   profundo sobe e toma a tela, o celular com a operação entra em 3D,
   os números contam e no fim o cartão recolhe e sai, revelando o CTA.
   Toda a coreografia fica em assets/js/cinematic-hero.js.

   Duas camadas de estado:
   - SEM .ch-armed (JS ausente ou "reduzir movimento"): layout estático
     empilhado, tudo visível — a seção continua legível.
   - COM .ch-armed: seção alta + pino sticky + estados iniciais ocultos,
     que o JS anima conforme a rolagem.

   Cores adaptadas do azul original para o verde-lima do site.
   ============================================================ */

.ch-section {
  position: relative;
  /* fundo TRANSPARENTE: o Constellation Grid (canvas fixo do site) fica
     visível atrás dos letreiros e do CTA; um fundo opaco aqui o tapava */
  background: transparent;
  /* anula o padding global de `section` (neo.css): a altura daqui é a
     pista de rolagem do pino e precisa ser exata */
  padding: 0;
}

.ch-pin {
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  display: grid;
  place-items: center;
}

/* ---------- camadas de ambiente ---------- */
.ch-grain {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

.ch-grid-bg {
  /* aposentada: a grade estática duplicava a malha viva do Constellation
     Grid que agora aparece atrás da seção. O JS ainda a anima — inofensivo
     com display none. */
  display: none;
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(242, 245, 239, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 245, 239, .05) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  will-change: transform, filter, opacity;
}

/* ---------- letreiros de fundo ---------- */
.ch-hero-text {
  position: relative; z-index: 1;
  text-align: center;
  padding: 0 18px;
  pointer-events: none;
  will-change: transform, filter, opacity;
}
.ch-hero-text h2 {
  margin: 0;
  font-size: clamp(34px, 7vw, 92px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 800;
}
.ch-line1 {
  color: var(--ink, #f2f5ef);
  /* fundo escuro: a "sombra 3D" vira um brilho suave */
  text-shadow: 0 10px 30px rgba(242, 245, 239, .2), 0 2px 4px rgba(242, 245, 239, .1);
}
.ch-line2 {
  font-weight: 900;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: translateZ(0);
  filter: drop-shadow(0 10px 20px rgba(242, 245, 239, .15)) drop-shadow(0 2px 4px rgba(242, 245, 239, .1));
}

/* ---------- CTA de fundo ---------- */
.ch-cta {
  position: relative; z-index: 1;
  text-align: center;
  padding: 0 18px;
  will-change: transform, filter, opacity;
}
.ch-cta h2 {
  margin: 0 0 18px;
  font-size: clamp(32px, 5.5vw, 68px);
  letter-spacing: -.03em;
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ch-cta p {
  margin: 0 auto 40px;
  max-width: 560px;
  color: var(--ink-2, #b2bcaf);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 300;
  line-height: 1.65;
}
.ch-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 640px) { .ch-cta-buttons { flex-direction: row; } }

/* botões táteis — o claro virou o verde-lima da marca */
.ch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 30px;
  border-radius: 20px;
  font-size: 16px; font-weight: 800; letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .4s cubic-bezier(.25, 1, .5, 1), box-shadow .4s cubic-bezier(.25, 1, .5, 1), background .4s;
}
.ch-btn svg { width: 26px; height: 26px; flex: none; }
.ch-btn small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: -1px; }
.ch-btn b { display: block; font-size: 18px; line-height: 1.05; letter-spacing: -.02em; }
.ch-btn > span { text-align: left; }

.ch-btn--lime {
  background: linear-gradient(180deg, var(--lime-2, #c2f76d) 0%, var(--lime, #8fe93c) 100%);
  color: var(--lime-ink, #0a2404);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .3),
              0 12px 24px -4px rgba(143, 233, 60, .35),
              inset 0 1px 1px rgba(255, 255, 255, .8), inset 0 -3px 6px rgba(0, 0, 0, .12);
}
.ch-btn--lime:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 6px 12px -2px rgba(0, 0, 0, .3),
              0 20px 32px -6px rgba(143, 233, 60, .45),
              inset 0 1px 1px rgba(255, 255, 255, .8), inset 0 -3px 6px rgba(0, 0, 0, .12);
}
.ch-btn--lime:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2),
              inset 0 3px 6px rgba(0, 0, 0, .18);
}

.ch-btn--dark {
  background: linear-gradient(180deg, #27272a 0%, #18181b 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 4px rgba(0, 0, 0, .6),
              0 12px 24px -4px rgba(0, 0, 0, .9),
              inset 0 1px 1px rgba(255, 255, 255, .15), inset 0 -3px 6px rgba(0, 0, 0, .8);
}
.ch-btn--dark:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #3f3f46 0%, #27272a 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 6px 12px -2px rgba(0, 0, 0, .7),
              0 20px 32px -6px rgba(0, 0, 0, 1),
              inset 0 1px 1px rgba(255, 255, 255, .2), inset 0 -3px 6px rgba(0, 0, 0, .8);
}
.ch-btn--dark:active {
  transform: translateY(1px);
  background: #18181b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), inset 0 3px 8px rgba(0, 0, 0, .9);
}

/* ---------- o cartão profundo ---------- */
.ch-card-layer {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  perspective: 1500px;
  pointer-events: none;
  margin-top: 46px;
}
.ch-card {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  width: 100%;
  max-width: 1180px;
  border-radius: 40px;
  /* azul profundo do original → verde profundo da marca */
  background: linear-gradient(145deg, #143823 0%, #060b07 100%);
  box-shadow:
    0 40px 100px -20px rgba(0, 0, 0, .9),
    0 20px 40px -20px rgba(0, 0, 0, .8),
    inset 0 1px 2px rgba(255, 255, 255, .2),
    inset 0 -2px 4px rgba(0, 0, 0, .8);
  border: 1px solid rgba(255, 255, 255, .04);
  will-change: transform;
}
.ch-sheen {
  position: absolute; inset: 0; z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .06) 0%, transparent 40%);
  mix-blend-mode: screen;
}

.ch-card-content {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  max-width: 1180px; margin: 0 auto;
  padding: 34px 18px;
  display: flex; flex-direction: column;
  justify-content: space-evenly; align-items: center;
  gap: 8px;
  will-change: transform, opacity;
}
@media (min-width: 1024px) {
  .ch-card-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    padding: 40px 48px;
  }
}

/* marca — em cima no celular, à direita no desktop */
.ch-brand { order: 1; width: 100%; min-width: 0; text-align: center; }
.ch-brand h3 {
  margin: 0;
  /* 4.6vw@1440 ≈ 66px: os 9 caracteres (~0.68em cada) medem ~405px e
     cabem folgados na coluna de ~450px do grid limitado a 1340px */
  font-size: clamp(40px, 4.6vw, 68px);
  /* Com background-clip:text o gradiente só pinta DENTRO do box do
     elemento: quando a palavra transborda a coluna do grid, o pedaço de
     fora fica transparente — parecia cortada no meio. width:max-content
     faz o box abraçar o texto inteiro. */
  width: max-content;
  max-width: none;
  margin-inline: auto;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.05em;
  line-height: .95;
  background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: translateZ(0);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .8)) drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
}
@media (min-width: 1024px) {
  /* centrada na própria coluna (entre o celular e a borda), não colada
     no canto direito */
  .ch-brand { order: 3; text-align: center; }
}

/* texto — embaixo no celular, à esquerda no desktop */
.ch-copy { order: 3; width: 100%; text-align: center; padding: 0 8px; }
.ch-copy h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.ch-copy p {
  margin: 0 auto;
  max-width: 400px;
  color: rgba(214, 245, 200, .7);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.65;
  display: none;               /* como no original: escondido no celular */
}
@media (min-width: 768px) { .ch-copy p { display: block; } }
@media (min-width: 1024px) { .ch-copy { order: 1; text-align: left; } .ch-copy p { margin: 0; } }

/* ---------- o celular ---------- */
.ch-mockup-wrap {
  order: 2;
  position: relative;
  width: 100%;
  height: 380px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1000px;
}
/* a caixa acompanha a escala do celular: em 768–1023 ele mede
   580 × .85 ≈ 493px visuais — com a caixa de 380px ele transbordava
   ~56px para cima e para baixo (transform não entra no layout) */
@media (min-width: 768px)  { .ch-mockup-wrap { height: 520px; } }
@media (min-width: 1024px) { .ch-mockup-wrap { height: 600px; } }

/* voo 3D controlado pelo JS */
.ch-mockup-fly {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* escala segura por CSS, sem conflitar com os transforms do JS */
.ch-mockup-scale {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transform: scale(.62);
}
@media (min-width: 768px)  { .ch-mockup-scale { transform: scale(.85); } }
@media (min-width: 1024px) { .ch-mockup-scale { transform: scale(1); } }

.ch-phone {
  position: relative;
  width: 280px; height: 580px;
  border-radius: 48px;
  background: #111;
  box-shadow:
    inset 0 0 0 2px #52525b,
    inset 0 0 0 7px #000,
    0 40px 80px -15px rgba(0, 0, 0, .9),
    0 15px 25px -5px rgba(0, 0, 0, .7);
  transform-style: preserve-3d;
  will-change: transform;
}

/* botões físicos */
.ch-hw {
  position: absolute;
  width: 3px;
  background: linear-gradient(90deg, #404040 0%, #171717 100%);
  box-shadow: -2px 0 5px rgba(0, 0, 0, .8), inset -1px 0 1px rgba(255, 255, 255, .15), inset 1px 0 2px rgba(0, 0, 0, .8);
  border-left: 1px solid rgba(255, 255, 255, .05);
}
.ch-hw--1 { top: 120px; left: -3px; height: 25px; border-radius: 3px 0 0 3px; }
.ch-hw--2 { top: 160px; left: -3px; height: 45px; border-radius: 3px 0 0 3px; }
.ch-hw--3 { top: 220px; left: -3px; height: 45px; border-radius: 3px 0 0 3px; }
.ch-hw--4 { top: 170px; right: -3px; left: auto; height: 70px; border-radius: 0 3px 3px 0; transform: scaleX(-1); }

.ch-screen {
  position: absolute; inset: 7px;
  border-radius: 40px;
  background: #06110a;
  overflow: hidden;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 1);
  color: #fff;
}
.ch-glare {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 45%);
}

/* dynamic island */
.ch-island {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px;
  background: #000; border-radius: 999px;
  z-index: 9;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 12px;
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, .1);
}
.ch-island i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint, #3ddc84);
  box-shadow: 0 0 8px rgba(61, 220, 132, .8);
  animation: chPulse 2s ease-in-out infinite;
}
@keyframes chPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* app */
.ch-app {
  position: relative;
  width: 100%; height: 100%;
  padding: 48px 20px 32px;
  display: flex; flex-direction: column;
}
.ch-app-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 30px;
  will-change: transform, opacity;
}
.ch-app-head small {
  display: block;
  font-size: 10px; color: #7e897e;
  text-transform: uppercase; letter-spacing: .18em; font-weight: 700;
  margin-bottom: 4px;
}
.ch-app-head b { font-size: 20px; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.ch-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #e5e7e2;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
}

.ch-ring-wrap {
  position: relative;
  width: 176px; height: 176px;
  margin: 0 auto 30px;
  display: grid; place-items: center;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .8));
  will-change: transform, opacity;
}
.ch-ring-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-ring-track { fill: none; stroke: rgba(255, 255, 255, .03); stroke-width: 12; }
.ch-ring {
  fill: none;
  stroke: var(--lime, #8fe93c);
  stroke-width: 12;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-dasharray: 402;
  stroke-dashoffset: 402;
}
.ch-ring-label { position: relative; z-index: 1; text-align: center; }
.ch-counter { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.04em; color: #fff; }
.ch-ring-label small {
  display: block;
  font-size: 8px; font-weight: 700;
  color: rgba(194, 247, 109, .55);
  text-transform: uppercase; letter-spacing: .12em;
  margin-top: 2px;
  /* o miolo livre do anel tem ~116px e a frase inteira mede 144px: sem
     este teto as pontas atravessavam o traço. Em duas linhas cabe. */
  max-width: 100px;
  margin-inline: auto;
  line-height: 1.5;
}

.ch-widgets { display: flex; flex-direction: column; gap: 12px; }
.ch-widget {
  display: flex; align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .01) 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .05), inset 0 -1px 1px rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .03);
  will-change: transform, opacity;
}
.ch-widget-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  margin-right: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4);
}
.ch-widget-icon svg { width: 16px; height: 16px; }
.ch-widget-icon--lime {
  background: linear-gradient(135deg, rgba(143, 233, 60, .2), rgba(143, 233, 60, .05));
  border: 1px solid rgba(143, 233, 60, .25);
  color: var(--lime, #8fe93c);
}
.ch-widget-icon--mint {
  background: linear-gradient(135deg, rgba(61, 220, 132, .2), rgba(61, 220, 132, .05));
  border: 1px solid rgba(61, 220, 132, .25);
  color: var(--mint, #3ddc84);
}
.ch-widget-lines { flex: 1; }
.ch-widget-lines i {
  display: block; border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.ch-widget-lines i:first-child { height: 8px; width: 84px; background: #c9d2c4; margin-bottom: 8px; }
.ch-widget-lines i:last-child { height: 6px; width: 52px; background: #4a544a; }
.ch-widget:nth-child(2) .ch-widget-lines i:first-child { width: 66px; }
.ch-widget:nth-child(2) .ch-widget-lines i:last-child { width: 96px; }

.ch-homebar {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 4px;
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ---------- emblemas de vidro flutuantes ---------- */
.ch-badge {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .01) 100%);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 25px 50px -12px rgba(0, 0, 0, .8),
    inset 0 1px 1px rgba(255, 255, 255, .2),
    inset 0 -1px 1px rgba(0, 0, 0, .5);
  will-change: transform, opacity;
  white-space: nowrap;
}
.ch-badge-icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px;
  background: linear-gradient(180deg, rgba(143, 233, 60, .2), rgba(143, 233, 60, .06));
  border: 1px solid rgba(143, 233, 60, .3);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
}
.ch-badge b { display: block; color: #fff; font-size: 13px; letter-spacing: -.01em; }
.ch-badge small { display: block; color: rgba(194, 247, 109, .55); font-size: 11px; font-weight: 500; }
.ch-badge--1 { top: 24px; left: -12px; }
.ch-badge--2 { bottom: 60px; right: -12px; }
@media (min-width: 1024px) {
  .ch-badge--1 { top: 48px; left: -80px; }
  .ch-badge--2 { bottom: 80px; right: -80px; }
}

/* ============================================================
   MODO CINEMA (.ch-armed) — só quando o JS assume
   ============================================================ */
.ch-armed { height: calc(100vh + 340vh); }
/* no celular a mesma história em menos dedo: com a timeline densa,
   260vh bastam — antes eram ~2260px de rolagem, agora ~1730px */
@media (max-width: 1023px) {
  .ch-armed { height: calc(100vh + 260vh); }
}
.ch-armed .ch-pin {
  position: sticky; top: 0;
  height: 100vh;
  padding: 0;
}
.ch-armed .ch-hero-text,
.ch-armed .ch-cta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ch-armed .ch-cta { visibility: hidden; }
.ch-armed .ch-card-layer { position: absolute; inset: 0; margin: 0; }
.ch-armed .ch-card {
  position: absolute;
  max-width: none;
  width: 85%; height: 85%;
  left: 50%; top: 50%;
  /* o translate(-50%,-50%) de centralização vive numa camada própria:
     o JS anima só o translateY do filho */
  transform: translate(-50%, -50%);
}
.ch-armed .ch-card-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
  transform: translateY(120vh);
}
/* Em tela cheia o conteúdo respira dentro de 1340px centrados: sem o
   teto a coluna da marca ia até a borda e o "SMARTFLUX" ficava colado no
   canto. (O teto de 1180px continua valendo só no modo estático.) */
.ch-armed .ch-card-content { height: 100%; max-width: 1340px; }
/* com o cartão em tela cheia no celular, a marca ficaria atrás da barra
   fixa do topo (~140px com a logo) e o texto atrás do CTA fixo do rodapé */
@media (max-width: 1023px) {
  .ch-armed .ch-card-content { padding-top: 140px; padding-bottom: 112px; }
  /* A conta do espaço num iPhone (vh 664): barra do topo ocupa até 141px
     e o CTA fixo começa em ~596 → sobram ~410px úteis. O celular em 42vh
     (279px) + marca + uma linha de texto cabem; com os 380px fixos do
     desktop a última linha era empurrada para baixo do CTA. */
  .ch-armed .ch-mockup-wrap { height: 42vh; }
  .ch-armed .ch-mockup-scale { transform: scale(.5); }
}
@media (max-width: 1023px) and (min-height: 800px) {
  .ch-armed .ch-mockup-scale { transform: scale(.6); }
}

/* estados iniciais (equivalem a p = 0; o JS assume no 1º quadro) */
.ch-armed .ch-line1 { opacity: 0; }
.ch-armed .ch-line2 { clip-path: inset(0 100% 0 0); }
.ch-armed .ch-mockup-fly,
.ch-armed .ch-badge,
.ch-armed .ch-app-head,
.ch-armed .ch-ring-wrap,
.ch-armed .ch-widget,
.ch-armed .ch-copy,
.ch-armed .ch-brand { opacity: 0; }

/* intro dos letreiros — dispara quando a seção entra na tela */
.ch-intro .ch-line1 {
  animation: chLine1 1.5s cubic-bezier(.16, 1, .3, 1) .15s forwards;
}
.ch-intro .ch-line2 {
  animation: chLine2 1.2s cubic-bezier(.83, 0, .17, 1) .55s forwards;
}
@keyframes chLine1 {
  from { opacity: 0; transform: translateY(60px) scale(.85); filter: blur(20px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes chLine2 {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* sob "reduzir movimento" a cena continua (é guiada pela rolagem), mas a
   intro dos letreiros — a única animação autônoma — vira aparição direta */
@media (prefers-reduced-motion: reduce) {
  .ch-armed .ch-line1 { opacity: 1; animation: none; }
  .ch-armed .ch-line2 { clip-path: inset(0 0 0 0); animation: none; }
}

/* fora do modo cinema o cartão não é um retângulo de altura fixa:
   deixa o conteúdo ditar a altura, na ordem letreiro → cartão → CTA */
.ch-section:not(.ch-armed) .ch-pin { display: flex; flex-direction: column; align-items: center; }
.ch-section:not(.ch-armed) .ch-card-inner { display: contents; }
.ch-section:not(.ch-armed) .ch-hero-text { margin-bottom: 46px; }
.ch-section:not(.ch-armed) .ch-card-layer { order: 2; }
.ch-section:not(.ch-armed) .ch-cta { order: 3; margin-top: 64px; }
.ch-section:not(.ch-armed) .ch-card { width: calc(100% - 36px); }
/* sem o JS o anel aparece já preenchido e o contador já com o número */
.ch-section:not(.ch-armed) .ch-ring { stroke-dashoffset: 8; }
/* no estático o conteúdo é limitado a 1180px e a coluna da marca fica com
   ~370px: a fonte de 5vw estourava e o overflow do cartão cortava o nome */
@media (min-width: 1024px) {
  .ch-section:not(.ch-armed) .ch-brand h3 { font-size: clamp(34px, 3.4vw, 50px); }
}