:root{color-scheme:light;--ink:#162747;--muted:#4a5d77;--paper:#f3f6fc;--line:#d5deef;--blue:#204890;--dark:#132957;--light:#e8f0ff;--accent:#ffe39b}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.6 "Instrument Sans",system-ui,sans-serif}
a{color:var(--blue);text-underline-offset:.18em}
a:hover{text-decoration-thickness:.15em}
:focus-visible{outline:3px solid #a84500;outline-offset:4px}
.wrap{width:min(1120px,calc(100% - 2rem));margin-inline:auto}
header{background:white;border-bottom:1px solid var(--line)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.9rem 0;font-size:.92rem}
.bar a{font-weight:800;text-decoration:none;color:var(--ink)}
.bar span{color:var(--muted)}
main{padding:1.8rem 0 3rem}
nav{margin-bottom:1rem;color:var(--muted)}
.hero{border-radius:1.2rem;background:var(--dark);color:#fff;padding:clamp(1.35rem,6vw,4rem);border-top:.4rem solid #89a9fa}
h1,h2,h3{line-height:1.18}
h1{font-size:clamp(2.5rem,8vw,5.15rem);letter-spacing:-.06em;margin:.3rem 0 1rem}
h2{font-size:clamp(1.45rem,4vw,2.15rem);letter-spacing:-.035em}
h3{font-size:1.1rem}
.hero p{max-width:62ch}
.eyebrow{letter-spacing:.12em;font-size:.81rem;font-weight:750;color:var(--accent);margin:0}
.hero-links,.files{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.25rem}
.hero-links a,.file{display:inline-block;padding:.55rem .85rem;border-radius:.5rem;font-weight:700}
.hero-links a{color:var(--dark);background:var(--accent)}
.hero-links a+a{background:#eef4ff}
.file{background:var(--light);overflow-wrap:anywhere}
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tile{display:block;background:#fff;padding:1.4rem;border:1px solid var(--line);border-radius:.85rem;color:var(--ink);text-decoration:none}
.tile h3{font-size:1.35rem;margin-top:0}
.tile span{color:var(--muted);font-weight:700}
.active{border:2px solid var(--blue)}
.active span{color:var(--blue);text-decoration:underline}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:.8rem;background:#fff}
table{border-collapse:collapse;width:100%;min-width:670px}
th,td{padding:.75rem .85rem;text-align:left;vertical-align:top}
thead{background:#dfe9fc}
tr+tr th,tr+tr td{border-top:1px solid var(--line)}
.badge,.number{display:inline-block;border-radius:.35rem;padding:.19rem .5rem;background:var(--light);color:var(--ink);font-weight:750;font-size:.88rem}
.grade{background:var(--accent)}
.tutorial,.session{background:white;border:1px solid var(--line);border-radius:1rem;margin-top:1.4rem;padding:clamp(1.1rem,4vw,2rem)}
.tutorial h2,.session h2{margin:.45rem 0}
.session-top{display:flex;align-items:center;gap:.55rem;margin-bottom:.65rem}
.number{background:var(--dark);color:white}
.mode{color:var(--muted);margin:.2rem 0}
.objective strong{margin-right:.35em}
.session-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:1.25rem;margin:1rem 0}
.delivery{background:#f4f7ff;border-radius:.65rem;padding:0 1rem}
ol,ul{padding-left:1.35em}
li+li{margin-top:.42em}
details{border-top:1px solid var(--line);padding:.7rem 0}
summary{cursor:pointer;color:var(--blue);font-weight:700}
details p{margin:.5rem 0 0}
.back{display:inline-block;margin-top:1rem}
footer{padding:1rem 0 2rem;border-top:1px solid var(--line);color:var(--muted)}
.skip{position:absolute;left:.8rem;top:-9rem;background:white;padding:.6rem}
.skip:focus{top:.8rem}
@media(max-width:680px){.blocks,.session-grid{grid-template-columns:1fr}.bar{flex-wrap:wrap}.wrap{width:calc(100% - 1.25rem)}}

/* Portada e índices de sesión */
.portada{margin:.35rem 0 1.5rem}
.portada h1{font-size:clamp(2rem,5vw,3.25rem);margin:0}
.portada p{margin:.5rem 0 0;color:var(--ink)}
.pastillas,.lista-sesiones{list-style:none;margin:0;padding:0}
.pastillas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.pastilla,.entrada-sesion{display:flex;gap:.45rem;border:1px solid #ccd6e8;background:#fff;color:var(--ink);border-radius:.85rem;text-decoration:none;padding:1rem}
.pastilla{flex-direction:column;min-height:6rem}
.pastilla strong{font-size:1.2rem}
.pastilla:hover,.entrada-sesion:hover{border-color:#233d72;background:#eef3ff}
.lista-sesiones{display:grid;gap:.5rem}
.entrada-sesion{align-items:center;justify-content:space-between;gap:.75rem}
.entrada-sesion .badge{flex:none}
.ruta,.pasos{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.pasos{justify-content:space-between;margin:1.2rem 0}
.pasos a{padding:.65rem .8rem;background:#fff;border:1px solid #ccd6e8;border-radius:.55rem}
.session h1,#calcula-tu-nota h1{font-size:clamp(1.85rem,5vw,2.75rem);margin:.5rem 0}
@media(max-width:850px){.pastillas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.pastillas{grid-template-columns:1fr}.entrada-sesion{align-items:flex-start;flex-direction:column}}

/* Monograma ER2 del pie de pagina */
.pie-er2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
}
.pie-er2 > svg {
  display: block;
  justify-self: end;
  width: auto;
  height: 40px;
}
@media (max-width: 480px) {
  .pie-er2 > svg { height: 36px; }
}