/* Lar 360: página de vendas. Direção A, a porta da geladeira. */
@font-face { font-family:Outfit; src:url(assets/fontes/outfit.woff2) format("woff2"); font-weight:500 800; font-display:swap; }
@font-face { font-family:Inter; src:url(assets/fontes/inter.woff2) format("woff2"); font-weight:400 600; font-display:swap; }
@font-face { font-family:Caveat; src:url(assets/fontes/caveat.woff2) format("woff2"); font-weight:700; font-display:swap; }

:root {
  color-scheme:light;
  --oliva:#55663f; --oliva-escuro:#46552f; --salvia:#dce6d2; --salvia-forte:#c9d6bb;
  --creme:#faf6f0; --papel:#fffdf8; --areia:#f2e6d5; --areia-texto:#6e5226;
  --texto:#2f332d; --suave:#5f6257; --borda:#e8e1d5;
  --largura:1240px; --suave-saida:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; }
body { background:var(--creme); color:var(--texto); font-family:Inter,system-ui,sans-serif; font-size:17px; line-height:1.55; overflow-x:clip; }
img, svg { display:block; }
a { color:inherit; }
h1, h2, h3 { font-family:Outfit,system-ui,sans-serif; line-height:1.08; letter-spacing:-.022em; }
h2 { font-size:clamp(32px,4vw,52px); font-weight:800; max-width:20em; }
h3 { font-size:20px; font-weight:700; letter-spacing:-.01em; }
ul, ol { list-style:none; }
.ico { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.miolo { max-width:var(--largura); margin:0 auto; padding:0 40px; }
.secao { padding:96px 0 0; scroll-margin-top:24px; }
.mao { font-family:Caveat,cursive; font-weight:700; letter-spacing:0; }
.pular { position:absolute; left:12px; top:-60px; background:var(--oliva); color:#fff; padding:10px 16px; border-radius:999px; z-index:10; }
.pular:focus { top:12px; }
:focus-visible { outline:3px solid var(--oliva-escuro); outline-offset:3px; border-radius:6px; }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; background:var(--oliva); color:#fff; font-family:Outfit,sans-serif; font-weight:600; font-size:16px; padding:11px 22px; border-radius:999px; text-decoration:none; white-space:nowrap; transition:transform .18s var(--suave-saida), background-color .18s; }
.btn:active { transform:scale(.97); }
@media (hover:hover) and (pointer:fine) {
  .btn:hover { background:var(--oliva-escuro); }
  .btn.claro:hover { background:#fff; }
  .seta:hover, .abas button:hover { background:var(--salvia); }
}
.btn.grande { font-size:19px; padding:17px 34px; min-height:58px; }
.btn.claro { background:var(--papel); color:var(--oliva-escuro); }

/* 1. topo */
.topo { display:flex; align-items:center; justify-content:space-between; height:72px; max-width:var(--largura); margin:0 auto; padding:0 40px; }
.marca { display:flex; align-items:center; gap:10px; min-height:44px; font-family:Outfit,sans-serif; font-weight:700; font-size:22px; text-decoration:none; }
.marca img { width:40px; height:40px; }

/* 2. abertura */
.hero { max-width:var(--largura); margin:0 auto; padding:12px 40px 0; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:48px; align-items:center; min-height:calc(100dvh - 72px); }
h1 { font-size:clamp(46px,5.6vw,78px); font-weight:800; line-height:1.02; letter-spacing:-.03em; }
h1 em { display:block; font-family:Caveat,cursive; font-style:normal; font-weight:700; color:var(--oliva); font-size:1.24em; letter-spacing:0; line-height:1.05; margin-top:2px; }
.sub { margin-top:20px; font-size:20px; line-height:1.5; color:var(--suave); max-width:30em; }
.hero .btn.grande { margin-top:28px; }
.preco-curto { margin-top:16px; font-size:16px; color:var(--suave); }
.preco-curto b { color:var(--texto); font-weight:600; }
.destaques { margin-top:26px; display:flex; flex-wrap:wrap; gap:8px; }
.destaques li { font-size:14.5px; font-weight:500; color:var(--oliva-escuro); background:var(--salvia); border-radius:999px; padding:7px 14px; }

.porta { position:relative; height:min(84dvh,720px); min-height:600px; background:var(--salvia); border-radius:32px; overflow:hidden; }
.celular { background:#20251c; border-radius:42px; padding:9px; box-shadow:0 26px 50px rgba(50,62,34,.28); }
.celular img { width:100%; height:auto; border-radius:34px; background:var(--creme); }
.porta .celular { position:absolute; left:50%; top:50%; width:clamp(248px,21vw,290px); transform:translate(-50%,-50%); z-index:2; }
.bilhete { font-family:Caveat,cursive; font-weight:700; color:#3a4030; background:var(--papel); border-radius:6px; box-shadow:0 8px 16px rgba(50,62,34,.16); position:relative; }
.bilhete::before { content:""; position:absolute; top:-8px; left:50%; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:var(--oliva); box-shadow:0 2px 3px rgba(40,50,25,.35); }
.porta .bilhete { position:absolute; z-index:3; font-size:clamp(21px,1.75vw,25px); line-height:1.05; padding:17px 11px 11px; width:clamp(104px,8.6vw,124px); }
.b1 { left:3%; top:12%; transform:rotate(-5deg); }
.b2 { right:3%; top:20%; transform:rotate(4deg); background:var(--areia); }
.b3 { left:3%; bottom:17%; transform:rotate(3deg); background:var(--areia); }
.b4 { right:3%; bottom:9%; transform:rotate(-4deg); }

/* 3. Lia */
.lia { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:64px; align-items:start; }
.passos-lia { margin-top:36px; display:grid; gap:28px; counter-reset:p; }
.passos-lia li { counter-increment:p; display:grid; grid-template-columns:44px 1fr; gap:16px; }
.passos-lia li::before { content:counter(p); width:44px; height:44px; border-radius:50%; background:var(--salvia); color:var(--oliva-escuro); display:grid; place-items:center; font-family:Outfit,sans-serif; font-weight:700; font-size:18px; }
.passos-lia p { color:var(--suave); margin-top:3px; }
.nota { margin-top:28px; font-size:15px; color:var(--suave); display:flex; gap:10px; align-items:center; }
.nota .ico { width:18px; height:18px; color:var(--oliva); }

/* 4. para quem é */
.titulo-duplo span { display:block; }
.titulo-duplo span + span { color:var(--oliva); }
.quem { margin-top:44px; display:grid; grid-template-columns:5fr 7fr; gap:16px; }
.quem li { border-radius:24px; padding:28px; min-height:210px; display:flex; flex-direction:column; justify-content:space-between; gap:28px; background:var(--papel); border:1px solid var(--borda); }
.quem li:nth-child(2) { background:var(--salvia); border-color:transparent; }
.quem li:nth-child(3) { grid-column:2; grid-row:2; background:var(--areia); border-color:transparent; }
.quem li:nth-child(4) { grid-column:1; grid-row:2; }
.quem .ico { width:30px; height:30px; color:var(--oliva-escuro); }
.quem p { margin-top:6px; color:var(--texto); max-width:30em; }

/* 5. galeria: um celular com as telas deslizando (estilos no fim) */
.legenda { font-size:15px; color:var(--suave); }

/* 6. o que tem dentro */
.dentro { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start; }
.dentro h2 { position:sticky; top:96px; }
.pilha { display:grid; gap:14px; }
.parte { position:sticky; top:calc(72px + var(--i) * 9px); background:var(--papel); border:1px solid var(--borda); border-radius:24px; padding:24px 26px; display:grid; grid-template-columns:48px 1fr; gap:18px; min-height:118px; align-items:start; box-shadow:0 -8px 24px rgba(50,62,34,.05); }
.parte:nth-child(3n+2) { background:var(--salvia); border-color:var(--salvia-forte); }
.parte:nth-child(3n) { background:var(--areia); border-color:#e8d9c3; }
.parte .ico-fundo { width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.75); color:var(--oliva-escuro); display:grid; place-items:center; }
.parte:nth-child(3n+1) .ico-fundo { background:var(--salvia); }
.parte header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.selo { font-size:13px; font-weight:600; border-radius:999px; padding:3px 11px; background:var(--oliva); color:#fff; }
.selo.breve { background:var(--papel); color:var(--areia-texto); border:1.5px dashed #b99f78; }
.parte p { margin-top:6px; }
.parte.embreve { background:var(--creme) !important; border:1.5px dashed var(--salvia-forte); box-shadow:none; }

/* 7. compra */
.compra { margin-top:44px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; position:relative; counter-reset:c; }
.compra::before { content:""; position:absolute; left:24px; right:12%; top:23px; height:2px; background:var(--salvia-forte); }
.compra li { counter-increment:c; position:relative; }
.compra li::before { content:counter(c); width:48px; height:48px; border-radius:50%; background:var(--oliva); color:#fff; display:grid; place-items:center; font-family:Outfit,sans-serif; font-weight:700; font-size:19px; margin-bottom:18px; box-shadow:0 0 0 7px var(--creme); }
.compra p { margin-top:6px; color:var(--suave); }

/* 8. quem criou */
.criou { background:var(--salvia); border-radius:32px; padding:56px 40px; display:flex; justify-content:center; }
.criou .bilhete { font-family:Inter,sans-serif; font-weight:400; max-width:720px; padding:44px 40px 36px; transform:rotate(-.6deg); color:var(--texto); }
.quem-assina { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.inicial { width:54px; height:54px; border-radius:50%; background:var(--oliva); color:#fff; display:grid; place-items:center; font-family:Outfit,sans-serif; font-weight:700; font-size:22px; }
.quem-assina strong { font-family:Caveat,cursive; font-size:36px; line-height:1; }
.criou p { font-size:19px; line-height:1.55; }

/* 10. é para você */
.listas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.lista { border-radius:24px; padding:32px; }
.lista.sim { background:var(--papel); border:1px solid var(--borda); }
.lista.nao { border:1.5px dashed var(--salvia-forte); }
.lista h2 { font-size:clamp(25px,2.5vw,32px); }
.lista ul { margin-top:22px; display:grid; gap:14px; }
.lista li { display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; }
.lista .ico { margin-top:2px; color:var(--oliva); }
.lista.nao .ico { color:var(--areia-texto); }

/* 11. preço */
.faixa-preco { background:var(--oliva); color:#fff; border-radius:36px; padding:64px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; }
.plano { font-family:Outfit,sans-serif; font-weight:600; font-size:20px; color:var(--salvia); }
.valor { font-family:Outfit,sans-serif; font-weight:800; font-size:clamp(46px,5.4vw,70px); line-height:1; letter-spacing:-.03em; margin-top:10px; white-space:nowrap; }
.valor small { font-size:.42em; font-weight:600; letter-spacing:-.005em; margin-left:6px; }
.parcelado { margin-top:12px; color:#eef2e6; }
.faixa-preco .casa { margin-top:26px; font-size:19px; }
.faixa-preco .casa b { font-weight:600; }
.faixa-preco .seguro { margin-top:14px; font-size:15px; color:#eef2e6; display:flex; align-items:center; gap:8px; }
.faixa-preco .seguro .ico { width:18px; height:18px; flex:none; }
.faixa-preco .btn { margin-top:28px; }
.incluso { background:var(--papel); color:var(--texto); border-radius:24px; padding:32px; }
.incluso h3 { font-size:21px; }
.incluso ul { margin:18px 0 22px; display:grid; gap:12px; }
.incluso li { display:grid; grid-template-columns:24px 1fr; gap:10px; }
.incluso .ico { color:var(--oliva); margin-top:2px; }
.incluso p { font-size:15px; color:var(--suave); padding-top:18px; border-top:1px solid var(--borda); }

/* 12. garantia */
.garantia { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:32px 0 0; max-width:820px; margin:0 auto; }
.garantia > .ico { width:44px; height:44px; color:var(--oliva); stroke-width:1.7; }
.garantia h2 { font-size:25px; }
.garantia p { color:var(--suave); margin-top:4px; }

/* 13. perguntas */
.perguntas { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:56px; align-items:start; }
.perguntas details { border-top:1px solid var(--salvia-forte); }
.perguntas details:last-child { border-bottom:1px solid var(--salvia-forte); }
.perguntas summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:19px 2px; font-family:Outfit,sans-serif; font-weight:600; font-size:19px; min-height:48px; }
.perguntas summary::-webkit-details-marker { display:none; }
.perguntas summary .ico { color:var(--oliva); transition:transform .22s var(--suave-saida); }
.perguntas details[open] summary .ico { transform:rotate(90deg); }
.perguntas details p { padding:0 34px 22px 2px; color:var(--suave); max-width:60ch; }

/* 14. chamada final */
.final { margin-top:96px; background:var(--oliva); color:#fff; border-radius:36px; padding:72px 40px; text-align:center; }
.final h2 { margin:0 auto; font-family:Caveat,cursive; font-weight:700; font-size:clamp(46px,6.4vw,84px); letter-spacing:0; line-height:1; color:var(--salvia); max-width:none; }
.final p { margin-top:14px; font-size:19px; color:#eef2e6; }
.final .btn { margin-top:28px; }

/* 15. rodapé */
.rodape { margin-top:56px; padding-bottom:40px; color:var(--suave); font-size:15px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.rodape .lema { font-weight:600; color:var(--texto); }
.rodape a { text-underline-offset:3px; }
.rodape nav { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:flex-end; align-content:start; }
.rodape nav a, .rodape address a { display:inline-block; padding:12px 0; }
.rodape address { font-style:normal; margin-top:2px; line-height:1.3; }

@media (max-width:1000px) {
  .lia, .dentro, .perguntas { grid-template-columns:minmax(0,1fr); gap:32px; }
  .dentro h2 { position:static; }
  .faixa-preco { grid-template-columns:minmax(0,1fr); padding:48px; }
  .compra { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compra::before { display:none; }
}
@media (max-width:860px) {
  body { font-size:16px; }
  .miolo { padding:0 16px; }
  .secao { padding-top:64px; }
  .topo { height:60px; padding:0 16px; }
  .marca { font-size:19px; } .marca img { width:34px; height:34px; }
  .topo .btn { font-size:14px; padding:9px 15px; min-height:44px; }
  .hero { display:block; padding:12px 16px 0; min-height:0; }
  h1 { font-size:44px; }
  .sub { font-size:17px; margin-top:12px; }
  .hero .btn.grande { margin-top:18px; width:100%; font-size:18px; padding:15px 28px; }
  .destaques { margin-top:14px; gap:6px; } .destaques li { font-size:13px; padding:6px 11px; }
  .porta { margin-top:22px; height:610px; min-height:0; border-radius:26px; }
  .porta .celular { width:238px; top:108px; transform:translateX(-50%); border-radius:38px; }
  .porta .celular img { border-radius:30px; }
  .porta .bilhete { font-size:21px; width:136px; padding:15px 11px 9px; }
  .b1 { left:5%; top:22px; } .b2 { right:5%; top:30px; } .b3, .b4 { display:none; }
  .quem { grid-template-columns:minmax(0,1fr); margin-top:28px; }
  .quem li, .quem li:nth-child(3), .quem li:nth-child(4) { grid-column:auto; grid-row:auto; min-height:0; padding:22px; gap:16px; }
  .parte { padding:20px; grid-template-columns:44px 1fr; gap:14px; min-height:0; top:calc(10px + var(--i) * 7px); }
  .parte header { flex-direction:column; align-items:flex-start; }
  .parte .ico-fundo { width:44px; height:44px; }
  .compra { grid-template-columns:minmax(0,1fr); margin-top:28px; gap:0; }
  .compra li { display:grid; grid-template-columns:48px 1fr; column-gap:16px; padding-bottom:24px; }
  .compra li::before { grid-row:1 / span 2; margin:0; }
  .criou { padding:40px 14px 24px; border-radius:26px; }
  .criou .bilhete { padding:32px 22px 26px; transform:none; }
  .criou p { font-size:17px; }
  .listas { grid-template-columns:minmax(0,1fr); }
  .lista { padding:24px; }
  .faixa-preco { padding:32px 22px; border-radius:28px; gap:28px; }
  .faixa-preco .btn { width:100%; }
  .incluso { padding:22px; }
  .garantia { padding-top:28px; gap:16px; }
  .perguntas summary { font-size:18px; padding:16px 2px; }
  .perguntas details p { padding-right:6px; }
  .final { margin-top:64px; padding:52px 20px; border-radius:28px; }
  .final .btn { width:100%; }
  .rodape { grid-template-columns:minmax(0,1fr); margin-top:40px; }
  .rodape nav { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .btn, .seta, .abas button, .perguntas summary .ico { transition:none; }
  .parte, .dentro h2 { position:static; }
}

/* Faixa correndo (depois da abertura) */
.faixa { margin-top:56px; background:var(--oliva); color:var(--papel); overflow:hidden; padding:18px 0; }
.faixa-trilho { display:flex; width:max-content; }
.faixa ul { display:flex; flex:none; }
.faixa li { font-family:Outfit,sans-serif; font-weight:700; font-size:21px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; }
.faixa li::after { content:"\00B7"; color:var(--salvia-forte); margin:0 26px; font-size:30px; line-height:0; }
@keyframes correr { to { transform:translateX(-50%); } }

/* Lia: celular com a tela em movimento. Tamanhos em % da largura da tela (cqw), para valer em qualquer celular */
.lia .celular.viva { width:min(100%,318px); justify-self:center; }
.tv { position:relative; aspect-ratio:620/1272; border-radius:34px; overflow:hidden; background:var(--creme); container-type:inline-size; }
.tv-lia, .tv-compras { position:absolute; inset:0; display:flex; flex-direction:column; }
.tv-compras { transform:translateX(100%); padding:9cqw 5.5cqw 0; gap:4.5cqw; background:var(--creme); }
.tv-topo { display:flex; gap:3.5cqw; align-items:center; padding:9cqw 5cqw 3.5cqw; background:#fffdf9; border-bottom:1px solid var(--borda); }
.tv-av { width:11cqw; height:11cqw; border-radius:50%; flex:none; background:var(--salvia) url(assets/telas/lia.webp) no-repeat; background-size:133.4cqw auto; background-position:-5.4cqw -71.4cqw; }
.tv-topo b { font-family:Outfit,sans-serif; font-size:5.4cqw; display:block; line-height:1.1; }
.tv-topo small { font-size:3.1cqw; color:var(--suave); display:block; line-height:1.3; }
.tv-chat { flex:1; padding:5cqw 4.5cqw; display:flex; flex-direction:column; gap:3.6cqw; }
.tv-ela, .tv-card { background:#fff; border:1px solid var(--borda); border-radius:4.5cqw 4.5cqw 4.5cqw 1.5cqw; padding:3.6cqw 4cqw; font-size:3.75cqw; line-height:1.4; max-width:88%; }
.tv-eu { align-self:flex-end; background:var(--oliva); color:#fff; border-radius:4.5cqw 4.5cqw 1.5cqw 4.5cqw; padding:3cqw 4.2cqw; font-size:3.9cqw; }
.tv-card { max-width:94%; display:grid; gap:3cqw; }
.tv-linhas { display:grid; grid-template-columns:auto 1fr; gap:2cqw 3cqw; background:#f3efe7; border-radius:3.5cqw; padding:3.2cqw 3.6cqw; font-size:3.5cqw; }
.tv-linhas span { color:var(--suave); }
.tv-linhas b { text-align:right; font-weight:600; }
.tv-bts { display:grid; grid-template-columns:1fr 1fr; gap:2.4cqw; }
.tv-bts span { border-radius:999px; text-align:center; padding:2.6cqw 0; font-size:3.2cqw; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:#fff; border:1px solid var(--borda); }
.tv-bts .tv-salvar { background:var(--oliva); color:#fff; border-color:var(--oliva); }
.tv-campo { position:relative; margin:0 4.5cqw 6cqw; border:2px solid var(--oliva); border-radius:999px; padding:3.6cqw 5cqw; font-size:3.9cqw; background:#fffdf9; }
.tv-ph { color:#8b877d; }
.tv-digita { position:absolute; left:5cqw; top:50%; transform:translateY(-50%); white-space:nowrap; opacity:0; }
.tv-titulo { font-family:Outfit,sans-serif; font-size:7.6cqw; line-height:1; }
.tv-sub { font-family:Outfit,sans-serif; font-size:3.9cqw; margin-top:2cqw; }
.tv-chips, .tv-freq { display:flex; flex-wrap:wrap; gap:2.2cqw; }
.tv-chips span, .tv-freq span { border:1px solid var(--borda); background:#fff; border-radius:999px; padding:2.1cqw 3.3cqw; font-size:3.45cqw; font-weight:500; }
.tv-chips { flex-wrap:nowrap; }
.tv-freq .tv-novo::before { content:"\2713\00A0"; display:inline-block; max-width:0; overflow:hidden; vertical-align:bottom; }
.tv-nav { margin:auto -5.5cqw 0; display:grid; grid-template-columns:repeat(4,1fr); padding:3cqw 2cqw 6cqw; border-top:1px solid var(--borda); background:#fffdf9; }
.tv-nav span { display:grid; justify-items:center; gap:1cqw; font-size:3cqw; color:var(--suave); }
.tv-nav .ico { width:6cqw; height:6cqw; stroke-width:1.8; }
.tv-nav .on { color:var(--oliva-escuro); font-weight:600; }
.tv-chips .on, .tv-freq .on { background:var(--oliva); color:#fff; border-color:var(--oliva); }
.tv-freq .on::before { content:"\2713\00A0"; }

/* Movimento só para quem não pediu para reduzir. Parado, mostra a conversa já com o cartão. */
@media (prefers-reduced-motion:no-preference) {
  .faixa-trilho { animation:correr 38s linear infinite; }
  html.js .viva.ver .tv { animation:tv-volta 13s infinite; }
  html.js .viva.ver .tv-lia { animation:tv-lia 13s infinite; }
  html.js .viva.ver .tv-compras { animation:tv-compras 13s infinite; }
  html.js .viva.ver .tv-ph { animation:tv-ph 13s infinite; }
  html.js .viva.ver .tv-digita { animation:tv-digita 13s infinite; }
  html.js .viva.ver .tv-eu { animation:tv-eu 13s infinite; }
  html.js .viva.ver .tv-card { animation:tv-card 13s infinite; }
  html.js .viva.ver .tv-salvar { animation:tv-salvar 13s infinite; }
  html.js .viva.ver .tv-cafe { animation:tv-marca 13s infinite; }
  html.js .viva.ver .tv-leite { animation:tv-marca2 13s infinite; }
  html.js .viva.ver .tv-cafe::before { animation:tv-check 13s infinite; }
  html.js .viva.ver .tv-leite::before { animation:tv-check2 13s infinite; }
  .viva.pausa *, .faixa.pausa .faixa-trilho { animation-play-state:paused !important; }
}
@keyframes tv-check { 0%,58% { max-width:0; } 61%,96% { max-width:4cqw; } 97%,100% { max-width:0; } }
@keyframes tv-check2 { 0%,63% { max-width:0; } 66%,96% { max-width:4cqw; } 97%,100% { max-width:0; } }
@keyframes tv-volta { 0%,93% { opacity:1; } 95%,99% { opacity:0; } 100% { opacity:1; } }
@keyframes tv-ph { 0%,7% { opacity:1; } 8%,21% { opacity:0; } 22%,100% { opacity:1; } }
@keyframes tv-digita { 0%,7% { clip-path:inset(0 100% 0 0); opacity:1; } 19% { clip-path:inset(0 0 0 0); opacity:1; } 21%,100% { clip-path:inset(0 0 0 0); opacity:0; } }
@keyframes tv-eu { 0%,21% { opacity:0; transform:translateY(8px); } 24%,96% { opacity:1; transform:none; } 97%,100% { opacity:0; transform:translateY(8px); } }
@keyframes tv-card { 0%,28% { opacity:0; transform:translateY(10px); } 32%,96% { opacity:1; transform:none; } 97%,100% { opacity:0; transform:translateY(10px); } }
@keyframes tv-salvar { 0%,41% { transform:none; filter:none; } 42.5% { transform:scale(.92); filter:brightness(.85); } 44%,100% { transform:none; filter:none; } }
@keyframes tv-lia { 0%,48% { transform:none; } 53%,96% { transform:translateX(-28%); } 97%,100% { transform:none; } }
@keyframes tv-compras { 0%,48% { transform:translateX(100%); } 53%,96% { transform:none; } 97%,100% { transform:translateX(100%); } }
@keyframes tv-marca { 0%,58% { background:#fff; color:var(--texto); border-color:var(--borda); transform:none; } 60% { background:var(--oliva); color:#fff; border-color:var(--oliva); transform:scale(1.14); } 62%,96% { background:var(--oliva); color:#fff; border-color:var(--oliva); transform:none; } 97%,100% { background:#fff; color:var(--texto); border-color:var(--borda); } }
@keyframes tv-marca2 { 0%,63% { background:#fff; color:var(--texto); border-color:var(--borda); transform:none; } 65% { background:var(--oliva); color:#fff; border-color:var(--oliva); transform:scale(1.14); } 67%,96% { background:var(--oliva); color:#fff; border-color:var(--oliva); transform:none; } 97%,100% { background:#fff; color:var(--texto); border-color:var(--borda); } }

/* Galeria: um celular com as telas deslizando, abas e setas */
.galeria2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
.abas { margin-top:28px; display:flex; flex-wrap:wrap; gap:8px; }
.abas button { font:600 16px Outfit,sans-serif; color:var(--oliva-escuro); background:transparent; border:1.5px solid var(--salvia-forte); border-radius:999px; padding:10px 18px; min-height:44px; cursor:pointer; transition:background-color .15s, color .15s; }
.abas button[aria-selected="true"] { background:var(--oliva); border-color:var(--oliva); color:#fff; }
.galeria2 .legenda { margin-top:18px; }
.carrossel { display:grid; grid-template-columns:48px minmax(0,300px) 48px; gap:20px; align-items:center; justify-content:center; }
.carrossel .celular { touch-action:pan-y; cursor:grab; user-select:none; }
.carrossel .celular.arrastando { cursor:grabbing; }
.trilho { display:flex; border-radius:34px; overflow:hidden; }
.trilho img { flex:none; width:100%; border-radius:0; pointer-events:none; transition:transform .55s cubic-bezier(.32,.72,0,1); transform:translateX(calc(var(--pos,0) * -100%)); }
.seta { width:48px; height:48px; border-radius:50%; border:1px solid var(--salvia-forte); background:transparent; color:var(--oliva-escuro); display:grid; place-items:center; cursor:pointer; transition:background-color .15s, transform .18s var(--suave-saida); }
.seta:active { transform:scale(.94); }

@media (max-width:860px) {
  .faixa { margin-top:36px; padding:14px 0; }
  .faixa li { font-size:17px; }
  .faixa li::after { margin:0 18px; }
  .lia .celular.viva { width:min(100%,290px); }
  .galeria2 { grid-template-columns:minmax(0,1fr); gap:24px; }
  .abas { margin-top:18px; }
  .abas button { padding:8px 14px; font-size:15px; }
  .carrossel { grid-template-columns:44px minmax(0,250px) 44px; gap:10px; }
  .seta { width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .faixa-trilho { width:auto; justify-content:center; }
  .faixa ul + ul { display:none; }
  .faixa ul { flex:1 1 auto; flex-wrap:wrap; justify-content:center; padding:0 16px; row-gap:6px; }
  .faixa li:last-child::after { display:none; }
  .trilho img { transition:none; }
}

/* Pedido → Feito (telas reais): o pedido chega, um toque em Feito, a tarefa fica marcada */
.sub-pedido { margin-top:14px; font-size:20px; color:var(--suave); max-width:30ch; }
.pedido .celular.viva { width:min(100%,318px); justify-self:center; }
.pd img { position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.pd .pd-2 { opacity:0; }
.pd .toque { position:absolute; left:26%; top:44.5%; width:16cqw; height:16cqw; margin:-8cqw 0 0 -8cqw; border-radius:50%; background:rgba(85,102,63,.35); border:2px solid rgba(255,255,255,.9); opacity:0; }
@media (prefers-reduced-motion:reduce) { .pd .pd-2 { opacity:1; } }
@media (prefers-reduced-motion:no-preference) {
  html.js .viva-pedido.ver .pd-2 { animation:pd-depois 7s infinite; }
  html.js .viva-pedido.ver .toque { animation:pd-toque 7s infinite; }
}
@keyframes pd-depois { 0%, 44% { opacity:0; } 52%, 92% { opacity:1; } 100% { opacity:0; } }
@keyframes pd-toque { 0%, 30% { opacity:0; transform:scale(.4); } 34% { opacity:1; transform:scale(1); } 40% { opacity:0; transform:scale(1.5); } 100% { opacity:0; } }