/* home-w1-cores: sistema de cor da home (Wave 1, 06/10/2026).
 *
 * DESIGN.md (contrato visual; ler antes de mexer em cor na home)
 * --------------------------------------------------------------
 * Paleta de energia. Cada acento tem três papéis e nunca troca de papel:
 *   --acc-<cor>      preenchimento e decoração (barra, ponto, borda, glow).
 *                    NUNCA cor de texto sobre fundo claro.
 *   --acc-<cor>-ink  texto e ícone informativo. AA (>= 4,5:1) sobre --paper,
 *                    --surface, --surface-raised e o próprio --acc-<cor>-bg,
 *                    nos dois temas (no escuro vira tom claro).
 *   --acc-<cor>-bg   fundo suave de seção ou cartão; aceita --ink,
 *                    --ink-secondary, --ink-muted e --brand-text com AA.
 *   cores: azul #0176d3 | verde #12a150 | amarelo #ffc531 | coral #ff5a5f | violeta #7c5cff
 *
 * Acento por seção: <section data-acento="azul|verde|amarelo|coral|violeta">
 * resolve --acento, --acento-ink, --acento-bg e --acento-2 (par do gradiente).
 * Dentro da seção use sempre var(--acento*, fallback); a ordem alterna para
 * dar ritmo de cor na rolagem.
 *
 * Gradientes: --grad-aurora (azul, violeta, coral), --grad-brasil (verde,
 * amarelo, azul), --grad-calor (amarelo, coral) são DECORATIVOS: nada de texto
 * por cima. Texto só em dois casos: --grad-texto (h1 span, extremos -ink) e
 * branco sobre --grad-acao (botão primário, mínimo 6,6:1).
 * Raios: --radius-sm 10px, --radius-md 16px, --radius-lg 24px, --radius-pill.
 * Sombras: --shadow-soft (neutra), --shadow-glow (colorida, só em destaque).
 * Movimento: deriva da aurora e brilho do botão desligam em reduced-motion.
 * Inspiração: guia Tailwind do portal (tokens no escopo, override por
 * [data-theme="dark"], DESIGN.md como contrato) e hub de Design Leadlovers.
 */

:root {
  --acc-azul: #0176d3;
  --acc-verde: #12a150;
  --acc-amarelo: #ffc531;
  --acc-coral: #ff5a5f;
  --acc-violeta: #7c5cff;

  --acc-azul-ink: #005ea8;
  --acc-verde-ink: #0f6b3a;
  --acc-amarelo-ink: #7a5300;
  --acc-coral-ink: #b3262b;
  --acc-violeta-ink: #5536d6;

  --acc-azul-bg: #e9f3fc;
  --acc-verde-bg: #e7f5ec;
  --acc-amarelo-bg: #fff4d4;
  --acc-coral-bg: #ffeded;
  --acc-violeta-bg: #f0ecff;

  --grad-aurora: linear-gradient(120deg, #0176d3 0%, #7c5cff 52%, #ff5a5f 100%);
  --grad-brasil: linear-gradient(120deg, #12a150 0%, #ffc531 50%, #0176d3 100%);
  --grad-calor: linear-gradient(120deg, #ffc531 0%, #ff5a5f 100%);
  --grad-acao: linear-gradient(120deg, #0b5cad 0%, #5a3ad6 50%, #4229b0 100%);
  --grad-texto: linear-gradient(95deg, var(--acc-azul-ink) 0%, var(--acc-violeta-ink) 55%, var(--acc-coral-ink) 100%);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 40px -22px rgb(20 38 55 / 28%);
  --shadow-glow: 0 16px 36px -14px rgb(90 58 214 / 45%), 0 6px 16px -8px rgb(1 118 211 / 35%);

  --aurora-alpha: 24%;
  --acento: var(--acc-azul);
  --acento-ink: var(--acc-azul-ink);
  --acento-bg: var(--acc-azul-bg);
  --acento-2: var(--acc-violeta);
}

:root[data-theme="dark"] {
  --acc-azul-ink: #8acaff;
  --acc-verde-ink: #7ee2a8;
  --acc-amarelo-ink: #ffd76a;
  --acc-coral-ink: #ff9a9d;
  --acc-violeta-ink: #b9a8ff;

  --acc-azul-bg: #10263b;
  --acc-verde-bg: #0f281f;
  --acc-amarelo-bg: #2a2312;
  --acc-coral-bg: #31191e;
  --acc-violeta-bg: #1f1a3c;

  --shadow-soft: 0 18px 40px -22px rgb(0 0 0 / 60%);
  --shadow-glow: 0 16px 38px -14px rgb(124 92 255 / 55%), 0 6px 18px -8px rgb(1 118 211 / 45%);
  --aurora-alpha: 26%;
}

/* Resolução do acento por atributo (seletor de atributo tem suporte amplo;
   style queries ficariam sem Firefox). */
[data-acento="azul"] { --acento: var(--acc-azul); --acento-ink: var(--acc-azul-ink); --acento-bg: var(--acc-azul-bg); --acento-2: var(--acc-violeta); }
[data-acento="verde"] { --acento: var(--acc-verde); --acento-ink: var(--acc-verde-ink); --acento-bg: var(--acc-verde-bg); --acento-2: var(--acc-amarelo); }
[data-acento="amarelo"] { --acento: var(--acc-amarelo); --acento-ink: var(--acc-amarelo-ink); --acento-bg: var(--acc-amarelo-bg); --acento-2: var(--acc-coral); }
[data-acento="coral"] { --acento: var(--acc-coral); --acento-ink: var(--acc-coral-ink); --acento-bg: var(--acc-coral-bg); --acento-2: var(--acc-violeta); }
[data-acento="violeta"] { --acento: var(--acc-violeta); --acento-ink: var(--acc-violeta-ink); --acento-bg: var(--acc-violeta-bg); --acento-2: var(--acc-azul); }

/* O fundo do hero sangra até a borda da janela; o main corta o excesso. */
.home-page main { overflow-x: clip; }

/* ---------- Hero: aurora de gradiente (só atmosfera, sem layout) ---------- */
.home-page .hero { position: relative; isolation: isolate; }
.home-page .hero::before,
.home-page .hero::after {
  position: absolute; z-index: -1; content: ""; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
}
.home-page .hero::before {
  background:
    radial-gradient(46% 56% at 10% 20%, color-mix(in srgb, var(--acc-azul) calc(var(--aurora-alpha) * .9), transparent) 0%, transparent 70%),
    radial-gradient(42% 52% at 88% 14%, color-mix(in srgb, var(--acc-violeta) var(--aurora-alpha), transparent) 0%, transparent 70%),
    radial-gradient(30% 38% at 70% 78%, color-mix(in srgb, var(--acc-coral) calc(var(--aurora-alpha) * .8), transparent) 0%, transparent 70%),
    radial-gradient(30% 36% at 22% 88%, color-mix(in srgb, var(--acc-verde) calc(var(--aurora-alpha) * .75), transparent) 0%, transparent 70%),
    radial-gradient(22% 28% at 48% 40%, color-mix(in srgb, var(--acc-amarelo) calc(var(--aurora-alpha) * .7), transparent) 0%, transparent 70%);
  background-size: 140% 140%;
  background-position: 0% 0%;
}
/* Granulado leve: SVG inline (data:, permitido pelo img-src da CSP). */
.home-page .hero::after {
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
:root[data-theme="dark"] .home-page .hero::after { opacity: .07; }

@media (prefers-reduced-motion: no-preference) {
  .home-page .hero::before { animation: w1-aurora-drift 32s ease-in-out infinite alternate; }
}
@keyframes w1-aurora-drift {
  0% { background-position: 0% 0%; }
  50% { background-position: 60% 30%; }
  100% { background-position: 100% 70%; }
}

/* Destaque do H1 em gradiente; extremos -ink garantem AA sobre a aurora. */
.home-page .hero h1 span { color: var(--acc-violeta-ink, #5536d6); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .home-page .hero h1 span {
    background: var(--grad-texto);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* ---------- Ritmo de cor por seção ---------- */
.home-page .section,
.home-page .contact-section { position: relative; }

.home-page .section-tinted,
.home-page .contact-section {
  --tint-top: var(--acento-bg);
  --tint-bottom: color-mix(in srgb, var(--acento-bg) 55%, var(--paper));
  border-top-color: transparent;
  background:
    radial-gradient(48% 60% at 100% 0%, color-mix(in srgb, var(--acento) 10%, transparent), transparent 72%),
    radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--acento-2) 8%, transparent), transparent 72%),
    linear-gradient(180deg, var(--tint-top), var(--tint-bottom));
}
.home-page .section-tinted + .section,
.home-page .section-tinted + .contact-section,
.home-page .hero + .section-tinted { border-top-color: transparent; }

/* Divisores em onda: máscara SVG inline, preenchida com a cor da faixa. */
.home-page .section-tinted::before,
.home-page .section-tinted::after,
.home-page .contact-section::before {
  position: absolute; z-index: 1; left: 0; right: 0; content: "";
  height: clamp(18px, 3vw, 38px); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C180 4 360 0 540 10s360 28 540 22 270-22 360-26v34z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C180 4 360 0 540 10s360 28 540 22 270-22 360-26v34z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.home-page .section-tinted::before,
.home-page .contact-section::before { bottom: calc(100% - 1px); background: var(--tint-top); }
.home-page .section-tinted::after { top: calc(100% - 1px); background: var(--tint-bottom); transform: scale(-1, -1); }

/* Barra curta de gradiente acima do título e kicker colorido pelo acento. */
.home-page .section-kicker,
.home-page .eyebrow { color: var(--acento-ink, var(--brand-text)); }
.home-page .section-kicker::before {
  display: block; width: 52px; height: 5px; margin-bottom: 14px; content: "";
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--acento), var(--acento-2));
}
.home-page .geo-score-card .section-kicker::before { width: 36px; height: 4px; margin-bottom: 10px; }
.home-page .map-heading .eyebrow { color: var(--acc-violeta-ink); }

/* Cartões de conteúdo: cada um ganha um acento, em sequência. */
.home-page .resource-card:nth-child(5n+1) { --acento: var(--acc-azul); --acento-ink: var(--acc-azul-ink); --acento-2: var(--acc-violeta); }
.home-page .resource-card:nth-child(5n+2) { --acento: var(--acc-verde); --acento-ink: var(--acc-verde-ink); --acento-2: var(--acc-amarelo); }
.home-page .resource-card:nth-child(5n+3) { --acento: var(--acc-violeta); --acento-ink: var(--acc-violeta-ink); --acento-2: var(--acc-coral); }
.home-page .resource-card:nth-child(5n+4) { --acento: var(--acc-coral); --acento-ink: var(--acc-coral-ink); --acento-2: var(--acc-amarelo); }
.home-page .resource-card:nth-child(5n) { --acento: var(--acc-amarelo); --acento-ink: var(--acc-amarelo-ink); --acento-2: var(--acc-verde); }
.home-page .resource-card { background-image: linear-gradient(90deg, var(--acento), var(--acento-2)); background-size: 100% 4px; background-repeat: no-repeat; }

/* ---------- Botões e links ---------- */
.home-page .button { border-radius: var(--radius-sm); transition: background-position 420ms ease, box-shadow 220ms ease, transform 220ms ease, background-color 160ms ease; }
.home-page .button-primary {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-acao); background-size: 180% 100%; background-position: 0% 50%;
  border-color: transparent; color: #ffffff;
  box-shadow: var(--shadow-glow);
}
.home-page .button-primary::after {
  position: absolute; z-index: -1; content: ""; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 18%), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.home-page .button-primary:hover { background-position: 100% 50%; border-color: transparent; color: #ffffff; box-shadow: 0 20px 44px -14px rgb(90 58 214 / 60%), 0 8px 18px -8px rgb(1 118 211 / 45%); }
.home-page .button-primary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .home-page .button-primary:hover { transform: translateY(-1px); }
  .home-page .button-primary:hover::after { opacity: 1; left: 120%; transition: left 700ms ease, opacity 120ms linear; }
}
.home-page .button-outline { border-color: var(--acento-ink, var(--brand-text)); color: var(--acento-ink, var(--brand-text)); border-width: 2px; }
.home-page .button-outline:hover { background: var(--acento-bg, var(--surface-raised)); color: var(--acento-ink, var(--brand-text)); }
.home-page .button-outline:focus-visible { outline-color: var(--acento-ink, var(--brand-text)); }

.home-page main p a,
.home-page main li a { text-decoration-color: color-mix(in srgb, var(--acento) 75%, currentColor); text-decoration-thickness: .12em; }
.home-page main p a:hover,
.home-page main li a:hover { text-decoration-thickness: .2em; }
.home-page .text-link { color: var(--acento-ink, var(--brand-text)); }
.home-page .text-link:hover { text-decoration-color: var(--acento); text-decoration-thickness: .12em; }

@media (prefers-reduced-motion: reduce) {
  .home-page .hero::before { animation: none; }
  .home-page .button, .home-page .button-primary::after { transition: none; }
}

/* Alto contraste do sistema: some a decoração, volta a cor do sistema. */
@media (forced-colors: active) {
  .home-page .hero::before, .home-page .hero::after,
  .home-page .section-tinted::before, .home-page .section-tinted::after,
  .home-page .contact-section::before, .home-page .section-kicker::before,
  .home-page .button-primary::after { display: none; }
  .home-page .hero h1 span { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
  .home-page .button-primary { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}