/* =========================================================
   DEMOS 2 e 3 v5 · HTML fluido em tamanho real (sem escala)
   Escopo: #demo-2 e #demo-3. Uma camada por cena; a cena ativa vem de .demo-inner[data-scene].
   Rótulos e trechos essenciais: mínimo de 16px reais.
   ========================================================= */
#demo-2 .demo-stage.is-fluid, #demo-3 .demo-stage.is-fluid { container-type: size; }
#demo-2 .demo-stage.is-fluid { height: clamp(270px, calc(100svh - 69px - 262px), 560px) !important; }
#demo-3 .demo-stage.is-fluid { height: clamp(270px, calc(100svh - 69px - 262px), 560px) !important; }
@media (max-width: 699px) {
  #demo-2 .demo-stage.is-fluid { height: clamp(330px, calc(100svh - 69px - 250px), 440px) !important; }
  #demo-3 .demo-stage.is-fluid { height: clamp(440px, calc(100svh - 69px - 300px), 480px) !important; }
}
#demo-2 .demo-stage.is-fluid .demo-inner, #demo-3 .demo-stage.is-fluid .demo-inner { position: absolute; inset: 0; width: auto !important; height: auto !important; transform: none !important; left: 0 !important; }
.d2f, .d3f { position: absolute; inset: 0; display: grid; padding: clamp(12px, 4cqh, 28px) clamp(12px, 3cqw, 36px); color: var(--marfim); }
.d2-p, .d3-p { grid-area: 1 / 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3cqw, 40px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
#demo-2 .demo-inner[data-scene="1"] .d2-p[data-s="1"], #demo-2 .demo-inner[data-scene="2"] .d2-p[data-s="2"], #demo-2 .demo-inner[data-scene="3"] .d2-p[data-s="3"], #demo-2 .demo-inner[data-scene="4"] .d2-p[data-s="4"], #demo-3 .demo-inner[data-scene="1"] .d3-p[data-s="1"], #demo-3 .demo-inner[data-scene="2"] .d3-p[data-s="2"], #demo-3 .demo-inner[data-scene="3"] .d3-p[data-s="3"], #demo-3 .demo-inner[data-scene="4"] .d3-p[data-s="4"], #demo-3 .demo-inner[data-scene="5"] .d3-p[data-s="5"], #demo-3 .demo-inner[data-scene="6"] .d3-p[data-s="6"], #demo-3 .demo-inner[data-scene="7"] .d3-p[data-s="7"], #demo-3 .demo-inner[data-scene="8"] .d3-p[data-s="8"], #demo-3 .demo-inner[data-scene="9"] .d3-p[data-s="9"] { opacity: 1; visibility: visible; }
#demo-2 .demo-inner[data-scene="1"] .d2-p[data-s="1"] .st, #demo-2 .demo-inner[data-scene="2"] .d2-p[data-s="2"] .st, #demo-2 .demo-inner[data-scene="3"] .d2-p[data-s="3"] .st, #demo-2 .demo-inner[data-scene="4"] .d2-p[data-s="4"] .st, #demo-3 .demo-inner[data-scene="1"] .d3-p[data-s="1"] .st, #demo-3 .demo-inner[data-scene="2"] .d3-p[data-s="2"] .st, #demo-3 .demo-inner[data-scene="3"] .d3-p[data-s="3"] .st, #demo-3 .demo-inner[data-scene="4"] .d3-p[data-s="4"] .st, #demo-3 .demo-inner[data-scene="5"] .d3-p[data-s="5"] .st, #demo-3 .demo-inner[data-scene="6"] .d3-p[data-s="6"] .st, #demo-3 .demo-inner[data-scene="7"] .d3-p[data-s="7"] .st, #demo-3 .demo-inner[data-scene="8"] .d3-p[data-s="8"] .st, #demo-3 .demo-inner[data-scene="9"] .d3-p[data-s="9"] .st { animation: d1in .38s var(--ease) calc(var(--i, 0) * 60ms) both; }
.d2f figcaption, .d3f figcaption { font-size: clamp(16px, 3.6cqh, 20px); font-weight: 650; text-align: center; color: var(--marfim); }
.d2f .piece, .d3f .piece { border-radius: clamp(6px, 1.4cqh, 12px); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }

/* ---------- Demo 2 ---------- */
.d2-phone { position: relative; height: calc(100cqh - 2 * clamp(12px, 4cqh, 28px)); aspect-ratio: 300 / 620; flex: none; border-radius: clamp(26px, 7cqh, 44px); background: #0d0f0e; padding: clamp(6px, 1.6cqh, 10px); box-shadow: 0 26px 60px rgba(0, 0, 0, .55), inset 0 0 0 2px #2b302d; }
.d2-phone .ph-screen { border-radius: clamp(20px, 5.6cqh, 36px); }
.d2-phone .ph-full .piece { border-radius: 0; box-shadow: none; height: 100%; width: 100%; }
.d2-phone .ph-post .piece { border-radius: 0; box-shadow: none; }
.d2-phone .ph-status-text { font-size: 16px; line-height: 1.35; padding: 12px 10px 16px; }
.d2-p1 { gap: clamp(16px, 4cqw, 56px); }
.d2-info { max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.d2-tag, .d3-tag { align-self: flex-start; display: inline-block; font-size: clamp(16px, 3.6cqh, 20px); font-weight: 750; padding: 4px 14px; border-radius: 999px; background: var(--marfim); color: var(--carvao); }
.d2-big { margin: 0; font-size: clamp(18px, 5cqh, 28px); font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.d2-cap { margin: 0; font-size: clamp(16px, 3.6cqh, 19px); color: var(--texto-claro-2); }
.d2-cap b { color: var(--marfim); margin-right: 4px; }
.d2-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.d2-p2 .d2-fig--f, .d2-p4 .d2-fig--f { width: min(calc((100cqh - 2 * clamp(12px, 4cqh, 28px) - 34px) * .8), 34cqw); }
.d2-p2 .d2-fig--v, .d2-p4 .d2-fig--v { width: min(calc((100cqh - 2 * clamp(12px, 4cqh, 28px) - 34px) * .5625), 30cqw); }
.d2-p2 .d2-fig--f { width: min(calc((100cqh - 2 * clamp(12px, 4cqh, 28px) - 34px) * .8 * .78), 30cqw); }
.d2-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--cobre-claro); font-size: clamp(16px, 3.6cqh, 20px); font-weight: 700; flex: none; }
.d2-arrow svg { width: clamp(36px, 6cqw, 64px); }
.d2-p3 { gap: clamp(16px, 5cqw, 64px); }
.d2-phfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.d2-phfig .d2-phone { height: calc(100cqh - 2 * clamp(12px, 4cqh, 28px) - 38px); }

/* ---------- Demo 3 ---------- */
.d3f h4 { margin: 0 0 10px; font-size: clamp(18px, 4cqh, 24px); font-weight: 700; color: var(--marfim); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.d3f h4 strong { font-size: clamp(28px, 8cqh, 44px); line-height: 1; color: var(--cobre-claro); letter-spacing: -.03em; }
.d3f h4 span { font-size: 16px; font-weight: 500; color: var(--texto-claro-2); }
/* cena 1: o pacote */
.d3-p1 { flex-direction: column; align-items: stretch; gap: clamp(10px, 3cqh, 24px); }
.d3-imgs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 2cqw, 22px); align-items: end; }
.d3-it { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.d3-it .piece { width: min(100%, calc((100cqh - 220px) * .8)); }
.d3-it.v .piece { width: min(72%, calc((100cqh - 220px) * .5625)); }
.d3-it figcaption { font-size: 16px; }
.d3-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.d3-chips li { font-size: clamp(16px, 3.4cqh, 19px); font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--marfim); color: var(--carvao); display: inline-flex; align-items: center; gap: 8px; }
.d3-chips li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cobre); }
.d3-chips li.is-status::before { background: transparent; border: 2.5px solid var(--cobre); }
.d3-chips li.is-wa::before { border-radius: 2px; }
/* cenas 2 a 8: um dia por vez */
.d3-day { justify-content: flex-start; align-items: center; }
.d3-vis { flex: none; display: flex; align-items: center; justify-content: center; }
.d3-day .d3-vis .piece { height: calc(100cqh - 2 * clamp(12px, 4cqh, 28px)); width: auto; max-width: 36cqw; }
.d3-day.v .d3-vis .piece { max-width: 26cqw; }
.d3-info { flex: 1 1 auto; min-width: 0; max-width: 720px; display: flex; flex-direction: column; gap: clamp(6px, 1.6cqh, 12px); }
.d3-when { margin: 0; font-size: clamp(16px, 3.8cqh, 21px); font-weight: 650; color: var(--texto-claro-2); }
.d3-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.d3-tag--re { background: var(--cobre); color: #fff; }
.d3-what { margin: 0; font-size: clamp(18px, 5cqh, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.d3-say { background: var(--marfim); color: var(--carvao); border-radius: 16px; padding: clamp(10px, 2.4cqh, 16px) clamp(12px, 2.6cqh, 18px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.d3-say.is-wa { background: #fff; border-radius: 16px 16px 4px 16px; }
.d3-say small { display: block; font-size: 16px; font-weight: 700; color: var(--tinta-2); margin-bottom: 4px; }
.d3-say p { margin: 0; font-size: clamp(16px, 3.8cqh, 20px); line-height: 1.42; }
.d3-short { display: none; }
.d3-short em { display: block; font-style: normal; font-size: 16px; color: var(--tinta-2); margin-top: 4px; }
/* cena 9: a semana completa */
.d3-p9 { flex-direction: column; align-items: stretch; gap: clamp(8px, 2.4cqh, 18px); }
.d3-p9 h4 { justify-content: center; }
.d3-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.6cqw, 16px); }
.d3-week li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 16px; background: rgba(243, 236, 226, .06); border: 1px solid var(--linha-escura); text-align: center; }
.d3-week b { font-size: clamp(16px, 4cqh, 22px); }
.d3-week li .piece { width: min(86%, calc((100cqh - 230px) * .8)); }
.d3-week li.v .piece { width: min(62%, calc((100cqh - 230px) * .5625)); }
.d3-week span { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--marfim); }

/* ---------- celular ---------- */
@media (max-width: 699px) {
  .d2-p1 { gap: 12px; }
  .d2-p1 .d2-phone { height: calc(100cqh - 24px); max-height: 330px; }
  .d2-info { gap: 8px; }
  .d2-big { font-size: 16px; }
  .d2-cap { display: none; } /* a legenda já aparece dentro do celular */
  .d2-p2 { gap: 8px; }
  .d2-p2 .d2-fig--f { width: 34cqw; }
  .d2-p2 .d2-fig--v { width: 32cqw; }
  .d2-arrow span { font-size: 16px; }
  .d2-arrow svg { width: 28px; }
  .d2-p3 { gap: 10px; }
  .d2-phfig .d2-phone { height: auto; width: min(44cqw, calc((100cqh - 24px - 34px) * 300 / 620)); }
  .d2-phfig figcaption { font-size: 16px; }
  .d2-p4 .d2-fig--f { width: 48cqw; }
  .d2-p4 .d2-fig--v { width: 34cqw; }
  .d3-p1 { gap: 12px; }
  .d3-imgs { gap: 6px; }
  .d3-it figcaption { display: none; } /* o título "6 imagens · 3 artes + 3 versões verticais" nomeia o conjunto */
  .d3-it .piece { width: 100%; } .d3-it.v .piece { width: 76%; }
  .d3-chips li { font-size: 16px; padding: 5px 10px; }
  .d3-day { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "vis head" "say say"; align-content: center; align-items: start; gap: 10px 12px; }
  .d3-day .d3-info { display: contents; }
  .d3-vis { grid-area: vis; }
  .d3-day .d3-vis .piece { height: auto; width: 104px; max-width: none; }
  .d3-day.v .d3-vis .piece { width: 78px; }
  .d3-when, .d3-tags, .d3-what { grid-column: 2; }
  .d3-when { grid-row: 1; align-self: start; }
  .d3-tags { grid-row: 1; margin-top: 28px; }
  .d3-what { grid-row: 1; margin-top: 66px; font-size: 18px; }
  .d3-say { grid-column: 1 / -1; }
  .d3-say p { font-size: 16px; }
  .d3-full { display: none; } .d3-short { display: inline; }
  .d3-week { grid-template-columns: 1fr; gap: 6px; }
  .d3-week li { flex-direction: row; padding: 6px 10px; gap: 10px; text-align: left; }
  .d3-week b { font-size: 16px; width: 34px; flex: none; }
  .d3-week li .piece { width: 26px; flex: none; } .d3-week li.v .piece { width: 20px; margin: 0 3px; }
  .d3-p9 h4 { font-size: 16px; } .d3-p9 h4 strong { font-size: 22px; }
}

/* v5 · ajustes finais de composição */
.d3-head { display: flex; flex-direction: column; gap: clamp(6px, 1.6cqh, 12px); }
@container (max-height: 440px) { .d3-full { display: none; } .d3-short { display: inline; } }
.d2-p1 .d2-cap { display: block; }
@media (max-width: 699px) {
  .d2-p1 .d2-big { display: none; } /* a explicação do feed está na legenda da cena */
  .d2-p1 .d2-cap { font-size: 16px; color: var(--marfim); }
  .d3-day { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: none; align-content: center; align-items: center; gap: 10px 12px; }
  .d3-day .d3-info { display: contents; }
  .d3-vis { grid-column: 1; grid-row: 1; }
  .d3-head { grid-column: 2; grid-row: 1; gap: 6px; }
  .d3-when, .d3-tags, .d3-what { grid-column: auto; grid-row: auto; margin-top: 0 !important; }
  .d3-say { grid-column: 1 / -1; }
  .d3-tag { font-size: 16px; padding: 3px 10px; }
  .d3-week { grid-template-columns: 1fr; gap: 6px; }
  .d3-week li { padding: 6px 8px; gap: 8px; }
  .d3-week b { width: auto; }
}
@media (max-width: 699px) {
  .d3-day7 { grid-template-columns: 74px minmax(0, 1fr); align-content: center; gap: 8px 10px; }
  .d3-day7 .d3-head { grid-column: 1 / -1; grid-row: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .d3-day7 .d3-vis { grid-column: 1; grid-row: 2; align-self: start; }
  .d3-day7 .d3-vis .piece { width: 74px; }
  .d3-day7 .d3-say { padding: 8px 12px; }
  .d3-day7 .d3-say:not(.is-wa) { grid-column: 2; grid-row: 2; }
  .d3-day7 .d3-say.is-wa { grid-column: 1 / -1; grid-row: 3; }
  .d3-week li { gap: 6px; }
}
@media (max-width: 699px) {
  #demo-3 .d3f { padding: 10px; }
  .d3-day7 { align-content: start; }
  .d3-day7 .d3-head .d3-when { flex-basis: 100%; }
}
.d2-stat { display: none; }
@media (max-width: 699px) {
  .d2-p3 { flex-wrap: wrap; align-content: center; row-gap: 10px; }
  .d2-p3 .d2-phfig .d2-phone { width: min(40cqw, calc((100cqh - 160px) * 300 / 620)); }
  .d2-p3 .d2-phfig { gap: 4px; width: 42cqw; }
  .d2-p3 .d2-phfig figcaption { line-height: 1.2; }
  .d2-p3 { row-gap: 8px; }
  #demo-2 .ph-story-top, #demo-2 .ph-status-top, #demo-2 .ph-reply, #demo-2 .ph-status-text { display: none; }
  .d2-stat { display: block; flex-basis: 100%; margin: 0; background: var(--marfim); color: var(--carvao); border-radius: 14px; padding: 8px 12px; font-size: 16px; line-height: 1.35; }
  .d2-stat small { display: block; font-size: 16px; font-weight: 700; color: var(--tinta-2); }
  .d3-day:not(.d3-day7) .d3-vis .piece { width: min(42cqw, calc((100cqh - 220px) * .8)); max-width: none; }
  .d3-day.v:not(.d3-day7) .d3-vis .piece { width: min(36cqw, calc((100cqh - 220px) * .5625)); max-width: none; }
  .d3-day7 .d3-vis .piece { max-width: none; }
  .d3-week li .piece { width: 20px; } .d3-week li.v .piece { width: 15px; margin: 0 2px; }
  .d3-week li { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #demo-2 .st, #demo-3 .st { animation: none !important; }
  .d2-p, .d3-p { transition: none !important; }
}
#demo-2.no-motion .st, #demo-3.no-motion .st, #demo-2.no-motion .d2-p, #demo-3.no-motion .d3-p { animation: none !important; transition: none !important; }