/* Dirección: la pizarra blanca del canal. Fondo de pizarra con cuadrícula tenue, titulares en Archivo muy ancho,
   anotaciones a rotulador (Kalam) y un color de rotulador por bloque. Lo llamativo está en un solo sitio:
   la línea del tiempo de la portada, que se dibuja al cargar. El resto, sobrio. Tema único, claro, a propósito. */
:root {
  --board: #fbfbf7;
  --paper: #ffffff;
  --ink: #12151a;
  --muted: #5d6470;
  --line: #e2e3dc;
  --hi: #ffe14d;            /* subrayador */
  --red: #d32f2f;           /* rotulador rojo: lo que corrige el profesor */
  --m-a: #13834a;           /* rotuladores de cada bloque */
  --m-b: #1f4fd1;
  --m-c: #c62828;
  --m-d: #6b33c9;
  --focus: #1f4fd1;
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --body: "Archivo", "Segoe UI", system-ui, sans-serif;
  --hand: "Kalam", "Comic Sans MS", "Segoe Print", cursive;
  --r: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--board);
  background-image: radial-gradient(circle, rgba(18, 21, 26, .07) 1px, transparent 1.2px);
  background-size: 26px 26px;
  color: var(--ink); font-family: var(--body); font-size: 16.5px; line-height: 1.55;
  font-variation-settings: "wdth" 100;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.02; text-wrap: balance; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: 22px; padding-right: 22px; }
.hand { font-family: var(--hand); font-weight: 700; }
.hl { background: linear-gradient(transparent 60%, var(--hi) 60%, var(--hi) 92%, transparent 92%); padding: 0 .08em; }

/* ---------- Cabecera ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(251, 251, 247, .88); backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--ink); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { font-family: var(--display); font-weight: 900; font-size: 1.25rem; text-decoration: none; letter-spacing: -.01em; font-variation-settings: "wdth" 115; text-transform: uppercase; }
.logo span { color: var(--paper); background: var(--ink); padding: 1px 8px 2px; border-radius: 6px; margin-left: 2px; }
.sub-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; padding: 10px 16px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.sub-btn svg { width: 18px; height: 18px; fill: currentColor; }
.sub-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.sub-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ---------- Portada ---------- */
.hero { padding-top: 44px; display: grid; gap: 22px; position: relative; }
.kicker { font-family: var(--hand); font-weight: 700; font-size: 1.3rem; color: var(--m-b); transform: rotate(-1.5deg); transform-origin: left; width: fit-content; }
.hero h1 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 7.6vw, 6.4rem); letter-spacing: -.035em; line-height: .9;
  font-variation-settings: "wdth" 118;
}
.hero h1 .row2 { display: block; font-variation-settings: "wdth" 62; font-weight: 800; letter-spacing: -.02em; }
.hero h1 em { font-style: normal; position: relative; white-space: nowrap; }
.hero h1 em svg { position: absolute; left: -2%; bottom: -.08em; width: 104%; height: .32em; overflow: visible; }
.hero h1 em path { fill: none; stroke: var(--hi); stroke-width: 22; stroke-linecap: butt; }
.hero h1 em span { position: relative; }
.hero-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.hero p.lead { margin: 0; max-width: 54ch; font-size: 1.12rem; color: var(--muted); }
.stamp { font-family: var(--hand); font-size: 1.05rem; line-height: 1.25; color: var(--red); border: 2.5px solid var(--red); border-radius: 12px; padding: 8px 14px; transform: rotate(3deg); text-align: center; background: var(--paper); }
.stamp b { display: block; font-size: 1.6rem; font-family: var(--display); font-variation-settings: "wdth" 80; line-height: 1; }

.search { position: relative; display: block; max-width: 760px; }
.search svg { position: absolute; left: 20px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2.4; }
.search input { width: 100%; font: inherit; font-size: 1.12rem; font-weight: 500; padding: 18px 20px 18px 54px; border-radius: 14px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: box-shadow .12s, transform .12s; }
.search input::placeholder { color: #8a909a; }
.search input:focus { outline: none; transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--m-b); }

/* ---------- La línea del tiempo (el momento llamativo) ---------- */
.timeline { position: relative; margin-top: 18px; padding-top: 20px; }
.tl-note { position: absolute; right: 0; top: -30px; font-family: var(--hand); font-weight: 700; color: var(--muted); font-size: 1.05rem; transform: rotate(-2deg); }
.tl-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-seg { --m: var(--ink); position: relative; text-decoration: none; padding: 40px 18px 18px 0; display: grid; gap: 6px; align-content: start; cursor: pointer; border-radius: 10px; }
.tl-seg svg.stroke { position: absolute; left: 0; top: 10px; width: 100%; height: 20px; overflow: visible; }
.tl-seg svg.stroke path { fill: none; stroke: var(--m); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tl-seg::before { content: ""; position: absolute; left: -7px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3.5px solid var(--ink); z-index: 1; }
.tl-seg:last-child::after { content: ""; position: absolute; right: -4px; top: 9px; border: 11px solid transparent; border-left: 16px solid var(--m); border-right: 0; }
.tl-year { position: absolute; left: 0; top: -18px; font-family: var(--hand); font-weight: 700; font-size: 1.15rem; translate: -30% 0; white-space: nowrap; }
.tl-seg:first-child .tl-year { translate: -10% 0; }
.tl-letter { font-family: var(--display); font-weight: 900; font-size: 3.4rem; line-height: .9; color: var(--m); font-variation-settings: "wdth" 125; }
.tl-title { font-weight: 700; font-size: 1rem; line-height: 1.25; max-width: 24ch; }
.tl-meta { font-size: .86rem; color: var(--muted); }
.tl-meta b { color: var(--ink); }
.tl-seg:hover .tl-title { text-decoration: underline; text-decoration-color: var(--m); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.tl-end { position: absolute; right: 0; top: 2px; font-family: var(--hand); font-weight: 700; font-size: 1.15rem; }

@media (prefers-reduced-motion: no-preference) {
  .tl-seg svg.stroke path { stroke-dashoffset: 1; animation: draw .55s cubic-bezier(.6, .05, .4, 1) forwards; animation-delay: calc(var(--i) * .5s + .25s); }
  .tl-seg::before, .tl-year, .tl-letter, .tl-title, .tl-meta { opacity: .001; animation: pop .35s ease-out forwards; animation-delay: calc(var(--i) * .5s + .2s); }
  .tl-seg:last-child::after, .tl-end { opacity: .001; animation: pop .3s ease-out forwards; animation-delay: 2.2s; }
  .hero h1 em path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .6s ease-out .45s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: .001; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Secciones ---------- */
.section { padding-top: 64px; display: grid; gap: 18px; }
.sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sec-head h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.02em; font-variation-settings: "wdth" 112; }
.sec-head .hand { color: var(--m-b); font-size: 1.2rem; transform: rotate(-2deg); }

/* El examen: una sola barra dividida, como en la pizarra */
.exam-bar { display: grid; border: 2.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
.exam-part { padding: 18px 20px 20px; display: grid; gap: 4px; align-content: start; border-left: 2.5px solid var(--ink); }
.exam-part:first-child { border-left: 0; }
.exam-part .pct { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .9; font-variation-settings: "wdth" 70; font-variant-numeric: tabular-nums; }
.exam-part .pct small { font-size: .5em; }
.exam-part strong { font-size: 1.05rem; }
.exam-part span { font-size: .88rem; color: var(--muted); }
.exam-part.p-a { background: color-mix(in srgb, var(--m-a) 9%, var(--paper)); }
.exam-part.p-a .pct { color: var(--m-a); }
.exam-part.p-b .pct { color: var(--m-b); }
.exam-part.p-c .pct { color: var(--m-c); }
.exam-rule { margin: 0; color: var(--muted); font-size: .94rem; max-width: 92ch; }

/* Vídeos de método: fichas numeradas */
.method { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.mcard { position: relative; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 16px 16px 14px; text-decoration: none; display: grid; gap: 14px; align-content: space-between; min-height: 168px; transition: transform .15s, box-shadow .15s; }
.mcard:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.mcard .n { font-family: var(--hand); font-weight: 700; font-size: 2.2rem; line-height: .8; color: var(--m-b); }
.mcard h3 { font-size: 1rem; font-weight: 700; line-height: 1.25; }

/* Estados */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.st-publicado { background: var(--ink); color: var(--paper); }
.st-publicado::before { content: ""; border: 5px solid transparent; border-left: 8px solid var(--hi); border-right: 0; }
.st-en-preparacion { border: 1.5px dashed #9aa0a8; color: var(--muted); }
.st-pendiente { color: #8a909a; font-weight: 600; padding-left: 0; padding-right: 0; }
.st-visto { color: var(--m-a); border: 2px solid currentColor; }
.exam-tag { font-family: var(--hand); font-weight: 700; color: var(--red); font-size: .98rem; line-height: 1; padding: 5px 10px 3px; border: 2px solid var(--red); border-radius: 50% 46% 52% 44% / 60% 50% 58% 46%; transform: rotate(-3deg); white-space: nowrap; }

/* ---------- Temario ---------- */
.filters { position: sticky; top: 64px; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; background: linear-gradient(var(--board) 80%, transparent); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: inherit; font-weight: 700; font-size: .9rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); padding: 7px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.chip .n { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip:hover { background: var(--hi); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.jump { display: flex; gap: 6px; align-items: center; font-family: var(--hand); font-weight: 700; font-size: 1.05rem; color: var(--muted); }
.jump a { font-family: var(--display); font-weight: 900; font-size: .95rem; text-decoration: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--m); color: var(--m); }
.jump a:hover { background: var(--m); color: var(--paper); }

.blocks { display: grid; gap: 28px; }
.block { --m: var(--ink); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; scroll-margin-top: 140px; padding-top: 22px; border-top: 3px solid var(--m); }
.block-head { display: grid; gap: 8px; align-content: start; position: sticky; top: 140px; align-self: start; }
.block-head .letter { font-family: var(--display); font-weight: 900; font-size: 6rem; line-height: .8; color: transparent; -webkit-text-stroke: 2.5px var(--m); font-variation-settings: "wdth" 125; }
.block-head .years { font-family: var(--hand); font-weight: 700; color: var(--m); font-size: 1.15rem; }
.block-head h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.15; }
.block-head p { margin: 0; font-size: .86rem; color: var(--muted); }
.temas { display: grid; gap: 14px; }
.tema { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 6px 8px 8px; }
.tema h4 { padding: 12px 12px 8px; font-size: 1.05rem; font-weight: 800; display: flex; gap: 10px; align-items: baseline; }
.tema h4 .tn { font-family: var(--hand); color: var(--m); font-size: 1.15rem; white-space: nowrap; }
.eps { list-style: none; margin: 0; padding: 0; }
.ep { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 12px; border-radius: 10px; text-decoration: none; transition: background .12s; }
.ep:hover { background: color-mix(in srgb, var(--hi) 40%, transparent); }
.ep .num { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 80; font-size: 1.1rem; color: var(--m); font-variant-numeric: tabular-nums; }
.ep .t { font-weight: 500; }
.ep .tags { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ep.is-pendiente .t { color: #4a505a; }
.empty { text-align: center; padding: 48px 20px; background: var(--paper); border: 2px dashed #b9bdc4; border-radius: var(--r); }
.empty p { margin: 0 0 14px; font-family: var(--hand); font-size: 1.4rem; color: var(--muted); }

/* ---------- Página de epígrafe ---------- */
.back { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: .95rem; text-decoration: none; padding: 26px 0 16px; }
.back:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.video-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 32px; padding-bottom: 40px; }
.player { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; border: 10px solid #2b2f36; box-shadow: 0 0 0 2px var(--ink), 8px 8px 0 var(--ink); }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.ph { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; gap: 10px; padding: 24px;
  background-color: var(--paper); background-image: radial-gradient(circle, rgba(18, 21, 26, .08) 1px, transparent 1.2px); background-size: 22px 22px; }
.ph strong { font-family: var(--hand); font-weight: 700; color: var(--m); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.05; transform: rotate(-2deg); }
.ph span { color: var(--muted); max-width: 42ch; margin: 0 auto; }
.ph a { font-weight: 700; }
.info { display: grid; gap: 16px; padding-top: 26px; }
.crumb { font-family: var(--hand); font-weight: 700; font-size: 1.15rem; color: var(--m); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.info h1 { font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.02em; line-height: 1; font-variation-settings: "wdth" 88; }
.info .yt { margin: 0; color: var(--muted); font-size: .92rem; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { font: inherit; font-weight: 700; font-size: .93rem; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn.primary { background: var(--hi); }
.box { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 10px; }
.box h2 { font-size: 1.1rem; font-weight: 800; }
.box p, .box li { font-size: .97rem; margin: 0; }
.box ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.box li::marker { color: var(--m); }
.quote { border-left: 4px solid var(--m); padding: 2px 0 2px 14px; }
.quote small { display: block; font-family: var(--hand); font-weight: 700; font-size: 1rem; color: var(--red); }
.side { display: grid; gap: 16px; align-content: start; }
.side .box { gap: 8px; }
.side .ep { grid-template-columns: 42px minmax(0, 1fr) auto; font-size: .93rem; padding: 9px 10px; }
.side .ep[aria-current="page"] { background: var(--hi); }
.side .ep[aria-current="page"] .t { font-weight: 700; }
.small { font-size: .86rem; color: var(--muted); margin: 0; }
.progress { height: 8px; border: 1.5px solid var(--ink); border-radius: 99px; overflow: hidden; background: var(--paper); }
.progress span { display: block; height: 100%; background: var(--m); }

/* ---------- Pie ---------- */
.foot { margin-top: 80px; background: var(--ink); color: #c9cdd3; font-size: .88rem; }
.foot .wrap { padding-top: 36px; padding-bottom: 40px; display: grid; gap: 8px; }
.foot .big { font-family: var(--hand); font-weight: 700; font-size: 1.5rem; color: var(--paper); margin-bottom: 6px; }
.foot .big a { color: var(--hi); }
.foot p { margin: 0; max-width: 92ch; }

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 1000px) {
  .method { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .video-layout { grid-template-columns: 1fr; }
  .block { grid-template-columns: 1fr; gap: 14px; }
  .block-head { position: static; grid-template-columns: auto 1fr; column-gap: 16px; align-items: end; }
  .block-head .letter { grid-row: span 2; font-size: 4.4rem; }
  .block-head p { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hero-sub { grid-template-columns: 1fr; }
  .stamp { justify-self: start; }
  .tl-note { position: static; display: block; margin-bottom: 8px; }
  .tl-track { grid-template-columns: 1fr; padding-left: 22px; }
  .tl-seg { padding: 4px 0 26px 22px; }
  .tl-seg svg.stroke { display: none; }
  .tl-track { border-left: 6px solid var(--ink); border-image: linear-gradient(var(--m-a) 0 25%, var(--m-b) 25% 50%, var(--m-c) 50% 75%, var(--m-d) 75%) 1; padding-left: 0; margin-left: 6px; }
  .tl-seg::before { left: -16px; top: 8px; }
  .tl-seg:last-child::after { display: none; }
  .tl-year { position: static; translate: none !important; }
  .tl-end { position: static; display: block; padding-left: 22px; }
  .tl-letter { font-size: 2.4rem; }
  .exam-bar { grid-template-columns: 1fr !important; }
  .exam-part { border-left: 0; border-top: 2.5px solid var(--ink); }
  .exam-part:first-child { border-top: 0; }
  .sub-btn span { display: none; }
  .ep { grid-template-columns: 44px minmax(0, 1fr); }
  .ep .tags { grid-column: 2; justify-content: flex-start; }
  .jump { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Sello «programa oficial» y fuentes ---------- */
.seal { display: flex; gap: 14px; align-items: center; background: var(--paper); border: 2px solid var(--m-a); border-radius: 14px; padding: 12px 16px; }
.seal-ic { flex: none; width: 40px; height: 40px; }
.seal-ic circle { fill: var(--m-a); }
.seal-ic path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.seal div { display: grid; gap: 1px; }
.seal strong { font-weight: 800; font-size: 1rem; color: var(--m-a); }
.seal span { font-size: .9rem; }
.seal a { font-size: .86rem; font-weight: 700; }
.seal-big { width: fit-content; max-width: 760px; padding: 14px 20px 14px 14px; box-shadow: 4px 4px 0 var(--m-a); }
.seal-big .seal-ic { width: 52px; height: 52px; }
.seal-big strong { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; font-variation-settings: "wdth" 105; letter-spacing: .005em; }
.seal-big span { font-size: .98rem; font-weight: 600; }
.sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sources a, .sources div { display: grid; gap: 4px; height: 100%; background: var(--paper); border: 1.5px solid var(--line); border-left: 5px solid var(--m-a); border-radius: 12px; padding: 14px 16px; text-decoration: none; }
.sources a:hover { border-color: var(--ink); border-left-color: var(--m-a); }
.sources .who { font-weight: 800; font-size: .92rem; }
.sources .what { font-size: .88rem; color: var(--muted); }

[hidden] { display: none !important; }