/* Estilo Eclipse para la presentación (30 de octubre de 2026). construye_presentacion.py la carga después de
   presentacion.css y de base/eclipse/eclipse.css cuando presentacion.json lleva «"estilo": "eclipse"», y marca
   <html data-estilo="eclipse">. Cambia el aspecto, no el funcionamiento: papel crema con fibras de risografía, titulares en
   Fraunces, rótulos en Space Mono, superficies con filete de tinta, el avance en discos y la imagen de cada pantalla en un
   disco de color con la foto en trama (base/eclipse/eclipse.js). */

@font-face { font-family: Fraunces; src: url("fuentes/fraunces-latin-full-normal.woff2?v=e75e106b") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Fraunces; src: url("fuentes/fraunces-latin-ext-full-normal.woff2?v=89349bb9") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; src: url("fuentes/space-mono-latin-400-normal.woff2?v=e2ee2d37") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fuentes/space-mono-latin-700-normal.woff2?v=d0c504bd") format("woff2"); font-weight: 700; font-display: swap; }

html[data-estilo="eclipse"] {
  --pizarra: var(--tinta); --coral: var(--disco-b); --coral-suave: color-mix(in srgb, var(--disco-b) 30%, var(--papel-claro));
  --resaltador: color-mix(in srgb, var(--disco-a) 55%, var(--papel-claro)); --resaltador-suave: color-mix(in srgb, var(--disco-a) 24%, var(--papel-claro));
  --texto: Urbanist, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --grano: none; --sombra: none; --radio: 6px; --radio-chico: 4px;
  --curva: var(--ecl-entra); --d1: 160ms; --d2: 240ms; --d3: 320ms;
}
html[data-estilo="eclipse"] body { background: url("eclipse/papel.jpg?v=740e3ca7") 0 0 / 512px 512px, var(--papel); }

/* titulares en Fraunces (óptica 72, sin curvas blandas ni letras caprichosas); rótulos en Space Mono */
html[data-estilo="eclipse"] :is(h1, h2, h3) { font-family: var(--titular); font-weight: 620; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; letter-spacing: -0.012em; }
html[data-estilo="eclipse"] .contenido > h1 { font-weight: 600; line-height: 1.04; }
html[data-estilo="eclipse"] :is(.antetitulo, .meta, .paso-numero, .cuenta-boton, .fuente, .instruccion, .eje, .cabecera .cuenta) {
  font-family: var(--rotulo); font-weight: 400; letter-spacing: .02em; }
html[data-estilo="eclipse"] .antetitulo { text-transform: uppercase; font-size: .9375rem; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 10px; }
html[data-estilo="eclipse"] .antetitulo::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 70% 30%, var(--papel) 0 48%, transparent 50%), var(--disco-a); box-shadow: inset 0 0 0 1.5px var(--tinta); }

/* la cabecera y la barra de abajo, con un filete de tinta */
html[data-estilo="eclipse"] .cabecera { background: color-mix(in srgb, var(--papel) 92%, transparent); border-bottom: 1.5px solid var(--tinta); }
html[data-estilo="eclipse"] .navegacion { border-top: 1.5px solid var(--tinta); }

/* superficies planas con filete de tinta, sin sombras ni giros */
html[data-estilo="eclipse"] :is(.item-lista, .paso, .columna, .celda, .etapa, .acordeon-item, .cara, .ajustes) {
  box-shadow: none; border: 1.5px solid var(--tinta); background: var(--papel-claro); }
html[data-estilo="eclipse"] .item-lista p { font-family: var(--texto); font-weight: 700; }
html[data-estilo="eclipse"] .destacado { transform: none; box-shadow: none; background: var(--papel-claro); border: 1.5px solid var(--tinta);
  padding-left: 58px; }
html[data-estilo="eclipse"] .destacado::before { content: ""; position: absolute; left: 18px; top: 18px; width: 24px; height: 24px; border-radius: 50%;
  background: repeating-linear-gradient(-35deg, var(--tinta) 0 2px, transparent 2px 6px), var(--disco-b); }
html[data-estilo="eclipse"] .destacado .titulo-destacado { font-family: var(--rotulo); font-weight: 700; text-transform: uppercase; font-size: .9375rem; letter-spacing: .02em; }
html[data-estilo="eclipse"] .destacado .titulo-destacado .icono { display: none; }
html[data-estilo="eclipse"] .insignia { background: var(--disco-a); border: 1.5px solid var(--tinta); color: var(--tinta); }
html[data-estilo="eclipse"] .conclusion { background: transparent; border: 1.5px solid var(--tinta); }
html[data-estilo="eclipse"] .instruccion { background: transparent; border: 1.5px dashed var(--tinta-2); }

/* la cifra en Fraunces */
html[data-estilo="eclipse"] .cifra-numero { font-family: var(--titular); font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; }
html[data-estilo="eclipse"] .cifra-numero .pila { font-weight: 600; letter-spacing: -0.02em; }
html[data-estilo="eclipse"] .cifra-numero .unidad { font-weight: 500; }

/* el avance: un disco por pantalla; los vistos en tinta, el actual a medio eclipsar */
html[data-estilo="eclipse"] .segmentos { gap: 7px; justify-content: center; }
html[data-estilo="eclipse"] .segmentos i { flex: 0 0 11px; width: 11px; height: 11px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--tinta-2);
  transition: background-color var(--d2) var(--curva), transform var(--d2) var(--curva); }
html[data-estilo="eclipse"] .segmentos i.hecho { background: var(--tinta); box-shadow: none; }
html[data-estilo="eclipse"] .segmentos i.actual { background: radial-gradient(circle at 72% 30%, var(--papel) 0 46%, transparent 48%), var(--disco-a);
  box-shadow: inset 0 0 0 1.5px var(--tinta); transform: scale(1.45); }
html[data-estilo="eclipse"] .barra-avance i { background: var(--tinta); }

/* botones: tinta llena; al presionarlos se achican a 0,97 en 160 ms */
html[data-estilo="eclipse"] .boton { transition: transform var(--d1) var(--curva), background-color var(--d1) ease; }
html[data-estilo="eclipse"] .navegacion .continuar { --duo: var(--disco-a); }
@media (hover: hover) and (pointer: fine) {
  html[data-estilo="eclipse"] .boton:hover, html[data-estilo="eclipse"] .navegacion .continuar:hover { background: #34332e; }
  html[data-estilo="eclipse"] .boton.secundario:hover { background: var(--papel-2); }
}
/* la pestaña elegida, subrayada con el color del disco; el nodo elegido, con un anillo de tinta */
html[data-estilo="eclipse"] .pestana[aria-selected="true"] { box-shadow: inset 0 -4px 0 var(--disco-a), inset 0 -5.5px 0 var(--tinta); }
html[data-estilo="eclipse"] .nodo[aria-selected="true"] .circulo-nodo { box-shadow: 0 0 0 3px var(--papel), 0 0 0 4.5px var(--tinta); }

/* los trazos de lápiz y los signos, en tinta: los colores claros de los discos no llegan a 3:1 sobre el papel */
html[data-estilo="eclipse"] .pieza.lapiz path, html[data-estilo="eclipse"] .trazo-cifra path { stroke: var(--tinta); }
html[data-estilo="eclipse"] .terminos .operador { font-family: var(--titular); font-style: normal; font-weight: 500; font-size: 2rem; color: var(--tinta-2); }

/* la imagen ocupa la mitad visual de la pantalla, sobre el mismo papel */
html[data-estilo="eclipse"] .visual.con-eclipse { background: transparent; }
html[data-estilo="eclipse"] .visual.con-eclipse .eclipse-visual { position: absolute; inset: 3% 3%; }
/* las pantallas sin imagen llevan un eclipse chico en la esquina de arriba, cortado por el borde y detrás del texto */
@media (min-width: 1100px) and (min-height: 700px) {
  html[data-estilo="eclipse"]:not(.imprimir) .pantalla.centrada { isolation: isolate; }
  html[data-estilo="eclipse"]:not(.imprimir) .pantalla.centrada::before, html[data-estilo="eclipse"]:not(.imprimir) .pantalla.centrada::after {
    content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
  html[data-estilo="eclipse"]:not(.imprimir) .pantalla.centrada::before { width: 230px; height: 230px; right: -84px; top: -96px; background: var(--disco-a); }
  html[data-estilo="eclipse"]:not(.imprimir) .pantalla.centrada::after { width: 104px; height: 104px; right: 72px; top: 34px; mix-blend-mode: multiply;
    background: repeating-linear-gradient(-35deg, var(--tinta) 0 2.5px, transparent 2.5px 8px) 50% 50% / 100% 100%, var(--disco-b);
    -webkit-mask: radial-gradient(circle at 74% 24%, transparent 0 46%, #000 47%); mask: radial-gradient(circle at 74% 24%, transparent 0 46%, #000 47%); }
  html[data-estilo="eclipse"]:not(.imprimir) .pantalla.centrada.entra-adelante::before, html[data-estilo="eclipse"]:not(.imprimir) .pantalla.centrada.entra-atras::before { animation: ecl-esquina 560ms var(--ecl-entra) both; }
  html[data-estilo="eclipse"]:not(.imprimir) .pantalla.centrada.entra-adelante::after, html[data-estilo="eclipse"]:not(.imprimir) .pantalla.centrada.entra-atras::after { animation: ecl-esquina 620ms var(--ecl-entra) 100ms both; }
}
@keyframes ecl-esquina { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
html.imprimir[data-estilo="eclipse"] body { background: var(--papel); }

/* las pantallas entran con un desplazamiento corto; con movimiento reducido, solo fundido */
html[data-estilo="eclipse"] .entra-adelante .anima, html[data-estilo="eclipse"] .entra-atras .anima { animation-delay: calc(var(--i, 0) * 50ms + 40ms); }
@media (prefers-reduced-motion: reduce) {
  html[data-estilo="eclipse"] .segmentos i.actual { transform: none; }
}