/* Ferroaula. Hoja de estilos de la web de estudio.
   Identidad gráfica Ferroaula (sistema visual Renfe Campus · ETPCO, manual v06):
   gama ETPCO, degradado ETPCO, módulo orgánico y tipografía Poppins con Arial de respaldo.
   Sin sombras, 3D ni subrayados decorativos. */

/* Poppins incluida en la web (licencia SIL Open Font License): funciona sin conexión */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: local('Poppins Regular'), local('Poppins-Regular'), url(../fonts/poppins-regular.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: local('Poppins Italic'), local('Poppins-Italic'), url(../fonts/poppins-italic.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500 600; font-display: swap; src: local('Poppins Medium'), local('Poppins-Medium'), url(../fonts/poppins-medium.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700 900; font-display: swap; src: local('Poppins Bold'), local('Poppins-Bold'), url(../fonts/poppins-bold.woff) format('woff'); }

:root {
  /* tokens de marca */
  --fa-azul: #2B598D;          /* principal */
  --fa-azul-claro: #2B9BD3;    /* degradado del logo, acentos finos */
  --fa-azul-oscuro: #094B96;   /* secundario */
  --fa-verde: #80B73F;         /* secundario: destacados */
  --fa-verde-claro: #80E663;   /* final del degradado ETPCO */
  --fa-naranja: #FF540D;       /* secundario: acento puntual */
  --fa-gris-claro: #D5D5D5;
  --fa-texto: #464646;
  --fa-grad-etpco: linear-gradient(135deg, #30759E, #80E663);
  --fa-grad-campus: linear-gradient(90deg, #2B9BD3, #2B598D);
  --fa-font: 'Poppins', Arial, sans-serif;

  /* alias de trabajo (mismos colores de la gama) */
  --azul: var(--fa-azul);
  --azul-intenso: var(--fa-azul);
  --azul-oscuro: var(--fa-azul-oscuro);
  --naranja: var(--fa-naranja);
  --naranja-texto: #C2410C; /* naranja ETPCO oscurecido solo para texto pequeño (contraste AA) */
  --verde: var(--fa-verde);
  --verde-texto: #4E7F1E;   /* verde ETPCO oscurecido solo para texto (contraste AA) */
  --cielo: #30759E;         /* arranque del degradado ETPCO */
  --morado: var(--fa-azul-oscuro);
  --tinta: var(--fa-texto);
  --tinta-suave: #5E5E5E;
  --gris-linea: var(--fa-gris-claro);
  --suave-azul: #EAF1F8;
  --suave-gris: #F4F5F7;
  --suave-naranja: #FFEEE6;
  --suave-verde: #EFF7E6;
  --suave-morado: #E8EEF6;
  --degradado: var(--fa-grad-etpco);
  --fuente: var(--fa-font);
  --r: 14px;
  --sombra: none;
  --topbar-h: 64px;
  --railbar-h: 76px;
  /* módulo orgánico (lado curvo, esquinas redondeadas) para máscaras y fondos */
  --modulo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M14 6 C40 4 70 1 90 2 C97 2.5 99 7 98 13 L90 82 C89 92 84 96 74 96 C50 96 30 98 10 99 C3 99 1 95 2 88 L6 14 C6.5 9 9 6.5 14 6 Z'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); color: var(--tinta); background: #fff; line-height: 1.5; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--azul-intenso); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { color: var(--fa-azul); line-height: 1.2; font-weight: 700; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--fa-azul); color: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 100; }
.skip:focus { top: 1rem; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1.15rem; border-radius: 999px;
  border: 2px solid var(--azul); background: #fff; color: var(--azul); font: 600 1rem/1.2 var(--fuente); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--suave-azul); }
.btn-primary { background: var(--fa-azul); border-color: var(--fa-azul); color: #fff; }
.btn-primary:hover { background: var(--fa-azul-oscuro); border-color: var(--fa-azul-oscuro); }
.btn-green { background: var(--verde-texto); border-color: var(--verde-texto); color: #fff; }
.btn-green:hover { background: #3F6A16; border-color: #3F6A16; }
.btn-light { background: #fff; border-color: #fff; color: var(--fa-azul); }
.btn-light:hover { background: #EAF1F8; border-color: #EAF1F8; }
.btn-ghost { background: transparent; border-color: rgb(255 255 255 / .85); color: #fff; }
.btn-ghost:hover { background: rgb(255 255 255 / .14); }
.btn-small { min-height: 36px; padding: .35rem .9rem; font-size: .9375rem; }
.btn-lg { min-height: 52px; padding: .7rem 1.5rem; font-size: 1.0625rem; }
.btn[aria-pressed="true"] { background: var(--azul-intenso); color: #fff; border-color: var(--azul-intenso); }

/* =====================================================================
   PORTADA DEL CURSO
   ===================================================================== */
.landing { background: #fff; }
.l-band { height: 6px; background: var(--fa-grad-etpco); }
.l-top { max-width: 1240px; margin: 0 auto; padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem) .5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.l-logo { width: clamp(190px, 24vw, 280px); display: block; }
.l-top .btn { flex: none; }

.hero { max-width: 1240px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero-kicker { display: inline-block; margin: 0 0 1rem; padding: .3rem .9rem; border-radius: 999px; background: var(--fa-verde); color: #fff; font-weight: 600; font-size: .9375rem; }
.hero h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.02em; color: var(--fa-azul); max-width: 14ch; }
.hero h1 .grad { background: var(--fa-grad-campus); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { margin: 0 0 1.75rem; font-size: clamp(1.0625rem, 1.6vw, 1.2rem); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-art img { display: block; width: 100%; max-width: 540px; margin-left: auto; }

.subjects, .howto { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.subjects > h2, .howto > h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 0 0 1.5rem; }
.subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); }
.subject { background: #fff; border: 1px solid var(--gris-linea); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.subject-art { position: relative; aspect-ratio: 3 / 1.45; background: var(--degradado); overflow: hidden; }
/* módulo de diseño Renfe: forma inclinada 10° con interior fotográfico */
.subject-art img { position: absolute; inset: 8% 6% -10% 6%; width: 88%; height: 102%; object-fit: cover;
  clip-path: url(#modulo); -webkit-clip-path: url(#modulo); border-radius: 0; }
.subject-art::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; right: -14%; top: -38%; border-radius: 50%; background: rgb(43 89 141 / .55); }
.subject-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 16%; background: #fff; clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%); }
.subject-body { padding: 1.25rem clamp(1.25rem, 2.5vw, 2rem) 1.75rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.subject-kicker { margin: 0; color: var(--fa-azul-claro); font-weight: 600; font-size: .9375rem; }
.subject h3 { margin: .1rem 0 .5rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; }
.subject-sum { margin: 0 0 .25rem; }
.subject-meta { margin: 0 0 1rem; color: var(--tinta-suave); font-size: .9375rem; }
.subject-actions { margin-top: auto; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* línea de estaciones: el índice de cada asignatura dibujado como una línea ferroviaria */
.line { list-style: none; margin: 0; padding: 0; position: relative; }
.line::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #2B9BD3, #2B598D); }
.line li { position: relative; }
.line a { display: grid; grid-template-columns: 26px 1fr; column-gap: .9rem; align-items: baseline; padding: .42rem 0; text-decoration: none; color: var(--tinta); border-radius: 8px; }
.line a::before { content: ""; width: 18px; height: 18px; margin-left: 4px; align-self: center; border-radius: 50%; background: #fff; border: 4px solid var(--fa-verde); position: relative; z-index: 1; }
.line a:hover .stop-t { color: var(--fa-azul); }
.line a:hover::before { background: var(--fa-verde); }
.line li.minor a { padding: .22rem 0; }
.line li.minor a::before { width: 12px; height: 12px; margin-left: 7px; border-width: 3px; border-color: var(--azul-intenso); }
.line li.minor .stop-t { font-weight: 400; font-size: .9375rem; }
.stop-k { grid-column: 2; font-size: .8125rem; font-weight: 600; color: var(--fa-azul-claro); text-transform: uppercase; letter-spacing: .04em; }
.stop-t { grid-column: 2; font-weight: 600; line-height: 1.3; }

.howto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.tip { position: relative; padding: 1.4rem 1.4rem 1.5rem; border-radius: 18px; background: var(--suave-azul); }
.tip-ico { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .9rem; border-radius: 50%; background: var(--fa-azul); color: #fff; }
.tip:nth-child(2) .tip-ico { background: var(--fa-azul-claro); }
.tip:nth-child(3) .tip-ico { background: var(--fa-verde); }
.tip-ico svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tip h3 { margin: 0 0 .4rem; font-size: 1.125rem; }
.tip p { margin: 0; }

.l-foot { max-width: 1240px; margin: 0 auto; padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem) 2.5rem; border-top: 1px solid var(--gris-linea);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; color: var(--tinta-suave); font-size: .875rem; }
.l-foot img { width: 170px; }
.l-foot p { margin: 0; flex: 1; min-width: 14rem; }
.pill { display: inline-block; padding: .25rem .9rem; border-radius: 999px; background: var(--fa-verde); color: #fff; font-weight: 600; font-size: .8125rem; letter-spacing: .02em; }

/* =====================================================================
   VISOR DE PRESENTACIONES
   ===================================================================== */
.viewer[data-deck="legislacion"] .slide-body { font-size: 1.125rem; }
.viewer { min-height: 100vh; min-height: 100dvh; background: #F2F5F9; }
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); background: #fff; border-bottom: 0; box-shadow: none;
  display: flex; align-items: center; gap: 1rem; padding: 0 clamp(.75rem, 2.5vw, 1.75rem); padding-top: env(safe-area-inset-top, 0px); }
.tb-logo { flex: none; display: block; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--fa-grad-etpco); }
.tb-logo img { display: block; height: 44px; width: auto; }
.tb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--gris-linea); padding-left: 1rem; }
.tb-subject { font-weight: 700; color: var(--fa-azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-section { font-size: .875rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-btn { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--gris-linea); background: #fff; color: var(--azul-intenso); font: 600 .9375rem var(--fuente); text-decoration: none; cursor: pointer; }
.tb-btn:hover { background: var(--suave-azul); }
.tb-btn svg, .nav-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.stage { display: block; padding: clamp(.75rem, 2.5vw, 2rem) clamp(.75rem, 3vw, 2.5rem) calc(var(--railbar-h) + 2rem + env(safe-area-inset-bottom, 0px)); outline: none; }
.js .slide[hidden] { display: none; }

.slide { position: relative; max-width: 1240px; margin: 0 auto 2rem; background: #fff; border-radius: 22px; border: 1px solid #E2E7EE;
  min-height: min(720px, calc(100dvh - var(--topbar-h) - var(--railbar-h) - 4rem)); overflow: hidden; }
.js .slide { margin-bottom: 0; }
.slide { scroll-margin-top: calc(var(--topbar-h) + 1rem); }

/* cabecera de diapositiva: pestaña inclinada (módulo Renfe) con el número */
.slide-head { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem) 0 clamp(5.25rem, 9vw, 7.5rem); }
.slide-tab { position: absolute; left: clamp(1rem, 2vw, 1.75rem); top: clamp(1rem, 2.4vw, 1.75rem); width: clamp(3.1rem, 5vw, 3.9rem); height: clamp(3rem, 4.8vw, 3.7rem);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.25rem); z-index: 0;
  background: var(--fa-grad-etpco); -webkit-mask: var(--modulo) center / 100% 100% no-repeat; mask: var(--modulo) center / 100% 100% no-repeat; }
.slide-sec { margin: 0 0 .25rem; color: var(--fa-azul-claro); font-size: .9375rem; font-weight: 600; }
.slide-head h2 { margin: 0; display: flex; align-items: flex-start; gap: .65rem; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.01em; }
.t-ico { width: 1.6em; height: 1.6em; flex: none; margin-top: -.12em; }
.slide-tools { padding: .9rem clamp(1.25rem, 4vw, 3rem) 0 clamp(5.25rem, 9vw, 7.5rem); }
.slide-body { padding: clamp(1rem, 2.6vw, 1.75rem) clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 9vw, 7.5rem); font-size: 1.0625rem; }

/* ---------- maquetación interna ---------- */
.stk { display: flex; flex-direction: column; gap: clamp(.75rem, 1.6vw, 1.15rem); min-width: 0; }
.row { display: grid; grid-template-columns: var(--cols); gap: clamp(.9rem, 2vw, 1.5rem); align-items: start; min-width: 0; }
.row.eq { align-items: stretch; }
.row.eq > .card.mid { justify-content: flex-start; }
.scale-bar { height: 14px; border-radius: 2px; position: relative; margin: .1rem 0 .4rem; }
.scale-bar::before, .scale-bar::after { content: ""; position: absolute; top: -10px; width: 5px; height: 34px; background: var(--tinta); border-radius: 1px; }
.scale-bar::before { left: 0; } .scale-bar::after { right: 0; }
.scale-bar.f-orange { background: var(--naranja); }
.media { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: center; min-width: 0; }
.media > .ico { width: 2.3rem; height: 2.3rem; }
.row > *, .stk > * { min-width: 0; }

/* ---------- texto ---------- */
.tx p, .tx h3, .tx ul, .tx ol { margin: 0; }
.tx > * + * { margin-top: .55em; }
.tx .gap { margin-top: 1.1em; }
.tx h3 { font-size: 1.125rem; font-weight: 700; }
.tx h3.lg { font-size: 1.3rem; }
.tx .lg { font-size: 1.25rem; }
.tx .md { font-size: 1.125rem; }
.tx .sm { font-size: .96rem; }
.tx .xs { font-size: .875rem; color: var(--tinta-suave); }
.tx .stat { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: var(--fa-azul); }
.tx .stat .c-orange { color: var(--naranja); }
.tx .xxl { font-size: 3rem; font-weight: 700; }
.row.many .tx .stat { font-size: clamp(1.45rem, 2.3vw, 2rem); white-space: nowrap; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.c-blue { color: var(--azul-intenso); }
.c-orange { color: var(--naranja-texto); }
.c-green { color: var(--verde-texto); }
.c-sky { color: var(--cielo); }
.c-purple { color: var(--morado); }
.c-red { color: #B91C1C; }
.tx ul, .tx ol { padding-left: 1.35em; }
.tx ul > li::marker { color: var(--naranja); font-size: 1.1em; }
.tx ul.sub > li::marker, .tx li ul > li::marker { content: "– "; color: var(--azul); }
.tx li + li { margin-top: .35em; }
.tx li > ul, .tx li > ol { margin-top: .35em; }
.tx ol.ol-alpha { list-style-type: lower-alpha; }
.tx ol.ol-paren { list-style: none; counter-reset: ol; padding-left: 1.9em; }
.tx ol.ol-paren > li { counter-increment: ol; position: relative; }
.tx ol.ol-paren > li::before { position: absolute; left: -1.9em; width: 1.6em; text-align: right; color: var(--naranja-texto); font-weight: 700; font-style: normal; }
.tx ol.ol-paren.ol-alpha > li::before { content: counter(ol, lower-alpha) ")"; }
.tx ol.ol-paren.ol-num > li::before { content: counter(ol) ")"; }
.tx ol > li::marker { color: var(--naranja-texto); font-weight: 700; }
.tx a { font-weight: 600; }

/* ---------- tarjetas ---------- */
.card { border-radius: var(--r); padding: clamp(.9rem, 1.8vw, 1.2rem) clamp(1rem, 2vw, 1.35rem); min-width: 0; }
.card.mid { display: flex; flex-direction: column; justify-content: center; }
.card.chip { padding: .35rem .6rem; min-width: 3.4rem; border-radius: 10px; align-self: stretch; justify-content: center; }
.card.chip .tx p { font-size: 1rem; }
.card.round { border-radius: 50%; width: 3rem; height: 3rem; padding: 0; display: grid; place-items: center; flex: none; }
.card.round .ico { width: 1.55rem; height: 1.55rem; }
.card.flush { margin: calc(-1 * clamp(.9rem, 1.8vw, 1.2rem)) calc(-1 * clamp(1rem, 2vw, 1.35rem)) .25rem; border-radius: var(--r) var(--r) 0 0; }
.f-soft-blue { background: var(--suave-azul); }
.f-soft-gray { background: var(--suave-gris); }
.f-soft-orange { background: var(--suave-naranja); }
.f-soft-green { background: var(--suave-verde); }
.f-soft-purple { background: var(--suave-morado); }
.f-white { background: #fff; border: 1px solid var(--gris-linea); }
.f-blue { background: var(--azul-intenso); color: #fff; }
.f-orange { background: var(--naranja-texto); color: #fff; }
.f-sky { background: var(--cielo); color: #fff; }
.f-purple { background: var(--morado); color: #fff; }
.f-green { background: var(--verde-texto); color: #fff; }
.f-dark { background: var(--tinta); color: #fff; }
.f-blue .tx h3, .f-orange .tx h3, .f-sky .tx h3, .f-purple .tx h3, .f-green .tx h3, .f-dark .tx h3,
.f-blue .tx .stat, .f-orange .tx .stat { color: #fff; }
.f-blue .tx ul > li::marker { color: #80E663; }
.f-blue .c-orange, .f-sky .c-orange, .f-purple .c-orange { color: #FFB089; }
.f-orange .c-orange { color: #fff; }

/* ---------- insignias ---------- */
.badge { display: inline-grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .35rem; border-radius: 999px; font-weight: 700; color: #fff; font-size: 1rem; flex: none; }
.badge-lg { min-width: 3.4rem; height: 3.4rem; font-size: 1rem; }
.badge.f-orange { background: var(--naranja-texto); }

/* ---------- figuras ---------- */
.fig { margin: 0; width: min(100%, calc(var(--w) * 104px)); }
.row > .fig { width: min(100%, calc(var(--w) * 104px)); justify-self: center; }
.fig img { display: block; width: 100%; border-radius: 10px; }
.fig figcaption { margin-top: .4rem; }
.fig figcaption p { margin: 0; font-size: .875rem; color: var(--tinta-suave); }
.ico { display: block; width: 2.2rem; height: 2.2rem; }
.arrow { display: grid; place-items: center; align-self: center; }
.arrow svg { width: 3rem; fill: var(--naranja); }

/* ---------- gráficos ---------- */
.chart-fig { margin: 0; }
.chart-title { font-weight: 700; color: var(--azul-intenso); text-align: center; margin-bottom: .25rem; }
.chart { width: 100%; height: auto; display: block; font-family: var(--fuente); }
.chart .grid { stroke: #E5E9F0; stroke-width: 1; }
.chart .base { stroke: var(--tinta-suave); stroke-width: 1.5; }
.chart .ax { fill: var(--tinta-suave); font-size: 15px; }
.chart .val { fill: var(--tinta); font-size: 16px; font-weight: 700; }

/* ---------- cronologías ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-h { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 .75rem; position: relative; }
.tl-h::before { content: ""; position: absolute; left: 0; right: 0; top: 2.75rem; height: 4px; border-radius: 2px; background: var(--azul-intenso); }
.tl-h .ev { display: grid; grid-template-rows: 2.3rem 1.6rem auto; justify-items: center; text-align: center; }
.tl-h .ev-when { font-size: 1.2rem; font-weight: 700; color: var(--azul-intenso); align-self: end; }
.tl-h .ev::after { content: ""; grid-row: 2; width: 18px; height: 18px; border-radius: 50%; background: var(--naranja); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--naranja); align-self: center; position: relative; z-index: 1; }
.tl-h .ev-what { grid-row: 3; padding-top: .35rem; font-size: .975rem; }
.tl-h .ev-what p { margin: 0; text-align: center; }
.tl-v { position: relative; display: flex; flex-direction: column; gap: .85rem; }
.tl-v::before { content: ""; position: absolute; left: 8px; top: .6rem; bottom: .6rem; width: 4px; border-radius: 2px; background: var(--azul-intenso); }
.tl-v .ev { display: grid; grid-template-columns: 20px 4.5rem minmax(0, 1fr); column-gap: .85rem; align-items: baseline; }
.tl-v .ev::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--naranja); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--naranja); position: relative; z-index: 1; align-self: start; margin-top: .15rem; }
.tl-v .ev-when { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--azul-intenso); font-size: 1.1rem; }
.tl-v .ev-what p { margin: 0; }
.tl-v .ev-what > * + * { margin-top: .3em; }
.timeline.recall .ev-what { filter: blur(6px); cursor: pointer; transition: filter .2s; user-select: none; }
.timeline.recall .ev-what.shown { filter: none; }

/* ---------- autoevaluación ---------- */
.quiz-intro { margin: 0 0 1rem; color: var(--tinta-suave); }
.quiz { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.q { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; background: var(--suave-gris); border-radius: var(--r); padding: .9rem 1.1rem; }
.q .badge { margin-top: .05rem; }
.q-text { margin: .2rem 0 0; font-weight: 600; font-size: 1.0625rem; }
.q-ans { margin-top: .55rem; }
.q-ans summary, .more summary { cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; font-weight: 700; color: var(--azul-intenso); list-style: none; }
.q-ans summary::-webkit-details-marker, .more summary::-webkit-details-marker { display: none; }
.q-ans summary::before, .more summary::before { content: ""; width: .55rem; height: .55rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: .1rem; }
.q-ans[open] summary::before, .more[open] summary::before { transform: rotate(45deg); }
.q-ans p { margin: .25rem 0 0; padding: .75rem 1rem; background: #fff; border-left: 4px solid var(--verde); border-radius: 0 10px 10px 0; }
.quiz-tools { margin-top: 1.1rem; }

/* ---------- para saber más ---------- */
.more { margin: 0 clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 9vw, 7.5rem); border-top: 1px solid var(--gris-linea); padding-top: .6rem; }
.more p { margin: .35rem 0 0; padding: .9rem 1.1rem; background: var(--suave-azul); border-radius: 12px; max-width: 75ch; }

/* ---------- tablas y diagramas ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; font-size: .975rem; }
.tbl th, .tbl td { border: 1px solid var(--gris-linea); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.tbl thead th { background: var(--azul-intenso); color: #fff; }
.tbl tbody th { background: var(--suave-azul); color: var(--azul-intenso); }
.tbl p { margin: 0; }
.tbl-wide { min-width: 680px; }
.tbl td:empty { border-top-color: transparent; border-left-color: transparent; }
.tbl thead td { background: transparent; }
.tbl .tbl-sub { background: var(--suave-naranja); color: var(--naranja-texto); font-weight: 600; text-align: center; }
.tbl-ref { color: var(--tinta-suave); font-size: .9em; }
.tbl-note { color: var(--naranja-texto); font-size: .9em; }
.tbl td.ta-c { text-align: center; vertical-align: middle; }
.tbl p + p, .tbl ul { margin-top: .3em; }
.tbl ul { padding-left: 1.1em; margin-bottom: 0; }
.canvas-wrap { overflow-x: auto; }
.scroll-hint { display: none; margin: .5rem 0 0; font-size: .875rem; color: var(--tinta-suave); }
.canvas { position: relative; container-type: inline-size; width: 100%; min-width: 640px; }
.cv-el { position: absolute; }
.cv-tx { font-size: calc(var(--fs) * 1cqw); line-height: 1.25; overflow: visible; }
.cv-tx p, .cv-tx ul { margin: 0; }
.cv-mid { display: flex; flex-direction: column; justify-content: center; }
img.cv-el { object-fit: contain; }

/* ---------- portada, portadillas y cierre ---------- */
/* Portada: degradado ETPCO, círculo azul semitransparente con el título y pestaña blanca orgánica con el logo */
.s-cover { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 5vw, 4rem) clamp(1.5rem, 6vw, 5rem) clamp(10rem, 18vw, 13rem);
  background: var(--fa-grad-etpco); color: #fff; border: 0; isolation: isolate; }
.s-cover::before { content: ""; position: absolute; z-index: -1; width: min(86%, 760px); aspect-ratio: 1; left: -8%; top: 50%; transform: translateY(-56%); border-radius: 50%; background: rgb(43 89 141 / .55); }
.cover-text { position: relative; max-width: 36rem; }
.cover-course { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; color: #fff; opacity: .9; text-transform: uppercase; letter-spacing: .06em; }
.s-cover h1 { margin: 0 0 .6rem; color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; letter-spacing: -.02em; }
.cover-sub { margin: 0 0 1.5rem; font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; color: #D9FFC9; }
.cover-note { margin: 0 0 1rem; padding: .75rem 1rem; background: rgb(255 255 255 / .14); border-radius: 12px; max-width: 34rem; }
.cover-hint { margin: 0; font-size: .9375rem; opacity: .92; }
.cover-tab { position: absolute; left: -1.5%; bottom: -3%; width: clamp(260px, 36%, 420px); aspect-ratio: 2.3 / 1; display: grid; place-items: center; padding: 3% 7% 5% 6%;
  background: #fff; -webkit-mask: var(--modulo) center / 100% 100% no-repeat; mask: var(--modulo) center / 100% 100% no-repeat; }
.cover-tab img { display: block; width: 100%; }

/* Portadilla: fondo degradado, número en círculo con borde verde y título en blanco */
.s-divider { position: relative; background: var(--fa-grad-etpco); color: #fff; border: 0; isolation: isolate; }
.div-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.div-art::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; left: -18%; top: 50%; transform: translateY(-50%); border-radius: 50%; background: rgb(43 89 141 / .55); }
.div-art::after { content: ""; position: absolute; width: 34%; aspect-ratio: 1.15; right: -4%; bottom: -10%; background: rgb(255 255 255 / .16); -webkit-mask: var(--modulo) center / 100% 100% no-repeat; mask: var(--modulo) center / 100% 100% no-repeat; }
.div-text { position: absolute; left: 10%; right: 8%; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.div-ring { flex: none; display: grid; place-items: center; width: clamp(5rem, 11vw, 8.5rem); height: clamp(5rem, 11vw, 8.5rem); border-radius: 50%; border: 6px solid var(--fa-verde-claro);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 700; line-height: 1; }
.div-words { min-width: 0; }
.div-kicker { margin: 0; font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; color: #D9FFC9; text-transform: uppercase; letter-spacing: .06em; }
.s-divider h2 { margin: .2rem 0 .35rem; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.8rem); font-weight: 700; letter-spacing: -.015em; }
.div-extra { margin: 0; font-weight: 600; }

/* Cierre: degradado ETPCO con logo blanco centrado */
.s-end { display: grid; place-items: center; text-align: center; background: var(--fa-grad-etpco); color: #fff; border: 0; isolation: isolate; }
.end-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.end-art::before { content: ""; position: absolute; width: min(70%, 640px); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: rgb(43 89 141 / .55); }
.end-text { padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem); max-width: 46rem; }
.end-logo { width: min(360px, 78%); display: block; margin: 0 auto 1.75rem; }
.end-text h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 .75rem; font-weight: 700; }
.end-text p { margin: 0 auto 1rem; max-width: 40rem; }
.end-biblio { color: #D9FFC9; font-size: .9375rem; }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }

/* ---------- barra inferior: línea de progreso con estaciones ---------- */
.railbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid #E2E7EE;
  display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.5rem); padding: .6rem clamp(.75rem, 2.5vw, 1.75rem); padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); min-height: var(--railbar-h); }
.nav-btn { flex: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 48px; padding: .5rem 1rem; border-radius: 999px;
  border: 2px solid var(--fa-azul); background: #fff; color: var(--fa-azul); font: 600 1rem var(--fuente); cursor: pointer; }
.nav-next { background: var(--fa-azul); color: #fff; }
.nav-btn:hover { background: var(--suave-azul); }
.nav-next:hover { background: var(--fa-azul-oscuro); border-color: var(--fa-azul-oscuro); }
.nav-btn:disabled { opacity: .4; cursor: default; }
.rail { flex: 1; min-width: 0; }
.rail-track { position: relative; height: 22px; margin: 0 9px; }
.rail-track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: #DCE4EE; }
.rail-fill { position: absolute; left: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--fa-grad-campus); width: 0; transition: width .25s ease; }
.station { position: absolute; top: 2px; left: var(--at); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; padding: 0; cursor: pointer;
  background: #fff; border: 3px solid #9DB3CC; }
.station.passed { border-color: var(--fa-azul); }
.station.minor { width: 12px; height: 12px; margin-left: -6px; top: 5px; border-width: 2px; }
.station:hover { background: var(--suave-azul); }
.rail-train { position: absolute; top: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--fa-verde); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--fa-verde); left: 0; transition: left .25s ease; pointer-events: none; }
.rail-count { margin: .2rem 0 0; text-align: center; font-size: .875rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* ---------- índice ---------- */
.toc { border: 0; padding: 0; margin: 0 0 0 auto; width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: #fff; border-left: 4px solid var(--fa-azul); }
.toc::backdrop { background: rgb(9 30 60 / .45); }
.toc-top { position: sticky; top: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; padding-top: calc(1rem + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--gris-linea); z-index: 1; }
.toc-top h2 { margin: 0; font-size: 1.35rem; }
.toc-list, .toc-list ol { list-style: none; margin: 0; padding: 0; }
.toc-list { padding: .5rem .75rem 2rem; }
.toc-g + .toc-g { margin-top: .5rem; border-top: 1px solid #EEF1F5; padding-top: .5rem; }
.toc a { display: grid; grid-template-columns: 2.4rem 1fr; gap: .5rem; padding: .45rem .5rem; border-radius: 10px; text-decoration: none; color: var(--tinta); }
.toc a:hover { background: var(--suave-azul); }
.toc a[aria-current="true"] { background: var(--fa-azul); color: #fff; }
.toc a[aria-current="true"] .toc-n { color: #fff; }
.toc-head { font-weight: 700; color: var(--fa-azul) !important; }
.toc-n { color: var(--tinta-suave); font-variant-numeric: tabular-nums; text-align: right; }
.toc-q { display: block; font-style: normal; font-size: .8125rem; color: var(--naranja-texto); font-weight: 700; }
.toc a[aria-current="true"] .toc-q { color: #FFD3BF; }

/* =====================================================================
   ADAPTACIÓN A PANTALLAS
   ===================================================================== */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 340px; margin: 0 auto; }
  .subject-grid { grid-template-columns: 1fr; }
  .slide-body { padding-left: clamp(1.25rem, 4vw, 3rem); }
  .more { margin-left: clamp(1.25rem, 4vw, 3rem); }
}
@media (max-width: 760px) {
  :root { --topbar-h: 58px; --railbar-h: 70px; }
  .tb-logo img { height: 28px; }
  .topbar { gap: .5rem; }
  .tb-title { display: none; }
  .topbar { justify-content: space-between; }
  .tb-home span { display: none; }
  .howto-grid { grid-template-columns: 1fr; }
  .stage { padding-left: 0; padding-right: 0; padding-top: 0; }
  .slide { border-radius: 0; border: 0; min-height: calc(100dvh - var(--topbar-h) - var(--railbar-h)); }
  .slide-head { padding: 1.1rem 1.1rem 0 4.4rem; }
  .slide-tab { left: .9rem; top: 1.05rem; width: 2.7rem; height: 2.6rem; font-size: 1rem; }
  .slide-head h2 { font-size: 1.35rem; }
  .t-ico { display: none; }
  .slide-tools { padding: .75rem 1.1rem 0; }
  .slide-body { padding: 1rem 1.1rem 1.5rem; font-size: 1rem; }
  .more { margin: 0 1.1rem 1.25rem; }
  .row { grid-template-columns: 1fr; }
  .row.many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row > .arrow svg { transform: rotate(90deg); width: 2.2rem; }
  .fig { width: 100%; }
  .tl-h { grid-template-columns: 1fr; gap: .85rem; }
  .tl-h::before { left: 8px; right: auto; top: .6rem; bottom: .6rem; width: 4px; height: auto; }
  .tl-h .ev { grid-template-columns: 20px 4.5rem minmax(0, 1fr); grid-template-rows: auto; column-gap: .85rem; justify-items: start; text-align: left; align-items: baseline; }
  .tl-h .ev::after { grid-row: 1; grid-column: 1; align-self: start; margin-top: .15rem; }
  .tl-h .ev-when { grid-column: 2; grid-row: 1; align-self: start; font-size: 1.1rem; }
  .tl-h .ev-what { grid-row: 1; grid-column: 3; padding-top: 0; }
  .tl-h .ev-what p { text-align: left; }
  .s-cover { padding: 2.5rem 1.4rem 9rem; justify-content: flex-start; }
  .s-cover::before { width: 130%; left: -45%; top: 2rem; transform: none; }
  .cover-tab { width: 250px; left: -10px; bottom: -8px; }
  .s-divider { aspect-ratio: auto; min-height: calc(100dvh - var(--topbar-h) - var(--railbar-h)); }
  .div-art::before { width: 150%; left: -60%; }
  .div-text { left: 1.4rem; right: 1.4rem; flex-direction: column; align-items: flex-start; }
  .s-end { min-height: calc(100dvh - var(--topbar-h) - var(--railbar-h)); }
  .end-art::before { width: 120%; }
  .l-top .btn { display: none; }
  .scroll-hint { display: block; }
  .nav-btn span { display: none; }
  .nav-btn { padding: .5rem .8rem; }
  .card.flush { margin-top: calc(-1 * clamp(.9rem, 1.8vw, 1.2rem)); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   IMPRESIÓN: todas las diapositivas, una por página
   ===================================================================== */
@media print {
  .topbar, .railbar, .skip, .toc, .slide-tools, .quiz-tools, .subject-actions, .hero .btn { display: none !important; }
  .viewer { background: #fff; }
  .stage { padding: 0; }
  .js .slide[hidden] { display: block !important; }
  .js .s-cover[hidden] { display: flex !important; }
  .js .s-end[hidden] { display: grid !important; }
  .s-cover, .s-divider, .s-end, .slide-tab, .cover-tab { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slide { box-shadow: none; border: 1px solid #ddd; break-after: page; min-height: 0; margin: 0 0 1rem; }
  details > *:not(summary) { display: block !important; }
  details summary { display: none !important; }
  .q-ans p, .more p { display: block !important; }
  .timeline.recall .ev-what { filter: none; }
}