/* Seção nova da página principal: crianças e adolescentes (prefixo sk- para não colidir) */
.sk{background:linear-gradient(130deg,oklch(0.985 0.005 170) 0%,oklch(0.955 0.018 95) 100%)}
.sk .pauta b{font-size:24px;background:transparent}
.sk-g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.sk-txt p{color:var(--ink-2);margin-bottom:16px;max-width:56ch}
.sk-txt p strong{color:var(--ink)}
.sk-temas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:6px 0 26px}
.sk-temas li{font-size:13px;color:var(--petrol);border:1px solid var(--line);background:rgba(255,255,255,.7);padding:6px 13px;border-radius:99px}
.sk-q{font-family:var(--hand);font-size:26px;line-height:1.2;color:var(--petrol);margin:0 0 26px;max-width:30ch}
.sk-q small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}

/* o convite: um livro que abre e de onde ele sai */
.sk-door{position:relative;display:block;height:clamp(420px,52vw,540px);perspective:1400px;color:inherit}
.sk-book{position:absolute;left:8%;bottom:10%;width:62%;aspect-ratio:3/4;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(4deg);
  transition:transform .8s var(--ease)}
.sk-pages{position:absolute;inset:2% 1.5% 2% 3%;background:repeating-linear-gradient(to bottom,#F7F5EE 0 26px,rgba(33,65,79,.1) 26px 27px);
  border-radius:3px;box-shadow:inset 8px 0 18px rgba(0,0,0,.06);padding:12% 12% 0 16%}
.sk-pages p{font-family:var(--hand);font-size:clamp(20px,2vw,26px);line-height:27px;color:var(--petrol)}
.sk-cover{position:absolute;inset:0;border-radius:3px 8px 8px 3px;transform-origin:0 50%;transform:rotateY(-28deg);
  background:repeating-linear-gradient(to bottom,transparent 0 30px,rgba(255,255,255,.06) 30px 31px),linear-gradient(135deg,#21414F,#0F2530);
  box-shadow:22px 24px 44px rgba(15,37,48,.35);display:flex;flex-direction:column;justify-content:flex-end;padding:12% 11%;color:#F4F8F9;
  transition:transform .8s var(--ease)}
.sk-cover b{font-family:var(--hand);font-weight:500;font-size:24px;color:var(--olive)}
.sk-cover span{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.1}
.sk-char{position:absolute;right:4%;bottom:10%;height:88%;width:auto;max-width:none;
  filter:drop-shadow(0 16px 18px rgba(15,37,48,.2));transform:translateY(8px);transition:transform .8s var(--ease)}
.sk-floor{position:absolute;left:10%;right:0;bottom:8%;height:26px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(15,37,48,.28),transparent 75%);filter:blur(2px)}
.sk-door:hover .sk-cover,.sk-door:focus-visible .sk-cover{transform:rotateY(-62deg)}
.sk-door:hover .sk-book{transform:rotateY(-6deg) rotateX(2deg)}
.sk-door:hover .sk-char,.sk-door:focus-visible .sk-char{transform:translateY(0)}
.sk-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

@media(max-width:980px){.sk-g{grid-template-columns:1fr}.sk-door{height:420px;max-width:460px}}
@media(max-width:560px){.sk-door{height:360px}.sk-q{font-size:23px}}
@media(prefers-reduced-motion:reduce){.sk-book,.sk-cover,.sk-char{transition:none}}

/* ---------- IDADES ATENDIDAS (hero) ---------- */
.k-ages{margin:24px 0 4px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.k-ages ul{display:flex;list-style:none;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.62);overflow:hidden}
.k-ages li{padding:9px 16px;display:flex;flex-direction:column;line-height:1.2}
.k-ages li+li{border-left:1px solid var(--line)}
.k-ages li:first-child{background:rgba(33,65,79,.07)}
.k-ages b{font-family:var(--serif);font-weight:500;font-size:16px;color:var(--ink)}
.k-ages small{font-size:11.5px;color:var(--ink-3)}
.k-ages small a{color:var(--petrol);font-weight:600}
.k-ages p{font-family:var(--hand);font-size:22px;color:var(--wood);line-height:1.1}

/* ---------- BOTÃO PULSANTE: formação ---------- */
.k-cred{display:inline-flex;align-items:center;gap:12px;margin-top:16px;min-height:44px;padding:0 18px 0 14px;border-radius:99px;
  border:1px solid rgba(33,65,79,.35);background:#fff;color:var(--petrol);font:600 14px/1 var(--sans);cursor:pointer;
  box-shadow:0 8px 20px rgba(15,37,48,.10);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.k-cred:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,37,48,.16)}
.k-cred-dot{position:relative;width:10px;height:10px;border-radius:50%;background:var(--petrol)}
.k-cred-dot::before,.k-cred-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--petrol);animation:kRing 2.2s var(--ease) infinite}
.k-cred-dot::after{animation-delay:1.1s}
@keyframes kRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}

/* ---------- POPUP ---------- */
.k-dlg{border:0;padding:0;background:transparent;max-width:min(760px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px);margin:auto;overflow:visible}
.k-dlg::backdrop{background:rgba(15,37,48,.55);backdrop-filter:blur(4px)}
.k-dlg[open]{animation:kIn .45s var(--ease)}
@keyframes kIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
.k-dlg-in{position:relative;background:var(--paper);border-radius:10px;padding:clamp(26px,4vw,44px);max-height:calc(100dvh - 32px);overflow:auto;
  box-shadow:0 40px 90px rgba(0,0,0,.35);
  background-image:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(33,65,79,.06) 33px 34px)}
.k-dlg-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:none;font-size:30px;line-height:1;color:var(--ink-3);cursor:pointer}
.k-dlg-k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.k-dlg-t{font-size:clamp(28px,3.4vw,40px);margin:8px 0 18px}
.k-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:22px}
.k-tabs button{min-height:44px;padding:0 14px;border:0;background:none;font:600 14px var(--sans);color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.k-tabs button[aria-selected="true"]{color:var(--petrol);border-color:var(--petrol)}
.k-tl{list-style:none;counter-reset:k}
.k-tl li{display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:11px 0;border-top:1px solid var(--line);counter-increment:k}
.k-tl li::before{content:counter(k);grid-row:span 2;font-family:var(--hand);font-size:26px;line-height:1;color:var(--wood)}
.k-tl-t li::before{content:"";width:8px;height:8px;margin:7px 0 0 6px;background:var(--petrol);transform:rotate(45deg)}
.k-tl b{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--ink)}
.k-tl span{font-size:13.5px;color:var(--ink-3)}
.k-dlg-q{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink);border-left:3px solid var(--petrol);padding-left:18px;margin-bottom:18px}
.k-dlg-n{font-family:var(--hand);font-size:21px;color:var(--wood);margin-top:12px}
.k-facts div{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.k-facts dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding-top:3px}
.k-facts dd{font-size:15px;color:var(--ink-2)}
.k-dlg-a{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
@media(max-width:560px){.k-ages ul{width:100%}.k-ages li{flex:1;padding:8px 10px}.k-facts div{grid-template-columns:1fr;gap:2px}}
@media(prefers-reduced-motion:reduce){.k-cred-dot::before,.k-cred-dot::after{animation:none}.k-dlg[open]{animation:none}}
.k-tab{min-height:min(470px,56dvh)}

.hero .k-ages{margin:18px 0 0}

/* ---------- entrada adolescentes: botão + celular vibrando ---------- */
.sk-btn-teen{background:#10262F;color:#E9C98F;box-shadow:0 10px 24px rgba(11,28,36,.25)}
.sk-btn-teen:hover{transform:translateY(-2px)}
.sk .sk-cta{gap:14px}
.sk-phone{position:relative;display:inline-flex;align-items:center;min-height:48px;padding-right:4px}
.sk-ph{position:relative;display:block;width:38px;height:64px;border-radius:9px;background:#0B1C24;border:2px solid #10262F;
  box-shadow:0 10px 22px rgba(11,28,36,.3),inset 0 0 0 2px #15303B;animation:skBuzz 4s ease-in-out infinite;transform-origin:50% 90%}
.sk-ph::before{content:"";position:absolute;top:4px;left:50%;width:12px;height:3px;margin-left:-6px;border-radius:3px;background:#1E3A45}
.sk-ph::after{content:"";position:absolute;inset:10px 5px 8px;border-radius:4px;background:radial-gradient(90% 60% at 50% 20%,rgba(233,201,143,.55),rgba(233,201,143,.12) 60%,transparent);animation:skLit 4s ease-in-out infinite}
.sk-ph-n{position:absolute;left:calc(100% + 12px);top:50%;width:max-content;max-width:210px;transform:translateY(-50%) scale(.9);transform-origin:left center;
  padding:9px 13px 10px;border-radius:14px 14px 14px 4px;background:#10262F;color:#E9F0F2;font:500 13.5px/1.35 var(--serif);
  box-shadow:0 12px 26px rgba(11,28,36,.28);opacity:0;animation:skNote 4s ease-in-out infinite}
.sk-ph-n b{display:block;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#E9C98F;margin-bottom:4px}
.sk-phone:hover .sk-ph-n,.sk-phone:focus-visible .sk-ph-n{opacity:1;transform:translateY(-50%) scale(1);animation:none}
@keyframes skBuzz{0%,8%,100%{transform:rotate(0)}1%{transform:rotate(-9deg) translateX(-1px)}2%{transform:rotate(8deg) translateX(1px)}3%{transform:rotate(-7deg)}4%{transform:rotate(6deg)}5%{transform:rotate(-4deg)}6%{transform:rotate(3deg)}7%{transform:rotate(-1deg)}}
@keyframes skLit{0%,100%{opacity:.25}4%,60%{opacity:1}}
@keyframes skNote{0%,3%{opacity:0;transform:translateY(-50%) scale(.9)}8%,62%{opacity:1;transform:translateY(-50%) scale(1)}72%,100%{opacity:0;transform:translateY(-50%) scale(.95)}}
@media(max-width:560px){.sk-ph-n{max-width:150px;font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.sk-ph,.sk-ph::after{animation:none}.sk-ph-n{animation:none;opacity:1;transform:translateY(-50%)}}

/* ---------- mobile ---------- */
@media(max-width:560px){
  .k-ages ul{width:100%}
  .k-ages li{flex:1 1 0;min-width:0;padding:8px 8px}
  .k-ages b{font-size:14px}
  .k-ages small{font-size:10.5px}
}
@media(pointer:coarse){.k-ages small a{display:inline-block;padding:10px 0;margin:-10px 0}}

/* mobile: a notificação sai por cima do celular, dentro da tela */
@media(max-width:560px){.sk-ph-n{left:auto;right:-4px;top:auto;bottom:calc(100% + 8px);transform:none;animation-name:skNoteUp}.sk-phone:hover .sk-ph-n{transform:none}}
@keyframes skNoteUp{0%,3%{opacity:0;transform:translateY(6px)}8%,62%{opacity:1;transform:none}72%,100%{opacity:0}}

/* ---------- mobile (2): botões em grade, celular e notificação à direita do "Adolescência" ---------- */
@media(max-width:560px){
  .sk .sk-cta{display:grid;grid-template-columns:auto auto 1fr;align-items:center;column-gap:10px;row-gap:14px;margin-top:26px}
  .sk .sk-cta>.btn-p{grid-column:1/-1;justify-self:start}
  .sk .sk-cta>.sk-btn-teen{grid-column:1}
  .sk .sk-cta>.sk-phone{grid-column:2;position:relative;align-self:center}
  .sk .sk-cta>.lnk{grid-column:1/-1;justify-self:start}
  .sk-ph-n{left:calc(100% + 8px);right:auto;top:50%;bottom:auto;max-width:128px;font-size:12px;padding:8px 10px;
    transform:translateY(-50%);animation-name:skNoteSide}
  .sk-phone:hover .sk-ph-n{transform:translateY(-50%)}
}
@keyframes skNoteSide{0%,3%{opacity:0;transform:translateY(-50%) translateX(-4px)}8%,62%{opacity:1;transform:translateY(-50%)}72%,100%{opacity:0;transform:translateY(-50%)}}
@media(max-width:560px) and (prefers-reduced-motion:reduce){.sk-ph-n{opacity:1;animation:none}}