/*
 * Pagina /luma-copiloto-de-vendas (app/View/site/lumaCopiloto.php, 03/11/2026).
 * Base em site.css (prefixo st-); aqui so o que e desta pagina (prefixo lu-):
 * a conversa no celular, a coruja, os cartoes de pedido, o preco e o FAQ.
 * Cores com !important pelo mesmo motivo do site.css: o style.css global pinta
 * p, span, a, li e label de #111 com !important.
 */

/* ── Hero: texto + celular ─────────────────────────────────────────────────── */
.lu-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.lu-h1 { max-width: 40rem; }
.lu-lead { max-width: 36rem; }

.lu-celular {
    max-width: 360px; width: 100%; margin-left: auto;
    border: 10px solid #0f172a; border-radius: 34px; overflow: hidden;
    background: #efeae2; box-shadow: var(--st-sombra-g);
}
.lu-celular-topo { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; background: #075e54; }
.st-root .lu-celular-topo strong { display: block; font-size: .95rem; color: #fff !important; line-height: 1.2; }
.st-root .lu-celular-topo small { display: block; font-size: .72rem; color: #cfe9e5 !important; }
.lu-avatar {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    background: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.lu-avatar .lu-coruja { width: 30px; height: 30px; }

.lu-conversa { display: flex; flex-direction: column; gap: .45rem; padding: .9rem .75rem 1.1rem; }
.st-root .lu-msg {
    max-width: 85%; margin: 0; padding: .5rem .7rem; border-radius: 10px;
    font-size: .84rem; line-height: 1.45; color: #111b21 !important; box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.st-root .lu-msg strong { color: #111b21 !important; }
.lu-msg-eu   { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.lu-msg-luma { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.lu-msg-arquivo { display: flex; align-items: center; gap: .6rem; }
.st-root .lu-msg-arquivo i { font-size: 1.9rem; color: #d93025 !important; }
.st-root .lu-msg-arquivo small { display: block; font-size: .72rem; color: #667781 !important; }

/* ── A mesma Luma ──────────────────────────────────────────────────────────── */
.lu-apresenta { display: flex; align-items: center; gap: 2rem; max-width: 56rem; margin: 0 auto; }
.lu-apresenta-coruja {
    width: 132px; height: 132px; flex-shrink: 0; border-radius: 50%;
    background: var(--st-marca-wash); display: inline-flex; align-items: center; justify-content: center;
}
.lu-apresenta-coruja .lu-coruja { width: 96px; height: 96px; }
.lu-apresenta .st-h2 { margin-bottom: .5rem; }

/* ── O que dá para pedir ───────────────────────────────────────────────────── */
/* 8 cartoes: 4 x 2 no computador, 2 x 4 no tablet, 1 por linha no celular */
.lu-pedidos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.lu-pedido {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem;
    background: var(--st-sup); border: 1px solid var(--st-borda); border-radius: var(--st-raio); box-shadow: var(--st-sombra);
}
.st-root .lu-pedido p { margin: 0; font-size: .93rem; color: var(--st-tinta-2) !important; }
.st-root .lu-pedido .lu-fala {
    padding: .5rem .7rem; border-radius: 10px 10px 10px 2px; background: #d9fdd3;
    font-size: .88rem; font-style: italic; color: #14532d !important;
}
.lu-pedido .st-selo-plano { align-self: flex-start; margin-top: auto; }
.st-root .lu-nota { display: flex; gap: .5rem; align-items: flex-start; margin: 1.5rem 0 0; font-size: .92rem; color: var(--st-tinta-2) !important; }
.st-root .lu-nota i { color: var(--st-marca) !important; margin-top: .15rem; }

/* Icone dos passos de seguranca (os passos do site levam numero; aqui, um icone) */
.lu-passo-icone {
    width: 44px; height: 44px; border-radius: 14px; margin-bottom: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--st-marca), var(--st-ceu));
}
.st-root .lu-passo-icone i { color: #fff !important; font-size: 1.25rem; }

/* ── Como começar + preço ──────────────────────────────────────────────────── */
.lu-comecar { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.lu-passos { margin: 1.25rem 0 0; padding-left: 1.4rem; display: grid; gap: .9rem; }
.st-root .lu-passos li { line-height: 1.6; color: var(--st-tinta-2) !important; }
.st-root .lu-passos li::marker { font-weight: 800; color: var(--st-marca); }
.st-root .lu-passos strong { color: var(--st-tinta) !important; }

.lu-preco {
    padding: 2rem; border-radius: var(--st-raio-g); background: var(--st-sup);
    border: 2px solid var(--st-marca-clara); box-shadow: var(--st-sombra-g);
}
.st-root .lu-preco-rotulo { display: block; font-weight: 700; color: var(--st-marca) !important; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.st-root .lu-preco-valor { margin: .35rem 0 1rem; font-size: 2.6rem; font-weight: 800; line-height: 1.1; color: var(--st-tinta) !important; }
.st-root .lu-preco-valor small { display: block; font-size: .95rem; font-weight: 500; color: var(--st-apagado) !important; }
.lu-preco-itens { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .55rem; }
.st-root .lu-preco-itens li { display: flex; gap: .5rem; font-size: .95rem; }
.st-root .lu-preco-itens i { color: var(--st-verde) !important; }
.lu-preco-botao { width: 100%; justify-content: center; }
.st-root .lu-preco-nota { display: block; margin-top: .9rem; font-size: .82rem; color: var(--st-apagado) !important; line-height: 1.5; }

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.lu-faq { max-width: 52rem; margin: 0 auto; }
.lu-pergunta { padding: 1rem 1.25rem; margin-bottom: .75rem; background: var(--st-fundo); border: 1px solid var(--st-borda); border-radius: 14px; }
.lu-pergunta summary { font-weight: 700; cursor: pointer; }
.st-root .lu-pergunta p { margin: .6rem 0 0; line-height: 1.7; color: var(--st-tinta-2) !important; }

/* Faixa da Luma na Home e cartao em Modulos (as duas apontam para esta pagina) */
.lu-faixa { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; }
.lu-faixa .lu-apresenta-coruja { width: 96px; height: 96px; background: #fff; }
.lu-faixa .lu-apresenta-coruja .lu-coruja { width: 72px; height: 72px; }
.lu-faixa .st-h2 { margin-bottom: .35rem; }
.st-root .lu-faixa p { margin: 0; color: var(--st-tinta-2) !important; }
/* Em Planos a faixa fica numa secao sem cor: vira caixa */
.lu-faixa-caixa {
    padding: 1.75rem 2rem; border-radius: var(--st-raio-g); background: var(--st-marca-wash);
    border: 1px solid color-mix(in srgb, var(--st-marca) 20%, transparent);
}
.lu-faixa-caixa .st-h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }

/* ── A Luma pousa no selo do topo da Home ──────────────────────────────────── */
/* Pedido do usuario (03/11/2026): ela chega voando da esquerda, batendo as asas,
   pousa em cima da ponta esquerda do selo "Para representantes..." e se apresenta no
   balao. No palco das maquetes o balao cobria a loja. Pousada: pisca, acena de
   vez em quando e respira. Sem animacao (prefers-reduced-motion): ja pousada. */
.lu-selo { position: relative; display: inline-block; margin-top: 3.25rem; }
.lu-selo .st-rotulo { margin-bottom: 0; }
.lu-selo-luma {
    position: absolute; left: -6px; bottom: calc(100% - 8px);
    display: flex; align-items: flex-end; gap: .4rem;
    text-decoration: none !important;
}
.lu-selo-coruja {
    width: 62px; height: 62px; flex-shrink: 0;
    filter: drop-shadow(0 6px 10px rgba(31, 92, 156, .25));
    animation: lu-voa 1.7s cubic-bezier(.25, .8, .35, 1) both, lu-respira 4s ease-in-out 1.7s infinite;
}
.lu-selo-coruja .lu-coruja { width: 100%; height: 100%; overflow: visible; }
.lu-selo-luma .lu-asa, .lu-selo-luma .lu-asa-e, .lu-selo-luma .lu-olhos { transform-box: fill-box; }
/* No voo as duas asas batem; pousada, so a direita acena de tempos em tempos */
.lu-selo-luma .lu-asa-e { transform-origin: 80% 10%; animation: lu-bate-e .16s ease-in-out 10; }
.lu-selo-luma .lu-asa   { transform-origin: 20% 10%; animation: lu-bate .16s ease-in-out 10, lu-acena 6s ease-in-out 3s infinite; }
.lu-selo-luma .lu-olhos { transform-origin: center; animation: lu-pisca 5s 2s infinite; }
.st-root .lu-selo-fala {
    position: relative; width: max-content; max-width: 250px; margin-bottom: 22px; padding: .55rem .8rem;
    border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: var(--st-sombra-g);
    font-size: .8rem; line-height: 1.4; color: var(--st-tinta) !important;
    animation: lu-fala-entra .45s ease-out 1.8s both;
}
.st-root .lu-selo-fala strong { color: var(--st-marca) !important; }
.st-root .lu-selo-link { font-weight: 700; color: var(--st-marca) !important; white-space: nowrap; }
.st-root .lu-selo-link::after { content: " \2192"; }
.lu-selo-luma:hover .lu-selo-link, .lu-selo-luma:focus-visible .lu-selo-link { text-decoration: underline; }

@keyframes lu-voa {
    0%   { transform: translate(-30vw, -90px) rotate(12deg) scale(.8); opacity: 0; }
    15%  { opacity: 1; }
    75%  { transform: translate(0, -14px) rotate(-4deg) scale(1); }
    88%  { transform: translate(0, 2px) rotate(2deg); }
    100% { transform: none; }
}
@keyframes lu-bate   { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }
@keyframes lu-bate-e { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(38deg); } }
@keyframes lu-respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes lu-pisca   { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
@keyframes lu-acena   { 0%, 70%, 100% { transform: rotate(0); } 75%, 85% { transform: rotate(-30deg); } 80%, 90% { transform: rotate(-8deg); } }
@keyframes lu-fala-entra { from { opacity: 0; transform: translateX(-6px) scale(.95); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .lu-selo-coruja, .lu-selo-luma .lu-asa, .lu-selo-luma .lu-asa-e, .lu-selo-luma .lu-olhos, .st-root .lu-selo-fala { animation: none; }
}
/* Celular: o selo quebra em duas linhas e nao sobra lado para o balao. A Luma
   e o balao ficam numa linha acima do selo, e ela pousa ali */
@media (max-width: 575.98px) {
    .lu-selo { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .25rem; margin-top: .5rem; }
    .lu-selo-luma { position: static; }
    .lu-selo-coruja { width: 54px; height: 54px; }
    .lu-selo-luma { align-items: center; }
    .st-root .lu-selo-fala { max-width: 230px; margin-bottom: 0; }
}
@media (max-width: 1199.98px) {
    .lu-pedidos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .lu-hero, .lu-comecar { grid-template-columns: 1fr; }
    .lu-celular { margin: 0 auto; }
    .lu-faixa { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (max-width: 575.98px) {
    .lu-pedidos { grid-template-columns: 1fr; }
    .lu-apresenta { flex-direction: column; text-align: center; gap: 1rem; }
    .lu-apresenta-coruja { width: 104px; height: 104px; }
    .lu-apresenta-coruja .lu-coruja { width: 76px; height: 76px; }
    .lu-celular { border-width: 8px; border-radius: 28px; }
}