/* Seção 3 — Brincar é técnica: a pergunta em balão, a resposta enorme, as casinhas na estante e o tatame de EVA como chão */
.brincar { padding-bottom: calc(var(--respiro) * .7 + clamp(40px, 5vw, 76px)); overflow: hidden; }
.brincar-fundo { position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(45% 40% at 12% 20%, var(--luz), transparent 70%),
    radial-gradient(40% 40% at 90% 70%, oklch(0.92 0.045 40), transparent 70%),
    linear-gradient(180deg in oklch, oklch(0.945 0.035 70), oklch(0.94 0.03 60)); }
.brincar-abre { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.brincar-pergunta { display: inline-block; background: var(--papel); border-radius: 1.2rem 1.2rem 1.2rem .3rem; padding: .9rem 1.2rem .8rem; font-family: var(--f-titulo); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; box-shadow: var(--sombra); rotate: -2.5deg; }
.brincar-pergunta small { display: block; font-family: var(--f-texto); font-size: .72rem; color: var(--tinta-2); margin-top: .35rem; font-weight: 500; }
.brincar-titulo { margin-top: 1.5rem; font-size: clamp(2.5rem, 5.4vw, 5.2rem); line-height: 1; text-wrap: initial; }
.brincar-titulo span, .brincar-titulo em { display: block; white-space: nowrap; }
.brincar-titulo em { font-style: normal; color: var(--madeira); }
.brincar-tres ul { list-style: none; padding: 0; border-top: 1.5px solid var(--ouro); }
.brincar-tres li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline; padding: .85rem 0; border-bottom: 1.5px solid var(--ouro); line-height: 1.4; }
.brincar-tres b { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1; }
.brincar-tres figcaption { font-size: .82rem; color: var(--tinta-2); margin-top: .8rem; font-weight: 600; }

.brincar-dica { margin-top: clamp(2.6rem, 6vw, 4.6rem); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--tinta-2); display: flex; align-items: center; gap: .8rem; }
.brincar-dica::after { content: ""; flex: 1; height: 1px; background: rgba(43,29,18,.18); }
.so-dedo { display: none; }
.brincar-estante { list-style: none; padding: 0; margin-top: 1.6rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.8rem, 1.6vw, 1.6rem); align-items: start; }
.brincar-estante li { outline-offset: 8px; transition: opacity .5s ease, translate .6s var(--pisa); }
.brincar-estante li:nth-child(even) { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.brincar-estante .moldura { aspect-ratio: 1 / 1.3; }
.brincar-estante .casinha { transition: scale .6s var(--pisa); transform-origin: 50% 100%; }
.brincar-estante .moldura img { transition: scale 1.2s cubic-bezier(.2,.8,.2,1); }
.brincar-estante .prateleira { margin: 7px -6px 0; }
.brincar-estante h3 { font-family: var(--f-titulo); font-weight: 400; font-size: 1.08rem; line-height: 1.15; margin-top: .9rem; min-height: 2.5em; display: flex; gap: .5rem; align-items: baseline; }
.brincar-estante h3 i { font-style: normal; font-size: .78rem; color: var(--ouro); font-family: var(--f-texto); font-weight: 700; letter-spacing: .04em; }
.tags { display: flex; flex-wrap: wrap; gap: .32rem; margin-top: .5rem; }
.tags span { font-size: .74rem; font-weight: 600; line-height: 1.2; background: var(--papel); border-radius: 4px; padding: .32rem .55rem; box-shadow: 0 1px 0 rgba(184,141,60,.55), 0 6px 12px -8px rgba(80,50,20,.5); transition: rotate .5s var(--pisa), background .4s, translate .5s var(--pisa); }
.tags span:nth-child(odd) { rotate: -1.5deg; } .tags span:nth-child(even) { rotate: 1.2deg; }
@media (hover: hover) {
  .brincar-estante:hover li:not(:hover), .brincar-estante:focus-within li:not(:focus-visible) { opacity: .55; }
  .brincar-estante li:hover, .brincar-estante li:focus-visible { translate: 0 -10px; }
  .brincar-estante li:hover .casinha, .brincar-estante li:focus-visible .casinha { scale: 1.07; }
  .brincar-estante li:hover .moldura img, .brincar-estante li:focus-visible .moldura img { scale: 1.1; }
  .brincar-estante li:hover .tags span, .brincar-estante li:focus-visible .tags span { background: oklch(0.93 0.09 88); rotate: 0deg; translate: 0 -2px; }
}
.tatame { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(40px, 5vw, 76px); display: block; }

@media (max-width: 900px) {
  .brincar-abre { grid-template-columns: 1fr; gap: 1.8rem; }
  .brincar-titulo { font-size: clamp(2rem, 9.2vw, 3.2rem); }
  .brincar-tres li { grid-template-columns: 1fr; gap: .2rem; }
  .so-dedo { display: inline; } .so-mouse { display: none; }
  .brincar-estante { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin: 1.2rem calc(-1 * var(--margem)) 0; padding: .6rem var(--margem) 1.2rem; scrollbar-width: none; }
  .brincar-estante::-webkit-scrollbar { display: none; }
  .brincar-estante li { flex: 0 0 min(56vw, 17rem); scroll-snap-align: center; }
  .brincar-estante li:nth-child(even) { margin-top: 1.8rem; }
  .brincar-estante h3 { min-height: 0; }
}