/* =========================================================
   DEMO 1 v4 · "Abrindo o pacote" em HTML real (sem escala)
   Escopo: #demo-1. Uma camada por cena; a cena ativa vem de .demo-inner[data-scene].
   Tipografia interna: mínimo de 16px reais em rótulos e trechos.
   ========================================================= */
#demo-1 .demo-stage.is-fluid { height: clamp(270px, calc(100svh - 69px - 262px), 540px) !important; container-type: size; }
@media (max-width: 699px) { #demo-1 .demo-stage.is-fluid { height: clamp(330px, calc(100svh - 69px - 250px), 420px) !important; } }
#demo-1 .demo-stage.is-fluid .demo-inner { position: absolute; inset: 0; width: auto !important; height: auto !important; transform: none !important; left: 0 !important; }
.d1f { position: absolute; inset: 0; display: grid; padding: clamp(12px, 4cqh, 28px) clamp(12px, 3cqw, 36px); color: var(--marfim); }
.d1-p { grid-area: 1 / 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4cqw, 28px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
#demo-1 .demo-inner[data-scene="1"] .d1-p1, #demo-1 .demo-inner[data-scene="2"] .d1-p2, #demo-1 .demo-inner[data-scene="3"] .d1-p3,
#demo-1 .demo-inner[data-scene="4"] .d1-p4, #demo-1 .demo-inner[data-scene="5"] .d1-p5, #demo-1 .demo-inner[data-scene="6"] .d1-p6,
#demo-1 .demo-inner[data-scene="7"] .d1-p7 { opacity: 1; visibility: visible; }
#demo-1 .demo-inner[data-scene="1"] .d1-p1 .st, #demo-1 .demo-inner[data-scene="2"] .d1-p2 .st, #demo-1 .demo-inner[data-scene="3"] .d1-p3 .st,
#demo-1 .demo-inner[data-scene="4"] .d1-p4 .st, #demo-1 .demo-inner[data-scene="5"] .d1-p5 .st, #demo-1 .demo-inner[data-scene="6"] .d1-p6 .st,
#demo-1 .demo-inner[data-scene="7"] .d1-p7 .st { animation: d1in .42s var(--ease) calc(var(--i, 0) * 70ms) both; }
@keyframes d1in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* cartões base */
.d1f h4 { margin: 0 0 10px; font-size: 18px; font-weight: 750; letter-spacing: -.01em; color: var(--carvao); }
.d1-in { width: clamp(84px, 28cqh, 150px); aspect-ratio: 1; border-radius: 18px; background: var(--marfim); color: var(--carvao); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: clamp(16px, 5cqh, 20px); font-weight: 700; box-shadow: 0 12px 26px rgba(0, 0, 0, .35); }
.d1-in svg, .d1-fly svg { width: 40%; height: auto; fill: none; stroke: var(--cobre); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d1-ins { display: grid; grid-template-columns: repeat(2, auto); gap: clamp(8px, 2cqh, 14px); }
.d1-arrow { width: clamp(28px, 4cqw, 52px); color: var(--cobre-claro); flex: none; }
.d1-box { position: relative; width: clamp(120px, 52cqh, 270px); aspect-ratio: 9 / 8; border-radius: 26px; background: linear-gradient(180deg, #f6f0e7, #e7dccb); display: flex; align-items: flex-end; justify-content: center; padding-bottom: clamp(10px, 4cqh, 22px); box-shadow: 0 24px 50px rgba(0, 0, 0, .5); overflow: hidden; flex: none; }
.d1-box::before { content: ""; position: absolute; left: 0; right: 0; top: 28%; height: 11%; background: var(--cobre); }
.d1-box::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 10%; transform: translateX(-50%); background: rgba(168, 92, 58, .85); }
.d1-box span { position: relative; z-index: 1; font-size: clamp(17px, 6cqh, 30px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-align: center; color: var(--carvao); background: var(--marfim); padding: 6px 14px; border-radius: 12px; }
.d1-box--on { box-shadow: 0 0 0 10px rgba(215, 160, 109, .22), 0 24px 50px rgba(0, 0, 0, .5); }
.d1-p2 { flex-direction: column; gap: clamp(10px, 3cqh, 22px); }
.d1-flyrow { display: flex; gap: 14px; }
.d1-fly { width: clamp(40px, 12cqh, 64px); aspect-ratio: 1; border-radius: 50%; background: var(--marfim); display: grid; place-items: center; }
#demo-1 .demo-inner[data-scene="2"] .d1-fly { animation: d1fly 1.1s var(--ease) calc(.15s + var(--i) * 110ms) both; }
@keyframes d1fly { 0% { opacity: 0; transform: translateY(-8px); } 30% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(clamp(60px, 22cqh, 120px)) scale(.4); } }

/* cena 3 e 4: peças grandes */
.d1-art { margin: 0; width: min(calc((100cqw - 2 * clamp(12px, 3cqw, 36px) - 2 * clamp(10px, 2.4cqw, 28px)) / 3), calc((100cqh - 2 * clamp(12px, 4cqh, 28px) - 34px) * .8)); display: flex; flex-direction: column; gap: 8px; }
.d1-art .piece, .d1-pair .piece { border-radius: clamp(6px, 1.4cqh, 12px); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
.d1f figcaption { font-size: 16px; font-weight: 650; color: var(--marfim); text-align: center; }
.d1f figcaption span { color: var(--texto-claro-2); font-weight: 500; }
.d1-pair { margin: 0; width: min(calc((100cqw - 2 * clamp(12px, 3cqw, 36px) - 2 * clamp(10px, 2.4cqw, 28px)) / 3), calc((100cqh - 2 * clamp(12px, 4cqh, 28px) - 34px) / .9)); display: flex; flex-direction: column; gap: 8px; }
.d1-pair-imgs { display: grid; }
.d1-pair-imgs .piece { grid-area: 1 / 1; }
.d1-pair-imgs .piece--feed { width: 64%; justify-self: start; align-self: end; margin-top: 9%; position: relative; }
.d1-pair-imgs .piece--vert { width: 47%; justify-self: end; align-self: start; }

/* cena 5: textos agrupados (3 + 3 + 1) */
.d1-p5 { flex-direction: column; align-items: stretch; gap: clamp(8px, 2cqh, 14px); }
.d1-grp { display: grid; grid-template-columns: clamp(150px, 18cqw, 210px) 1fr; gap: 12px; align-items: center; }
.d1-grp h4 { margin: 0; color: var(--marfim); font-size: 18px; line-height: 1.2; }
.d1-grp h4 strong { display: block; font-size: clamp(26px, 8cqh, 40px); line-height: 1; color: var(--cobre-claro); letter-spacing: -.03em; }
.d1-grp ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.d1-grp li { background: var(--marfim); color: var(--carvao); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.3; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.d1-grp li b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.d1-grp li b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cobre); flex: none; }
.d1-grp.is-status li b::before { background: transparent; border: 2.5px solid var(--cobre); }
.d1-grp.is-wa li b::before { border-radius: 2px; }
.d1-grp li span { color: var(--tinta-2); }

/* cena 6: calendário + planilha */
.d1-cal, .d1-sheet { background: var(--marfim); color: var(--carvao); border-radius: 18px; padding: clamp(12px, 3cqh, 20px); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.d1-cal { flex: 1.5 1 0; max-width: 640px; }
.d1-sheet { flex: 1 1 0; max-width: 400px; }
.d1-cal ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.d1-cal li { background: #fff; border-radius: 10px; padding: 8px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.d1-cal li i, .d1-key .k { display: block; width: 22px; height: clamp(22px, 9cqh, 40px); border-radius: 4px; background: #2B4CE0; }
.d1-cal li.s i, .d1-key .k.s { width: 14px; background: #12203F; }
.d1-cal li.w i, .d1-key .k.w { width: 24px; height: 18px; border-radius: 8px 8px 8px 2px; background: var(--cobre); }
.d1-key { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; color: var(--tinta-2); }
.d1-key .k { height: 16px !important; display: inline-block; margin-left: 6px; }
.d1-key .k:first-child { margin-left: 0; }
.d1-row { display: grid; grid-template-columns: 1fr 52px 22px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linha-clara); font-size: 16px; }
.d1-row--h { font-size: 16px; font-weight: 700; color: var(--tinta-2); padding-top: 0; }
.d1-row em { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--cobre); position: relative; }
.d1-row em.ok::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--cobre); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* cena 7: resumo */
.d1-p7 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; align-content: center; gap: clamp(10px, 2cqw, 18px); }
.d1-tile { background: rgba(243, 236, 226, .06); border: 1px solid var(--linha-escura); border-radius: 18px; padding: clamp(12px, 3cqh, 22px); display: flex; flex-direction: column; gap: 6px; }
.d1-tile strong { font-size: clamp(36px, 14cqh, 72px); line-height: 1; letter-spacing: -.04em; color: var(--marfim); }
.d1-tile > span { font-size: 18px; font-weight: 650; line-height: 1.25; }
.d1-tile--cu { background: var(--cobre); border-color: var(--cobre); }
.d1-tile--cu strong { color: #fff; }
.d1-sum { margin: auto 0 0; font-size: 16px; color: var(--texto-claro-2); line-height: 1.35; }
.d1-minis { margin-top: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; align-items: end; }
.d1-minis .piece { border-radius: 3px; }
.d1-dots { margin-top: auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.d1-dots i { height: 10px; border-radius: 3px; background: var(--cobre-claro); }


/* palcos altos (desktop): a composição cresce junto com o palco, sem miniaturizar */
@media (min-width: 700px) {
  .d1-p5 { gap: clamp(8px, 3cqh, 22px); }
  .d1-grp { grid-template-columns: clamp(150px, 20cqw, 240px) 1fr; }
  .d1-grp h4 { font-size: clamp(18px, 3.8cqh, 24px); }
  .d1-grp h4 strong { font-size: clamp(26px, 9cqh, 52px); }
  .d1-grp ul { gap: clamp(10px, 2cqh, 16px); }
  .d1-grp li { font-size: clamp(16px, 3.7cqh, 21px); padding: clamp(8px, 2.6cqh, 16px) clamp(12px, 2.6cqh, 18px); gap: 4px; }
  .d1-grp li b { font-size: inherit; }
  .d1f h4 { font-size: clamp(18px, 4cqh, 24px); }
  .d1-cal li, .d1-row, .d1-key, .d1-row--h { font-size: clamp(16px, 3.6cqh, 20px); }
  .d1-row { padding: clamp(6px, 1.6cqh, 10px) 0; }
  .d1-tile > span, .d1-sum { font-size: clamp(16px, 3.6cqh, 21px); }
}

/* celular */
@media (max-width: 699px) {
  .d1-p1 { flex-direction: column; gap: 6px; }
  .d1-in { width: auto; min-width: 96px; aspect-ratio: auto; padding: 10px 12px; flex-direction: row; gap: 8px; border-radius: 14px; font-size: 16px; justify-content: flex-start; }
  .d1-in svg { width: 24px; }
  .d1-arrow { transform: rotate(90deg); width: 30px; }
  .d1-box { width: 132px; }
  .d1-box span { font-size: 18px; }
  .d1-p3 { gap: 0; }
  .d1-p3 .d1-art { width: 112px; flex: none; margin: 0 -10px; position: relative; }
  .d1-p3 .d1-art:nth-child(1) { rotate: -5deg; translate: 0 6px; z-index: 1; }
  .d1-p3 .d1-art:nth-child(2) { z-index: 2; }
  .d1-p3 .d1-art:nth-child(3) { rotate: 5deg; translate: 0 6px; z-index: 3; }
  .d1-pair figcaption span { display: block; }
  .d1-cal li i { height: 18px; }
  .d1-sheet .d1-row:last-child { display: none; } /* planilha ilustrativa: no celular mostra 2 linhas */
  .d1-p5 { justify-content: center; }
  .d1-grp { grid-template-columns: 1fr; gap: 6px; }
  .d1-grp h4 { display: flex; align-items: baseline; gap: 8px; }
  .d1-grp h4 strong { display: inline; font-size: 28px; }
  .d1-grp ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .d1-grp li { padding: 6px 10px; border-radius: 999px; }
  .d1-grp li span { display: none; } /* trechos completos ficam na galeria "Os 7 textos do exemplo" */
  .d1-p6 { flex-direction: column; align-items: stretch; gap: 8px; }
  .d1-cal, .d1-sheet { max-width: none; flex: none; padding: 10px 12px; }
  .d1f h4 { font-size: 16px; margin-bottom: 6px; }
  .d1-cal li { padding: 6px 0 8px; gap: 6px; }
  .d1-row { padding: 3px 0; }
  .d1-p7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d1-tile > span { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #demo-1 .d1f .st, #demo-1 .d1-fly { animation: none !important; }
  .d1-p { transition: none; }
}
#demo-1.no-motion .d1f .st, #demo-1.no-motion .d1-fly { animation: none !important; }