/* ============================================================
   Trilion Signature — CTAs nas páginas de slug da raiz (luxoseo_keywords_topo.php): 12 canais, guias de /signature/luxo e Marketing na Zona Sul.
   Tudo sob .ls- (prefixo próprio): nada do site principal muda. Visual da Signature: onyx, ouro #C9A84C, creme, Fraunces + Inter.
   Cartões fixos em grade; "Marketing na Zona Sul" em trilho deslizante com cartões de até 240 px.
   Contraste AA (texto creme sobre #1D1813; rótulo ouro sobre escuro), alvos de toque de 44 px, foco visível, sem rolagem lateral da página.
   ============================================================ */
@font-face{font-family:"LS Fraunces";font-style:normal;font-weight:300;font-display:swap;src:url("../../fonts/signature/Fraunces_72pt-Light.ttf") format("truetype")}
@font-face{font-family:"LS Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../../fonts/signature/Inter_18pt-Regular.ttf") format("truetype")}
@font-face{font-family:"LS Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../../fonts/signature/Inter_18pt-SemiBold.ttf") format("truetype")}

.ls-sec{--ls-ouro:#C9A84C;--ls-ouro-c:#E3C97A;--ls-creme:#F7F2E8;--ls-muted:#BDB29C;--ls-card:#1D1813;--ls-hair:rgba(201,168,76,.30);
  position:relative;padding:clamp(56px,7vw,104px) 0;background:linear-gradient(180deg,#14110D 0%,#1A1612 100%);border-top:1px solid var(--ls-hair);
  font-family:"LS Inter",ui-sans-serif,system-ui,sans-serif;color:var(--ls-creme)}
.ls-sec *,.ls-sec *::before,.ls-sec *::after{box-sizing:border-box}
.ls-sec ul{list-style:none;margin:0;padding:0}
.ls-sec a{text-decoration:none;color:inherit}
.ls-sec a:focus-visible,.ls-sec button:focus-visible,.ls-trilho:focus-visible{outline:2px solid var(--ls-ouro-c);outline-offset:3px}
.ls-wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}

/* cabeçalho de cada CTA */
.ls-head{max-width:760px;margin:0 0 clamp(28px,3.6vw,48px)}
.ls-head-ctl{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ls-head-ctl>div:first-child{max-width:760px}
.ls-k{margin:0 0 14px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--ls-ouro)}
.ls-sec .ls-h2{margin:0;font-family:"LS Fraunces",Georgia,serif;font-weight:300;font-size:clamp(30px,4.2vw,50px);line-height:1.1;letter-spacing:-.01em;color:var(--ls-creme);text-wrap:balance}
.ls-sub{margin:18px 0 0;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--ls-muted)}
.ls-gh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--ls-hair)}
.ls-sec .ls-h3{margin:0;font-family:"LS Fraunces",Georgia,serif;font-weight:300;font-size:clamp(22px,2.2vw,28px);line-height:1.2;color:var(--ls-creme)}
.ls-h3-n{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ls-ouro);white-space:nowrap}

/* 12 canais */
.ls-canais-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(14px,1.6vw,22px)}
.ls-canal{display:flex;flex-direction:column;height:100%;border:1px solid var(--ls-hair);border-radius:3px;background:var(--ls-card);overflow:hidden;transition:border-color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.ls-canal:hover{border-color:var(--ls-ouro);transform:translateY(-4px)}
.ls-canal-im{display:block;aspect-ratio:4/5;overflow:hidden;background:#241E17}
.ls-canal-im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.ls-canal:hover .ls-canal-im img{transform:scale(1.04)}
.ls-canal-tx{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 20px 22px}
.ls-canal-n{font-family:"LS Fraunces",Georgia,serif;font-weight:300;font-size:30px;line-height:1;color:var(--ls-ouro)}
.ls-canal-nome{font-family:"LS Fraunces",Georgia,serif;font-weight:300;font-size:clamp(21px,1.8vw,25px);line-height:1.2;color:var(--ls-creme)}
.ls-canal-f{font-size:15px;line-height:1.55;color:var(--ls-muted)}
.ls-go{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ls-ouro-c)}
.ls-go::after{content:" \2192";transition:margin-left .2s}
.ls-canal:hover .ls-go::after{margin-left:4px}

/* guias de /signature/luxo (cartões fixos por segmento) */
.ls-grupo+.ls-grupo{margin-top:clamp(32px,4vw,52px)}
.ls-gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:clamp(12px,1.4vw,18px)}
.ls-g{display:flex;flex-direction:column;height:100%;border:1px solid var(--ls-hair);border-radius:3px;background:var(--ls-card);overflow:hidden;transition:border-color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.ls-g:hover{border-color:var(--ls-ouro);transform:translateY(-3px)}
.ls-g-im{display:block;aspect-ratio:3/2;overflow:hidden;background:#241E17}
.ls-g-im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.ls-g:hover .ls-g-im img{transform:scale(1.04)}
.ls-g-tx{display:flex;flex-direction:column;gap:8px;padding:14px 16px 18px}
.ls-g-seg{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--ls-ouro)}
.ls-g-q{font-family:"LS Fraunces",Georgia,serif;font-weight:300;font-size:18px;line-height:1.3;color:var(--ls-creme);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Marketing na Zona Sul: trilho deslizante, cartões de até 240 px */
.ls-zona{border-top:1px solid var(--ls-hair)}
.ls-ctl{display:flex;gap:10px;flex:none}
.ls-ctl[hidden]{display:none}
.ls-seta{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--ls-ouro);border-radius:4px;background:var(--ls-ouro);color:#16120E;cursor:pointer;transition:background .25s,color .25s,opacity .25s}
.ls-seta:hover{background:transparent;color:var(--ls-ouro-c)}
.ls-seta[disabled]{opacity:.35;cursor:default;background:transparent;color:var(--ls-ouro)}
.ls-seta svg{width:16px;height:16px;fill:currentColor}
.ls-trilho{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 18px;scrollbar-width:thin;scrollbar-color:var(--ls-ouro) rgba(255,255,255,.08);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ls-trilho::-webkit-scrollbar{height:6px}
.ls-trilho::-webkit-scrollbar-thumb{background:var(--ls-ouro);border-radius:3px}
.ls-trilho::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.ls-tr-l{display:flex;gap:14px;width:max-content}
.ls-tr-l>li{flex:0 0 240px;width:240px;max-width:240px;scroll-snap-align:start}
.ls-z{display:flex;flex-direction:column;height:100%;border:1px solid var(--ls-hair);border-radius:3px;background:var(--ls-card);overflow:hidden;transition:border-color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.ls-z:hover{border-color:var(--ls-ouro);transform:translateY(-3px)}
.ls-z-im{display:block;aspect-ratio:3/2;overflow:hidden;background:#241E17}
.ls-z-im img{display:block;width:100%;height:100%;object-fit:cover}
.ls-z-q{padding:12px 14px 16px;font-family:"LS Fraunces",Georgia,serif;font-weight:300;font-size:16px;line-height:1.3;color:var(--ls-creme);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

.ls-mais{margin:clamp(24px,3vw,38px) 0 0}
.ls-mais a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--ls-ouro-c);text-decoration:underline;text-decoration-color:rgba(201,168,76,.5);text-underline-offset:.28em;transition:color .2s}
.ls-mais a:hover{color:var(--ls-ouro)}

/* celular: cartões em linha (miniatura à esquerda) para a página não ficar interminável; o trilho segue com 240 px */
@media(max-width:560px){
  .ls-head-ctl{flex-direction:column;align-items:flex-start}
  .ls-canais-g,.ls-gg{grid-template-columns:minmax(0,1fr)}
  .ls-canal,.ls-g{flex-direction:row}
  .ls-canal-im{flex:none;width:96px;aspect-ratio:auto;align-self:stretch}
  .ls-g-im{flex:none;width:112px;aspect-ratio:auto;align-self:stretch}
  .ls-canal-tx{padding:14px 16px}
  .ls-canal-n{font-size:22px}
  .ls-g-tx{padding:12px 14px;justify-content:center}
  .ls-g-q{font-size:16px;-webkit-line-clamp:3}
}
@media(prefers-reduced-motion:reduce){.ls-canal,.ls-g,.ls-z,.ls-canal-im img,.ls-g-im img,.ls-seta{transition:none}.ls-canal:hover,.ls-g:hover,.ls-z:hover{transform:none}.ls-trilho{scroll-behavior:auto}}
