/* ==========================================================================
   Componentes globais — header, hover de texto, botão de WhatsApp
   ========================================================================== */

/* ---------- Header ---------- */
.nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* faixa de altura fixa com tudo centralizado: o mesmo respiro em cima e
     embaixo (36px até o logo em 1512) */
  height: var(--nav-h);
  padding: 0 var(--pad);
  color: var(--c-white);
}

.nav__logo {
  flex: none;
  display: flex;
  align-items: center;
  width: 66px; /* logo "Voz": o "o" fica com a mesma altura do logo anterior */
  height: 50px; /* mantém a altura da linha do header (era a do SVG antigo) */
  text-decoration: none;
}
.nav__logo .iona-logo {
  display: block;
  width: 100%;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  font-family: var(--font-text); /* Libre Franklin */
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

.nav__menu {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 26.667px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav__menu-line {
  display: block;
  width: 32px;
  height: 2.667px;
  background: currentColor;
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease-osmo);
}
.nav__menu-lines {
  display: grid;
  gap: 5.333px;
}

@media (hover: hover) and (pointer: fine) {
  .nav__menu:hover .nav__menu-line:nth-child(2) {
    transform: scaleX(0.6);
  }
}

@media (max-width: 767px) {
  .nav__links {
    display: none;
  }
}

/* Header sobre fundo claro (ex.: abertura creme da página de contato):
   links e ícone do menu em tinta; o logo usa a versão .iona-logo--on-light
   no HTML (vinho e vermelho) */
.nav--on-light {
  color: var(--c-ink);
}

/* ---------- Menu fixo (09/11/2026, a pedido) ----------
   Com o JS, o ícone do menu fica preso no canto da tela durante o scroll, no
   mesmo lugar que ocupa no header (centralizado na faixa --nav-h, na margem
   --pad); o logo e os links rolam com a página. No topo, o header fica igual
   ao de antes. O ::after do .nav guarda o lugar do ícone na linha, para os
   links não saírem do meio.
   A cor do ícone muda conforme o fundo que passa por baixo dele
   (assets/js/header-theme.js marca data-tone): vinho sobre fundos claros,
   creme sobre os escuros.
   Na home, durante a intro do hero, o header desce com o ícone (o transform
   do .nav vale para ele) e o hero.js limpa o transform no fim.
   Sem JS, nada muda: o header inteiro rola com a página. */
.js .nav::after {
  content: "";
  flex: none;
  width: 32px; /* largura do .nav__menu */
}
.js .nav__menu {
  position: fixed;
  top: calc(var(--nav-h) / 2);
  right: var(--pad);
  z-index: 1;
  translate: 0 -50%;
}
.nav__menu[data-tone] {
  transition: color 0.4s ease;
}
.nav__menu[data-tone="claro"] {
  color: var(--c-wine);
}
.nav__menu[data-tone="escuro"] {
  color: var(--c-cream);
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu[data-tone] {
    transition: none;
  }
}

/* ---------- Text buttons (links de texto) ----------
   No hover, só a opacidade diminui. */
.text-btn {
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .text-btn:hover {
    opacity: 0.6;
  }
}

/* ---------- Máscaras do reveal (SplitText) ----------
   Folga para acentos e descendentes não serem cortados pela máscara */
.rv-line-mask {
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* ---------- Botão com contorno (CTA) ----------
   No hover, o fundo sobe de baixo com leve inclinação e o texto muda
   de cor (sem animação nas letras). A troca de cor acontece no instante
   em que o fundo passa por trás do texto, na subida (--btn-color-in) e
   na descida (--btn-color-out). */
.btn {
  --btn-color: var(--c-red);
  --btn-contrast: var(--c-white);
  --btn-color-in: color 0.12s ease 0.21s;
  --btn-color-out: color 0.12s ease 0.17s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--btn-color);
  color: var(--btn-color);
  font-family: var(--font-text);
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  overflow: clip;
  isolation: isolate;
  transition: var(--btn-color-out);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0 -1em -2em;
  z-index: -1;
  background: var(--btn-color);
  transform: scaleY(0) skew(0deg, -5deg);
  transform-origin: 50% 100%;
  transition: transform 0.7s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:is(:hover, :focus-visible) {
    color: var(--btn-contrast);
    transition: var(--btn-color-in);
  }
  .btn:is(:hover, :focus-visible)::after {
    transform: scale(1) skew(0deg, 0deg);
  }
}
/* Sem animação (touch ou movimento reduzido): troca simples de cores */
@media (prefers-reduced-motion: reduce) {
  .btn {
    --btn-color-in: color 0s;
    --btn-color-out: color 0s;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .btn:is(:hover, :focus-visible) {
    background: var(--btn-color);
    color: var(--btn-contrast);
  }
}

/* ---------- Variações do botão (seções 08 e 09 e página de contato) ----------
   Mesmo efeito: o fundo sobe de baixo e o texto muda de cor. */
.btn--white {
  --btn-color: var(--c-white);
  --btn-contrast: var(--c-ink);
  background: var(--c-white);
  color: var(--c-ink);
}
.btn--wine {
  --btn-color: var(--c-wine);
  --btn-contrast: var(--c-wine);
  background: var(--c-wine);
  color: var(--c-white);
}
/* Vermelho cheio (página de contato: "Enviar contexto"); no hover, o verde sobe e o texto fica vinho */
.btn--red {
  --btn-color: var(--c-red);
  --btn-contrast: var(--c-wine);
  background: var(--c-red);
  color: var(--c-white);
}
.btn--white::after,
.btn--wine::after,
.btn--red::after {
  background: var(--c-lime);
}
.btn--white,
.btn--wine,
.btn--red {
  transition: var(--btn-color-out), border-color 0.5s var(--ease-osmo);
}
@media (hover: hover) and (pointer: fine) {
  .btn--white:is(:hover, :focus-visible),
  .btn--wine:is(:hover, :focus-visible),
  .btn--red:is(:hover, :focus-visible) {
    border-color: var(--c-lime);
    transition: var(--btn-color-in), border-color 0.5s var(--ease-osmo);
  }
}
.btn--outline-wine {
  --btn-color: var(--c-wine);
  --btn-contrast: var(--c-white);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .btn--white:is(:hover, :focus-visible),
  .btn--wine:is(:hover, :focus-visible),
  .btn--red:is(:hover, :focus-visible) {
    background: var(--c-lime);
    color: var(--btn-contrast);
  }
}
/* Botões que se expandem (clip-path): o contorno de foco fica por dentro */
.btn[data-expand]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -8px;
}

/* ---------- Botão flutuante de WhatsApp ---------- */
.whatsapp {
  --size: clamp(56px, calc(79 / var(--frame) * 100vw), 79px);
  position: fixed;
  right: var(--pad);
  bottom: clamp(20px, calc(70 / var(--frame) * 100vw), 70px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Visibilidade (todas as páginas): escondido ao abrir a página e ao rolar
   para baixo; aparece ao rolar para cima (assets/js/whatsapp.js troca a
   classe .is-shown). Sem JS, fica sempre visível. */
.js .whatsapp {
  opacity: 0;
  scale: 0.6;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, scale 0.5s var(--ease-osmo), visibility 0s linear 0.5s;
}
.js .whatsapp.is-shown {
  opacity: 1;
  scale: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease, scale 0.6s var(--ease-osmo), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .js .whatsapp,
  .js .whatsapp.is-shown {
    transition: none;
  }
}

/* Só o ícone de conversa, preenchido em branco; o círculo aparece no hover */
.whatsapp__dot {
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: transparent;
  color: var(--c-white);
  transition: transform 0.5s var(--ease-osmo), background-color 0.3s ease;
}
.whatsapp__dot svg {
  width: 42%;
  height: 42%;
}

.whatsapp__label {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  translate: 8px 0;
  pointer-events: none;
  transition: opacity 0.3s ease, translate 0.5s var(--ease-osmo);
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp:is(:hover, :focus-visible) .whatsapp__dot {
    transform: scale(1.06);
    background-color: rgba(255, 255, 255, 0.12);
  }
  .whatsapp:is(:hover, :focus-visible) .whatsapp__label {
    opacity: 1;
    translate: 0 0;
  }
}

.whatsapp:focus-visible {
  outline: none;
}
.whatsapp:focus-visible .whatsapp__dot {
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}

/* ==========================================================================
   Seção em duas partes e lista de linhas
   Padrão nascido na página de contato (C2) e usado também na seção 04 da
   home: rótulo pequeno + título fixos à esquerda (colunas 1–4 de um grid de
   12) e o conteúdo à direita (colunas 6–12), numa lista com linhas finas.
   Hover: o nome avança e fica vermelho, o número também, e uma seta fina
   entra pela diagonal. Entrada (reveal.js): as linhas se desenham da
   esquerda para a direita (data-reveal="rule") e o conteúdo aparece com
   uma leve subida (data-reveal="fade").

   Ajustes por seção (variáveis):
     --row-name / --row-name-weight / --row-name-lh   nome de cada linha
     --row-text / --row-text-lh                       descrição
     --row-arrow-rotate   90deg aponta a seta para baixo (link na mesma página)
     --row-arrow-size     tamanho da seta (padrão 20px; 18px no celular).
                          A espessura do traço não muda com o tamanho
                          (vector-effect: non-scaling-stroke, 1.25px)
     --row-color / --row-text-color / --row-num-color  cores do texto
     --row-accent         cor do hover (padrão: vermelho; sobre o vinho, verde-limão)
     --row-focus          contorno do foco do teclado
     --rows-rule / --rows-rule-size   cor e espessura das linhas

   Lista sem links (ex.: formatos na página de palestras): use .row__item
   (um <div>) no lugar de .row__link. Mesmo grid, sem hover nem seta.
   ========================================================================== */

/* ---------- Rótulo pequeno com quadrado (abre a seção) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 calc(28 * var(--fp));
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--eyebrow-mark, var(--c-red));
}

/* ---------- Seção em duas partes: título (1–4, fixo) e conteúdo (6–12) ---------- */
.split {
  --split-gap: calc(24 * var(--fp));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--split-gap);
  padding: calc(160 * var(--fp)) var(--pad);
}
.split__head {
  grid-column: 1 / 5;
  align-self: start;
  position: sticky;
  top: calc(120 * var(--fp));
}
.split__body {
  grid-column: 6 / -1;
  min-width: 0;
}

/* ---------- Lista de linhas ---------- */
.rows {
  --rows-rule: rgba(7, 0, 0, 0.14);
  --rows-muted: #6f6969;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--rows-rule-size, 1px) solid var(--rows-rule);
}
.rows--down {
  --row-arrow-rotate: 90deg;
}

.row {
  position: relative;
}
/* Linha de cima (--rule animada pelo reveal.js) */
.row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--rows-rule-size, 1px);
  background: var(--rows-rule);
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}

.row__link,
.row__item {
  display: grid;
  grid-template-columns: calc(64 * var(--fp)) minmax(0, 1fr) var(--row-arrow-size, 20px);
  column-gap: var(--split-gap, calc(24 * var(--fp)));
  align-items: start;
  padding: calc(30 * var(--fp)) 0 calc(34 * var(--fp));
  color: var(--row-color, var(--c-ink));
  text-decoration: none;
}
.row__link:focus-visible {
  outline: 2px solid var(--row-focus, var(--c-ink));
  outline-offset: 4px;
}

.row__num {
  padding-top: 0.75em;
  color: var(--row-num-color, var(--rows-muted));
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
}

.row__body {
  display: block;
  transition: translate 0.6s var(--ease-osmo);
}
.row__name {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--row-name, max(22px, calc(30 * var(--fp))));
  font-weight: var(--row-name-weight, 400);
  line-height: var(--row-name-lh, 1.2);
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
}
.row__text {
  display: block;
  max-width: 46ch;
  margin: 8px 0 0;
  color: var(--row-text-color, var(--rows-muted));
  font-family: var(--font-text);
  font-size: var(--row-text, max(15px, calc(16 * var(--fp))));
  font-weight: 400;
  line-height: var(--row-text-lh, 1.45);
}

.row__arrow {
  width: var(--row-arrow-size, 20px);
  height: var(--row-arrow-size, 20px);
  margin-top: 0.4em;
  color: var(--row-accent, var(--c-red));
  opacity: 0;
  /* entra pela diagonal: o deslocamento acompanha o tamanho da seta */
  transform: rotate(var(--row-arrow-rotate, 0deg)) translate(-30%, 30%);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-osmo);
}
.row__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
}
/* Traço com a mesma espessura em qualquer tamanho de seta */
.row__arrow path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.25px;
}

@media (hover: hover) and (pointer: fine) {
  .row__link:is(:hover, :focus-visible) .row__body {
    translate: calc(16 * var(--fp)) 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .row__link:is(:hover, :focus-visible) :is(.row__name, .row__num) {
    color: var(--row-accent, var(--c-red));
  }
}
@media (hover: hover) and (pointer: fine) {
  .row__link:is(:hover, :focus-visible) .row__arrow {
    opacity: 1;
    transform: rotate(var(--row-arrow-rotate, 0deg)) translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .row__body,
  .row__name,
  .row__num,
  .row__arrow {
    transition: none;
  }
}

/* Tablet: título em cima, conteúdo embaixo, na largura toda */
@media (max-width: 1199px) {
  .split {
    --fp: 1px;
    --split-gap: 20px;
    padding: clamp(88px, 13vw, 140px) var(--pad);
    row-gap: 48px;
  }
  .split__head {
    grid-column: 1 / -1;
    position: static;
  }
  .split__body {
    grid-column: 1 / -1;
  }
  .row__link,
  .row__item {
    grid-template-columns: 48px minmax(0, 1fr) var(--row-arrow-size, 20px);
  }
}

/* Mobile: seta sempre visível (sem hover no toque) */
@media (max-width: 767px) {
  .split {
    padding: 88px var(--pad);
  }
  .row__link,
  .row__item {
    grid-template-columns: 32px minmax(0, 1fr) var(--row-arrow-size, 18px);
    column-gap: 12px;
    padding: 24px 0 26px;
  }
  .row__arrow {
    width: var(--row-arrow-size, 18px);
    height: var(--row-arrow-size, 18px);
    opacity: 1;
    transform: rotate(var(--row-arrow-rotate, 0deg));
  }
}