/* ==========================================================================
   LEVLI Agência — Página Planejamento Estratégico e Estratégias Comerciais
   Carregar DEPOIS de styles.css e servico.css. Só componentes específicos desta página
   (prefixo .ps-); reaproveita tokens, .svc, .tl, .faq, .notes, .final e .front__list.
   Não altera nenhuma regra global.
   ========================================================================== */

/* 1 · Abertura ------------------------------------------------------------ */
.ps-hero.hero--svc { padding-bottom: clamp(3rem, 7vw, 5rem); }
.ps-hero .hero__title { max-width: 19ch; }
.ps-hero .hero__lead + .hero__lead { margin-top: -.5rem; }

/* Caminho que se desenha ao carregar; sem movimento, aparece pronto */
.ps-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ps-draw 1.8s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.ps-nodes, .ps-flag { opacity: 0; animation: ps-pop .6s 1.6s ease forwards; }
@keyframes ps-draw { to { stroke-dashoffset: 0; } }
@keyframes ps-pop { to { opacity: 1; } }

/* 2 · Soluções ------------------------------------------------------------ */
.ps-sl { display: grid; gap: 1.25rem; }
.ps-card {
  display: grid; gap: 1.75rem 3rem; min-width: 0;
  padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: 10px;
  background: var(--offwhite); border: 1.5px solid var(--grafite);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ps-card > * { min-width: 0; }
.ps-card:nth-child(even) { background: rgba(231, 166, 180, .3); border-color: transparent; }
.ps-card:hover, .ps-card:focus-within { border-color: var(--cereja); box-shadow: 0 .75rem 2rem -1.25rem rgba(101, 21, 47, .5); }

.ps-card__lead { display: grid; gap: .9rem; align-content: start; }
.ps-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ps-card__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); }
.ps-card__ic { width: 3.75rem; height: 3.75rem; color: var(--cereja); flex: none; }
.ps-card__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.ps-card__aim { color: var(--texto-suave); max-width: 30rem; }
.ps-card__art { width: min(100%, 12.5rem); height: auto; margin-top: .75rem; color: var(--cereja); }
.ps-card__acc { fill: var(--rosa); stroke: none; }
.ps-card__fill { fill: var(--rosa); fill-opacity: .55; }
.ps-card__acc-s { stroke: var(--grafite); }
.ps-card__art * { transition: transform .4s ease; transform-box: fill-box; transform-origin: center; }
.ps-card:hover .ps-card__acc > * { transform: translateY(-3px); }

.ps-card__sub { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 .9rem; }
.ps-card__list { grid-template-columns: 1fr; font-size: .96rem; gap: .5rem 2rem; }
.ps-card__list li::before { background: var(--cereja); }
.ps-card__note { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); font-size: .92rem; color: var(--texto-suave); }
.ps-card__note strong { color: var(--grafite); font-weight: 600; }
.ps-card__cta { margin-top: 1.25rem; }
.ps-notes { margin-top: 2rem; }
.ps-notes li::before { background: var(--cereja); }

/* 3 · Contratação personalizada (fundo vinho) ----------------------------- */
.ps-pers { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: start; }
.ps-pers > * { min-width: 0; }
.ps-pers .svc__title { margin-top: 1.25rem; max-width: 17ch; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.ps-pers__text { display: grid; gap: 1.1rem; margin-top: 1.5rem; max-width: 36rem; color: rgba(246, 240, 233, .88); }
.ps-pers__text strong { color: var(--offwhite); font-weight: 600; }
.ps-pers__list { grid-template-columns: 1fr; gap: .6rem; font-size: .98rem; }
.ps-pers__list li::before { background: var(--rosa); }
.ps-pers__close { color: var(--offwhite); font-weight: 500; padding-top: 1.1rem; border-top: 1px solid var(--linha-escura); }
.ps-pers__cta { margin-top: 2rem; }

/* Módulos: ilustração estática de combinação (não é uma ferramenta) */
.ps-mod { margin: 0; display: grid; gap: 0; }
.ps-mod__tiles { position: relative; display: grid; gap: .75rem; padding-left: 2rem; }
.ps-mod__tiles::before { content: ""; position: absolute; left: .55rem; top: 1.5rem; bottom: -1.5rem; width: 1.5px; background: var(--rosa); opacity: .7; }
.ps-mod__t {
  position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: center;
  padding: .95rem 1.15rem; border-radius: 8px; font-weight: 500; line-height: 1.35;
  border: 1.5px dashed var(--linha-escura); color: rgba(246, 240, 233, .72);
}
.ps-mod__t::before { content: ""; position: absolute; left: -1.45rem; top: 50%; width: 1.45rem; height: 1.5px; background: var(--rosa); opacity: .7; }
.ps-mod__n { font-family: var(--font-display); font-style: italic; color: var(--rosa); }
.ps-mod__t.is-on { background: var(--rosa); border: 1.5px solid var(--rosa); color: var(--grafite); }
.ps-mod__t.is-on .ps-mod__n { color: var(--vinho); }
.has-reveal .ps-mod[data-reveal] .ps-mod__t { opacity: 0; transform: translateX(-10px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * 110ms + .15s); }
.has-reveal .ps-mod[data-reveal].is-in .ps-mod__t { opacity: 1; transform: none; }
.ps-mod__join { margin-top: 2.25rem; display: flex; padding-left: 2rem; position: relative; }
.ps-mod__join::before { content: ""; position: absolute; left: .55rem; top: -1.5rem; width: 1.45rem; height: 2.25rem; border-left: 1.5px solid var(--rosa); border-bottom: 1.5px solid var(--rosa); border-bottom-left-radius: 10px; opacity: .7; }
.ps-mod__join span { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--offwhite); padding: .55rem 1.5rem; border: 1.5px solid var(--rosa); border-radius: var(--radius); }
.ps-mod__cap { margin-top: 1.5rem; padding-left: 2rem; font-size: .88rem; color: rgba(246, 240, 233, .78); max-width: 30rem; }

/* 4 · Como funcionam (usa .tl e #como-funciona .split de servico.css) ------ */
.ps-nota { margin-top: 2rem; max-width: 36rem; font-size: .95rem; color: var(--texto-suave); border-left: 3px solid var(--rosa); padding-left: .9rem; }

/* 5 · Consultoria, planejamento e execução -------------------------------- */
.ps-tres { display: grid; gap: 1rem; }
.ps-tres__i {
  position: relative; display: grid; gap: .6rem; align-content: start; min-width: 0;
  background: var(--offwhite); border: 1px solid var(--linha); border-radius: 10px; padding: clamp(1.5rem, 3vw, 2rem);
}
.ps-tres__tag { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cereja); }
.ps-tres__i h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
.ps-tres__i p:not(.ps-tres__tag) { color: var(--texto-suave); font-size: .98rem; }
.ps-tres__i--aqui { background: var(--grafite); border-color: var(--grafite); color: var(--offwhite); }
.ps-tres__i--aqui .ps-tres__tag { color: var(--rosa); }
.ps-tres__i--aqui p:not(.ps-tres__tag) { color: var(--offwhite); opacity: .9; }
.ps-tres__links { padding-top: .9rem; border-top: 1px solid var(--linha); font-size: .92rem !important; }
.ps-tres__links a { color: var(--grafite); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ps-tres__links a:hover { text-decoration-color: var(--cereja); }

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

/* 7 · Chamada final ------------------------------------------------------- */
.ps-final .final__title { max-width: 20ch; font-size: clamp(2rem, 5vw, 3.6rem); }

/* Telas maiores ----------------------------------------------------------- */
@media (min-width: 700px) {
  .ps-card__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .ps-card { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
  .ps-pers { grid-template-columns: 1.05fr .95fr; }
  .ps-tres { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .ps-tres__i:not(:last-child)::after {
    content: "→"; content: "→" / ""; position: absolute; right: -1.15rem; top: 2rem; z-index: 1;
    width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%;
    background: var(--cereja); color: var(--offwhite); font-size: .8rem; line-height: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-draw { animation: none; stroke-dashoffset: 0; }
  .ps-nodes, .ps-flag { animation: none; opacity: 1; }
  .ps-card, .faq--ps summary { transition: none; }
  .ps-card__art * { transition: none; }
  .ps-card:hover .ps-card__acc > * { transform: none; }
}