/* =============================================================
   GET RIGHT · Componentes (v2, modo claro)
   Reaproveitável pela landing page. Depende de tokens.css.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-base);
  font-weight: var(--peso-texto);
  line-height: var(--lh-texto);
  background: var(--pagina);
  color: var(--claro-texto);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

p, li, dd, figcaption, small, blockquote { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }

/* ---------- Temas de secção ---------------------------------------
   Por omissão tudo é claro. .tema-alt = névoa. .tema-azul só para
   peças (cartão, barra), nunca uma secção inteira.                    */
:root, .tema-claro, .tema-alt, .tema-azul, .tema-escuro {
  --fundo: var(--pagina); --cartao: #FFFFFF; --texto: var(--claro-texto); --suave: var(--claro-suave);
  --fio-c: var(--claro-fio); --fio-f: var(--claro-fio-forte); --link: var(--claro-link); --sinal: var(--claro-sinal);
}
.tema-alt  { --fundo: var(--pagina-alt); }
.tema-azul { --fundo: var(--azul-600); --cartao: var(--azul-700); --texto: #FFFFFF; --suave: var(--azul-100); --fio-c: rgb(255 255 255 / 0.16); --fio-f: rgb(255 255 255 / 0.32); --link: #FFFFFF; --sinal: var(--verde-400); }
.tema-escuro { --fundo: var(--tinta-900); --cartao: var(--tinta-850); --texto: var(--escuro-texto); --suave: var(--escuro-suave); --fio-c: var(--escuro-fio); --fio-f: var(--escuro-fio-forte); --link: var(--escuro-link); --sinal: var(--verde-400); }
.tema-claro, .tema-alt, .tema-azul, .tema-escuro { background: var(--fundo); color: var(--texto); }

.contentor { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografia -------------------------------------------- */
.mono {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  font-weight: 500;
}
.titulo-mega, .titulo-1, .titulo-2, .titulo-3 {
  font-weight: var(--peso-get);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-titulo);
}
.titulo-mega { font-size: var(--t-mega); }
.titulo-1 { font-size: var(--t-3xl); }
.titulo-2 { font-size: var(--t-2xl); }
.titulo-3 { font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.15; }
/* A regra get/right: a palavra que importa vai a negrito. */
:is(.titulo-mega, .titulo-1, .titulo-2, .titulo-3, h1, h2, h3) b { font-weight: var(--peso-right); }
/* Marcador verde por trás da palavra-chave: a seta ao lado do "right". */
.marca {
  font-weight: var(--peso-right);
  background: linear-gradient(transparent 62%, var(--marcador) 62% 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: 0.04em;
}
.revela .marca, [data-revela] .marca { background-size: 0 100%; transition: background-size 900ms var(--e-sai) 400ms; }
.visto .marca, .revela.visto .marca { background-size: 100% 100%; }
.azul { color: var(--azul-600); }
.lead { font-size: var(--t-lg); color: var(--suave); max-width: var(--texto-w); line-height: 1.5; }
.texto { max-width: var(--texto-w); }

/* Etiqueta de secção: número mono + fio + nome */
.rotulo { display: flex; align-items: center; gap: var(--s-3); color: var(--suave); margin: 0 0 var(--s-4); }
.rotulo::before { content: ""; width: var(--s-6); height: var(--fio-forte); background: var(--verde-400); }
.rotulo .n { color: var(--azul-600); }

/* ---------- Seta (símbolo) ---------------------------------------- */
.seta { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ---------- Corte a 45° -------------------------------------------- */
.corte    { clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%); }
.corte-sm { clip-path: polygon(0 0, calc(100% - var(--corte-sm)) 0, 100% var(--corte-sm), 100% 100%, 0 100%); }
.corte-lg { clip-path: polygon(0 0, calc(100% - var(--corte-lg)) 0, 100% var(--corte-lg), 100% 100%, 0 100%); }

/* ---------- Botões --------------------------------------------------
   Principal = o logótipo: azul, texto branco, seta verde que "dispara"
   (sai pelo canto e volta a entrar por baixo). Canto cortado a 45°.   */
.btn {
  --b-fundo: var(--acao); --b-texto: var(--acao-texto); --b-seta: var(--acao-seta); --b-fio: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-5);
  border: var(--fio-forte) solid var(--b-fio);
  border-radius: var(--raio);
  background: var(--b-fundo);
  color: var(--b-texto);
  font-weight: var(--peso-right);
  font-size: var(--t-base);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--corte-sm)) 0, 100% var(--corte-sm), 100% 100%, 0 100%);
  transition: background var(--d-rapido) var(--e-sai), color var(--d-rapido) var(--e-sai), translate var(--d-medio) var(--e-sai);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { --b-fundo: var(--acao-hover); }
.btn:active { translate: 2px 2px; }
.btn:focus-visible { outline: var(--fio-forte) solid currentColor; outline-offset: -6px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.btn-icone { position: relative; width: 14px; height: 14px; overflow: hidden; flex: none; color: var(--b-seta); }
.btn-icone .seta { position: absolute; inset: 0; width: 100%; height: 100%; transition: translate var(--d-medio) var(--e-sai); }
.btn-icone .seta + .seta { translate: -110% 110%; }
.btn:hover .btn-icone .seta:first-child { translate: 110% -110%; }
.btn:hover .btn-icone .seta + .seta { translate: 0 0; }

.btn-contorno { --b-fundo: transparent; --b-texto: var(--texto); --b-seta: var(--azul-600); --b-fio: var(--texto); }
.btn-contorno:hover { --b-fundo: var(--texto); --b-texto: var(--fundo); --b-seta: var(--verde-400); }
/* Verde só em cima de azul (ex.: dentro de um cartão azul). */
.btn-verde { --b-fundo: var(--verde-400); --b-texto: var(--tinta-900); --b-seta: var(--tinta-900); }
.btn-verde:hover { --b-fundo: var(--verde-300); }
.btn-grande { min-height: 60px; padding: 0 var(--s-6); font-size: var(--t-lg); }
.btn-largo { width: 100%; }

/* Ligação com seta */
.ligacao {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--link); font-weight: var(--peso-semi);
  text-decoration: none;
  background: linear-gradient(var(--verde-400) 0 0) 0 100% / 0 var(--fio-forte) no-repeat;
  transition: background-size var(--d-medio) var(--e-sai);
  min-height: 44px;
}
.ligacao .seta { width: 0.7em; height: 0.7em; transition: translate var(--d-medio) var(--e-sai); }
.ligacao:hover { background-size: 100% var(--fio-forte); }
.ligacao:hover .seta { translate: 3px -3px; }
.ligacao:focus-visible { outline: var(--fio-forte) solid var(--foco); outline-offset: 2px; }

/* ---------- Etiquetas ---------------------------------------------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: var(--fio) solid var(--fio-f);
  background: var(--cartao);
  font-family: var(--fonte-mono); font-size: var(--t-mono);
  letter-spacing: var(--tr-mono); text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.etiqueta-sinal { background: var(--verde-400); border-color: var(--verde-400); color: var(--tinta-900); }
.etiqueta-azul  { background: var(--azul-600); border-color: var(--azul-600); color: #FFFFFF; }
.etiqueta-suave { background: var(--azul-50); border-color: var(--azul-100); color: var(--azul-700); }
.ponto-vivo { width: 8px; height: 8px; background: var(--verde-500); animation: piscar 1.6s steps(2, jump-none) infinite; }
@keyframes piscar { 50% { opacity: 0.2; } }

/* ---------- Campos -------------------------------------------------
   Retos. O fio de baixo enche de azul ao focar, da esquerda.          */
.campo { display: grid; gap: var(--s-2); }
.campo label { font-family: var(--fonte-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--suave); }
.campo-caixa { position: relative; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: var(--fio) solid var(--fio-f); border-radius: var(--raio);
  background: var(--cartao); color: var(--texto);
  font-size: var(--t-base);
  appearance: none;
}
.campo select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-size: 6px 6px; background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-repeat: no-repeat; padding-right: var(--s-7); }
.campo-caixa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fio-forte);
  background: var(--azul-600); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-medio) var(--e-sai);
}
.campo-caixa:focus-within::after { transform: scaleX(1); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--texto); }
.campo input::placeholder { color: var(--suave); opacity: 1; }
.campo .ajuda { font-size: var(--t-xs); color: var(--suave); }
.campo.erro input { border-color: var(--alerta-claro); }
.campo.erro .ajuda { color: var(--alerta-claro); }

/* Interruptor quadrado (sim / não) */
.interruptor { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding: var(--s-3) var(--s-4); border: var(--fio) solid var(--fio-c); background: var(--cartao); cursor: pointer; transition: border-color var(--d-rapido); }
.interruptor:hover { border-color: var(--fio-f); }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .pista { position: relative; flex: none; width: 48px; height: 24px; border: var(--fio-forte) solid var(--fio-f); transition: background var(--d-rapido), border-color var(--d-rapido); }
.interruptor .pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--neutro-400); transition: translate var(--d-medio) var(--e-seta), background var(--d-rapido); }
.interruptor input:checked + .pista { background: var(--azul-600); border-color: var(--azul-600); }
.interruptor input:checked + .pista::after { translate: 24px 0; background: var(--verde-400); }
.interruptor input:focus-visible + .pista { outline: var(--fio-forte) solid var(--foco); outline-offset: 3px; }

/* Fichas de escolha (chips) */
.fichas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ficha { min-height: 44px; padding: 0 var(--s-4); border: var(--fio) solid var(--fio-f); background: var(--cartao); cursor: pointer; font-weight: var(--peso-semi); transition: background var(--d-rapido), color var(--d-rapido), border-color var(--d-rapido); }
.ficha:hover { border-color: var(--texto); }
.ficha[aria-pressed="true"] { background: var(--azul-600); border-color: var(--azul-600); color: #FFFFFF; }

/* ---------- Cartões ------------------------------------------------- */
.cartao { position: relative; padding: var(--s-5); background: var(--cartao); border: var(--fio) solid var(--fio-c); }
.cartao-destaque { border-color: var(--azul-600); box-shadow: inset 0 0 0 1px var(--azul-600); }
/* Sombra dura a 45°, a única sombra "de marca". */
.cartao-seta { border: var(--fio-forte) solid var(--tinta-900); box-shadow: var(--sombra-seta); transition: translate var(--d-medio) var(--e-sai), box-shadow var(--d-medio) var(--e-sai); }
.cartao-seta:hover { translate: -4px -4px; box-shadow: 12px 12px 0 var(--tinta-900); }
.cartao-seta.azul-sombra { box-shadow: var(--sombra-seta-azul); border-color: var(--azul-600); }
.cartao-seta.azul-sombra:hover { box-shadow: 12px 12px 0 var(--azul-600); }

.grelha-fios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); border-top: var(--fio) solid var(--fio-c); border-left: var(--fio) solid var(--fio-c); }
.grelha-fios > * { border-right: var(--fio) solid var(--fio-c); border-bottom: var(--fio) solid var(--fio-c); padding: var(--s-5); }

/* ---------- FAQ ------------------------------------------------------
   A seta roda de ↗ para ↘ ao abrir: 90°, nunca mais.                 */
.faq { border-top: var(--fio-forte) solid var(--texto); }
.faq details { border-bottom: var(--fio) solid var(--fio-f); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 64px; padding: var(--s-4) 0; cursor: pointer; list-style: none; font-size: var(--t-lg); font-weight: var(--peso-semi); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .seta { width: 16px; height: 16px; color: var(--azul-600); transition: rotate var(--d-medio) var(--e-seta); }
.faq summary:hover .seta { color: var(--verde-500); }
.faq details[open] summary .seta { rotate: 90deg; }
.faq summary:focus-visible { outline: var(--fio-forte) solid var(--foco); outline-offset: 4px; }
.faq .resposta { padding-bottom: var(--s-5); color: var(--suave); max-width: var(--texto-w); }

/* ---------- Tabela "nós vs eles" ----------------------------------- */
.comparar { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.comparar th, .comparar td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: var(--fio) solid var(--fio-c); vertical-align: top; }
.comparar thead th { font-family: var(--fonte-mono); font-size: var(--t-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--suave); font-weight: 500; }
.comparar .nos { background: var(--azul-50); color: var(--azul-800); font-weight: var(--peso-right); border-left: var(--fio-forte) solid var(--azul-600); }
.comparar thead .nos { color: var(--azul-700); }
.comparar tbody th { font-weight: var(--peso-semi); }
.comparar td:not(.nos) { color: var(--suave); }

/* ---------- Lugares do mês (escassez real) ------------------------- */
.lugares { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.lugar { aspect-ratio: 1; border: var(--fio-forte) solid var(--fio-f); display: grid; place-items: center; font-family: var(--fonte-mono); font-size: var(--t-mono); color: var(--suave); }
.lugar.ocupado { background: var(--neutro-200); border-color: transparent; text-decoration: line-through; }
.lugar.livre { border-color: var(--azul-600); color: var(--azul-600); animation: livre 2.4s var(--e-sai) infinite; }
@keyframes livre { 0%, 60%, 100% { box-shadow: 0 0 0 0 rgb(0 94 207 / 0); } 30% { box-shadow: 0 0 0 6px rgb(0 94 207 / 0.15); } }

/* ---------- Contador ------------------------------------------------ */
.numero { display: inline-block; font-weight: var(--peso-right); font-size: var(--t-3xl); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.numero sup { font-size: 0.4em; vertical-align: top; color: var(--azul-600); font-weight: var(--peso-right); margin-left: 2px; }

/* ---------- Faixa contínua (marquee) ------------------------------- */
.faixa { overflow: hidden; padding-block: var(--s-5); user-select: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.faixa-pista { display: flex; align-items: center; width: max-content; will-change: transform; }
.faixa-item { display: inline-flex; align-items: center; gap: var(--s-5); padding-right: var(--s-5); font-size: var(--t-2xl); font-weight: var(--peso-get); letter-spacing: var(--tr-titulo); line-height: 1.1; white-space: nowrap; }
.faixa-item b { font-weight: var(--peso-right); }
.faixa-item .seta { width: 0.5em; height: 0.5em; color: var(--verde-500); }

/* Logótipo de cliente: PNG usado como máscara, a cor vem do CSS.
   Cinzento em repouso, azul com o rato por cima.                     */
.cliente { display: block; height: var(--h, 40px); aspect-ratio: var(--r, 4); background: var(--neutro-500); -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; transition: background var(--d-medio) var(--e-sai); }
.cliente:hover { background: var(--azul-600); }

/* ---------- Reveal diagonal (regra dos 45°) ------------------------ */
.revela { opacity: 0; translate: calc(var(--diag) * -1) var(--diag); transition: opacity var(--d-lento) var(--e-sai), translate var(--d-lento) var(--e-sai); transition-delay: calc(var(--i, 0) * 80ms); }
.revela.visto { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; translate: none; } }

.mascara { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mascara > span { display: block; translate: 0 105%; transition: translate 900ms var(--e-sai); transition-delay: calc(var(--i, 0) * 90ms); }
.visto .mascara > span, .mascara.visto > span { translate: 0 0; }

/* ---------- Padrões de fundo -------------------------------------- */
.padrao-grelha { background-image: linear-gradient(var(--fio-c) 1px, transparent 1px), linear-gradient(90deg, var(--fio-c) 1px, transparent 1px); background-size: 48px 48px; }
.padrao-diagonal { background-image: repeating-linear-gradient(-45deg, var(--fio-c) 0 1px, transparent 1px 12px); }
.padrao-pontos { background-image: radial-gradient(var(--fio-f) 1px, transparent 1.5px); background-size: 16px 16px; }

/* ---------- Acessibilidade ----------------------------------------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: var(--fio-forte) solid var(--foco); outline-offset: 3px; }