/* Marca e Vem · Salão (carregado depois do marcaevem.css, só na página do salão). Revista de beleza: off-white e rosé,
   títulos em Fraunces, fotos em molduras de arco, cardápio de serviços com pontilhado, amostras de esmalte e um fio de cabelo
   que se desenha pela página (salao.js). Movimento de entrada do topo em CSS; paralaxe, agenda, anel e fio em salao.js.
   prefers-reduced-motion: reduce deixa tudo parado e completo. Contraste AA conferido em cada par de texto. */
body[data-tema="salao"] {
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --rose: #F3DDD6; --rose-forte: #E3A99A; --berry: #8E2F4F; --ouro: #C49A52; --ouro-texto: #8C6A2F;
  --papel: #FFFDFB; --filete: #E6D6CC; --grafite: #1B2A26;
}

/* Topo translúcido; abaixo de 480 px o botão do topo sai (o botão principal está logo abaixo) */
body[data-tema="salao"] .topo { background: rgba(251, 247, 244, .86); border-bottom-color: rgba(14, 59, 52, .08);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); }
@media (max-width: 479px) { body[data-tema="salao"] .topo .btn { display: none; } }

/* Títulos em Fraunces, só no conteúdo (o pop-up continua igual ao das outras páginas) */
body[data-tema="salao"] main :where(h1, h2, h3, h4) { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; }
body[data-tema="salao"] main :where(h2) { font-size: clamp(2.05rem, 5.4vw, 3.5rem); line-height: 1.05; text-wrap: balance; }
body[data-tema="salao"] main :where(h3, h4) { font-size: 1.3rem; line-height: 1.2; }
body[data-tema="salao"] main :where(h1, h2) em { font-weight: 500; }
body[data-tema="salao"] main { position: relative; }

/* ---------- Amostras de esmalte (decoração em camadas; paralaxe pelo data-speed) ---------- */
.sw { position: absolute; z-index: 0; display: block; width: var(--s); height: var(--s); border-radius: 50%; pointer-events: none;
  box-shadow: inset -4px -6px 12px rgba(0, 0, 0, .2), 0 14px 26px -14px rgba(14, 59, 52, .55); }
.sw::after { content: ""; position: absolute; left: 20%; top: 13%; width: 36%; height: 24%; border-radius: 50%;
  background: rgba(255, 255, 255, .6); transform: rotate(-24deg); filter: blur(1px); }
.sw-rose { background: radial-gradient(circle at 35% 30%, #F8DCD3, #E3A99A 58%, #C98C80); }
.sw-berry { background: radial-gradient(circle at 35% 30%, #B8557D, #8E2F4F 58%, #651C37); }
.sw-ouro { background: radial-gradient(circle at 35% 30%, #F2DDAA, #C49A52 58%, #9A7232); }
.sw-verde { background: radial-gradient(circle at 35% 30%, #45A27F, #1F7A5C 55%, #0E3B34); }
.sw-longe { filter: blur(3px); opacity: .55; }
@media (max-width: 767px) { .sw { scale: .66; } }
/* Amostras nunca passam sobre texto: as de margem (.sw-g) ficam centradas na faixa fora da coluna de conteúdo
   (largura (100% - 1160px) / 2 + 20px) e só aparecem quando cabem nela; as do topo ficam dentro da composição de fotos. */
.sl-arcos .sw { z-index: 2; }
.sw-g { display: none; }
@media (min-width: 1280px) {
  .sw-g { display: block; }
  .sw-g.sw-esq { left: calc((100% - 1160px) / 4 + 10px - var(--s) / 2); }
  .sw-g.sw-dir { right: calc((100% - 1160px) / 4 + 10px - var(--s) / 2); }
  .sw-g.sw-xl { display: none; }
}
@media (min-width: 1440px) { .sw-g.sw-xl { display: block; } }

/* ---------- Topo editorial: título grande à esquerda, fotos em arco à direita ---------- */
.sl-hero { position: relative; overflow: clip; padding: 32px 0 80px; }
.sl-hero-in { position: relative; z-index: 1; display: grid; gap: 44px; align-items: center; }
main .sl-hero h1 { margin: 4px 0 22px; font-size: clamp(2.75rem, 11.6vw, 5.2rem); line-height: .98; letter-spacing: -0.032em; }
main .sl-hero h1 em { position: relative; font-weight: 500; letter-spacing: -0.02em; }
main .sl-hero h1 em::after { content: ""; position: absolute; left: 1%; right: -3%; bottom: -.1em; height: .2em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16C58 7 118 4 170 9s92 9 126-3' fill='none' stroke='%23C49A52' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.sl-hero .lead { max-width: 46ch; margin: 0; }
.sl-hero .acoes { margin-top: 28px; }
.sl-hero-selo { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; }
.sl-hero-selo::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px;
  border-radius: 50%; background: #C8F169; color: #0E3B34; font-weight: 800; font-size: .75rem; }

.sl-arcos { position: relative; width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 1 / 1.04; }
.arco { position: absolute; margin: 0; overflow: hidden; background: var(--rose); box-shadow: 0 34px 60px -34px rgba(14, 59, 52, .45); }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.arco-g { right: 3%; top: 2%; width: 63%; height: 88%; border-radius: 999px 999px 22px 22px; }
.arco-g img { object-position: 57% 50%; }
.arco-c { left: 0; top: 6%; width: 33%; height: 40%; border-radius: 999px 999px 14px 14px; border: 6px solid var(--fundo); }
.arco-c img { object-position: 47% 62%; }
.arco-m { left: 9%; bottom: 0; width: 36%; height: 40%; border-radius: 999px; border: 6px solid var(--fundo); }
.arco-m img { object-position: 46% 60%; }
.sl-arco-linha { position: absolute; right: 0; top: -2%; width: 63%; height: 88%; border: 1.5px solid var(--ouro);
  border-radius: 999px 999px 22px 22px; opacity: .8; }
.sl-selo { position: absolute; z-index: 3; right: 0; bottom: 2%; max-width: calc(100% - 24px); font-size: .82rem; line-height: 1.3;
  border-radius: 18px; padding-top: 6px; padding-bottom: 6px; box-shadow: 0 18px 30px -16px rgba(14, 59, 52, .45); }
@media (min-width: 768px) {
  .sl-hero .acoes .btn { flex: 0 1 auto; }
  .sl-selo { font-size: .88rem; }
}
@media (min-width: 960px) {
  .sl-hero { display: flex; align-items: center; min-height: calc(100svh - 64px); padding: 40px 0 96px; }
  .sl-hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
  main .sl-hero h1 { font-size: clamp(3.4rem, min(6.2vw, 10.6vh), 5.6rem); }
  .sl-arcos { margin-right: 0; max-height: calc(100svh - 190px); max-width: min(540px, calc((100svh - 190px) / 1.04)); }
  .sl-selo { white-space: nowrap; right: -8px; max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .arco img { animation: sl-revela 1.3s cubic-bezier(.2, .7, .2, 1) both; }
  .arco-c img { animation-delay: .18s; }
  .arco-m img { animation-delay: .34s; }
  .sl-arco-linha { animation: sl-surge 1.2s .7s both; }
  .sl-selo { animation: sl-pousa .7s 1.15s cubic-bezier(.3, 1.4, .5, 1) both; }
  main .sl-hero h1 em::after { animation: sl-traco 1.1s .45s cubic-bezier(.6, 0, .2, 1) both; }
}
@keyframes sl-revela { from { clip-path: inset(100% 0 0 0); transform: scale(1.16); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes sl-surge { from { opacity: 0; transform: translate(-14px, 14px); } }
@keyframes sl-pousa { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes sl-traco { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Dores: citações de revista ---------- */
.sl-dores { position: relative; overflow: clip; padding: 80px 0; background: var(--rose); }
.sl-dores > .wrap { position: relative; z-index: 1; }
.sl-dores-cab { max-width: 900px; margin-bottom: 44px; }
.sl-dores-cab h2 em { display: block; }
.sl-dores-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; counter-reset: dor; }
.sl-dores-lista li { position: relative; padding: 24px 0 26px 30px; border-top: 1px solid rgba(14, 59, 52, .16); }
.sl-dores-lista li::before { content: ""; position: absolute; left: 0; top: 32px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--rose-forte); box-shadow: inset -2px -3px 4px rgba(0, 0, 0, .18); }
.sl-dores-lista li:nth-child(2)::before { background: var(--berry); }
.sl-dores-lista li:nth-child(3)::before { background: var(--ouro); }
.sl-dores-lista li:nth-child(4)::before { background: #1F7A5C; }
main .sl-dores-lista h3 { margin: 0 0 8px; font-style: italic; font-size: clamp(1.35rem, 2.3vw, 1.7rem); line-height: 1.18; }
.sl-dores-lista p { margin: 0; }
@media (min-width: 720px) { .sl-dores-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .sl-dores { padding: 104px 0; }
  .sl-dores-lista { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 44px; }
  .sl-dores-lista li { grid-column: span 2; }
  .sl-dores-lista li:nth-child(2) { margin-top: 48px; }
  .sl-dores-lista li:nth-child(3) { margin-top: 96px; }
  .sl-dores-lista li:nth-child(4) { grid-column: 2 / span 2; }
  .sl-dores-lista li:nth-child(5) { grid-column: 4 / span 2; margin-top: 48px; }
}

/* ---------- Uma quinta-feira: horas em itálico, cardápio do salão e agenda que se arruma ---------- */
.sl-dia { position: relative; padding: 80px 0; }
.sl-dia-cab { max-width: 760px; margin-bottom: 36px; }
.sl-dia-linha { display: grid; gap: 40px; align-items: center; }
.sl-dia-linha + .sl-dia-linha { margin-top: 56px; }
.sl-horas { list-style: none; margin: 0; padding: 0; }
.sl-horas li { display: grid; gap: 2px 24px; padding: 20px 0; border-top: 1px solid var(--filete); }
.sl-horas li:last-child { border-bottom: 1px solid var(--filete); }
.sl-hora { font: italic 500 clamp(1.9rem, 3.4vw, 2.5rem)/1.05 var(--serif); letter-spacing: -0.02em; color: var(--ouro-texto); }
.sl-horas p { margin: 0; font-size: 1.05rem; }
@media (min-width: 480px) { .sl-horas li { grid-template-columns: 150px 1fr; align-items: baseline; } }
/* Caixa do dia das 20h: os valores fecham com a agenda de quinta e a tabela do Studio Bela (comissão de 40%) */
.sl-caixa { display: grid; gap: 4px; max-width: 300px; margin-top: 14px; padding: 16px 18px; background: var(--papel); color: var(--grafite);
  border: 1px solid var(--filete); border-radius: 16px; font-size: .9rem; box-shadow: 0 30px 50px -36px rgba(14, 59, 52, .5); }
.sl-caixa b { margin-bottom: 4px; font: 500 1.15rem var(--serif); color: var(--verde); }
.sl-caixa span { display: flex; justify-content: space-between; gap: 12px; }
.sl-caixa i { font: 500 1rem var(--serif); color: var(--verde); font-variant-numeric: tabular-nums; }
.sl-caixa-com { margin-top: 6px; padding-top: 8px; border-top: 1px dashed #C9B5A8; }
@media (min-width: 480px) { .sl-caixa { grid-column: 2; } }
@media (min-width: 960px) {
  .sl-dia { padding: 104px 0; }
  .sl-dia-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .sl-dia-linha-2 { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .sl-dia-linha + .sl-dia-linha { margin-top: 88px; }
}

.sl-nota { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ouro-texto); }
.sl-nota::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sl-menu { position: relative; width: 100%; max-width: 440px; margin: 0 auto; }
/* Print real (rodada 3): a página do Studio Bela no celular, numa moldura de papel com filete, como as molduras de arco */
.sl-cel { position: relative; width: min(300px, 86%); margin: 0 auto; padding: 22px 10px 10px; background: var(--papel);
  border: 1px solid var(--filete); border-radius: 46px; box-shadow: 0 1px 0 #fff inset, 0 40px 70px -44px rgba(14, 59, 52, .5); }
.sl-cel::before { content: ""; position: absolute; left: 50%; top: 9px; width: 56px; height: 4px; margin-left: -28px; border-radius: 2px; background: var(--filete); }
.sl-cel img { display: block; width: 100%; height: auto; border-radius: 34px; }
.sl-print figcaption { margin-top: 14px; font-size: .78rem; line-height: 1.35; color: #5B6B66; text-align: center; }
.sl-zap { position: relative; z-index: 2; width: min(330px, 92%); margin: 22px 0 0; padding: 10px 14px 8px; background: #FFFFFF;
  color: var(--grafite); border-radius: 4px 16px 16px 16px; font-size: .86rem; line-height: 1.42;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 24px 40px -22px rgba(14, 59, 52, .5); }
.sl-zap-cab { display: block; margin-bottom: 4px; font-size: .74rem; font-weight: 700; color: #1F7A5C; }
.sl-zap p { margin: 0; }
.sl-zap-hora { display: block; margin-top: 2px; font-size: .7rem; color: #5B6B66; text-align: right; }
@media (min-width: 480px) { .sl-zap { margin-left: 174px; width: min(330px, calc(100% - 174px)); } }

.sl-agenda { --linha-h: 46px; position: relative; padding: 22px 18px 24px; background: var(--papel); border: 1px solid var(--filete);
  border-radius: 22px; box-shadow: 0 40px 70px -44px rgba(14, 59, 52, .5); }
main .sl-agenda h3 { margin: 0 0 14px; font-size: 1.35rem; }
.sl-ag { display: grid; grid-template-columns: 34px repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.sl-ag-horas { display: grid; grid-auto-rows: var(--linha-h); height: calc(8 * var(--linha-h)); margin-top: 44px; font-size: .72rem;
  color: #5B6B66; font-variant-numeric: tabular-nums; }
.sl-ag-horas span { line-height: 1; transform: translateY(-.5em); }
.sl-ag-prof { display: flex; align-items: center; gap: 8px; height: 44px; font: 600 .9rem var(--fonte-texto); color: var(--verde); }
.av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  font: italic 500 .85rem var(--serif); }
.av-rose { background: var(--rose); color: var(--verde); }
.av-berry { background: var(--berry); color: #FBF7F4; }
.av-ouro { background: #EBD6AC; color: var(--verde); }
.sl-ag-pista { position: relative; height: calc(8 * var(--linha-h)); border-radius: 10px; background-color: #FBF7F4;
  background-image: repeating-linear-gradient(180deg, var(--filete) 0 1px, transparent 1px var(--linha-h)); }
.sl-ag-vaga, .sl-ag-slot { position: absolute; left: 3px; right: 3px; top: calc(var(--ini) * var(--linha-h) + 3px);
  min-height: calc(var(--dur) * var(--linha-h) - 6px); border-radius: 10px; }
.sl-ag-vaga { border: 1.5px dashed #D6BFB3; }
.sl-ag-slot { z-index: 1; padding: 6px 8px; background: #FBEDE8; color: var(--grafite); border-left: 3px solid #C98C80;
  font-size: .8rem; line-height: 1.3; box-shadow: 0 10px 18px -12px rgba(14, 59, 52, .45); }
.sl-ag-slot .agenda-hora { display: block; }
.sl-ag-slot .etiqueta { display: inline-block; margin-top: 4px; font-size: .7rem; padding: 1px 8px; }
.sl-ag-slot-b { background: #F6E5EC; border-left-color: var(--berry); }
.sl-ag-slot-o { background: #F7EEDC; border-left-color: var(--ouro); }
@media (max-width: 479px) {
  .sl-agenda { --linha-h: 44px; padding: 18px 12px 20px; }
  .sl-ag { grid-template-columns: 28px repeat(3, minmax(0, 1fr)); gap: 0 5px; }
  .sl-ag-prof { gap: 5px; font-size: .82rem; }
  .av { width: 22px; height: 22px; font-size: .75rem; }
  .sl-ag-slot { padding: 5px 6px; font-size: .72rem; }
}

/* ---------- Recursos: índice de revista e o anel do ciclo de manutenção ---------- */
.sl-rec { position: relative; overflow: clip; padding: 80px 0; background: var(--rose); }
.sl-rec-in { position: relative; z-index: 1; display: grid; gap: 40px; }
.sl-rec-lado h2 { margin-bottom: 32px; }
.sl-rec-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 36px; }
.sl-rec-lista li { position: relative; padding: 20px 0 22px 26px; border-top: 1px solid rgba(14, 59, 52, .16); }
.sl-rec-lista li::before { content: ""; position: absolute; left: 0; top: 27px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--rose-forte); box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .18); }
.sl-rec-lista li:nth-child(4n+2)::before { background: var(--berry); }
.sl-rec-lista li:nth-child(4n+3)::before { background: var(--ouro); }
.sl-rec-lista li:nth-child(4n+4)::before { background: #1F7A5C; }
main .sl-rec-lista h3 { margin: 0 0 6px; }
.sl-rec-lista p { margin: 0; }
@media (min-width: 720px) { .sl-rec-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .sl-rec { padding: 104px 0; }
  .sl-rec-in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
}

.sl-ciclo { position: relative; width: min(340px, 86%); aspect-ratio: 1; margin: 0 auto; }
.sl-ciclo-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sl-ciclo-trilho { fill: rgba(255, 253, 251, .55); stroke: #E2C3B8; stroke-width: 10; }
.sl-ciclo-dias { fill: none; stroke: var(--ouro); stroke-width: 7; stroke-dasharray: 1.6 28.98; opacity: .9; }
.sl-ciclo-arco { fill: none; stroke: var(--verde); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100 100;
  transform: rotate(-90deg); transform-origin: 160px 160px; }
.sl-ciclo-ponto circle { fill: var(--berry); stroke: #FBF7F4; stroke-width: 3; }
.sl-ciclo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--verde); }
.sl-ciclo-centro em { font: italic 500 clamp(2rem, 6vw, 2.6rem)/1 var(--serif); letter-spacing: -0.02em; }
.sl-ciclo-centro span { margin-top: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sl-ciclo-et { position: absolute; padding: 4px 12px; border-radius: 999px; background: var(--papel); color: var(--verde);
  font-size: .8rem; font-weight: 600; box-shadow: 0 8px 18px -10px rgba(14, 59, 52, .5); white-space: nowrap; }
.sl-ciclo-et.e1 { left: -2%; top: 10%; }
.sl-ciclo-et.e2 { right: -2%; top: 14%; }
.sl-ciclo-et.e3 { right: -8%; bottom: 20%; }
.sl-ciclo-et.e4 { left: -4%; bottom: 24%; }
.sl-ciclo-msg { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; background: var(--verde); color: #FBF7F4; font-size: .8rem; font-weight: 600; white-space: nowrap;
  transition: background .3s, color .3s; }
.sl-ciclo-msg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C8F169; }
.sl-ciclo.espera .sl-ciclo-msg { background: var(--papel); color: #4E5A56; }
.sl-ciclo.espera .sl-ciclo-msg::before { background: #C9B5A8; }

/* ---------- Por que: janela em arco com a foto do salão ---------- */
.sl-porque { position: relative; padding: 80px 0; }
.sl-porque-in { display: grid; gap: 44px; align-items: center; }
.sl-janela { position: relative; overflow: hidden; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 4 / 5;
  border-radius: 999px 999px 24px 24px; background: var(--rose); box-shadow: 0 40px 70px -40px rgba(14, 59, 52, .55); }
.sl-janela img { width: 100%; height: 124%; margin-top: -12%; object-fit: cover; object-position: 50% 50%; }
.sl-porque-txt h2 { margin-bottom: 28px; }
.sl-porque-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 36px; counter-reset: pq; }
.sl-porque-lista li { counter-increment: pq; padding: 18px 0 20px; border-top: 1px solid var(--filete); }
.sl-porque-lista li::before { content: counter(pq, lower-roman) "."; display: block; margin-bottom: 4px;
  font: italic 500 1.5rem/1 var(--serif); color: var(--ouro-texto); }
main .sl-porque-lista h3 { margin: 0 0 6px; }
.sl-porque-lista p { margin: 0; }
@media (min-width: 720px) { .sl-porque-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .sl-porque { padding: 104px 0; }
  .sl-porque-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
}

/* ---------- Planos e perguntas: mesma estrutura, tipografia da revista ---------- */
body[data-tema="salao"] .plano { border-radius: 22px; }
body[data-tema="salao"] .plano .preco { font: 500 2.6rem/1.05 var(--serif); letter-spacing: -0.02em; }
body[data-tema="salao"] main .faq summary { font: 500 1.15rem/1.3 var(--serif); }

/* ---------- Fechamento ---------- */
.sl-fecha { position: relative; overflow: clip; padding: 96px 0; }
.sl-fecha > .wrap { position: relative; z-index: 1; }
main .sl-fecha h2 { max-width: 16ch; margin: 0 auto 8px; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.04; color: #FBF7F4; }
body[data-tema="salao"] .sl-fecha h2 em { color: var(--rose); }
.sl-fecha-arco { position: absolute; left: 50%; top: 28px; bottom: -30%; width: min(620px, 84vw); transform: translateX(-50%);
  border: 1.5px solid rgba(243, 221, 214, .22); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }
@media (min-width: 960px) { .sl-fecha { padding: 128px 0; } }

/* ---------- Fio de cabelo (salao.js): marcador de progresso que passa pelas margens e entre as seções ---------- */
.sl-fio { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; overflow: visible; }
.sl-fio path { fill: none; stroke: url(#sl-fio-cor); stroke-linecap: round; }
.sl-fio .fa { stroke-width: 1.8; }
.sl-fio .fb { stroke-width: 1.1; opacity: .6; }
.sl-fio-halo { fill: rgba(196, 154, 82, .2); }
.sl-fio-perola { fill: #FFFDFB; stroke: var(--ouro-texto); stroke-width: 2; }
/* Mechas curtas: só abaixo de 1232 px (onde o fio longo não cabe na margem), no alto das seções claras, no fluxo.
   Paradas já desenhadas; com movimento, salao.js desenha o traço com a rolagem quando a mecha entra na tela. */
.sl-mecha { display: flex; justify-content: center; margin: -40px 0 24px; pointer-events: none; }
.sl-mecha svg { display: block; width: 200px; height: auto; overflow: visible; }
.sl-mecha path { fill: none; stroke: var(--ouro-texto); stroke-linecap: round; }
.sl-mecha .ma { stroke-width: 1.8; }
.sl-mecha .mb { stroke-width: 1.1; opacity: .55; }
@media (min-width: 1232px) { .sl-mecha { display: none; } }
/* No celular e em telas sem margem, o fio corre na borda de baixo do topo fixo (nunca por cima do texto) */
.sl-fio-topo { position: absolute; left: 0; right: 0; bottom: 1px; width: 100%; height: 6px; pointer-events: none; overflow: visible; }
.sl-fio-topo path { fill: none; stroke: var(--ouro); stroke-width: 1.6; stroke-linecap: round; }