/* ==========================================================================
   Desenrola Digital · tokens de marca do site
   Fonte da verdade: Manual de Design v5.7
   (outro-pc/desenrola-social/docs/manual-design-desenrola-v5_7.html)
   - 3 sementes que NÃO mudam entre temas; tudo o mais deriva delas (§01–02).
   - Escuro é o padrão; claro em html[data-theme="light"] (§03).
   - Nada de cor cravada no conteúdo: só var(--…). Branco puro só sobre laranja.
   - Laranja = ação (e o quadrado da marca). Glow = profundidade, foco, links.
   A landing é "ecossistema de apoio" (§14): marca da casa, sem white-label.
   ========================================================================== */

:root{
  /* as 3 sementes (§02) */
  --navy:#0A0E20;
  --orange:#D44A00;
  --glow:#2E50C8;

  /* derivadas — não edite à mão */
  --navy-lift: color-mix(in oklab, var(--navy), var(--glow) 16%);
  --orange-lt: color-mix(in oklab, var(--orange), white 16%);
  /* extensão do site: glow legível como TEXTO sobre o marinho (glow puro dá 2,8:1).
     Derivado da semente, então acompanha uma troca de marca. */
  --glow-lt: color-mix(in oklab, var(--glow), white 45%);

  --fundo: color-mix(in oklab, var(--navy) 96%, #000);
  --ink: #EAF1FB;
  --ink-2: color-mix(in srgb, #fff 64%, var(--navy));
  --ink-3: #8FA3BB;
  --on-accent: #fff;

  /* vidro (§05): branco translúcido sobre o marinho */
  --g05: color-mix(in srgb, #fff 5%, transparent);
  --g06: color-mix(in srgb, #fff 6%, transparent);
  --g09: color-mix(in srgb, #fff 9%, transparent);
  --g14: color-mix(in srgb, #fff 14%, transparent);
  --g22: color-mix(in srgb, #fff 22%, transparent);
  --border: color-mix(in srgb, #fff 14%, transparent);
  --border-soft: color-mix(in srgb, #fff 8%, transparent);

  /* o que flutua sobre conteúdo e as áreas de chat são OPACOS (§05.1, §09.5, §15) */
  --superficie-flutuante: linear-gradient(var(--g05), var(--g05)), var(--fundo);
  --solido: color-mix(in srgb, #fff 6%, var(--fundo));
  --solido-2: color-mix(in srgb, #fff 11%, var(--fundo));
  --campo-fundo: color-mix(in srgb, var(--navy) 90%, #fff 10%);
  --campo-borda: color-mix(in srgb, #fff 40%, var(--navy));

  /* semânticas: só ESTADO, nunca estilo (§01) */
  --ok:#2FBF71; --warn:#E4B53C; --bad:#E5484D;
  --ok-suave: color-mix(in srgb, var(--ok) 18%, transparent);
  --warn-suave: color-mix(in srgb, var(--warn) 20%, transparent);
  --bad-suave: color-mix(in srgb, var(--bad) 18%, transparent);
  --glow-suave: color-mix(in srgb, var(--glow) 22%, transparent);
  --ok-txt: color-mix(in oklab, var(--ok), white 30%);
  --warn-txt: var(--warn);
  --bad-txt: color-mix(in oklab, var(--bad), white 25%);
  --ativo-fundo: color-mix(in srgb, var(--orange) 16%, transparent);
  --ativo-borda: color-mix(in srgb, var(--orange) 32%, transparent);

  /* sombras (§06): fria em repouso, glow no hover, laranja só no CTA */
  --sh1: 0 1px 2px color-mix(in srgb, #000 25%, transparent);
  --sh3: 0 6px 16px color-mix(in srgb, #000 35%, transparent);
  --sh4: 0 10px 26px color-mix(in srgb, #000 40%, transparent);
  --sh6: 0 28px 60px color-mix(in srgb, #000 55%, transparent);
  --sh-orange: 0 6px 18px color-mix(in srgb, var(--orange) 45%, transparent);
  --sh-hover: 0 16px 40px color-mix(in oklab, var(--glow), transparent 52%);
  --ring: 0 0 0 3px color-mix(in srgb, var(--glow) 55%, transparent);

  /* fundo: marinho + dois halos (glow no topo, laranja embaixo) (§13.2) */
  --halos:
    radial-gradient(60% 50% at 18% -8%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 70%),
    radial-gradient(45% 40% at 96% 108%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 72%);

  /* raio (§05) e movimento (§07) */
  --r-campo:12px; --r-widget:16px; --r:20px; --r-pill:999px;
  --t-rapido:.15s ease; --t:.18s ease; --t-tema:.25s ease;

  color-scheme: dark;
}

/* Tema claro (§03): as sementes ficam; só texto, vidro, fundo e sombras mudam. */
html[data-theme="light"]{
  color-scheme: light;
  --fundo: color-mix(in oklab, #fff 96%, var(--navy));          /* papel */
  --ink: color-mix(in oklab, var(--navy), white 6%);
  --ink-2: color-mix(in oklab, var(--navy), white 32%);
  --ink-3: color-mix(in oklab, var(--navy), #8FA3BB 50%);
  --glow-lt: var(--glow);                                         /* glow puro já dá 6,2:1 no papel */
  --navy-lift: color-mix(in oklab, var(--glow), white 86%);

  --g05: color-mix(in oklab, var(--navy), transparent 96%);      /* vidro marinho */
  --g06: color-mix(in oklab, var(--navy), transparent 93.5%);
  --g09: color-mix(in oklab, var(--navy), transparent 90%);
  --g14: color-mix(in oklab, var(--navy), transparent 84%);
  --g22: color-mix(in oklab, var(--navy), transparent 74%);
  --border: color-mix(in oklab, var(--navy), transparent 85%);
  --border-soft: color-mix(in oklab, var(--navy), transparent 91%);

  --solido: color-mix(in oklab, #fff 99%, var(--navy));
  --solido-2: color-mix(in oklab, #fff 94%, var(--navy));
  --campo-fundo: #fff;
  --campo-borda: color-mix(in srgb, var(--navy) 55%, #fff);

  --ok-txt: color-mix(in oklab, var(--ok), black 42%);
  --warn-txt: color-mix(in oklab, var(--warn), black 55%);
  --bad-txt: color-mix(in oklab, var(--bad), black 30%);
  --glow-suave: color-mix(in srgb, var(--glow) 12%, transparent);

  --sh1: 0 1px 2px color-mix(in oklab, var(--navy), transparent 90%);
  --sh3: 0 8px 20px color-mix(in oklab, var(--navy), transparent 88%);
  --sh4: 0 12px 28px color-mix(in oklab, var(--navy), transparent 86%);
  --sh6: 0 30px 60px color-mix(in oklab, var(--navy), transparent 82%);
  --sh-hover: 0 16px 40px color-mix(in oklab, var(--glow), transparent 70%);

  --halos:
    radial-gradient(60% 50% at 18% -8%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 70%),
    radial-gradient(45% 40% at 96% 108%, color-mix(in srgb, var(--orange) 8%, transparent), transparent 72%);
}

/* ---------- base ---------- */
html{overflow-x:clip}
body{background:var(--fundo);color:var(--ink);-webkit-font-smoothing:antialiased}
/* halos numa camada fixa composta — NUNCA background-attachment:fixed (faixa branca no Safari) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--halos);transform:translateZ(0)}
::selection{background:var(--glow-suave)}
:focus-visible{outline:2px solid var(--glow-lt);outline-offset:2px}
/* foco: contorno sólido em glow (6:1+ nos dois temas) e não box-shadow, para nenhuma sombra de
   componente (CTA, vidro) apagar o foco. O --ring fica para campo de formulário (§06, §16). */
:where(input,select,textarea):focus-visible{outline:none;border-color:var(--glow);box-shadow:var(--ring)}
html.trocando-tema, html.trocando-tema *{transition:background-color var(--t-tema),color var(--t-tema),border-color var(--t-tema),box-shadow var(--t-tema)!important}

/* ---------- a marca: o logo REAL (o "d" com a estrela, logo-desenrola.png) + nome.
   NUNCA desenhar a marca com letra em CSS (quadrado com "D"): o Thomaz proibiu em 30/09/2026. */
.dd-marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.dd-marca-logo{width:36px;height:36px;border-radius:10px;display:block;flex:none}
.dd-marca-nome{display:flex;flex-direction:column;line-height:1.05}
.dd-marca-nome b{font-weight:800;letter-spacing:-.01em}
.dd-marca-nome small{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- botões (§16) ---------- */
.dd-btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);padding:12px 20px;min-height:44px;font-weight:700;font-size:15px;line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color var(--t-rapido),box-shadow var(--t-rapido),transform .05s}
.dd-btn:active{transform:translateY(1px)}
.dd-btn-cta{background:var(--orange);color:var(--on-accent);box-shadow:var(--sh-orange)}
.dd-btn-cta:hover{background:var(--orange-lt)}
.dd-btn-ghost{background:var(--g09);color:var(--ink);border-color:var(--border)}
.dd-btn-ghost:hover{background:var(--g14)}
.dd-btn-texto{background:transparent;color:var(--ink-2)}
.dd-btn-texto:hover{color:var(--ink);background:var(--g05)}

/* ---------- cartão de vidro (§10) ---------- */
.dd-vidro{background:var(--g05);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh1)}
.dd-vidro.flutua{transition:transform var(--t),box-shadow var(--t)}
.dd-vidro.flutua:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}

/* ---------- pílulas: estado, não decoração (§10) ---------- */
.dd-pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:4px 10px;font-size:11.5px;font-weight:700;border:1px solid var(--border);background:var(--g09);color:var(--ink-2)}
.dd-pill.ok{background:var(--ok-suave);border-color:transparent;color:var(--ok-txt)}
.dd-pill.warn{background:var(--warn-suave);border-color:transparent;color:var(--warn-txt)}
.dd-pill.bad{background:var(--bad-suave);border-color:transparent;color:var(--bad-txt)}
.dd-pill.info{background:var(--glow-suave);border-color:transparent;color:var(--glow-lt)}

/* ---------- paleta de parques (§09.7): cor do lugar, texto branco ---------- */
.selo.pk{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:3px 10px;font-size:11px;font-weight:700;color:#fff}
.selo.pk-MK{background:#1e5fa8}.selo.pk-EPCOT{background:#5b3fa0}.selo.pk-HS{background:#b03a2e}.selo.pk-AK{background:#2e7d32}

/* ---------- ícones de linha por máscara (§08) ---------- */
.ic{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;flex:none}
.ic-check{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.2 4.2L19 7'/></svg>")}
.ic-seta{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>")}
.ic-sol{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2.5v2M12 19.5v2M4.6 4.6L6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4L6 18M18 6l1.4-1.4'/></svg>")}
.ic-lua{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z'/></svg>")}
.ic-aviao{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17.8 19.2L16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/></svg>")}
.ic-faisca{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/><path d='M19 16v4M17 18h4'/></svg>")}
.ic-chat{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/></svg>")}
.ic-funil{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16l-6 7.5V19l-4-2v-4.5z'/></svg>")}
.ic-camadas{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9 5-9 5-9-5z'/><path d='M3 13l9 5 9-5'/></svg>")}
.ic-mapa{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4L3 6.5v13L9 17l6 2.5 6-2.5v-13L15 6.5z'/><path d='M9 4v13M15 6.5v13'/></svg>")}
.ic[class*="ic-"]{-webkit-mask-image:var(--i);mask-image:var(--i)}

/* ---------- botão de tema (§13.6) ---------- */
.botao-tema{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--g05);color:var(--ink-2);cursor:pointer;font-size:19px;transition:background-color var(--t-rapido),color var(--t-rapido)}
.botao-tema:hover{background:var(--g09);color:var(--ink)}
.botao-tema .ic-lua{display:none}
html[data-theme="light"] .botao-tema .ic-sol{display:none}
html[data-theme="light"] .botao-tema .ic-lua{display:inline-block}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  /* §07: desligar o decorativo — sem hover-lift nem "afundar" do botão */
  .dd-vidro.flutua:hover,.dd-btn:active{transform:none}
}