/* Orena One — página de demonstração (/demonstracao, DEMO_CONVERSION_UX_01A).
   Camada LOCAL, carregada só nessa página e fora do snapshot do DS: só tokens
   de orena.tokens.css e as transparências --site-primary-* de orena.site.css.
   Mobile-first: uma coluna (proposta curta → formulário → detalhes); de 768px
   a 1023px a coluna fica estreita; a partir de 1024px, duas colunas com o
   formulário à direita. Sem cor literal, imagem, motion ou max-width em media. */

.o-demo { padding: var(--orena-space-10) 0 var(--orena-section-spacing); }
.o-demo [hidden] { display: none; }
/* O WhatsApp flutuante cobria o formulário (canto do textarea e do botão em
   1024px). Aqui o canal aparece no conteúdo e no rodapé (mesma lógica do 01F4). */
.o-site-whatsapp { display: none; }

.o-demo__grid { display: grid; gap: var(--orena-space-8); grid-template-columns: minmax(0, 1fr); }
.o-demo__grid > * { min-width: 0; }
.o-demo__titulo { font-size: clamp(30px, 2.5vw + 20px, 48px); }
.o-demo__lead { max-width: 52ch; }

/* Formulário: card do DS com o mesmo acento do painel "um dia na loja". */
.o-demo__form { gap: var(--orena-space-5); border-top: 3px solid var(--orena-primary); box-shadow: var(--orena-shadow-md); }
.o-demo__form-topo { display: grid; gap: var(--orena-space-1); }
.o-demo__form-titulo { margin: 0; font-size: var(--orena-font-size-2xl); font-weight: var(--orena-font-weight-extrabold); line-height: var(--orena-line-height-tight); color: var(--orena-text-primary); }
.o-demo__form-titulo:focus { outline: none; }
.o-demo__ajuda { margin: 0; font-size: var(--orena-font-size-sm); line-height: var(--orena-line-height-normal); color: var(--orena-text-muted); }
.o-demo__erro { margin: 0; font-size: var(--orena-font-size-md); font-weight: var(--orena-font-weight-medium); color: var(--orena-danger); }
.o-demo__select { color-scheme: dark; cursor: pointer; }
.o-demo__textarea { resize: vertical; line-height: var(--orena-line-height-normal); }
.o-demo__form[aria-busy="true"] .o-site-input { opacity: 0.8; }

/* Sucesso: substitui o formulário e recebe o foco. */
.o-demo__sucesso { display: grid; gap: var(--orena-space-3); padding: var(--orena-space-8) var(--orena-space-6); border: 1px solid var(--orena-border-strong); border-top: 3px solid var(--orena-success); border-radius: var(--orena-radius-md); background: var(--orena-surface); }
.o-demo__sucesso p { margin: 0; }
.o-demo__sucesso-icone { font-size: 32px; color: var(--orena-success); }
.o-demo__sucesso-links { display: flex; flex-wrap: wrap; gap: var(--orena-space-2) var(--orena-space-6); margin-top: var(--orena-space-2); }
.o-demo__sucesso-links a { display: inline-flex; align-items: center; min-height: var(--orena-hit-target-touch); }

/* Detalhes: benefícios, passos, Orena Assist, WhatsApp e a nota fiscal. */
.o-demo__detalhes { display: grid; gap: var(--orena-space-8); }
.o-demo__detalhes .o-site-note { margin: 0; }
.o-demo__beneficios, .o-demo__passos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--orena-space-4); }
.o-demo__beneficios li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--orena-space-4); align-items: start; color: var(--orena-text-secondary); line-height: var(--orena-line-height-relaxed); }
.o-demo__beneficios .o-site-card__icon { margin: 0; }
.o-demo__beneficios strong { display: block; font-size: var(--orena-font-size-lg); color: var(--orena-text-primary); }
.o-demo__passos { counter-reset: o-demo-passo; gap: var(--orena-space-3); }
.o-demo__passos li { counter-increment: o-demo-passo; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--orena-space-3); padding-top: var(--orena-space-3); border-top: 1px solid var(--orena-border); color: var(--orena-text-secondary); line-height: var(--orena-line-height-relaxed); }
.o-demo__passos li::before { content: counter(o-demo-passo, decimal-leading-zero); font-weight: var(--orena-font-weight-bold); font-variant-numeric: tabular-nums; color: var(--orena-primary); }
.o-demo__assist { display: flex; gap: var(--orena-space-3); margin: 0; padding: var(--orena-space-4) var(--orena-space-5); border: 1px solid var(--site-primary-line); border-radius: var(--orena-radius-md); background: var(--site-primary-soft); color: var(--orena-text-secondary); line-height: var(--orena-line-height-relaxed); }
.o-demo__assist .material-symbols-outlined { flex: none; font-size: 20px; color: var(--orena-primary); }
.o-demo__whatsapp { margin: 0; color: var(--orena-text-secondary); }

@media (min-width: 768px) {
    .o-demo__grid { max-width: 760px; }
    .o-demo__form { padding: var(--orena-space-8); }
}

@media (min-width: 1024px) {
    .o-demo { padding-top: var(--orena-space-16); }
    .o-demo__grid {
        max-width: var(--orena-container-max);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "intro painel" "detalhes painel";
        column-gap: var(--orena-space-16);
        row-gap: var(--orena-space-10);
        align-items: start;
    }
    .o-demo__intro { grid-area: intro; }
    .o-demo__painel { grid-area: painel; }
    .o-demo__detalhes { grid-area: detalhes; }
}