/* ===== milia — estilos base (identidade visual de 22/09/2026) =====
   Paleta das pranchas do Renato: Confiança #0B2D5B · Tecnologia #00BFA6 · Leveza
   #6EE7D6 · Liberdade #D6F4EF · Equilíbrio #F5F7FA. Tipografia Nunito (UI e
   wordmark, no lugar da Cabin Rounded paga) + Lora (títulos editoriais). Modo
   claro e escuro por token; assets/brand.js cuida do ícone, da barra inferior no
   celular e do tema. Guia: https://claude.ai/artifact/AXoGjBZighmeHnec4N3sBk
   Componentes do design system Nocturne (_ds/) adaptados. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=Lora:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  /* cinco cores, cada uma com um papel: Confiança = texto/títulos/wordmark/fundo
     escuro · Tecnologia = a ÚNICA cor de ação (botão, aba ativa, link, progresso)
     · Leveza = destaque secundário · Liberdade = fundos suaves · Equilíbrio = fundo
     da página no modo claro. */
  --milia-confianca:  #0B2D5B;
  --milia-tecnologia: #00BFA6;
  --milia-leveza:     #6EE7D6;
  --milia-liberdade:  #D6F4EF;
  --milia-equilibrio: #F5F7FA;
  /* nomes antigos (16/09) mantidos como alias pra não quebrar app.css/páginas */
  --milia-neo: var(--milia-confianca);
  --milia-turquesa-ia: var(--milia-tecnologia);

  --color-bg: var(--milia-equilibrio); --color-surface: #ffffff; --color-text: var(--milia-confianca);
  --color-text-2: #3D5479; --color-muted: #7A8BA6;
  --color-accent: var(--milia-tecnologia); --color-accent-2: var(--milia-leveza);
  --color-accent-ink: #00382F;   /* texto em cima da Tecnologia (branco não passa AA) */
  --color-divider: color-mix(in srgb, var(--color-text) 12%, transparent);

  --color-neutral-100: color-mix(in srgb, var(--color-text) 4%, white);
  --color-neutral-200: color-mix(in srgb, var(--color-text) 8%, white);
  --color-neutral-300: color-mix(in srgb, var(--color-text) 15%, white);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 25%, white);
  --color-neutral-500: color-mix(in srgb, var(--color-text) 42%, white);
  --color-neutral-600: color-mix(in srgb, var(--color-text) 58%, white);
  --color-neutral-700: color-mix(in srgb, var(--color-text) 74%, white);
  --color-neutral-800: color-mix(in srgb, var(--color-text) 88%, white);
  --color-neutral-900: var(--color-text);

  --color-accent-100: var(--milia-liberdade);
  --color-accent-200: color-mix(in srgb, var(--color-accent) 22%, white);
  --color-accent-300: color-mix(in srgb, var(--color-accent) 40%, white);
  --color-accent-400: color-mix(in srgb, var(--color-accent) 68%, white);
  --color-accent-500: var(--color-accent);
  --color-accent-600: color-mix(in srgb, var(--color-accent) 80%, black);
  --color-accent-700: color-mix(in srgb, var(--color-accent) 62%, black);
  --color-accent-800: color-mix(in srgb, var(--color-accent) 48%, black);
  --color-accent-900: color-mix(in srgb, var(--color-accent) 34%, black);

  --color-accent-2-100: color-mix(in srgb, var(--color-accent-2) 14%, white);
  --color-accent-2-200: color-mix(in srgb, var(--color-accent-2) 28%, white);
  --color-accent-2-300: color-mix(in srgb, var(--color-accent-2) 45%, white);
  --color-accent-2-400: color-mix(in srgb, var(--color-accent-2) 70%, white);
  --color-accent-2-500: var(--color-accent-2);
  --color-accent-2-600: color-mix(in srgb, var(--color-accent-2) 70%, black);
  --color-accent-2-700: color-mix(in srgb, var(--color-accent-2) 52%, black);
  --color-accent-2-800: color-mix(in srgb, var(--color-accent-2) 40%, black);
  --color-accent-2-900: color-mix(in srgb, var(--color-accent-2) 30%, black);

  --color-section: color-mix(in srgb, var(--color-text) 5%, white);
  --color-section-glow: color-mix(in srgb, var(--color-accent) 14%, white);
  --color-section-ghost: color-mix(in srgb, var(--color-accent) 32%, white);
  --hero-from: var(--milia-confianca); --hero-to: var(--milia-tecnologia);

  /* tipografia: Cabin Rounded (pranchas) não é livre — Nunito é a irmã gratuita
     com o mesmo desenho arredondado; Lora nos títulos editoriais */
  --font-heading: "Nunito", "Cabin", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-editorial: "Lora", Georgia, serif;
  --font-body: "Nunito", "Cabin", system-ui, sans-serif;
  --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px;
  --space-4: 11.2px; --space-6: 16.8px; --space-8: 22.4px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(11, 45, 91, 0.07);
  --shadow-md: 0 4px 14px rgba(11, 45, 91, 0.09);
  --shadow-lg: 0 18px 44px rgba(11, 45, 91, 0.15);

  /* estado — fora da marca, senão "bom negócio" e "botão" ficam iguais */
  --color-ok: #0E8A5F; --color-warn: #B7791F; --color-bad: #B23B3B;

  /* indicador de preço do módulo Shopping */
  --preco-caro: #B23B3B;      --preco-caro-bg: #FBE7E1;
  --preco-normal: #8A6D1F;    --preco-normal-bg: #F7EFD8;
  --preco-bom: #0E63C7;       --preco-bom-bg: #E4EFFC;
  --preco-excelente: #0E8A5F; --preco-excelente-bg: #E4F6E8;
  color-scheme: light;
}
/* ---- modo escuro: segue o sistema; data-theme força (assets/brand.js) ---- */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --color-bg: #071A36; --color-surface: var(--milia-confianca); --color-text: var(--milia-equilibrio);
  --color-text-2: #C9D7EA; --color-muted: #8FA6C6;
  --color-divider: rgba(214, 244, 239, 0.14);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 5%, var(--color-surface));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
  --color-neutral-300: color-mix(in srgb, var(--color-text) 18%, var(--color-surface));
  --color-neutral-400: color-mix(in srgb, var(--color-text) 30%, var(--color-surface));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 55%, var(--color-surface));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 66%, var(--color-surface));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 78%, var(--color-surface));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 90%, var(--color-surface));
  --color-accent-100: #0F4D5A;
  --color-accent-200: color-mix(in srgb, var(--color-accent) 30%, var(--color-surface));
  --color-accent-700: var(--milia-leveza); --color-accent-600: var(--milia-leveza);
  --color-accent-2-100: #0F4D5A; --color-accent-2-700: var(--milia-leveza);
  --color-section: #10386C; --color-section-glow: #10386C; --color-section-ghost: #1B4F8A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 14px rgba(0,0,0,.35); --shadow-lg: 0 18px 44px rgba(0,0,0,.45);
  --color-ok: #3FD39A; --color-warn: #F2C14E; --color-bad: #FF7A7A;
  --preco-caro-bg: #4A2323; --preco-normal-bg: #4A3D1A; --preco-bom-bg: #163A66; --preco-excelente-bg: #124233;
  --preco-caro: #FFB4B4; --preco-normal: #F2D28B; --preco-bom: #9CC8FF; --preco-excelente: #7FE3B8;
  color-scheme: dark;
}}
:root[data-theme="dark"] {
  --color-bg: #071A36; --color-surface: var(--milia-confianca); --color-text: var(--milia-equilibrio);
  --color-text-2: #C9D7EA; --color-muted: #8FA6C6;
  --color-divider: rgba(214, 244, 239, 0.14);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 5%, var(--color-surface));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
  --color-neutral-300: color-mix(in srgb, var(--color-text) 18%, var(--color-surface));
  --color-neutral-400: color-mix(in srgb, var(--color-text) 30%, var(--color-surface));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 55%, var(--color-surface));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 66%, var(--color-surface));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 78%, var(--color-surface));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 90%, var(--color-surface));
  --color-accent-100: #0F4D5A;
  --color-accent-200: color-mix(in srgb, var(--color-accent) 30%, var(--color-surface));
  --color-accent-700: var(--milia-leveza); --color-accent-600: var(--milia-leveza);
  --color-accent-2-100: #0F4D5A; --color-accent-2-700: var(--milia-leveza);
  --color-section: #10386C; --color-section-glow: #10386C; --color-section-ghost: #1B4F8A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 14px rgba(0,0,0,.35); --shadow-lg: 0 18px 44px rgba(0,0,0,.45);
  --color-ok: #3FD39A; --color-warn: #F2C14E; --color-bad: #FF7A7A;
  --preco-caro-bg: #4A2323; --preco-normal-bg: #4A3D1A; --preco-bom-bg: #163A66; --preco-excelente-bg: #124233;
  --preco-caro: #FFB4B4; --preco-normal: #F2D28B; --preco-bom: #9CC8FF; --preco-excelente: #7FE3B8;
  color-scheme: dark;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font: 15px/1.55 var(--font-body); -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
/* o atributo hidden precisa vencer os display:flex/grid dos blocos abaixo */
[hidden] { display: none !important; }

/* ---- nav mínima ---- */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 14px max(48px, calc((100% - 1160px) / 2 + 48px));
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  display: flex; align-items: center; gap: 10px; margin-right: auto;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; color: var(--color-text);
}
.nav-brand svg { display: block; flex: none; }
.nav-brand .wm { font-family: var(--font-heading); font-weight: 900; font-size: 22px; letter-spacing: -0.03em; line-height: 1; color: var(--color-text); }
.wm { font-family: var(--font-heading); font-weight: 900; letter-spacing: -0.03em; color: var(--color-text); }

/* ---- barra inferior de abas (celular) — montada por assets/brand.js ---- */
.tabbar { display: none; }
@media (max-width: 720px) {
  .nav .nav-links { display: none; }
  .nav { padding: 10px 16px; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface); border-top: 1px solid var(--color-divider);
  }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 4px 2px; font-size: 10.5px; font-weight: 800; color: var(--color-muted); text-decoration: none; border-radius: 10px; }
  .tabbar a svg { display: block; }
  .tabbar a.on { color: var(--color-accent-700); }
  .tabbar a.on svg { color: var(--color-accent); }
  body.has-tabbar .app-main, body.has-tabbar .page-main { padding-bottom: 96px; }
}

/* ---- animações do ícone (assets/brand.js) ---- */
.mi-logo .layer, .mi-logo .ponto { transform-box: fill-box; transform-origin: center; }
.mi-logo.breathe { animation: mi-breathe 4.5s ease-in-out infinite; }
.mi-logo.orbit .l2 { animation: mi-orb 2.6s linear infinite; }
.mi-logo.orbit .l3 { animation: mi-orb 3.4s linear infinite reverse; }
.mi-logo.orbit .l5 { animation: mi-orb 4.2s linear infinite; }
.mi-logo.orbit .ponto { animation: mi-pulse 1.4s ease-in-out infinite; }
.mi-logo.build .layer { opacity: 0; transform: scale(.6); filter: blur(4px); animation: mi-build 900ms cubic-bezier(.2,.8,.2,1) forwards; }
.mi-logo.build .l2 { animation-delay: 180ms } .mi-logo.build .l3 { animation-delay: 360ms }
.mi-logo.build .l4 { animation-delay: 540ms } .mi-logo.build .l5 { animation-delay: 720ms }
.mi-logo.build .ponto { opacity: 0; animation: mi-pousa 700ms cubic-bezier(.34,1.56,.64,1) 1050ms forwards; }
.mi-loader { display: inline-flex; align-items: center; justify-content: center; }
@keyframes mi-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.035) } }
@keyframes mi-orb { to { transform: rotate(360deg) } }
@keyframes mi-pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.25) } }
@keyframes mi-build { to { opacity: 1; transform: none; filter: none } }
@keyframes mi-pousa { 0% { opacity: 0; transform: translateY(-40px) scale(.4) } 60% { opacity: 1; transform: translateY(4px) scale(1.15) } 100% { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .mi-logo * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ---- layout de página ---- */
.page-main { padding: 56px 0 90px; min-height: 72vh; }
/* login/cadastro: telas curtas não precisam do respiro de página de app
   (Rafael 17/09 — scroll sobrando com só 2-3 campos na tela) */
.page-main.compact { padding: 28px 0 40px; min-height: 0; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
/* cabeçalho alinhado à esquerda (Nocturne), com a mesma largura do card
   centralizado para o texto casar com a borda esquerda do formulário */
.page-head { margin: 0 auto 26px; }
.page-head.w-auth { max-width: 430px; }
.page-head.w-cad { max-width: 640px; }
.eyebrow {
  display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 10px; font-weight: 800;
}
.page-head h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; margin-left: -0.02em; }
.page-head p.sub {
  margin: 0; font-size: 16px; max-width: 560px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* ---- card de formulário ---- */
.form-card {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: 22px 24px;
}
.auth-card { max-width: 430px; margin: 0 auto; }
.cad-card { max-width: 640px; margin: 0 auto; }

/* ---- campos ---- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.field > label, .field .chips-label {
  font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.field label .opt, .field .chips-label .opt {
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.field input, .field select {
  width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); transition: border-color 0.15s;
}
.field input::placeholder { color: var(--color-neutral-500); }
.field input:hover, .field select:hover {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.field input:focus-visible, .field select:focus-visible {
  border-color: var(--color-accent); outline-offset: 0;
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23837c72' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field select:invalid { color: var(--color-neutral-500); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* campos obrigatórios: asterisco no rótulo + legenda no topo do formulário */
.req { color: var(--color-bad); font-weight: 600; }
.req-note {
  font-size: 12.5px; margin: 0 0 14px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ---- erros de validação inline ---- */
.field-err { color: var(--color-bad); font-weight: 600; font-size: 12.5px; margin-left: 6px; }
.field.has-error input, .field.has-error select {
  border-color: var(--color-bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-bad) 13%, transparent);
}
.chk.has-error { color: var(--color-bad); }
.chk.has-error input[type="checkbox"] { outline: 2px solid var(--color-bad); outline-offset: 2px; }
.chk .field-err { flex-basis: 100%; margin: 2px 0 0 27px; }
.form-err { color: var(--color-bad); font-size: 13px; margin-top: 6px; min-height: 16px; }

/* ---- chips de programas de milhas (multi-seleção) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; padding: 7px 14px; cursor: pointer;
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 75%, transparent);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chip:hover { border-color: var(--color-accent); }
.chip:has(input:checked) {
  border-color: var(--color-accent); color: var(--color-accent-700);
  background: var(--color-accent-100);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- consentimentos (newsletter + termos) ---- */
.consents { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 16px; }
.chk {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  font-size: 14px; cursor: pointer; line-height: 1.45;
}
.chk input[type="checkbox"] {
  width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto;
  accent-color: var(--color-accent); cursor: pointer;
}
.chk input[type="checkbox"]:disabled { cursor: not-allowed; }
.chk input[type="checkbox"]:disabled ~ span { opacity: 0.6; }
.link-inline {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-accent-700); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-inline:hover { color: var(--color-accent); }
.termos-box {
  border: 1.5px solid var(--color-accent); background: var(--color-accent-100);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.termos-hint { font-size: 12.5px; color: var(--color-accent-700); font-weight: 600; margin-top: 8px; }
.termos-box:has(.chk.has-error) {
  border-color: var(--color-bad);
  background: color-mix(in srgb, var(--color-bad) 5%, var(--color-surface));
}

/* ---- requisitos de senha: checklist + barra de força ---- */
.pw-req { margin: -4px 0 15px; font-size: 12.5px; }
.pw-req ul {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px;
}
.pw-req li {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  padding-left: 18px; position: relative;
}
.pw-req li::before { content: "○"; position: absolute; left: 0; }
.pw-req li.ok { color: var(--color-accent-700); }
.pw-req li.ok::before { content: "✓"; font-weight: 700; }
.pw-bar { height: 5px; border-radius: 3px; background: var(--color-neutral-200); overflow: hidden; }
.pw-bar span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 0.2s, background 0.2s; }

/* ---- modal (Termos de Uso) ---- */
.modal-backdrop {
  position: fixed; inset: 0; display: none; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); z-index: 1000;
}
.modal-backdrop.open { display: grid; }
.modal {
  width: min(640px, 100%); max-height: 85vh; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); background: var(--color-surface);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px; border-bottom: 1px solid var(--color-divider);
}
.modal-head h3 { font-size: 19px; margin: 0; }
.modal-x {
  border: 0; background: transparent; font-size: 18px; cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); line-height: 1; padding: 4px;
}
.modal-x:hover { color: var(--color-text); }
.modal-body {
  padding: 20px 24px; overflow-y: auto; font-size: 14px; line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.modal-body h4 { font-size: 15px; margin: 18px 0 6px; color: var(--color-text); }
.modal-body p { margin: 0 0 10px; }
.modal-meta {
  font-size: 12.5px; margin-bottom: 14px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.modal-foot {
  display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px;
  border-top: 1px solid var(--color-divider); background: var(--color-bg);
}

/* ---- botões (identidade 22/09: primário preenchido com Tecnologia, pílula) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 8px 14px; border-radius: var(--radius-md); transition: background 0.15s;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); border-radius: 999px; }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 88%, white); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 85%, black); }
.btn-secondary { border-radius: 999px; }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-block { width: 100%; min-height: 42px; }

/* ---- sucesso (pós-submit) e link cruzado ---- */
.success-box { padding: 12px 0 4px; }
.success-box .ic {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-accent-100); color: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 16px;
}
.success-box h2 { font-size: 24px; margin: 0 0 8px; }
.success-box p {
  margin: 0 0 20px; max-width: 420px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.form-alt {
  margin: 18px 0 0; font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.form-alt a { color: var(--color-accent-700); font-weight: 600; }
.form-alt a:hover { color: var(--color-accent-700); }

/* ---- responsivo ---- */
@media (max-width: 720px) {
  .page-main { padding-top: 40px; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pw-req ul { grid-template-columns: 1fr; }
}