/* =====================================================================
   presentacion.css — Diapositivas 16:9
   El escenario siempre mide 16:9 y cabe en la pantalla. Los tamaños de
   letra usan "cqw" (1 % del ancho del escenario): así la diapositiva se ve
   igual en la laptop y en el proyector, sin escalar imágenes borrosas.
   ===================================================================== */

body.modo-presentacion {
  margin: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
  background: var(--fondo-hundido);
}

.modo-presentacion main.escenario { margin: 0; padding: 0; }   /* anula el diseño del sitio */
.escenario {
  container-type: size;
  position: relative;
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  background: var(--fondo);
  overflow: hidden;
}
/* Mismo brillo cobre de la portada del sitio, siempre detrás */
.escenario::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60cqw 45cqw at 85% 20%, color-mix(in srgb, var(--cobre) 13%, transparent), transparent 70%),
    radial-gradient(50cqw 40cqw at 5% 100%, color-mix(in srgb, var(--petroleo) 10%, transparent), transparent 70%);
}

.diapo {
  position: absolute; inset: 0;
  padding: 5cqw 6cqw 6cqw;
  display: none; flex-direction: column; gap: 2cqw;
  font-size: 1.6cqw;
}
.diapo.activa { display: flex; animation: entrar .45s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(1.2cqw); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .diapo.activa { animation: none; } }
.diapo.centrada { align-items: center; justify-content: center; text-align: center; }

.p-ante { font-family: var(--f-datos); font-size: 1.1cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--cobre); margin: 0; }
.p-h2 { font-family: var(--f-titulo); font-weight: 600; font-size: 3.4cqw; margin: 0; line-height: 1.1; border: 0; padding: 0; display: block; }
.p-sub { font-size: 2cqw; color: var(--texto-suave); margin: 0; }
.p-nota { font-size: 1.4cqw; color: var(--texto-suave); margin: 0; }
.p-pie { margin-top: auto; font-size: 1.3cqw; color: var(--texto-suave); }
.p-aviso {
  position: absolute; left: 6cqw; bottom: 2.2cqw; margin: 0;
  font-size: 1.1cqw; color: var(--aviso); background: var(--aviso-fondo);
  padding: .3cqw 1cqw; border-radius: .5cqw; border: 1px dashed var(--aviso);
}
.p-ec { font-family: var(--f-titulo); font-size: 2.6cqw; margin: 0; }
.p-ec.grande { font-size: 4.2cqw; }
.p-ec.chica { font-size: 2cqw; background: var(--fondo-hundido); border-radius: .6cqw; padding: .4cqw 1cqw; display: inline-block; }
.degradado { background: linear-gradient(95deg, var(--cobre), var(--petroleo)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 0 · Carátula */
.caratula-p { flex-direction: row; align-items: center; gap: 5cqw; }
.caratula-p.activa { display: flex; }
.caratula-p-escudo { width: 24cqw; height: 24cqw; flex: none; }
.caratula-p-texto p { margin: 0; }
.cp-u { font-family: var(--f-titulo); font-weight: 700; font-size: 2.6cqw; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; }
.cp-f, .cp-c { font-size: 1.45cqw; color: var(--texto-suave); margin-top: .4cqw !important; }
.cp-curso { font-family: var(--f-titulo); font-weight: 600; font-size: 1.8cqw; margin-top: 2.4cqw !important; }
.cp-titulo { font-family: var(--f-titulo); font-weight: 700; font-size: 3cqw; line-height: 1.1; margin-top: 1cqw !important; }
.cp-sub { font-size: 1.5cqw; color: var(--cobre); margin-top: .4cqw !important; }
.cp-datos { display: grid; grid-template-columns: auto 1fr; gap: .5cqw 1.6cqw; margin: 2.4cqw 0 1.6cqw; font-size: 1.6cqw; }
.cp-datos dt { color: var(--texto-suave); }
.cp-datos dd { margin: 0; font-weight: 600; }
.cp-fecha { font-size: 1.4cqw; color: var(--texto-suave); }

/* 1 · Portada */
.portada-p { flex-direction: row; align-items: center; gap: 3cqw; }
.portada-p.activa { display: flex; }
.col-texto { flex: 1.05; display: flex; flex-direction: column; gap: 1.6cqw; }
.p-titulo { font-family: var(--f-titulo); font-weight: 700; font-stretch: condensed; font-size: 5.4cqw; line-height: 1; margin: 0; }
.p-autor { font-size: 1.6cqw; margin-top: 2cqw; }
.p-autor span { color: var(--texto-suave); font-size: 1.3cqw; }
.col-motor { flex: 1; height: 100%; display: flex; flex-direction: column; }
.col-motor #motor-canvas { flex: 1; width: 100%; min-height: 0; height: auto; }
.col-motor .motor-barra { display: flex; align-items: center; gap: 1cqw; }
.col-motor .motor-etiqueta { font-size: 1cqw; }
.modo-presentacion .boton { font-size: 1.3cqw; padding: .6cqw 1.4cqw; }

/* 2 · Pregunta */
.p-frase { font-family: var(--f-titulo); font-weight: 600; font-size: 4.4cqw; line-height: 1.15; margin: 1cqw 0 3cqw; }
.p-flujo { list-style: none; counter-reset: f; padding: 0; margin: 0; display: flex; gap: 1.2cqw; }
.p-flujo li {
  counter-increment: f; font-family: var(--f-titulo); font-size: 1.8cqw;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 1cqw;
  padding: .8cqw 1.6cqw; display: flex; align-items: center; gap: .8cqw;
}
.p-flujo li::before {
  content: counter(f); font-family: var(--f-datos); font-size: 1.1cqw; color: var(--fondo);
  background: var(--cobre); width: 2cqw; height: 2cqw; border-radius: 50%; display: grid; place-items: center;
}
.p-flujo li + li { position: relative; }

/* 3 · Física */
.p-tres { flex: 1; display: grid; grid-template-columns: 1fr .9fr 1fr; gap: 3cqw; align-items: center; text-align: center; }
.p-bloque { background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 1.4cqw; padding: 2cqw; box-shadow: var(--sombra); display: grid; gap: 1cqw; }
.p-bloque .ilustracion { max-height: 12cqw; }
.p-igual { display: grid; gap: 1cqw; }
.p-igual .p-ec { color: var(--cobre); }

/* 4 · Modelo */
.p-ecuaciones { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; }
.p-ecuaciones p {
  font-family: var(--f-titulo); font-size: 3.8cqw; margin: 0;
  display: grid; grid-template-columns: 14cqw 1fr; align-items: baseline;
}
.p-etq { font-family: var(--f-datos); font-size: 1.2cqw; color: var(--texto-suave); letter-spacing: .08em; text-transform: uppercase; }

/* 5 · RK4 */
.p-dos { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqw; align-items: center; }
.p-dos .ilustracion { background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 1.4cqw; padding: 1.5cqw; }
.p-lista { display: grid; gap: 2.2cqw; }
.p-dato { margin: 0; font-size: 1.6cqw; color: var(--texto-suave); }
.p-dato b { display: block; font-family: var(--f-datos); font-size: 3.2cqw; color: var(--texto); }

/* 6 · Simulador */
.p-sim { flex: 1; display: grid; grid-template-columns: 26cqw 1fr; gap: 3cqw; min-height: 0; }
.p-controles { display: flex; flex-direction: column; gap: 2cqw; justify-content: center; }
.p-controles label { display: grid; gap: .6cqw; font-size: 1.5cqw; color: var(--texto-suave); }
.p-controles label b { color: var(--texto); font-family: var(--f-datos); font-size: 2cqw; }
.p-controles input[type="range"] { width: 100%; accent-color: var(--cobre); height: 2cqw; }
.p-lecturas { display: grid; gap: 1cqw; margin-top: 1cqw; }
.p-lecturas div { background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 1cqw; padding: .8cqw 1.2cqw; display: flex; justify-content: space-between; align-items: baseline; }
.p-lecturas span { font-size: 1.3cqw; color: var(--texto-suave); }
.p-lecturas b { font-family: var(--f-datos); font-size: 2.2cqw; font-style: normal; }
.p-graficas { display: grid; grid-template-rows: 1fr 1fr; gap: 1.5cqw; min-height: 0; }
.lienzo-p { width: 100%; height: 100%; min-height: 0; display: block; background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 1.2cqw; box-shadow: var(--sombra); }

/* 7 · Experimentos */
.p-exp { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; align-items: center; }
.p-exp > div {
  position: relative; overflow: hidden;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: 1.4cqw;
  padding: 2.4cqw 2cqw; box-shadow: var(--sombra); display: grid; gap: 1.2cqw; min-height: 22cqw; align-content: end;
}
.p-exp b { font-family: var(--f-titulo); font-size: 2.2cqw; font-weight: 600; }
.p-exp .p-nota { font-family: var(--f-titulo); font-size: 2cqw; color: var(--cobre); }
.p-letra { position: absolute; top: -1.5cqw; right: 1cqw; font: 700 11cqw/1 var(--f-titulo); color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--cobre) 45%, transparent); }

/* 8 · Parámetros */
.p-param { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqw; align-content: center; }
.p-param > div {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-top: .5cqw solid var(--cobre);
  border-radius: 1.2cqw; padding: 2cqw 1.4cqw; display: grid; gap: .4cqw; text-align: center; box-shadow: var(--sombra);
}
.p-simbolo { font-family: var(--f-titulo); font-size: 3cqw; font-style: italic; color: var(--cobre); }
.p-param b { font-family: var(--f-datos); font-size: 2.8cqw; }
.p-unidad { font-size: 1.3cqw; color: var(--texto-suave); }
.p-nombre { font-size: 1.2cqw; color: var(--texto-suave); margin-top: .6cqw; }

/* 9 y 10 · Validación */
.p-val { flex: 1; display: grid; grid-template-columns: 1fr 24cqw; gap: 3cqw; align-items: center; min-height: 0; }
.lienzo-p.alto { height: 100%; }
.p-cifra { display: grid; gap: 1cqw; }
.p-cifra b { font-family: var(--f-titulo); font-size: 8cqw; line-height: 1; background: linear-gradient(95deg, var(--cobre), var(--petroleo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p-cifra span { font-size: 1.5cqw; color: var(--texto-suave); }

/* Validación con dos gráficas */
.p-val-doble { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; min-height: 0; }
.p-val-col { display: grid; grid-template-rows: 1fr auto; gap: 1cqw; min-height: 0; }
.p-cifra-chica { margin: 0; font-size: 1.5cqw; color: var(--texto-suave); display: flex; align-items: baseline; gap: 1cqw; }
.p-cifra-chica b { font-family: var(--f-titulo); font-size: 4.4cqw; background: linear-gradient(95deg, var(--cobre), var(--petroleo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p-controles .p-nota b { font-family: var(--f-datos); color: var(--texto); }

/* 11 · Errores */
.p-errores { list-style: none; padding: 0; margin: auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.p-errores li { background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-left: .5cqw solid var(--petroleo); border-radius: 1.2cqw; padding: 2cqw; font-size: 1.7cqw; color: var(--texto-suave); display: grid; gap: .5cqw; }
.p-errores b { font-family: var(--f-titulo); font-size: 2.4cqw; color: var(--texto); }

/* 12 · Conclusiones */
.p-concl { list-style: none; padding: 0; margin: auto 0; display: grid; gap: 2.6cqw; }
.p-concl li { font-family: var(--f-titulo); font-size: 3.2cqw; line-height: 1.2; padding-left: 3cqw; position: relative; }
.p-concl li::before { content: ""; position: absolute; left: 0; top: .5em; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--cobre); }

/* Navegación */
.p-nav {
  position: fixed; right: 1.2rem; bottom: 1rem; z-index: 5;
  display: flex; align-items: center; gap: .3rem;
  background: color-mix(in srgb, var(--fondo-tarjeta) 85%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--borde); border-radius: 999px; padding: .25rem .5rem;
  opacity: .35; transition: opacity .2s;
}
.p-nav:hover, .p-nav:focus-within { opacity: 1; }
.p-nav button { background: none; border: 0; color: var(--texto); font-size: 1rem; cursor: pointer; padding: .2rem .45rem; border-radius: 6px; }
.p-nav button:hover { background: var(--fondo-hundido); }
.p-nav span { font-family: var(--f-datos); font-size: .8rem; color: var(--texto-suave); min-width: 3.5rem; text-align: center; }
.p-progreso { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; z-index: 5; }
.p-progreso div { height: 100%; width: 0; background: linear-gradient(90deg, var(--cobre), var(--petroleo)); transition: width .3s ease; }