/* karty-pracy-przedszkole.pl — motyw „Pudełko kredek” (Design: claude.ai/artifact/UMTR7aZrJkD7zB9SjwUUAx) */
:root{--papier:#FFFBF0;--tusz:#2B2A33;--tusz2:#4A4852;--czerw:#E8432E;--czerw-p:#C8341F;--czerw-c:#8A2414;--zolty:#FFC21A;--zolty-j:#FFE9A8;--ziel:#2FA84F;--ziel-j:#CDEFD6;--blek:#2D7DD2;--blek-j:#CFE7FF;--pom:#FF8A1F;--fiol:#7B4FC4;--fiol-j:#E6DAFA;--rozowy-j:#FFD3C9;--linia:#E4DFD0;--link:#1F5FA8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tusz);font-family:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:18px;line-height:1.55}
img{max-width:100%;height:auto}
a{color:var(--link)}a:hover{color:#134579}
:focus-visible{outline:3px solid var(--blek);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:'Baloo 2','Atkinson Hyperlegible',system-ui,sans-serif;font-weight:800;line-height:1.1;margin:0 0 .5em;color:var(--tusz)}
h1{font-size:clamp(34px,5.2vw,58px)}
h2{font-size:clamp(28px,3.6vw,40px);margin-top:0}
h3{font-size:24px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.zz{height:14px;background:conic-gradient(from -45deg at 50% 100%,transparent 90deg,var(--czerw) 90deg 180deg,transparent 180deg) 0 0/28px 14px repeat-x}
.zz--b{background:conic-gradient(from -45deg at 50% 100%,transparent 90deg,var(--blek) 90deg 180deg,transparent 180deg) 0 0/28px 14px repeat-x}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 14px;z-index:99}
/* nagłówek */
.gora{padding:16px 0}
.gora__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.logo{font-family:'Baloo 2',sans-serif;font-size:38px;text-decoration:none;display:flex;align-items:center;gap:10px;color:var(--tusz);letter-spacing:1px}
.logo__kr{display:inline-block;width:13px;height:42px;background:var(--czerw);border-radius:3px 3px 3px 12px;transform:rotate(14deg)}
.logo b:nth-child(1){color:var(--czerw)}.logo b:nth-child(2){color:var(--pom)}.logo b:nth-child(3){color:#B88600}.logo b:nth-child(4){color:var(--ziel)}.logo b:nth-child(5){color:var(--blek)}.logo b:nth-child(6){color:var(--fiol)}
.menu{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.menu a{display:block;padding:9px 15px;border-radius:999px;color:var(--tusz);text-decoration:none;font-weight:700;font-size:17px;border:2px solid transparent}
.menu a:hover,.menu a[aria-current]{border-color:var(--tusz)}
.menu li:nth-child(1) a{background:var(--zolty-j)}.menu li:nth-child(2) a{background:var(--blek-j)}.menu li:nth-child(3) a{background:var(--ziel-j)}.menu li:nth-child(4) a{background:var(--rozowy-j)}.menu li:nth-child(5) a{background:#fff;border-color:var(--tusz)}
/* okruszki */
.okruszki{font-size:16px;padding:18px 0 0;color:var(--tusz2)}.okruszki a{color:var(--link)}.okruszki span{padding:0 6px}
/* hero */
.hero{padding:30px 0 34px}
.hero__in{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.hero__txt{flex:1 1 520px;min-width:0}
.hero__obraz{flex:1 1 340px;min-width:0;display:flex;justify-content:center}
.etykieta{display:inline-block;background:var(--zolty);color:var(--tusz);font-weight:700;padding:5px 15px;border-radius:8px;font-size:16px;transform:rotate(-2deg);margin-bottom:14px}
.lead{font-size:clamp(19px,2.2vw,22px);line-height:1.5;margin:0 0 22px;max-width:640px}
.lead strong{font-weight:700}
.zaufanie{margin:16px 0 0;font-size:16px;color:var(--tusz2)}
.nadzor{margin:10px 0 0;font-size:15px;color:var(--tusz2)}
/* przyciski */
.btn{display:inline-block;background:var(--czerw-p);color:#fff;font-weight:700;font-size:19px;padding:15px 26px;border-radius:14px;text-decoration:none;box-shadow:0 5px 0 var(--czerw-c);border:0;cursor:pointer;line-height:1.2;text-align:center}
.btn:hover{background:#B02C19;color:#fff}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--czerw-c)}
.btn--b{background:#fff;color:var(--tusz);border:3px solid var(--tusz);box-shadow:none;padding:12px 23px}.btn--b:hover{background:var(--zolty-j);color:var(--tusz)}
.btn--z{background:var(--zolty);color:var(--tusz);box-shadow:0 5px 0 #B58500}.btn--z:hover{background:#FFD04A;color:var(--tusz)}
.przyciski{display:flex;flex-wrap:wrap;gap:14px}
/* okładki w hero */
.wachlarz{position:relative;width:340px;max-width:100%;height:400px}
.wachlarz img{position:absolute;width:62%;border:4px solid var(--tusz);border-radius:14px;background:#fff;box-shadow:6px 6px 0 rgba(43,42,51,.25)}
.wachlarz img:nth-child(1){left:0;top:40px;transform:rotate(-8deg)}
.wachlarz img:nth-child(2){right:0;top:20px;transform:rotate(7deg)}
.wachlarz img:nth-child(3){left:19%;top:90px;transform:rotate(-1deg);z-index:2}
.obraz-hero{width:360px;max-width:100%;border-radius:30px 18px 34px 20px;border:4px solid var(--tusz);background:#fff;transform:rotate(1.5deg)}
.okladka-hero{width:300px;max-width:100%;border:4px solid var(--tusz);border-radius:14px;background:#fff;box-shadow:8px 8px 0 var(--zolty);transform:rotate(-2deg)}
/* sekcje */
.blok{padding:34px 0}
.blok--k{background:#fff;border-top:3px solid var(--tusz);border-bottom:3px solid var(--tusz)}
.blok__wstep{font-size:19px;margin:0 0 22px;max-width:760px}
.prozy p,.prozy li{max-width:760px}
.prozy ul,.prozy ol{padding-left:24px}
.prozy li{margin:0 0 6px}
/* kafle wieku */
.wiek{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.wiek a{display:block;border:4px solid var(--tusz);padding:22px;text-decoration:none;color:var(--tusz)}
.wiek a:nth-child(odd){border-radius:28px 12px 28px 12px}.wiek a:nth-child(even){border-radius:12px 28px 12px 28px}
.wiek a:hover{transform:translateY(-3px)}
.wiek .cyfra{font-family:'Baloo 2',sans-serif;font-size:70px;line-height:1;display:block}
.wiek b{font-size:22px;display:block;margin:2px 0 8px}
.wiek span.o{font-size:17px;line-height:1.4;display:block}
.w3{background:var(--zolty-j);box-shadow:6px 6px 0 #D9A000}.w4{background:var(--blek-j);box-shadow:6px 6px 0 var(--blek)}.w5{background:var(--ziel-j);box-shadow:6px 6px 0 var(--ziel)}.w6{background:var(--rozowy-j);box-shadow:6px 6px 0 var(--czerw)}
/* pasek pakietu */
.pasek{background:var(--zolty);border:4px solid var(--tusz);border-radius:24px;padding:16px 24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin:6px 0 26px}
.pasek__txt{flex:1 1 380px;min-width:0}
.pasek__tyt{font-family:'Baloo 2',sans-serif;font-size:24px;line-height:1.15;display:block}
.pasek__ile{font-size:17px;margin-top:3px;display:block}
.pasek img{width:54px;border-radius:6px;border:2px solid var(--tusz);background:#fff}
/* baner pakietu */
.baner{display:flex;flex-wrap:wrap;gap:30px;align-items:center;background:var(--tusz);color:#fff;border-radius:30px;padding:28px 34px}
.baner img{width:190px;border-radius:12px;border:3px solid var(--zolty);background:#fff}
.baner__txt{flex:1 1 380px;min-width:0}
.baner h2{color:#fff;margin-bottom:8px}
.baner .nadt{color:var(--zolty);font-weight:700;font-size:16px;letter-spacing:.04em}
.baner p{margin:0 0 14px;max-width:560px}
.cena{font-family:'Baloo 2',sans-serif;font-size:44px;color:var(--zolty);line-height:1}
.cena s{font-family:'Atkinson Hyperlegible',sans-serif;font-size:19px;color:#E6E4EC;margin-left:10px}
.oszcz{display:inline-block;background:var(--ziel);color:#fff;font-weight:700;font-size:15px;padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle}
/* plan tygodnia */
.plan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.plan div{border:3px solid var(--tusz);border-radius:18px;padding:16px}
.plan b{font-family:'Baloo 2',sans-serif;font-weight:400;font-size:25px;display:block}
.plan strong{display:block;margin:4px 0;font-size:18px}
.plan p{margin:0;font-size:16px;line-height:1.4}
.p1{background:var(--zolty-j)}.p2{background:var(--blek-j)}.p3{background:var(--ziel-j)}.p4{background:var(--rozowy-j)}.p5{background:var(--fiol-j)}
/* tabele */
.tab{overflow-x:auto;border:3px solid var(--tusz);border-radius:18px;background:#fff;margin:0 0 20px}
.tab table{width:100%;min-width:560px;border-collapse:collapse;font-size:17px}
.tab th{background:var(--tusz);color:#fff;text-align:left;padding:12px 16px}
.tab td{padding:12px 16px;border-top:2px solid var(--linia);vertical-align:top}
.tab tbody tr:nth-child(even){background:var(--papier)}
.tab td:first-child{font-weight:700}
/* karty produktów */
.karty{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.karta{background:#fff;border:3px solid var(--tusz);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.karta__im{display:block;background:var(--zolty-j);padding:14px;text-align:center}
.karta__im img{height:220px;width:auto;max-width:100%;object-fit:contain;border-radius:6px;background:#fff}
.karta__tr{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.karta__nazwa{font-weight:700;font-size:18px;line-height:1.3;margin:0}
.karta__opis{font-size:15px;color:var(--tusz2);margin:0}
.karta__cena{margin-top:auto;font-family:'Baloo 2',sans-serif;font-size:28px}
.karta__cena s{font-family:'Atkinson Hyperlegible',sans-serif;font-size:16px;color:var(--tusz2);margin-left:6px}
.karta .btn{font-size:17px;padding:11px 12px;box-shadow:0 4px 0 var(--czerw-c)}
.karta__probka{font-size:15px;text-align:center}
.karta--top{border-width:4px;box-shadow:6px 6px 0 var(--zolty)}
/* liniatura + kratka (ilustracje wzorów kart — dekoracja CSS, nie ilustracja) */
.probki{display:flex;flex-wrap:wrap;gap:20px}
.probki>div{flex:1 1 320px;min-width:0;background:#fff;border:3px solid var(--tusz);border-radius:16px;padding:18px}
.probki .nap{font-weight:700;margin-bottom:10px}
.trzylinie{height:96px;background:linear-gradient(#fff 0 18px,#9DC1E4 18px 19.5px,#fff 19.5px 38px,#4A8AD0 38px 40px,#fff 40px 58px,#9DC1E4 58px 59.5px,#fff 59.5px 100%)}
.kratka{height:96px;background-color:#fff;background-image:linear-gradient(#B9C9E3 1px,transparent 1px),linear-gradient(90deg,#B9C9E3 1px,transparent 1px);background-size:24px 24px}
/* ramki, kroki, FAQ */
.ramka{border:3px solid var(--tusz);border-radius:18px;padding:18px 22px;background:var(--blek-j);max-width:820px;margin:0 0 20px}
.ramka--z{background:var(--zolty-j)}.ramka--g{background:var(--ziel-j)}
.ramka p{margin:0}.ramka p+p{margin-top:8px}
.kroki{list-style:none;counter-reset:k;padding:0;max-width:820px}
.kroki li{counter-increment:k;position:relative;padding:12px 14px 12px 64px;margin:0 0 12px;background:#fff;border:3px solid var(--tusz);border-radius:16px}
.kroki li:before{content:counter(k);position:absolute;left:14px;top:8px;width:36px;height:36px;border-radius:50%;background:var(--zolty);border:3px solid var(--tusz);font-family:'Baloo 2',sans-serif;font-size:22px;text-align:center;line-height:30px}
.faq{max-width:860px}
.faq details{border-top:3px solid var(--tusz);padding:14px 0}
.faq details:last-child{border-bottom:3px solid var(--tusz)}
.faq summary{font-weight:700;font-size:20px;cursor:pointer;list-style:none;padding-right:30px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';position:absolute;right:0;top:-2px;font-size:28px;line-height:1;color:var(--czerw-p)}
.faq details[open] summary:after{content:'−'}
.faq p{margin:8px 0 0;max-width:760px}
.powiaz{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.powiaz a{display:block;padding:14px 16px;border:3px solid var(--tusz);border-radius:16px;background:#fff;text-decoration:none;color:var(--tusz);font-weight:700}
.powiaz a:hover{background:var(--zolty-j)}
.powiaz span{display:block;font-weight:400;font-size:15px;color:var(--tusz2);margin-top:2px}
/* stopka */
.dol{background:var(--tusz);color:#E6E4EC;padding:28px 0;font-size:16px;margin-top:20px}
.dol a{color:#9CCBFF}
.dol__tematy{margin:0 0 18px;padding-bottom:16px;border-bottom:2px solid #4A4852;line-height:1.9}.dol__tematy b{color:var(--zolty);margin-right:6px}.dol__in{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
.dol .nazwa{font-family:'Baloo 2',sans-serif;font-size:28px;color:var(--zolty)}
/* zgoda */
.zgoda{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:#fff;border:3px solid var(--tusz);border-radius:16px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;max-width:760px;margin:0 auto;box-shadow:0 6px 0 rgba(43,42,51,.25)}
.zgoda[hidden]{display:none}.zgoda p{margin:0;font-size:16px;flex:1 1 300px}
.zgoda button{font:inherit;font-weight:700;padding:10px 16px;border-radius:10px;border:3px solid var(--tusz);background:var(--zolty);cursor:pointer}
.zgoda button+button{background:#fff}
@media (max-width:900px){.wiek{grid-template-columns:repeat(2,minmax(0,1fr))}.plan{grid-template-columns:1fr}.hero__in{gap:24px}.baner{padding:22px}}
@media (max-width:520px){body{font-size:17px}.wrap{padding:0 16px}.logo{font-size:32px}.menu a{padding:8px 12px;font-size:16px}.btn{display:block;width:100%}.przyciski{flex-direction:column}.wiek .cyfra{font-size:52px}.wiek a{padding:16px}.wiek b{font-size:19px}.wachlarz{height:340px}.pasek .btn{width:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}