/* hero do sono: a noite inteira, texto baixo, retrato sangrando na direita */
body.p-sono .hero{
  min-height:clamp(640px,100vh,940px);
  background:linear-gradient(to bottom,#17110C 0%,#241C14 38%,var(--marrom) 100%);
  padding-top:clamp(140px,18vh,210px);
}
body.p-sono .hero-grid{grid-template-columns:1fr;padding-bottom:clamp(60px,9vh,110px)}
body.p-sono .hero-copy{padding-bottom:0;max-width:64%}
body.p-sono .hero h1{font-size:clamp(40px,7vw,92px);max-width:13ch;line-height:.96}
body.p-sono .hero .sub{max-width:42ch}
body.p-sono .retrato-noite{
  position:absolute;right:0;bottom:0;z-index:2;height:88%;width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.45) 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.45) 90%,transparent 100%);
  transition:transform 1.2s var(--ease);
}
body.p-sono .hero:hover .retrato-noite{transform:translateY(-8px)}
body.p-sono .linha{bottom:clamp(150px,24vh,280px);z-index:1}
body.p-sono .veu{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,rgba(23,17,12,.92) 0%,rgba(23,17,12,.6) 38%,rgba(23,17,12,0) 66%);
}
body.p-sono .hero-grid{z-index:4}
@media(max-width:980px){
  body.p-sono .hero-copy{max-width:100%}
  /* a 50% de opacidade ela ficava atras do texto e as duas
     coisas se atrapalhavam: agora desce para o pe do hero */
  body.p-sono .retrato-noite{height:44%;opacity:.42;right:-14%}
  body.p-sono .veu{
    background:linear-gradient(180deg,rgba(23,17,12,.42) 0%,rgba(23,17,12,.86) 46%,rgba(23,17,12,.97) 100%);
  }
  body.p-sono .hero{padding-bottom:clamp(120px,22vh,200px)}
  body.p-sono .linha{bottom:clamp(90px,16vh,150px)}
}

/* calculadora */
.ferramenta-caixa{background:var(--areia);border-radius:12px;padding:clamp(26px,4vw,52px)}
.abas{display:inline-flex;gap:8px;flex-wrap:wrap;margin:26px 0 18px}
.aba{
  padding:14px 22px;border-radius:100px;border:1px solid var(--argila);
  background:transparent;color:var(--tinta);font:500 14px/1 var(--sans);cursor:pointer;
  transition:background-color .26s var(--ease),color .26s,border-color .26s,transform .22s var(--ease);
}
.aba:hover{background:rgba(156,123,98,.12)}
.aba:active{transform:scale(.97)}
.aba[aria-pressed="true"]{background:var(--marrom);border-color:var(--marrom);color:var(--linho)}
.campo{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:var(--linho);border-radius:10px;padding:10px 10px 10px clamp(16px,2.5vw,26px);
  transition:box-shadow .3s var(--ease);
}
.campo:focus-within{box-shadow:0 0 0 2px var(--argila)}
.relogio{display:flex;align-items:center;gap:clamp(4px,1vw,10px)}
.segmento{display:flex;flex-direction:column;align-items:center;gap:2px}
.digito{
  font-family:var(--serif);font-weight:300;font-size:clamp(34px,5vw,50px);line-height:1;
  min-height:44px;
  border:0;background:transparent;color:var(--tinta);
  width:2.1ch;text-align:center;padding:2px 0;border-radius:6px;
  -moz-appearance:textfield;
}
.digito:focus{outline:none;background:rgba(156,123,98,.16)}
.doispontos{
  font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.4vw,44px);
  color:var(--argila-texto);transform:translateY(-2px);
}
.seta{
  border:0;background:transparent;padding:9px 14px;cursor:pointer;line-height:0;
  opacity:.4;transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.seta svg{width:18px;height:9px;display:block}
.seta path{fill:none;stroke:var(--argila);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.segmento:hover .seta,.segmento:focus-within .seta{opacity:1}
.seta:hover{transform:scale(1.18)}
.seta:active{transform:scale(.94)}
.resultados{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-top:20px}
.resultado{background:var(--linho);border-radius:10px;padding:22px 24px;opacity:0;transform:translateY(12px)}
.resultado.entrou{animation:sobe .52s var(--ease) forwards}
.resultado:nth-child(2){animation-delay:.08s}
.resultado:nth-child(3){animation-delay:.16s}
.resultado.melhor{background:var(--nude)}
.resultado .hora{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,37px);line-height:1}
.resultado .ciclos{font-size:14px;color:var(--tinta-2);margin-top:8px}
.resultado.melhor .ciclos{color:#5B4636}
.resultado .marca{font-size:13px;font-weight:500;margin-top:4px}
.nota{font-size:14px;color:var(--tinta-2);margin-top:20px;max-width:70ch;line-height:1.65}
.depois{
  margin-top:28px;padding-top:26px;border-top:1px solid rgba(156,123,98,.38);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;
}
.depois .pergunta{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.1vw,24px);line-height:1.3;max-width:20ch}
.depois .apoio{font-size:15px;color:var(--tinta-2);max-width:34ch;line-height:1.6;flex:1 1 240px}
.depois .btn{margin-left:auto}
@media(max-width:700px){.depois .btn{margin-left:0}}
@media(hover:none){
  /* setas de 46x27 nao sao alvo de dedo */
  .seta{padding:16px 16px}
  .digito{width:2.6ch}
  .campo{padding:14px 14px 14px clamp(14px,3vw,22px);gap:8px}
  .campo .btn{flex:1 1 100%;margin-left:0!important}
}

/* quiz */
.quiz{background:var(--areia);border-radius:12px;padding:clamp(26px,4vw,52px)}
.quiz-topo{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;color:var(--tinta-2)}
.barra{height:3px;background:rgba(47,37,28,.13);border-radius:2px;margin:14px 0 26px;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:var(--argila);transition:width .5s var(--ease)}
.pergunta{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.7vw,31px);line-height:1.26;max-width:24ch}
.opcoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.opcoes button{
  flex:1 1 150px;padding:18px 24px;border-radius:10px;border:1px solid var(--argila);
  background:var(--linho);color:var(--tinta);font:500 16px/1 var(--sans);cursor:pointer;
  transition:background-color .22s,color .22s,border-color .22s,transform .2s var(--ease);
}
.opcoes button:hover:enabled{border-color:var(--marrom);transform:translateY(-2px)}
.opcoes button:active:enabled{transform:translateY(0) scale(.99)}
.opcoes button.certo{background:var(--salvia);border-color:var(--salvia);color:#fff}
.opcoes button.errado{background:#C08B76;border-color:#C08B76;color:#3B2317}
.retorno{margin-top:22px;font-size:16px;line-height:1.7;color:var(--tinta-2);max-width:60ch;opacity:0}
.retorno.entrou{animation:sobe .5s var(--ease) forwards}
.retorno b{color:var(--tinta);font-weight:500}
.quiz-pe{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.placar{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.2vw,35px);line-height:1.1}
.oculto{display:none}