/* ==========================================================================
   MayFlow — sistema tipográfico e seções vivas (página comercial)
   Display: Bricolage Grotesque (peso médio, entrelinha justa)
   Texto:   Inter
   Destaque: Instrument Serif itálico + degradê verde → turquesa → azul,
             só em palavras estratégicas (<em class="tx">).
   ========================================================================== */

:root {
  --tx-grad-escuro: linear-gradient(92deg, #19c7c1 0%, #2fd28a 45%, #5ce1e6 75%, #6aa8ff 100%);
  --tx-grad-claro: linear-gradient(92deg, #0b8f8a 0%, #0f8f5c 45%, #1a6df0 100%);
  --tx-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
}

/* ---------- títulos ---------- */
.sec-head h2,
section h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.9vw, 3.3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.on-dark h2 { color: #f2f8ff; }

/* palavra-chave: itálico serifado com degradê */
h1 .tx,
h2 .tx {
  display: inline;
  padding-right: 0.06em;
  font-family: var(--tx-serif);
  font-size: 1.12em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: var(--tx-grad-claro);
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.on-dark h2 .tx,
.dark h2 .tx,
.cta h2 .tx {
  background-image: var(--tx-grad-escuro);
  filter: drop-shadow(0 0 18px rgba(25, 199, 193, 0.28));
}

/* subtítulo da MAY: segunda linha mais leve */
#may h2 span:not(.tx) {
  display: block;
  margin-top: 6px;
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: rgba(219, 233, 247, 0.72);
}

/* ---------- etiqueta (eyebrow) ---------- */
.eyebrow {
  gap: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, #2fd28a, #19c7c1);
}

.center .eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, #19c7c1, #2fd28a);
}

/* ---------- texto de apoio: curto e confortável ---------- */
.sec-head { max-width: 820px; }

.sec-head p {
  max-width: 58ch;
  font-size: 1.06rem;
  line-height: 1.65;
}

.sec-lead {
  font-size: clamp(1.12rem, 1.5vw, 1.3rem) !important;
  line-height: 1.5 !important;
  color: inherit;
}

.on-dark .sec-lead { color: #dbe9f7 !important; }

.sec-detalhe {
  max-width: 52ch !important;
  margin-top: 12px !important;
  font-size: 0.95rem !important;
  color: rgba(219, 233, 247, 0.62) !important;
}

/* ---------- seção viva: "O ponto central" ---------- */
.sec-viva {
  overflow: hidden;
  isolation: isolate;
}

/* luz que se desloca devagar pelo fundo */
.sec-viva::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(30% 35% at var(--lx, 20%) 30%, rgba(25, 199, 193, 0.16), transparent 70%),
    radial-gradient(28% 32% at calc(100% - var(--lx, 20%)) 80%, rgba(42, 125, 225, 0.16), transparent 70%);
  pointer-events: none;
}

.sec-circuito {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

.sec-viva .wrap { position: relative; }

/* painéis com leve profundidade */
.sec-viva .panel {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.24, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

@media (hover: hover) {
  .sec-viva .panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -34px rgba(25, 199, 193, 0.45);
  }
}

/* ---------- entrada dos títulos ao rolar ---------- */
@property --lx { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@keyframes tx-luz { 0%, 100% { --lx: 18%; } 50% { --lx: 62%; } }
@keyframes tx-brilho { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: no-preference) {
  .sec-viva::before { animation: tx-luz 22s ease-in-out infinite; }

  /* a palavra-chave "acende" uma vez quando o bloco entra na tela */
  .reveal h2 .tx { background-position: 100% 0; }
  .reveal.in h2 .tx { animation: tx-brilho 1.6s cubic-bezier(0.22, 0.8, 0.24, 1) 0.35s both; }
}

@media (max-width: 760px) {
  .sec-head h2,
  section h2 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); }

  .sec-lead { font-size: 1.08rem !important; }
}

/* ==========================================================================
   Ecossistema MAY (composição recuperada da versão anterior)
   ========================================================================== */
.eco {
  overflow: hidden;
  isolation: isolate;
  color: #eaf4ff;
  padding-top: clamp(64px, 7vw, 104px);
  background:
    radial-gradient(45% 50% at 50% 58%, rgba(25, 199, 193, 0.12), transparent 70%),
    radial-gradient(40% 40% at 10% 20%, rgba(47, 210, 138, 0.06), transparent 70%),
    linear-gradient(180deg, #02070f 0%, #04101f 50%, #061427 100%);
}

.eco .sec-head { margin-bottom: 8px; }
.eco .sec-head p { margin-left: auto; margin-right: auto; }

.eco .scene {
  width: min(860px, 100%);
  margin: 0 auto;
  aspect-ratio: 1 / 0.82;
}

.eco .scene canvas {
  left: -22%;
  top: -12%;
  width: 144%;
  height: 124%;
}

.eco .core { width: 30%; }

.eco__aneis {
  position: absolute;
  inset: -16%;
  width: 132%;
  height: 132%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(92, 225, 230, 0.55));
  pointer-events: none;
}

.eco__anel { transform-origin: 200px 200px; transform-box: view-box; }

.eco .scene-cap { right: 0; left: 0; bottom: -6px; text-align: center; }

@keyframes eco-gira { to { transform: rotate(360deg); } }
@keyframes eco-gira-inv { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .eco__anel--a { animation: eco-gira 40s linear infinite; }
  .eco__anel--b { animation: eco-gira-inv 26s linear infinite; }
}

@media (max-width: 760px) {
  .eco .scene { aspect-ratio: 1 / 1.05; }
  .eco .scene canvas { left: -6%; width: 112%; }
  .eco .core { width: 38%; }
}