/* ==========================================================================
   LEVLI Agência — Página Consultoria de Marketing e Estratégia Comercial
   Carregar DEPOIS de styles.css e servico.css. Só componentes específicos desta página
   (prefixo .cs-); reaproveita tokens, .svc, .plan, .cmp, .faq, .final e .front__list.
   Não altera nenhuma regra global.
   ========================================================================== */

/* 1 · Abertura ------------------------------------------------------------ */
.cs-hero.hero--svc { padding-bottom: clamp(3rem, 7vw, 5rem); }
.cs-hero .hero__title { max-width: 19ch; }
.cs-hero__ask {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--rosa);
}

/* Os quatro pilares na abertura: 2 × 2, com a segunda coluna deslocada */
.cs-quad-wrap { max-width: 28rem; margin-inline: auto; }
.cs-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; position: relative; }
.cs-quad li:nth-child(even) { transform: translateY(1.75rem); }
.cs-quad__t {
  display: grid; gap: .6rem; align-content: space-between; min-height: 10.5rem; height: 100%;
  padding: 1.1rem; border: 1px solid var(--linha-escura); border-radius: 10px;
  background: rgba(246, 240, 233, .05); color: var(--offwhite); text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.cs-quad__t:hover { background: rgba(231, 166, 180, .16); border-color: var(--rosa); transform: translateY(-3px); }
.cs-quad__t:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
.cs-quad li:nth-child(1) .cs-quad__t, .cs-quad li:nth-child(4) .cs-quad__t { background: rgba(231, 166, 180, .12); }
.cs-quad__n { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.1rem; color: var(--rosa); }
.cs-quad__ic { width: 3rem; height: 3rem; color: var(--rosa); }
.cs-quad__l { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.has-reveal .cs-quad li { animation: cs-in .7s ease both; }
.has-reveal .cs-quad li:nth-child(2) { animation-delay: .12s; }
.has-reveal .cs-quad li:nth-child(3) { animation-delay: .24s; }
.has-reveal .cs-quad li:nth-child(4) { animation-delay: .36s; }
@keyframes cs-in { from { opacity: 0; translate: 0 14px; } }

/* 2 · Pilares -------------------------------------------------------------- */
.cs-pils { display: grid; gap: 1.25rem; }
.cs-pil {
  display: grid; gap: .9rem; align-content: start; min-width: 0; scroll-margin-top: 1.5rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem); border-radius: 10px; border: 1.5px solid transparent;
}
.cs-pil--1 { background: var(--offwhite); border-color: var(--grafite); }
.cs-pil--2 { background: rgba(231, 166, 180, .38); }
.cs-pil--3 { background: var(--vinho); color: var(--offwhite); }
.cs-pil--4 { background: var(--offwhite); border-color: var(--cereja); }
.cs-pil__h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cs-pil__n { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: var(--cereja); }
.cs-pil--3 .cs-pil__n, .cs-pil--3 .cs-pil__ic { color: var(--rosa); }
.cs-pil__ic { width: 3.75rem; height: 3.75rem; color: var(--cereja); flex: none; }
.cs-pil--2 .cs-pil__n { color: var(--vinho); }
.cs-pil__t { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.cs-pil__d { color: var(--texto-suave); max-width: 32rem; }
.cs-pil--3 .cs-pil__d { color: var(--offwhite); opacity: .9; }
.cs-pil__l { grid-template-columns: 1fr; gap: .5rem; font-size: .96rem; padding-top: .9rem; border-top: 1px solid var(--linha); }
.cs-pil--3 .cs-pil__l { border-color: var(--linha-escura); }
.cs-pil--1 .cs-pil__l li::before, .cs-pil--4 .cs-pil__l li::before { background: var(--cereja); }
.cs-pil--2 .cs-pil__l li::before { background: var(--vinho); }
.cs-pil--3 .cs-pil__l li::before { background: var(--rosa); }
.cs-pil__note { font-size: .9rem; color: var(--texto-suave); padding-left: .9rem; border-left: 3px solid var(--cereja); }
.cs-nota { margin-top: 1.75rem; max-width: 44rem; font-size: .95rem; color: var(--texto-suave); border-left: 3px solid var(--rosa); padding-left: .9rem; }

/* 3 · Modalidades (reaproveita .plan de servico.css) ----------------------- */
.cs-plans .plan__title { min-height: 0; }
.cs-inv { display: block; margin: 0 0 .5rem !important; font-size: .72rem !important; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); }
.plan--full .cs-inv { color: var(--rosa); }
.plan--full .plan__price .plan__per { color: var(--offwhite); opacity: .85; }
.cs-plans .plan__incl { font-size: .9rem; }
.cs-no li::before { content: "×"; background: none !important; width: auto; height: auto; top: 0; left: .05rem; color: var(--cereja); font-weight: 600; line-height: 1.7; }
.cs-cmp-head { display: grid; gap: .75rem; margin: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }
.cs-cmp-title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.cs-cmp td, .cs-cmp thead th { vertical-align: top; }
@media (max-width: 699px) {
  .cs-cmp tbody tr { grid-template-columns: 1fr; }
}

/* 4 · Como funciona -------------------------------------------------------- */
.cs-proc { display: grid; gap: 1.25rem; }
.cs-proc__c { padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--linha); border-radius: 10px; background: var(--offwhite); min-width: 0; }
.cs-proc__tag { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cereja); }
.cs-proc__c h3 { margin: .4rem 0 1.25rem; font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.cs-steps { counter-reset: st; display: grid; gap: 0; position: relative; }
.cs-steps li {
  counter-increment: st; position: relative; padding: 0 0 1.1rem 2.75rem; color: var(--texto-suave); font-size: .96rem; line-height: 1.5;
}
.cs-steps li:last-child { padding-bottom: 0; }
.cs-steps li::before {
  content: counter(st); position: absolute; left: 0; top: -.1rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--cereja); background: var(--offwhite); color: var(--cereja);
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: .95rem; z-index: 1;
}
.cs-steps li::after { content: ""; position: absolute; left: .95rem; top: 1.85rem; bottom: -.1rem; width: 1.5px; background: var(--grafite); opacity: .25; }
.cs-steps li:last-child::after { display: none; }

/* 5 · Consultoria e execução (fundo vinho) --------------------------------- */
.cs-duo { display: grid; gap: 1rem; align-items: stretch; position: relative; }
.cs-duo__c { border-radius: 10px; padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: start; min-width: 0; }
.cs-duo__c--a { background: var(--offwhite); color: var(--grafite); }
.cs-duo__c--b { border: 1.5px dashed var(--rosa); color: var(--offwhite); }
.cs-duo__tag { justify-self: start; font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: .2rem .8rem; border-radius: var(--radius); }
.cs-duo__c--a .cs-duo__tag { background: var(--rosa); color: var(--grafite); }
.cs-duo__c--b .cs-duo__tag { border: 1px solid var(--rosa); color: var(--rosa); }
.cs-duo__ic { width: 3.25rem; height: 3.25rem; }
.cs-duo__c--a .cs-duo__ic { color: var(--cereja); }
.cs-duo__c--b .cs-duo__ic { color: var(--rosa); }
.cs-duo__c h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.cs-duo__c--a p:not(.cs-duo__tag) { color: var(--texto-suave); }
.cs-duo__c--b p:not(.cs-duo__tag) { color: rgba(246, 240, 233, .88); }
.cs-duo__links { padding-top: .9rem; border-top: 1px solid var(--linha-escura); font-size: .92rem; }
.cs-duo__links a, .cs-vs a { color: var(--offwhite); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cs-duo__links a:hover, .cs-vs a:hover { text-decoration-color: var(--offwhite); }
.cs-duo__plus { justify-self: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--cereja); color: var(--offwhite); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.cs-vs { margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--linha-escura); display: grid; gap: 1rem; }
.cs-vs__h { font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--rosa); }
.cs-vs__l { margin: 0; display: grid; gap: 1.25rem 2.5rem; }
.cs-vs__l dt { font-weight: 600; font-size: 1.05rem; color: var(--offwhite); }
.cs-vs__l dd { margin: .3rem 0 0; color: rgba(246, 240, 233, .85); font-size: .95rem; max-width: 30rem; }

/* 6 · FAQ ------------------------------------------------------------------ */
.faq--cs summary { transition: color .2s ease; }
.faq--cs summary:hover { color: var(--cereja); }
.faq--cs summary:focus-visible { outline: 3px solid var(--grafite); outline-offset: -3px; border-radius: 6px; }
.faq--cs details[open] > summary { color: var(--vinho); }
.faq--cs details[open] { background: rgba(231, 166, 180, .16); }
.faq--cs details > p { padding-left: 3.5rem; max-width: 44rem; }
@media (max-width: 599px) { .faq--cs details > p { padding-left: 0; } }

/* 7 · Chamada final ---------------------------------------------------------- */
.cs-final .final__title { max-width: 22ch; font-size: clamp(1.9rem, 4.6vw, 3.3rem); }
.cs-sign { margin-top: .5rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; opacity: .85; }

/* Telas maiores ------------------------------------------------------------- */
@media (min-width: 700px) {
  .cs-pils { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .cs-vs__l { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .cs-proc { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .cs-duo { grid-template-columns: 1fr auto 1fr; }
  .cs-duo__plus { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-quad li { animation: none !important; }
  .cs-quad li:nth-child(even) { transform: translateY(1.75rem); }
  .cs-quad__t, .faq--cs summary { transition: none; }
  .cs-quad__t:hover { transform: none; }
}