/* Eclipse en el navegador (30 de octubre de 2026): lo común a la presentación, la infografía y la ruta. Cada plantilla
   carga esta hoja después de la suya y antes de su propio eclipse.css, que declara las letras con sus rutas y ajusta sus
   piezas. Los colores de los discos (--disco-a, --disco-b, --cruce) los escribe el constructor según la paleta de la
   carrera y la marca del cliente, en un :root que va después; aquí van los de Salud. */

:root { --disco-a: #f7cc00; --disco-b: #ef81ca; --cruce: #ef6b00; }
:root[data-estilo="eclipse"] {
  --papel: #f7f5e4; --papel-claro: #fcfbf3; --papel-2: #ece9d3; --tinta: #171715; --tinta-2: #4a483f; --gris: #6b685e; --regla: #cfcab3;
  --titular: Fraunces, Georgia, serif; --rotulo: "Space Mono", ui-monospace, monospace;
  /* base/movimiento.md: ease-out fuerte para entrar */
  --ecl-entra: cubic-bezier(0.23, 1, 0.32, 1); --ecl-mueve: cubic-bezier(0.77, 0, 0.175, 1);
}

/* la imagen: discos, foto en trama, sombra rayada y contorno */
.eclipse-visual { position: relative; }
.eclipse-visual .ecl-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ecl-disco-a { fill: var(--disco-a); }
.ecl-disco-b { fill: var(--disco-b); }
.ecl-cruce { fill: var(--cruce); }
.ecl-sombra line { stroke: var(--tinta); stroke-width: 4.5; }
.ecl-contorno { fill: none; stroke: var(--tinta); stroke-width: 2.5; }
.ecl-raya { fill: var(--tinta); }

/* la entrada: el disco grande crece desde 0,6, la foto aparece, el disco chico llega y el contorno se dibuja (unos 700 ms) */
.ecl-a, .ecl-b, .ecl-raya { transform-box: fill-box; }
.ecl-a { transform-origin: center; }
.ecl-raya { transform-origin: 0 50%; }
.eclipse-visual:not(.ecl-quieto) .ecl-a { animation: ecl-crece 560ms var(--ecl-entra) both; }
.eclipse-visual:not(.ecl-quieto) .ecl-foto { animation: ecl-aparece 420ms ease-out 140ms both; }
.eclipse-visual:not(.ecl-quieto) .ecl-raya { animation: ecl-raya 360ms var(--ecl-entra) both; animation-delay: calc(var(--k, 0) * 14ms + 180ms); }
.eclipse-visual:not(.ecl-quieto) .ecl-b { animation: ecl-llega 620ms var(--ecl-entra) 120ms both; }
.eclipse-visual:not(.ecl-quieto) .ecl-contorno { stroke-dasharray: 1; animation: ecl-traza 700ms var(--ecl-entra) 260ms both; }
@keyframes ecl-crece { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ecl-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes ecl-raya { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ecl-llega { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } to { opacity: 1; transform: none; } }
@keyframes ecl-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .eclipse-visual .ecl-a, .eclipse-visual .ecl-foto, .eclipse-visual .ecl-raya, .eclipse-visual .ecl-b, .eclipse-visual .ecl-contorno { animation: none !important; }
}
@media (forced-colors: active) { .eclipse-visual { display: none; } }