/* Landing pública: só tokens do design system da loja (nada de HEX nem font-size solto).
   Visual clean: fundo neutro, muito respiro, cartões de linha fina, uma única cor de destaque (o botão principal). */
main { overflow-x: clip; }

/* cabeçalho e rodapé discretos (valem também para a página Sobre) */
.ld-nav { display: flex; gap: var(--space-5); margin-left: auto; flex-wrap: wrap; align-items: center; }
.ld-nav a, .ld-rodape a { color: var(--ink); font-weight: 600; text-decoration: none; padding: var(--space-2) 0; }
.ld-nav a:hover, .ld-rodape a:hover { text-decoration: underline; }
.ld-nav a:focus-visible, .ld-rodape a:focus-visible { outline: var(--border-2) solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.ld-rodape { display: flex; flex-wrap: wrap; gap: var(--space-5); padding-bottom: var(--space-4); }

/* topo: texto à esquerda, mascote à direita, sem moldura */
.ld-topo { padding-top: var(--space-8, var(--space-6)); padding-bottom: var(--space-6); }
.ld-topo__texto { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; overflow-wrap: anywhere; max-width: 56ch; }
.ld-topo__texto h1, .ld-topo__texto p { margin: 0; }
.ld-lead { font-weight: 600; color: var(--ink-muted); }
.ld-botoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.ld-mascote { display: grid; place-items: center; }
.ld-mascote img { max-width: min(100%, 360px); height: auto; max-height: 100%; object-fit: contain; }

/* Studio: três cartões simples */
.ld-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-5); }
.ld-bloco { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; overflow-wrap: anywhere; padding: var(--space-5); background: var(--surface); border: var(--border-1) solid var(--border); border-radius: var(--card-radius); }
.ld-bloco h3, .ld-bloco p { margin: 0; }
.ld-bloco p { color: var(--ink-muted); }
.ld-bloco img { width: 100%; height: auto; border-radius: var(--radius-md); object-fit: cover; aspect-ratio: 16 / 9; }
.ld-bloco .cs-btn { align-self: flex-start; margin-top: auto; }

/* Store */
.ld-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-5); }
.ld-produtos .cs-card__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-aviso { color: var(--ink-muted); }

/* espaço entre as seções */
#studio.cs-section, #store.cs-section { padding-top: var(--space-8, var(--space-7)); padding-bottom: var(--space-8, var(--space-7)); }
#studio .cs-section-head, #store .cs-section-head { margin-bottom: var(--space-5); }

/* página Sobre (sobre.html) */
.sb-texto { display: flex; flex-direction: column; gap: var(--space-4); max-width: 70ch; min-width: 0; overflow-wrap: anywhere; }
.sb-texto p { margin: 0; }
.sb-mascote { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-5); align-items: center; }
.sb-mascote p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sb-mascote .ld-mascote img { max-width: min(100%, 320px); }

/* Estilo neo ligado: tira os blocos de cor, sombras duras e o rodapé escuro só nestas páginas */
html[data-estilo="neo"] .ld-topo .cs-hero { background: none; border: 0; box-shadow: none; padding: 0; }
html[data-estilo="neo"] .ld-topo__texto h1 { color: var(--ink); }
html[data-estilo="neo"] .ld-lead { color: var(--ink-muted); }
html[data-estilo="neo"] .ld-mascote { background: none; border: 0; padding: 0; }
html[data-estilo="neo"] .ld-bloco { background: var(--surface); border-width: var(--border-1); box-shadow: none; }
html[data-estilo="neo"] .ld-bloco h3 { color: var(--ink); }
html[data-estilo="neo"] #studio, html[data-estilo="neo"] #store.cs-section--alt { background: none; }
html[data-estilo="neo"] #store.cs-section--alt { border-top: var(--border-1) solid var(--border); }
html[data-estilo="neo"] .cs-header { border-bottom-width: var(--border-1); border-bottom-color: var(--border); }
html[data-estilo="neo"] .cs-footer { background: none; color: var(--ink); border-top: var(--border-1) solid var(--border); }
html[data-estilo="neo"] .cs-footer a { color: var(--ink); }
html[data-estilo="neo"] .cs-footer a:hover { color: var(--ink); text-decoration: underline; }
html[data-estilo="neo"] .sb-mascote .ld-mascote { background: none; }
html[data-estilo="neo"] .sb-texto { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }