/* =========================================================================
   LANDING — CENAS ANIMADAS ("Hoje" × "No Shineweb") + TÍTULOS QUE ENTRAM
   Par de: page-lp-sistema.php (seção .sx-troca, config $lp_cenas) + js/landing-cenas.js

   Ideia: o mesmo roteiro das peças promocionais dos módulos
   (criativos-instagram/modulos/promo.js) dentro da página. Ao lado da tabela
   "O que sai da sua rotina", um quadro toca a linha escolhida: primeiro o
   problema (a pessoa e as mensagens pipocando), depois a solução (o cartão do
   meio manda para três resultados, com tracejado e bolinha andando).
   Os títulos .sx-h2 entram palavra por palavra e o grifo é pintado depois.

   Regras:
   - Sem JS (ou com prefers-reduced-motion) fica tudo parado e legível: o
     quadro mostra a solução e os títulos aparecem normais. Os estados
     escondidos só valem com html.sx-anima (posto pelo JS).
   - Branco só no quadro (é uma "tela"), resto no papel; âmbar não entra aqui.
   - Backup antes desta mudança: page-lp-sistema.pre-cenas.php.bak, functions.pre-cenas.php.bak.
   ========================================================================= */

/* ---------- layout da seção: intro + tabela à esquerda, quadro à direita ---------- */
#lp.sx .sx-troca-grid.tem-cenas {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "intro quadro" "tabela quadro";
    align-items: start;
}
#lp.sx .tem-cenas .sx-troca-intro { grid-area: intro; }
#lp.sx .tem-cenas .sx-troca-tabela { grid-area: tabela; }
#lp.sx .tem-cenas .sx-cn { grid-area: quadro; position: sticky; top: calc(var(--sx-nav) + 24px); }

/* linha da tabela vira botão que escolhe a cena */
#lp.sx .sx-cn-btn {
    display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
#lp.sx .sx-cn-btn:focus-visible { outline: 2px solid var(--sx-verde); outline-offset: 4px; border-radius: 2px; }
#lp.sx .sx-troca-tabela tr.is-cena td { background: var(--sx-verde-claro); }
#lp.sx .sx-troca-tabela tr.is-cena td:first-child { box-shadow: inset 3px 0 0 var(--sx-verde); padding-left: 12px; }
#lp.sx .sx-troca-tabela tr.is-cena .sx-troca-hoje s { color: var(--sx-texto); }
#lp.sx .sx-troca-tabela tr[data-cena] td { transition: background-color .18s, padding .18s; }
#lp.sx .sx-troca-tabela tr[data-cena]:hover td { background: rgba(227, 239, 232, .55); }

/* ---------- o quadro ---------- */
#lp.sx .sx-cn {
    position: relative;
    height: 480px;
    border: 1.5px solid var(--sx-grafite);
    border-radius: 12px;
    background: var(--sx-branco);
    overflow: hidden;
    box-shadow: 0 40px 60px -40px rgba(22, 33, 28, .35);
}
#lp.sx .sx-cn-cena { position: absolute; inset: 0; }
#lp.sx .sx-cn-cena[hidden] { display: none; }
#lp.sx .sx-cn-camada { position: absolute; inset: 0; }

#lp.sx .sx-cn-etq {
    position: absolute; left: 18px; top: 16px; z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px; border-radius: 4px;
    font: 600 .8125rem/1.4 var(--sx-corpo);
}
#lp.sx .sx-cn-etq.hoje { background: #F2F4F2; color: var(--sx-cinza); }
#lp.sx .sx-cn-etq.hoje span { text-decoration: line-through; text-decoration-color: rgba(138, 84, 24, .75); }
#lp.sx .sx-cn-etq.depois { background: var(--sx-verde-claro); color: var(--sx-verde-escuro); }

#lp.sx .sx-cn-pausa {
    position: absolute; right: 12px; top: 12px; z-index: 4;
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 1px solid var(--sx-regua-forte); border-radius: 6px; background: #fff;
    color: var(--sx-grafite); font-size: 13px; cursor: pointer;
}
#lp.sx .sx-cn-pausa:hover { border-color: var(--sx-grafite); }
#lp.sx .sx-cn-pausa:focus-visible { outline: 2px solid var(--sx-verde); outline-offset: 2px; }
#lp.sx .sx-cn-barra { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: var(--sx-linha); }
#lp.sx .sx-cn-barra i { display: block; height: 100%; width: 0; background: var(--sx-verde); }

/* pessoas (SVG chapado vindo do JS) */
#lp.sx .sx-cn-pes { position: absolute; display: block; }
#lp.sx .sx-cn-pes svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Hoje: a pessoa e as mensagens ---------- */
#lp.sx .sx-cn-dono { left: 50%; bottom: 0; width: 170px; margin-left: -85px; }
#lp.sx .sx-cn-not {
    position: absolute; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 46%;
    padding: 8px 12px 8px 8px; border-radius: 12px;
    background: #fff; box-shadow: 0 8px 20px -8px rgba(22, 33, 28, .3), 0 0 0 1px rgba(22, 33, 28, .06);
    font: 600 .875rem/1.25 var(--sx-corpo); color: var(--sx-grafite);
}
#lp.sx .sx-cn-not > i {
    display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: #25D366; color: #fff; font-size: 13px;
}
#lp.sx .sx-cn-not > i.sis { background: var(--sx-grafite); }
#lp.sx .sx-cn-not > i.ruim { background: #B4432F; }
#lp.sx .sx-cn-not:nth-child(2) { left: 5%;  top: 70px; }
#lp.sx .sx-cn-not:nth-child(3) { right: 5%; top: 92px; }
#lp.sx .sx-cn-not:nth-child(4) { left: 3%;  top: 160px; }
#lp.sx .sx-cn-not:nth-child(5) { right: 3%; top: 186px; }
#lp.sx .sx-cn-not:nth-child(6) { left: 6%;  top: 252px; }
#lp.sx .sx-cn-not:nth-child(7) { right: 6%; top: 280px; }

/* ---------- No Shineweb: cartão → três resultados ---------- */
#lp.sx .sx-cn-fio { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#lp.sx .sx-cn-centro {
    position: absolute; left: 50%; top: 64px; z-index: 2;
    display: flex; align-items: center; gap: 14px;
    width: max-content; max-width: 88%;
    padding: 14px 20px; border: 1.5px solid var(--sx-grafite); border-radius: 10px; background: #fff;
    transform: translateX(-50%);
}
#lp.sx .sx-cn-centro > i {
    display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
    background: var(--sx-verde-claro); color: var(--sx-verde); font-size: 20px;
}
#lp.sx .sx-cn-centro strong { display: block; font: 800 1.375rem/1.1 var(--sx-display); letter-spacing: -.02em; color: var(--sx-grafite); }
#lp.sx .sx-cn-centro small { display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.35; color: var(--sx-cinza); }

#lp.sx .sx-cn-destinos {
    position: absolute; left: 16px; right: 16px; bottom: 26px; z-index: 2;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
#lp.sx .sx-cn-tile {
    position: relative;
    padding: 16px 10px 14px; border: 1.5px solid var(--sx-grafite); border-radius: 10px; background: #fff;
    text-align: center;
}
#lp.sx .sx-cn-tile > i {
    display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%;
    background: var(--sx-verde-claro); color: var(--sx-verde); font-size: 19px;
}
#lp.sx .sx-cn-tile > i.wa { background: #25D366; color: #fff; }
#lp.sx .sx-cn-tile strong { display: block; font: 700 1rem/1.15 var(--sx-display); color: var(--sx-grafite); }
#lp.sx .sx-cn-tile small { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.3; color: var(--sx-cinza); }
#lp.sx .sx-cn-tile.pessoa { padding-top: 0; border: 0; background: none; }
#lp.sx .sx-cn-tile.pessoa .sx-cn-pes { position: relative; width: 112px; margin: 0 auto; }
#lp.sx .sx-cn-tile.pessoa strong { display: inline-block; margin-top: 6px; padding: 3px 10px; border: 1.5px solid var(--sx-grafite); border-radius: 4px; background: #fff; font: 600 .8125rem/1.3 var(--sx-corpo); }
#lp.sx .sx-cn-ok {
    position: absolute; left: 50%; top: -14px; z-index: 1;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: 99px;
    background: var(--sx-verde-claro); color: var(--sx-verde-escuro);
    font: 600 .75rem/1.6 var(--sx-corpo); white-space: nowrap;
    transform: translateX(-50%);
}
#lp.sx .sx-cn-tile.pessoa .sx-cn-ok { top: -24px; }
#lp.sx .sx-cn-pingo {
    position: absolute; z-index: 3; width: 26px; height: 26px; margin: -13px 0 0 -13px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--sx-verde); color: #fff; font-size: 11px;
    box-shadow: 0 0 0 5px rgba(30, 110, 82, .15);
    opacity: 0; pointer-events: none;
}

/* Sem JS ou com movimento reduzido: só a solução, parada */
#lp.sx .sx-cn-hoje { visibility: hidden; }
html.sx-anima #lp.sx .sx-cn-hoje { visibility: visible; }

@media (max-width: 960px) {
    #lp.sx .sx-troca-grid.tem-cenas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "quadro" "tabela"; }
    #lp.sx .tem-cenas .sx-cn { position: relative; top: auto; }
}
@media (max-width: 560px) {
    #lp.sx .sx-cn { height: 440px; }
    #lp.sx .sx-cn-not { max-width: 56%; padding: 6px 9px 6px 6px; font-size: .75rem; gap: 6px; }
    #lp.sx .sx-cn-not > i { width: 22px; height: 22px; font-size: 11px; }
    #lp.sx .sx-cn-not:nth-child(n+6) { display: none; }
    /* no estreito as mensagens alternam lados em degraus, sem encostar */
    #lp.sx .sx-cn-not:nth-child(2) { top: 62px; }
    #lp.sx .sx-cn-not:nth-child(3) { top: 112px; }
    #lp.sx .sx-cn-not:nth-child(4) { top: 162px; }
    #lp.sx .sx-cn-not:nth-child(5) { top: 212px; }
    #lp.sx .sx-cn-dono { width: 140px; margin-left: -70px; }
    #lp.sx .sx-cn-centro { padding: 10px 14px; gap: 10px; }
    #lp.sx .sx-cn-centro > i { width: 38px; height: 38px; font-size: 16px; }
    #lp.sx .sx-cn-centro strong { font-size: 1.0625rem; }
    #lp.sx .sx-cn-destinos { left: 8px; right: 8px; gap: 6px; }
    #lp.sx .sx-cn-tile { padding: 12px 6px 10px; }
    #lp.sx .sx-cn-tile > i { width: 36px; height: 36px; font-size: 15px; }
    #lp.sx .sx-cn-tile strong { font-size: .8125rem; }
    #lp.sx .sx-cn-tile small { font-size: .6875rem; }
    #lp.sx .sx-cn-tile.pessoa .sx-cn-pes { width: 84px; }
    #lp.sx .sx-cn-ok { font-size: .6875rem; padding: 1px 7px; }
}

/* ---------- títulos que entram palavra por palavra ---------- */
html.sx-anima #lp.sx .sx-tit-anima .sx-w {
    display: inline-block;
    opacity: 0;
    transform: translateY(.45em);
    transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
}
html.sx-anima #lp.sx .sx-tit-anima .sx-marca {
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size .7s cubic-bezier(.6, 0, .2, 1);
    transition-delay: var(--pinta, .5s);
}
html.sx-anima #lp.sx .sx-tit-anima.vai .sx-w { opacity: 1; transform: none; }
html.sx-anima #lp.sx .sx-tit-anima.vai .sx-marca { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
    html.sx-anima #lp.sx .sx-tit-anima .sx-w { opacity: 1; transform: none; transition: none; }
    html.sx-anima #lp.sx .sx-tit-anima .sx-marca { background-size: 100% 100%; transition: none; }
}