:root{--bg:#f7f9ff;--ink:#192349;--muted:#6e7692;--blue:#3d5df5;--blue-dark:#233bc5;--edge:#e5e9f3;--white:#fff;--shadow:0 12px 40px rgba(33,52,112,.07);--radius:22px;--max:1256px;--font:ui-rounded,"SF Pro Rounded","Nunito","Avenir Next",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{margin:0;color:var(--ink);background:var(--bg);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-80px;left:12px;z-index:110;padding:12px 16px;background:#1c2870;color:white;border-radius:12px}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid #eaa12c!important;outline-offset:4px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);border-bottom:1px solid #e9edf7;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.header-wrap{max-width:var(--max);margin:auto;min-height:86px;display:flex;gap:28px;align-items:center;padding:12px 30px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand-icon{width:48px;height:48px;border-radius:17px;display:grid;place-items:center;position:relative;background:#4866ed;color:#fff;font-weight:950;font-size:22px;letter-spacing:-.09em;box-shadow:0 6px 18px #3e5fe040;transform:rotate(-4deg)}
.brand-stars{font-size:11px;position:absolute;top:3px;left:7px;letter-spacing:0}.brand-dot{font-size:8px;color:#ffce70;position:absolute;bottom:10px;right:8px}
.brand-text{font-weight:950;letter-spacing:-.05em;font-size:22px;line-height:1}.brand-text>span{color:var(--blue)}.brand-text small{display:block;font-weight:650;color:#9199b4;letter-spacing:0;font-size:10px;padding-top:5px}
.header-search{position:relative;min-width:0;flex:1;max-width:640px;margin-left:auto}
.header-search input{width:100%;height:50px;border:1.5px solid #e5eafb;border-radius:16px;padding:0 75px 0 49px;background:#f5f7ff;color:var(--ink);font-size:14px;font-weight:600;outline:none;transition:border-color .2s,box-shadow .2s}
.header-search input::placeholder{color:#939ab0}.header-search input:focus{border-color:#9caaff;box-shadow:0 0 0 4px #dce3ff}
.header-search input::-webkit-search-cancel-button{display:none}.search-ico{position:absolute;top:5px;left:16px;font-size:29px;color:#6676c2;line-height:40px;pointer-events:none;transform:rotate(-18deg)}
.shortcut{position:absolute;right:13px;top:12px;padding:4px 6px;border:1px solid #dfe5f2;border-radius:6px;color:#9ca4bf;font-family:inherit;font-size:12px;font-weight:700;background:white}
.clear-search{position:absolute;right:15px;top:11px;width:28px;height:28px;border:0;border-radius:50%;background:#e3e8f6;color:#48557e;font-size:19px}.clear-search:not([hidden])~.shortcut{display:none}
.top-action{background:#fff;border:1px solid var(--edge);border-radius:13px;padding:10px 17px;color:#3d4b7e;font-weight:850;display:flex;align-items:center;gap:8px;white-space:nowrap}.top-action span:first-child{font-size:23px;line-height:16px}
.page-wrap{max-width:var(--max);margin:0 auto;padding:30px 30px 80px}
.hero{background:linear-gradient(110deg,#e7edff 0%,#f0f0ff 48%,#fceef5 100%);min-height:430px;border-radius:34px;display:grid;grid-template-columns:1.1fr .9fr;position:relative;overflow:hidden;padding:52px 58px;box-shadow:0 13px 40px rgba(55,68,138,.06)}
.hero:before{content:"";position:absolute;width:290px;height:290px;left:-120px;bottom:-210px;border-radius:50%;border:65px solid #dce5ff99}
.hero-copy{position:relative;z-index:3;max-width:610px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#5e64aa;font-size:11.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:#ffffffa6;padding:8px 13px;border-radius:99px}.tiny-sparkle{color:#e7a14e;font-size:18px}
.hero h1{font-size:clamp(39px,4.6vw,65px);line-height:1.08;letter-spacing:-.075em;margin:25px 0 17px;font-weight:950}.hero h1>span{color:#3e60f2}.hero h1 em{color:#ac6bb9;font-style:normal}
.hero p{font-size:16px;line-height:1.7;color:#69718c;max-width:490px;font-weight:600;margin:0 0 24px}
.hero-cta{display:inline-flex;align-items:center;gap:23px;text-decoration:none;background:#3d59df;color:#fff;padding:14px 20px;border-radius:14px;font-size:14px;font-weight:900;box-shadow:0 10px 25px rgba(69,87,214,.25)}.hero-cta:hover{background:#243ed0}.hero-cta span{font-size:18px}
.hero-note{display:flex;align-items:center;gap:9px;color:#8188a2;font-size:12px;font-weight:700;margin-top:21px}.hero-note>span{color:#f1a54c;font-size:21px}
.hero-visual{position:relative;min-height:316px;display:flex;align-items:center;justify-content:center}.orbit{position:absolute;border:2px solid rgba(139,133,208,.11);border-radius:50%}.orbit-a{width:380px;height:380px}.orbit-b{width:270px;height:270px;background:rgba(255,255,255,.21)}
.mascot{position:relative;z-index:2;width:204px;height:253px;transform:rotate(-7deg);filter:drop-shadow(7px 20px 15px rgba(76,77,129,.17))}.mascot-head{position:absolute;top:35px;width:194px;height:151px;left:5px;background:#fff;border:9px solid #fff;border-radius:57px;box-shadow:inset 0 -6px 0 #e3e9ff}.mascot-face{height:111px;border-radius:44px;background:#596de3;position:relative}.eye{width:17px;height:26px;position:absolute;top:36px;border-radius:30px;background:white}.eye-left{left:50px}.eye-right{right:49px}.smile{position:absolute;left:82px;top:65px;width:29px;height:18px;border:5px solid #fff;border-top:0;border-radius:0 0 24px 24px}.mascot-antenna{position:absolute;z-index:0;top:6px;left:96px;height:46px;width:9px;background:#fff;border-radius:9px}.mascot-antenna i{position:absolute;top:-7px;left:-6px;background:#ffbc62;width:20px;height:20px;border-radius:50%}.mascot-neck{position:absolute;top:174px;left:87px;width:30px;height:29px;background:#dbe3ff}.mascot-body{position:absolute;top:188px;left:45px;width:115px;height:73px;background:#fff;border-radius:27px 27px 21px 21px}.mascot-heart{position:absolute;top:9px;left:42px;color:#fb8fa5;font-size:29px}.mascot-hand{position:absolute;z-index:-1;top:197px;width:54px;height:24px;background:#fff;border-radius:20px}.mascot-hand-left{left:1px;transform:rotate(28deg)}.mascot-hand-right{right:-4px;transform:rotate(-28deg)}
.float-emoji{position:absolute;z-index:2;display:grid;place-items:center;background:#fff;border-radius:18px;font-size:27px;width:61px;height:61px;box-shadow:0 15px 28px #969acc38}.f-e-1{top:8px;left:12% ;transform:rotate(-17deg)}.f-e-2{right:5%;top:24%;transform:rotate(19deg)}.f-e-3{bottom:0;left:12%;transform:rotate(13deg)}
.orb-tag{position:absolute;z-index:3;background:#fff;border-radius:12px;padding:11px 14px;box-shadow:0 12px 28px #929abd30;font-size:12px;font-weight:900;color:#6d7194;white-space:nowrap}.orb-tag-top{right:-1%;top:1%;transform:rotate(8deg)}.orb-tag-bottom{right:0%;bottom:7%;transform:rotate(6deg)}
.cycles{padding-top:51px;scroll-margin-top:98px}.section-kicker{font-size:11px;font-weight:950;color:#5c72d8;letter-spacing:.16em}.section-title-row{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:20px}.section-title-row h2,.explore-heading h2,.guide-heading h2{font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.045em;margin:8px 0 6px;font-weight:950}.section-title-row p,.explore-heading p{color:#7c839d;margin:0;font-size:14px;font-weight:600}.heading-star{color:#f2af4e}.section-decor{font-weight:900;color:#c8cfe5;font-size:14px;letter-spacing:.15em}
.cycle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cycle-card{min-width:0;min-height:257px;padding:23px 25px;text-align:left;border:2px solid transparent;border-radius:25px;display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s}.cycle-card:hover{transform:translateY(-5px);box-shadow:0 15px 29px #536aac1b}.cycle-card[aria-pressed="true"]{border-color:#576ae2;box-shadow:0 10px 30px #6670b122}.cycle-inicial{background:#ffeadc}.cycle-mitja{background:#e4efff}.cycle-superior{background:#e9e5ff}
.cycle-top{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:1}.cycle-label{font-size:11px;font-weight:950;letter-spacing:.12em;opacity:.65}.cycle-arrow{font-size:20px;font-weight:900;display:grid;place-items:center;border-radius:50%;width:34px;height:34px;background:#ffffff8c}
.cycle-mascot{position:absolute;top:50px;right:26px;font-size:72px;transform:rotate(10deg);filter:drop-shadow(3px 5px 0 #ffffffaa)}.cycle-name{font-size:37px;letter-spacing:-.06em;font-weight:950;margin-top:25px;position:relative;z-index:1}.cycle-description{font-size:13px;color:#626d87;font-weight:700;max-width:218px;min-height:40px;position:relative;z-index:1}
.cycle-bottom{border-top:1px solid #ffffffb6;margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:900}.cycle-count{color:#69718d}.cycle-go{color:#2f45a8;background:#fff;border-radius:11px;padding:8px 12px}.cycle-go span{font-size:17px;margin-left:6px}
.explore{padding-top:62px;scroll-margin-top:90px}.explore-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px}.change-cycle{background:#fff;border:1px solid #dce2f1;color:#4c5bb2;border-radius:14px;padding:11px 16px;font-weight:900;font-size:13px}.change-cycle:hover{background:#eaf0ff}
.filter-panel{border-radius:23px;border:1px solid #ebedf8;background:#fff;padding:22px 23px 17px;box-shadow:var(--shadow)}.filter-title-line{display:flex;justify-content:space-between;align-items:center;gap:10px}.filter-title-line h3{font-size:16px;font-weight:950;margin:0}.reset-button{border:0;background:transparent;color:#5369bf;font-size:12px;font-weight:900;padding:8px}
.category-chips{display:flex;flex-wrap:wrap;gap:9px;margin:17px 0 22px}.chip{background:#f8f9fe;border:1px solid #e8ebf7;border-radius:999px;padding:10px 15px;color:#58617d;font-size:13px;font-weight:850;transition:.18s}.chip:hover{background:#eef2ff}.chip.active{background:#3c5ce5;border-color:#3c5ce5;color:white;box-shadow:0 5px 12px #3b57e12d}.chip .chip-icon{margin-right:5px}
.filter-bottom{padding-top:15px;border-top:1px solid #f0f2f8;display:flex;justify-content:space-between;align-items:center;gap:15px}.device-filter{display:flex;gap:7px;flex-wrap:wrap}.device-btn{border:1px solid transparent;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:850;color:#7b839e;background:transparent}.device-btn.active{color:#3348af;background:#ebefff}.device-btn:hover:not(.active){background:#f4f5fc}.result-count{font-size:12px;font-weight:800;color:#8c94a9;margin:0;white-space:nowrap}
.resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:24px}.resource-card{display:flex;flex-direction:column;min-width:0;border:1px solid #e9ecf6;background:#fff;border-radius:21px;overflow:hidden;text-decoration:none;box-shadow:0 6px 24px #293e7b0b;transition:transform .18s,box-shadow .18s,border-color .18s}.resource-card:hover{transform:translateY(-5px);box-shadow:0 17px 32px #293e7b1c;border-color:#bac5f4}.resource-illustration{height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.resource-illustration::before,.resource-illustration::after{content:"";width:120px;height:120px;border:1.5px solid #ffffff9e;border-radius:30px;position:absolute;transform:rotate(30deg);top:-51px;right:-38px}.resource-illustration::after{width:70px;height:70px;top:auto;right:auto;left:-20px;bottom:-30px;border-radius:22px;transform:rotate(-22deg)}
.tone-peach{background:linear-gradient(140deg,#ffe5d9,#fff0de)}.tone-sky{background:linear-gradient(140deg,#dceeff,#ecf1ff)}.tone-mint{background:linear-gradient(140deg,#d7f7ef,#e9fbef)}.tone-lilac{background:linear-gradient(140deg,#efe4ff,#f9eaf9)}.tone-sun{background:linear-gradient(140deg,#fff2c8,#fff9e7)}.resource-emoji{font-size:66px;line-height:1;filter:drop-shadow(0 8px 3px #ffffff8c);transform:rotate(-7deg);transition:transform .18s}.resource-card:hover .resource-emoji{transform:rotate(3deg) scale(1.12)}.illustration-bubble{position:absolute;width:27px;height:27px;background:#ffffff7c;top:22px;left:20px;border-radius:50%;box-shadow:28px 21px 0 -11px #fff}
.resource-content{padding:17px 17px 15px;flex:1;display:flex;flex-direction:column}.resource-kicker{text-transform:uppercase;color:#6276cb;font-size:10px;letter-spacing:.09em;font-weight:950}.resource-name{font-size:17px;line-height:1.24;font-weight:950;letter-spacing:-.03em;margin:5px 0 7px}.resource-desc{font-size:12px;color:#7b829e;line-height:1.55;font-weight:600;margin:0;min-height:40px}.resource-tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 13px}.device-tag{border-radius:7px;padding:6px 8px;background:#f2f5fe;color:#54638e;font-size:10px;font-weight:900}.device-tag.keyboard{background:#fff2d9;color:#98701c}.device-tag.account{background:#f9eafb;color:#8f5c8b}.resource-footer{border-top:1px solid #eef0f7;margin-top:auto;padding-top:11px;display:flex;align-items:center;justify-content:space-between;gap:8px}.resource-provider{color:#979eb3;font-size:10px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:115px}.resource-open{color:#405dda;font-size:12px;font-weight:950;white-space:nowrap}.resource-open span{margin-left:4px}
.no-results{margin:26px 0;padding:54px 15px;text-align:center;border:2px dashed #e3e8f5;border-radius:24px}.no-results>span{font-size:46px}.no-results h3{font-size:24px;margin:8px}.no-results p{color:var(--muted)}.no-results button{border:0;background:var(--blue);color:white;border-radius:12px;padding:12px 18px;font-weight:900}
.guide{padding-top:63px}.guide-heading h2{margin-bottom:20px}.guide-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.guide-item{background:#fff;border:1px solid #e9edf7;border-radius:18px;display:flex;gap:14px;align-items:center;padding:19px 20px}.guide-emoji{display:grid;place-items:center;flex-shrink:0;width:50px;height:50px;border-radius:15px;background:#f0f3ff;font-size:27px}.guide-item:nth-child(2) .guide-emoji{background:#e8f7f1}.guide-item:nth-child(3) .guide-emoji{background:#fff1dc}.guide-item h3{font-size:15px;font-weight:950;margin:0 0 2px}.guide-item p{font-size:12px;font-weight:600;color:#858da6;line-height:1.55;margin:0}
.site-footer{background:#eff2fa;border-top:1px solid #e5e9f5}.footer-content{max-width:var(--max);margin:auto;padding:27px 30px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 23px;color:#838aa1;font-size:12px}.footer-content strong{color:#42549b}.footer-mark{color:#546add;font-size:21px}.footer-content p{margin:0;font-weight:800}.footer-content small{width:100%;font-size:11px}
@media(max-width:1070px){.resource-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{padding:46px 38px}.hero h1{font-size:clamp(39px,5vw,58px)}.orb-tag-top{right:-8%}.guide-item{padding:16px}.cycle-mascot{font-size:60px;top:58px;right:18px}}
@media(max-width:760px){.header-wrap{min-height:78px;padding:10px 17px;gap:10px;flex-wrap:wrap}.brand-icon{height:41px;width:41px;border-radius:14px;font-size:19px}.brand-text{font-size:20px}.brand-text small{font-size:9px}.top-action{margin-left:auto;padding:9px 12px}.header-search{max-width:none;flex-basis:100%;order:3}.header-search input{height:44px}.search-ico{top:3px}.shortcut{display:none}.site-header{position:relative}.page-wrap{padding:18px 16px 60px}.hero{grid-template-columns:1fr;min-height:0;padding:34px 26px 18px;border-radius:25px}.hero-copy{max-width:none}.hero h1{font-size:clamp(36px,8vw,54px);margin:19px 0 12px}.hero p{font-size:14px}.hero-visual{min-height:265px}.mascot{transform:rotate(-7deg) scale(.78);margin-top:-10px}.orbit-a{width:275px;height:275px}.orbit-b{width:210px;height:210px}.orb-tag-top{right:8%;top:5%}.orb-tag-bottom{right:4%;bottom:4%}.f-e-1{left:11%}.f-e-3{left:10%;bottom:10%}.cycles{padding-top:37px}.cycle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cycle-card{padding:18px;min-height:237px}.cycle-mascot{font-size:49px;top:58px;right:12px}.cycle-name{font-size:31px;margin-top:25px}.cycle-description{font-size:12px}.cycle-bottom{padding-top:10px}.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.resource-illustration{height:132px}.resource-content{padding:13px}.resource-name{font-size:15px}.resource-desc{min-height:50px}.guide-items{grid-template-columns:1fr}.explore-heading{align-items:flex-start}.filter-panel{padding:17px}.filter-bottom{align-items:flex-start;flex-direction:column}.result-count{align-self:flex-end}.footer-content{padding:25px 18px}}
@media(max-width:480px){.hero-visual{min-height:210px}.mascot{transform:rotate(-7deg) scale(.63)}.float-emoji{font-size:22px;width:48px;height:48px}.orb-tag{font-size:9px;padding:7px 9px}.orbit-a{width:240px;height:240px}.hero-note{font-size:11px}.eyebrow{font-size:10px;letter-spacing:.04em}.cycle-grid{grid-template-columns:1fr}.cycle-card{min-height:190px;padding:18px 22px}.cycle-mascot{font-size:60px;top:53px;right:32px}.cycle-name{margin-top:15px}.cycle-description{max-width:200px;min-height:auto}.cycle-bottom{margin-top:18px}.section-decor{display:none}.explore-heading{flex-wrap:wrap}.change-cycle{padding:8px 13px}.resource-grid{gap:10px}.resource-illustration{height:105px}.resource-emoji{font-size:47px}.resource-content{padding:11px}.resource-name{font-size:14px}.resource-desc{font-size:11px;min-height:65px}.resource-kicker{font-size:9px}.device-tag{font-size:9px}.resource-provider{max-width:70px}.category-chips{gap:7px}.chip{font-size:11px;padding:9px 11px}.device-btn{font-size:11px}.site-footer{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Cercador global: saltem la pantalla de selecció mentre l'alumne escriu. */
body.search-mode .hero,body.search-mode .cycles{display:none}
body.search-mode .explore{padding-top:20px}
@media(max-width:760px){.site-header{position:sticky}html{scroll-padding-top:143px}.cycles,.explore{scroll-margin-top:143px}}
/* Al mòbil prioritzem llegibilitat: targetes compactes en una columna. */
@media(max-width:480px){
  .resource-grid{grid-template-columns:1fr;gap:11px}
  .resource-card{display:grid;grid-template-columns:112px minmax(0,1fr);min-height:164px}
  .resource-illustration{height:100%;min-height:164px}
  .resource-emoji{font-size:52px}
  .resource-content{padding:11px 13px}
  .resource-name{font-size:15px;margin:3px 0 4px}
  .resource-desc{font-size:12px;min-height:0;line-height:1.4}
  .resource-tags{margin:9px 0 8px}
  .resource-kicker{font-size:10px}
  .resource-footer{padding-top:7px}
}