/* Base da landing page.
   Só o que utilitário do Tailwind não expressa. Os tokens de cor, raio, tipografia
   e sombra ficam no tailwind.config, dentro do index.html.
   Hex vindos de design-system/tokens.json (focus-ring, ink-muted, action, action-subtle, action-ink, danger). */

html {
  scroll-behavior: smooth;
}

/* O header é fixo: a âncora precisa parar abaixo dele. */
section[id] {
  scroll-margin-top: 88px;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Anel de foco único em toda a página, conforme o design system. */
:focus-visible {
  outline: 2px solid #0080b6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Acordeão nativo: esconde o marcador padrão e troca o sinal de mais por menos. */
summary {
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
.toggle {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  color: #43525a;
}
.toggle::before,
.toggle::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(-50%);
}
.toggle::after {
  inset: 0 50% 0 auto;
  width: 2px;
  height: auto;
  transform: translateX(50%);
  transition: opacity 150ms ease;
}
details[open] .toggle::after {
  opacity: 0;
}

/* Rádio de plano: o controle nativo some e o rótulo vira o alvo. */
.plan-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.plan-option input:checked + span {
  border-color: #0072a3;
  background: #e5f2f8;
  color: #006d9c;
}
.plan-option input:focus-visible + span {
  outline: 2px solid #0080b6;
  outline-offset: 2px;
}

/* Campo em erro: a borda e a mensagem aparecem juntas. */
.error-text {
  display: none;
}
.field-error input {
  border-color: #c0302b;
}
.field-error .plan-option span {
  border-color: #c0302b;
}
.field-error .error-text {
  display: block;
}

/* Mosaico do topo: cada peça reage ao mouse de um jeito, sempre com a mesma subida. */
.mosaic-tile {
  position: relative;
  overflow: hidden;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.mosaic-tile img {
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 600ms ease;
}
.mosaic-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 74, 110, 0.14);
}
.mosaic-tile--zoom:hover img {
  transform: scale(1.08);
}
.mosaic-tile--pan:hover img {
  transform: scale(1.1) translateX(-4%);
}
.mosaic-tile--tilt img {
  transform-origin: center 20%;
}
.mosaic-tile--tilt:hover img {
  transform: scale(1.08) rotate(-1.5deg);
  filter: saturate(1.15);
}
.mosaic-bar {
  transition: width 300ms ease;
}
.mosaic-tile--block:hover .mosaic-bar {
  width: 64px;
}

/* Logos de clientes: coloridos por padrão. Só onde existe mouse ficam em cinza
   e ganham cor e escala no hover; no toque não há hover, então ficam coloridos.
   O multiply some com o fundo branco embutido em alguns PNGs. */
.client-logo img {
  mix-blend-mode: multiply;
  transition: filter 300ms ease, opacity 300ms ease, transform 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .client-logo img {
    filter: grayscale(1);
    opacity: 0.6;
  }
  .client-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Revelação ao rolar: o JS só marca os elementos quando o movimento é permitido.
   Animação com fill backwards para não prender o transform depois (hover dos cards continua valendo). */
.reveal {
  opacity: 0;
}
.reveal.is-visible {
  opacity: 1;
  animation: reveal-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Cards de plano: o card inteiro é o rádio. Selecionado ganha borda de ação e fundo de seleção. */
.plan-card {
  transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
}
.plan-card:hover {
  transform: translateY(-6px);
  border-color: #0072a3;
  box-shadow: 0 12px 32px rgba(0, 74, 110, 0.14);
}
/* Melhor custo-benefício: borda marinho mesmo sem estar escolhido. */
.plan-card--destaque {
  border-color: #004a6e;
  box-shadow: inset 0 0 0 1px #004a6e;
}
.plan-card:has(input:checked) {
  border-color: #0072a3;
  background: #e5f2f8;
  box-shadow: inset 0 0 0 1px #0072a3;
}
.plan-card:has(input:checked):hover {
  box-shadow: inset 0 0 0 1px #0072a3, 0 12px 32px rgba(0, 74, 110, 0.14);
}
.plan-card:has(input:focus-visible) {
  outline: 2px solid #0080b6;
  outline-offset: 3px;
}

.plan-check {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid #7d8a92;
  border-radius: 999px;
  background: #ffffff;
  transition: border-color 200ms ease;
}
.plan-check::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: #0072a3;
  transform: scale(0);
  transition: transform 200ms ease;
}
.plan-card:hover .plan-check,
.plan-card:has(input:checked) .plan-check {
  border-color: #0072a3;
}
.plan-card:has(input:checked) .plan-check::after {
  transform: scale(1);
}

.plan-cta {
  display: block;
  padding: 10px 16px;
  border: 1px solid #7d8a92;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #16252e;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.plan-card:hover .plan-cta {
  border-color: #0072a3;
  color: #006d9c;
}
.plan-card:has(input:checked) .plan-cta {
  border-color: #0072a3;
  background: #0072a3;
  color: #ffffff;
}
.plan-cta__done,
.plan-card:has(input:checked) .plan-cta__idle {
  display: none;
}
.plan-card:has(input:checked) .plan-cta__done {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .mosaic-tile,
  .mosaic-tile img,
  .plan-card {
    transition: none;
  }
  .mosaic-tile:hover,
  .plan-card:hover,
  .mosaic-tile:hover img {
    transform: none;
  }
  .toggle::after {
    transition: none;
  }
}