/* CI9 Eventos: style.css, tokens em clientes/ci9-eventos/DESIGN.md */

:root {
  --cor-fundo: #000000;
  --cor-tinta: #FFFFFF;
  --cor-acento: #FF2D8F;
  --cor-acento-escuro: #C21F70;
  --cor-cinza: #5A5F66;
  --cor-linha: #C8CCD1;
  --cor-superficie: #1A1D21;
  --cor-whatsapp: #25D366;

  /* cortina: fundo listrado com luz, no Tenity a luz muda de matiz por seção
     (vermelho/azul/verde); pedido explícito do Daniel pra CI9: luz sempre ROSA,
     só a posição/intensidade muda com o scroll (ver .cortina + site.js) */
  --cortina-cor: #FF2D8F;

  --fonte-display: 'Unbounded', 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --fonte-apoio: 'IBM Plex Sans', 'Inter', 'Segoe UI', Arial, sans-serif;

  --largura-max: 1180px;
  --largura-max-l: 1360px;
  --raio: 10px;
  --sombra: 0 20px 60px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  font-family: var(--fonte-apoio);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--cor-tinta); }
p.apoio, .texto-cinza { color: var(--cor-linha); }

a { color: var(--cor-acento); text-decoration: none; }
a:hover { color: var(--cor-acento-escuro); }

.acento { color: var(--cor-acento); }

.container {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 64px 0; }
section.compacta { padding: 40px 0; }

/* textura de fundo: motif hexagonal em baixo contraste, nunca central */
.textura-hexagono {
  background-image: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.93)), url('../img/logo/simbolo-hexagono.jpg');
  background-size: cover;
  background-position: center;
}

/* marca d'água discreta: mesmo símbolo hexagonal do hero/mega-menu, em baixo
   contraste, sempre num canto (nunca central), pra não competir com o texto.
   Variantes de cor e posição alternam entre seções pra não ficar repetitivo. */
.marca-dagua { position: relative; overflow: hidden; }
.marca-dagua::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  background: url('../img/logo/simbolo-hexagono.jpg') center/cover no-repeat;
  opacity: .14;
  pointer-events: none;
}
.marca-dagua--branco::before { filter: grayscale(1) brightness(1.7) contrast(1.1); }
.marca-dagua--rosa::before { filter: grayscale(1) sepia(1) hue-rotate(300deg) saturate(6) brightness(1.15); }
/* pra painel claro: a foto já é escura por natureza, sem precisar clarear.
   dark-on-white já dá o contraste sutil sozinho, só desatura a cor. */
.marca-dagua--cinza::before { filter: grayscale(1); opacity: .08; }
.marca-dagua--sup-dir::before { top: -110px; right: -110px; }
.marca-dagua--inf-esq::before { bottom: -110px; left: -110px; transform: scaleX(-1); }
.marca-dagua--inf-dir::before { bottom: -110px; right: -110px; transform: scaleX(-1); }
.marca-dagua--sup-esq::before { top: -110px; left: -110px; }
@media (max-width: 720px) {
  .marca-dagua::before { width: 300px; height: 300px; opacity: .05; }
}

.fundo-superficie { background: var(--cor-superficie); }

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,.96);
  border-bottom: 1px solid rgba(200,204,209,.14);
}

.header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.header__logo img { height: 40px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav__link {
  color: var(--cor-tinta);
  font-family: var(--fonte-display);
  font-size: .95rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 6px;
  white-space: nowrap;
}
.nav__link:hover { color: var(--cor-acento); background: rgba(255,45,143,.08); }

.nav__item { position: relative; }

.nav__drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--cor-superficie);
  border: 1px solid rgba(200,204,209,.16);
  border-radius: var(--raio);
  padding: 8px;
  box-shadow: var(--sombra);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__drop a {
  display: block;
  color: var(--cor-tinta);
  font-size: .9rem;
  padding: 10px 12px;
  border-radius: 6px;
}
.nav__drop a:hover { background: rgba(255,45,143,.1); color: var(--cor-acento); }

.header__acoes { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  width: 42px;
  height: 42px;
  color: var(--cor-tinta);
  font-size: 1.3rem;
  cursor: pointer;
}

.nav .nav__cta-mobile { display: none; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primario {
  background: var(--cor-acento);
  color: #0A0A0A;
}
.btn-primario:hover { background: var(--cor-acento-escuro); color: var(--cor-tinta); }

.btn-fantasma {
  background: transparent;
  border-color: var(--cor-linha);
  color: var(--cor-tinta);
}
.btn-fantasma:hover { border-color: var(--cor-acento); color: var(--cor-acento); }

.btn-whatsapp {
  background: var(--cor-whatsapp);
  color: #04250f;
}
.btn-whatsapp:hover { background: #1fb857; color: #04250f; }

.btn-sm { padding: 9px 16px; font-size: .85rem; }

/* ---------- hero ---------- */
.hero {
  padding: 96px 0 72px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,45,143,.16), transparent 45%),
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.86)),
    url('../img/logo/background-glow.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
}
.hero--simples {
  padding: 64px 0 48px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.92)),
    url('../img/logo/simbolo-hexagono.jpg');
  background-size: cover;
  background-position: center;
}
/* ---------- hero das páginas internas (sistema Tenity propagado) ----------
   Substitui .hero--simples nas 16 páginas: mesmo texto/CTA de sempre, fundo
   cortina (listras + glow rosa) no lugar do gradiente com hexágono estático.
   Usar como class="hero-pagina cortina cortina--hero" no lugar de "hero--simples". */
.hero-pagina { padding: 64px 0 48px; color: var(--cor-tinta); }
.hero__eyebrow {
  display: inline-block;
  font-family: var(--fonte-display);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-acento);
  border: 1px solid rgba(255,45,143,.4);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero__lead {
  max-width: 720px;
  margin: 20px auto 32px;
  font-size: 1.1rem;
  color: var(--cor-linha);
}
.hero__cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.hero__selo {
  margin-top: 22px;
  font-size: .88rem;
  color: var(--cor-cinza);
}

/* ---------- hero de página de pessoa (foto + texto lado a lado) ---------- */
.hero-pessoa { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.hero-pessoa__texto { flex: 1 1 380px; }
.hero-pessoa__texto .hero__lead { margin: 20px 0 32px; max-width: 560px; }
.hero-pessoa__foto { flex: 0 0 260px; }
.hero-pessoa__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; display: block; }
@media (max-width: 720px) {
  .hero-pessoa { flex-direction: column; text-align: center; }
  .hero-pessoa__texto .hero__lead { margin: 20px auto 0; }
  .hero-pessoa__foto { flex-basis: auto; width: 220px; }
}

/* ---------- foto no corpo do texto, quebrando o bloco (página de pessoa) ---------- */
.foto-corpo { margin: 32px 0; border-radius: 20px; overflow: hidden; }
.foto-corpo img { width: 100%; height: auto; display: block; }
.foto-corpo__legenda { font-size: .82rem; color: var(--cor-cinza); margin: 10px 0 0; }

/* ---------- breadcrumb ---------- */
.breadcrumb {
  padding: 18px 0 0;
  margin-top: 96px;
  font-size: .82rem;
  color: var(--cor-cinza);
}
@media (max-width: 900px) {
  .breadcrumb { margin-top: 84px; }
}
.breadcrumb a { color: var(--cor-cinza); }
.breadcrumb a:hover { color: var(--cor-acento); }
.breadcrumb__sep { margin: 0 6px; }

/* ---------- cards ---------- */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--cor-superficie);
  border: 1px solid rgba(200,204,209,.12);
  border-radius: var(--raio);
  padding: 26px;
}
.card h3 { color: var(--cor-tinta); }

.card-servico {
  display: block;
  background: var(--cor-superficie);
  border: 1px solid rgba(200,204,209,.12);
  border-radius: var(--raio);
  padding: 24px;
  transition: border-color .15s ease, transform .15s ease;
}
.card-servico:hover { border-color: var(--cor-acento); transform: translateY(-3px); }
.card-servico h3 { color: var(--cor-tinta); margin-bottom: 8px; }
.card-servico p { color: var(--cor-linha); margin-bottom: 0; font-size: .92rem; }

.card-case {
  display: block;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cor-superficie);
  border: 1px solid rgba(200,204,209,.12);
  transition: border-color .15s ease, transform .15s ease;
}
.card-case:hover { border-color: var(--cor-acento); transform: translateY(-3px); }
.card-case__img { aspect-ratio: 4/3; overflow: hidden; background: #0d0f11; }
.card-case__img img { width: 100%; height: 100%; object-fit: cover; }
.card-case__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cor-cinza);
  font-family: var(--fonte-display);
  font-size: .85rem;
  text-align: center;
  padding: 10px;
}
.card-case__corpo { padding: 18px 20px; }
.card-case__corpo h3 { margin-bottom: 6px; font-size: 1.05rem; }
.card-case__corpo p { color: var(--cor-linha); font-size: .88rem; margin-bottom: 0; }

/* ---------- lista essencial ---------- */
.lista-essencial { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lista-essencial li {
  padding-left: 26px;
  position: relative;
  color: var(--cor-linha);
}
.lista-essencial li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  background: var(--cor-acento);
  border-radius: 2px;
  transform: rotate(45deg);
}
.lista-essencial strong { color: var(--cor-tinta); }

/* ---------- faq ---------- */
.faq-item {
  border-bottom: 1px solid rgba(200,204,209,.14);
  padding: 22px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { margin-bottom: 10px; }
.faq-item p { color: var(--cor-linha); }

/* ---------- cta final ---------- */
.cta-final {
  text-align: center;
  padding: 64px 0;
  background: var(--cor-superficie);
  border-top: 1px solid rgba(255,45,143,.2);
}
.cta-final h2 { max-width: 640px; margin: 0 auto 24px; }

/* ---------- footer ---------- */
.footer {
  background: #030303;
  border-top: 1px solid rgba(200,204,209,.12);
  padding: 48px 0 20px;
}
.footer__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-bottom: 36px;
}
.footer__logo img { width: 150px; height: auto; margin-bottom: 18px; }
.footer__col h3 {
  font-family: var(--fonte-display);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cor-cinza);
  margin-bottom: 14px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer__col a { color: var(--cor-linha); font-size: .92rem; }
.footer__col a:hover { color: var(--cor-acento); }
.footer__col a.footer__contato-icone { display: inline-flex; align-items: center; gap: 10px; }
.footer__col a.footer__contato-icone .icone-svg { flex-shrink: 0; }
.footer__col li.footer__redes { display: flex; align-items: center; gap: 18px; }
.footer__col li.footer__redes a.footer__contato-icone { display: inline-flex; }

/* ---------- ícones inline (whatsapp, instagram, facebook, seta) ---------- */
.icone-svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.btn .icone-svg { margin-right: 2px; }
.footer__col p { color: var(--cor-linha); font-size: .92rem; }

.dol-rodape {
  border-top: 1px solid rgba(200,204,209,.12);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.dol-rodape__esq p { margin: 0 0 10px; font-size: .82rem; color: var(--cor-cinza); }
.dol-legal { display: flex; gap: 10px; flex-wrap: wrap; }
.dol-rodape .dol-legal a { font-size: .82rem; color: var(--cor-cinza); }
.dol-assinatura { margin: 0; font-size: .82rem; color: var(--cor-cinza); }
.dol-assinatura a { color: var(--cor-cinza); }
.dol-assinatura a:hover { color: var(--cor-acento); }

/* ---------- utilitários ---------- */
.centro { text-align: center; }
.mt-0 { margin-top: 0; }
.max-conteudo { max-width: 760px; margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; }
  .header__acoes .btn-whatsapp.btn-sm { display: none; }
  .nav--aberto .nav__cta-mobile { display: flex; margin-top: 12px; justify-content: center; }

  .nav.nav--aberto {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 70px;
    left: 0; right: 0;
    bottom: 0;
    background: #050505;
    padding: 16px;
    overflow-y: auto;
    gap: 4px;
  }
  .nav--aberto .nav__item { width: 100%; }
  .nav--aberto .nav__link { display: block; width: 100%; padding: 14px; }
  .nav--aberto .nav__drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    display: none;
    margin: 4px 0 8px 12px;
  }
  .nav--aberto .nav__item.aberto .nav__drop { display: block; }

  /* mega-menu no mobile: mesmo toque-pra-abrir do .nav__drop, sem o painel
     branco full-width (isso é só desktop, ver .mega-menu min-width:1200px) */
  .nav--aberto .mega-menu {
    position: static;
    grid-template-columns: 1fr;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 0 8px 12px;
    display: none;
    background: transparent;
  }
  .nav--aberto .nav__item.aberto .mega-menu { display: grid; }
  .nav--aberto .mega-menu__lista { grid-template-columns: 1fr; gap: 2px; }
  .nav--aberto .mega-menu__lista a { color: var(--cor-tinta); border-bottom-color: rgba(255,255,255,.14); padding: 8px 0; font-size: .92rem; }
  .nav--aberto .mega-menu__forma { display: none; }
  .header--capsule .nav--aberto .mega-menu__lista a { color: #0A0A0A; border-bottom-color: rgba(0,0,0,.1); }
}

@media (max-width: 600px) {
  section { padding: 44px 0; }
  .hero { padding: 64px 0 44px; }
  .footer__grade { grid-template-columns: 1fr; }
  .dol-rodape { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   SISTEMA TENITY, estrutura, motif e animação replicados do site de
   referência (tenity.com), a pedido explícito do Daniel. Documentado em
   clientes/ci9-eventos/DESIGN.md. Classes novas, não mexem no que já
   funciona nas outras 16 páginas (header/footer clássico continuam intactos
   até essa estrutura ser auditada e propagada).
   ========================================================================= */

.container--l { max-width: var(--largura-max-l); margin: 0 auto; padding: 0 24px; }

/* ---------- header cápsula flutuante ---------- */
.header--capsule {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  padding: 14px 0;
}
.header--capsule .header__barra {
  position: relative;
  background: var(--cor-tinta);
  color: #0A0A0A;
  border-radius: 999px;
  box-shadow: var(--sombra);
  padding: 10px 10px 10px 24px;
}
.header--capsule .header__logo img { height: 44px; }
.header--capsule .nav__link { color: #0A0A0A; font-size: .9rem; }
.header--capsule .nav__link:hover { color: var(--cor-acento); background: rgba(255,45,143,.08); }
.header--capsule .menu-toggle { color: #0A0A0A; }
@media (max-width: 900px) {
  .header--capsule .nav--aberto { background: var(--cor-tinta); top: 66px; }
  .header--capsule .nav--aberto .nav__link { color: #0A0A0A; }
}

/* ---------- botão pill com círculo-seta (componente real do Tenity: .button + .buttonarrow) ---------- */
.btn__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex-shrink: 0;
}
.btn__seta::before {
  content: '';
  width: .4em;
  height: .4em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
}
.btn-primario .btn__seta, .btn-whatsapp .btn__seta { border-color: currentColor; }

/* ---------- cortina: fundo listrado com luz rosa em parallax de scroll ----------
   Mesma técnica visual do Tenity (listras verticais + luz colorida que se move).
   Diferença combinada com o Daniel: no Tenity a luz muda de matiz por seção
   (vermelho/azul/verde); na CI9 a luz é SEMPRE rosa #FF2D8F, só a posição e a
   intensidade mudam com o scroll, reconstrução funcional em JS puro
   (assets/js/site.js, cortinaParallax), não é o mecanismo original do Tenity
   (Lenis + provavelmente GSAP ScrollTrigger, não confirmado no código-fonte). */
.cortina {
  position: relative;
  background-color: #000;
  overflow: hidden;
  isolation: isolate;
  --cortina-x: 70%;
  --cortina-y: -20%;
  --cortina-intensidade: .38;
}
.cortina::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);
  z-index: 0;
}
.cortina::after {
  content: '';
  position: absolute;
  top: var(--cortina-y);
  left: var(--cortina-x);
  width: 65%;
  height: 160%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--cortina-cor) 0%, transparent 70%);
  opacity: var(--cortina-intensidade);
  filter: blur(60px);
  z-index: 0;
  transition: opacity .2s linear;
}
.cortina > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .cortina::after { transition: none; }
}

/* ---------- palavra-pílula dentro de título (componente real: .title .shape) ---------- */
.pilula-palavra {
  display: inline-block;
  background: var(--cor-acento);
  color: #0A0A0A;
  border-radius: 999px;
  padding: .04em .5em .08em;
  line-height: 1.2;
}

/* ---------- motivo geométrico decorativo, o octógono real da CI9, não o "D" do Tenity ----------
   O Daniel foi explícito: o "D" (meio-círculo assimétrico) não faz sentido pra CI9.
   No lugar, mesma função decorativa (traço grande ao lado do menu sticky) com o
   símbolo já aprovado no material de rebranding do Gabriel (hexágono espiral 3D),
   não uma forma nova inventada. */
/* O arquivo real do símbolo (rebranding do Gabriel) é um render 3D com fundo escuro
   próprio, não existe versão isolada/transparente nos assets aprovados (ver
   DESIGN.md). Em vez de forçar uma silhueta solta por cima de fundo claro
   (exigiria fabricar um recorte que não existe), ele entra emoldurado num cartão
   escuro, o mesmo padrão que o próprio Tenity usa pros blocos de stat/foto
   dentro da seção branca "the difference" (ver tela-05/09 das capturas). */
.forma-octo {
  display: none;
  position: sticky;
  top: 150px;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  background: #000;
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--sombra);
}
.forma-octo img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 1200px) { .forma-octo { display: block; } }

/* ---------- hero Tenity ----------
   Fundo oficial do rebranding (hexágono com glow rosa, já usado antes em
   dev.ci9eventos.com.br, pedido do Daniel pra trazer de volta só nesta seção).
   Compõe com a cortina listrada por trás; a luz sintética do JS
   (cortinaParallax, .cortina::after) fica desligada aqui pra não duplicar o
   glow que a imagem já traz. */
.hero-tenity {
  padding: 168px 0 80px;
  color: var(--cor-tinta);
  background-image: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7)), url('../img/logo/background-glow.jpg');
  background-size: cover;
  background-position: right center;
}
.hero-tenity.cortina::before { opacity: .5; }
.hero-tenity.cortina::after { display: none; }
.hero-tenity__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3.8rem);
  line-height: 1.08;
  max-width: 16ch;
  margin: 0 0 28px;
}
.hero-tenity__lead {
  max-width: 640px;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--cor-linha);
  margin: 0 0 32px;
}
.hero-tenity__acoes { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-tenity__selo { max-width: 320px; font-size: .85rem; color: var(--cor-linha); margin: 0; }

/* ---------- cartão de imagem full-width dentro do hero (componente real: .component--cta / .component--jumbo) ---------- */
.cartao-imagem-cheia {
  position: relative;
  margin-top: 56px;
  border-radius: 32px;
  overflow: hidden;
  min-height: 300px;
  background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.25)), url('../img/logo/hero-evento-ci9.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}
.cartao-imagem-cheia__pendente {
  position: absolute;
  top: 18px;
  left: 18px;
  border: 1px dashed var(--cor-cinza);
  color: var(--cor-linha);
  font-size: .72rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
}
.cartao-imagem-cheia__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--cor-tinta);
  margin: 0;
}

/* ---------- 3 cartões numerados (componente real: .card-number) ---------- */
.cartoes-processo {
  margin-top: 40px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.cartao-numero {
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 28px;
}
.cartao-numero__eyebrow {
  display: block;
  font-family: var(--fonte-display);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--cor-acento);
  margin-bottom: 14px;
}
.cartao-numero__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cor-tinta);
  margin: 0 0 8px;
}
.cartao-numero__texto { color: var(--cor-linha); font-size: .92rem; margin: 0; }

/* ---------- faixa de parceiros (componente real: .component--partners) ----------
   Logos oficiais reais das 6 marcas atendidas (Wikimedia Commons), em escala de
   cinza, ganhando cor no hover, mesmo padrão do "Global strategic partners" do
   Tenity. */
.faixa-parceiros {
  background: #000;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 48px 0;
}
.faixa-parceiros__eyebrow {
  text-align: center;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-cinza);
  margin: 0 0 32px;
}
.faixa-parceiros__logos {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.faixa-parceiros__trilho {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  width: max-content;
  animation: faixa-marquee 28s linear infinite;
}
.faixa-parceiros__logos:hover .faixa-parceiros__trilho { animation-play-state: paused; }
@keyframes faixa-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.faixa-parceiros__logos img {
  height: 32px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .55;
  transition: opacity .2s ease, filter .2s ease;
}
.faixa-parceiros__logos a:hover img,
.faixa-parceiros__logos a:focus img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(37%) sepia(84%) saturate(3000%) hue-rotate(300deg) brightness(101%) contrast(101%);
}
@media (prefers-reduced-motion: reduce) {
  .faixa-parceiros__trilho { animation: none; }
}

/* ---------- cases em grade accordion 3x2 (componente real: painel "Many paths,
   one shared momentum" do Tenity, 2x2 lá, 3x2 aqui pros 6 cases da CI9) ---------- */
.cases-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  overflow: hidden;
}
.cases-item {
  position: relative;
  border-right: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.cases-item:nth-child(3n) { border-right: none; }
.cases-item:nth-child(n+4) { border-bottom: none; }
.cases-item__cabecalho {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 26px 24px;
  cursor: pointer;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cor-tinta);
}
.cases-item__mais {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease;
}
.cases-item__mais::before { content: '+'; }
.cases-item.aberto .cases-item__mais,
.cases-item:hover .cases-item__mais {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
  color: #0A0A0A;
}
.cases-item.aberto .cases-item__mais::before { content: '−'; }
.cases-item__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1);
}
.cases-item.aberto .cases-item__painel,
.cases-item:hover .cases-item__painel {
  grid-template-rows: 1fr;
}
.cases-item__painel-interno { overflow: hidden; }
.cases-item__foto {
  aspect-ratio: 16 / 6;
  overflow: hidden;
  margin: 4px 24px 16px;
  border-radius: 10px;
  background: #000;
}
.cases-item__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cases-item__corpo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px 26px;
}
.cases-item__texto { color: var(--cor-linha); font-size: .88rem; margin: 0; }
.cases-item__link {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cor-acento);
  color: var(--cor-acento);
  display: flex; align-items: center; justify-content: center;
}
.cases-item__link:hover { background: var(--cor-acento); color: #0A0A0A; }
@media (max-width: 720px) {
  .cases-grade { grid-template-columns: 1fr; }
  .cases-item { border-right: none !important; }
  .cases-item:last-child { border-bottom: none; }
}

/* ---------- mega-menu no nav (componente real do Tenity: painel branco full-width
   com sub-links à esquerda + motivo geométrico à direita) ---------- */
.nav__item--mega { position: static; }
.mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 24px;
  right: 24px;
  background: var(--cor-tinta);
  color: #0A0A0A;
  border-radius: 24px;
  box-shadow: var(--sombra);
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), visibility .25s;
  z-index: 30;
}
.nav__item--mega:hover .mega-menu,
.nav__item--mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-menu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 8px 32px;
}
.mega-menu__lista a {
  display: block;
  padding: 10px 0;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1rem;
  color: #0A0A0A;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.mega-menu__lista a:hover { color: var(--cor-acento); }
.mega-menu__forma {
  background: #000;
  border-radius: 16px;
  padding: 14px;
  line-height: 0;
}
.mega-menu__forma img { width: 130px; height: 130px; object-fit: contain; }
.mega-menu__forma__img--marca { filter: grayscale(1) brightness(0) invert(1); padding: 12px; }
@media (max-width: 900px) {
  .mega-menu { display: none; }
}

/* ---------- seção "a diferença", sticky (componente real: .sticky + .card-number) ---------- */
.diferenca { background: var(--cor-tinta); color: #0A0A0A; padding: 96px 0; }
.diferenca .container--l { display: grid; grid-template-columns: 220px auto 1fr; gap: 48px; align-items: start; }
.diferenca__nav {
  position: sticky;
  top: 150px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.diferenca__nav a {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #0A0A0A;
}
.diferenca__nav a:hover { color: var(--cor-acento); }
.diferenca__forma { color: #0A0A0A; }
.diferenca__conteudo { display: flex; flex-direction: column; gap: 64px; }
.diferenca__eyebrow { font-size: .85rem; color: var(--cor-cinza); margin: 0 0 12px; }
.diferenca__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 20px;
  max-width: 14ch;
}
.diferenca__texto { max-width: 56ch; color: #33383e; margin: 0; }
.cartoes-stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.cartao-stat {
  border-radius: 18px;
  padding: 28px;
  background: var(--cor-superficie);
  color: var(--cor-tinta);
}
.cartao-stat--acento { background: var(--cor-acento); color: #0A0A0A; }
.cartao-stat__numero {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  margin: 0 0 10px;
}
.cartao-stat__texto { margin: 0; font-size: .95rem; }

/* ---------- cartões com corte octogonal (componente real do Tenity: contorno em
   repouso, fill sólido no hover, corte trocado do "D" pro octógono da CI9) ---------- */
.grade-octo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
@media (min-width: 901px) {
  .grade-octo--servicos { grid-template-columns: repeat(3, 1fr); }
}
.cartao-octo {
  --corte: clamp(28px, 4vw, 44px);
  position: relative;
  background: transparent;
  color: var(--cor-tinta);
  border: 1.5px solid rgba(255,255,255,.4);
  clip-path: polygon(
    0 0, calc(100% - var(--corte)) 0, 100% var(--corte),
    100% 100%, 0 100%
  );
  padding: 36px 28px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cartao-octo:hover,
.cartao-octo:focus-within {
  background: var(--cor-acento);
  color: #0A0A0A;
  border-color: var(--cor-acento);
}
.cartao-octo__titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 1.2rem; margin: 0 0 10px; }
.cartao-octo__texto { color: var(--cor-linha); font-size: .92rem; margin: 0; transition: color .25s ease; }
.cartao-octo:hover .cartao-octo__texto, .cartao-octo:focus-within .cartao-octo__texto { color: #232323; }
.lista-horario { list-style: none; padding: 0; margin: 0; font-size: .92rem; color: var(--cor-linha); transition: color .25s ease; }
.lista-horario li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.lista-horario li:last-child { border-bottom: none; }
.cartao-octo:hover .lista-horario, .cartao-octo:focus-within .lista-horario { color: #232323; }
.cartao-octo:hover .lista-horario li, .cartao-octo:focus-within .lista-horario li { border-bottom-color: rgba(0,0,0,.1); }

/* ---------- formulário de contato ---------- */
.form-contato { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.form-contato__campo { display: flex; flex-direction: column; gap: 10px; }
.form-contato__campo--full { grid-column: 1 / -1; }
.form-contato label {
  font-family: var(--fonte-display);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cor-cinza);
  font-weight: 600;
}
.form-contato input, .form-contato textarea {
  font-family: var(--fonte-apoio);
  font-size: 1rem;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: var(--cor-tinta);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.form-contato input:focus, .form-contato textarea:focus {
  outline: none;
  border-color: var(--cor-acento);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 4px rgba(255,45,143,.15);
}
.form-contato input.campo-invalido, .form-contato textarea.campo-invalido { border-color: #d9364a; }
.form-contato textarea { resize: vertical; min-height: 120px; }
.form-contato__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-contato__rodape { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.form-contato__status { margin: 0; font-size: .92rem; }
.form-contato__status--ok { color: #1fb857; }
.form-contato__status--erro { color: #d9364a; }
@media (max-width: 640px) { .form-contato { grid-template-columns: 1fr; } }

/* painel claro: campos escuros/chumbo em cima do fundo branco, mesmo padrão
   dos outros painéis claros do site (cartao-octo em .secao-clara). */
.secao-clara .form-contato label { color: var(--cor-cinza); }
.secao-clara .form-contato input, .secao-clara .form-contato textarea {
  border-color: rgba(10,10,10,.16);
  background: rgba(10,10,10,.02);
  color: #0A0A0A;
}
.secao-clara .form-contato input:focus, .secao-clara .form-contato textarea:focus {
  background: #fff;
}
.secao-clara .form-contato__status--ok { color: #1a9c4a; }
.secao-clara .form-contato__status--erro { color: #d9364a; }

/* ---------- seção clara, pra alternar com os blocos escuros (padrão Tenity) ---------- */
.secao-clara { background: var(--cor-tinta); color: #0A0A0A; }
.secao-clara .texto-cinza { color: var(--cor-cinza); }
.secao-clara h2 { border-bottom: 3px solid var(--cor-acento); padding-bottom: 14px; display: inline-block; }
.secao-clara .cartao-octo { color: #0A0A0A; border-color: rgba(10,10,10,.2); }
.secao-clara .cartao-octo__texto { color: #4A4A4A; }

/* ---------- ícone em cima do título do cartão de serviço ---------- */
.cartao-octo__icone { display: block; margin: 0 0 14px; color: var(--cor-acento); }
.cartao-octo__icone svg { width: 30px; height: 30px; }

/* ---------- fechamento branco antes do rodapé ---------- */
.fechamento-branco { background: var(--cor-tinta); color: #0A0A0A; padding: 96px 0; text-align: left; }
.fechamento-branco__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  max-width: 16ch;
  margin: 0 0 28px;
}
.fechamento-branco .btn-primario { background: var(--cor-acento); color: #0A0A0A; }

/* ---------- rodapé cortina verde ---------- */
.footer--curtain { padding: 56px 0 24px; }
.footer--curtain .footer__col h3 { color: rgba(255,255,255,.7); }

/* ---------- reveal ao rolar (equivalente ao scroll-reveal do Tenity, em JS puro) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.reveal--visivel { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 1199px) {
  .diferenca .container--l { grid-template-columns: 1fr; gap: 40px; }
  .diferenca__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 24px; }
}

@media (max-width: 720px) {
  .hero-tenity { padding: 140px 0 56px; }
  .cartoes-processo { margin-top: 24px; }
  .diferenca, .momentum, .fechamento-branco { padding: 64px 0; }

  /* recorte próprio pro formato vertical: o mesmo arquivo de desktop,
     bem largo (2:1), sobra quase todo cortado numa tela estreita e alta.
     Este recorte já nasce vertical, do material original em alta resolução
     (BACKGROUND 1.png), sem esticar nem cortar mal a composição. */
  .hero-tenity {
    background-image: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7)), url('../img/logo/background-glow-mobile.jpg');
    background-position: center;
  }

  /* eventos-corporativos.html: conteúdo centralizado no mobile (pedido do
     Daniel, o texto alinhado à esquerda ficava estranho numa página que é
     mais "hub" do que artigo corrido). */
  .pg-eventos-corporativos .hero-pagina .container,
  .pg-eventos-corporativos section > .container { text-align: center; }
  .pg-eventos-corporativos .hero__cta { justify-content: center; }
  .pg-eventos-corporativos .cartao-octo { text-align: center; }
  .pg-eventos-corporativos .cartao-octo__icone { margin: 0 auto 14px; }
}