/* =====================================================================
   SELAH — folha de componentes do site
   Usa os tokens do design system (tokens.css). Prefixo: .s-
   Mobile-first. Dois temas: [data-theme="dia"] (padrão) e [data-theme="noite"].
   ===================================================================== */

:root{
  --dur-micro:160ms;          /* hover, foco */
  --dur-entrada:520ms;        /* elementos entrando na tela */
  --dur-respiro:6s;           /* ciclo de respiração da marca */
  --curva-suave:cubic-bezier(.4,0,.2,1);
  --curva-respira:cubic-bezier(.45,0,.55,1);
  --container:1120px;
}

/* ---------- Base ---------- */
.s-base{background:var(--fundo);color:var(--tinta);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.s-base *{box-sizing:border-box}
.s-base :focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:var(--raio-sm)}
.s-base a:where(:not([class])){color:var(--marca);text-underline-offset:3px;text-decoration-thickness:1.5px}
.s-base a:where(:not([class])):hover{color:var(--marca-forte)}

/* ---------- Layout ---------- */
.s-container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--espaco-4)}
.s-secao{padding:var(--espaco-16) 0}
.s-grid{display:grid;gap:var(--espaco-6);grid-template-columns:1fr}
@media (min-width:768px){
  .s-container{padding:0 var(--espaco-8)}
  .s-grid-2{grid-template-columns:repeat(2,1fr)}
  .s-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .s-container{padding:0 var(--espaco-12)}
  .s-secao{padding:var(--espaco-24) 0}
  .s-grid-3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Texturas e elementos ---------- */
.s-cotele{background-color:var(--orig-vinho);background-image:repeating-linear-gradient(90deg,rgba(30,4,4,.30) 0 1.5px,rgba(255,255,255,.035) 1.5px 3px,transparent 3px 5px);color:#FFF6E1}
.s-linho{background-color:var(--orig-linho);background-image:repeating-linear-gradient(0deg,rgba(80,60,30,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(80,60,30,.06) 0 1px,transparent 1px 3px)}
.s-feltro{background-color:var(--orig-oliva);background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px),radial-gradient(rgba(0,0,0,.08) 1px,transparent 1.2px);background-size:4px 4px,5px 5px;background-position:0 0,2px 3px;color:#FFF6E1}
.s-fundo-tecido{background-color:var(--fundo);background-image:repeating-linear-gradient(0deg,rgba(80,60,30,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(80,60,30,.06) 0 1px,transparent 1px 3px)}
[data-theme="noite"] .s-fundo-tecido{background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 1.5px,rgba(255,255,255,.03) 1.5px 3px,transparent 3px 5px)}
.s-pesponto{position:relative}
.s-pesponto::after{content:"";position:absolute;inset:8px;border:1.5px dashed var(--vinho-600);border-radius:calc(var(--raio-lg) - 8px);pointer-events:none;opacity:.75}
[data-theme="noite"] .s-pesponto::after{border-color:var(--vinho-300)}
.s-fresta{display:flex;align-items:center;gap:0;width:120px;color:var(--marca)}
.s-fresta::before,.s-fresta::after{content:"";height:2px;border-radius:2px;background:currentColor}
.s-fresta::before{flex:0 0 62%}
.s-fresta::after{flex:0 0 24%;margin-left:14%}
.s-rotulo{font:700 12px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acento-texto)}

/* ---------- Botões ---------- */
.s-botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--espaco-2);min-height:48px;padding:0 var(--espaco-6);border-radius:var(--raio-pilula);border:1.5px solid transparent;font:700 15px/1 var(--font-sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background var(--dur-micro) var(--curva-suave),box-shadow var(--dur-micro) var(--curva-suave),transform var(--dur-micro) var(--curva-suave)}
.s-botao svg{width:20px;height:20px}
.s-botao--primario{background:var(--marca);color:var(--sobre-marca);box-shadow:var(--almofada-1)}
.s-botao--primario:hover{background:var(--marca-forte);color:var(--sobre-marca);box-shadow:var(--almofada-2)}
.s-botao--primario:active{transform:translateY(1px);box-shadow:var(--almofada-1)}
.s-botao--secundario{background:transparent;color:var(--marca);border-color:var(--marca)}
.s-botao--secundario:hover{background:var(--superficie-creme);color:var(--marca-forte)}
.s-botao--suave{background:var(--superficie-creme);color:var(--tinta)}
.s-botao--suave:hover{background:var(--superficie)}
.s-botao--apoio{background:var(--apoio);color:var(--sobre-apoio)}
.s-botao--p{min-height:40px;padding:0 var(--espaco-4);font-size:14px}
.s-botao--g{min-height:56px;padding:0 var(--espaco-8);font-size:16px}
.s-botao[disabled],.s-botao[aria-disabled="true"]{opacity:var(--opac-desabilitado);cursor:not-allowed;box-shadow:none}
.s-botao--bloco{width:100%}

/* ---------- Etiquetas e chips ---------- */
.s-etiqueta{display:inline-flex;align-items:center;gap:6px;padding:4px var(--espaco-3);border-radius:var(--raio-sm);background:var(--superficie-creme);color:var(--tinta);font:700 11px/1.4 var(--font-sans);letter-spacing:.1em;text-transform:uppercase}
.s-etiqueta--marca{background:var(--marca);color:var(--sobre-marca)}
.s-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--espaco-4);border-radius:var(--raio-pilula);border:1.5px solid var(--borda-campo);background:var(--fundo);color:var(--tinta);font:500 14px/1 var(--font-sans);cursor:pointer}
.s-chip input{position:absolute;opacity:0;pointer-events:none}
.s-chip:has(input:checked){background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.s-chip:has(input:focus-visible){outline:3px solid var(--foco);outline-offset:2px}

/* ---------- Cartões ---------- */
.s-cartao{background:var(--superficie);border-radius:var(--raio-lg);padding:var(--espaco-6);box-shadow:var(--almofada-1)}
.s-encontro{display:grid;gap:var(--espaco-4);background:var(--superficie);border-radius:var(--raio-lg);padding:var(--espaco-6);box-shadow:var(--almofada-1);transition:box-shadow var(--dur-micro) var(--curva-suave),transform var(--dur-micro) var(--curva-suave)}
.s-encontro:hover{box-shadow:var(--almofada-2);transform:translateY(-2px)}
.s-encontro__data{display:flex;align-items:baseline;gap:var(--espaco-3)}
.s-encontro__dia{font:400 56px/1 var(--font-serif);color:var(--marca)}
.s-encontro__mes{font:700 13px/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.s-encontro__tema{font:400 26px/1.15 var(--font-serif);color:var(--tinta);margin:0}
.s-encontro__meta{display:flex;flex-wrap:wrap;gap:var(--espaco-2) var(--espaco-4);font:500 14px/1.4 var(--font-sans);color:var(--tinta-suave)}
.s-encontro__meta span{display:inline-flex;align-items:center;gap:6px}
.s-encontro__meta svg{width:18px;height:18px}
.s-encontro--destaque{background:var(--marca);color:var(--sobre-marca)}
.s-encontro--destaque .s-encontro__dia,.s-encontro--destaque .s-encontro__tema{color:var(--sobre-marca)}
.s-encontro--destaque .s-encontro__mes,.s-encontro--destaque .s-encontro__meta{color:var(--sobre-marca);opacity:.85}
.s-encontro--passado{opacity:.75}

.s-tema{display:grid;grid-template-columns:72px 1fr;gap:var(--espaco-4);align-items:center;background:var(--superficie-creme);border-radius:var(--raio-lg);padding:var(--espaco-4)}
.s-tema__foto{width:72px;height:72px;border-radius:var(--raio-pilula);background:var(--superficie);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--marca)}
.s-tema__nome{font:700 16px/1.3 var(--font-sans);margin:0;color:var(--tinta)}
.s-tema__papel{font:500 13px/1.4 var(--font-sans);color:var(--tinta-suave);margin:2px 0 0}

/* ---------- Contador ---------- */
.s-contador{display:flex;gap:var(--espaco-3);justify-content:center}
.s-contador__item{min-width:72px;padding:var(--espaco-3) var(--espaco-2);border-radius:var(--raio-md);background:rgba(255,246,225,.10);text-align:center}
.s-contador__num{display:block;font:400 40px/1 var(--font-serif);font-variant-numeric:tabular-nums}
.s-contador__rot{display:block;margin-top:6px;font:700 10px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
@media (min-width:768px){.s-contador__item{min-width:96px}.s-contador__num{font-size:52px}}

/* ---------- Respiro (animação da marca) ---------- */
@keyframes s-respira{0%,100%{transform:scale(1);opacity:.55}45%{transform:scale(1.18);opacity:.95}}
.s-respiro{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.s-respiro::before{content:"";position:absolute;inset:0;border:1.5px solid var(--acento);border-radius:50%;animation:s-respira var(--dur-respiro) var(--curva-respira) infinite}

/* ---------- Formulários ---------- */
.s-form{display:grid;gap:var(--espaco-6)}
.s-campo{display:grid;gap:var(--espaco-2)}
.s-campo__rotulo{font:700 14px/1.3 var(--font-sans);color:var(--tinta)}
.s-campo__ajuda{font:500 13px/1.45 var(--font-sans);color:var(--tinta-suave)}
.s-campo__erro{font:600 13px/1.4 var(--font-sans);color:var(--marca-forte)}
.s-input,.s-select,.s-textarea{width:100%;min-height:48px;padding:12px var(--espaco-4);border:1.5px solid var(--borda-campo);border-radius:var(--raio-md);background:var(--fundo);color:var(--tinta);font:400 16px/1.4 var(--font-sans);box-shadow:var(--almofada-1);transition:border-color var(--dur-micro),box-shadow var(--dur-micro)}
.s-textarea{min-height:120px;resize:vertical}
.s-input::placeholder,.s-textarea::placeholder{color:var(--tinta-suave);opacity:.8}
.s-input:focus,.s-select:focus,.s-textarea:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px var(--superficie-creme),var(--almofada-1)}
.s-input[aria-invalid="true"]{border-color:var(--marca-forte);border-width:2px}
.s-opcoes{display:grid;gap:var(--espaco-2)}
.s-opcao{display:flex;gap:var(--espaco-3);align-items:flex-start;padding:var(--espaco-4);border:1.5px solid var(--borda);border-radius:var(--raio-md);background:var(--fundo);cursor:pointer;transition:border-color var(--dur-micro),background var(--dur-micro)}
.s-opcao input{margin-top:3px;width:20px;height:20px;accent-color:var(--marca);flex:none}
.s-opcao:has(input:checked){border-color:var(--marca);background:var(--superficie-creme)}
.s-opcao__titulo{display:block;font:700 15px/1.3 var(--font-sans)}
.s-opcao__desc{display:block;font:500 13px/1.45 var(--font-sans);color:var(--tinta-suave);margin-top:2px}
.s-consentimento{padding:var(--espaco-4);border-radius:var(--raio-md);background:var(--superficie-creme);font:500 13px/1.5 var(--font-sans);color:var(--tinta)}
.s-consentimento label{display:flex;gap:var(--espaco-3);align-items:flex-start}
.s-consentimento input{width:20px;height:20px;accent-color:var(--marca);flex:none;margin-top:1px}
.s-fieldset{border:0;padding:0;margin:0;display:grid;gap:var(--espaco-3)}
.s-fieldset legend{font:700 14px/1.3 var(--font-sans);margin-bottom:var(--espaco-2);padding:0}
.s-bloco-responsavel{display:grid;gap:var(--espaco-4);padding:var(--espaco-4);border-radius:var(--raio-md);border:1.5px dashed var(--acento)}

/* ---------- FAQ (acordeão nativo) ---------- */
.s-faq{display:grid;gap:var(--espaco-3)}
.s-faq details{background:var(--superficie);border-radius:var(--raio-md);padding:0 var(--espaco-4)}
.s-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--espaco-4);min-height:56px;padding:var(--espaco-3) 0;font:700 16px/1.35 var(--font-sans);cursor:pointer;color:var(--tinta)}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--marca);border-bottom:2px solid var(--marca);transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-micro) var(--curva-suave)}
.s-faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.s-faq details p{margin:0;padding:0 0 var(--espaco-4);color:var(--tinta-suave)}

/* ---------- Depoimento ---------- */
.s-depoimento{position:relative;background:var(--superficie-creme);border-radius:var(--raio-lg);padding:var(--espaco-8) var(--espaco-6) var(--espaco-6)}
.s-depoimento__texto{font:400 22px/1.35 var(--font-serif);color:var(--tinta);margin:0}
.s-depoimento__autor{margin-top:var(--espaco-4);font:700 13px/1.3 var(--font-sans);letter-spacing:.06em;color:var(--acento-texto)}
.s-depoimento::before{content:"“";position:absolute;top:-6px;left:var(--espaco-6);font:400 80px/1 var(--font-serif);color:var(--acento)}

/* ---------- Galeria ---------- */
.s-galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--espaco-2)}
.s-galeria figure{margin:0;position:relative;aspect-ratio:4/5;border-radius:var(--raio-md);overflow:hidden;background:var(--superficie)}
.s-galeria figure:nth-child(3n+1){aspect-ratio:1/1}
.s-galeria img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) sepia(.08)}
.s-galeria figcaption{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:var(--raio-sm);background:rgba(62,17,16,.7);color:#FFF6E1;font:600 11px/1.6 var(--font-sans)}
@media (min-width:768px){.s-galeria{grid-template-columns:repeat(3,1fr);gap:var(--espaco-3)}}

/* ---------- Navegação ---------- */
.s-nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--fundo) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--borda)}
.s-nav__barra{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.s-nav__logo img{height:44px;display:block}
.s-nav__links{display:none;gap:var(--espaco-6);list-style:none;margin:0;padding:0}
.s-nav__links a{color:var(--tinta);text-decoration:none;font:600 15px/1 var(--font-sans);padding:var(--espaco-2) 0;border-bottom:2px solid transparent}
.s-nav__links a:hover,.s-nav__links a[aria-current="page"]{color:var(--marca);border-bottom-color:var(--marca)}
.s-nav__menu{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:var(--raio-pilula);background:var(--superficie-creme);color:var(--tinta);cursor:pointer}
.s-nav__acao{display:none}
@media (min-width:1024px){.s-nav__links,.s-nav__acao{display:flex}.s-nav__menu{display:none}}

/* ---------- Rodapé ---------- */
.s-rodape{padding:var(--espaco-16) 0 var(--espaco-8)}
.s-rodape__grade{display:grid;gap:var(--espaco-8);grid-template-columns:1fr}
.s-rodape h4,.s-rodape .s-rodape__titulo{margin:0 0 var(--espaco-3);font:700 12px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.s-rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--espaco-2)}
.s-rodape a{color:inherit;text-decoration:none;opacity:.9}
.s-rodape a:hover{opacity:1;text-decoration:underline}
.s-rodape__base{margin-top:var(--espaco-12);padding-top:var(--espaco-6);border-top:1px solid rgba(255,246,225,.18);display:flex;flex-wrap:wrap;gap:var(--espaco-3);justify-content:space-between;font:500 13px/1.5 var(--font-sans);opacity:.8}
@media (min-width:768px){.s-rodape__grade{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* ---------- Página de links (bio) ---------- */
.s-links{max-width:440px;margin:0 auto;padding:var(--espaco-8) var(--espaco-4);display:grid;gap:var(--espaco-3);text-align:center}
.s-link{display:flex;align-items:center;gap:var(--espaco-4);min-height:64px;padding:var(--espaco-3) var(--espaco-4);border-radius:var(--raio-lg);background:var(--superficie);color:var(--tinta);text-decoration:none;text-align:left;box-shadow:var(--almofada-1);transition:box-shadow var(--dur-micro),transform var(--dur-micro)}
.s-link:hover{box-shadow:var(--almofada-2);transform:translateY(-1px)}
.s-link__icone{flex:none;width:40px;height:40px;border-radius:var(--raio-pilula);background:var(--superficie-creme);display:flex;align-items:center;justify-content:center;color:var(--marca)}
.s-link__icone svg{width:22px;height:22px}
.s-link__titulo{display:block;font:700 15px/1.3 var(--font-sans)}
.s-link__desc{display:block;font:500 12px/1.4 var(--font-sans);color:var(--tinta-suave)}
.s-link--destaque{background:var(--marca);color:var(--sobre-marca)}
.s-link--destaque .s-link__desc{color:var(--sobre-marca);opacity:.85}

/* ---------- Entradas suaves ---------- */
@keyframes s-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.s-entra{animation:s-entra var(--dur-entrada) var(--curva-suave) both}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .s-base *,.s-base *::before,.s-base *::after{animation:none!important;transition:none!important}
}

/* =====================================================================
   ETAPA 5.5 — COMPONENTES DE CENA (a sala de estar imersiva)
   ===================================================================== */
:root{
  --cena-altura:260vh;          /* quanto de rolagem cada cena "segura" */
  --camada-fundo:.15;           /* fator de parallax por profundidade */
  --camada-meio:.45;
  --camada-frente:.9;
  --camera-zoom:1.35;           /* aproximação máxima da "câmera" */
  --dur-tecido:7s;              /* cortina, flâmula e bandeira balançando */
  --dur-luz:6s;                 /* luzinhas respirando (mesmo ciclo da marca) */
  --dur-varal:5s;               /* polaroids balançando */
}

/* Cena fixada + camadas de parallax. O JS escreve --p (0 → 1) no .s-cena conforme a rolagem. */
.s-cena{position:relative;height:var(--cena-altura)}
.s-cena__palco{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1200px}
.s-camada{position:absolute;inset:0;will-change:transform;transform:translate3d(0,calc(var(--p,0) * var(--profundidade,.5) * -120px),0) scale(calc(1 + var(--p,0) * var(--profundidade,.5) * (var(--camera-zoom) - 1)))}
.s-camada--fundo{--profundidade:var(--camada-fundo)}
.s-camada--meio{--profundidade:var(--camada-meio)}
.s-camada--frente{--profundidade:var(--camada-frente)}
.s-porta-folha{transform-origin:left center;transform:rotateY(calc(var(--p,0) * -100deg));transition:transform .05s linear}

/* Indicador de rolagem */
@keyframes s-desce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
.s-indicador{display:inline-flex;flex-direction:column;align-items:center;gap:8px;font:700 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.s-indicador__seta{width:2px;height:28px;border-radius:2px;background:currentColor;animation:s-desce 2.4s var(--curva-respira) infinite}

/* Luzinhas de fio */
@keyframes s-luz{0%,100%{opacity:.45;filter:drop-shadow(0 0 2px var(--luz-quente))}45%{opacity:1;filter:drop-shadow(0 0 8px var(--luz-quente))}}
.s-luzinhas{display:block;width:100%;height:auto;overflow:visible}
.s-luzinhas .fio{fill:none;stroke:var(--linho-500);stroke-width:1.5}
.s-luzinhas .lamp{fill:var(--luz-quente);animation:s-luz var(--dur-luz) var(--curva-respira) infinite}
.s-luzinhas.is-musica .lamp{animation-duration:calc(60s / var(--bpm,72))}

/* Cortina (voal ou linho leve) */
@keyframes s-balanca{0%,100%{transform:skewX(0deg)}50%{transform:skewX(1.6deg)}}
.s-cortina{position:absolute;top:0;bottom:0;width:22%;background:linear-gradient(90deg,rgba(255,246,225,.75),rgba(239,226,199,.45) 40%,rgba(255,246,225,.7) 70%,rgba(239,226,199,.4));backdrop-filter:blur(1px);transform-origin:top center;animation:s-balanca var(--dur-tecido) var(--curva-respira) infinite}
.s-cortina--esq{left:0;border-right:1px solid rgba(198,189,168,.6)}
.s-cortina--dir{right:0;border-left:1px solid rgba(198,189,168,.6);animation-delay:-3.5s}
.s-cortina::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(166,158,138,.12) 14px 16px)}

/* Bandeira e flâmula (tecido que ondula) */
@keyframes s-ondula{0%,100%{transform:perspective(400px) rotateY(0) skewY(0)}50%{transform:perspective(400px) rotateY(-6deg) skewY(1deg)}}
.s-bandeira,.s-flamula{display:inline-block;transform-origin:left center;animation:s-ondula var(--dur-tecido) var(--curva-respira) infinite;filter:drop-shadow(var(--almofada-1))}
.s-flamula{position:relative}
.s-flamula__emblema{position:absolute;left:14%;top:26%;width:23%;height:auto}

/* Cordão de sisal */
.s-sisal{height:8px;border-radius:4px;background-color:var(--linho-400);background-image:repeating-linear-gradient(60deg,var(--linho-200) 0 1.6px,transparent 1.6px 6px),repeating-linear-gradient(60deg,transparent 0 3px,rgba(83,77,61,.45) 3px 3.8px,transparent 3.8px 6px)}

/* Quadro na parede (com variação pendurada no sisal) */
.s-quadro{position:relative;display:inline-block;padding:10px;background:var(--fundo);border:6px solid var(--vinho-800);border-radius:4px;box-shadow:var(--almofada-2);transition:transform var(--dur-micro) var(--curva-suave)}
.s-quadro img,.s-quadro__foto{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.s-quadro--sisal{margin-top:46px}
.s-quadro--sisal::before{content:"";position:absolute;left:50%;top:-44px;width:62%;height:44px;transform:translateX(-50%);background:linear-gradient(to top right,transparent calc(50% - 2px),var(--linho-500) calc(50% - 2px),var(--linho-500) calc(50% + 2px),transparent calc(50% + 2px)) left/50% 100% no-repeat,linear-gradient(to top left,transparent calc(50% - 2px),var(--linho-500) calc(50% - 2px),var(--linho-500) calc(50% + 2px),transparent calc(50% + 2px)) right/50% 100% no-repeat}
.s-quadro:hover{transform:rotate(-1deg) scale(1.02)}

/* Varal de polaroids no sisal */
@keyframes s-varal{0%,100%{transform:rotate(var(--r,-3deg))}50%{transform:rotate(calc(var(--r,-3deg) * -1))}}
.s-varal{position:relative;padding-top:6px}
.s-varal__fio{position:absolute;left:0;right:0;top:10px}
.s-varal__fotos{display:flex;justify-content:space-around;gap:var(--espaco-3);padding-top:4px}
.s-polaroid{width:110px;padding:8px 8px 26px;background:#FFFDF6;box-shadow:var(--almofada-2);transform-origin:top center;animation:s-varal var(--dur-varal) var(--curva-respira) infinite;position:relative}
.s-polaroid::before{content:"";position:absolute;top:-8px;left:50%;width:10px;height:18px;margin-left:-5px;border-radius:2px;background:var(--linho-500)}
.s-polaroid__foto{aspect-ratio:1;display:block;width:100%}
.s-polaroid__legenda{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:400 16px/1 var(--font-script);color:var(--tinta)}

/* Hotspot (ponto clicável num objeto) */
@keyframes s-pulso{0%{box-shadow:0 0 0 0 rgba(242,207,134,.7)}100%{box-shadow:0 0 0 14px rgba(242,207,134,0)}}
.s-hotspot{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:2px solid #FFF6E1;background:var(--marca);cursor:pointer;animation:s-pulso 2.4s var(--curva-suave) infinite}
.s-hotspot::after{content:attr(data-rotulo);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);white-space:nowrap;padding:6px 10px;border-radius:var(--raio-sm);background:var(--orig-cotele);color:#FFF6E1;font:600 12px/1 var(--font-sans);opacity:0;pointer-events:none;transition:opacity var(--dur-micro),transform var(--dur-micro)}
.s-hotspot:hover::after,.s-hotspot:focus-visible::after,.s-hotspot.is-aberto::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* Botão de som */
.s-botao-som{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border-radius:var(--raio-pilula);border:1.5px solid currentColor;background:transparent;color:inherit;font:700 13px/1 var(--font-sans);cursor:pointer}
.s-botao-som__barras{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.s-botao-som__barras i{display:block;width:3px;height:4px;border-radius:2px;background:currentColor}
@keyframes s-eq{0%,100%{height:4px}50%{height:16px}}
.s-botao-som[aria-pressed="true"] .s-botao-som__barras i{animation:s-eq .9s ease-in-out infinite}
.s-botao-som[aria-pressed="true"] .s-botao-som__barras i:nth-child(2){animation-delay:-.3s}
.s-botao-som[aria-pressed="true"] .s-botao-som__barras i:nth-child(3){animation-delay:-.6s}

/* Instrumento interativo (teclas) */
.s-teclas{display:flex;gap:3px;padding:10px;border-radius:var(--raio-md);background:var(--orig-cotele)}
.s-tecla{flex:1;height:96px;border:0;border-radius:0 0 6px 6px;background:#FFF6E1;cursor:pointer;transition:transform 80ms,background 80ms;font:700 10px/1 var(--font-sans);color:var(--tinta-suave);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
.s-tecla:active,.s-tecla.is-tocando{transform:translateY(2px);background:var(--luz-quente)}

/* Menu em "cômodos" (celular) */
.s-menu-casa{display:grid;gap:var(--espaco-2);padding:var(--espaco-6) var(--espaco-4);border-radius:var(--raio-lg)}
.s-comodo{display:flex;align-items:center;gap:var(--espaco-4);min-height:60px;padding:var(--espaco-2) var(--espaco-3);border-radius:var(--raio-md);color:#FFF6E1;text-decoration:none;transition:background var(--dur-micro)}
.s-comodo:hover,.s-comodo[aria-current="page"]{background:rgba(255,246,225,.08)}
.s-comodo img{width:44px;height:36px;filter:brightness(0) invert(96%) sepia(8%) saturate(400%) hue-rotate(320deg)}
.s-comodo__nome{display:block;font:400 22px/1.1 var(--font-serif)}
.s-comodo__desc{display:block;font:500 12px/1.3 var(--font-sans);opacity:.75}

@media (prefers-reduced-motion:reduce){
  .s-cena{height:auto}.s-cena__palco{position:relative;height:auto}
  .s-camada,.s-porta-folha{transform:none!important}
}