/* =========================================================================
   Lista de Presentes — Guia de Preços
   Direção visual: um convite, não uma loja.
   O acervo é grade de compra; a lista publicada é papel, tinta e foto.
   ========================================================================= */

#lp-app {
    /* tema padrão (festa) — sobrescrito por [data-tema] abaixo */
    --papel: #FBF9F5;
    --papel-fundo: #F2EEE6;
    --tinta: #1B2A3A;
    --tinta-suave: #66717E;
    --traco: #E2DCD1;
    --primaria: #1E6FD9;
    --primaria-escura: #1552A8;
    --acento: #E8A0A8;
    --feito: #6F8F6B;
    --feito-veu: rgba(111, 143, 107, .28);
    --raio: 14px;

    font-family: 'Work Sans', sans-serif;
    color: var(--tinta);
    background: var(--papel-fundo);
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 16px 72px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    position: relative;
    z-index: 0;
}

/* ---------- Temas escolhidos por quem cria a lista ---------- */
#lp-app[data-tema="casamento"] {
    --papel: #FDFCFA;
    --papel-fundo: #F0EBE3;
    --tinta: #2E2A26;
    --tinta-suave: #7C736A;
    --traco: #E3DACC;
    --primaria: #A8895C;
    --primaria-escura: #8A6F47;
    --acento: #C9B79A;
    --feito: #8A9A7B;
    --feito-veu: rgba(138, 154, 123, .28);
}
#lp-app[data-tema="bebe"] {
    --papel: #FEFCFB;
    --papel-fundo: #EFF4F3;
    --tinta: #2B3A3E;
    --tinta-suave: #6E8085;
    --traco: #DCE8E6;
    --primaria: #4FA3A5;
    --primaria-escura: #3B8285;
    --acento: #F3C0AE;
    --feito: #78A87C;
    --feito-veu: rgba(120, 168, 124, .28);
}
#lp-app[data-tema="noite"] {
    --papel: #1F2733;
    --papel-fundo: #161C25;
    --tinta: #F2F0EC;
    --tinta-suave: #A2ADBB;
    --traco: #33404F;
    --primaria: #E8B84B;
    --primaria-escura: #CFA136;
    --acento: #E0857A;
    --feito: #7FB08A;
    --feito-veu: rgba(127, 176, 138, .3);
}

/* -------------------------------------------------------------------------
   TEMPLATES DE EVENTO
   Cada template redefine a paleta inteira e as duas famílias tipográficas
   usadas no convite. Vêm depois dos temas antigos, então têm precedência.
   ------------------------------------------------------------------------- */
#lp-app[data-template="botanico"] {
    --papel: #FDFBF7;
    --papel-fundo: #F7F4EE;
    --tinta: #141F2E;
    --tinta-suave: #4A5A70;
    --traco: rgba(20, 31, 46, .14);
    --primaria: #141F2E;
    --primaria-escura: #0B131F;
    --acento: #B08D4F;
    --ornamento: #7C8B72;
    --feito: #7C8B72;
    --feito-veu: rgba(124, 139, 114, .26);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}
#lp-app[data-template="jardim"] {
    --papel: #FFFDF9;
    --papel-fundo: #FAF8F3;
    --tinta: #2E382B;
    --tinta-suave: #6B7565;
    --traco: rgba(46, 56, 43, .15);
    --primaria: #4A5D45;
    --primaria-escura: #384733;
    --acento: #C4A77D;
    --ornamento: #8FA383;
    --feito: #7A9070;
    --feito-veu: rgba(122, 144, 112, .26);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}
#lp-app[data-template="confete"] {
    --papel: #FFFFFF;
    --papel-fundo: #FFF9F0;
    --tinta: #22201D;
    --tinta-suave: #6E675E;
    --traco: rgba(34, 32, 29, .14);
    --primaria: #E5484D;
    --primaria-escura: #C43539;
    --acento: #F5C518;
    --ornamento: #4B9CD3;
    --feito: #3E9B57;
    --feito-veu: rgba(62, 155, 87, .24);
    --display: 'Fraunces', Georgia, serif;
    --narrativa: 'Work Sans', sans-serif;
}
#lp-app[data-template="nuvem"] {
    --papel: #FFFFFF;
    --papel-fundo: #FDFBF9;
    --tinta: #2D3B44;
    --tinta-suave: #6F8089;
    --traco: rgba(45, 59, 68, .13);
    --primaria: #7BA7BC;
    --primaria-escura: #5E8A9F;
    --acento: #F0BFA8;
    --ornamento: #A8C5D1;
    --feito: #7FAE8C;
    --feito-veu: rgba(127, 174, 140, .24);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}
#lp-app[data-template="meia-noite"] {
    --papel: #232733;
    --papel-fundo: #1A1D26;
    --tinta: #E8E4DC;
    --tinta-suave: #9AA3B2;
    --traco: rgba(232, 228, 220, .15);
    --primaria: #D4A857;
    --primaria-escura: #B88F44;
    --acento: #D4A857;
    --ornamento: #6B7488;
    --feito: #8AAE92;
    --feito-veu: rgba(138, 174, 146, .26);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}

#lp-app[data-template="editorial"] {
    --papel: #FFFFFF;
    --papel-fundo: #FAFAF8;
    --tinta: #111111;
    --tinta-suave: #6A6A66;
    --traco: rgba(17, 17, 17, .16);
    --primaria: #111111;
    --primaria-escura: #000000;
    --acento: #D6452B;
    --ornamento: #D6452B;
    --feito: #4A7A5C;
    --feito-veu: rgba(74, 122, 92, .18);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Work Sans', sans-serif;
}
#lp-app[data-template="terracota"] {
    --papel: #FFFCF9;
    --papel-fundo: #FBF3EC;
    --tinta: #40251C;
    --tinta-suave: #8A6857;
    --traco: rgba(64, 37, 28, .15);
    --primaria: #8C4A32;
    --primaria-escura: #6F3826;
    --acento: #D89A73;
    --ornamento: #C07A54;
    --feito: #7E8F62;
    --feito-veu: rgba(126, 143, 98, .24);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}
#lp-app[data-template="deco"] {
    --papel: #1B1D26;
    --papel-fundo: #12131A;
    --tinta: #EFE9DC;
    --tinta-suave: #9E9684;
    --traco: rgba(201, 162, 39, .30);
    --primaria: #C9A227;
    --primaria-escura: #A8871F;
    --acento: #C9A227;
    --ornamento: #C9A227;
    --feito: #8FA37A;
    --feito-veu: rgba(143, 163, 122, .22);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}
#lp-app[data-template="polaroid"] {
    --papel: #FFFFFF;
    --papel-fundo: #F0EEE9;
    --tinta: #2B2B2B;
    --tinta-suave: #77736C;
    --traco: rgba(43, 43, 43, .16);
    --primaria: #2B2B2B;
    --primaria-escura: #141414;
    --acento: #F2643C;
    --ornamento: #F2643C;
    --feito: #4C8C6A;
    --feito-veu: rgba(76, 140, 106, .2);
    --display: 'Fraunces', Georgia, serif;
    --narrativa: 'Work Sans', sans-serif;
}
#lp-app[data-template="tropical"] {
    --papel: #FFFDF6;
    --papel-fundo: #FDF8EC;
    --tinta: #0B3B31;
    --tinta-suave: #5A7A6E;
    --traco: rgba(11, 59, 49, .15);
    --primaria: #0E5C4A;
    --primaria-escura: #0A4537;
    --acento: #F4A62A;
    --ornamento: #2E8B6B;
    --feito: #2E8B6B;
    --feito-veu: rgba(46, 139, 107, .22);
    --display: 'Fraunces', Georgia, serif;
    --narrativa: 'Work Sans', sans-serif;
}
#lp-app[data-template="aquarela"] {
    --papel: #FFFFFF;
    --papel-fundo: #FDFCFB;
    --tinta: #33424C;
    --tinta-suave: #76858F;
    --traco: rgba(51, 66, 76, .13);
    --primaria: #5E7B8B;
    --primaria-escura: #47616F;
    --acento: #E8A9A0;
    --ornamento: #9FBACB;
    --feito: #86AE96;
    --feito-veu: rgba(134, 174, 150, .22);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}

#lp-app[data-template="atelie"] {
    --papel: #FBFAF6;
    --papel-fundo: #F4F1EA;
    --tinta: #1C2A24;
    --tinta-suave: #5F6E64;
    --traco: rgba(28, 42, 36, .14);
    --primaria: #1C2A24;
    --primaria-escura: #101A15;
    --acento: #C9A66B;
    --ornamento: #7E9179;
    --feito: #7E9179;
    --feito-veu: rgba(126, 145, 121, .24);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}
#lp-app[data-template="linha"] {
    --papel: #FFFFFF;
    --papel-fundo: #FAF9F6;
    --tinta: #2A2A2A;
    --tinta-suave: #77746E;
    --traco: rgba(42, 42, 42, .14);
    --primaria: #2A2A2A;
    --primaria-escura: #141414;
    --acento: #A88B6A;
    --ornamento: #A88B6A;
    --feito: #6F8A72;
    --feito-veu: rgba(111, 138, 114, .2);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}
#lp-app[data-template="revista"] {
    --papel: #FFFFFF;
    --papel-fundo: #F5F3EF;
    --tinta: #141414;
    --tinta-suave: #6C6A64;
    --traco: rgba(20, 20, 20, .15);
    --primaria: #141414;
    --primaria-escura: #000000;
    --acento: #FF5A3C;
    --ornamento: #FF5A3C;
    --feito: #3F8A5C;
    --feito-veu: rgba(63, 138, 92, .18);
    --display: 'Fraunces', Georgia, serif;
    --narrativa: 'Work Sans', sans-serif;
}
#lp-app[data-template="album"] {
    --papel: #FFFFFF;
    --papel-fundo: #FEFDFC;
    --tinta: #36434B;
    --tinta-suave: #79868E;
    --traco: rgba(54, 67, 75, .13);
    --primaria: #6B7F8C;
    --primaria-escura: #536571;
    --acento: #E6B8A2;
    --ornamento: #AEC3CE;
    --feito: #85AD95;
    --feito-veu: rgba(133, 173, 149, .22);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}
#lp-app[data-template="imersivo"] {
    --papel: #141414;
    --papel-fundo: #0A0A0A;
    --tinta: #FFFFFF;
    --tinta-suave: #A8A8A8;
    --traco: rgba(255, 255, 255, .16);
    --primaria: #E8C87E;
    --primaria-escura: #CBAB61;
    --acento: #E8C87E;
    --ornamento: #8A8A8A;
    --feito: #94C6A6;
    --feito-veu: rgba(148, 198, 166, .2);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}

#lp-app[data-template="aurora"] {
    --papel: #FFFFFF;
    --papel-fundo: #F4F6FF;
    --tinta: #1B2A4A;
    --tinta-suave: #64719A;
    --traco: rgba(27, 42, 74, .12);
    --primaria: #1B2A4A;
    --primaria-escura: #101C36;
    --acento: #6B7FD8;
    --ornamento: #8B9EE8;
    --feito: #6FA890;
    --feito-veu: rgba(111, 168, 144, .2);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
    --aur-a: #8B9EE8;
    --aur-b: #C9A6E0;
    --aur-c: #7FD0C4;
}
#lp-app[data-template="cinetico"] {
    --papel: #FFFFFF;
    --papel-fundo: #F7F5F0;
    --tinta: #141414;
    --tinta-suave: #6E6A64;
    --traco: rgba(20, 20, 20, .14);
    --primaria: #141414;
    --primaria-escura: #000000;
    --acento: #FF4D2E;
    --ornamento: #FF4D2E;
    --feito: #2F8A5A;
    --feito-veu: rgba(47, 138, 90, .18);
    --display: 'Fraunces', Georgia, serif;
    --narrativa: 'Work Sans', sans-serif;
}
#lp-app[data-template="monolito"] {
    --papel: #121214;
    --papel-fundo: #0A0A0B;
    --tinta: #EDEAE3;
    --tinta-suave: #8C887E;
    --traco: rgba(237, 234, 227, .13);
    --primaria: #EDEAE3;
    --primaria-escura: #C8C2B6;
    --acento: #C8C2B6;
    --ornamento: #6A665E;
    --feito: #9BBCA4;
    --feito-veu: rgba(155, 188, 164, .18);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Work Sans', sans-serif;
}
#lp-app[data-template="camadas"] {
    --papel: #16171C;
    --papel-fundo: #0E0F13;
    --tinta: #E9E4DC;
    --tinta-suave: #8F897E;
    --traco: rgba(233, 228, 220, .13);
    --primaria: #E9E4DC;
    --primaria-escura: #C6BFB2;
    --acento: #B98A5E;
    --ornamento: #6E5A44;
    --feito: #9CB79E;
    --feito-veu: rgba(156, 183, 158, .18);
    --display: 'Playfair Display', Georgia, serif;
    --narrativa: 'Cormorant Garamond', Georgia, serif;
}

#lp-app h1, #lp-app h2, #lp-app h3 {
    font-family: 'Fraunces', serif;
    color: var(--tinta);
    letter-spacing: -0.015em;
    line-height: 1.12;
    margin: 0;
}

#lp-app label {
    display: block;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 10.5px !important;
    color: var(--tinta-suave);
    margin-bottom: 7px;
}

#lp-app input[type="text"],
#lp-app input[type="password"],
#lp-app input[type="date"],
#lp-app input[type="file"],
#lp-app textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--traco);
    border-radius: 10px;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: var(--tinta);
    background: var(--papel);
    box-sizing: border-box;
    margin-bottom: 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#lp-app input[type="text"]:focus,
#lp-app input[type="password"]:focus,
#lp-app textarea:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 16%, transparent);
}
#lp-app textarea { min-height: 84px; resize: vertical; }

/* ---------- Botões ---------- */
.lp-botao {
    display: inline-block;
    background: var(--primaria);
    border: 1px solid var(--primaria);
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 22px;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease, transform .08s ease;
}
.lp-botao:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); }
.lp-botao:active { transform: translateY(1px); }
.lp-botao:disabled { opacity: .45; cursor: not-allowed; }
.lp-botao-secundario {
    background: transparent;
    color: var(--tinta);
    border: 1px solid var(--traco);
}
.lp-botao-secundario:hover { background: var(--papel); border-color: var(--tinta-suave); }

/* =========================================================================
   TELA DE CRIAÇÃO
   ========================================================================= */
.lp-topo-criar { margin-bottom: 26px; }
.lp-eyebrow {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    color: var(--primaria);
    margin-bottom: 10px;
}
.lp-topo-criar h1 { font-size: clamp(28px, 5vw, 40px); margin-bottom: 10px; }
.lp-topo-criar p { color: var(--tinta-suave); font-size: 15px; margin: 0; }

.lp-form-secao {
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: var(--raio);
    padding: 22px;
    margin-bottom: 16px;
}
.lp-secao-titulo {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    margin-bottom: 4px;
}
.lp-secao-ajuda {
    color: var(--tinta-suave);
    font-size: 13.5px;
    margin: 0 0 18px;
}

/* Escolha de tema visual */
.lp-temas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px;
    margin-bottom: 6px;
}
.lp-tema-opcao {
    border: 2px solid var(--traco);
    border-radius: 12px;
    padding: 12px 10px;
    cursor: pointer;
    background: var(--papel);
    text-align: center;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta);
    transition: border-color .15s ease;
}
.lp-tema-opcao:hover { border-color: var(--tinta-suave); }
.lp-tema-opcao[aria-pressed="true"] { border-color: var(--primaria); }
.lp-tema-amostras {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}
.lp-tema-amostras i {
    width: 15px; height: 15px; border-radius: 50%; display: block;
}

/* Vitrine do acervo */
.lp-filtros-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}
.lp-filtros-linha .lp-filtros-categoria { margin-bottom: 0; flex: 1; }
.lp-filtro-outro {
    background: transparent;
    border: 1px dashed var(--primaria);
    color: var(--primaria);
    white-space: nowrap;
}
.lp-filtro-outro:hover { background: var(--papel-fundo); border-style: solid; }
.lp-filtros-categoria {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.lp-filtro-btn {
    font-family: 'Work Sans', sans-serif;
    background: transparent;
    border: 1px solid var(--traco);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: all .15s ease;
}
.lp-filtro-btn:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.lp-filtro-btn.lp-filtro-ativo {
    background: var(--tinta);
    color: var(--papel);
    border-color: var(--tinta);
}

.lp-vitrine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    grid-auto-rows: min-content;
    gap: 12px;
    align-items: start;
}
.lp-vitrine-card {
    position: relative;
    background: var(--papel);
    border: 2px solid var(--traco);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Work Sans', sans-serif;
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.lp-vitrine-card:hover { border-color: var(--primaria); }
@media (hover: hover) and (pointer: fine) {
    .lp-vitrine-card:hover { transform: translateY(-2px); }
}
.lp-vitrine-selecionar {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.lp-vitrine-selecionar:focus-visible { outline: 3px solid var(--primaria); outline-offset: -2px; }
.lp-vitrine-img-wrap {
    display: block;
    /* altura fixa em vez de aspect-ratio: a grade reserva o espaço certo
       imediatamente, sem depender do carregamento da imagem pra calcular
       a altura da linha — isso é o que causava a sobreposição */
    height: 136px;
    padding: 14px;
    background: #fff;
    position: relative;
    box-sizing: border-box;
}
.lp-vitrine-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lp-vitrine-card .lp-vitrine-img-wrap img { position: relative; z-index: 1; }
.lp-vitrine-card span.lp-vitrine-nome {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    padding: 10px 11px 12px;
    border-top: 1px solid var(--traco);
    color: var(--tinta);
}

/* Estado escolhido — precisa ser óbvio à distância de um braço */
.lp-vitrine-check {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: var(--feito-veu);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
    z-index: 2;
}
.lp-vitrine-check b {
    display: block;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--feito);
    color: #fff;
    font-size: 27px;
    line-height: 52px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 3px 14px rgba(0,0,0,.3);
    transform: scale(.5);
    transition: transform .22s cubic-bezier(.2,1.5,.4,1);
}
.lp-vitrine-card.lp-vitrine-selecionado {
    border-color: var(--feito);
    box-shadow: 0 0 0 1px var(--feito);
}
.lp-vitrine-card.lp-vitrine-selecionado .lp-vitrine-check { opacity: 1; }
.lp-vitrine-card.lp-vitrine-selecionado .lp-vitrine-check b { transform: scale(1); }
.lp-vitrine-card.lp-vitrine-selecionado .lp-vitrine-nome {
    background: var(--feito);
    color: #fff;
    border-top-color: var(--feito);
}

/* Controle de quantidade — direto no card, visível assim que o item é escolhido */
.lp-vitrine-qtd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid var(--traco);
    background: var(--papel-fundo);
}
.lp-vitrine-card.lp-vitrine-selecionado .lp-vitrine-qtd { border-top-color: var(--feito); }
.lp-vitrine-qtd[hidden] { display: none; }
.lp-vitrine-qtd .lp-qtd-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--traco);
    background: var(--papel);
    color: var(--tinta);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-vitrine-qtd .lp-qtd-btn:hover { background: var(--traco); }
.lp-vitrine-qtd .lp-qtd-numero {
    min-width: 22px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
}

/* Item avulso */
.lp-avulso { margin-top: 20px; border-top: 1px solid var(--traco); padding-top: 16px; }
.lp-avulso summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--primaria);
    list-style: none;
}
.lp-avulso summary::-webkit-details-marker { display: none; }
.lp-avulso summary::before { content: "+ "; font-weight: 700; }
.lp-avulso[open] summary::before { content: "− "; }
.lp-avulso-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lp-avulso-linha input { margin-bottom: 0; flex: 1 1 170px; }
.lp-avulso-qtd { flex: 0 0 70px !important; text-align: center; }
.lp-avulso-linha button { flex: 0 0 auto; }
.lp-nota { color: var(--tinta-suave); font-size: 12.5px; margin: 10px 0 0; }

/* Itens escolhidos */
.lp-lista-itens-adicionados { display: flex; flex-direction: column; gap: 8px; }
.lp-item-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    background: var(--papel-fundo);
    border-radius: 10px;
    padding: 9px 12px;
}
.lp-item-linha img {
    width: 42px; height: 42px; object-fit: contain;
    border-radius: 8px; background: #fff; flex: 0 0 auto;
}
.lp-item-linha span {
    flex: 1 1 140px;
    min-width: 0; /* permite o nome encolher em vez de estourar a linha */
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: break-word;
}
.lp-qtd-controle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: 999px;
    padding: 3px;
    flex: 0 0 auto;
}
.lp-qtd-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--tinta);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-qtd-btn:hover { background: var(--traco); }
.lp-qtd-numero {
    min-width: 22px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    font-family: 'Space Mono', monospace;
}
.lp-remover-item {
    background: none; border: none; cursor: pointer;
    color: var(--tinta-suave); font-size: 12.5px; font-weight: 600;
    text-decoration: underline; font-family: 'Work Sans', sans-serif;
    padding: 4px;
}
.lp-remover-item:hover { color: #B3261E; }
.lp-vazio { color: var(--tinta-suave); font-size: 13.5px; margin: 0; }

/* Barra fixa de conclusão */
.lp-barra-acao {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: var(--raio);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 -2px 18px rgba(0,0,0,0.07);
    margin-top: 18px;
}
.lp-barra-info { font-size: 13.5px; color: var(--tinta-suave); }
.lp-barra-info strong { color: var(--tinta); font-size: 15px; }
.lp-status-salvar { font-size: 12px; color: var(--tinta-suave); }

.lp-erro { color: #B3261E; font-size: 14px; margin: 0 0 12px; font-weight: 500; }

.lp-aviso-finalizada {
    background: var(--papel);
    border: 1px solid var(--feito);
    border-left-width: 4px;
    border-radius: var(--raio);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.lp-aviso-finalizada h2 { font-size: 19px; margin-bottom: 6px; }
.lp-aviso-finalizada p { font-size: 14px; color: var(--tinta-suave); margin: 0 0 12px; }

.lp-url-caixa {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    background: var(--papel-fundo);
    border: 1px solid var(--traco);
    border-radius: 10px;
    padding: 8px 8px 8px 14px;
}
.lp-url-caixa input {
    flex: 1 1 180px; border: none !important; background: transparent !important;
    font-family: 'Space Mono', monospace; font-size: 12.5px;
    color: var(--tinta); margin: 0 !important; padding: 6px 0 !important;
}
.lp-url-caixa input:focus { box-shadow: none !important; }

/* Tela de sucesso */
.lp-sucesso { text-align: center; padding: 40px 20px; }
.lp-sucesso-selo {
    width: 62px; height: 62px; border-radius: 50%;
    background: var(--feito); color: #fff;
    font-size: 30px; line-height: 62px;
    margin: 0 auto 18px;
}
.lp-sucesso h2 { font-size: 27px; margin-bottom: 8px; }
.lp-sucesso > p { color: var(--tinta-suave); font-size: 15px; margin: 0 auto 20px; max-width: 400px; }
.lp-sucesso-acoes { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin: 18px auto 0; }
.lp-btn-whatsapp { background: #25D366; border-color: #25D366; }
.lp-btn-whatsapp:hover { background: #1DA851; border-color: #1DA851; }

/* =========================================================================
   PÁGINA PÚBLICA — o convite
   ========================================================================= */
#lp-app[data-modo="ver"] {
    max-width: 1120px;
    padding: 0 16px 80px;
}

/* a marca d'água não combina com os templates novos */
#lp-app[data-modo="ver"]::before { display: none; }

#lp-app[data-template] h1,
#lp-app[data-template] h2,
#lp-app[data-template] h3 {
    font-family: var(--display, 'Fraunces', serif);
}

/* ---------- o cartão do convite ---------- */
.lp-convite {
    position: relative;
    min-height: 92vh;
    min-height: 92svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 0;
    overflow: hidden;
}

.lp-orn {
    position: absolute;
    width: 230px;
    opacity: .12;
    pointer-events: none;
    color: var(--ornamento, var(--acento));
}
.lp-orn-esq { left: -80px; top: 15%; }
.lp-orn-dir { right: -80px; bottom: 3%; transform: scaleX(-1); }

/* cada ornamento pede um enquadramento diferente */
.lp-orn-deco { width: 190px; opacity: .16; }
.lp-orn-deco.lp-orn-esq { top: 8%; left: -66px; }
.lp-orn-deco.lp-orn-dir { bottom: 8%; right: -66px; }

.lp-orn-aquarela { width: 290px; opacity: .5; filter: blur(14px); }
.lp-orn-aquarela.lp-orn-esq { left: -110px; top: 6%; }
.lp-orn-aquarela.lp-orn-dir { right: -110px; bottom: -4%; }

.lp-orn-terracota { width: 250px; opacity: .16; }

.lp-cartao {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    background: var(--papel);
    border: 1px solid var(--traco);
    padding: 48px 26px 42px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -28px rgba(0,0,0,.26);
}

.lp-cartao-regua {
    width: 54px;
    height: 1px;
    background: var(--acento);
    border: none;
    margin: 0 auto 30px;
    transform: scaleX(0);
    transform-origin: center;
}
.lp-cartao-regua-fim { margin: 42px auto 0; }

.lp-cartao-foto {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 22px;
    border: 3px solid var(--papel);
    box-shadow: 0 4px 20px rgba(0,0,0,.14);
}

.lp-cartao-eyebrow {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .36em;
    font-size: 9.5px;
    color: var(--ornamento, var(--tinta-suave));
    margin: 0 0 26px;
}

.lp-cartao-titulo {
    font-size: clamp(32px, 11vw, 62px);
    line-height: .98;
    font-weight: 400;
    margin: 0;
    letter-spacing: -.01em;
}

.lp-cartao-nome {
    font-family: var(--narrativa, 'Work Sans', sans-serif);
    font-style: italic;
    font-size: clamp(19px, 5vw, 28px);
    color: var(--acento);
    margin: 10px 0 0;
    line-height: 1.2;
}

.lp-cartao-quando { margin: 30px 0 34px; }
.lp-cartao-quando p {
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: 11px;
    margin: 0 0 7px;
    color: var(--tinta);
}
.lp-cartao-quando p + p { color: var(--tinta-suave); }

/* ---------- contagem regressiva ---------- */
.lp-contagem-rotulo {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .36em;
    font-size: 9px;
    color: var(--ornamento, var(--tinta-suave));
    margin: 0 0 16px;
}
.lp-contagem {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
}
.lp-conta-bloco { min-width: 48px; }
.lp-conta-valor {
    font-family: var(--display, 'Fraunces', serif);
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1;
    display: block;
    font-variant-numeric: tabular-nums;
    transition: opacity .3s ease;
}
.lp-conta-unidade {
    display: block;
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .26em;
    font-size: 8px;
    color: var(--tinta-suave);
    margin-top: 8px;
}
.lp-conta-ponto {
    font-family: var(--display, serif);
    font-size: 20px;
    color: var(--acento);
    opacity: .4;
    transform: translateY(-6px);
}
.lp-conta-pisca { opacity: .35; }
.lp-conta-chegou {
    font-family: var(--narrativa, serif);
    font-style: italic;
    font-size: 23px;
    color: var(--acento);
    margin: 6px 0 0;
}

.lp-cartao-acoes { margin-top: 36px; }
.lp-cartao-btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    border: 1px solid var(--tinta);
    border-radius: 999px;
    background: transparent;
    color: var(--tinta);
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: 10px;
    font-weight: 600;
    padding: 15px 28px;
    cursor: pointer;
    text-decoration: none;
    transition: color .45s ease;
}
.lp-cartao-btn > span { position: relative; z-index: 2; }
.lp-cartao-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tinta);
    transform: translateY(101%);
    transition: transform .45s cubic-bezier(.19,1,.22,1);
}
.lp-cartao-btn:hover { color: var(--papel); }
.lp-cartao-btn:hover::after { transform: translateY(0); }

.lp-rolar {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .38em;
    font-size: 8px;
    color: var(--tinta-suave);
    opacity: .55;
}

/* ---------- recado ---------- */
.lp-recado-secao {
    max-width: 620px;
    margin: 0 auto;
    padding: 70px 0 0;
    text-align: center;
}
.lp-recado-secao p {
    font-family: var(--narrativa, 'Work Sans', sans-serif);
    font-size: clamp(19px, 4.2vw, 24px);
    line-height: 1.62;
    color: var(--tinta-suave);
    margin: 0;
}

/* ---------- cabeçalho de seção ---------- */
.lp-secao-cabeca { margin-bottom: 30px; }
.lp-secao-eyebrow {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .32em;
    font-size: 9px;
    color: var(--ornamento, var(--tinta-suave));
    margin: 0 0 12px;
}
.lp-secao-grande {
    font-size: clamp(26px, 5.6vw, 44px);
    line-height: 1.08;
    font-weight: 400;
    margin: 0;
}

/* ---------- mural de fotos ---------- */
.lp-mural-secao { padding: 70px 0 0; }
.lp-mural {
    column-count: 2;
    column-gap: 10px;
}
.lp-mural figure {
    break-inside: avoid;
    margin: 0 0 10px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--traco);
}
.lp-mural img {
    width: 100%;
    display: block;
    filter: saturate(.9);
    transition: transform 1.1s cubic-bezier(.19,1,.22,1), filter .7s ease;
}
@media (hover: hover) and (pointer: fine) {
    .lp-mural figure:hover img { transform: scale(1.055); filter: saturate(1); }
}

/* ---------- seção dos presentes ---------- */
.lp-presentes-secao { padding: 70px 0 0; }

/* Progresso */
.lp-progresso { max-width: 380px; margin: 22px 0 0; }
.lp-progresso-trilho {
    height: 2px;
    background: var(--traco);
    overflow: hidden;
}
.lp-progresso-barra {
    height: 100%;
    background: var(--acento);
    transition: width .9s cubic-bezier(.19,1,.22,1);
}
.lp-progresso-texto {
    font-family: 'Work Sans', sans-serif;
    font-size: 11.5px;
    color: var(--tinta-suave);
    margin: 11px 0 0;
}

/* Barra acima da grade */
.lp-secao-presentes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 30px 0 24px;
}
.lp-secao-presentes .lp-aviso-afiliado { margin: 0; flex: 1 1 260px; }
.lp-filtro-disponiveis {
    background: none;
    border: none;
    border-bottom: 1px solid var(--traco);
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10px;
    font-weight: 600;
    color: var(--tinta-suave);
    padding: 0 0 4px;
    transition: color .3s ease, border-color .3s ease;
}
.lp-filtro-disponiveis:hover { color: var(--tinta); border-color: var(--tinta); }

/* Grade de presentes — sem preço em lugar nenhum */
.lp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 12px;
}
.lp-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    transition: transform .6s cubic-bezier(.19,1,.22,1);
}
.lp-card:hover { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
    .lp-card:hover { transform: translateY(-6px); }
}

.lp-card-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--traco);
    overflow: hidden;
    padding: 14px;
}
.lp-card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .9s cubic-bezier(.19,1,.22,1);
}
@media (hover: hover) and (pointer: fine) {
    .lp-card:hover .lp-card-img-wrap img { transform: scale(1.05); }
}
.lp-card-imagem-link { display: block; border-bottom: none; }

.lp-qtd-selo {
    position: absolute;
    top: 9px; left: 9px;
    background: var(--tinta);
    color: var(--papel);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    z-index: 2;
}
.lp-qtd-status {
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    color: var(--tinta-suave);
    margin: 0;
    text-align: center;
}

.lp-card-corpo {
    padding: 13px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.lp-nome-item {
    font-family: var(--display, 'Fraunces', serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.34;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botão que leva à loja — o clique é a curiosidade, nunca há preço */
.lp-card-cta {
    display: block;
    text-align: center;
    border: 1px solid var(--tinta);
    border-radius: 999px;
    padding: 12px 14px;
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;
    font-weight: 600;
    color: var(--tinta);
    text-decoration: none;
    transition: background .4s ease, color .4s ease;
}
.lp-card-cta:hover { background: var(--tinta); color: var(--papel); }

.lp-reservar-area { display: flex; flex-direction: column; gap: 7px; }
.lp-reservar-btn {
    background: none;
    border: 1px solid var(--traco);
    border-radius: 999px;
    padding: 11px 14px;
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: border-color .3s ease, color .3s ease;
}
.lp-reservar-btn:hover { border-color: var(--tinta); color: var(--tinta); }

.lp-card.lp-reservado { opacity: .5; }
.lp-card.lp-reservado .lp-card-img-wrap img { filter: grayscale(.6); }

.lp-tag-reservado {
    background: var(--feito-veu);
    color: var(--feito);
    border: 1px solid var(--feito);
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 9.5px;
    font-weight: 600;
    padding: 11px 12px;
    border-radius: 999px;
    text-align: center;
}

.lp-reservar-form { display: flex; flex-direction: column; gap: 7px; }
.lp-reservar-form input {
    margin-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--traco) !important;
    border-radius: 0 !important;
    padding: 10px 2px !important;
    font-size: 14px;
}
.lp-reservar-form input:focus {
    border-bottom-color: var(--tinta) !important;
    box-shadow: none !important;
}
.lp-reservar-form button { flex: 0 0 auto; }
.lp-confirmar {
    background: none;
    border: 1px solid var(--tinta);
    border-radius: 999px;
    padding: 11px 14px;
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--tinta);
    cursor: pointer;
}
.lp-confirmar:hover { background: var(--tinta); color: var(--papel); }

.lp-link-cancelar {
    background: none; border: none; cursor: pointer;
    color: var(--tinta-suave); font-size: 10.5px; text-decoration: underline;
    font-family: 'Work Sans', sans-serif; padding: 2px 0 0;
}
.lp-link-cancelar:hover { color: var(--tinta); }

/* ---------- animações do convite ---------- */
@keyframes lp-subir {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes lp-levantar {
    from { opacity: 0; transform: translateY(54px) scale(.968); }
    to   { opacity: 1; transform: none; }
}
@keyframes lp-tracar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.lp-entra {
    opacity: 0;
    animation: lp-subir .9s cubic-bezier(.22,.65,.25,1) forwards;
}
.lp-cartao {
    opacity: 0;
    animation: lp-levantar 1.35s cubic-bezier(.19,1,.22,1) forwards;
}
.lp-cartao-regua {
    animation: lp-tracar 1.15s cubic-bezier(.65,0,.35,1) forwards;
}

.lp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.22,.65,.25,1),
                transform .9s cubic-bezier(.22,.65,.25,1);
}
.lp-reveal.lp-visivel { opacity: 1; transform: none; }

/* Rodapé */
.lp-rodape {
    text-align: center;
    padding: 70px 0 0;
    margin-top: 56px;
    border-top: 1px solid var(--traco);
    color: var(--tinta-suave);
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    line-height: 1.65;
}
.lp-rodape a { color: var(--acento); text-decoration: none; }
.lp-rodape p { margin: 0 auto 8px; max-width: 560px; }
.lp-rodape-nome {
    font-family: var(--display, 'Fraunces', serif);
    font-size: 22px;
    color: var(--tinta);
    margin-bottom: 8px !important;
}
.lp-rodape-data {
    text-transform: uppercase;
    letter-spacing: .26em;
    font-size: 9.5px;
    margin-bottom: 24px !important;
}

/* Divulgação de afiliados — precisa ficar legível, não escondida */
.lp-aviso-afiliado {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--tinta-suave);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.lp-aviso-topo {
    text-align: center;
    margin: 0 auto 18px;
    padding: 10px 14px;
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: 10px;
}

/* Aviso flutuante */
.lp-toast {
    position: fixed; left: 50%; bottom: 26px;
    transform: translateX(-50%) translateY(80px);
    background: var(--tinta); color: var(--papel);
    padding: 13px 22px; border-radius: 999px;
    font-size: 14px; font-weight: 500;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
    z-index: 9999; max-width: 90vw; text-align: center;
}
.lp-toast.lp-toast-visivel { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 620px) {
    /* Página pública: os cards do convite já são desenhados pensando no
       celular, então aqui só ajustamos o que fica apertado de verdade. */
    .lp-card-img-wrap { padding: 10px; }
    .lp-nome-item {
        font-size: 13.5px;
        -webkit-line-clamp: 2;
    }
    .lp-card-cta { padding: 10px 12px; font-size: 9.5px; }
    .lp-reservar-btn { padding: 10px 12px; font-size: 9px; }
    .lp-tag-reservado { padding: 9px 10px; font-size: 9px; }
    .lp-link-cancelar { font-size: 10px; }
    .lp-qtd-status { font-size: 10.5px; }
    .lp-qtd-selo { font-size: 9.5px; padding: 3px 7px; top: 7px; left: 7px; }

    /* Vitrine de seleção: 3 colunas fixas — o cálculo automático de colunas
       podia colapsar pra 1 coluna dependendo do tema; com contagem explícita
       cabem muito mais itens por tela */
    .lp-vitrine-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .lp-vitrine-img-wrap { height: 88px; padding: 8px; }
    .lp-vitrine-card { border-radius: 10px; }
    .lp-vitrine-card span.lp-vitrine-nome {
        font-size: 11px;
        padding: 7px 8px 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 36px;
    }
    .lp-vitrine-check b {
        width: 38px; height: 38px;
        font-size: 20px; line-height: 38px;
    }
    .lp-vitrine-qtd { padding: 5px; gap: 3px; }
    .lp-vitrine-qtd .lp-qtd-btn { width: 24px; height: 24px; font-size: 14px; }
    .lp-vitrine-qtd .lp-qtd-numero { min-width: 18px; font-size: 12px; }

    .lp-cartao { padding: 40px 20px 34px; }
    .lp-reservar-form, .lp-avulso-linha { flex-direction: column; }
    .lp-reservar-form input, .lp-reservar-form button,
    .lp-avulso-linha input, .lp-avulso-linha button { width: 100%; font-size: 16px; }
    .lp-barra-acao { flex-direction: column; align-items: stretch; }
    .lp-barra-acao .lp-botao { width: 100%; }

    /* Sua lista: foto + nome na primeira linha; quantidade e "Tirar" na segunda,
       alinhados à direita — evita espremer o nome do produto */
    .lp-item-linha span {
        flex: 1 1 calc(100% - 60px);
    }
    .lp-qtd-controle {
        margin-left: 52px; /* alinha com o início do nome, abaixo da foto */
    }
    .lp-remover-item {
        margin-left: auto;
    }
}

/* Telas bem estreitas: 2 colunas ainda confortáveis */
@media (max-width: 350px) {
    .lp-vitrine-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-vitrine-img-wrap { height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
    #lp-app *, #lp-app *::before { transition: none !important; animation: none !important; }
}

/* =========================================================================
   TELA DE CRIAÇÃO — seletor de template e mural de fotos
   ========================================================================= */
.lp-temas {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.lp-tema-nome {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.lp-tema-evento {
    display: block;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 8.5px;
    color: var(--tinta-suave);
    margin-top: 4px;
}

.lp-mural-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.lp-mural-item {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--papel-fundo);
    border: 1px solid var(--traco);
}
.lp-mural-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lp-mural-item-novo::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px dashed var(--primaria);
    border-radius: 8px;
    pointer-events: none;
}
.lp-mural-remover {
    position: absolute;
    top: 3px; right: 3px;
    width: 21px; height: 21px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.lp-mural-remover:hover { background: #B3261E; }
.lp-mural-contador { flex-basis: 100%; margin-top: 4px; }

/* =========================================================================
   TELAS MAIORES — o convite ganha respiro
   ========================================================================= */
@media (min-width: 700px) {
    #lp-app[data-modo="ver"] { padding: 0 32px 100px; }
    .lp-cartao { padding: 68px 58px 54px; }
    .lp-contagem { gap: 24px; }
    .lp-mural { column-count: 3; column-gap: 16px; }
    .lp-mural figure { margin-bottom: 16px; }
    .lp-grid { grid-template-columns: repeat(3, 1fr); gap: 42px 22px; }
    .lp-nome-item { font-size: 16.5px; }
    .lp-recado-secao,
    .lp-mural-secao,
    .lp-presentes-secao { padding-top: 104px; }
}

@media (min-width: 1024px) {
    .lp-mural { column-count: 4; }
    .lp-grid { grid-template-columns: repeat(4, 1fr); }
}

#lp-app :focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    #lp-app .lp-entra,
    #lp-app .lp-cartao,
    #lp-app .lp-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    #lp-app .lp-cartao-regua { transform: scaleX(1) !important; }
}

/* =========================================================================
   ASSINATURAS VISUAIS DE CADA TEMPLATE
   Aqui é onde os templates deixam de ser "a mesma página com outra cor".
   Cada um reescreve proporção, alinhamento, moldura ou eixo tipográfico.
   ========================================================================= */

/* ---------- EDITORIAL — tipografia monumental, alinhamento à esquerda ---- */
#lp-app[data-template="editorial"] .lp-cartao {
    text-align: left;
    border: none;
    box-shadow: none;
    background: transparent;
    max-width: 780px;
    padding: 40px 0;
}
#lp-app[data-template="editorial"] .lp-cartao-regua {
    margin: 0 0 26px;
    width: 100%;
    height: 3px;
    background: var(--tinta);
}
#lp-app[data-template="editorial"] .lp-cartao-regua-fim {
    margin: 40px 0 0;
    height: 1px;
    background: var(--traco);
}
#lp-app[data-template="editorial"] .lp-cartao-titulo {
    font-size: clamp(44px, 15vw, 128px);
    line-height: .84;
    letter-spacing: -.045em;
    font-weight: 500;
}
#lp-app[data-template="editorial"] .lp-cartao-nome {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: clamp(11px, 2.6vw, 14px);
    color: var(--tinta);
    margin-top: 22px;
}
#lp-app[data-template="editorial"] .lp-cartao-foto {
    margin: 0 0 26px;
    border-radius: 0;
    width: 96px;
    height: 120px;
    box-shadow: none;
    border: none;
}
#lp-app[data-template="editorial"] .lp-cartao-eyebrow { color: var(--acento); }
#lp-app[data-template="editorial"] .lp-contagem { justify-content: flex-start; }
#lp-app[data-template="editorial"] .lp-cartao-acoes { justify-content: flex-start; }
#lp-app[data-template="editorial"] .lp-secao-grande { letter-spacing: -.035em; }
#lp-app[data-template="editorial"] .lp-card-moldura,
#lp-app[data-template="editorial"] .lp-card-img-wrap { border-radius: 0; }

/* ---------- TERRACOTA — arco no topo, cantos arredondados ---------------- */
#lp-app[data-template="terracota"] .lp-cartao {
    border-radius: 260px 260px 18px 18px;
    padding-top: 74px;
}
#lp-app[data-template="terracota"] .lp-cartao-foto {
    width: 116px;
    height: 116px;
}
#lp-app[data-template="terracota"] .lp-card-img-wrap {
    border-radius: 130px 130px 8px 8px;
}
#lp-app[data-template="terracota"] .lp-mural figure {
    border-radius: 120px 120px 10px 10px;
}
#lp-app[data-template="terracota"] .lp-cartao-btn { border-radius: 999px; }

/* ---------- ART DÉCO — moldura dupla, simetria, tudo em versalete -------- */
#lp-app[data-template="deco"] .lp-cartao {
    border: 1px solid var(--acento);
    box-shadow: 0 0 0 1px var(--acento) inset,
                0 0 0 7px var(--papel) inset,
                0 0 0 8px var(--acento) inset,
                0 24px 60px -30px #000;
    padding: 58px 30px 52px;
}
#lp-app[data-template="deco"] .lp-cartao-titulo {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(26px, 8vw, 50px);
}
#lp-app[data-template="deco"] .lp-cartao-nome {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .32em;
    font-size: 13px;
}
#lp-app[data-template="deco"] .lp-cartao-regua {
    width: 100px;
    height: 3px;
    background: var(--acento);
    position: relative;
}
#lp-app[data-template="deco"] .lp-cartao-regua::before,
#lp-app[data-template="deco"] .lp-cartao-regua::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 9px;
    height: 9px;
    background: var(--acento);
    transform: rotate(45deg);
}
#lp-app[data-template="deco"] .lp-cartao-regua::before { left: -14px; }
#lp-app[data-template="deco"] .lp-cartao-regua::after { right: -14px; }
#lp-app[data-template="deco"] .lp-secao-grande { text-transform: uppercase; letter-spacing: .05em; }
#lp-app[data-template="deco"] .lp-card-img-wrap { background: #FBFAF6; }
#lp-app[data-template="deco"] .lp-cartao-foto { border-color: var(--acento); }

/* ---------- POLAROID — fotos em moldura branca, levemente tortas -------- */
#lp-app[data-template="polaroid"] .lp-cartao {
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 20px 44px -24px rgba(0,0,0,.32);
    border: none;
}
#lp-app[data-template="polaroid"] .lp-cartao-foto {
    border-radius: 0;
    width: 132px;
    height: 132px;
    padding: 9px 9px 30px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,.2);
    box-sizing: content-box;
    object-fit: cover;
    transform: rotate(-2.5deg);
    border: none;
}
#lp-app[data-template="polaroid"] .lp-mural figure {
    background: #fff;
    padding: 9px 9px 34px;
    border-radius: 2px;
    box-shadow: 0 3px 14px rgba(0,0,0,.16);
    transition: transform .5s cubic-bezier(.19,1,.22,1);
}
#lp-app[data-template="polaroid"] .lp-mural figure:nth-child(3n+1) { transform: rotate(-1.8deg); }
#lp-app[data-template="polaroid"] .lp-mural figure:nth-child(3n+2) { transform: rotate(1.4deg); }
#lp-app[data-template="polaroid"] .lp-mural figure:nth-child(3n)   { transform: rotate(-.7deg); }
@media (hover: hover) and (pointer: fine) {
    #lp-app[data-template="polaroid"] .lp-mural figure:hover { transform: rotate(0) scale(1.03); }
    #lp-app[data-template="polaroid"] .lp-mural figure:hover img { transform: none; }
}
#lp-app[data-template="polaroid"] .lp-card-img-wrap {
    background: #fff;
    padding: 12px 12px 26px;
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    border: none;
}

/* ---------- TROPICAL — cores cheias, cantos vivos ----------------------- */
#lp-app[data-template="tropical"] .lp-cartao {
    border-radius: 6px;
    border-top: 5px solid var(--acento);
}
#lp-app[data-template="tropical"] .lp-cartao-titulo { font-weight: 600; }
#lp-app[data-template="tropical"] .lp-cartao-nome {
    font-style: normal;
    font-weight: 600;
    color: var(--primaria);
}
#lp-app[data-template="tropical"] .lp-cartao-btn {
    background: var(--primaria);
    border-color: var(--primaria);
    color: #fff;
}
#lp-app[data-template="tropical"] .lp-cartao-btn::after { background: var(--acento); }
#lp-app[data-template="tropical"] .lp-cartao-btn:hover { color: var(--tinta); }
#lp-app[data-template="tropical"] .lp-cartao-btn-vazio {
    background: transparent;
    color: var(--tinta);
    border-color: var(--tinta);
}
#lp-app[data-template="tropical"] .lp-card-img-wrap { border-radius: 6px; }
#lp-app[data-template="tropical"] .lp-mural figure { border-radius: 6px; }
#lp-app[data-template="tropical"] .lp-orn { opacity: .17; }

/* ---------- AQUARELA — bordas suaves, quase sem contorno ---------------- */
#lp-app[data-template="aquarela"] .lp-cartao {
    border: none;
    border-radius: 20px;
    box-shadow: 0 24px 70px -34px rgba(51,66,76,.4);
}
#lp-app[data-template="aquarela"] .lp-card-img-wrap {
    border-radius: 14px;
    border-color: transparent;
    background: #FCFAF9;
}
#lp-app[data-template="aquarela"] .lp-mural figure { border-radius: 14px; }
#lp-app[data-template="aquarela"] .lp-cartao-btn { border-radius: 999px; }

/* ---------- NUVEM — arredondado e leve --------------------------------- */
#lp-app[data-template="nuvem"] .lp-cartao {
    border-radius: 22px;
    border: none;
    box-shadow: 0 22px 64px -34px rgba(45,59,68,.38);
}
#lp-app[data-template="nuvem"] .lp-card-img-wrap { border-radius: 14px; }
#lp-app[data-template="nuvem"] .lp-mural figure { border-radius: 14px; }

/* ---------- CONFETE — festivo, com pontos no fundo ---------------------- */
#lp-app[data-template="confete"] .lp-convite::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(circle, var(--primaria) 2.5px, transparent 2.6px),
        radial-gradient(circle, var(--acento) 2px, transparent 2.1px),
        radial-gradient(circle, var(--ornamento) 2px, transparent 2.1px);
    background-size: 190px 190px, 150px 150px, 230px 230px;
    background-position: 0 0, 70px 90px, 130px 30px;
}
#lp-app[data-template="confete"] .lp-cartao {
    border-radius: 14px;
    z-index: 2;
}
#lp-app[data-template="confete"] .lp-cartao-titulo { font-weight: 600; }
#lp-app[data-template="confete"] .lp-card-img-wrap { border-radius: 10px; }
#lp-app[data-template="confete"] .lp-mural figure { border-radius: 10px; }

/* =========================================================================
   CONFIRMAÇÃO DE PRESENÇA — página pública
   ========================================================================= */
.lp-rsvp-secao { padding: 70px 0 0; }

.lp-rsvp-caixa {
    max-width: 520px;
    margin: 0 auto;
    background: var(--papel);
    border: 1px solid var(--traco);
    padding: 38px 26px 34px;
    text-align: center;
}

.lp-rsvp-caixa .lp-secao-eyebrow { margin-bottom: 12px; }
.lp-rsvp-caixa .lp-secao-grande { margin-bottom: 10px; }

.lp-rsvp-prazo {
    font-family: var(--narrativa, 'Work Sans', sans-serif);
    font-size: 18px;
    color: var(--tinta-suave);
    margin: 0 0 28px;
}

.lp-rsvp-form { text-align: left; margin-top: 8px; }
.lp-rsvp-form label {
    margin-top: 4px;
}
.lp-rsvp-form input[type="text"],
.lp-rsvp-form input[type="tel"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--traco);
    border-radius: 0;
    padding: 12px 2px;
    font-size: 16px; /* 16px evita o zoom automático no iPhone */
    margin-bottom: 22px;
}
.lp-rsvp-form input[type="text"]:focus,
.lp-rsvp-form input[type="tel"]:focus {
    border-bottom-color: var(--tinta);
    box-shadow: none;
}

.lp-rsvp-pessoas {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.lp-rsvp-num {
    flex: 1 1 44px;
    min-width: 44px;
    padding: 13px 6px;
    border: 1px solid var(--traco);
    border-radius: 999px;
    background: transparent;
    color: var(--tinta);
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.lp-rsvp-num:hover { border-color: var(--tinta); }
.lp-rsvp-num-ativo {
    background: var(--tinta);
    color: var(--papel);
    border-color: var(--tinta);
}

.lp-rsvp-extra {
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    text-align: center;
    font-size: 16px !important;
}

.lp-rsvp-enviar {
    width: 100%;
    margin-top: 22px;
    border: 1px solid var(--tinta);
}
.lp-rsvp-enviar:disabled { opacity: .5; cursor: not-allowed; }

#lp-rsvp-erro .lp-erro { margin: 0 0 6px; }

.lp-rsvp-fechado {
    font-family: var(--narrativa, 'Work Sans', sans-serif);
    font-size: 18px;
    color: var(--tinta-suave);
    margin: 12px 0 0;
    line-height: 1.6;
}

.lp-rsvp-pronto { padding: 8px 0 0; }
.lp-rsvp-selo {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--feito-veu);
    color: var(--feito);
    border: 1px solid var(--feito);
    font-size: 25px;
    line-height: 52px;
    margin: 0 auto 16px;
}
.lp-rsvp-pronto-titulo {
    font-family: var(--display, 'Fraunces', serif);
    font-size: 24px;
    margin: 0 0 8px;
}
.lp-rsvp-pronto-texto {
    font-family: var(--narrativa, 'Work Sans', sans-serif);
    font-size: 17px;
    color: var(--tinta-suave);
    margin: 0 0 18px;
    line-height: 1.6;
}
.lp-rsvp-refazer {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--tinta-suave);
    text-decoration: underline;
    padding: 4px;
}
.lp-rsvp-refazer:hover { color: var(--tinta); }

/* dois botões no convite, empilhados no celular */
.lp-cartao-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.lp-cartao-btn-vazio {
    border-color: var(--traco);
    color: var(--tinta-suave);
}
.lp-cartao-btn-vazio::after { display: none; }
.lp-cartao-btn-vazio:hover {
    border-color: var(--tinta);
    color: var(--tinta);
    background: transparent;
}

/* =========================================================================
   TELA DE CRIAÇÃO — liga/desliga do RSVP
   ========================================================================= */
.lp-liga-desliga {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 15px !important;
    color: var(--tinta) !important;
    margin-bottom: 18px !important;
}
.lp-liga-desliga input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--primaria);
    flex: 0 0 auto;
}
#lp-rsvp-opcoes[hidden] { display: none; }

@media (min-width: 700px) {
    .lp-rsvp-caixa { padding: 46px 44px 40px; }
    .lp-cartao-acoes { flex-direction: row; justify-content: center; }
    .lp-rsvp-secao { padding-top: 104px; }
}

/* =========================================================================
   LAYOUTS ESTRUTURAIS
   Cada layout reescreve o esqueleto da página. Não é decoração — é
   arquitetura. Os blocos de conteúdo são os mesmos; o que muda é como
   eles se organizam no espaço.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SPLIT — convite fixo à esquerda, conteúdo rola à direita (Ateliê)
   No celular vira empilhado: o convite deixa de ser fixo.
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
    #lp-app[data-layout="split"] {
        max-width: none;
        padding: 0;
    }
    #lp-app[data-layout="split"] .lp-split {
        display: grid;
        grid-template-columns: 45% 55%;
        align-items: start;
    }
    #lp-app[data-layout="split"] .lp-split-fixo {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        background: var(--papel);
        border-right: 1px solid var(--traco);
        overflow: hidden;
    }
    #lp-app[data-layout="split"] .lp-split-fixo .lp-cartao {
        border: none;
        box-shadow: none;
        background: transparent;
        max-width: 460px;
    }
    #lp-app[data-layout="split"] .lp-split-rola {
        padding: 0 clamp(24px, 5vw, 72px);
        min-height: 100vh;
    }
    #lp-app[data-layout="split"] .lp-split-rola > section:first-child { padding-top: 96px; }
    #lp-app[data-layout="split"] .lp-recado-secao,
    #lp-app[data-layout="split"] .lp-mural-secao,
    #lp-app[data-layout="split"] .lp-presentes-secao,
    #lp-app[data-layout="split"] .lp-rsvp-secao { max-width: 620px; margin-inline: 0; text-align: left; }
    #lp-app[data-layout="split"] .lp-rsvp-caixa { margin-inline: 0; }
    #lp-app[data-layout="split"] .lp-grid { grid-template-columns: repeat(2, 1fr); }
    #lp-app[data-layout="split"] .lp-rodape { text-align: left; }
    #lp-app[data-layout="split"] .lp-orn { opacity: .1; }
}

/* -------------------------------------------------------------------------
   REVISTA — capa editorial: título gigante, marca e número de página
   ------------------------------------------------------------------------- */
#lp-app[data-layout="revista"] .lp-capa {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 30px clamp(20px, 5vw, 64px) 40px;
    overflow: hidden;
}
#lp-app[data-layout="revista"] .lp-capa-marca,
#lp-app[data-layout="revista"] .lp-capa-num {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: 11px;
    color: var(--tinta-suave);
    align-self: start;
}
#lp-app[data-layout="revista"] .lp-capa-marca {
    position: absolute;
    top: 30px;
    left: clamp(20px, 5vw, 64px);
}
#lp-app[data-layout="revista"] .lp-capa-num {
    position: absolute;
    top: 30px;
    right: clamp(20px, 5vw, 64px);
}
#lp-app[data-layout="revista"] .lp-capa-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
    z-index: 0;
    filter: grayscale(.3);
}
#lp-app[data-layout="revista"] .lp-capa-texto {
    position: relative;
    z-index: 1;
    align-self: center;
    max-width: 1000px;
}
#lp-app[data-layout="revista"] .lp-capa-titulo {
    font-family: var(--display, serif);
    font-size: clamp(56px, 19vw, 220px);
    line-height: .82;
    letter-spacing: -.04em;
    font-weight: 500;
    margin: 12px 0;
    /* o título sangra: passa da margem esquerda de propósito */
    margin-left: -.06em;
}
#lp-app[data-layout="revista"] .lp-capa-linha {
    font-family: var(--narrativa, sans-serif);
    font-size: clamp(15px, 2.4vw, 20px);
    color: var(--tinta-suave);
    margin: 18px 0 26px;
    max-width: 540px;
}
#lp-app[data-layout="revista"] .lp-capa .lp-contagem { justify-content: flex-start; }
#lp-app[data-layout="revista"] .lp-capa .lp-rolar { position: static; align-self: end; transform: none; }
#lp-app[data-layout="revista"] .lp-recado-secao { padding-top: 104px; }

/* -------------------------------------------------------------------------
   TIMELINE — eixo vertical central costurando as seções (Linha, Álbum)
   ------------------------------------------------------------------------- */
#lp-app[data-layout="timeline"] .lp-timeline {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 60px 0 20px;
}
#lp-app[data-layout="timeline"] .lp-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--traco);
    transform: translateX(-50%);
}
#lp-app[data-layout="timeline"] .lp-tl-item {
    position: relative;
    padding: 0 0 72px;
}
#lp-app[data-layout="timeline"] .lp-tl-ponto {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--papel-fundo);
    border: 2px solid var(--acento);
    transform: translateX(-50%);
    z-index: 2;
}
#lp-app[data-layout="timeline"] .lp-tl-corpo { padding-top: 30px; }
#lp-app[data-layout="timeline"] .lp-tl-corpo > * { padding-top: 0 !important; }
#lp-app[data-layout="timeline"] .lp-mural { column-count: 2; }
#lp-app[data-layout="timeline"] .lp-recado-secao p span {
    font-family: var(--narrativa, serif);
    font-size: clamp(19px, 4vw, 24px);
    font-style: italic;
    line-height: 1.6;
    color: var(--tinta-suave);
}

/* -------------------------------------------------------------------------
   GALERIA — foto ocupa a tela como fundo, texto flutua por cima
   (Tropical, Imersivo)
   ------------------------------------------------------------------------- */
#lp-app[data-layout="galeria"] .lp-galeria-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 22px;
    overflow: hidden;
}
#lp-app[data-layout="galeria"] .lp-galeria-fundo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    animation: lp-kenburns 18s ease-out forwards;
    z-index: 0;
}
@keyframes lp-kenburns {
    from { transform: scale(1.16) translateY(-2%); }
    to   { transform: scale(1.02) translateY(0); }
}
#lp-app[data-layout="galeria"] .lp-galeria-veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--papel-fundo) 30%, transparent) 0%,
        color-mix(in srgb, var(--papel-fundo) 62%, transparent) 55%,
        color-mix(in srgb, var(--papel-fundo) 88%, transparent) 100%);
    z-index: 1;
}
#lp-app[data-layout="galeria"] .lp-galeria-texto {
    position: relative;
    z-index: 2;
    max-width: 640px;
}
#lp-app[data-layout="galeria"] .lp-galeria-texto .lp-cartao-titulo {
    font-size: clamp(40px, 12vw, 104px);
    line-height: .96;
    text-shadow: 0 2px 30px color-mix(in srgb, var(--papel-fundo) 60%, transparent);
}
#lp-app[data-layout="galeria"] .lp-galeria-texto .lp-cartao-nome { font-size: clamp(20px, 5vw, 30px); }
#lp-app[data-layout="galeria"] .lp-galeria-texto .lp-contagem { justify-content: center; }

/* Sem foto, a galeria ainda funciona com um fundo de cor sólida */
#lp-app[data-layout="galeria"] .lp-galeria-hero:not(:has(.lp-galeria-fundo)) {
    background: var(--tinta);
}
#lp-app[data-layout="galeria"] .lp-galeria-hero:not(:has(.lp-galeria-fundo)) .lp-galeria-texto,
#lp-app[data-layout="galeria"] .lp-galeria-hero:not(:has(.lp-galeria-fundo)) .lp-galeria-texto * {
    color: var(--papel);
}
#lp-app[data-layout="galeria"] .lp-recado-secao { padding-top: 96px; }

/* =========================================================================
   ESTÚDIO DE CRIAÇÃO — o painel que o dono do evento preenche
   Duas colunas: formulário à esquerda, telefone com prévia ao vivo à
   direita. Referência de acabamento: Vercel, Linear, Stripe.
   ========================================================================= */
/* (o layout de estúdio da v5 foi substituído pelo assistente da v6, no fim do arquivo) */

/* ---- painel da prévia ---- */
.lp-preview-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 4px;
}
.lp-preview-rotulo {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;
    color: var(--tinta-suave);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.lp-preview-rotulo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34C759;
    box-shadow: 0 0 0 0 rgba(52,199,89,.5);
    animation: lp-pulso 2s infinite;
}
@keyframes lp-pulso {
    0% { box-shadow: 0 0 0 0 rgba(52,199,89,.5); }
    70% { box-shadow: 0 0 0 6px rgba(52,199,89,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}
.lp-preview-tpl {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--tinta);
}

/* ---- moldura de celular ---- */
.lp-fone {
    background: #1D1D1F;
    border-radius: 34px;
    padding: 9px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 30px 60px -30px rgba(0,0,0,.4);
    position: relative;
}
.lp-fone::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.18);
    z-index: 3;
}
.lp-fone-tela {
    background: var(--mp-3, #fff);
    border-radius: 26px;
    height: 560px;
    overflow: hidden;
    position: relative;
    font-family: 'Work Sans', sans-serif;
}

/* o conteúdo da prévia usa as cores do template escolhido */
.lp-fone-tela {
    color: var(--mp-1);
}

/* ---- peças da miniatura de convite ---- */
.pv-cartao {
    margin: 22px 14px;
    background: color-mix(in srgb, var(--mp-3) 100%, #fff);
    border: 1px solid color-mix(in srgb, var(--mp-1) 14%, transparent);
    border-radius: 12px;
    padding: 26px 18px 22px;
    text-align: center;
    box-shadow: 0 20px 40px -30px rgba(0,0,0,.4);
}
.pv-regua { display: block; width: 34px; height: 2px; background: var(--mp-2); margin: 0 auto 16px; }
.pv-foto { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 14px; }
.pv-eyebrow {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: 8px;
    color: color-mix(in srgb, var(--mp-1) 55%, var(--mp-3));
    margin: 0 0 12px;
}
.pv-titulo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 30px;
    line-height: 1;
    font-weight: 500;
    margin: 0;
    color: var(--mp-1);
    word-break: break-word;
}
.pv-nome {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    color: var(--mp-2);
    margin: 8px 0 0;
}
.pv-quando { margin: 16px 0 0; display: flex; flex-direction: column; gap: 4px; }
.pv-quando span {
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: color-mix(in srgb, var(--mp-1) 65%, var(--mp-3));
}
.pv-btn {
    display: block;
    width: 120px;
    height: 26px;
    margin: 20px auto 0;
    border-radius: 999px;
    border: 1px solid var(--mp-1);
}
.pv-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 14px 18px;
}
.pv-cards i {
    display: block;
    aspect-ratio: 1;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mp-1) 8%, var(--mp-3));
    border: 1px solid color-mix(in srgb, var(--mp-1) 12%, transparent);
}

/* prévia: variação REVISTA */
.pv-capa { position: relative; height: 340px; padding: 16px; overflow: hidden; display: flex; flex-direction: column; }
.pv-capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.pv-marca { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .2em; font-size: 8px; color: color-mix(in srgb, var(--mp-1) 60%, var(--mp-3)); position: relative; z-index: 1; }
.pv-capa-txt { margin-top: auto; position: relative; z-index: 1; }
.pv-mega { font-size: 48px; letter-spacing: -.03em; line-height: .86; }
.pv-linha { font-size: 9px; color: color-mix(in srgb, var(--mp-1) 65%, var(--mp-3)); margin: 10px 0 0; }

/* prévia: variação SPLIT */
.pv-split { display: grid; grid-template-columns: 48% 52%; height: 100%; }
.pv-split-a { padding: 30px 14px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid color-mix(in srgb, var(--mp-1) 12%, transparent); text-align: left; }
.pv-split-a .pv-titulo { font-size: 24px; }
.pv-split-a .pv-quando { align-items: flex-start; }
.pv-split-b { padding: 16px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: center; }
.pv-split-b i { display: block; aspect-ratio: 1; border-radius: 6px; background: color-mix(in srgb, var(--mp-1) 8%, var(--mp-3)); border: 1px solid color-mix(in srgb, var(--mp-1) 12%, transparent); }

/* prévia: variação TIMELINE */
.pv-tl { position: relative; padding: 20px 0; }
.pv-tl-eixo { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: color-mix(in srgb, var(--mp-1) 16%, transparent); transform: translateX(-50%); }
.pv-tl-p { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--mp-2); background: var(--mp-3); margin: 14px auto 8px; position: relative; z-index: 1; }
.pv-tl-b { width: 60%; height: 32px; margin: 0 auto; border-radius: 6px; background: color-mix(in srgb, var(--mp-1) 8%, var(--mp-3)); border: 1px solid color-mix(in srgb, var(--mp-1) 12%, transparent); }

/* prévia: variação GALERIA */
.pv-galeria { position: relative; height: 360px; overflow: hidden; }
.pv-galeria-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-galeria-cor { position: absolute; inset: 0; background: var(--mp-1); }
.pv-galeria-veu { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--mp-3) 80%, transparent) 100%); }
.pv-galeria-txt { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; padding: 0 16px; }
.pv-galeria-txt .pv-titulo { font-size: 30px; }
.pv-galeria .pv-eyebrow { color: color-mix(in srgb, var(--mp-1) 70%, var(--mp-3)); }

/* =========================================================================
   SELETOR DE TEMPLATES com miniatura estrutural
   Agora dá pra ver a diferença de LAYOUT antes de escolher, não só a cor.
   ========================================================================= */
#lp-temas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}
.lp-tema-opcao {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1.5px solid var(--traco);
    border-radius: 12px;
    background: var(--papel);
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lp-tema-opcao:hover {
    border-color: color-mix(in srgb, var(--mp-1) 50%, var(--traco));
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px rgba(0,0,0,.4);
}
.lp-tema-opcao[aria-pressed="true"] {
    border-color: var(--mp-1);
    box-shadow: 0 0 0 1px var(--mp-1);
}
.lp-tema-mini {
    display: block;
    aspect-ratio: 5 / 4;
    background: var(--mp-3);
    border-bottom: 1px solid var(--traco);
}
.lp-mini { width: 100%; height: 100%; display: block; }
.lp-mini .mp-cartao { fill: color-mix(in srgb, var(--mp-1) 4%, var(--mp-3)); stroke: color-mix(in srgb, var(--mp-1) 16%, transparent); stroke-width: 1; }
.lp-mini .mp-titulo { fill: var(--mp-1); }
.lp-mini .mp-linha { fill: color-mix(in srgb, var(--mp-1) 45%, var(--mp-3)); }
.lp-mini .mp-btn { fill: none; stroke: var(--mp-1); stroke-width: 1.5; }
.lp-mini .mp-card { fill: color-mix(in srgb, var(--mp-1) 9%, var(--mp-3)); }
.lp-mini .mp-eixo { stroke: color-mix(in srgb, var(--mp-1) 22%, transparent); stroke-width: 1; }
.lp-mini .mp-ponto { fill: var(--mp-3); stroke: var(--mp-2); stroke-width: 1.5; }
.lp-mini .mp-foto { fill: var(--mp-1); opacity: .85; }
.lp-mini .mp-veu { fill: var(--mp-3); opacity: .5; }
.lp-mini .mp-sangra { fill: var(--mp-1); }
.lp-mini .mp-claro { fill: var(--mp-3); }
.lp-tema-info { padding: 10px 12px 12px; }
.lp-tema-nome { display: block; font-family: 'Work Sans', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.lp-tema-evento {
    display: block;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 8.5px;
    color: var(--tinta-suave);
    margin-top: 3px;
}

/* =========================================================================
   LAYOUTS PREMIUM COM ANIMAÇÃO TRABALHADA
   Aurora, Cinético, Monolito e Camadas. Cada um tem uma assinatura de
   movimento própria — não é fade-in genérico. As animações usam só
   transform e opacity (compostas pela GPU), então rodam lisas no celular.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Texto que entra palavra por palavra
   ------------------------------------------------------------------------- */
.lp-pal { display: inline-block; overflow: hidden; vertical-align: top; }
.lp-pal-i {
    display: inline-block;
    transform: translateY(115%);
    animation: lp-pal-sobe .95s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes lp-pal-sobe { to { transform: translateY(0); } }

.lp-pal-m {
    display: inline-block;
    transform: translateY(105%) skewY(6deg);
    opacity: 0;
    animation: lp-pal-mascara 1.1s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes lp-pal-mascara { to { transform: translateY(0) skewY(0); opacity: 1; } }

/* entradas auxiliares reutilizadas pelos layouts premium */
.lp-mascara { opacity: 0; animation: lp-surge 1s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d,0s); }
@keyframes lp-surge { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.lp-sobe { opacity: 0; animation: lp-surge 1s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d,0s); }
.lp-fade { opacity: 0; animation: lp-so-fade 1.2s ease forwards; animation-delay: var(--d,0s); }
@keyframes lp-so-fade { to { opacity: 1; } }
.lp-emerge { opacity: 0; animation: lp-emergir 1.1s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d,0s); }
@keyframes lp-emergir { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------------
   AURORA — gradiente vivo que respira ao fundo (claro, luminoso)
   ------------------------------------------------------------------------- */
#lp-app[data-layout="aurora"] .lp-aurora-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    overflow: hidden;
    background: var(--papel-fundo);
}
#lp-app[data-layout="aurora"] .lp-aurora-fundo { position: absolute; inset: 0; z-index: 0; filter: blur(60px); }
#lp-app[data-layout="aurora"] .lp-aurora-faixa {
    position: absolute;
    border-radius: 50%;
    opacity: .55;
    mix-blend-mode: multiply;
    will-change: transform;
}
#lp-app[data-layout="aurora"] .lp-aurora-1 {
    width: 60vw; height: 60vw; left: -10vw; top: -14vw;
    background: radial-gradient(circle, var(--aur-a), transparent 68%);
    animation: lp-aur-1 16s ease-in-out infinite alternate;
}
#lp-app[data-layout="aurora"] .lp-aurora-2 {
    width: 55vw; height: 55vw; right: -12vw; top: 6vw;
    background: radial-gradient(circle, var(--aur-b), transparent 68%);
    animation: lp-aur-2 20s ease-in-out infinite alternate;
}
#lp-app[data-layout="aurora"] .lp-aurora-3 {
    width: 65vw; height: 65vw; left: 12vw; bottom: -22vw;
    background: radial-gradient(circle, var(--aur-c), transparent 68%);
    animation: lp-aur-3 18s ease-in-out infinite alternate;
}
@keyframes lp-aur-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(10vw, 8vw) scale(1.2); } }
@keyframes lp-aur-2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-8vw, 10vw) scale(.9); } }
@keyframes lp-aur-3 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw, -10vw) scale(1.25); } }
#lp-app[data-layout="aurora"] .lp-aurora-grao {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
#lp-app[data-layout="aurora"] .lp-aurora-texto { position: relative; z-index: 1; max-width: 620px; }
#lp-app[data-layout="aurora"] .lp-aurora-foto {
    width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
    display: block; margin: 0 auto 24px;
    border: 3px solid rgba(255,255,255,.7);
    box-shadow: 0 10px 40px -12px rgba(27,42,74,.4);
}
#lp-app[data-layout="aurora"] .lp-aurora-titulo {
    font-family: var(--display, serif);
    font-size: clamp(44px, 12vw, 108px);
    line-height: .96;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--tinta);
}
#lp-app[data-layout="aurora"] .lp-aurora-texto .lp-contagem { justify-content: center; }
#lp-app[data-layout="aurora"] .lp-recado-secao { padding-top: 100px; }

/* -------------------------------------------------------------------------
   CINÉTICO — título em movimento + faixas de texto correndo (claro, ousado)
   ------------------------------------------------------------------------- */
#lp-app[data-layout="cinetico"] .lp-cinetico-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 40px 0;
    background: var(--papel-fundo);
}
#lp-app[data-layout="cinetico"] .lp-marquee {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--display, serif);
    font-size: clamp(34px, 8vw, 72px);
    font-weight: 500;
    color: color-mix(in srgb, var(--tinta) 10%, var(--papel-fundo));
    user-select: none;
}
#lp-app[data-layout="cinetico"] .lp-marquee span {
    display: inline-block;
    padding-left: .3em;
    animation: lp-marq 24s linear infinite;
}
#lp-app[data-layout="cinetico"] .lp-marquee-rev span { animation-direction: reverse; }
@keyframes lp-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#lp-app[data-layout="cinetico"] .lp-cinetico-centro { text-align: center; padding: 44px 24px; position: relative; z-index: 1; }
#lp-app[data-layout="cinetico"] .lp-cinetico-titulo {
    font-family: var(--display, serif);
    font-size: clamp(48px, 14vw, 150px);
    line-height: .9;
    font-weight: 500;
    letter-spacing: -.03em;
    margin: 0 0 6px;
    color: var(--tinta);
}
#lp-app[data-layout="cinetico"] .lp-cinetico-titulo .lp-pal { padding: 0 .04em; }
#lp-app[data-layout="cinetico"] .lp-cinetico-centro .lp-contagem { justify-content: center; }
#lp-app[data-layout="cinetico"] .lp-cinetico-centro .lp-cartao-quando p { color: var(--acento); font-weight: 600; }
#lp-app[data-layout="cinetico"] .lp-recado-secao { padding-top: 96px; }

/* -------------------------------------------------------------------------
   MONOLITO — minimalismo escuro, tipografia imensa (escuro, luxo)
   ------------------------------------------------------------------------- */
#lp-app[data-layout="monolito"] .lp-monolito-hero {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 34px clamp(22px, 5vw, 72px) 40px;
    background: var(--papel-fundo);
    position: relative;
    overflow: hidden;
}
#lp-app[data-layout="monolito"] .lp-monolito-hero::after {
    /* halo sutil que sobe do rodapé, dá profundidade ao preto */
    content: "";
    position: absolute;
    left: 50%; bottom: -40%;
    width: 120%; height: 80%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--acento) 10%, transparent), transparent 70%);
    pointer-events: none;
}
#lp-app[data-layout="monolito"] .lp-monolito-topo,
#lp-app[data-layout="monolito"] .lp-monolito-base {
    display: flex;
    justify-content: space-between;
    align-items: end;
    position: relative;
    z-index: 1;
}
#lp-app[data-layout="monolito"] .lp-monolito-marca,
#lp-app[data-layout="monolito"] .lp-monolito-data,
#lp-app[data-layout="monolito"] .lp-monolito-base > span:first-child {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: 10.5px;
    color: var(--tinta-suave);
}
#lp-app[data-layout="monolito"] .lp-monolito-centro { align-self: center; position: relative; z-index: 1; }
#lp-app[data-layout="monolito"] .lp-monolito-titulo {
    font-family: var(--display, serif);
    font-size: clamp(52px, 15vw, 190px);
    line-height: .88;
    font-weight: 400;
    letter-spacing: -.03em;
    margin: 0;
    color: var(--tinta);
}
#lp-app[data-layout="monolito"] .lp-monolito-regua {
    width: 0;
    height: 1px;
    background: var(--traco);
    border: none;
    margin: 34px 0 0;
    animation: lp-regua-cresce 1.4s cubic-bezier(.65,0,.35,1) forwards;
    animation-delay: 1s;
}
@keyframes lp-regua-cresce { to { width: 100%; } }
#lp-app[data-layout="monolito"] .lp-monolito-nome {
    font-family: var(--narrativa, sans-serif);
    text-transform: uppercase;
    letter-spacing: .32em;
    font-size: clamp(12px, 2.4vw, 15px);
    color: var(--tinta-suave);
    margin: 22px 0 0;
}
#lp-app[data-layout="monolito"] .lp-monolito-base .lp-contagem { justify-content: flex-end; }
#lp-app[data-layout="monolito"] .lp-conta-unidade { color: var(--tinta-suave); }
#lp-app[data-layout="monolito"] .lp-recado-secao { padding-top: 108px; }

/* -------------------------------------------------------------------------
   CAMADAS — painéis empilhados emergindo em profundidade (escuro, denso)
   ------------------------------------------------------------------------- */
#lp-app[data-layout="camadas"] .lp-camadas-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    overflow: hidden;
    background: var(--papel-fundo);
    perspective: 1400px;
}
#lp-app[data-layout="camadas"] .lp-camadas-fundo { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; }
#lp-app[data-layout="camadas"] .lp-camadas-fundo span {
    position: absolute;
    border: 1px solid var(--traco);
    border-radius: 20px;
    animation: lp-cam-respira 8s ease-in-out infinite alternate;
}
#lp-app[data-layout="camadas"] .lp-camadas-fundo span:nth-child(1) { width: min(560px, 86vw); height: min(560px, 86vw); opacity: .5; }
#lp-app[data-layout="camadas"] .lp-camadas-fundo span:nth-child(2) { width: min(420px, 68vw); height: min(420px, 68vw); opacity: .7; animation-delay: -2s; }
#lp-app[data-layout="camadas"] .lp-camadas-fundo span:nth-child(3) { width: min(300px, 52vw); height: min(300px, 52vw); animation-delay: -4s; }
@keyframes lp-cam-respira { from { transform: scale(1) rotate(0); } to { transform: scale(1.06) rotate(2deg); } }
#lp-app[data-layout="camadas"] .lp-camadas-painel {
    position: relative;
    z-index: 1;
    max-width: 520px;
    background: color-mix(in srgb, var(--papel) 70%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--traco);
    border-radius: 22px;
    padding: 46px 30px 40px;
    box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
}
#lp-app[data-layout="camadas"] .lp-camadas-foto {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    display: block; margin: 0 auto 22px;
    border: 2px solid var(--acento);
}
#lp-app[data-layout="camadas"] .lp-camadas-painel .lp-cartao-titulo {
    font-size: clamp(38px, 10vw, 76px);
    line-height: .98;
    color: var(--tinta);
}
#lp-app[data-layout="camadas"] .lp-camadas-painel .lp-cartao-nome { color: var(--acento); }
#lp-app[data-layout="camadas"] .lp-camadas-painel .lp-contagem { justify-content: center; }
#lp-app[data-layout="camadas"] .lp-recado-secao { padding-top: 100px; }

/* respeitar quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
    #lp-app .lp-pal-i, #lp-app .lp-pal-m,
    #lp-app .lp-mascara, #lp-app .lp-sobe, #lp-app .lp-fade, #lp-app .lp-emerge {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    #lp-app[data-layout="aurora"] .lp-aurora-faixa,
    #lp-app[data-layout="cinetico"] .lp-marquee span,
    #lp-app[data-layout="camadas"] .lp-camadas-fundo span { animation: none !important; }
    #lp-app[data-layout="monolito"] .lp-monolito-regua { width: 100% !important; animation: none !important; }
}

/* miniaturas novas no seletor */
.lp-mini .mp-dark { fill: var(--mp-1); }
.lp-mini .mp-aur1 { fill: var(--mp-2); opacity: .55; }
.lp-mini .mp-aur2 { fill: var(--mp-1); opacity: .4; }
.lp-mini .mp-faixa { fill: color-mix(in srgb, var(--mp-1) 12%, var(--mp-3)); }
.lp-mini .mp-cam1 { fill: none; stroke: color-mix(in srgb, var(--mp-3) 30%, transparent); stroke-width: 1; }
.lp-mini .mp-cam2 { fill: color-mix(in srgb, var(--mp-3) 12%, var(--mp-1)); stroke: color-mix(in srgb, var(--mp-2) 60%, transparent); stroke-width: 1; }

/* =========================================================================
   PREVIEW AO VIVO — variações premium dentro do telefone
   ========================================================================= */

/* aurora */
.pv-aurora { position: relative; height: 380px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--mp-3); }
.pv-aur { position: absolute; border-radius: 50%; filter: blur(24px); opacity: .6; }
.pv-aur1 { width: 160px; height: 160px; left: -30px; top: -20px; background: color-mix(in srgb, var(--mp-2) 90%, transparent); animation: pv-aur-a 9s ease-in-out infinite alternate; }
.pv-aur2 { width: 150px; height: 150px; right: -30px; top: 30px; background: color-mix(in srgb, var(--mp-1) 40%, var(--mp-2)); animation: pv-aur-b 11s ease-in-out infinite alternate; }
.pv-aur3 { width: 170px; height: 170px; left: 40px; bottom: -50px; background: color-mix(in srgb, var(--mp-2) 70%, var(--mp-3)); animation: pv-aur-a 10s ease-in-out infinite alternate-reverse; }
@keyframes pv-aur-a { to { transform: translate(24px, 20px) scale(1.2); } }
@keyframes pv-aur-b { to { transform: translate(-20px, 24px) scale(.85); } }
.pv-aurora-txt { position: relative; z-index: 1; text-align: center; padding: 0 18px; }
.pv-aurora-txt .pv-titulo { color: var(--mp-1); }

/* cinético */
.pv-cinetico { padding: 20px 0; text-align: center; overflow: hidden; }
.pv-marq { white-space: nowrap; font-family: 'Playfair Display', serif; font-size: 26px; color: color-mix(in srgb, var(--mp-1) 12%, var(--mp-3)); animation: pv-marq 12s linear infinite; }
.pv-marq-r { animation-direction: reverse; }
@keyframes pv-marq { to { transform: translateX(-30%); } }
.pv-cinetico-c { padding: 26px 16px; }
.pv-forte { font-size: 40px; letter-spacing: -.02em; }

/* monolito */
.pv-monolito { height: 100%; min-height: 480px; background: var(--mp-1); display: grid; grid-template-rows: auto 1fr auto; padding: 20px 16px; }
.pv-mono-topo { display: flex; justify-content: space-between; }
.pv-mono-topo span { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .18em; font-size: 7px; color: color-mix(in srgb, var(--mp-3) 55%, var(--mp-1)); }
.pv-mono-centro { align-self: center; }
.pv-mono-tit { color: var(--mp-3); font-size: 46px; line-height: .9; }
.pv-mono-regua { display: block; width: 100%; height: 1px; background: color-mix(in srgb, var(--mp-3) 20%, transparent); margin: 16px 0 0; }
.pv-monolito .pv-nome { color: color-mix(in srgb, var(--mp-3) 60%, var(--mp-1)); text-transform: uppercase; letter-spacing: .2em; font-size: 9px; font-style: normal; font-family: 'Work Sans', sans-serif; }
.pv-mono-base span { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .18em; font-size: 7px; color: color-mix(in srgb, var(--mp-3) 55%, var(--mp-1)); }

/* camadas */
.pv-camadas { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; background: var(--mp-1); overflow: hidden; }
.pv-cam { position: absolute; border: 1px solid color-mix(in srgb, var(--mp-3) 20%, transparent); border-radius: 14px; }
.pv-cam-a { width: 220px; height: 220px; animation: pv-cam 7s ease-in-out infinite alternate; }
.pv-cam-b { width: 160px; height: 160px; animation: pv-cam 7s ease-in-out infinite alternate-reverse; }
@keyframes pv-cam { to { transform: scale(1.08) rotate(3deg); } }
.pv-cam-painel { position: relative; z-index: 1; text-align: center; padding: 24px 18px; border-radius: 14px; background: color-mix(in srgb, var(--mp-3) 8%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--mp-3) 14%, transparent); max-width: 74%; }
.pv-cam-painel .pv-titulo { color: var(--mp-3); font-size: 26px; }
.pv-cam-painel .pv-nome { color: var(--mp-2); }
.pv-cam-painel .pv-eyebrow { color: color-mix(in srgb, var(--mp-3) 55%, var(--mp-1)); }
.pv-cam-painel .pv-quando span { color: color-mix(in srgb, var(--mp-3) 55%, var(--mp-1)); }

/* =========================================================================
   VER NA LOJA — na hora de montar a lista
   Quem monta quer conferir o produto antes de escolher. O link abre em
   outra aba, então a lista em andamento não se perde.
   ========================================================================= */
.lp-vitrine-loja {
    display: block;
    text-align: center;
    padding: 7px 8px;
    border-top: 1px solid var(--traco);
    font-family: 'Work Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    text-decoration: none;
    background: var(--papel-fundo);
    transition: color .2s ease, background .2s ease;
}
.lp-vitrine-loja:hover {
    color: var(--papel);
    background: var(--primaria);
}
.lp-vitrine-card.lp-vitrine-selecionado .lp-vitrine-loja { border-top-color: var(--feito); }

/* link discreto na lista de itens já escolhidos */
.lp-item-loja {
    font-family: 'Work Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primaria);
    text-decoration: underline;
    white-space: nowrap;
    margin-left: 4px;
}
.lp-item-loja:hover { color: var(--primaria-escura); }
.lp-item-foto-link { flex: 0 0 auto; display: block; line-height: 0; }

/* =========================================================================
   PRÉVIA EM TELA CHEIA — pensada para o celular
   No desktop a prévia já fica na coluna lateral; aqui resolvemos o caso
   do celular, onde ela sairia de vista justo na hora de escolher o tema.
   ========================================================================= */
.lp-ver-previa {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border: none;
    border-radius: 999px;
    background: var(--tinta);
    color: var(--papel);
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 26px -8px rgba(0,0,0,.5);
    animation: lp-flutua-entra .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lp-flutua-entra {
    from { opacity: 0; transform: translate(-50%, 26px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.lp-ver-previa svg { width: 17px; height: 17px; flex: 0 0 auto; }
.lp-ver-previa em {
    font-style: normal;
    font-size: 11px;
    opacity: .62;
    padding-left: 9px;
    margin-left: 2px;
    border-left: 1px solid color-mix(in srgb, var(--papel) 30%, transparent);
}

@media (max-width: 1039px) {
    .lp-ver-previa { display: inline-flex; }
    /* a coluna lateral some: quem manda no celular é a prévia em tela cheia */
    .lp-estudio-preview { display: none; }
    /* espaço pro botão flutuante não cobrir o fim do formulário */
    .lp-estudio-form { padding-bottom: 68px; }
}

.lp-previa-cheia {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--papel-fundo) 94%, #000);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity .26s ease;
}
.lp-previa-cheia.lp-previa-visivel { opacity: 1; }
.lp-previa-cheia[hidden] { display: none; }

.lp-previa-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--traco);
    flex: 0 0 auto;
}
.lp-previa-fechar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--traco);
    background: transparent;
    color: var(--tinta);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}
.lp-previa-fechar:hover { background: var(--traco); }

.lp-previa-palco {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    min-height: 0;
}
.lp-fone-cheia {
    width: min(330px, 84vw);
    transform: scale(1);
    animation: lp-fone-entra .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lp-fone-entra {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.lp-fone-cheia .lp-fone-tela {
    height: min(600px, 64vh);
}

/* tira de troca rápida no rodapé da prévia */
.lp-previa-troca {
    flex: 0 0 auto;
    border-top: 1px solid var(--traco);
    padding: 14px 0 18px;
    background: var(--papel);
}
.lp-previa-dica {
    font-family: 'Work Sans', sans-serif;
    font-size: 11.5px;
    color: var(--tinta-suave);
    text-align: center;
    margin: 0 0 12px;
    padding: 0 18px;
}
.lp-previa-tiras {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 18px 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.lp-previa-tiras::-webkit-scrollbar { height: 0; }
.lp-tira {
    flex: 0 0 auto;
    width: 74px;
    padding: 0;
    border: 1.5px solid var(--traco);
    border-radius: 10px;
    background: var(--papel);
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: center;
    transition: border-color .2s ease, transform .2s ease;
}
.lp-tira:active { transform: scale(.96); }
.lp-tira[aria-pressed="true"] {
    border-color: var(--mp-1);
    box-shadow: 0 0 0 1px var(--mp-1);
}
.lp-tira-mini {
    display: block;
    aspect-ratio: 5 / 4;
    background: var(--mp-3);
    border-bottom: 1px solid var(--traco);
}
.lp-tira-nome {
    display: block;
    padding: 6px 4px 7px;
    font-family: 'Work Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--tinta);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* telas curtas: o telefone encolhe pra tira de templates continuar visível */
@media (max-height: 700px) {
    .lp-fone-cheia .lp-fone-tela { height: min(480px, 56vh); }
}

/* =========================================================================
   ASSISTENTE DE CRIAÇÃO (v6) — cada etapa é uma tela própria.
   Vem depois de tudo, então tem precedência sobre o layout antigo de
   formulário único. As regras herdadas de .lp-estudio foram substituídas.
   ========================================================================= */

#lp-app[data-modo-criar="assistente"],
#lp-app[data-modo-criar="entrada"] {
    max-width: 1180px;
    padding-bottom: 40px;
    --lp-raio-suave: 18px;
    --lp-sombra-card: 0 1px 2px rgba(20,25,35,.04), 0 12px 28px -20px rgba(20,25,35,.35);
    --lp-sombra-alta: 0 2px 6px rgba(20,25,35,.05), 0 28px 60px -34px rgba(20,25,35,.5);
}

/* -------------------------------------------------------------------------
   PORTA DE ENTRADA — WhatsApp + PIN, com uma arte ao lado
   ------------------------------------------------------------------------- */
.lp-entrada {
    display: grid;
    gap: 34px;
    align-items: center;
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: 22px;
    padding: 28px;
    box-shadow: var(--lp-sombra-card);
}
.lp-entrada-arte {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--lp-sombra-alta);
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
}
.lp-entrada-arte svg { display: block; width: 100%; height: auto; }
.lp-entrada-form h1 {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: clamp(26px, 4.4vw, 36px);
    line-height: 1.1;
    margin: 4px 0 12px;
    letter-spacing: -.02em;
}
.lp-entrada-texto {
    color: var(--tinta-suave);
    font-size: 15px;
    margin: 0 0 22px;
    max-width: 46ch;
}
.lp-entrada-form label {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 6px;
}
.lp-entrada-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid var(--traco);
    border-radius: 11px;
    background: var(--papel);
    color: var(--tinta);
    font-size: 16px;
    font-family: 'Work Sans', sans-serif;
}
.lp-entrada-form input:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 16%, transparent);
}
.lp-entrada-form .lp-botao { margin-top: 18px; width: 100%; }

@media (min-width: 860px) {
    .lp-entrada { grid-template-columns: 300px minmax(0, 1fr); padding: 36px 40px; gap: 46px; }
    .lp-entrada-form .lp-botao { width: auto; min-width: 200px; }
}

/* -------------------------------------------------------------------------
   CASCA DO ASSISTENTE
   ------------------------------------------------------------------------- */
.lp-wz { position: relative; }

.lp-wz-cabeca {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}
.lp-wz-marca .lp-eyebrow {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10.5px;
    color: var(--tinta-suave);
    margin: 0 0 8px;
}
.lp-wz-marca h1 {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: clamp(25px, 4.2vw, 38px);
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: 0;
}

/* ---- trilha de etapas ---- */
.lp-wz-trilha {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
}
.lp-wz-trilha::-webkit-scrollbar { height: 0; }
.lp-wz-passo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 0;
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    transition: background .18s, color .18s;
}
.lp-wz-passo:not([disabled]):hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.lp-wz-num {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 700;
    border: 1.5px solid var(--traco);
    background: var(--papel);
    color: var(--tinta-suave);
    transition: all .2s;
}
.lp-wz-passo[data-estado="atual"] {
    background: var(--tinta);
    color: var(--papel);
}
.lp-wz-passo[data-estado="atual"] .lp-wz-num {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--tinta);
}
.lp-wz-passo[data-estado="feito"] { color: var(--tinta); }
.lp-wz-passo[data-estado="feito"] .lp-wz-num {
    background: var(--feito, #6F8F6B);
    border-color: var(--feito, #6F8F6B);
    color: #fff;
}
.lp-wz-passo[data-estado="travado"] { opacity: .42; cursor: not-allowed; }

/* ---- corpo ---- */
.lp-wz-corpo { min-height: 40vh; }
.lp-wz-corpo.lp-wz-entra { animation: lp-wz-fade .34s cubic-bezier(.16,1,.3,1) both; }
@keyframes lp-wz-fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.lp-wz-ajuda {
    color: var(--tinta-suave);
    font-size: 14.5px;
    max-width: 62ch;
    margin: 0 0 22px;
}

/* ---- rodapé fixo de navegação ---- */
.lp-wz-rodape {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    background: color-mix(in srgb, var(--papel) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--traco);
    border-radius: 16px;
    box-shadow: 0 -8px 30px -22px rgba(20,25,35,.5);
}
.lp-wz-rodape-info { font-size: 13.5px; color: var(--tinta-suave); }
.lp-wz-rodape-info strong { color: var(--tinta); }
.lp-wz-rodape-acoes { display: flex; gap: 9px; margin-left: auto; }
.lp-wz-rodape .lp-botao { padding: 12px 22px; font-size: 14.5px; }

.lp-botao-texto {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    color: var(--primaria);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.lp-botao-texto:hover { color: var(--primaria-escura); }
.lp-botao-texto strong { color: var(--tinta); }

/* ---- aviso de salvamento ---- */
.lp-status-salvar {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 60;
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: 999px;
    padding: 5px 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
}
.lp-status-salvar:not(:empty) { opacity: 1; }
.lp-status-salvar[data-estado="erro"] { color: #B4232A; border-color: #B4232A; }

/* -------------------------------------------------------------------------
   GAVETA LATERAL — "sua lista" sem sair da etapa
   ------------------------------------------------------------------------- */
.lp-gaveta { position: fixed; inset: 0; z-index: 90; }
.lp-gaveta[hidden] { display: none; }
.lp-gaveta-fundo {
    position: absolute;
    inset: 0;
    background: rgba(16,20,28,.42);
    opacity: 0;
    transition: opacity .24s;
}
.lp-gaveta-painel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(430px, 92vw);
    background: var(--papel);
    box-shadow: -20px 0 60px -30px rgba(0,0,0,.55);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.lp-gaveta-aberta .lp-gaveta-fundo { opacity: 1; }
.lp-gaveta-aberta .lp-gaveta-painel { transform: none; }
.lp-gaveta-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--traco);
}
.lp-gaveta-cabeca strong {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 19px;
}
.lp-gaveta-fechar {
    background: none;
    border: 0;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    color: var(--tinta-suave);
    width: 34px;
    height: 34px;
    border-radius: 50%;
}
.lp-gaveta-fechar:hover { background: var(--traco); color: var(--tinta); }
.lp-gaveta-conteudo {
    padding: 14px 20px 30px;
    overflow-y: auto;
    flex: 1;
}

/* -------------------------------------------------------------------------
   PEÇAS COMPARTILHADAS — cartões de formulário e campos
   ------------------------------------------------------------------------- */
.lp-cartao-form {
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: var(--lp-raio-suave, 18px);
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: var(--lp-sombra-card);
}
.lp-cartao-form .lp-secao-titulo {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 19px;
    margin: 0 0 6px;
    letter-spacing: -.01em;
}
.lp-cartao-form .lp-secao-ajuda {
    color: var(--tinta-suave);
    font-size: 14px;
    margin: 0 0 18px;
    max-width: 62ch;
}

.lp-form-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
.lp-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-campo-largo { grid-column: 1 / -1; }
.lp-campo label {
    font-family: 'Work Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta);
}
.lp-campo input,
.lp-campo textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid var(--traco);
    border-radius: 11px;
    background: color-mix(in srgb, var(--papel) 70%, #fff);
    color: var(--tinta);
    font-family: 'Work Sans', sans-serif;
    font-size: 15.5px;
    line-height: 1.45;
}
.lp-campo textarea { resize: vertical; min-height: 84px; }
.lp-campo input:focus,
.lp-campo textarea:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 15%, transparent);
}
.lp-campo input::placeholder,
.lp-campo textarea::placeholder { color: color-mix(in srgb, var(--tinta-suave) 72%, transparent); }

.lp-vazio-inline {
    font-size: 13.5px;
    color: var(--tinta-suave);
    margin: 0;
    padding: 4px 0;
}
.lp-vazio-bloco {
    grid-column: 1 / -1;
    text-align: center;
    padding: 34px 20px;
    border: 1px dashed var(--traco);
    border-radius: 14px;
    color: var(--tinta-suave);
}
.lp-vazio-bloco p { margin: 0 0 14px; }

.lp-selo {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    vertical-align: middle;
    font-style: normal;
}
.lp-selo-espera { background: color-mix(in srgb, #C9922A 18%, var(--papel)); color: #8A6410; }
.lp-selo-ok { background: color-mix(in srgb, var(--feito, #6F8F6B) 20%, var(--papel)); color: color-mix(in srgb, var(--feito, #6F8F6B) 82%, #000); }

.lp-nota-atencao {
    background: color-mix(in srgb, #C9922A 12%, var(--papel));
    border-left: 3px solid #C9922A;
    padding: 12px 14px;
    border-radius: 0 10px 10px 0;
    color: var(--tinta);
    font-size: 13.5px;
    margin: 16px 0;
}

/* -------------------------------------------------------------------------
   ETAPA 1 — TIPO DE EVENTO
   ------------------------------------------------------------------------- */
.lp-eventos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px;
}
.lp-evento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    background: var(--papel);
    border: 1.5px solid var(--traco);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s;
    box-shadow: var(--lp-sombra-card);
}
.lp-evento-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-sombra-alta);
    border-color: color-mix(in srgb, var(--ev-1) 40%, var(--traco));
}
.lp-evento-card[aria-pressed="true"] {
    border-color: var(--ev-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-1) 20%, transparent), var(--lp-sombra-alta);
}
.lp-evento-arte { display: block; background: var(--ev-3); }
.lp-arte-evento { display: block; width: 100%; height: auto; }
.lp-evento-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 15px 15px;
    border-top: 1px solid color-mix(in srgb, var(--ev-1) 12%, transparent);
}
.lp-evento-txt strong {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 16.5px;
    color: var(--tinta);
    letter-spacing: -.01em;
}
.lp-evento-txt em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--tinta-suave);
    line-height: 1.35;
}
.lp-evento-marca {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ev-1);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: scale(.6);
    transition: all .2s cubic-bezier(.16,1,.3,1);
}
.lp-evento-card[aria-pressed="true"] .lp-evento-marca { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   ETAPA 2 — PRESENTES
   ------------------------------------------------------------------------- */
.lp-atalhos {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}
@media (min-width: 720px) {
    .lp-atalhos { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.lp-atalho {
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    padding: 15px 17px;
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: 15px;
    box-shadow: var(--lp-sombra-card);
}
button.lp-atalho { cursor: pointer; transition: border-color .18s, transform .18s; font-family: inherit; }
button.lp-atalho:hover { border-color: var(--primaria); transform: translateY(-2px); }
.lp-atalho-icone {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primaria) 12%, var(--papel));
    color: var(--primaria);
}
.lp-atalho-icone svg { width: 21px; height: 21px; }
.lp-atalho-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-atalho-txt strong { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.lp-atalho-txt em { font-style: normal; font-size: 12.5px; color: var(--tinta-suave); }
.lp-atalho-seta { margin-left: auto; color: var(--tinta-suave); font-size: 17px; }
.lp-atalho-contador { background: color-mix(in srgb, var(--acento) 14%, var(--papel)); }
.lp-contador-num {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 38px;
    line-height: 1;
    font-weight: 600;
    color: var(--tinta);
    flex: 0 0 auto;
    min-width: 44px;
    text-align: center;
}

/* ---- os dois caminhos: catálogo ou link ---- */
.lp-modos {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}
@media (min-width: 720px) { .lp-modos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-modo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    padding: 17px 18px;
    background: var(--papel);
    border: 1.5px solid var(--traco);
    border-radius: 15px;
    transition: all .2s cubic-bezier(.16,1,.3,1);
}
.lp-modo:hover { border-color: color-mix(in srgb, var(--tinta) 34%, transparent); }
.lp-modo[aria-selected="true"] {
    border-color: var(--tinta);
    background: color-mix(in srgb, var(--tinta) 5%, var(--papel));
    box-shadow: var(--lp-sombra-card);
}
.lp-modo-icone {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--tinta) 8%, var(--papel));
    color: var(--tinta-suave);
    transition: all .2s;
}
.lp-modo[aria-selected="true"] .lp-modo-icone { background: var(--tinta); color: var(--papel); }
.lp-modo-icone svg { width: 23px; height: 23px; }
.lp-modo-txt { display: flex; flex-direction: column; gap: 3px; }
.lp-modo-txt strong {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 17px;
    color: var(--tinta);
}
.lp-modo-txt em { font-style: normal; font-size: 12.5px; color: var(--tinta-suave); line-height: 1.4; }

.lp-catalogo-barra { margin-bottom: 16px; }
.lp-catalogo .lp-filtros-categoria {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.lp-catalogo .lp-filtros-categoria::-webkit-scrollbar { height: 0; }
.lp-catalogo .lp-filtro-btn { flex: 0 0 auto; }

/* ---- produtos colados de sites ---- */
.lp-pendentes-resumo { margin-top: 8px; }
.lp-pendentes-resumo .lp-secao-titulo {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 17px;
    margin: 0 0 12px;
}
.lp-pendente-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--traco);
}
.lp-pendente-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-pendente-txt strong { font-size: 14.5px; font-weight: 600; }
.lp-pendente-txt a {
    font-size: 12px;
    color: var(--primaria);
    word-break: break-all;
}
.lp-pendente-txt em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--tinta-suave);
    line-height: 1.4;
}

/* ---- linhas de item (gaveta e listas) ---- */
.lp-gaveta .lp-item-linha,
.lp-wz .lp-item-linha {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--traco);
}
.lp-gaveta .lp-item-linha img,
.lp-wz .lp-item-linha img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 9px;
    background: color-mix(in srgb, var(--tinta) 6%, var(--papel));
}
.lp-item-sem-foto {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--acento) 22%, var(--papel));
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 18px;
    color: var(--tinta);
}
.lp-item-nome { font-size: 14px; line-height: 1.35; }
.lp-remover-item {
    background: none;
    border: 1px solid var(--traco);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-family: 'Work Sans', sans-serif;
    color: var(--tinta-suave);
    cursor: pointer;
}
.lp-remover-item:hover { border-color: #B4232A; color: #B4232A; }

/* -------------------------------------------------------------------------
   ETAPA 3 — CONVIDADOS
   ------------------------------------------------------------------------- */
.lp-painel-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.lp-numero-caixa {
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: 15px;
    padding: 17px 18px;
    box-shadow: var(--lp-sombra-card);
}
.lp-numero-caixa strong {
    display: block;
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 34px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.02em;
}
.lp-numero-caixa span {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--tinta-suave);
    line-height: 1.35;
}
.lp-numero-destaque {
    background: color-mix(in srgb, var(--acento) 16%, var(--papel));
    border-color: color-mix(in srgb, var(--acento) 45%, var(--traco));
}

.lp-add-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-add-linha input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--traco);
    border-radius: 11px;
    background: color-mix(in srgb, var(--papel) 70%, #fff);
    font-family: 'Work Sans', sans-serif;
    font-size: 15.5px;
    color: var(--tinta);
}
.lp-add-linha input:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 15%, transparent);
}
.lp-cartao-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0 12px;
    padding: 12px 13px;
    border: 1px solid var(--traco);
    border-radius: 11px;
    background: color-mix(in srgb, var(--papel) 70%, #fff);
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: var(--tinta);
    resize: vertical;
}
.lp-lista-cabeca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.lp-lista-cabeca .lp-secao-titulo { margin: 0; }

.lp-convidado-linha {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--traco);
}
.lp-convidado-inicial {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--tinta) 8%, var(--papel));
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 15px;
    color: var(--tinta);
}
.lp-convidado-ok .lp-convidado-inicial {
    background: color-mix(in srgb, var(--feito, #6F8F6B) 24%, var(--papel));
    color: color-mix(in srgb, var(--feito, #6F8F6B) 85%, #000);
}
.lp-convidado-nome {
    border: 1px solid transparent;
    background: none;
    padding: 8px 10px;
    border-radius: 9px;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: var(--tinta);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.lp-convidado-nome:hover { border-color: var(--traco); }
.lp-convidado-nome:focus {
    outline: none;
    border-color: var(--primaria);
    background: color-mix(in srgb, var(--papel) 70%, #fff);
}

/* -------------------------------------------------------------------------
   ETAPA 4 — ESTÚDIO DO CONVITE
   Prévia sempre à vista; controles em abas, então nada empurra a tela.
   Substitui as regras de .lp-estudio da versão anterior.
   ------------------------------------------------------------------------- */
.lp-estudio {
    display: grid;
    gap: 22px;
    align-items: start;
}

@media (min-width: 1000px) {
    .lp-estudio {
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 40px;
    }
    .lp-estudio-palco {
        position: sticky;
        top: 20px;
    }
}

/* ---- palco da prévia ---- */
.lp-estudio-palco { min-width: 0; }
.lp-palco-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 2px;
}
.lp-palco-rotulo {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 9.5px;
    color: var(--tinta-suave);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}
.lp-palco-rotulo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34C759;
    animation: lp-pulso 2s infinite;
}
.lp-palco-modelo {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--tinta);
    margin-left: auto;
    text-align: right;
    line-height: 1.25;
}
.lp-palco-expandir {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--traco);
    background: var(--papel);
    color: var(--tinta-suave);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.lp-palco-expandir svg { width: 15px; height: 15px; }
.lp-palco-expandir:hover { border-color: var(--tinta); color: var(--tinta); }
.lp-palco-nota {
    margin: 12px 2px 0;
    font-size: 12px;
    color: var(--tinta-suave);
    text-align: center;
}

/* prévia em tela cheia */
.lp-estudio-palco.lp-palco-cheio {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--papel-fundo);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    top: 0;
}
.lp-palco-cheio .lp-fone { max-width: 340px; margin: 0 auto; }
.lp-palco-cheio .lp-fone-tela { height: min(640px, 72vh); }
.lp-palco-cheio .lp-palco-expandir { border-color: var(--tinta); color: var(--tinta); }

/* ---- painel de controles ---- */
.lp-estudio-painel { min-width: 0; }
.lp-abas {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
    margin-bottom: 20px;
    background: color-mix(in srgb, var(--tinta) 5%, var(--papel));
    border-radius: 999px;
    border: 1px solid var(--traco);
}
.lp-abas::-webkit-scrollbar { height: 0; }
.lp-aba {
    flex: 1 0 auto;
    border: 0;
    background: none;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    white-space: nowrap;
    transition: background .18s, color .18s;
}
.lp-aba:hover { color: var(--tinta); }
.lp-aba[aria-selected="true"] {
    background: var(--papel);
    color: var(--tinta);
    box-shadow: 0 1px 3px rgba(20,25,35,.12);
}
.lp-aba-titulo {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    margin: 0 0 12px;
}
.lp-aba-titulo:not(:first-child) { margin-top: 30px; }
.lp-aba-ajuda {
    font-size: 13.5px;
    color: var(--tinta-suave);
    margin: -6px 0 16px;
    max-width: 60ch;
}

/* ---- aba modelo: a arte de cada convite ---- */
.lp-modelos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: 14px;
}
.lp-modelo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--papel);
    border: 1.5px solid var(--traco);
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s;
    box-shadow: var(--lp-sombra-card);
}
.lp-modelo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-sombra-alta);
}
.lp-modelo-card[aria-pressed="true"] {
    border-color: var(--tinta);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinta) 18%, transparent), var(--lp-sombra-alta);
}
.lp-modelo-arte {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: color-mix(in srgb, var(--tinta) 6%, var(--papel));
}
.lp-arte { display: block; width: 100%; height: 100%; }
.lp-modelo-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 11px;
    border-top: 1px solid var(--traco);
}
.lp-modelo-info strong {
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta);
}
.lp-modelo-cores { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.lp-modelo-cores i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.lp-modelo-marca {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tinta);
    color: var(--papel);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: scale(.6);
    transition: all .2s cubic-bezier(.16,1,.3,1);
}
.lp-modelo-card[aria-pressed="true"] .lp-modelo-marca { opacity: 1; transform: none; }

/* ---- aba cores ---- */
.lp-paletas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.lp-paleta {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    background: var(--papel);
    border: 1.5px solid var(--traco);
    border-radius: 11px;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta);
    text-align: left;
}
.lp-paleta:hover { border-color: color-mix(in srgb, var(--tinta) 35%, transparent); }
.lp-paleta[aria-pressed="true"] {
    border-color: var(--tinta);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tinta) 14%, transparent);
}
.lp-paleta-cores { display: inline-flex; flex: 0 0 auto; }
.lp-paleta-cores i {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
    margin-left: -5px;
}
.lp-paleta-cores i:first-child { margin-left: 0; }

.lp-cores-campos { display: grid; gap: 10px; margin-bottom: 16px; }
.lp-cor-campo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: 13px;
    cursor: pointer;
}
.lp-cor-campo input[type="color"] {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--traco);
    border-radius: 11px;
    background: none;
    cursor: pointer;
}
.lp-cor-campo input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.lp-cor-campo input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.lp-cor-txt { display: flex; flex-direction: column; gap: 2px; }
.lp-cor-txt strong { font-size: 14px; font-weight: 600; }
.lp-cor-txt em { font-style: normal; font-size: 12px; color: var(--tinta-suave); }
.lp-cor-hex {
    margin-left: auto;
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    color: var(--tinta-suave);
    letter-spacing: .04em;
}

/* ---- aba estrutura ---- */
.lp-estruturas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.lp-estrutura-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    background: var(--papel);
    border: 1.5px solid var(--traco);
    border-radius: 13px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color .18s, transform .18s;
}
.lp-estrutura-card:hover { border-color: color-mix(in srgb, var(--tinta) 35%, transparent); transform: translateY(-2px); }
.lp-estrutura-card[aria-pressed="true"] {
    border-color: var(--tinta);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tinta) 14%, transparent);
}
.lp-estrutura-mini {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mp-3, #fff);
    border: 1px solid color-mix(in srgb, var(--mp-1, #000) 12%, transparent);
}
.lp-estrutura-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp-estrutura-txt strong { font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.lp-estrutura-txt em { font-style: normal; font-size: 11.5px; color: var(--tinta-suave); line-height: 1.35; }

/* ---- aba fotos ---- */
.lp-arquivo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px dashed color-mix(in srgb, var(--tinta) 32%, transparent);
    border-radius: 11px;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta);
    background: color-mix(in srgb, var(--tinta) 3%, var(--papel));
    margin-bottom: 6px;
    transition: border-color .18s, background .18s;
}
.lp-arquivo:hover { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 7%, var(--papel)); }
.lp-arquivo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.lp-arquivo::before { content: "＋"; font-size: 16px; line-height: 1; }

.lp-foto-principal { margin-bottom: 12px; }
.lp-foto-chip {
    position: relative;
    display: inline-block;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: var(--lp-sombra-card);
}
.lp-foto-chip img {
    display: block;
    width: 118px;
    height: 118px;
    object-fit: cover;
}
.lp-remover-foto,
.lp-mural-chip button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    background: rgba(18,22,30,.72);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.lp-remover-foto:hover,
.lp-mural-chip button:hover { background: #B4232A; }

.lp-wz .lp-mural-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 9px;
    margin-top: 12px;
}
.lp-mural-chip {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
    background: color-mix(in srgb, var(--tinta) 6%, var(--papel));
}
.lp-mural-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-mural-pendente::after {
    content: "enviando";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18,22,30,.62);
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 8.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: 3px 0;
}

/* ---- peças novas da prévia ---- */
.pv-mural {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0 12px 12px;
}
.pv-mural i {
    display: block;
    aspect-ratio: 1;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: color-mix(in srgb, var(--mp-1) 12%, var(--mp-3));
}
.pv-card-foto {
    background-size: cover !important;
    background-position: center !important;
}

/* -------------------------------------------------------------------------
   ETAPA 5 — REVISÃO E PUBLICAÇÃO
   ------------------------------------------------------------------------- */
.lp-revisao {
    display: grid;
    gap: 24px;
    align-items: start;
    background: var(--papel);
    border: 1px solid var(--traco);
    border-radius: var(--lp-raio-suave, 18px);
    padding: 22px;
    box-shadow: var(--lp-sombra-card);
}
@media (min-width: 780px) {
    .lp-revisao { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; padding: 28px 30px; }
}
.lp-revisao-arte {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--lp-sombra-alta);
    max-width: 240px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
}
.lp-revisao-arte svg { display: block; width: 100%; height: 100%; }
.lp-revisao-linha {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--traco);
}
.lp-revisao-linha:last-child { border-bottom: 0; }
.lp-revisao-rot {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.lp-revisao-valor { font-size: 14.5px; color: var(--tinta); line-height: 1.4; }
.lp-botao-publicar { padding: 13px 26px !important; }

/* -------------------------------------------------------------------------
   SUCESSO
   ------------------------------------------------------------------------- */
.lp-wz + .lp-sucesso,
#lp-app .lp-sucesso {
    display: grid;
    gap: 26px;
    align-items: center;
    text-align: left;
}
@media (min-width: 800px) {
    #lp-app .lp-sucesso { grid-template-columns: 260px minmax(0, 1fr); gap: 44px; }
}
.lp-sucesso-arte {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--lp-sombra-alta);
    max-width: 260px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
}
.lp-sucesso-arte svg { display: block; width: 100%; height: 100%; }
.lp-sucesso-txt h2 {
    font-family: var(--display, 'Fraunces', Georgia, serif);
    font-size: clamp(24px, 4vw, 33px);
    margin: 14px 0 8px;
    letter-spacing: -.02em;
}
.lp-sucesso-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

/* -------------------------------------------------------------------------
   AJUSTES DE TELA ESTREITA
   ------------------------------------------------------------------------- */
@media (max-width: 999px) {
    /* a prévia acompanha a rolagem sem ocupar a tela toda */
    .lp-estudio-palco {
        position: sticky;
        top: 0;
        z-index: 25;
        padding: 10px 0 12px;
        margin: -10px 0 4px;
        background: linear-gradient(to bottom, var(--papel-fundo) 78%, transparent);
    }
    .lp-estudio-palco .lp-fone {
        max-width: 190px;
        margin: 0 auto;
        border-radius: 24px;
        padding: 6px;
    }
    .lp-estudio-palco .lp-fone::before { top: 12px; width: 40px; height: 4px; }
    .lp-estudio-palco .lp-fone-tela { height: 300px; border-radius: 19px; }
    .lp-palco-nota { display: none; }
    .lp-palco-cheio .lp-fone { max-width: 300px; }
    .lp-palco-cheio .lp-fone-tela { height: min(560px, 66vh); }
}

@media (max-width: 640px) {
    #lp-app[data-modo-criar="assistente"],
    #lp-app[data-modo-criar="entrada"] { padding: 16px 14px 30px; }

    .lp-wz-cabeca { gap: 14px; margin-bottom: 18px; }
    .lp-wz-trilha { margin: 0 -14px; padding: 0 14px 2px; }
    .lp-wz-passo { padding: 6px 11px 6px 6px; font-size: 12.5px; }
    .lp-wz-num { width: 23px; height: 23px; font-size: 11.5px; }

    .lp-wz-rodape {
        margin-left: -14px;
        margin-right: -14px;
        border-radius: 16px 16px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding: 11px 14px;
    }
    .lp-wz-rodape-info { font-size: 12.5px; width: 100%; order: 2; }
    .lp-wz-rodape-acoes { width: 100%; order: 1; }
    .lp-wz-rodape-acoes .lp-botao { flex: 1; text-align: center; }

    .lp-eventos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .lp-evento-txt { padding: 10px 12px 12px; }
    .lp-evento-txt strong { font-size: 15px; }
    .lp-evento-txt em { font-size: 11.5px; }

    .lp-form-grade { grid-template-columns: 1fr; }
    .lp-cartao-form { padding: 18px 16px; }
    .lp-modelos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .lp-estruturas { grid-template-columns: 1fr; }
    .lp-numero-caixa strong { font-size: 29px; }
    .lp-contador-num { font-size: 32px; min-width: 38px; }

    .lp-pendente-linha { grid-template-columns: minmax(0, 1fr) auto; }
    .lp-pendente-linha .lp-remover-item { grid-column: 2; }
    .lp-revisao-linha { grid-template-columns: minmax(0, 1fr) auto; }
    .lp-revisao-rot { grid-column: 1 / -1; margin-bottom: -6px; }
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    .lp-wz-corpo.lp-wz-entra { animation: none; }
    .lp-palco-rotulo::before { animation: none; }
    .lp-evento-card, .lp-modelo-card, .lp-estrutura-card, button.lp-atalho { transition: none; }
}

/* =========================================================================
   AJUSTES v6.1 — prévia fiel (iframe), palco compacto no celular,
   abas sempre visíveis e envio de fotos com progresso.
   Vem depois de tudo: estas regras substituem as equivalentes acima.
   ========================================================================= */

/* ---- a prévia agora é a página real, dentro de um iframe ---- */
.lp-fone-tela {
    position: relative;
    background: var(--papel);
}
.lp-previa-iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: 0;
    background: transparent;
    transform-origin: top left;
    /* no tamanho pequeno não captura o toque, pra não roubar a rolagem */
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}
.lp-previa-iframe.lp-previa-visivel { opacity: 1; }

/* ---- palco: no desktop continua uma coluna com o celular grande ---- */
.lp-estudio-palco {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-estudio-palco .lp-palco-barra { order: 1; margin: 0; }
.lp-estudio-palco .lp-fone { order: 2; }
.lp-estudio-palco .lp-palco-expandir { order: 3; align-self: center; }
.lp-estudio-palco .lp-palco-nota { order: 4; margin: 0; }
.lp-palco-fechar { display: none; }

.lp-palco-expandir {
    width: auto;
    height: auto;
    padding: 8px 15px;
    gap: 7px;
    display: inline-flex;
    align-items: center;
    font-family: 'Work Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}

/* ---- CELULAR: faixa compacta e grudada no topo ----
   Antes o celular da prévia comia quase a tela toda e as opções ficavam
   invisíveis. Agora a prévia vira uma miniatura viva de ~60px: continua
   atualizando em tempo real e um toque abre em tela cheia. */
@media (max-width: 999px) {
    .lp-estudio-palco {
        position: sticky;
        top: 0;
        z-index: 25;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        margin: 0 0 16px;
        background: color-mix(in srgb, var(--papel) 92%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid var(--traco);
        border-radius: 15px;
        box-shadow: 0 10px 26px -22px rgba(20,25,35,.55);
        cursor: pointer;
    }
    .lp-estudio-palco .lp-fone {
        order: 0;
        width: 58px;
        max-width: none;
        padding: 3px;
        border-radius: 11px;
        box-shadow: 0 4px 12px -8px rgba(0,0,0,.5);
    }
    .lp-estudio-palco .lp-fone::before { display: none; }
    .lp-estudio-palco .lp-fone-tela {
        height: 78px;
        border-radius: 9px;
    }
    .lp-estudio-palco .lp-palco-barra {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
    }
    .lp-estudio-palco .lp-palco-modelo {
        margin: 0;
        text-align: left;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .lp-estudio-palco .lp-palco-expandir { order: 2; align-self: center; }
    .lp-estudio-palco .lp-palco-nota { display: none; }
}

/* ---- prévia em tela cheia ---- */
.lp-estudio-palco.lp-palco-cheio {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 16px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--papel-fundo);
    box-shadow: none;
    cursor: default;
    overflow-y: auto;
}
.lp-palco-cheio .lp-palco-barra {
    order: 1;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    width: min(360px, 90vw);
}
.lp-palco-cheio .lp-palco-modelo { margin-left: auto !important; text-align: right !important; }
.lp-palco-cheio .lp-fone {
    order: 2;
    width: min(360px, 90vw) !important;
    padding: 8px !important;
    border-radius: 30px !important;
}
.lp-palco-cheio .lp-fone::before { display: block !important; }
.lp-palco-cheio .lp-fone-tela {
    height: min(660px, 66vh) !important;
    border-radius: 23px !important;
}
.lp-palco-cheio .lp-palco-expandir { display: none; }
.lp-palco-cheio .lp-palco-fechar {
    display: inline-flex;
    order: 3;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    border: 1px solid var(--tinta);
    border-radius: 999px;
    background: var(--papel);
    color: var(--tinta);
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.lp-palco-cheio .lp-palco-fechar:hover { background: var(--tinta); color: var(--papel); }
/* em tela cheia a pessoa pode rolar a prévia como se fosse a página */
.lp-palco-cheio .lp-previa-iframe { pointer-events: auto; }

/* ---- ABAS: nada de rolar o menu pro lado. Tudo à vista. ---- */
.lp-abas {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    border-radius: 14px;
    padding: 5px;
}
.lp-aba {
    flex: none;
    grid-column: span 2;
    padding: 10px 6px;
    font-size: 13px;
    text-align: center;
}
/* 3 na primeira linha, 2 na segunda — as duas linhas preenchem a largura */
.lp-aba:nth-child(4),
.lp-aba:nth-child(5) { grid-column: span 3; }

@media (min-width: 620px) {
    /* na tela larga cabem as cinco numa linha só */
    .lp-abas { grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 999px; }
    .lp-aba,
    .lp-aba:nth-child(4),
    .lp-aba:nth-child(5) { grid-column: span 1; }
}

/* ---- envio de fotos: barra de progresso e estado de cada quadradinho ---- */
.lp-envio {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 12px 0 4px;
}
.lp-envio[hidden] { display: none; }
.lp-envio-barra {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tinta) 12%, var(--papel));
    overflow: hidden;
}
.lp-envio-barra i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--primaria);
    transition: width .25s ease;
}
.lp-envio-txt {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    flex: 0 0 auto;
}

.lp-mural-chip[data-estado="preparando"] img,
.lp-mural-chip[data-estado="pronta"] img,
.lp-mural-chip[data-estado="enviando"] img { filter: grayscale(.4) brightness(.82); }
.lp-mural-chip[data-estado="erro"] { box-shadow: inset 0 0 0 2px #B4232A; }
.lp-chip-nota {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18,22,30,.68);
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 8.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: center;
    padding: 3px 0;
}
.lp-chip-erro { background: #B4232A; }
.lp-mural-chip[data-estado="enviando"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    animation: lp-brilho 1.1s linear infinite;
}
@keyframes lp-brilho {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
.lp-tentar-novo { grid-column: 1 / -1; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
    .lp-mural-chip[data-estado="enviando"]::before { animation: none; }
}

/* ---- prévia: arte do modelo enquanto o iframe carrega (ou se ele falhar) --- */
.lp-previa-arte {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--papel);
}
.lp-previa-arte svg { display: block; width: 100%; height: 100%; }

/* =========================================================================
   AJUSTES v6.4
   ========================================================================= */

/* A prévia ampliada ficava inalcançável: num container flex com rolagem,
   "justify-content: center" empurra o excedente para fora por cima, e essa
   parte não pode ser rolada. Alinhamos ao topo e cabemos na tela. */
.lp-estudio-palco.lp-palco-cheio {
    justify-content: flex-start !important;
    padding: 14px 16px 28px !important;
    gap: 12px !important;
}
.lp-palco-cheio .lp-fone-tela { height: min(560px, 56vh) !important; }
.lp-palco-cheio .lp-palco-barra { flex: 0 0 auto; }
.lp-palco-cheio .lp-palco-fechar { flex: 0 0 auto; margin-bottom: 6px; }

/* Sem transform na entrada das etapas: elemento com transform vira bloco de
   contenção e pode "prender" a prévia em tela cheia dentro dele. */
@keyframes lp-wz-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Cada modelo mostra a estrutura que ele usa, pra não haver surpresa. */
.lp-modelo-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.lp-modelo-txt em {
    font-style: normal;
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.lp-aba-ajuda em { font-style: italic; }

/* =========================================================================
   AJUSTES v6.6 — a miniatura tinha 58x78px: nesse tamanho não dá pra ver
   mudança de esqueleto, só de cor. Agora ela é legível.
   ========================================================================= */
@media (max-width: 999px) {
    .lp-estudio-palco { padding: 10px 12px !important; }
    .lp-estudio-palco .lp-fone { width: 96px !important; padding: 4px !important; border-radius: 14px !important; }
    .lp-estudio-palco .lp-fone-tela { height: 132px !important; border-radius: 11px !important; }
    .lp-estudio-palco:not(.lp-palco-cheio) .lp-palco-larguras { display: none; }
}

/* ampliada: quase a tela toda, alinhada ao topo */
.lp-palco-cheio .lp-fone { width: min(380px, 92vw) !important; }
.lp-palco-cheio .lp-fone-tela { height: min(680px, 64vh) !important; }
.lp-palco-cheio .lp-fone[data-largo="1"] { width: min(860px, 96vw) !important; border-radius: 16px !important; }
.lp-palco-cheio .lp-fone[data-largo="1"]::before { display: none !important; }

/* seletor celular / computador */
.lp-palco-larguras {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--traco);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tinta) 5%, var(--papel));
    flex: 0 0 auto;
}
.lp-larg-btn {
    border: 0;
    background: none;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--tinta-suave);
    white-space: nowrap;
}
.lp-larg-btn[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.lp-palco-barra { flex-wrap: wrap; }

/* pulso de atualização */
.lp-fone-tela.lp-pulsou { animation: lp-pulso-previa .6s cubic-bezier(.16,1,.3,1); }
@keyframes lp-pulso-previa {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 80%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce) { .lp-fone-tela.lp-pulsou { animation: none; } }