/* Concepto: hoja de cuaderno cuadriculado. Tarjetas tipo calcomanía con borde de tinta y sombra dura, marcadores de colores para destacar. */
:root{
  --paper:#F3F6FF; --card:#FFFFFF; --grid:#DCE4FA; --ink:#14206B; --ink2:#4A5496; --edge:#14206B; --shadow:#14206B;
  --blue:#2D63F5; --red:#E23A31; --yellow:#FFD23F; --teal:#0E8F80; --violet:#6D4DEB;
  --blue-s:#DCE6FF; --red-s:#FFE0DD; --yellow-s:#FFF1B0; --teal-s:#CCF1EA; --violet-s:#E5DDFF;
  --on-blue:#FFFFFF; --on-yellow:#14206B;
  --f-display:'Baloo 2','Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  --f-body:'Atkinson Hyperlegible','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-hand:'Caveat','Segoe Print','Bradley Hand',cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1230; --card:#161E48; --grid:#202A5E; --ink:#EAEEFF; --ink2:#AEB8EC; --edge:#6577D6; --shadow:#050818;
    --blue:#7C9AFF; --red:#FF6F65; --yellow:#FFD84D; --teal:#3FD8C3; --violet:#A895FF;
    --blue-s:#1E2D6E; --red-s:#4A2230; --yellow-s:#46400F; --teal-s:#10443F; --violet-s:#33286E;
    --on-blue:#0D1230; --on-yellow:#14206B; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0D1230; --card:#161E48; --grid:#202A5E; --ink:#EAEEFF; --ink2:#AEB8EC; --edge:#6577D6; --shadow:#050818;
  --blue:#7C9AFF; --red:#FF6F65; --yellow:#FFD84D; --teal:#3FD8C3; --violet:#A895FF;
  --blue-s:#1E2D6E; --red-s:#4A2230; --yellow-s:#46400F; --teal-s:#10443F; --violet-s:#33286E;
  --on-blue:#0D1230; --on-yellow:#14206B; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background-color:var(--paper); color:var(--ink);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:30px 30px; background-position:-1px -1px;
  font:18px/1.55 var(--f-body);
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0 48px;
}
img{max-width:100%;height:auto}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;box-shadow:0 0 0 5px var(--edge)}
h1,h2,h3{font-family:var(--f-display);line-height:1.05;margin:0;text-wrap:balance;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,7vw,4.4rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem)}
h3{font-size:1.35rem}
p{margin:0 0 .8em;max-width:68ch}
.wrap{max-width:1120px;margin:0 auto}
.hand{font-family:var(--f-hand);font-weight:700;font-size:1.5rem;line-height:1.1;color:var(--red)}
mark{background:linear-gradient(transparent 52%,var(--yellow) 52%,var(--yellow) 92%,transparent 92%);color:inherit;padding:0 .15em}

/* encabezado */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--card);border-bottom:3px solid var(--edge);margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px))) 0 calc(-1*max(16px,env(safe-area-inset-right,0px)));padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.top .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:800 1.7rem/1 var(--f-display);color:var(--ink);text-decoration:none}
.brand svg{width:38px;height:38px;flex:none}
.brand b{color:var(--blue)}
nav.main{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
nav.main a,nav.main span{font:700 1rem var(--f-display);padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--ink);border:2px solid transparent}
nav.main a:hover{background:var(--yellow-s);border-color:var(--edge)}
nav.main a[aria-current="page"]{background:var(--yellow);color:var(--on-yellow);border-color:var(--edge)}
nav.main span{color:var(--ink2);border:2px dashed var(--grid);cursor:default}
nav.main span small{font:700 .7rem var(--f-body);margin-left:4px;color:var(--ink2)}

/* piezas */
.sticker{background:var(--card);border:3px solid var(--edge);border-radius:22px;box-shadow:5px 5px 0 var(--shadow);padding:20px 22px;min-width:0}
.btn{display:inline-flex;align-items:center;gap:8px;font:800 1.05rem var(--f-display);padding:10px 18px;border-radius:14px;border:3px solid var(--edge);background:var(--blue);color:var(--on-blue);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--shadow);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shadow)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.btn.y{background:var(--yellow);color:var(--on-yellow)}
.btn.w{background:var(--card);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:default;box-shadow:none;transform:none}
.pill{display:inline-block;font:800 .8rem var(--f-display);padding:3px 11px;border-radius:999px;border:2px solid var(--edge);background:var(--yellow-s);color:var(--ink);letter-spacing:.03em}
.pill.soon{background:var(--card);border-style:dashed;color:var(--ink2)}
.crumbs{font:700 .95rem var(--f-display);padding:18px 0 4px}
.crumbs a{color:var(--ink2);text-decoration:none}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.pagehead{padding:10px 0 26px;display:grid;gap:10px}
.pagehead p{font-size:1.15rem;color:var(--ink2)}
.sec{padding:26px 0}
.sec>h2{margin-bottom:14px}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.notebook{background:var(--card);border:3px solid var(--edge);border-radius:6px 22px 22px 6px;box-shadow:5px 5px 0 var(--shadow);padding:18px 22px 18px 58px;position:relative;
  background-image:linear-gradient(transparent 31px,var(--grid) 32px);background-size:100% 32px}
.notebook::before{content:"";position:absolute;left:38px;top:0;bottom:0;width:3px;background:var(--red);opacity:.7}
.tape{position:absolute;top:-14px;left:50%;width:84px;height:26px;transform:translateX(-50%) rotate(-3deg);background:var(--yellow);opacity:.85;border:2px solid var(--edge)}
.foot{margin-top:40px;padding:22px 0 0;border-top:3px dashed var(--edge);color:var(--ink2);font-size:.95rem}
.foot p{margin:0}

/* tarjetas de curso y de contenido */
.course{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:transform .15s}
.course:hover{transform:rotate(-1deg) translateY(-4px)}
.course .ico{width:84px;height:84px;border:3px solid var(--edge);border-radius:20px;display:grid;place-items:center;background:var(--c-s)}
.course .ico svg{width:56px;height:56px}
.course h3{font-size:2rem}
.course p{margin:0;color:var(--ink2)}
.course.dim{opacity:.85}
.topic{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);position:relative}
.topic:hover{transform:translate(-2px,-3px);box-shadow:8px 8px 0 var(--shadow)}
.topic{transition:transform .12s,box-shadow .12s}
.topic .tag{align-self:flex-start}
.topic p{margin:0;color:var(--ink2);font-size:1rem}
.topic .go{margin-top:auto;font:800 1rem var(--f-display);color:var(--blue)}

/* tiras de cómic */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.frame{margin:0;background:var(--card);border:3px solid var(--edge);border-radius:14px;overflow:hidden;box-shadow:4px 4px 0 var(--shadow)}
.frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.frame figcaption{padding:10px 12px 12px;font-size:1rem;line-height:1.35}
.frame .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);border:2px solid var(--edge);font:800 .85rem var(--f-display);margin-right:6px}
.note{border-left:6px solid var(--teal);background:var(--teal-s);padding:10px 14px;border-radius:0 12px 12px 0;font-size:1rem;margin:14px 0}
.note.warn{border-color:var(--red);background:var(--red-s)}
.ref{font-size:.9rem;color:var(--ink2)}
table.t{border-collapse:separate;border-spacing:0;width:100%;border:3px solid var(--edge);border-radius:14px;overflow:hidden;background:var(--card)}
table.t th{background:var(--blue);color:var(--on-blue);font:800 1rem var(--f-display);text-align:left;padding:8px 12px}
table.t td{padding:9px 12px;border-top:2px solid var(--grid);vertical-align:top}
table.t td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto;max-width:100%}
.big{font:800 clamp(1.3rem,3.4vw,2.1rem)/1.15 var(--f-display)}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.15;margin:0 .15em}
.frac>span:first-child{border-bottom:.09em solid currentColor;padding:0 .25em .05em}
.frac>span:last-child{padding:.05em .25em 0}
sub,sup{line-height:0}
.fm{font-family:var(--f-display);font-weight:700;white-space:nowrap}
.fm i{font-style:italic;font-family:var(--f-display)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* iconos de línea */
.s{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s .f{fill:var(--yellow)}.s .fb{fill:var(--blue-s)}.s .fr{fill:var(--red-s)}.s .ft{fill:var(--teal-s)}
.ico.c-y{background:var(--yellow-s)}.ico.c-b{background:var(--blue-s)}.ico.c-r{background:var(--red-s)}.ico.c-t{background:var(--teal-s)}
.course.sticker,.topic.sticker{padding:20px}
.course .pill,.topic .tag{align-self:flex-start}
.hero{display:grid;gap:18px;padding:34px 0 18px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
@media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero p.lead{font-size:1.3rem;color:var(--ink2)}
.wave{width:100%;height:auto}
.wave path{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 .8em;padding:0;list-style:none}
.chips li{padding:4px 12px;border-radius:999px;border:2px solid var(--edge);background:var(--card);font-weight:700}
.yt{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.embed{width:100%;height:min(80vh,720px);border:3px solid var(--edge);border-radius:14px;background:var(--card)}
.ctrls{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ctrls label{font-weight:700;display:flex;align-items:center;gap:8px}
.ctrls input[type=range]{accent-color:var(--blue)}
.nlbox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px}
.nlbox input{width:5.2em;font:700 1.2rem var(--f-display);padding:6px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--card);color:var(--ink)}

/* cintillo, mascotas e imágenes */
:root{--img-bg:#FFFFFF}
.cintillo{margin:0 calc(-1*max(16px,env(safe-area-inset-right,0px))) 0 calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:7px max(16px,env(safe-area-inset-right,0px)) 7px max(16px,env(safe-area-inset-left,0px));background:var(--yellow);color:var(--on-yellow);text-align:center;font:700 .95rem/1.35 var(--f-body);border-bottom:3px solid var(--edge)}
.cintillo a{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cintillo a:focus-visible{outline:3px solid var(--on-yellow);box-shadow:none}
.brand img{width:38px;height:auto;flex:none;display:block}
.mascot{display:block;background:var(--img-bg);border:3px solid var(--edge);border-radius:24px;box-shadow:5px 5px 0 var(--shadow);padding:8px;object-fit:contain;height:auto}
.pagehead.has-pic{grid-template-columns:minmax(0,1fr) auto;column-gap:22px;align-items:center}
.pagehead.has-pic>.mascot{grid-column:2;grid-row:1/span 4;width:clamp(120px,19vw,200px)}
.pagehead.has-pic>*:not(.mascot){grid-column:1}
@media (max-width:560px){.pagehead.has-pic{grid-template-columns:minmax(0,1fr) 104px}.pagehead.has-pic>.mascot{width:104px;padding:5px;border-radius:18px;box-shadow:3px 3px 0 var(--shadow)}}
.mascot.side{float:right;width:clamp(110px,16vw,170px);margin:0 0 10px 18px}
.mascot.res{float:right;width:110px;margin:0 0 8px 14px}
.course .ico{width:96px;height:96px;overflow:hidden;background:var(--img-bg)}
.course .ico img{width:100%;height:100%;object-fit:contain;padding:4px}
.course .ico img.cover{object-fit:cover;padding:0}
.hero .mascot{width:min(100%,360px);margin:0 auto;padding:14px}
.chan{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);padding:18px}
.chan h3{font-size:1.3rem}.chan p{margin:0;color:var(--ink2)}
.chan .go{margin-top:auto;font:800 1rem var(--f-display);color:var(--blue)}
.poster{display:block;width:100%;max-width:440px;height:auto;border:3px solid var(--edge);border-radius:18px;box-shadow:6px 6px 0 var(--shadow)}
.duo{display:grid;gap:26px;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center}
@media (max-width:720px){.duo{grid-template-columns:minmax(0,1fr)}}

.tbtn{font:700 .95rem var(--f-display);padding:6px 14px;border-radius:999px;border:2px solid var(--edge);background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap}
.tbtn:hover{background:var(--yellow-s)}