/* =====================================================================
   estilos.css — Diseño del sitio
   Idea visual: banco de pruebas. Fondo gris acero, tinta azul oscuro.
   Dos colores con significado físico que se repiten en todo el sitio:
     cobre  = velocidad angular ω (el bobinado que gira)
     petróleo = corriente i
   Sin fuentes externas: Bahnschrift viene con Windows 10/11; en otros
   sistemas se usa una alternativa estrecha parecida.
   ===================================================================== */

:root {
  --fondo: #e9edf0;
  --fondo-tarjeta: #f7f9fa;
  --fondo-hundido: #dde3e7;
  --texto: #16202a;
  --texto-suave: #4d5b67;
  --rejilla: #c9d2d8;
  --borde: #b9c4cc;
  --cobre: #a8531f;          /* ω */
  --petroleo: #11708a;       /* i */
  --tinta: #16202a;          /* puntos medidos */
  --aviso: #8a5a00;
  --aviso-fondo: #fbefd5;
  --serie-1: var(--cobre);
  --serie-2: var(--petroleo);
  --serie-3: var(--tinta);
  --serie-4: #7a4fa0;
  --iman-n: #b5473c;         /* polo norte: rojo, convención de laboratorio */
  --iman-s: #3f679e;         /* polo sur: azul */
  --acero: #cfd6dc;
  --acero-oscuro: #8a969f;
  --sombra: 0 1px 2px rgba(22,32,42,.06), 0 8px 24px -12px rgba(22,32,42,.25);

  --f-titulo: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Arial Narrow", sans-serif;
  --f-texto: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --f-datos: "Cascadia Mono", Consolas, "SF Mono", Menlo, ui-monospace, monospace;
  --radio: 6px;
  --ancho-texto: 46rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #12181d;
    --fondo-tarjeta: #1a2229;
    --fondo-hundido: #0e1317;
    --texto: #e3e9ed;
    --texto-suave: #9aa8b3;
    --rejilla: #2c3740;
    --borde: #3a4751;
    --cobre: #e39058;
    --petroleo: #4fb8d3;
    --tinta: #f1f4f6;
    --aviso: #f0c46a;
    --aviso-fondo: #33290f;
    --iman-n: #c4574b;
    --iman-s: #5079b3;
    --acero: #5c6a75;
    --acero-oscuro: #2a343c;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #12181d;
  --fondo-tarjeta: #1a2229;
  --fondo-hundido: #0e1317;
  --texto: #e3e9ed;
  --texto-suave: #9aa8b3;
  --rejilla: #2c3740;
  --borde: #3a4751;
  --cobre: #e39058;
  --petroleo: #4fb8d3;
  --tinta: #f1f4f6;
  --aviso: #f0c46a;
  --aviso-fondo: #33290f;
  --iman-n: #c4574b;
  --iman-s: #5079b3;
  --acero: #5c6a75;
  --acero-oscuro: #2a343c;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.6 var(--f-texto);
  -webkit-text-size-adjust: 100%;
}

/* ---------- Colores con significado ---------- */
.v-i { color: var(--petroleo); font-style: italic; font-weight: 600; }
.v-w { color: var(--cobre); font-style: italic; font-weight: 600; }

/* ---------- Barra superior e índice ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--borde);
}
.marca {
  font-family: var(--f-titulo); font-weight: 600; letter-spacing: .02em;
  color: var(--texto); text-decoration: none; margin-right: 1rem; white-space: nowrap;
}
.marca span { color: var(--cobre); }
.boton-icono {
  font: 500 .85rem var(--f-texto); color: var(--texto);
  background: var(--fondo-tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .3rem .7rem; cursor: pointer;
}
/* Pestañas: una por parte del proyecto. La activa lleva una línea cobre. */
.pestanas {
  display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none;
  margin-right: auto; -webkit-overflow-scrolling: touch;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  position: relative; white-space: nowrap; text-decoration: none;
  font: 600 .92rem var(--f-titulo); color: var(--texto-suave);
  padding: .45rem .75rem; border-radius: 8px;
  transition: color .2s, background .2s;
}
.pestanas a:hover { color: var(--texto); background: var(--fondo-hundido); }
.pestanas a[aria-current="page"] { color: var(--texto); }
.pestanas a[aria-current="page"]::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .05rem;
  height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--cobre), var(--petroleo));
}
@media (max-width: 720px) {
  .barra { flex-wrap: wrap; row-gap: .3rem; }
  .pestanas { order: 3; width: 100%; margin-right: 0; }
  #btn-tema { margin-left: auto; }
}

/* Vistas: solo la activa se muestra */
.vista { display: none; }
.vista.activa { display: block; animation: aparecer .35s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vista.activa { animation: none; } }

.siguiente {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  max-width: 76rem; margin: 3rem auto 0; padding: 1.1rem 1.3rem;
  font: 600 1.15rem var(--f-titulo); color: var(--texto); text-decoration: none;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra); transition: border-color .2s, transform .2s;
}
.siguiente span { color: var(--cobre); font-size: 1.4rem; transition: transform .2s; }
.siguiente:hover { border-color: var(--cobre); }
.siguiente:hover span { transform: translateX(4px); }

/* Tarjetas de parámetros (pestaña Resultados) */
.tarjetas-param { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin: 1.2rem 0 .6rem; }
.tarjeta-param {
  display: grid; gap: .15rem; text-align: center;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-top: 4px solid var(--cobre);
  border-radius: 12px; padding: 1rem .8rem; box-shadow: var(--sombra);
}
.tarjeta-param.sin-medir { border-top-color: var(--borde); opacity: .75; }
.tp-simbolo { font: italic 600 1.6rem var(--f-titulo); color: var(--cobre); }
.tarjeta-param b { font: 600 1.6rem var(--f-datos); }
.tp-unidad { font-size: .82rem; color: var(--texto-suave); }
.tp-nombre { font-size: .8rem; color: var(--texto-suave); margin-top: .3rem; }

/* ---------- Estructura ---------- */
main { padding: 0 16px 3rem; }
.seccion, .portada { max-width: var(--ancho-texto); margin: 0 auto; }
.seccion.ancha { max-width: 76rem; }
.seccion.ancha > p, .seccion.ancha > h3, .seccion.ancha > ul, .seccion.ancha > blockquote,
.seccion.ancha > .ec, .conclusiones-datos { max-width: var(--ancho-texto); }
.seccion { padding-top: 2.4rem; }

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.2; }
h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  margin: 0 0 1rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--texto);
  display: flex; align-items: baseline; gap: .7rem;
}
h2 .num {
  font-family: var(--f-titulo); font-size: 1.6em; font-weight: 700; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px var(--cobre);
}
h3 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
p { margin: 0 0 1rem; }
a { color: var(--petroleo); }
code { font-family: var(--f-datos); font-size: .88em; background: var(--fondo-hundido); padding: .05em .3em; border-radius: 3px; }
:focus-visible { outline: 3px solid var(--petroleo); outline-offset: 2px; }

/* ---------- Carátula (datos formales de la entrega) ---------- */
.caratula {
  max-width: 76rem; margin: 1.5rem auto 0;
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 2rem; align-items: center;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-top: 4px solid var(--cobre);
  border-radius: 14px; padding: 1rem 1.4rem; box-shadow: var(--sombra);
}
.caratula-escudo { width: 104px; height: 104px; }
.caratula-texto p { margin: 0 0 .1rem; }
.caratula-u { font-family: var(--f-titulo); font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; }
.caratula-f, .caratula-c { color: var(--texto-suave); font-size: .92rem; }
.caratula-curso { font-family: var(--f-titulo); font-weight: 600; margin-top: .35rem !important; }
.caratula-titulo { font-family: var(--f-titulo); font-size: 1.15rem; color: var(--cobre); }
.caratula-datos { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: .4rem 0 .2rem; }
.caratula-datos div { display: flex; gap: .4rem; font-size: .92rem; }
.caratula-datos dt { color: var(--texto-suave); }
.caratula-datos dt::after { content: ":"; }
.caratula-datos dd { margin: 0; font-weight: 600; }
.caratula-fecha { font-size: .88rem; color: var(--texto-suave); }
@media (max-width: 640px) {
  .caratula { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .caratula-escudo { width: 110px; height: 110px; }
  .caratula-datos { justify-content: center; }
}
@media print { .caratula { box-shadow: none; page-break-after: always; } }

/* ---------- Portada: el motor vivo es el protagonista ---------- */
.seccion, .portada { position: relative; }
.portada { max-width: 76rem; padding: 1.5rem 0 1rem; }
/* Resplandor de fondo: como el brillo del cobre bajo la luz del banco */
.portada::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -2rem 0 auto; height: 48rem;
  background: radial-gradient(34rem 28rem at 76% 38%, color-mix(in srgb, var(--cobre) 15%, transparent), transparent 70%);
}
.portada-grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .portada-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.5rem; } }
.antetitulo { font-family: var(--f-datos); font-size: .78rem; color: var(--texto-suave); letter-spacing: .04em; text-transform: uppercase; }
.portada h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem);
  font-stretch: condensed; line-height: 1.02; letter-spacing: -.01em;
  margin: .4rem 0 1.1rem;
}
.portada h1 em {
  font-style: normal;
  background: linear-gradient(95deg, var(--cobre), var(--petroleo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.entrada { font-size: 1.1rem; color: var(--texto-suave); max-width: 38rem; }

.motor-vivo {
  margin: 0; padding: .8rem .8rem .6rem;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde);
  border-radius: 14px; box-shadow: var(--sombra);
}
#motor-canvas { display: block; width: 100%; height: min(78vh, 640px); min-height: 480px; }
@media (max-width: 480px) { #motor-canvas { min-height: 440px; height: 118vw; } }
.motor-barra { display: flex; align-items: center; gap: .8rem; margin: .3rem 0 .4rem; }
.motor-etiqueta { font-family: var(--f-datos); font-size: .78rem; color: var(--texto-suave); }
.motor-vivo figcaption { font-size: .8rem; color: var(--texto-suave); line-height: 1.45; }

.tesis {
  margin: 2.5rem 0 .8rem; padding: 1.6rem 1.4rem;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde); border-left: 4px solid var(--cobre);
  border-radius: 14px; box-shadow: var(--sombra);
  display: grid; gap: 1.4rem;
}
.tesis-fila {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .2rem .7rem;
  font-family: var(--f-titulo); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
}
.t-lado, .t-igual, .t-op { padding-top: .05em; }
.t-igual, .t-op { color: var(--texto-suave); }
.termino { display: inline-flex; flex-direction: column; }
.t-expr { white-space: nowrap; }
/* La nota bajo cada término: qué significa físicamente */
.t-nota {
  font-family: var(--f-texto); font-size: .72rem; line-height: 1.25;
  color: var(--texto-suave); max-width: 11rem;
  border-top: 1px solid var(--rejilla); padding-top: .25rem; margin-top: .15rem;
}
.clave-colores { font-size: .85rem; color: var(--texto-suave); }
.resumen-vivo {
  font-size: .95rem; line-height: 1.5;
  border-left: 3px solid var(--petroleo);
  padding: .2rem 0 .2rem .9rem; min-height: 2.6rem; max-width: 38rem;
}

/* ---------- Texto técnico ---------- */
.ec {
  font-family: var(--f-titulo); font-size: 1.15rem;
  background: var(--fondo-tarjeta); border: 1px solid var(--rejilla);
  border-radius: var(--radio);
  padding: .7rem 1rem; margin: 0 0 1rem;
  overflow-x: auto;
}
.ec-grande { line-height: 2; }
.pregunta {
  margin: 1rem 0 1.4rem; padding: .2rem 0 .2rem 1rem;
  border-left: 4px solid var(--petroleo);
  font-family: var(--f-titulo); font-size: 1.2rem;
}
.lista-pasos li, .lista-conclusiones li { margin-bottom: .5rem; }
.nota { font-size: .9rem; color: var(--texto-suave); }
.aviso {
  background: var(--aviso-fondo); color: var(--aviso);
  border-radius: var(--radio); padding: .6rem .9rem; font-size: .95rem;
}
.referencias li { margin-bottom: .4rem; font-size: .95rem; }

/* ---------- Tablas ---------- */
.tabla-desliza { overflow-x: auto; margin-bottom: 1rem; }
.tabla { border-collapse: collapse; width: 100%; font-size: .93rem; margin-bottom: 1rem; }
.tabla-desliza .tabla { margin-bottom: 0; }
.tabla th, .tabla td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rejilla); vertical-align: top; }
.tabla th { font-family: var(--f-titulo); font-weight: 600; background: var(--fondo-hundido); }
.tabla td.n, .tabla th.n { text-align: right; font-family: var(--f-datos); font-size: .88rem; white-space: nowrap; }
.tabla caption { text-align: left; font-family: var(--f-titulo); font-weight: 600; padding: .3rem 0; }
.err-bajo { color: var(--petroleo); }
.err-alto { color: var(--aviso); font-weight: 600; }

/* ---------- Simulador ---------- */
.entrada-seccion { color: var(--texto-suave); }
.sim { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .sim { grid-template-columns: 23rem 1fr; align-items: start; } }

.controles {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde);
  border-radius: 12px; padding: .4rem 1rem 1rem; box-shadow: var(--sombra);
}
@media (min-width: 900px) { .controles { position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow-y: auto; } }
.grupo-titulo {
  font-family: var(--f-datos); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-suave); margin: .9rem 0 .2rem;
}
.control { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; padding: .35rem 0; }
.control label { font-size: .9rem; }
.control .simbolo { font-family: var(--f-titulo); font-weight: 600; margin-right: .3rem; }
.control .valor { display: flex; align-items: center; gap: .3rem; }
.control input[type="number"] {
  width: 5rem; font: .88rem var(--f-datos); color: var(--texto);
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 4px; padding: .15rem .35rem; text-align: right;
}
.control .unidad { font-size: .78rem; color: var(--texto-suave); min-width: 2.9rem; }
.control input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--texto); }
.control.c-i input[type="range"] { accent-color: var(--petroleo); }
.control.c-w input[type="range"] { accent-color: var(--cobre); }

.sim-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-bottom: .8rem; font-size: .9rem; }
.sim-opciones select, .sim-opciones input[type="number"], .config input, .config select {
  font: .9rem var(--f-texto); color: var(--texto); background: var(--fondo-tarjeta);
  border: 1px solid var(--borde); border-radius: 4px; padding: .2rem .4rem;
}
#dt-us { width: 6rem; font-family: var(--f-datos); }
.casilla { display: inline-flex; align-items: center; gap: .35rem; }
.ayuda { font-size: .8rem; color: var(--texto-suave); }

.figura { margin: 0 0 1rem; background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: .7rem .7rem .5rem; box-shadow: var(--sombra); }
.lienzo { display: block; width: 100%; height: 260px; touch-action: pan-y; }
@media (min-width: 900px) { .lienzo { height: 290px; } }
.figura figcaption { font-size: .82rem; color: var(--texto-suave); padding: .3rem .2rem 0; }

.resultados { display: grid; gap: .8rem; }
@media (min-width: 640px) { .resultados { grid-template-columns: repeat(3, 1fr); } }
.resultados .bloque { background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-top: 3px solid var(--texto); border-radius: 10px; padding: .6rem .8rem; box-shadow: var(--sombra); }
.resultados .bloque:nth-child(1) { border-top-color: var(--petroleo); }
.resultados .bloque:nth-child(2) { border-top-color: var(--cobre); }
.resultados h4 { font-family: var(--f-titulo); font-weight: 600; margin: 0 0 .3rem; font-size: 1rem; }
.resultados dl { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; margin: 0; font-size: .88rem; }
.resultados dt { color: var(--texto-suave); }
.resultados dd { margin: 0; font-family: var(--f-datos); text-align: right; }
.verificado { color: var(--petroleo); font-weight: 600; }
.diverge { color: var(--aviso); font-weight: 600; }

/* ---------- Botones ---------- */
.boton, .boton-sec {
  display: inline-block; font: 600 .9rem var(--f-texto); cursor: pointer;
  border-radius: var(--radio); padding: .45rem .9rem; text-decoration: none;
}
.boton { background: var(--texto); color: var(--fondo); border: 1px solid var(--texto); }
.boton-sec { background: var(--fondo-tarjeta); color: var(--texto); border: 1px solid var(--borde); }
.boton:hover { background: var(--cobre); border-color: var(--cobre); }
.boton-sec:hover { border-color: var(--texto); }
button:disabled { opacity: .45; cursor: not-allowed; }
.botones-fila { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Mediciones ---------- */
.banda-ejemplo {
  background: var(--aviso-fondo); color: var(--aviso);
  border: 1px dashed var(--aviso); border-radius: var(--radio);
  padding: .8rem 1rem; margin-bottom: 1rem;
}
.panel-datos { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 900px) { .panel-datos { grid-template-columns: 1fr 1fr; } }
.config {
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-tarjeta);
  padding: .6rem 1rem 1rem; margin: 0;
  display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.config legend { font-family: var(--f-titulo); font-weight: 600; padding: 0 .3rem; }
.config label { display: grid; gap: .2rem; font-size: .88rem; color: var(--texto-suave); }
.config .ayuda { grid-column: 1 / -1; margin: 0; }
.carga { background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; }
.estado { font-size: .9rem; color: var(--texto-suave); margin: .3rem 0 0; }
.estado.error { color: var(--aviso); font-weight: 600; }
.rejilla-tablas { display: grid; gap: 0 1.5rem; }
@media (min-width: 900px) { .rejilla-tablas { grid-template-columns: 1fr 1fr; } }
.avisos { color: var(--aviso); font-size: .92rem; }
.avisos:empty { display: none; }

.rejilla-graf { display: grid; gap: 1rem; }
@media (min-width: 900px) { .rejilla-graf { grid-template-columns: 1fr 1fr; } }
.rejilla-graf .figura { margin: 0; }

.conclusiones-datos {
  border-left: 4px solid var(--petroleo); background: var(--fondo-tarjeta);
  border-radius: 0 var(--radio) var(--radio) 0; padding: .8rem 1rem; margin-bottom: 1rem;
}
.conclusiones-datos p:last-child { margin-bottom: 0; }

/* Grupo "Avanzado" del simulador: plegado por defecto */
.grupo-plegable > summary { cursor: pointer; list-style: none; }
.grupo-plegable > summary::-webkit-details-marker { display: none; }
.grupo-plegable > summary::after { content: "  +"; color: var(--cobre); }
.grupo-plegable[open] > summary::after { content: "  −"; }

.pie { border-top: 1px solid var(--borde); padding: 1.2rem 16px 2rem; font-size: .85rem; color: var(--texto-suave); text-align: center; }

@media print {
  .barra, .controles, .carga, .botones-fila, #btn-usar, .siguiente { display: none !important; }
  .vista { display: block !important; }
  main, .pie { margin-left: 0; }
}


/* ---------- Ecuaciones de la portada en pantallas angostas ---------- */
@media (max-width: 600px) {
  .tesis { padding: 1.1rem .9rem; }
  .tesis-fila { font-size: 1.15rem; gap: .2rem .45rem; }
  .t-nota { max-width: 7.5rem; font-size: .66rem; }
}

/* =====================================================================
   Componentes visuales: menos texto a la vista, más estructura
   ===================================================================== */

/* Flujo del método: es una secuencia real, por eso lleva números */
.flujo {
  list-style: none; counter-reset: paso; padding: 0; margin: 1.5rem 0;
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.flujo li {
  counter-increment: paso; position: relative;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 12px;
  padding: .9rem .9rem .8rem; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: .25rem;
}
.flujo li::before {
  content: counter(paso); font-family: var(--f-datos); font-size: .75rem;
  color: var(--fondo); background: var(--cobre); border-radius: 999px;
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
}
.flujo-t { font-family: var(--f-titulo); font-weight: 600; font-size: 1.15rem; }
.flujo-d { font-size: .85rem; color: var(--texto-suave); line-height: 1.35; }

/* Tarjetas de teoría con ilustración */
.tarjetas-teoria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.2rem 0; }
.tarjeta {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 14px;
  padding: 1rem 1.1rem; box-shadow: var(--sombra);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .tarjeta:hover { transform: translateY(-3px); }
}
.tarjeta h3 { margin: .5rem 0 .4rem; font-size: 1.1rem; }
.tarjeta p { font-size: .92rem; margin-bottom: .5rem; }
.tarjeta p:last-child { margin-bottom: 0; }
.ec-tarjeta {
  font-family: var(--f-titulo); font-size: 1.12rem !important;
  background: var(--fondo-hundido); border-radius: 8px; padding: .4rem .7rem;
  display: inline-block; max-width: 100%; overflow-x: auto; white-space: nowrap;
}

/* Ilustraciones SVG: todos los colores salen de las variables del tema */
.ilustracion { width: 100%; height: auto; max-height: 96px; display: block; }
.ilustracion.grande { max-height: none; }
.ilustracion .trazo-suave, .ilustracion .trazo-suave path { stroke: var(--texto-suave); stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; opacity: .7; }
.ilustracion .relleno-suave { fill: var(--texto-suave); opacity: .7; }
.ilustracion .trazo-fuerte { stroke: var(--texto); stroke-width: 2.2; fill: none; stroke-linejoin: round; }
.ilustracion .trazo-i { stroke: var(--petroleo); stroke-width: 2.6; fill: none; }
.ilustracion .trazo-w { stroke: var(--cobre); stroke-width: 2.6; }
.ilustracion .relleno-i { fill: var(--petroleo); }
.ilustracion .relleno-w { fill: var(--cobre); }
.ilustracion .relleno-texto { fill: var(--texto); }
.ilustracion .relleno-fondo { fill: var(--fondo-tarjeta); }
.ilustracion .relleno-acero { fill: var(--acero); stroke: var(--acero-oscuro); stroke-width: 2; }
.ilustracion .trazo-rejilla { stroke: var(--rejilla); stroke-width: 1; }
.ilustracion .trazo-k { stroke-width: 3; stroke-linecap: round; fill: none; }
.ilustracion .k1 { stroke: var(--texto); }
.ilustracion .k2, .ilustracion .k3 { stroke: var(--petroleo); }
.ilustracion .k4 { stroke: var(--cobre); }
.ilustracion .etq { font: 600 13px var(--f-titulo); fill: var(--texto); }
.ilustracion .etq-w { fill: var(--cobre); font-style: italic; }

/* Recuadro destacado */
.destacado {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cobre) 9%, var(--fondo-tarjeta)), var(--fondo-tarjeta) 60%);
  border: 1px solid var(--borde); border-left: 4px solid var(--cobre);
  border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0; box-shadow: var(--sombra);
}
.destacado p { margin-bottom: .5rem; }
.destacado p:last-child { margin-bottom: 0; }
.destacado-t { font-family: var(--f-titulo); font-weight: 600; font-size: 1.1rem; }
.dos-col { display: grid; gap: 1rem; }
@media (min-width: 720px) { .dos-col { grid-template-columns: 1fr 1fr; } }
.dos-col .destacado { margin: 0; }
.dos-col.alinear { align-items: center; margin-bottom: 1rem; }
.rk4-figura { max-width: 24rem; justify-self: center; margin: 0; background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: .8rem; box-shadow: var(--sombra); }

/* Bloques plegables: el desarrollo completo está, pero no estorba */
details.desarrollo {
  border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo-tarjeta);
  margin: 1.2rem 0; overflow: hidden;
}
details.desarrollo > summary {
  cursor: pointer; list-style: none; padding: .75rem 1rem;
  font-family: var(--f-titulo); font-weight: 600;
  display: flex; align-items: center; gap: .6rem;
}
details.desarrollo > summary::-webkit-details-marker { display: none; }
details.desarrollo > summary::before {
  content: "+"; font-family: var(--f-datos); color: var(--cobre);
  width: 1.3rem; height: 1.3rem; border: 1.5px solid var(--cobre); border-radius: 50%;
  display: grid; place-items: center; font-size: .9rem; flex: none;
  transition: transform .2s ease;
}
details.desarrollo[open] > summary::before { content: "−"; }
details.desarrollo > summary:hover { color: var(--cobre); }
details.desarrollo > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
details.desarrollo > :last-child { margin-bottom: 1rem; }
details.desarrollo h4 { font-family: var(--f-titulo); font-weight: 600; margin: 1rem 1rem .3rem; }
details.desarrollo.mini { margin: .6rem 0 0; border-radius: 8px; background: var(--fondo); }
details.desarrollo.mini > summary { padding: .45rem .7rem; font-size: .9rem; }
details.desarrollo.mini ol { padding-left: 1.2rem; font-size: .88rem; }
details.desarrollo.mini p { font-size: .88rem; }

/* Tarjetas de experimentos */
.tarjetas-exp { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); margin: 1rem 0; align-items: start; }
.tarjeta.exp { position: relative; overflow: hidden; }
.exp-letra {
  position: absolute; right: .8rem; top: .3rem; margin: 0;
  font: 700 3.4rem/1 var(--f-titulo); color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--cobre) 55%, transparent);
}
.tarjeta.exp h3 { margin-top: 0; padding-right: 2.6rem; }
.exp-mide { color: var(--texto-suave); font-size: .88rem !important; }
.exp-da { font-family: var(--f-titulo); font-weight: 600; color: var(--cobre); }

/* Manual en cuatro pasos */
.pasos-manual { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: 1rem; }
.pasos-manual div { background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: .8rem .9rem; display: grid; gap: .2rem; }
.pasos-manual b { font-family: var(--f-titulo); font-size: 1.05rem; }
.pasos-manual span { font-size: .88rem; color: var(--texto-suave); }
.lista-conclusiones { padding-left: 1.1rem; }