/* ============================================================
   Trilion Signature — carrossel "Mais guias" (fim das páginas /signature/luxo/{slug} do segmento Marketing).
   Carregado depois de luxo.css. Tudo sob .lx-car. Tokens do site (--gold, --onyx, --cream, --hair, --disp, --body).
   Largura vem do contêiner (cqi), não da janela. Movimento só em transform, width, margin-left e opacity.
   Alvos de toque de 44 px, foco visível, sem rolagem lateral em 390 e 1360 px. Sem JS: só a lista completa aparece.
   ============================================================ */

.lx-car-hd{max-width:760px;margin:0 0 clamp(26px,3.4vw,44px)}
.lx-car-hd p{margin:16px 0 0;font-size:calc(17px + var(--ts-fs,0px));line-height:1.65;color:var(--tc-soft,var(--muted))}

.lx-car-box{container-type:inline-size;width:100%}
.lx-car-in{
  --sq-h:clamp(170px,32cqi,340px);--sq-gap:16px;--sq-slat-gap:8px;--sq-slat:8px;--sq-radius:6px;
  --sq-ms:900ms;--sq-ease:cubic-bezier(.16,1,.3,1);
  --sq-hero:calc(var(--sq-h)*16/9);
  --sq-room:calc(100cqi - var(--sq-hero) - var(--lx-slats,3)*var(--sq-slat-gap) - 3*var(--sq-gap) - var(--lx-slats,3)*var(--sq-slat));
  display:flex;flex-direction:column;width:100%}
@container (max-width:640px){.lx-car-in{--sq-h:calc((100cqi - 72px)*9/16);--sq-gap:12px}}
.lx-car-in.is-still,.lx-car-in.is-still *{transition:none!important}

/* setas */
.lx-car-ctl{display:flex;justify-content:flex-end;gap:10px;margin:0 0 16px}
.lx-car-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--gold);border-radius:4px;background:var(--gold);color:var(--onyx,#16120E);cursor:pointer;transition:background .25s,color .25s,transform .25s}
.lx-car-arrow:hover{background:transparent;color:var(--gold-light,var(--gold))}
.lx-car-arrow:active{transform:scale(.96)}
.lx-car-arrow:focus-visible,.lx-car-card:focus-visible{outline:2px solid var(--gold-light,var(--gold));outline-offset:3px}
.lx-car-arrow svg{width:16px;height:16px;fill:currentColor}

/* a faixa */
.lx-car-view{width:100%;height:var(--sq-h);overflow:hidden}
.lx-car-strip{display:flex;height:100%;width:max-content;will-change:transform;transition:transform var(--sq-ms) var(--sq-ease)}
.lx-car-card{position:relative;isolation:isolate;flex:none;height:100%;padding:0;border:0;overflow:hidden;cursor:pointer;background:var(--onyx-2,#211B15);
  transition-property:width,margin-left;transition-duration:var(--sq-ms);transition-timing-function:var(--sq-ease)}
/* a imagem tem sempre o tamanho de um bloco 16:9: o cartão só muda quanto dela se vê (sem reamostrar a cada quadro) */
.lx-car-card img{position:absolute;inset:0 auto 0 50%;height:100%;width:var(--sq-hero);min-width:100%;max-width:none;object-fit:cover;transform:translateX(-50%);display:block}
.lx-car-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(22,18,14,.55),rgba(22,18,14,0) 55%);opacity:0;transition:opacity var(--sq-ms) var(--sq-ease)}
.lx-car-card.is-front::after{opacity:1}
.lx-car-tag{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px clamp(14px,2vw,22px);text-align:left;font-size:calc(11px + var(--ts-fs,0px));letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:#F3E7C2;text-shadow:0 1px 6px rgba(0,0,0,.55);opacity:0;transition:opacity var(--sq-ms) var(--sq-ease)}
.lx-car-card.is-front .lx-car-tag{opacity:1}

/* o texto abaixo troca por transparência */
.lx-car-tx{display:grid;margin-top:clamp(20px,2.4vw,28px)}
.lx-car-p{grid-area:1/1;display:flex;flex-direction:column;gap:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--sq-ms) var(--sq-ease),visibility var(--sq-ms)}
.lx-car-p.is-on{opacity:1;visibility:visible;pointer-events:auto}
.lx-car-p p{margin:0;max-width:46rem;font-size:calc(clamp(16px,1.5vw,18px) + var(--ts-fs,0px));line-height:1.6;text-wrap:balance}
.lx-car-p strong{font-weight:400;font-family:var(--disp);color:var(--tc-strong,var(--cream))}
.lx-car-p span{color:var(--muted)}
.lx-car-go{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;flex:none;min-height:44px;padding:0 22px;border:1px solid var(--gold);border-radius:3px;background:var(--gold);color:var(--onyx,#16120E);
  font-size:calc(14px + var(--ts-fs,0px));font-weight:600;letter-spacing:.06em;text-decoration:none;transition:background .25s,color .25s}
.lx-car-go:hover{background:transparent;color:var(--gold-light,var(--gold))}
.lx-car-go:focus-visible{outline:2px solid var(--gold-light,var(--gold));outline-offset:3px}
.lx-car-go svg{width:7px;height:10px;transition:transform .2s}
.lx-car-go:hover svg{transform:translateX(3px)}
@container (min-width:720px){.lx-car-p{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:40px}.lx-car-go{align-self:flex-start}}

/* lista completa: SEO e quem navega sem JS */
.lx-car-todos{margin:clamp(30px,4vw,52px) 0 0;border-top:1px solid var(--hair)}
.lx-car-todos summary{display:flex;align-items:center;min-height:44px;padding:14px 0;cursor:pointer;font-size:calc(13px + var(--ts-fs,0px));letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light,var(--gold));list-style:none}
.lx-car-todos summary::-webkit-details-marker{display:none}
.lx-car-todos summary::after{content:"+";margin-left:12px;font-size:20px;line-height:1}
.lx-car-todos[open] summary::after{content:"\2212"}
.lx-car-todos summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lx-car-lista{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px)}
.lx-car-lista li{border-top:1px solid var(--hair)}
.lx-car-lista a{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:14px 0;color:var(--cream);text-decoration:none;transition:color .2s}
.lx-car-lista a:hover{color:var(--gold-light,var(--gold))}
.lx-car-lista b{font-weight:400;font-family:var(--disp);font-size:calc(17px + var(--ts-fs,0px));line-height:1.35}
.lx-car-lista small{font-size:calc(13.5px + var(--ts-fs,0px));line-height:1.55;color:var(--muted)}
.lx-car-mais{margin-top:clamp(22px,3vw,34px)}
@media(max-width:760px){.lx-car-lista{grid-template-columns:minmax(0,1fr)}}

@media(prefers-reduced-motion:reduce){.lx-car-in{--sq-ms:0ms}.lx-car-arrow,.lx-car-go,.lx-car-go svg{transition:none}}
html.ts-still .lx-car-in{--sq-ms:0ms}
html.ts-fs-up .lx-car-tag{letter-spacing:.1em}

/* alto contraste (botão Aa) */
html.ts-light .lx-car-card{background:#EFE7D3}
html.ts-light .lx-car-p strong,html.ts-light .lx-car-lista a{color:#2B241C}
html.ts-light .lx-car-p span,html.ts-light .lx-car-lista small{color:#4A3F31}
html.ts-light .lx-car-todos summary,html.ts-light .lx-car-lista a:hover{color:#6F5C2B}

/* ---- assinatura do autor no corpo do texto (37 guias "alta performance") ---- */
.lx-assina{padding-top:0}
.lx-assina-c{display:flex;align-items:center;gap:clamp(18px,3vw,32px);padding:clamp(20px,3vw,30px);border:1px solid var(--hair);border-left:2px solid var(--gold);border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,rgba(201,168,76,.10),rgba(201,168,76,.02) 70%)}
.lx-assina-foto{display:block;flex:none;width:clamp(88px,14vw,132px);height:clamp(88px,14vw,132px);object-fit:cover;object-position:50% 20%;border-radius:50%;border:2px solid var(--gold);box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.lx-assina-tx{min-width:0}
.lx-assina-k{margin:0 0 6px;font-size:calc(11px + var(--ts-fs,0px));letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--gold-light,var(--gold))}
.lx-assina-tx h2{margin:0;font-weight:300;font-size:calc(clamp(24px,2.8vw,32px) + var(--ts-fs,0px));line-height:1.15;color:var(--tc-strong,var(--cream))}
.lx-assina-r{margin:6px 0 0;font-size:calc(15px + var(--ts-fs,0px));line-height:1.5;color:var(--muted)}
.lx-assina-bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin-top:16px;padding:0 22px;font-size:calc(14px + var(--ts-fs,0px));font-weight:600;letter-spacing:0;text-decoration:none}
.lx-assina-wa{flex:none;width:20px;height:20px}
.ts .lx-assina .lx-assina-bt.btn{letter-spacing:.01em}
@media(max-width:520px){.lx-assina-c{flex-direction:column;align-items:flex-start}}
html.ts-light .lx-assina-c{background:#FBF5E6;border-color:#D9C58E}
html.ts-light .lx-assina-k{color:#6F5C2B}