body { margin: 0; background: #050509; }
  a { color: #FFD277; text-decoration: none; }
  a:hover { color: #FFEFCD; }
  [data-l="en"] { display: none; }
  [data-lang="en"] [data-l="en"] { display: inline; }
  [data-lang="en"] [data-l="pt"] { display: none; }
  @keyframes ld-spin { 0%, 6% { transform: rotate(-45deg); } 70%, 100% { transform: rotate(315deg); } }
  @keyframes ld-cone { 0%, 5% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 88%, 100% { opacity: 0; } }
  @keyframes ld-core { 0% { transform: scale(0); opacity: 0; } 5% { transform: scale(1.5); opacity: 1; } 11% { transform: scale(.9); } 16%, 100% { transform: scale(1); opacity: 1; } }
  @keyframes ld-halo { 0%, 5% { opacity: 0; } 14% { opacity: 1; } 70% { opacity: .6; } 88%, 100% { opacity: .32; } }
  @keyframes ld-ig { 0% { opacity: 0; transform: scale(.6); } 22% { opacity: 1; transform: scale(1.45); } 48% { transform: scale(.95); } 70%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
  .ld-mark .ld-core { transform-box: view-box; transform-origin: 100px 100px; animation: ld-core var(--beam-dur, 5s) cubic-bezier(.2,.9,.25,1) infinite; }
  .ld-mark .ld-beam { transform-box: view-box; transform-origin: 100px 100px; animation: ld-spin var(--beam-dur, 5s) cubic-bezier(.3,0,.18,1) infinite; }
  .ld-mark .ld-beamfade { animation: ld-cone var(--beam-dur, 5s) linear infinite; }
  .ld-mark .ld-halo { animation: ld-halo var(--beam-dur, 5s) ease-out infinite; }
  @keyframes ld-ring { 0%, 52% { opacity: 0; } 70%, 100% { opacity: 1; } }
  .ld-mark .ld-ring { animation: ld-ring var(--beam-dur, 5s) ease-in-out infinite; }
  .ld-mark .ld-lit { transform-box: view-box; opacity: 0; animation-duration: var(--beam-dur, 5s); animation-timing-function: cubic-bezier(.2,1.1,.3,1); animation-iteration-count: infinite; }
  @keyframes ld-i1 { 0%, 62% { opacity: 0; transform: scale(.6); } 64% { opacity: 1; transform: scale(1.45); } 67% { transform: scale(.95); } 70%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i2 { 0%, 6% { opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: scale(1.45); } 11% { transform: scale(.95); } 14%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i3 { 0%, 14% { opacity: 0; transform: scale(.6); } 16% { opacity: 1; transform: scale(1.45); } 19% { transform: scale(.95); } 22%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i4 { 0%, 22% { opacity: 0; transform: scale(.6); } 24% { opacity: 1; transform: scale(1.45); } 27% { transform: scale(.95); } 30%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i5 { 0%, 30% { opacity: 0; transform: scale(.6); } 32% { opacity: 1; transform: scale(1.45); } 35% { transform: scale(.95); } 38%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i6 { 0%, 38% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.45); } 43% { transform: scale(.95); } 46%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i7 { 0%, 46% { opacity: 0; transform: scale(.6); } 48% { opacity: 1; transform: scale(1.45); } 51% { transform: scale(.95); } 54%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i8 { 0%, 54% { opacity: 0; transform: scale(.6); } 56% { opacity: 1; transform: scale(1.45); } 59% { transform: scale(.95); } 62%, 100% { opacity: 1; transform: scale(1); } }
  .ld-mark .ld-i1 { animation-name: ld-i1; }
  .ld-mark .ld-i2 { animation-name: ld-i2; }
  .ld-mark .ld-i3 { animation-name: ld-i3; }
  .ld-mark .ld-i4 { animation-name: ld-i4; }
  .ld-mark .ld-i5 { animation-name: ld-i5; }
  .ld-mark .ld-i6 { animation-name: ld-i6; }
  .ld-mark .ld-i7 { animation-name: ld-i7; }
  .ld-mark .ld-i8 { animation-name: ld-i8; }
  @media (prefers-reduced-motion: reduce) {
    .ld-mark .ld-core, .ld-mark .ld-beam, .ld-mark .ld-beamfade, .ld-mark .ld-halo, .ld-mark .ld-lit, .ld-mark .ld-ring { animation: none; opacity: 1; }
    .ld-mark .ld-beamfade { opacity: 0; }
  }
  /* !important porque cada painel carrega display:flex inline (o editor do
     canvas edita layout por atributo style; a troca de aparelho é da folha). */
  [data-plat="mac"] .ld-pane:not([data-device="mac"]),
  [data-plat="iphone"] .ld-pane:not([data-device="iphone"]),
  [data-plat="watch"] .ld-pane:not([data-device="watch"]) { display: none !important; }
  @media (max-width: 940px) {
    .ld-pane { gap: 20px !important; }
    .ld-pane-notes { flex: 1 1 100% !important; }
  }
  /* No celular o menu vira uma faixa de uma linha só, que rola na horizontal:
     empilhado em três linhas ele comia meia tela. */
  @media (max-width: 760px) {
    [data-r="areamenu"] {
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      overflow-x: auto;
      scrollbar-width: none;
      max-width: calc(100vw - 32px);
      -webkit-overflow-scrolling: touch;
    }
    [data-r="areamenu"]::-webkit-scrollbar { display: none; }
    [data-r="areamenu"] > * { flex: 0 0 auto; }
  }
  .ld-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
  details.ld-faq summary { list-style: none; cursor: pointer; }
  details.ld-faq summary::-webkit-details-marker { display: none; }
  details.ld-faq summary svg { transition: transform .2s ease; }
  details.ld-faq[open] summary svg { transform: rotate(45deg); }
  @media (max-width: 940px) {
    [data-r="sec"] { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
    [data-r="navinner"] { padding: 12px 20px !important; }
    [data-r="navlinks"] { gap: 14px !important; }
    [data-r="navlink"] { display: none !important; }
    [data-r="hero"] { grid-template-columns: 1fr !important; gap: 40px !important; }
    [data-r="heromark"] { max-width: 300px !important; }
    [data-r="bento"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    [data-r="bento"] > * { grid-column: span 2 !important; grid-row: auto !important; }
    [data-r="two"] { grid-template-columns: 1fr !important; gap: 40px !important; }
    [data-r="win"] { overflow-x: auto !important; }
    [data-r="winbody"] { min-width: 940px; }
  }
  @media (max-width: 620px) {
    [data-r="bento"] { grid-template-columns: 1fr !important; }
    [data-r="bento"] > * { grid-column: span 1 !important; min-height: 0 !important; padding: 22px !important; }
    [data-r="cta"] > a { flex: 1 1 100%; text-align: center; }
    [data-r="navinner"] { padding: 12px 16px !important; }
    [data-r="navlinks"] { gap: 10px !important; }
    [data-r="wordmark"] { display: none !important; }
    [data-r="navcta"] { padding: 9px 14px !important; font-size: 13px !important; }
  }

/* ── Menu flutuante: chips de área e plataforma ───────────────── */
.ld-lang-chip {
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9CA0B8;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ld-lang-chip.is-on { background: #FFD277; color: #1A1207; }

.ld-area-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: transparent;
  color: #9CA0B8;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ld-area-chip[data-goto-area="foco"]    { --ld-c: #3B82F6; --ld-rgb: 59, 130, 246; }
.ld-area-chip[data-goto-area="agua"]    { --ld-c: #38BDF8; --ld-rgb: 56, 189, 248; }
.ld-area-chip[data-goto-area="treino"]  { --ld-c: #A78BFA; --ld-rgb: 124, 58, 237; }
.ld-area-chip[data-goto-area="saude"]   { --ld-c: #F472B6; --ld-rgb: 244, 114, 182; }
.ld-area-chip[data-goto-area="rotinas"] { --ld-c: #818CF8; --ld-rgb: 129, 140, 248; }
.ld-area-chip[data-goto-area="notas"]   { --ld-c: #2DD4BF; --ld-rgb: 45, 212, 191; }
.ld-area-chip.is-on {
  border-color: rgba(var(--ld-rgb), 0.5);
  background: rgba(var(--ld-rgb), 0.15);
  color: var(--ld-c);
}
.ld-area-chip:hover  { border-color: rgba(var(--ld-rgb), 0.35); color: var(--ld-c); }
.ld-area-chip:focus-visible,
.ld-plat-chip:focus-visible,
.ld-lang-chip:focus-visible { outline: 2px solid #FFD277; outline-offset: 2px; }

.ld-plat-chip {
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: transparent;
  color: #9CA0B8;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ld-plat-chip.is-on {
  border-color: rgba(255, 210, 119, 0.4);
  background: rgba(255, 210, 119, 0.13);
  color: #FFD277;
}
.ld-plat-chip:hover { border-color: rgba(255, 210, 119, 0.28); color: #FFD277; }

/* ── Rolagem suave e âncoras sob o cabeçalho fixo ─────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id^="area-"] { scroll-margin-top: 150px; }
:target { scroll-margin-top: 96px; }

/* ── Menu flutuante em telas estreitas ────────────────────────── */
@media (max-width: 720px) {
  [data-r="areamenu"] { gap: 5px !important; padding: 7px 9px !important; }
  .ld-area-chip { padding: 6px 10px; font-size: 11.5px; }
  .ld-plat-chip { padding: 6px 9px; font-size: 9.5px; }
}