/* Seção 5 — Na lousa: a lousa em forma de casinha da sala, com as perguntas dos pais escritas a giz */
.lousa { --pico: clamp(46px, 9vw, 130px); padding-left: clamp(.5rem, 1.6vw, 1.5rem); padding-right: clamp(.5rem, 1.6vw, 1.5rem);
  background: linear-gradient(180deg in oklch, oklch(0.8 0.05 50), oklch(0.92 0.03 70) 22%, oklch(0.93 0.03 60)); }
.lousa-casa { position: relative; max-width: 96rem; margin: 0 auto; filter: drop-shadow(0 22px 30px rgba(70,45,20,.3)); }
.lousa-quadro { position: relative; isolation: isolate; overflow: hidden; color: #f4f1ea; clip-path: polygon(0 var(--pico), 50% 0, 100% var(--pico), 100% 100%, 0 100%);
  padding: calc(var(--pico) * .62 + 1rem) var(--margem) 0; }
.lousa-fundo { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(34% 30% at 20% 30%, color-mix(in oklch, #f3a3b8 12%, transparent), transparent 70%),
    radial-gradient(30% 34% at 82% 26%, color-mix(in oklch, #9fcdea 11%, transparent), transparent 70%),
    radial-gradient(36% 30% at 62% 88%, color-mix(in oklch, #f1d063 8%, transparent), transparent 70%),
    linear-gradient(101deg, transparent 20%, rgba(255,255,255,.03) 30%, transparent 46%),
    linear-gradient(150deg in oklch, oklch(0.27 0.012 200), oklch(0.22 0.014 230)); }
.lousa-telhado { position: absolute; left: 0; right: 0; top: 0; height: var(--pico); width: 100%; overflow: visible; pointer-events: none; }
.lousa-topo { text-align: center; display: grid; justify-items: center; }
.lousa-grade { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; margin-top: clamp(2.4rem, 5vw, 4.2rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.lousa .olho { color: #c9c6bd; }
.lousa-estrela { width: clamp(2.8rem, 4.4vw, 4rem); fill: none; stroke: #f1d063; stroke-width: 3.4; stroke-linejoin: round; filter: url(#giz); margin-bottom: 1rem; }
.lousa-titulo { font-family: var(--f-giz); font-weight: 400; font-size: clamp(2.8rem, 7.4vw, 7.2rem); line-height: .96; margin-top: .8rem; filter: url(#giz); max-width: 15ch; }
.js .lousa-titulo span { display: inline-block; clip-path: inset(-10% 100% -15% 0); }
.js .lousa-casa.visto .lousa-titulo span { clip-path: inset(-10% -4% -15% 0); transition: clip-path .8s cubic-bezier(.5,.1,.3,1); transition-delay: calc(.5s + var(--k) * .55s); }
.js .lousa-resp { opacity: 0; } .js .lousa-casa.visto .lousa-resp { opacity: 1; transition: opacity .8s 2.8s; }
.g-rosa { color: #f3a3b8; } .g-amarelo { color: #f1d063; } .g-azul { color: #9fcdea; } .g-branco { color: #f4f1ea; }
.lousa-resp { font-family: var(--f-giz); font-size: clamp(1.4rem, 2.4vw, 2.2rem); color: #a9d9a4; margin-top: .8rem; line-height: 1.1; filter: url(#giz); }
.lousa-fala { margin: 0; max-width: 31rem; padding-left: 1.3rem; border-left: 3px dashed rgba(244,241,234,.4); }
.lousa-nao { margin-top: 1.6rem; max-width: 27rem; font-family: var(--f-giz); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.15; color: #f4f1ea; }
.lousa-fala blockquote { font-size: 1.08rem; line-height: 1.6; color: #e8e5dc; }
.lousa-fala figcaption { font-size: .82rem; color: #c9c6bd; margin-top: .6rem; font-weight: 600; }
.botao.giz { background: #f1d063; color: #24272a; margin-top: 1.4rem; box-shadow: 0 0 0 4px rgba(241,208,99,.16); }

.lousa-rotulo { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #c9c6bd; margin-bottom: .6rem; }
.lousa-perguntas details { border-bottom: 2px dashed rgba(244,241,234,.28); padding: 1rem 0 1.05rem; }
.lousa-perguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-family: var(--f-giz); font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.12; }
.lousa-perguntas summary::-webkit-details-marker { display: none; }
.lousa-perguntas summary::after { content: "+"; font-size: 1.5em; line-height: .6; color: #f1d063; transition: rotate .4s var(--pisa); flex: none; }
.lousa-perguntas details[open] summary::after { rotate: 45deg; }
.lousa-perguntas details p { margin-top: .7rem; color: #e3e0d7; max-width: 36rem; }
.lousa-perguntas details[open] p { animation: responde .6s var(--pisa); }
@keyframes responde { from { opacity: 0; transform: translateY(-8px); } }
.lousa :focus-visible { outline-color: #f1d063; }

.rabisco { position: absolute; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: url(#giz); pointer-events: none; opacity: .9; }
.js .rabisco path, .js .rabisco circle, .js .lousa-estrela path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .lousa-casa.visto .rabisco path, .js .lousa-casa.visto .rabisco circle, .js .lousa-casa.visto .lousa-estrela path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease-out var(--d, 1.2s); }
.lousa-estrela path { --d: .2s; }
.r-coracao { stroke: #f3a3b8; width: clamp(2rem, 3.6vw, 3.4rem); left: 5%; top: calc(var(--pico) + 5%); --d: 1.6s; }
.r-nuvem { stroke: #9fcdea; width: clamp(4rem, 8vw, 7.5rem); right: 5%; top: calc(var(--pico) + 4%); --d: 1.9s; }
.r-sol { stroke: #f1d063; width: clamp(3.6rem, 6.5vw, 6rem); right: 2.2%; top: 40%; --d: 2.2s; }
.r-flor { stroke: #f3a3b8; width: clamp(2.4rem, 4vw, 3.8rem); left: 1.6%; top: 44%; --d: 2.5s; }

/* a calha do giz */
.lousa-calha { margin: 0 calc(-1 * var(--margem)); height: 2.5rem; display: flex; align-items: flex-start; justify-content: center; gap: .5rem; padding-top: .4rem; background: linear-gradient(to bottom, #d9b98a, #c39a63); box-shadow: 0 -6px 14px -6px rgba(0,0,0,.45); }
.lousa-calha i { width: 2.6rem; height: .95rem; border-radius: .5rem; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), 0 2px 3px rgba(0,0,0,.25); }
.lousa-calha i:nth-child(odd) { rotate: -4deg; } .lousa-calha i:nth-child(even) { rotate: 3deg; }
.lousa-calha b { width: 3.6rem; height: 1.15rem; border-radius: .25rem; background: #40464a; box-shadow: inset 0 -4px 0 #a9907a; margin-left: .8rem; }
.lousa-legenda { text-align: center; font-size: .82rem; color: var(--tinta-2); margin-top: 1.3rem; }

@media (max-width: 900px) {
  .lousa-grade { grid-template-columns: 1fr; gap: 2.4rem; }
  .lousa-quadro { padding-top: calc(var(--pico) + .6rem); }
  .r-coracao { left: 4%; top: calc(var(--pico) + 1%); } .r-nuvem { right: 4%; top: calc(var(--pico) + 1%); }
  .r-sol, .r-flor { display: none; }
  .lousa-titulo { font-size: clamp(2.6rem, 13vw, 3.8rem); }
  .lousa-calha i { width: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) { .js .lousa-titulo span { clip-path: none; } .js .lousa-resp { opacity: 1; } .js .rabisco path, .js .rabisco circle, .js .lousa-estrela path { stroke-dashoffset: 0; } .lousa-perguntas details[open] p { animation: none; } }