/* =============================================================================
   upl-fluarys / css/style.b267b0ec.css
   Brand Page Fluarys (UPL), simulação. Parte do _template da skill: tokens, reset,
   movimento reduzido, utilitários, cabeçalho e botão são os do boilerplate. O resto
   traduz o KV D_04 e o filme de lançamento: painel claro com onda lateral, foto com o
   galão, pilares com check, selo Powered by Unizeb, círculo "Se tem Fluarys, tá
   fechado", Noto Sans. Campanha clara sempre: o bloco de tema escuro do template saiu;
   as seções escuras (faixa dos pilares, Creators, rodapé) usam a classe .tema-escuro.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. FONTE DA MARCA
   Noto Sans é a fonte da UPL (decisão do DC; arquivos oficiais v2.015 de FONTES UPL),
   em subset latin, servida pelo Blob. O fallback com métrica ajustada segura o CLS.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Noto Sans";
  src: url("../assets/noto-sans-400.79efacd7.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../assets/noto-sans-600.42d88085.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../assets/noto-sans-700.c266f3fc.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../assets/noto-sans-800.a06946e2.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212;
}
/* Noto Sans é mais larga que Arial (xAvgCharWidth 570 contra 441): sem o ajuste o texto
   quebra em outra linha quando a fonte chega. */
@font-face {
  font-family: "Noto Sans fallback";
  src: local("Arial");
  size-adjust: 107%; ascent-override: 100%; descent-override: 27%; line-gap-override: 0%;
}

/* -----------------------------------------------------------------------------
   1. TOKENS
   Bloco do _template com as entradas do projeto: matiz e croma do navy UPL
   (#14232E = oklch(24.8% 0.029 241)), destaque no azul de botão e Noto Sans.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  /* ===== COR: entrada do projeto ===== */
  --marca-h: 241;                /* navy UPL fungicida */
  --marca-c: 0.03;
  --marca: oklch(28% var(--marca-c) var(--marca-h));
  --destaque: #0b5e99;           /* botão: 6.83:1 com branco */
  /* ===== COR: escala neutra ===== */
  --neutro-0: oklch(100% 0 0);
  --neutro-50:  oklch(98.5% 0.004 var(--marca-h));   --neutro-100: oklch(96% 0.006 var(--marca-h));
  --neutro-200: oklch(92% 0.008 var(--marca-h));     --neutro-300: oklch(86% 0.010 var(--marca-h));
  --neutro-400: oklch(72% 0.012 var(--marca-h));     --neutro-500: oklch(60% 0.014 var(--marca-h));
  --neutro-600: oklch(50% 0.016 var(--marca-h));     --neutro-700: oklch(40% 0.014 var(--marca-h));
  --neutro-800: oklch(28% 0.010 var(--marca-h));     --neutro-900: oklch(20% 0.008 var(--marca-h));
  --neutro-950: oklch(14% 0.006 var(--marca-h));
  /* ===== COR: semântica ===== */
  --cor-fundo:       var(--neutro-0);     --cor-superficie:      var(--neutro-50);
  --cor-texto:       #14232e;             --cor-superficie-alta: var(--neutro-100);   /* navy: 16.04:1 no branco */
  --cor-texto-suave: #3e5563;             --cor-texto-inverso:   var(--neutro-0);     /* 7.82:1 no branco, 5.84:1 no painel mais escuro */
  --cor-borda:       var(--neutro-200);   --cor-borda-forte:     var(--neutro-500);
  --cor-marca:       var(--marca);        --cor-marca-contraste: var(--neutro-0);
  --cor-destaque:    var(--destaque);     --cor-destaque-contraste: var(--neutro-0);  /* 6.83:1 */
  --cor-marca-suave: color-mix(in oklab, var(--marca) 10%, var(--cor-fundo));
  --cor-sucesso: oklch(52% 0.13 150);  --cor-erro: oklch(52% 0.19 27);
  --cor-aviso:   oklch(72% 0.15 75);   --cor-foco: var(--destaque);                   /* 6.83:1 */
  /* ===== TIPOGRAFIA ===== */
  --fonte-titulo: "Noto Sans", "Noto Sans fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-texto:  "Noto Sans", "Noto Sans fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-mono:   ui-monospace, "SF Mono", Menlo, monospace;
  --texto-xs:    clamp(0.75rem,   0.729rem + 0.093vw, 0.8125rem);
  --texto-sm:    clamp(0.875rem,  0.854rem + 0.093vw, 0.9375rem);
  --texto-base:  clamp(1rem,      0.958rem + 0.185vw, 1.125rem);
  --texto-lg:    clamp(1.125rem,  1.06rem  + 0.278vw, 1.3125rem);
  --texto-xl:    clamp(1.3125rem, 1.21rem  + 0.463vw, 1.625rem);
  --texto-2xl:   clamp(1.5625rem, 1.38rem  + 0.833vw, 2.125rem);
  --texto-3xl:   clamp(1.875rem,  1.58rem  + 1.3vw,   2.75rem);
  --texto-4xl:   clamp(2.125rem,  1.62rem  + 2.22vw,  3.625rem);
  --texto-5xl:   clamp(2.5rem,    1.75rem  + 3.33vw,  4.75rem);
  --peso-normal: 400;   --peso-medio: 600;   --peso-semi: 600;   --peso-forte: 700;
  --linha-titulo: 1.1;  --linha-curta: 1.3;  --linha-texto: 1.6;
  --track-titulo: -0.02em;  --track-normal: 0;  --track-caixa-alta: 0.08em;
  /* ===== ESPAÇAMENTO ===== */
  --esp-1:  0.25rem;  --esp-2: 0.5rem;  --esp-3: 0.75rem;  --esp-4: 1rem;
  --esp-5:  1.5rem;   --esp-6: 2rem;    --esp-7: 3rem;     --esp-8: 4rem;   --esp-9: 6rem;   --esp-10: 8rem;
  --esp-xs: var(--esp-2);  --esp-sm: var(--esp-4);  --esp-md: var(--esp-6);
  --esp-lg: var(--esp-8);  --esp-xl: var(--esp-9);
  --esp-secao: clamp(3rem, 1.5rem + 6.67vw, 7.5rem);
  /* ===== RAIO E BORDA ===== */
  --raio-sm: 4px;  --raio-md: 8px;  --raio-lg: 16px;  --raio-full: 999px;  --raio: var(--raio-full);
  --borda-fina: 1px;  --borda-media: 2px;  --borda: var(--borda-fina) solid var(--cor-borda);
  /* ===== SOMBRA ===== */
  --sombra-cor: oklch(25% 0.03 var(--marca-h));
  --sombra-sm: 0 1px 2px color-mix(in oklab, var(--sombra-cor) 10%, transparent);
  --sombra-md: 0 2px 4px  color-mix(in oklab, var(--sombra-cor) 8%, transparent),
               0 8px 16px color-mix(in oklab, var(--sombra-cor) 10%, transparent);
  --sombra-lg: 0 4px 8px   color-mix(in oklab, var(--sombra-cor) 8%, transparent),
               0 16px 40px color-mix(in oklab, var(--sombra-cor) 14%, transparent);
  /* ===== LARGURA E CONTAINER ===== */
  --largura-texto: 65ch;
  --largura-max: 1240px;   --largura-larga: 1440px;
  --altura-header: 4.25rem;
  --gutter: clamp(1rem, 0.667rem + 1.48vw, 2rem);
  --bp-sm: 480px;  --bp-md: 768px;  --bp-lg: 1024px;  --bp-xl: 1280px;
  /* ===== MOVIMENTO ===== */
  --dur-1: 120ms;  --dur-2: 200ms;  --dur-3: 320ms;  --dur-4: 500ms;
  --ease-padrao:  cubic-bezier(0.4, 0, 0.2, 1);   --ease-entrada: cubic-bezier(0, 0, 0.2, 1);
  --ease-saida:   cubic-bezier(0.4, 0, 1, 1);     --ease-forte:   cubic-bezier(0.16, 1, 0.3, 1);
  --transicao: var(--dur-2) var(--ease-padrao);
  /* ===== Z-INDEX ===== */
  --z-base: 0;        --z-elevado: 10;   --z-sticky: 100;
  --z-cabecalho: 200; --z-drawer: 300;   --z-overlay: 400;
  --z-modal: 500;     --z-toast: 600;    --z-tooltip: 700;

  /* ===== PROJETO: paleta do KV D_04 (medida na arte) ===== */
  --fl-navy: #14232e;
  --fl-navy-2: #1b3242;
  --fl-azul: #1f6fa6;            /* título sobre painel: 4.03:1 no tom mais escuro do painel, 5.41:1 no branco */
  --fl-azul-forte: #155a8a;      /* texto pequeno em azul (sobretítulo, rótulo) */
  --fl-ciano: #00cfff;           /* luz, anel e check. Texto só sobre navy (8.68:1), nunca sobre claro */
  --fl-ciano-logo: #0fbee7;
  --fl-painel-a: #e2f3fc;  --fl-painel-b: #d3edfa;  --fl-painel-c: #c1e7f9;  --fl-painel-d: #bbe5f7;
  --fl-painel: linear-gradient(180deg, var(--fl-painel-a) 0%, var(--fl-painel-a) 12.5%, var(--fl-painel-b) 37.5%,
               var(--fl-painel-c) 62.5%, var(--fl-painel-d) 75%, var(--fl-painel-d) 100%);
  --fl-claro-suave: #b9cbd6;     /* texto secundário sobre navy: 9.6:1 */
  --fl-brilho: 0 0 22px rgb(0 207 255 / 0.55);
}

/* -----------------------------------------------------------------------------
   2. RESET (igual ao _template)
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* justificado: precisa vencer o display declarado em classe de componente */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: var(--linha-texto);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  line-height: var(--linha-titulo);
  letter-spacing: var(--track-titulo);
  text-wrap: balance;
}
p, li { text-wrap: pretty; }
a { color: inherit; }
[id] { scroll-margin-top: calc(var(--altura-header) + var(--esp-4)); }
:focus-visible { outline: var(--borda-media) solid var(--cor-foco); outline-offset: 3px; }

/* -----------------------------------------------------------------------------
   3. MOVIMENTO REDUZIDO (igual ao _template)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;  /* justificado: precisa vencer o projeto inteiro, inclusive regra de componente */
    animation-iteration-count: 1 !important;  /* justificado: mesmo motivo da linha acima */
    transition-duration: 0.01ms !important;  /* justificado: mesmo motivo da linha acima */
    scroll-behavior: auto !important;  /* justificado: mesmo motivo da linha acima */
  }
}

/* -----------------------------------------------------------------------------
   4. UTILITÁRIOS DE BASE
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}
.secao { padding-block: var(--esp-secao); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; z-index: var(--z-tooltip);
  top: var(--esp-3); left: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-fundo); color: var(--cor-texto);
  border-radius: var(--raio-sm); box-shadow: var(--sombra-md);
  translate: 0 -400%;
}
.skip-link:focus { translate: 0 0; }

/* Seções escuras (Creators, rodapé): troca só a camada semântica. */
.tema-escuro {
  --cor-fundo: var(--fl-navy);
  --cor-texto: var(--neutro-0);
  --cor-texto-suave: var(--fl-claro-suave);
  --cor-borda: rgb(255 255 255 / 0.14);
  --cor-foco: var(--fl-ciano);                 /* 8.68:1 sobre o navy */
  --cor-destaque: var(--fl-ciano);
  --cor-destaque-contraste: var(--fl-navy);    /* 8.68:1 */
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

/* -----------------------------------------------------------------------------
   5. TIPOGRAFIA DE SEÇÃO
   -------------------------------------------------------------------------- */

.sobretitulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl-azul-forte);
}
.tema-escuro .sobretitulo { color: var(--fl-ciano); }

.secao__titulo {
  margin-block-start: var(--esp-3);
  font-size: var(--texto-4xl);
  font-weight: var(--peso-forte);
  color: var(--fl-azul);
}
.tema-escuro .secao__titulo { color: var(--cor-texto); }

.secao__lead {
  margin-block-start: var(--esp-4);
  max-width: 58ch;
  font-size: var(--texto-lg);
  color: var(--cor-texto-suave);
}

/* -----------------------------------------------------------------------------
   6. CABEÇALHO E NAVEGAÇÃO
   Fluarys à esquerda, UPL à direita (como no KV). O menu vira painel abaixo de
   1100px: cinco âncoras e duas marcas não cabem em linha antes disso.
   -------------------------------------------------------------------------- */

.cabecalho {
  position: sticky; top: 0; z-index: var(--z-cabecalho);
  background: rgb(255 255 255 / 0.96);
  border-bottom: var(--borda);
}
@supports (backdrop-filter: blur(8px)) {
  .cabecalho { background: rgb(255 255 255 / 0.86); backdrop-filter: blur(10px); }
}

.cabecalho__interno {
  display: flex; align-items: center; gap: var(--esp-4);
  min-height: var(--altura-header);
}

.cabecalho__marca { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.cabecalho__marca img { width: auto; height: 38px; }
.cabecalho__upl { width: auto; height: 26px; flex: none; }

.nav { display: flex; align-items: center; margin-inline-start: auto; order: 2; }
.cabecalho__upl { order: 1; margin-inline-start: auto; }

.nav__gatilho {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 44px; min-width: 44px;
  padding: var(--esp-2) var(--esp-3);
  font-weight: var(--peso-semi);
  background: none;
  border: var(--borda-fina) solid var(--cor-borda-forte);
  border-radius: var(--raio-full);
  cursor: pointer;
  touch-action: manipulation;
}

.nav__lista {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  margin: 0;
  padding: var(--esp-3) var(--gutter) var(--esp-5);
  list-style: none;
  background: var(--cor-fundo);
  border-bottom: var(--borda);
  box-shadow: var(--sombra-lg);
}
.nav__gatilho[aria-expanded="true"] + .nav__lista { display: grid; gap: var(--esp-1); }

.nav__link {
  display: flex; align-items: center;
  min-height: 44px;
  padding-inline: var(--esp-3);
  border-radius: var(--raio-full);
  text-decoration: none;
  font-weight: var(--peso-semi);
  font-size: var(--texto-sm);
}
.nav__link:hover { background: var(--fl-painel-a); color: var(--fl-azul-forte); }

@media (min-width: 1100px) {
  .nav { order: 1; }
  .cabecalho__upl { order: 2; margin-inline-start: var(--esp-4); }
  .nav__gatilho { display: none; }
  .nav__lista,
  .nav__gatilho[aria-expanded="true"] + .nav__lista {
    display: flex; gap: var(--esp-1);
    position: static;
    padding: 0;
    background: none; border: 0; box-shadow: none;
  }
}

/* -----------------------------------------------------------------------------
   7. BOTÃO
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 48px;
  padding: var(--esp-3) var(--esp-6);
  font-weight: var(--peso-forte);
  line-height: 1;
  text-align: center; text-decoration: none;
  color: var(--cor-destaque-contraste);
  background: var(--cor-destaque);
  border: var(--borda-media) solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transicao), translate var(--transicao), box-shadow var(--transicao);
}
.btn:hover  { background: color-mix(in oklab, var(--cor-destaque) 88%, oklch(0% 0 0)); box-shadow: 0 6px 18px rgb(11 94 153 / 0.28); }
.btn:active { background: color-mix(in oklab, var(--cor-destaque) 78%, oklch(0% 0 0)); translate: 0 1px; }
.btn:focus-visible { outline: var(--borda-media) solid var(--cor-foco); outline-offset: 3px; }

/* Fantasma: navy sobre o painel (11.96:1 no tom mais escuro), borda de 2px no mesmo tom. */
.btn--fantasma {
  color: var(--fl-navy);
  background: transparent;
  border-color: var(--fl-navy);
}
.btn--fantasma:hover { background: rgb(20 35 46 / 0.07); box-shadow: none; }
.btn--fantasma:active { background: rgb(20 35 46 / 0.12); }

/* -----------------------------------------------------------------------------
   8. CÍRCULO "SE TEM FLUARYS, TÁ FECHADO"
   O anel ciano do KV. O tamanho vem de --tam e a letra acompanha o anel por
   container query (cqi); sem suporte, cai no tamanho fixo da linha anterior.
   -------------------------------------------------------------------------- */

.fechado {
  --tam: 12rem;
  container-type: inline-size;
  width: var(--tam);
  aspect-ratio: 1;
  display: grid; align-content: center;
  /* padding em % mede o bloco pai, não o anel: vai em função de --tam */
  padding: 0 calc(var(--tam) * 0.13);
  border: 3px solid var(--fl-ciano);
  border-radius: 50%;
  box-shadow: var(--fl-brilho), inset 0 0 22px rgb(0 207 255 / 0.35);
  color: var(--neutro-0);
  /* véu escuro dentro do anel: mesmo sobre folha clara o branco fica acima de 4.5:1 (pior caso medido 4.6:1) */
  background: radial-gradient(circle at 50% 45%, rgb(9 26 36 / 0.72), rgb(9 26 36 / 0.55) 70%);
  font-size: var(--texto-lg);
  font-weight: var(--peso-normal);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* cqi no próprio container mede o ancestral (ou a viewport), não o anel: a unidade vai nos filhos */
@supports (font-size: 1cqi) { .fechado > * { font-size: 16.5cqi; } }
.fechado span, .fechado strong { display: block; }
.fechado strong { font-weight: var(--peso-forte); }

/* -----------------------------------------------------------------------------
   9. HEROI (KV D_04)
   Mobile: foto do KV em cima (o galão aparece sem rolar), onda horizontal e o
   painel com o texto embaixo. Desktop: painel à esquerda com a onda lateral
   sobre a foto, como no KV.
   -------------------------------------------------------------------------- */

.heroi { position: relative; display: grid; background: var(--fl-painel-a); }

.heroi__foto { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #2d4a2a; container-type: size; }
/* Palco 16:9 que imita object-fit: cover dentro da área da foto (cqw e cqh medem essa área).
   --px e --py fazem o papel do object-position. As cinco linhas do painel ficam presas na foto
   em qualquer largura, e o main.417bd21e.js as faz entrar uma a uma, como no fecho do filme. */
.heroi__palco {
  --px: 0.68; --py: 0.42;
  position: absolute;
  width: max(100cqw, 177.778cqh); height: max(100cqh, 56.25cqw);
  left: calc((100cqw - max(100cqw, 177.778cqh)) * var(--px));
  top: calc((100cqh - max(100cqh, 56.25cqw)) * var(--py));
}
.heroi__kv { position: absolute; inset: 0; width: 100%; height: 100%; }
.heroi__linha, .heroi__brilho { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none; }
.heroi__brilho { mix-blend-mode: screen; filter: blur(5px) brightness(1.6) saturate(1.4); pointer-events: none; }

/* Celular: selo no alto e anel embaixo, os dois à esquerda; o galão fica livre à direita. */
.heroi__selo {
  position: absolute; left: 4%; top: 5%;
  width: clamp(60px, 16vw, 130px);
  filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.35));
}
.heroi__fechado {
  --tam: clamp(104px, 28vw, 200px);
  position: absolute; left: 4%; bottom: 17%;
}

.onda-v { display: none; }
.onda-h {
  position: relative; z-index: 1;
  display: block;
  width: 100%; height: clamp(44px, 12vw, 96px);
  margin-top: calc(-1 * clamp(44px, 12vw, 96px));
  grid-row: 2;
}

.heroi__painel { position: relative; grid-row: 3; background: var(--fl-painel); }
.heroi__conteudo {
  display: grid; gap: var(--esp-4); justify-items: start;
  padding: var(--esp-5) max(var(--gutter), env(safe-area-inset-left)) var(--esp-8);
}
.heroi__marca { display: none; }
.heroi__titulo {
  font-size: clamp(2.25rem, 1.2rem + 2.6vw, 4rem);
  font-weight: var(--peso-forte);
  line-height: 1.04;
  color: var(--fl-azul);
}
.heroi__sub { max-width: 38ch; font-size: var(--texto-lg); color: var(--cor-texto); }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-block-start: var(--esp-2); }
.heroi__assinatura { font-size: var(--texto-lg); color: var(--fl-azul-forte); }
.heroi__assinatura strong { font-weight: var(--peso-forte); }

@media (min-width: 640px) {
  .heroi__foto { aspect-ratio: 16 / 9; }
  .heroi__selo { width: clamp(60px, 11vw, 120px); }
  .heroi__fechado { --tam: clamp(104px, 20vw, 190px); bottom: 12%; }
  .heroi__marca { display: block; width: clamp(200px, 30vw, 300px); }
}

/* Lado a lado a partir de 1200px: abaixo disso a foto fica estreita demais para o galão,
   o painel de vidro e o selo caberem juntos sem um cobrir o outro. */
@media (min-width: 1200px) {
  .heroi {
    --painel: clamp(430px, 35vw, 600px);
    grid-template-columns: var(--painel) 1fr;
    min-height: calc(100vh - var(--altura-header));
    min-height: calc(100svh - var(--altura-header));
    background: none;
  }
  .heroi__foto {
    grid-column: 1 / -1; grid-row: 1;
    aspect-ratio: auto;
    margin-inline-start: var(--painel);
    container-type: size;        /* cqh = 1% da altura do heroi: a onda e o selo crescem com ela */
  }
  .heroi__palco { --px: 0.58; --py: 0.5; }
  /* Selo no vão entre a borda da onda (cerca de 18% da altura do heroi para dentro da foto)
     e o painel de vidro, como no KV. Acima da onda. */
  .heroi__selo { z-index: 3; left: 150px; top: 17%; width: 130px; filter: drop-shadow(0 8px 22px rgb(0 0 0 / 0.4)); }
  @supports (width: 1cqh) {
    .heroi__selo { left: 19.5cqh; width: min(15cqh, 210px); }
  }
  /* abaixo do galão, no canto direito (a foto não tem largura para o anel ficar ao lado dele como no KV) */
  .heroi__fechado { --tam: clamp(170px, 13.5vw, 240px); left: auto; right: 2.5%; bottom: 3%; }
  .heroi__painel { grid-column: 1; grid-row: 1; z-index: 2; display: grid; align-items: center; }
  .onda-h { display: none; }
  .onda-v {
    display: block;
    position: absolute; top: 0; bottom: 0; left: calc(100% - 1px);
    height: 100%; width: auto; aspect-ratio: 419 / 1080;
    pointer-events: none;
  }
  .heroi__conteudo {
    position: relative; z-index: 1;
    padding: var(--esp-7) var(--esp-5) var(--esp-7) clamp(2rem, 4.5vw, 5.5rem);
    gap: var(--esp-4);
  }
  .heroi__marca { width: clamp(200px, 15vw, 270px); }
  .heroi__acoes .btn { padding-inline: var(--esp-5); }
}
@media (min-width: 1440px) {
  .heroi__palco { --px: 0.55; }
}
/* Tablet: foto mais baixa (21:9) para o título e o botão subirem; o recorte segue no painel e no galão. */
@media (min-width: 768px) and (max-width: 1199px) {
  .heroi__foto { aspect-ratio: 21 / 9; }
  .heroi__palco { --px: 0.56; --py: 0.44; }
}
/* Tela baixa (notebook 1280x720, tablet deitado): a assinatura grande sai, o cabeçalho já mostra a marca. */
@media (max-height: 820px) {
  .heroi__marca { display: none; }
}

/* -----------------------------------------------------------------------------
   10. O QUE É FLUARYS
   -------------------------------------------------------------------------- */

.o-que-e__intro { display: grid; gap: var(--esp-6); }
.o-que-e__texto { display: grid; gap: var(--esp-4); max-width: 56ch; font-size: var(--texto-lg); color: var(--cor-texto-suave); }
.o-que-e__texto p:last-child { color: var(--cor-texto); font-weight: var(--peso-semi); }

@media (min-width: 900px) {
  .o-que-e__intro { grid-template-columns: 1.05fr 1fr; gap: var(--esp-8); align-items: end; }
}

/* Filme */
.filme { margin-block-start: var(--esp-8); }
.filme__quadro {
  position: relative;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--fl-navy);
  box-shadow: var(--sombra-lg);
  outline: 1px solid rgb(0 207 255 / 0.35);
  outline-offset: -1px;
}
.filme video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--fl-navy); }
/* Play grande sobre a capa (o JS mostra; sem JS ficam os controles nativos) */
/* fora do título da capa: canto alto no celular, à direita no meio a partir de 640px */
.filme__play {
  position: absolute; right: 4%; top: 8%;
  display: grid; place-items: center;
  width: clamp(52px, 9vw, 104px); aspect-ratio: 1;
  color: var(--fl-navy);
  background: var(--fl-ciano);
  border: 0; border-radius: 50%;
  box-shadow: 0 0 0 10px rgb(0 207 255 / 0.22), var(--fl-brilho);
  cursor: pointer;
  touch-action: manipulation;
  transition: scale var(--transicao), box-shadow var(--transicao);
}
.filme__play:hover { scale: 1.06; box-shadow: 0 0 0 14px rgb(0 207 255 / 0.25), var(--fl-brilho); }
.filme__play svg { width: 42%; height: auto; translate: 6% 0; }
@media (min-width: 640px) { .filme__play { right: 7%; top: 46%; translate: 0 -50%; } }
.filme__legenda {
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); align-items: baseline;
  margin-block-start: var(--esp-3);
  font-size: var(--texto-sm); color: var(--cor-texto-suave);
}
.filme__legenda strong { color: var(--cor-texto); }

/* Razões: palco (galão + painel do KV) preso na tela, razões rolando ao lado */
.razoes { margin-block-start: var(--esp-9); display: grid; gap: var(--esp-5); }

.razoes__palco {
  position: sticky; top: var(--altura-header); z-index: 2;
  padding-block: var(--esp-3);
  background: var(--cor-fundo);
}
/* o texto que rola por baixo do palco entra com um degradê, não cortado seco */
.razoes__palco::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--esp-6);
  background: linear-gradient(var(--cor-fundo), rgb(255 255 255 / 0));
  pointer-events: none;
}
/* largura pela altura disponível: com width e max-height juntos o aspect-ratio deixa de valer */
.palco-janela {
  position: relative;
  width: min(100%, calc(40vh * 4 / 3));
  width: min(100%, calc(40svh * 4 / 3));
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  background: #2d4a2a;
}
.palco { position: absolute; left: 0; top: -8%; width: 100%; aspect-ratio: 10 / 9; }
.palco img { position: absolute; display: block; max-width: none; }
.palco__base { inset: 0; width: 100%; height: 100%; }
.palco__linha { left: var(--x); top: var(--y); width: var(--w); height: auto; }
/* brilho de passagem: cópia da linha criada pelo main.417bd21e.js só quando o GSAP roda */
.palco__brilho {
  left: var(--x); top: var(--y); width: var(--w); height: auto;
  mix-blend-mode: screen;
  filter: blur(5px) brightness(1.6) saturate(1.4);
  pointer-events: none;
}
.palco__fechado { --tam: 30%; position: absolute; right: 4%; bottom: 6%; width: var(--tam); }

.razoes__lista { display: grid; }
.razoes__abertura {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-forte);
  line-height: var(--linha-curta);
  color: var(--fl-azul);
  padding-block: var(--esp-6) var(--esp-4);
}

.razoes__lista { position: relative; }
/* Linha do tempo das razões: cada check é um nó dela; a luz desce conforme a leitura */
.razoes__linha {
  position: absolute; left: 25px; top: var(--esp-10); bottom: var(--esp-8);
  width: 2px; background: var(--cor-borda); border-radius: 2px;
}
.razoes__luz {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--fl-ciano), var(--fl-azul));
  transform-origin: top; transform: scaleY(1);
  box-shadow: 0 0 12px rgb(0 207 255 / 0.6);
}
.razao {
  position: relative;
  display: grid; gap: var(--esp-3); align-content: center;
  min-height: 48vh; min-height: 48svh;
  padding-block: var(--esp-7);
  padding-inline-start: 76px;
}
.razao__check {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; color: var(--fl-azul);
  background: var(--cor-fundo); border-radius: 50%;
}
.razao__check .check__anel { fill: none; stroke: currentColor; stroke-width: 3; }
.razao__check .check__marca { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.razao__titulo { font-size: var(--texto-3xl); font-weight: var(--peso-forte); color: var(--fl-azul); }
.razao__chamada { font-size: var(--texto-xl); font-weight: var(--peso-semi); line-height: var(--linha-curta); max-width: 30ch; }
.razao > p:not(.razao__chamada) { max-width: 52ch; color: var(--cor-texto-suave); }
.razao__fecho { font-size: var(--texto-lg); color: var(--cor-texto); }
.razao--confianca .razao__titulo { font-size: var(--texto-4xl); }

@media (min-width: 1024px) {
  .razoes { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--esp-8); align-items: start; }
  .razoes__palco { top: calc(var(--altura-header) + var(--esp-5)); padding: 0; background: none; }
  .razoes__palco::after { display: none; }
  .palco-janela {
    aspect-ratio: 10 / 9;
    width: min(100%, calc((100vh - var(--altura-header) - var(--esp-8)) * 10 / 9));
    width: min(100%, calc((100svh - var(--altura-header) - var(--esp-8)) * 10 / 9));
  }
  .palco { top: 0; }
  .razoes__abertura { padding-block-start: 0; }
  .razao { min-height: 74vh; min-height: 74svh; }
  .razao:last-child { min-height: 66vh; min-height: 66svh; }
}

/* -----------------------------------------------------------------------------
   12. VIP LOUNGES
   -------------------------------------------------------------------------- */

.vip { background: var(--fl-painel); }
.vip__destaque { display: grid; gap: var(--esp-6); margin-block-start: var(--esp-7); align-items: center; }
.vip__tela {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-lg);
  background: var(--fl-navy);
  box-shadow: var(--sombra-lg);
}
.vip__tela img { width: 100%; height: 100%; object-fit: cover; opacity: 0.78; }
.vip__tela::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgb(20 35 46 / 0) 40%, rgb(20 35 46 / 0.55));
  pointer-events: none;
}
.vip__subtitulo { font-size: var(--texto-2xl); font-weight: var(--peso-forte); color: var(--fl-navy); }
.vip__texto { display: grid; gap: var(--esp-3); }
.vip__texto p { color: var(--cor-texto-suave); max-width: 48ch; }

@media (min-width: 900px) {
  .vip__destaque { grid-template-columns: 1.25fr 1fr; gap: var(--esp-8); }
}

.vip__grade-titulo { margin-block-start: var(--esp-9); font-size: var(--texto-2xl); font-weight: var(--peso-forte); color: var(--fl-navy); }
.vip__grade {
  display: grid; gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-block-start: var(--esp-5);
  padding: 0; list-style: none;
}
.tema {
  display: grid; gap: var(--esp-2); align-content: start;
  padding: var(--esp-5);
  background: rgb(255 255 255 / 0.78);
  border: 1px solid rgb(31 111 166 / 0.18);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}
.tema__status {
  justify-self: start;
  padding: 0.2em 0.7em;
  font-size: var(--texto-xs); font-weight: var(--peso-forte); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fl-azul-forte);
  background: var(--fl-painel-a);
  border-radius: var(--raio-full);
}
.tema__titulo { font-size: var(--texto-xl); font-weight: var(--peso-forte); color: var(--fl-navy); }
.tema p { font-size: var(--texto-sm); color: var(--cor-texto-suave); }

/* Selo "Em breve" e botão de play sobre imagem (VIP e Creators) */
.selo-status {
  position: absolute; left: var(--esp-3); top: var(--esp-3); z-index: 1;
  padding: 0.3em 0.8em;
  font-size: var(--texto-xs); font-weight: var(--peso-forte); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fl-navy);
  background: var(--fl-ciano);
  border-radius: var(--raio-full);
}
.play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  display: grid; place-items: center;
  width: 64px; aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--neutro-0);
  border: 2px solid rgb(255 255 255 / 0.9);
  border-radius: 50%;
  background: rgb(20 35 46 / 0.45);
  box-shadow: var(--fl-brilho);
}
.play svg { translate: 2px 0; }

/* -----------------------------------------------------------------------------
   13. CONTEÚDOS TÉCNICOS
   -------------------------------------------------------------------------- */

.culturas { margin-block-start: var(--esp-7); }
.culturas__abas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.aba {
  min-height: 48px; padding: var(--esp-2) var(--esp-5);
  font-weight: var(--peso-forte);
  color: var(--fl-navy);
  background: var(--neutro-0);
  border: 2px solid var(--fl-navy);
  border-radius: var(--raio-full);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transicao), color var(--transicao);
}
.aba:hover { background: var(--fl-painel-a); }
.aba[aria-selected="true"] { color: var(--neutro-0); background: var(--fl-navy); }

.culturas__painel { padding-block: var(--esp-6) 0; }
.culturas__rotulo { font-size: var(--texto-sm); font-weight: var(--peso-forte); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cor-texto-suave); }
.doencas {
  display: grid; gap: var(--esp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin-block-start: var(--esp-4);
  padding: 0; list-style: none;
}
.doenca {
  display: grid; grid-template-columns: auto 1fr; gap: var(--esp-1) var(--esp-3); align-items: center;
  padding: var(--esp-4) var(--esp-5);
  background: var(--fl-painel-a);
  border: 1px solid rgb(31 111 166 / 0.16);
  border-radius: var(--raio-lg);
}
.doenca__icone { grid-row: span 2; width: 34px; height: 34px; color: var(--fl-azul); }
.doenca__nome { font-weight: var(--peso-forte); line-height: var(--linha-curta); }
.doenca__tag { font-size: var(--texto-xs); font-weight: var(--peso-semi); color: var(--cor-texto-suave); }
.doenca--alvo { background: var(--fl-navy); color: var(--neutro-0); border-color: var(--fl-navy); }
.doenca--alvo .doenca__icone { color: var(--fl-ciano); }
.doenca--alvo .doenca__tag { color: var(--fl-ciano); }

.manejo {
  display: grid; gap: var(--esp-6); align-items: center;
  margin-block-start: var(--esp-9);
  padding: var(--esp-7) var(--esp-6);
  background: var(--fl-painel);
  border-radius: var(--raio-lg);
}
.manejo__texto { display: grid; gap: var(--esp-3); }
.manejo__titulo { font-size: var(--texto-3xl); font-weight: var(--peso-forte); color: var(--fl-azul); max-width: 20ch; }
.manejo__texto > p:not(.sobretitulo) { max-width: 52ch; }
.manejo__nota { font-size: var(--texto-sm); color: var(--cor-texto-suave); }

.programa { display: grid; gap: var(--esp-3); padding: 0; list-style: none; counter-reset: passo; }
.programa__passo {
  position: relative;
  display: grid; gap: var(--esp-1);
  padding: var(--esp-5) var(--esp-6);
  background: rgb(255 255 255 / 0.85);
  border: 2px solid rgb(31 111 166 / 0.25);
  border-radius: var(--raio-lg);
}
.programa__passo--fluarys { background: var(--fl-navy); color: var(--neutro-0); border-color: var(--fl-ciano); box-shadow: var(--fl-brilho); }
.programa__ordem { font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--cor-texto-suave); }
.programa__passo--fluarys .programa__ordem { color: var(--fl-claro-suave); }
.programa__passo strong { font-size: var(--texto-2xl); font-weight: var(--peso-forte); }

@media (min-width: 900px) {
  .manejo { grid-template-columns: 1.3fr 1fr; padding: var(--esp-8); gap: var(--esp-8); }
}

.safra { display: grid; gap: var(--esp-4); margin-block-start: var(--esp-5); }
.safra__etapa { display: grid; gap: var(--esp-2); padding: var(--esp-5) var(--esp-6); border: var(--borda); border-radius: var(--raio-lg); }
.safra__quando { font-size: var(--texto-sm); font-weight: var(--peso-forte); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fl-azul-forte); }
.safra__titulo { font-size: var(--texto-xl); font-weight: var(--peso-forte); }
.safra__etapa > p:last-child { color: var(--cor-texto-suave); }
@media (min-width: 768px) { .safra { grid-template-columns: 1fr 1fr; } }

.registro {
  margin-block-start: var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  font-size: var(--texto-sm);
  color: var(--cor-texto);
  background: var(--fl-painel-a);
  border-left: 4px solid var(--fl-azul);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
}

/* -----------------------------------------------------------------------------
   14. CREATORS (carrossel de scroll-snap nativo)
   -------------------------------------------------------------------------- */

.creators__topo { display: grid; gap: var(--esp-5); align-items: end; }
@media (min-width: 900px) { .creators__topo { grid-template-columns: 1fr auto; } }

.carrossel__controles { display: flex; gap: var(--esp-2); }
.seta {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  color: var(--neutro-0);
  background: transparent;
  border: 2px solid rgb(255 255 255 / 0.55);
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transicao), border-color var(--transicao);
}
.seta:hover { background: rgb(0 207 255 / 0.14); border-color: var(--fl-ciano); }

.carrossel {
  --recuo: max(var(--gutter), calc((100% - var(--largura-max)) / 2 + var(--gutter)));
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 68vw, 290px);
  gap: var(--esp-5);
  margin-block-start: var(--esp-7);
  padding-inline: var(--recuo);
  padding-block-end: var(--esp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--recuo);
  overscroll-behavior-x: contain;
  scrollbar-color: rgb(0 207 255 / 0.6) transparent;
}
.carrossel > * { scroll-snap-align: start; }
.carrossel:focus-visible { outline-offset: -3px; }

.video-card { display: grid; gap: var(--esp-2); align-content: start; }
.video-card__capa {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-block-end: var(--esp-2);
  border-radius: var(--raio-lg);
  background: var(--fl-navy-2);
  border: 1px solid rgb(0 207 255 / 0.25);
}
.video-card__capa img { width: 100%; height: 100%; object-fit: cover; }
.video-card__capa::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(20 35 46 / 0) 55%, rgb(20 35 46 / 0.55));
}
.video-card__titulo { font-size: var(--texto-lg); font-weight: var(--peso-forte); }
.video-card p { font-size: var(--texto-sm); color: var(--cor-texto-suave); }

/* -----------------------------------------------------------------------------
   15. FECHO
   -------------------------------------------------------------------------- */

.fechamento { padding-block: var(--esp-secao); background: var(--fl-painel); overflow: hidden; }
.fechamento__interno { display: grid; gap: var(--esp-7); align-items: center; }
.fechamento__texto { display: grid; gap: var(--esp-6); justify-items: center; text-align: center; }
.fechamento__circulo {
  --tam: clamp(15rem, 52vw, 22rem);
  color: var(--fl-navy);
  background: radial-gradient(circle at 50% 45%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.25) 72%);
  text-align: left;
  letter-spacing: -0.02em;
}
.fechamento__assinatura { display: grid; gap: var(--esp-3); justify-items: center; }
.fechamento__assinatura img { width: clamp(200px, 28vw, 280px); }
.fechamento__assinatura p { font-size: var(--texto-xl); color: var(--fl-azul-forte); }
.fechamento__foto {
  overflow: hidden;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  aspect-ratio: 4 / 3;
}
.fechamento__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 45%; transform: scale(1.45); transform-origin: 74% 42%; }

@media (min-width: 900px) {
  .fechamento__interno { grid-template-columns: 1fr 1.25fr; gap: var(--esp-8); }
  .fechamento__foto { aspect-ratio: 5 / 4; }
}

/* -----------------------------------------------------------------------------
   16. RODAPÉ
   -------------------------------------------------------------------------- */

.rodape { padding-block: var(--esp-8) var(--esp-6); font-size: var(--texto-sm); }
.rodape__topo { display: grid; gap: var(--esp-5); align-items: center; }
.rodape__upl { width: auto; height: 40px; }
.rodape__lista { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-5); padding: 0; list-style: none; }
.rodape__lista a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cor-texto); text-underline-offset: 4px; }
.rodape__lista a:hover { color: var(--fl-ciano); }
@media (min-width: 768px) { .rodape__topo { grid-template-columns: auto 1fr; } .rodape__lista { justify-content: flex-end; } }

/* Aviso legal do KV: sempre legível, nunca anima. */
.atencao {
  margin-block-start: var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  font-size: var(--texto-xs);
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--neutro-0);
  border: 2px solid var(--neutro-0);
}
.atencao strong { display: block; margin-block-end: var(--esp-1); font-size: var(--texto-xl); font-weight: 800; letter-spacing: 0.02em; }
@media (min-width: 768px) {
  .atencao { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-5); align-items: center; }
  .atencao strong { margin: 0; font-size: var(--texto-2xl); }
}
.rodape__nota { margin-block-start: var(--esp-5); color: var(--cor-texto-suave); }

/* -----------------------------------------------------------------------------
   17. MOVIMENTO (as peças que o main.417bd21e.js anima; sem JS tudo aparece no estado final)
   -------------------------------------------------------------------------- */

/* Faixa dos pilares: corre na horizontal, pausa fora da tela e no botão */
.faixa {
  position: relative;
  padding-block: var(--esp-4);
  color: var(--neutro-0);
  background: var(--fl-navy);
  border-block: 1px solid rgb(0 207 255 / 0.35);
  overflow: hidden;
}
.faixa__janela { overflow: hidden; }
.faixa__trilho { display: flex; width: max-content; will-change: transform; }
.faixa__item {
  display: inline-flex; align-items: center; gap: var(--esp-3);
  padding-inline-end: var(--esp-8);
  font-size: var(--texto-2xl); font-weight: var(--peso-forte); letter-spacing: -0.01em;
  white-space: nowrap;
}
.faixa__check { width: 1.15em; height: 1.15em; flex: none; filter: drop-shadow(0 0 6px rgb(0 207 255 / 0.7)); }
.faixa__check circle { fill: rgb(0 207 255 / 0.12); stroke: var(--fl-ciano); stroke-width: 3; }
.faixa__check path { fill: none; stroke: var(--fl-ciano); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.faixa__pausa {
  position: absolute; right: var(--esp-3); top: 50%; translate: 0 -50%;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--neutro-0);
  background: rgb(20 35 46 / 0.85);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 50%;
  cursor: pointer;
}
.faixa__pausa[aria-pressed="true"] svg { display: none; }
.faixa__pausa[aria-pressed="true"]::before {
  content: ""; width: 0; height: 0; margin-inline-start: 3px;
  border-block: 7px solid transparent; border-inline-start: 11px solid currentColor;
}

/* Letreiro: título entra palavra por palavra, como o lettering do filme */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-block-end: 0.1em; margin-block-end: -0.1em; }
.palavra__in { display: inline-block; }

/* Anel do fecho: o círculo se fecha quando a seção chega ("tá fechado"). Só o anel do fecho
   precisa de relative: o do topo e o do palco já são absolutos. */
.fechamento__circulo { position: relative; }
.fechado__anel, .fechado__hud { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); max-width: none; pointer-events: none; }
.fechado__anel { display: none; rotate: -90deg; }
.fechado__anel circle { fill: none; stroke: var(--fl-ciano); stroke-width: 1.6; stroke-linecap: round; }
.fechado__check {
  position: absolute; right: 2%; top: 4%;
  width: 22%; height: auto; max-width: none;
  filter: drop-shadow(0 0 8px rgb(0 207 255 / 0.75));
}
.fechado__check circle { fill: var(--fl-navy); stroke: var(--fl-ciano); stroke-width: 3; }
.fechado__check path { fill: none; stroke: var(--fl-ciano); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
/* com o JS rodando, quem desenha o anel é o SVG */
.anel-animado { border-color: transparent; }
.anel-animado .fechado__anel { display: block; }
/* HUD pontilhado em volta do anel do topo, como o círculo de leitura do KV; gira devagar */
.fechado__hud { inset: -12%; width: 124%; height: 124%; }
.fechado__hud circle { fill: none; stroke: rgb(0 207 255 / 0.75); stroke-width: 1; stroke-dasharray: 1.5 5.5; }

/* Botão: brilho que passa no hover */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  translate: -120% 0;
  transition: translate 0.7s var(--ease-forte);
}
.btn:hover::after { translate: 120% 0; }

/* Inclinação 3D no hover (só ponteiro fino, pelo main.417bd21e.js) */
.vip__destaque, .video-card { perspective: 1000px; }

/* Carrossel arrastável com o mouse */
@media (pointer: fine) {
  .carrossel { cursor: grab; }
  .carrossel.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
}

/* Cursor "rede de luz no campo": anel que segue o mouse e a rede desenhada no canvas.
   O cursor do sistema continua visível; os dois são criados pelo main.417bd21e.js. */
.cursor-rede {
  position: fixed; inset: 0; z-index: var(--z-toast);
  width: 100%; height: 100%;
  pointer-events: none;
}
.cursor-anel {
  position: fixed; left: 0; top: 0; z-index: var(--z-tooltip);
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  display: grid; place-items: center;
  color: #ecfdff;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgb(0 207 255 / 0.12);
  box-shadow: 0 0 0 1px rgb(0 207 255 / 0.7), 0 0 18px rgb(0 207 255 / 0.75), inset 0 0 10px rgb(0 207 255 / 0.4);
  pointer-events: none;
  will-change: transform;
}
.cursor-anel.claro { color: var(--fl-azul-forte); background: rgb(31 111 166 / 0.08); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.8), 0 0 12px rgb(31 111 166 / 0.35); }
.cursor-anel svg { width: 56%; height: auto; }
.cursor-anel svg path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }