/* ============================================================
   DISEINU BERRIA — leunagoa eta minimalistagoa
   Orri guztietan app.css eta gainerako estiloen ONDOREN kargatzen da
   (build.sh-ek </head> aurretik txertatzen du), eta bertako aldagaiak
   eta osagaiak gainidazten ditu. app.css kanpoko iturritik kopiatzen
   denez, aldaketa guztiak fitxategi honetan daude.

   Aldaketak: Raleway letra-tipoa (berezuma.com-ekin bat), ertz beltz
   gogorrak eta itzal zurrunak kenduta, ertz biribilduak, itzal leunak,
   botoi eta txartel lasaiagoak, tarte gehiago.
   ============================================================ */

@font-face{font-family:'Raleway'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/raleway-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Raleway'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url(../fonts/raleway-latin-wght-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --font-body:"Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:"Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --edge:none;
  --radius:12px;
  --radius-sm:8px;
  --line:color-mix(in srgb, var(--ink) 12%, transparent);
  --lift:0 1px 2px rgba(20,20,18,.04), 0 6px 20px rgba(20,20,18,.06);
  --lift-hover:0 2px 4px rgba(20,20,18,.05), 0 12px 32px rgba(20,20,18,.10);
  --shadow-lg:0 16px 48px rgba(20,20,18,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --lift:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --lift-hover:0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
    --shadow-lg:0 16px 48px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --lift:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --lift-hover:0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5);
}

/* ---------- tipografia ---------- */
body{font-size:17px; line-height:1.65}
h1,h2,h3,h4{font-weight:600; letter-spacing:-.015em; line-height:1.18}
h1{font-weight:700; letter-spacing:-.025em}
.eyebrow{font-weight:600; letter-spacing:.02em}
.brand b{font-weight:700; font-size:21px}

/* ---------- osagai zurrunak leundu ---------- */
.card,.proj,.result,.modal,.sim,.exercise,.hook,.home-card,.challenge-card,.app,
.qq,.worked,.diagram,.def,.note,.formula,.sakondu,.notice{
  border-radius:var(--radius);
}
.proj,.result,.exercise,.hook,.home-card,.challenge-card,.app,.sim{
  border:1px solid var(--line);
  box-shadow:var(--lift);
}
.card,.qq,.worked,.diagram,.formula{border-color:var(--line)}
.def,.note,.sakondu,.notice{border-radius:var(--radius-sm); border-color:var(--line)}
.def{border-left-color:var(--ink)}
.note{border-left-color:var(--s2)}
.note.ok{border-left-color:var(--s3)}
.sakondu{border-left-color:var(--s1)}
.sakondu[data-maila="3"]{border-left-color:var(--s5, var(--danger))}
.notice{border-left-color:var(--s2)}
.modal{border:1px solid var(--line); box-shadow:var(--shadow-lg); overflow:hidden auto}
.sim{overflow:hidden}
.sim-stage{border-radius:0}

/* txartelak: altxatu hover egitean */
.app,.home-card,.proj,.challenge-card{transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease}
.app:hover,.home-card:hover,.proj:hover,.challenge-card:hover{
  background:var(--sheet); box-shadow:var(--lift-hover); transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--ink) 22%, transparent);
}
.home-card.above{box-shadow:none; border-color:var(--line)}
.home-card.above:hover{box-shadow:var(--lift); transform:none}
.app:focus-visible{outline-offset:3px; border-radius:var(--radius)}
@media (prefers-reduced-motion:reduce){
  .app,.home-card,.proj,.challenge-card,.btn{transition:none}
  .app:hover,.home-card:hover,.proj:hover,.challenge-card:hover{transform:none}
}

/* ---------- botoiak ---------- */
.btn,.btn-google{
  border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:none;
  font-weight:600; padding:9px 18px; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover,.btn-google:hover{background:var(--chip); border-color:color-mix(in srgb, var(--ink) 28%, transparent)}
.btn:active,.btn-google:active{transform:none; background:var(--grid)}
.btn.primary{background:var(--ink); color:var(--sheet); border-color:var(--ink)}
.btn.primary:hover{background:color-mix(in srgb, var(--ink) 86%, var(--s1)); border-color:transparent}
.btn.danger{box-shadow:none; border-color:color-mix(in srgb, var(--danger) 45%, transparent)}
.btn.danger:hover{background:var(--danger); color:#fff}
.btn.sm{box-shadow:none; padding:5px 12px; border-radius:var(--radius-sm)}
.btn.ghost{border-color:transparent}
.btn:disabled{box-shadow:none}

.seg{border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden}
.seg button{font-weight:600; border-right-color:var(--line)}

/* ---------- etiketak, pilulak ---------- */
.tag,.pill{border-radius:999px; border-color:var(--line); font-weight:600}
.pill.strong{border-color:color-mix(in srgb, var(--ink) 40%, transparent)}
.lvl{border-radius:999px}
.code-chip{border-radius:6px}

/* ---------- formularioak ---------- */
input[type=text],input[type=date],input[type=number],input[type=search],select,textarea{
  border:1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius:var(--radius-sm);
}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb, var(--s1) 40%, transparent); outline-offset:1px}
.qq-opts button{border-radius:var(--radius-sm); border-color:var(--line); transition:background .15s ease, border-color .15s ease}
.qq-opts button:hover{background:var(--chip)}
.qq-opts button[aria-pressed="true"]{border-color:var(--ink); box-shadow:none}
input[type=range]::-webkit-slider-thumb{border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); border-width:2px}
input[type=range]::-moz-range-thumb{border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25)}
input[type=range]::-webkit-slider-runnable-track{height:3px; border-radius:2px}
input[type=range]::-moz-range-track{height:3px; border-radius:2px}

/* ---------- alboko menua (lantegiak) ---------- */
.menu{border-right-color:var(--line)}
.menu-link{border-left:0; margin:1px 10px; padding:7px 12px; border-radius:var(--radius-sm)}
.menu-link:hover{background:var(--chip)}
.menu-link.on{background:var(--sheet); box-shadow:0 0 0 1px var(--line), var(--lift); font-weight:700}
.menu-link .mark i{border-radius:50%}
.u-steps a i{border-radius:50%}
.menu-foot{border-top-color:var(--line)}
.readouts{border-radius:var(--radius-sm); border-left-color:var(--s1)}
.solution{border-radius:var(--radius-sm)}
.step + .step{border-top-color:var(--line)}

/* ---------- azaleko orria (index.html) ---------- */
.hero{padding-block:88px 72px; border-bottom-color:var(--line)}
.hero h1{font-weight:700; letter-spacing:-.03em}
.hero p{font-size:19px; line-height:1.6}
.content{padding-block:64px 48px}
.apps{gap:24px}
.app{overflow:hidden; background:var(--sheet)}
.app-art{
  height:180px; border-bottom:0;
  background:color-mix(in srgb, var(--paper) 70%, var(--sheet));
}
.app-body{padding:22px 26px 26px}
.app h2{font-size:24px; font-weight:600; letter-spacing:-.015em; margin-bottom:8px}
.app p{font-size:16px; line-height:1.6; color:var(--ink2)}
.app-cta{
  border-bottom:0; margin-top:18px; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:6px;
}
.app-cta::after{content:"\2192"; transition:transform .18s ease}
.app:hover .app-cta::after{transform:translateX(4px)}
.group{font-size:26px; font-weight:600; border-top-color:var(--line); margin-top:64px}
.group:first-child{margin-top:0}
.facts{border-top-color:var(--line)}
.facts h3{font-size:19px; font-weight:600}
footer{border-top-color:var(--line)}

/* ---------- gainerakoak ---------- */
.topbar{border-bottom-color:var(--line)}
.proj-foot,.proj-foot a{border-color:var(--line)}
.modal-head{border-bottom-color:var(--line)}

/* Raleway pisu egokiak (DM Serif 400 pisu bakarrekoa zen) */
.menu-brand,.hook b,.home-card b,.tb-name,.quiz-result,.g-month,.brand b{font-weight:600; letter-spacing:-.015em}
.hook b{font-weight:700}
.tb-name{font-weight:700}

/* ---------- Marrazketa Lantegia eta Proiektu Taula ---------- */
.level,.hero-next,.ex-item,.option,.feedback,.k-card{
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--lift);
}
.level{overflow:visible}
.level.is-current{box-shadow:0 0 0 2px var(--s1), var(--lift-hover); border-color:transparent}
.level-num{border-color:var(--line); box-shadow:var(--lift)}
.hero-next{padding:28px; box-shadow:var(--lift-hover)}
.ex-item,.option{transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease}
.ex-item:hover,.option:hover{box-shadow:var(--lift-hover); transform:translateY(-1px)}
.option.right{border-color:var(--ok); box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 35%, transparent)}
.option.wrong{box-shadow:none}
.feedback.ok{border-color:var(--ok); box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent)}
.feedback.bad{border-color:var(--danger); box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent)}
.feedback.mid{border-color:var(--s2); box-shadow:0 0 0 2px color-mix(in srgb, var(--s2) 30%, transparent)}
.palette button{border-radius:var(--radius-sm)}
.palette button.on{box-shadow:0 0 0 2px var(--ink)}
.tb-back{border-color:var(--line); box-shadow:none; border-radius:var(--radius-sm)}
.k-card{border-radius:var(--radius-sm); box-shadow:var(--lift)}
.k-col{border-radius:var(--radius); border-color:var(--line)}
.k-col.over{box-shadow:0 0 0 2px var(--s1)}
.g-shell{border-radius:var(--radius); overflow:hidden; border-color:var(--line)}
@media (prefers-reduced-motion:reduce){
  .ex-item,.option{transition:none}
  .ex-item:hover,.option:hover{transform:none}
}