/* Seções ricas das páginas de template: paleta, escala, blocos, princípios, entrega e FAQ. */

.tpl-sec{
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:32px;
  padding:56px 40px;border:1px solid var(--hairline);border-top:0;
}
.tpl-eyebrow{
  margin:4px 0 0;color:var(--mute);font:600 11px/1.4 var(--mono);
  text-transform:uppercase;letter-spacing:.09em;
}
.tpl-corpo h2{max-width:24ch;margin:0 0 26px;font:700 clamp(1.35rem,2.4vw,1.9rem)/1.3 var(--mono);letter-spacing:-.035em}
.tpl-corpo > ul{margin:0;padding:0;list-style:none}

.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.swatch{display:flex;flex-direction:column;padding:14px;border:1px solid var(--hairline);border-radius:4px}
.swatch-cor{display:block;height:56px;margin-bottom:12px;border:1px solid var(--hairline);border-radius:3px}
.swatch b{font:700 13px/1.3 var(--mono)}
.swatch small{margin-top:4px;color:var(--body);font-size:11.5px;line-height:1.5}
.swatch code{margin-top:10px;color:var(--mute);font:500 11px/1 var(--mono)}

.escala{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.escala li{padding:14px;border:1px solid var(--hairline);border-radius:4px}
.escala b{display:block;font:700 13px/1.3 var(--mono)}
.escala span{display:block;margin:6px 0 4px;font:700 20px/1.1 var(--mono);letter-spacing:-.03em}
.escala small{color:var(--body);font-size:11.5px;line-height:1.5}

.secoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.secoes li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:10px;padding:13px 14px;border:1px solid var(--hairline);border-radius:4px}
.secoes .num{color:var(--mute);font:600 11px/1.5 var(--mono)}
.secoes b{font:700 13px/1.35 var(--mono)}
.secoes small{display:block;margin-top:4px;color:var(--body);font-size:11.5px;line-height:1.55}

.tpl-escura{border-color:var(--dark);background:var(--dark);color:var(--on-dark)}
.tpl-escura .tpl-eyebrow{color:var(--on-dark-mute)}
.principios{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.principios h3{margin:0 0 8px;padding-top:12px;border-top:2px solid var(--acento,#fff);font:700 14px/1.35 var(--mono)}
.principios p{margin:0;color:var(--on-dark-mute);font-size:12.5px;line-height:1.6}

.pacote{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pacote li{padding:14px;border:1px solid var(--hairline);border-radius:4px;background:var(--soft)}
.pacote b{display:block;font:700 13px/1.35 var(--mono)}
.pacote small{display:block;margin-top:5px;color:var(--body);font-size:11.5px;line-height:1.55}
.ajuste{margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline)}
.ajuste p{margin:0 0 8px;color:var(--body);font-size:12.5px;line-height:1.65}
.ajuste b{color:var(--ink)}

.faq details{border-top:1px solid var(--hairline)}
.faq details:last-child{border-bottom:1px solid var(--hairline)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 2px;
  list-style:none;cursor:pointer;font:700 13.5px/1.4 var(--mono);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mute);font-weight:500}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 2px 16px;color:var(--body);font-size:12.5px;line-height:1.65;max-width:70ch}

@media (max-width:900px){
  .tpl-sec{grid-template-columns:1fr;gap:16px;padding:40px 24px}
  .tpl-corpo h2{margin-bottom:20px}
}
@media (max-width:520px){
  .tpl-sec{padding:32px 20px}
  .swatches,.escala,.secoes,.pacote,.principios{grid-template-columns:1fr}
}