/* ==========================================================================
   Garimpo de Viajantes · Landing v2 · 03 · O diagnóstico
   Fonte: Figma frame 85:71. Grade 4 × 2 de cartões de 292 × 270 com 16px
   de vão; o oitavo é o cartão CTA em azul Garimpo, link inteiro.
   Seção CLARA desde 30/09/2026: cartões brancos sobre Vanilla; o cartão
   CTA continua em azul Garimpo (preenchimento, texto NightSkye).
   Contrastes medidos no escuro (WCAG 2.1, sobre #0C1629):
     número, Mint 50% ....... 5,07:1  AA
     texto, Mint 60% ........ 6,78:1  AA
     NightSkye sobre Garimpo  6,90:1  AA
   ========================================================================== */

/* Duas linhas como no Figma: "Sete dores que a gente / encontra em toda agência" */
.v2-dores__titulo { max-width: 11.5em; }

.v2-dores__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.v2-dores__cartao,
.v2-dores__cta {
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 24px;
  border-radius: var(--r-2);
}

.v2-dores__cartao {
  border: var(--linha) solid var(--v2-borda-sutil);
  background: var(--v2-cartao);
}

.v2-dores__numero {
  font-size: 13px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: rgba(239, 255, 230, 0.5);
}

.v2-dores__nome {
  margin: 28px 0 0;
  font-size: clamp(1.25rem, 0.5rem + 1.6vw, 1.75rem);   /* 28 no 1440 */
  font-weight: var(--w-medium);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.v2-dores__texto {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(239, 255, 230, 0.6);
}

/* Cartão CTA · "Qual é a sua?" */
.v2-dores__item-cta { display: flex; }

.v2-dores__cta {
  flex: 1;
  justify-content: space-between;
  gap: 24px;
  background: var(--acento);
  color: var(--acento-ink);
  text-decoration: none;
  transition: background-color var(--d-2) var(--ease-out-quart);
}
.v2-dores__cta:hover { background: #33B1FF; }    /* primary 400, igual ao .v2-cta */
.v2-dores__cta:active { background: #66C5FF; }   /* primary 300 */

.v2-dores__cta-pergunta {
  font-size: clamp(2rem, 1.4rem + 1.2vw, 2.5rem);   /* 40 no 1440 */
  font-weight: var(--w-semibold);
  line-height: 1.02;
  letter-spacing: var(--v2-tr-titulo);
}

.v2-dores__cta-acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v2-dores__cta-acao span { transition: transform var(--d-2) var(--ease-out-quart); }
.v2-dores__cta:hover .v2-dores__cta-acao span { transform: translateX(3px); }

.v2-dores__cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Tablet: 2 colunas, cartões mais baixos */
@media (max-width: 60rem) {
  .v2-dores__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .v2-dores__cartao,
  .v2-dores__cta { min-height: 184px; }
  .v2-dores__nome { font-size: clamp(1.375rem, 1rem + 1vw, 1.625rem); }
}

/* Celular: 1 coluna, altura pelo conteúdo */
@media (max-width: 36rem) {
  .v2-dores__titulo { max-width: none; }
  .v2-dores__grade { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .v2-dores__cartao,
  .v2-dores__cta { min-height: 0; padding: 20px; }
  .v2-dores__nome { margin-top: 16px; font-size: 1.375rem; }
  .v2-dores__texto { margin-top: 10px; }
  .v2-dores__cta { min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-dores__cta:hover .v2-dores__cta-acao span { transform: none; }
}

/* --- Tema claro: Mint 50%/60% viram os tons da tinta NightSkye ----------
   número, NightSkye 64% sobre branco ...... 6,1:1  AA
   texto, NightSkye 72% sobre branco ....... 8,3:1  AAA */
[data-tema="claro"] .v2-dores__numero { color: var(--ink-3); }
[data-tema="claro"] .v2-dores__texto { color: var(--ink-2); }

/* --- Fundo branco (pedido do cliente, 30/09/2026) ------------------------
   Só esta seção clara usa #FFFFFF em vez de Vanilla. Ela fica isolada entre
   duas escuras (02 e 04), então o branco não encosta no Vanilla das outras.
   Com o fundo branco, o cartão deixa de ser branco e vira uma superfície
   NightSkye 3%, com borda NightSkye 10%, para os oito cartões continuarem
   lidos como peças. O cartão CTA segue em azul Garimpo (preenchimento).
   Contraste medido sobre o cartão (NightSkye 3% em branco):
     título, NightSkye .......... 18,6:1  AAA
     texto, NightSkye 72% ....... 7,8:1   AAA
     número, NightSkye 64% ...... 6,0:1   AA
     NightSkye sobre Garimpo .... 6,90:1  AA */
.v2-dores.v2-secao--clara {
  --fundo: var(--gp-branco);
  --v2-cartao: color-mix(in srgb, var(--gp-nightskye) 3%, var(--gp-branco));
  --v2-borda-sutil: color-mix(in srgb, var(--gp-nightskye) 10%, transparent);
}