/* ============================================================
   TEMA1.CSS: identidad de movimiento del tema 1 (Original)

   Se carga solo con el tema 1 activo (site_render.php), después
   de base.css. Los estados los marca ui/movimiento.js.

   Idea: EL TRAZO DE MARCA. La franja del color de la academia que
   cierra la portada es el gesto de todo el tema: una barra que
   pasa y deja ver lo que tapaba, o una línea que se dibuja.
   Razones, una por decisión:
   - Color: el trazo usa solo --color-primario (el de cada academia);
     nada de brillos ni degradés: la marca se reconoce por el gesto.
   - La "pasada" (barra que cubre y descubre) va solo en los títulos
     de sección y en los de cada página: es el momento de lectura
     que importa; repetida en todo dejaría de decir algo.
   - Líneas que se dibujan (portada, filas de razones, footer, barra
     de avance del header): muestran recorrido, que es lo que vende
     una academia (avanzar de nivel).
   - Las tarjetas entran escalonadas y la foto se descorre de abajo
     hacia arriba: se leen de a una, en el orden en que están.
   - Portada: el título entra palabra por palabra desde una ranura,
     como tipografía que se compone; al bajar, se queda atrás
     (parallax) y deja pasar el contenido.
   - Header: al bajar se compacta y su borde pasa a ser la barra de
     avance de lectura. Footer: se dibuja su borde y cierra con la
     firma de la institución a todo el ancho.
   - Campus y panel: los números cuentan hasta su valor, las barras
     de avance se llenan, y cada contenido que se abre entra con
     una pasada corta; el cambio entre páginas es una transición
     (la barra superior y el menú quedan quietos).
   - Hover: los botones y los ítems del menú se llenan de izquierda
     a derecha, el mismo trazo en chico.
   Dial: ENERGÍA 2 / RITMO 2 / MOVIMIENTO 3.
   ============================================================ */

html[data-tema="1"] {
  --t1-corte: cubic-bezier(.77, 0, .18, 1);   /* la pasada: arranca y frena decidida */
  --t1-sale: cubic-bezier(.16, 1, .3, 1);     /* entradas: rápido y se asienta */
  --t1-trazo: var(--color-primario);
  --t1-relleno: color-mix(in oklch, var(--color-primario), black 16%);
}

/* ─────────────────────────────────────────────────────────────
   HOVER: el trazo en chico (vale también con movimiento reducido,
   la base ya acorta las transiciones a cero)
   ───────────────────────────────────────────────────────────── */
html[data-tema="1"] :is(.btn-primary, .ax-btn, .cx-btn, .btn-submit, .course-btn, .ax-pub-cta, .btn:not(.btn-secondary, .btn-danger, .btn-green, .btn-gray)),
html[data-tema="1"].ui-app body button[type="submit"]:not([class]) {
  background-color: var(--color-primario);
  background-image: linear-gradient(var(--t1-relleno), var(--t1-relleno));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .45s var(--t1-corte), border-color .3s, color .2s, transform .08s ease;
}
html[data-tema="1"] :is(.btn-primary, .ax-btn, .cx-btn, .btn-submit, .course-btn, .ax-pub-cta, .btn:not(.btn-secondary, .btn-danger, .btn-green, .btn-gray)):is(:hover, :focus-visible),
html[data-tema="1"].ui-app body button[type="submit"]:not([class]):hover {
  background-color: var(--color-primario);
  background-image: linear-gradient(var(--t1-relleno), var(--t1-relleno));
  background-size: 100% 100%;
  border-color: var(--t1-relleno);
}
/* Menú lateral, índice del campus y links del header: el fondo se corre de izquierda a derecha */
html[data-tema="1"] :is(.ax-item, body.campus .menu-item, body.campus .sb-action) {
  background-image: linear-gradient(var(--ax-surface-2), var(--ax-surface-2));
  background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size .35s var(--t1-corte), color .2s;
}
html[data-tema="1"] :is(.ax-item, body.campus .menu-item, body.campus .sb-action):hover { background-color: transparent; background-size: 100% 100%; }
html[data-tema="1"] :is(.ax-item.is-activo, body.campus .menu-item.active) { background-color: var(--ax-accent-soft); background-image: none; }
html[data-tema="1"] .ax-pub-nav a:not(.ax-pub-cta) { position: relative; }
html[data-tema="1"] .ax-pub-nav a:not(.ax-pub-cta)::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--t1-trazo); transform: scaleX(0); transform-origin: right center;
  transition: transform .4s var(--t1-corte);
}
html[data-tema="1"] .ax-pub-nav a:not(.ax-pub-cta):is(:hover, [aria-current="page"])::after { transform: scaleX(1); transform-origin: left center; }
html[data-tema="1"] .ax-pub-nav a:not(.ax-pub-cta):hover { background: none; }
/* Tarjetas de curso: la foto se acerca y se dibuja el trazo al pie */
html[data-tema="1"] :is(.courses-grid .course-card, .cx .cx-curso) { position: relative; }
html[data-tema="1"] :is(.courses-grid .course-card, .cx .cx-curso)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
  background: var(--t1-trazo); transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--t1-corte);
}
html[data-tema="1"] :is(.courses-grid .course-card, .cx .cx-curso):hover::after { transform: scaleX(1); transform-origin: left center; }
html[data-tema="1"] .courses-grid .course-image { transition: transform .7s var(--t1-sale), clip-path 1s var(--t1-corte); }
html[data-tema="1"] .courses-grid .course-card:hover .course-image { transform: scale(1.05); }
/* Panel del admin: el recuadro del ícono se llena de abajo hacia arriba */
html[data-tema="1"] body.login .admin-option h3 .ui-ic,
html[data-tema="1"] body.profesor .tool-btn .ui-ic {
  background-color: var(--ax-accent-soft);
  background-image: linear-gradient(var(--t1-trazo), var(--t1-trazo));
  background-repeat: no-repeat; background-position: bottom; background-size: 100% 0%;
  transition: background-size .4s var(--t1-corte), color .3s;
}
html[data-tema="1"] body.profesor .tool-btn .ui-ic { width: 32px; height: 32px; padding: 6px; border-radius: var(--radio-sm); }
html[data-tema="1"] :is(body.login .admin-option, body.profesor .tool-btn):hover .ui-ic { background-size: 100% 100%; color: var(--ax-on-accent); }

/* Campus: "Seguí donde dejaste" es la portada del alumno, con la misma cara que la del sitio
   (fondo de la barra de la marca y el trazo al pie). Razón: es la única acción principal del
   inicio y así el campus y el sitio se reconocen como la misma institución. */
html[data-tema="1"] .hm-seguir {
  position: relative; overflow: hidden;
  padding: 26px 28px 30px;
  background: var(--color-header-bg); border: 0; color: var(--p-blanco);
}
html[data-theme="dark"][data-tema="1"] .hm-seguir { box-shadow: inset 0 0 0 1px var(--ax-line-2); }
html[data-tema="1"] .hm-seguir h3 { color: var(--p-blanco); }
html[data-tema="1"] .hm-seguir .hm-etiqueta { color: var(--color-primario); color: oklch(from var(--color-primario) max(l, .8) c h); }
html[data-tema="1"] .hm-seguir p.hm-donde { color: color-mix(in srgb, var(--p-sobre-marca) 72%, transparent); }
html[data-tema="1"] .hm-seguir::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--t1-trazo); transform-origin: left center;
}

/* ─────────────────────────────────────────────────────────────
   CAMPUS: el camino del curso
   Cada unidad es una parada sobre una línea; el trazo de la marca
   llega hasta donde está el alumno. Razón: el avance de un curso es
   un recorrido por unidades, no un porcentaje suelto; así se ve qué
   terminó, dónde está y qué viene (y cuándo se habilita).
   ───────────────────────────────────────────────────────────── */
html[data-tema="1"] .hm-cursos:has(.hm-camino) { grid-template-columns: 1fr; }
html[data-tema="1"] .hm-curso:has(.hm-camino) { padding: 22px 24px 20px; }
html[data-tema="1"] .hm-curso:has(.hm-camino) .hm-barra { display: none; }
html[data-tema="1"] .hm-celdas { display: none; } /* el tablero de celdas es del tema 2 */
html[data-tema="1"] .hm-camino {
  --punto: 36px;
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 6px 0 16px; padding: 0; list-style: none;
}
/* la vía (gris) y el trazo (marca), de la primera parada a la última */
html[data-tema="1"] .hm-camino::before,
html[data-tema="1"] .hm-camino::after {
  content: ''; position: absolute; top: calc(var(--punto) / 2 - 1.5px); height: 3px; border-radius: 3px;
  left: calc(50% / var(--n)); right: calc(50% / var(--n));
}
html[data-tema="1"] .hm-camino::before { background: var(--ax-line); }
html[data-tema="1"] .hm-camino::after { background: var(--t1-trazo); transform-origin: left center; transform: scaleX(var(--llega)); }
html[data-tema="1"] .hm-parada { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0 4px; text-align: center; }
html[data-tema="1"] .hm-punto {
  display: grid; place-items: center; width: var(--punto); height: var(--punto); border-radius: 50%;
  background: var(--ax-surface); border: 2px solid var(--ax-line-2); color: var(--ax-ink-3);
  font-family: var(--font-titulos); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
html[data-tema="1"] .hm-punto .ui-ic { width: 17px; height: 17px; stroke-width: 2.4; }
html[data-tema="1"] .is-hecha .hm-punto { background: var(--t1-trazo); border-color: var(--t1-trazo); color: var(--ax-on-accent); }
html[data-tema="1"] .is-bloqueada .hm-punto { border-style: dashed; }
/* parada actual: un anillo que muestra cuánto de la unidad ya vio */
@property --t1-p { syntax: '<number>'; inherits: false; initial-value: 0; }
html[data-tema="1"] .is-actual .hm-punto {
  --t1-p: var(--p);
  width: calc(var(--punto) + 8px); height: calc(var(--punto) + 8px); margin-top: -4px; border: 0; color: var(--ax-ink);
  background:
    radial-gradient(closest-side, var(--ax-surface) calc(100% - 5px), transparent calc(100% - 4px)),
    conic-gradient(var(--t1-trazo) calc(var(--t1-p) * 1%), var(--ax-line) 0);
}
html[data-tema="1"] .hm-parada-txt { display: grid; gap: 2px; min-width: 0; }
html[data-tema="1"] .hm-parada-tit {
  font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--ax-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-tema="1"] .is-actual .hm-parada-tit { color: var(--ax-ink); }
html[data-tema="1"] .hm-parada-dato { font-size: .74rem; color: var(--ax-ink-3); font-variant-numeric: tabular-nums; }
html[data-tema="1"] .is-actual .hm-parada-dato { color: var(--ax-accent-ink); font-weight: 600; }
/* En celular, el camino baja en vertical: las paradas no entran una al lado de la otra */
@media (max-width: 640px) {
  html[data-tema="1"] .hm-camino { grid-template-columns: 1fr; row-gap: 14px; }
  html[data-tema="1"] .hm-camino::before, html[data-tema="1"] .hm-camino::after {
    top: calc(var(--punto) / 2); bottom: calc(var(--punto) / 2); left: calc(var(--punto) / 2 + 2.5px); right: auto; width: 3px; height: auto;
  }
  html[data-tema="1"] .hm-camino::after { transform-origin: center top; transform: scaleY(var(--llega)); }
  html[data-tema="1"] .hm-parada { flex-direction: row; align-items: center; gap: 12px; padding: 0 0 0 4px; text-align: left; }
  html[data-tema="1"] .is-actual .hm-punto { margin: -4px 0 -4px -4px; }
}

/* Índice del campus: el resaltado del contenido abierto es un marcador que se desliza (ui/movimiento.js) */
html[data-tema="1"] body.campus .sb-nav.con-marcador { position: relative; }
html[data-tema="1"] body.campus .sb-nav.con-marcador .menu-item { position: relative; z-index: 1; }
html[data-tema="1"] body.campus .sb-nav.con-marcador .menu-item.active { background-color: transparent; }
html[data-tema="1"] body.campus .ax-marcador {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0;
  border-radius: var(--radio-sm); background: var(--ax-accent-soft); box-shadow: inset 3px 0 0 var(--t1-trazo);
}
html[data-tema="1"] body.campus .ax-marcador.is-activo { opacity: 1; }

/* Diploma: se abre enmarcado por el trazo de la marca */
html[data-tema="1"] body.campus #content-inner[data-tipo="diploma"] .cv-wrap { position: relative; padding: 18px; }
html[data-tema="1"] body.campus #content-inner[data-tipo="diploma"] .cv-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radio-sm);
  background:
    linear-gradient(var(--t1-trazo), var(--t1-trazo)) left top / 100% 3px no-repeat,
    linear-gradient(var(--t1-trazo), var(--t1-trazo)) right top / 3px 100% no-repeat,
    linear-gradient(var(--t1-trazo), var(--t1-trazo)) right bottom / 100% 3px no-repeat,
    linear-gradient(var(--t1-trazo), var(--t1-trazo)) left bottom / 3px 100% no-repeat;
}

/* Luz que sigue al puntero sobre la acción principal del alumno (una sola en la pantalla) */
html[data-tema="1"] .hm-seguir > * { position: relative; z-index: 1; }
html[data-tema="1"] .hm-seguir::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(380px circle at var(--ax-mx, 70%) var(--ax-my, 50%), color-mix(in oklch, var(--color-primario) 22%, transparent), transparent 65%);
}
html[data-tema="1"] .hm-seguir:hover::before { opacity: 1; }

/* Festejo al completar una unidad o el curso: con la cara de la portada y el trazo al pie */
html[data-tema="1"] .ax-festejo {
  overflow: hidden; padding: 16px 26px 20px; border-radius: var(--radio-md);
  background: var(--color-header-bg); color: var(--p-blanco); box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--p-negro) 55%, transparent);
}
html[data-theme="dark"][data-tema="1"] .ax-festejo { box-shadow: 0 0 0 1px var(--ax-line-2), 0 24px 50px -20px color-mix(in srgb, var(--p-negro) 70%, transparent); }
html[data-tema="1"] .ax-festejo strong { color: var(--p-blanco); font-size: 1.15rem; letter-spacing: -.01em; }
html[data-tema="1"] .ax-festejo span { color: color-mix(in srgb, var(--p-sobre-marca) 75%, transparent); opacity: 1; }
html[data-tema="1"] .ax-festejo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--t1-trazo); transform-origin: left center; }
/* Curso terminado: una franja a todo el ancho, en el medio de la pantalla */
html[data-tema="1"] .ax-festejo.is-grande {
  left: 0; right: 0; top: 50%; bottom: auto; width: auto; max-width: none; transform: translateY(-50%);
  padding: clamp(28px, 5vw, 48px) clamp(16px, 5vw, 64px) clamp(32px, 5vw, 52px); border-radius: 0; text-align: center; gap: 8px;
}
html[data-tema="1"] .ax-festejo.is-grande strong { font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
html[data-tema="1"] .ax-festejo.is-grande span { font-size: 1rem; }
html[data-tema="1"] .ax-festejo.is-grande::after { height: 6px; }

@media (prefers-reduced-motion: no-preference) {

  /* ───────────────────────────────────────────────────────────
     CAMPUS: movimiento del camino, índice, carga y festejos
     ─────────────────────────────────────────────────────────── */
  /* El trazo sale de la primera parada y llega hasta la actual; cada parada terminada se llena
     cuando el trazo pasa por ella, y el anillo de la actual se completa al final */
  html[data-tema="1"] .hm-camino::after { transition: transform 1.6s var(--t1-corte) .45s; }
  html.ax-mov[data-tema="1"] .hm-curso:not(.is-visto) .hm-camino::after { transform: scaleX(0); }
  @media (max-width: 640px) { html.ax-mov[data-tema="1"] .hm-curso:not(.is-visto) .hm-camino::after { transform: scaleY(0); } }
  html[data-tema="1"] .hm-punto { transition: background-color .35s, border-color .35s, color .35s, transform .5s var(--t1-sale), opacity .4s; transition-delay: calc(.45s + var(--t, 0) * 1.3s); }
  html[data-tema="1"] .is-actual .hm-punto { transition: --t1-p 1.2s var(--t1-corte) calc(.5s + var(--t, 0) * 1.4s), transform .5s var(--t1-sale) calc(.45s + var(--t, 0) * 1.3s); }
  html.ax-mov[data-tema="1"] .hm-curso:not(.is-visto) .hm-punto { transform: scale(.4); opacity: 0; }
  html.ax-mov[data-tema="1"] .hm-curso:not(.is-visto) .is-hecha .hm-punto { background: var(--ax-surface); border-color: var(--ax-line-2); color: transparent; }
  html.ax-mov[data-tema="1"] .hm-curso:not(.is-visto) .is-actual .hm-punto { --t1-p: 0; }
  /* "Estás acá": el anillo de la parada actual late dos veces cuando el trazo llega */
  html[data-tema="1"] .hm-curso.is-visto .is-actual .hm-punto { animation: t1-aca 1.1s var(--t1-sale) calc(1.7s + var(--t, 0) * 1.4s) 2; }
  @keyframes t1-aca { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-primario) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
  html[data-tema="1"] .hm-parada-txt { transition: opacity .5s var(--t1-sale), transform .6s var(--t1-sale); transition-delay: calc(.6s + var(--t, 0) * 1.3s); }
  html.ax-mov[data-tema="1"] .hm-curso:not(.is-visto) .hm-parada-txt { opacity: 0; transform: translateY(6px); }
  /* La tarjeta del curso: al pasar el mouse, el trazo corre al pie */
  html[data-tema="1"] .hm-curso { position: relative; overflow: hidden; }
  html[data-tema="1"] .hm-curso::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--t1-trazo); transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--t1-corte);
  }
  html[data-tema="1"] .hm-curso:hover::after { transform: scaleX(1); transform-origin: left center; }
  /* Pendientes: la fila se corre un poco al pasar el mouse, como invitando a entrar */
  html[data-tema="1"] .hm-pend a { transition: background-color .2s, padding-left .35s var(--t1-sale); }
  html[data-tema="1"] .hm-pend a:hover { padding-left: 28px; }

  /* Índice: las secciones entran en orden y el marcador viaja al contenido que se abre */
  html[data-tema="1"] body.campus .menu-curso { transition: opacity .5s var(--t1-sale), transform .6s var(--t1-sale); transition-delay: calc(var(--ax-i, 0) * 90ms); }
  html.ax-mov[data-tema="1"] body.campus .menu-curso:not(.is-visto) { opacity: 0; transform: translateX(-12px); }
  html[data-tema="1"] body.campus .ax-marcador { transition: transform .5s var(--t1-corte), width .5s var(--t1-corte), height .5s var(--t1-corte), opacity .25s; }
  /* Tilde nuevo: aparece con un golpe; el contador de la unidad sube */
  html[data-tema="1"] body.campus .visto-check.is-nuevo { display: inline-block; animation: t1-tilde .6s var(--t1-sale); }
  @keyframes t1-tilde { 0% { transform: scale(0) rotate(-25deg); } 60% { transform: scale(1.4) rotate(0); } }
  html[data-tema="1"] body.campus .mc-cuenta.is-sube { display: inline-block; animation: t1-cuenta .5s var(--t1-sale); }
  @keyframes t1-cuenta { from { transform: translateY(8px); opacity: 0; } }

  /* Cargando un contenido: el trazo corre por una vía, en lugar de la ruedita */
  html[data-tema="1"] body.campus #content-inner .loading .spinner {
    position: relative; overflow: hidden; width: min(220px, 60%); height: 3px; margin: 0 auto 12px;
    border: 0; border-radius: 3px; background: var(--ax-line); animation: none;
  }
  html[data-tema="1"] body.campus #content-inner .loading .spinner::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit;
    background: var(--t1-trazo); animation: t1-carga 1s var(--t1-corte) infinite;
  }
  @keyframes t1-carga { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

  /* Diploma: el marco se dibuja alrededor */
  html[data-tema="1"] body.campus #content-inner[data-tipo="diploma"] .cv-wrap::after { animation: t1-marco 1.6s var(--t1-corte) .3s backwards; }
  @keyframes t1-marco {
    0%   { background-size: 0 3px, 3px 0, 0 3px, 3px 0; }
    25%  { background-size: 100% 3px, 3px 0, 0 3px, 3px 0; }
    50%  { background-size: 100% 3px, 3px 100%, 0 3px, 3px 0; }
    75%  { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0; }
    100% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; }
  }

  /* Festejos */
  html[data-tema="1"] .ax-festejo { animation: t1-festejo .6s var(--t1-sale); }
  @keyframes t1-festejo { from { opacity: 0; transform: translate(-50%, 24px); } }
  html[data-tema="1"] .ax-festejo::after { animation: t1-dibuja 1s var(--t1-corte) .25s backwards; }
  html[data-tema="1"] .ax-festejo > * { animation: t1-baja .5s var(--t1-sale) .2s backwards; }
  html[data-tema="1"] .ax-festejo > span { animation-delay: .32s; }
  /* Curso terminado: la franja entra con la pasada, a todo el ancho */
  html[data-tema="1"] .ax-festejo.is-grande { animation: t1-festejo-grande .9s var(--t1-corte); }
  @keyframes t1-festejo-grande { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  html[data-tema="1"] .ax-festejo.is-grande > * { animation-delay: .55s; }
  html[data-tema="1"] .ax-festejo.is-grande > span { animation-delay: .7s; }
  html[data-tema="1"] .ax-festejo.is-grande::after { animation-delay: .8s; animation-duration: 1.4s; }
  html[data-tema="1"] .ax-festejo.is-sale { opacity: 1; animation: t1-festejo-sale .5s var(--t1-corte) forwards; }
  html[data-tema="1"] .ax-festejo:not(.is-grande).is-sale { animation-name: t1-festejo-sale-chico; }
  @keyframes t1-festejo-sale { to { clip-path: inset(0 0 0 100%); } }
  @keyframes t1-festejo-sale-chico { to { opacity: 0; transform: translate(-50%, 16px); } }

  /* ───────────────────────────────────────────────────────────
     TRANSICIÓN ENTRE PÁGINAS: la barra y el menú quedan quietos,
     el contenido sale y entra
     ─────────────────────────────────────────────────────────── */
  @view-transition { navigation: auto; }
  html[data-tema="1"] :is(.ax-pub, .ax-top) { view-transition-name: ax-barra; }
  html[data-tema="1"] .ax-nav { view-transition-name: ax-menu; }
  html[data-tema="1"]::view-transition-old(root) { animation: t1-vt-sale .2s ease-in both; }
  html[data-tema="1"]::view-transition-new(root) { animation: t1-vt-entra .45s var(--t1-sale) both; }
  html[data-tema="1"]::view-transition-group(ax-barra) { animation-duration: .35s; animation-timing-function: var(--t1-sale); }
  @keyframes t1-vt-sale { to { opacity: 0; } }
  @keyframes t1-vt-entra { from { opacity: 0; transform: translateY(14px); } }
  /* La entrada genérica de la base queda a cargo de las entradas de este tema */
  html[data-tema="1"].ui-app #ax-contenido ~ :is(div, main, section) { animation: none; }

  /* ───────────────────────────────────────────────────────────
     HEADER PÚBLICO
     ─────────────────────────────────────────────────────────── */
  /* Al cargar: la marca y los links bajan en orden (solo en computadora; en celular son un panel) */
  @media (min-width: 861px) {
    html[data-tema="1"] .ax-pub-marca img { animation: t1-baja .7s var(--t1-sale) backwards; }
    html[data-tema="1"] .ax-pub-nav > a { animation: t1-baja .6s var(--t1-sale) backwards; animation-delay: calc(.12s + var(--n, 0) * 55ms); }
    html[data-tema="1"] .ax-pub-nav > a:nth-child(2) { --n: 1; } html[data-tema="1"] .ax-pub-nav > a:nth-child(3) { --n: 2; }
    html[data-tema="1"] .ax-pub-nav > a:nth-child(4) { --n: 3; } html[data-tema="1"] .ax-pub-nav > a:nth-child(5) { --n: 4; }
    html[data-tema="1"] .ax-pub-nav > a:nth-child(6) { --n: 5; } html[data-tema="1"] .ax-pub-nav > a:nth-child(7) { --n: 6; }
    /* Al bajar se compacta. El alto que pierde lo devuelve como margen: la página no salta */
    html[data-tema="1"] .ax-pub { transition: margin-bottom .45s var(--t1-sale), background-color .3s, box-shadow .3s; }
    html[data-tema="1"] .ax-pub-in { transition: height .45s var(--t1-sale); }
    html[data-tema="1"] .ax-pub-marca img { transition: height .45s var(--t1-sale); }
    html[data-tema="1"].ax-bajo .ax-pub { margin-bottom: calc(var(--ax-pub-h) - 78px); background-color: color-mix(in oklch, var(--color-header-bg) 97%, transparent); box-shadow: 0 14px 30px -22px color-mix(in srgb, var(--p-negro) 70%, transparent); }
    html[data-tema="1"].ax-bajo .ax-pub-in { height: 78px; }
    html[data-tema="1"].ax-bajo .ax-pub-marca img { height: 58px; }
  }
  @keyframes t1-baja { from { opacity: 0; transform: translateY(-10px); } }
  /* El borde del header es la barra de avance de lectura (público y aplicación) */
  html[data-tema="1"] :is(.ax-pub, .ax-top)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--t1-trazo); transform-origin: left center;
    transform: scaleX(var(--ax-prog, 0));
  }

  /* ───────────────────────────────────────────────────────────
     PORTADA
     ─────────────────────────────────────────────────────────── */
  html[data-tema="1"].ui-publico :is(.hero-section, .about-hero) { border-bottom-width: 0; padding-bottom: calc(clamp(64px, 9vw, 112px) + 6px); }
  html[data-tema="1"].ui-publico :is(.hero-section, .about-hero)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: var(--t1-trazo); transform-origin: left center;
    animation: t1-dibuja 1.3s var(--t1-corte) .55s backwards;
  }
  @keyframes t1-dibuja { from { transform: scaleX(0); } }
  /* Apertura (solo la primera página de la visita): el color de la marca cubre la portada y se
     recoge hacia abajo hasta quedar como la franja; recién ahí entra el título */
  html.ax-primera[data-tema="1"].ui-publico :is(.hero-section, .about-hero)::before {
    content: ''; display: block; position: absolute; inset: 0; width: auto; height: auto; z-index: 2; pointer-events: none;
    background: var(--t1-trazo); transform-origin: center bottom; transform: scaleY(0);
    animation: t1-telon 1.05s var(--t1-corte) .1s backwards;
  }
  @keyframes t1-telon { from { transform: scaleY(1); } }
  html.ax-primera[data-tema="1"].ui-publico :is(.hero-section, .about-hero)::after { animation: none; }
  html.ax-primera[data-tema="1"] .hero-title .ax-pal > span { animation-delay: calc(.75s + var(--ax-i, 0) * 65ms); }
  html.ax-primera[data-tema="1"].ui-publico .hero-content > :nth-child(2) { animation-delay: 1.15s; }
  html.ax-primera[data-tema="1"].ui-publico .hero-content > :nth-child(3) { animation-delay: 1.3s; }
  /* Título: hasta que se parte en palabras no se muestra (si el script no corre, a los 3 s aparece igual) */
  html.ax-mov[data-tema="1"] .hero-title:not(.ax-partido) { visibility: hidden; }
  html[data-tema="1"] .hero-title.ax-partido { animation: none; }
  html[data-tema="1"] .hero-title .ax-pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
  html[data-tema="1"] .hero-title .ax-pal > span { display: inline-block; animation: t1-ranura .95s var(--t1-sale) backwards; animation-delay: calc(.08s + var(--ax-i, 0) * 65ms); }
  @keyframes t1-ranura { from { transform: translateY(108%); } }
  html[data-tema="1"].ui-publico .hero-content > :nth-child(2) { animation-delay: .5s; }
  html[data-tema="1"].ui-publico .hero-content > :nth-child(3) { animation-delay: .64s; }
  /* Al bajar, la portada se queda atrás y se apaga */
  html[data-tema="1"].ui-publico :is(.hero-section, .about-hero) .hero-content {
    transform: translateY(calc(var(--ax-hero, 0) * 110px));
    opacity: calc(1 - var(--ax-hero, 0) * .85);
  }

  /* ───────────────────────────────────────────────────────────
     LA PASADA: títulos de sección y de cada página
     ─────────────────────────────────────────────────────────── */
  html[data-tema="1"] :is(.ui-publico .section-title, .ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2), .ui-app .admin-container > h2) {
    position: relative; width: fit-content; max-width: 100%;
  }
  html[data-tema="1"].ui-publico .section-container:has(> .features-grid:not([class*="fg-"])) > .section-title { position: sticky; }
  html.ax-mov[data-tema="1"] :is(.ui-publico .section-title, .ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2), .ui-app .admin-container > h2):not(.is-visto) { color: transparent; }
  html[data-tema="1"] :is(.ui-publico .section-title, .ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2), .ui-app .admin-container > h2)::after {
    content: ''; display: block !important; position: absolute; inset: 0; z-index: 1;
    background: var(--t1-trazo); transform: scaleX(0); pointer-events: none;
  }
  html[data-tema="1"] :is(.ui-publico .section-title, .ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2), .ui-app .admin-container > h2).is-visto { animation: t1-tinta 1s var(--t1-corte) backwards; }
  html[data-tema="1"] :is(.ui-publico .section-title, .ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2), .ui-app .admin-container > h2).is-visto::after { animation: t1-pasada 1s var(--t1-corte); }
  /* En la aplicación, la misma pasada más corta: se ve en cada página */
  html[data-tema="1"].ui-app :is(.top-bar, .page-header, .header-row, .ca-header, .admin-container) :is(h1, h2).is-visto,
  html[data-tema="1"].ui-app :is(.top-bar, .page-header, .header-row, .ca-header, .admin-container) :is(h1, h2).is-visto::after { animation-duration: .7s; }
  @keyframes t1-tinta { 0%, 50% { color: transparent; } 51%, 100% { color: var(--ax-ink); } }
  @keyframes t1-pasada {
    0%     { transform: scaleX(0); transform-origin: left center; }
    50%    { transform: scaleX(1); transform-origin: left center; }
    50.01% { transform: scaleX(1); transform-origin: right center; }
    100%   { transform: scaleX(0); transform-origin: right center; }
  }

  /* ───────────────────────────────────────────────────────────
     SITIO PÚBLICO: bloques
     ─────────────────────────────────────────────────────────── */
  /* Razones: la regla de cada fila se dibuja y el texto entra detrás */
  html[data-tema="1"].ui-publico .features-grid:not([class*="fg-"]) .feature-card { position: relative; border-bottom-color: transparent; }
  html[data-tema="1"].ui-publico .features-grid:not([class*="fg-"]) .feature-card::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--ax-line-2); transform-origin: left center;
    transition: transform 1.1s var(--t1-corte); transition-delay: calc(var(--ax-i, 0) * 140ms);
  }
  html[data-tema="1"].ui-publico .feature-card > * { transition: opacity .7s var(--t1-sale), transform .8s var(--t1-sale); transition-delay: calc(.15s + var(--ax-i, 0) * 140ms); }
  html[data-tema="1"].ui-publico .feature-card > .feature-desc { transition-delay: calc(.25s + var(--ax-i, 0) * 140ms); }
  html.ax-mov[data-tema="1"].ui-publico .feature-card:not(.is-visto)::after { transform: scaleX(0); }
  html.ax-mov[data-tema="1"].ui-publico .feature-card:not(.is-visto) > * { opacity: 0; transform: translateX(-18px); }

  /* Tarjetas de cursos (inicio y catálogo): entran de a una; la foto se descorre de abajo arriba */
  html[data-tema="1"] :is(.courses-grid .course-card, .cx .cx-curso, .contact-form, .contact-info, .mission-content, .courses-intro, .cx-intro-texto, .cx-indice) {
    transition: opacity .8s var(--t1-sale), transform .9s var(--t1-sale), border-color .3s, box-shadow .3s;
    transition-delay: calc(var(--ax-i, 0) * 110ms), calc(var(--ax-i, 0) * 110ms), 0s, 0s;
  }
  html.ax-mov[data-tema="1"] :is(.courses-grid .course-card, .cx .cx-curso, .contact-form, .contact-info, .mission-content, .courses-intro, .cx-intro-texto, .cx-indice):not(.is-visto) { opacity: 0; transform: translateY(28px); }
  html[data-tema="1"] .courses-grid .course-card .course-image,
  html[data-tema="1"] .cx .cx-curso .cx-media img { transition-delay: 0s, calc(.12s + var(--ax-i, 0) * 110ms); }
  html[data-tema="1"] .cx .cx-curso .cx-media img { transition: transform .7s var(--t1-sale), clip-path 1s var(--t1-corte); }
  html.ax-mov[data-tema="1"] :is(.courses-grid .course-card:not(.is-visto) .course-image, .cx .cx-curso:not(.is-visto) .cx-media img) { clip-path: inset(100% 0 0 0); }

  /* Llamada (bloque oscuro): se abre desde el centro como un telón */
  html[data-tema="1"].ui-publico .mission-section .cta-box { transition: clip-path 1.1s var(--t1-corte); }
  html[data-tema="1"].ui-publico .cta-box > * { transition: opacity .6s var(--t1-sale) .45s, transform .8s var(--t1-sale) .45s; }
  html.ax-mov[data-tema="1"].ui-publico .cta-box:not(.is-visto) { clip-path: inset(0 50% 0 50% round var(--radio-lg)); }
  html.ax-mov[data-tema="1"].ui-publico .cta-box:not(.is-visto) > * { opacity: 0; transform: translateY(14px); }

  /* ───────────────────────────────────────────────────────────
     FOOTER: se dibuja el borde, entran las columnas y cierra la firma
     ─────────────────────────────────────────────────────────── */
  /* Solo el footer público: el de la aplicación ya es sticky (base.css) y "relative" le pisaría el
     top: 100vh, que pasaría a correrlo una pantalla entera hacia abajo */
  html[data-tema="1"] .ax-pie { position: relative; }
  html[data-tema="1"] :is(.ax-pie, .ax-pie-app)::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
    background: var(--t1-trazo); transform-origin: left center; transition: transform 1.4s var(--t1-corte);
  }
  html.ax-mov[data-tema="1"] :is(.ax-pie, .ax-pie-app):not(.is-visto)::before { transform: scaleX(0); }
  html[data-tema="1"] .ax-pie-in > * { transition: opacity .7s var(--t1-sale), transform .8s var(--t1-sale); }
  html[data-tema="1"] .ax-pie-in > :nth-child(2) { transition-delay: .1s; }
  html[data-tema="1"] .ax-pie-in > :nth-child(3) { transition-delay: .2s; }
  html.ax-mov[data-tema="1"] .ax-pie:not(.is-visto) .ax-pie-in > * { opacity: 0; transform: translateY(18px); }
  html[data-tema="1"] .ax-pie-firma > span { transition: transform 1.3s var(--t1-sale) .25s; }
  html.ax-mov[data-tema="1"] .ax-pie:not(.is-visto) .ax-pie-firma > span { transform: translateY(105%); }

  /* ───────────────────────────────────────────────────────────
     CAMPUS DEL ALUMNO
     ─────────────────────────────────────────────────────────── */
  /* "Seguí donde dejaste": se abre de izquierda a derecha, con el trazo */
  html[data-tema="1"] .hm-seguir { transition: clip-path 1s var(--t1-corte); }
  html[data-tema="1"] .hm-seguir > * { transition: opacity .6s var(--t1-sale) .35s, transform .7s var(--t1-sale) .35s; }
  html.ax-mov[data-tema="1"] .hm-seguir:not(.is-visto) { clip-path: inset(0 100% 0 0 round var(--radio-lg)); }
  html.ax-mov[data-tema="1"] .hm-seguir:not(.is-visto) > * { opacity: 0; transform: translateX(-14px); }
  html[data-tema="1"] .hm-seguir::after { transition: transform 1.1s var(--t1-corte) .55s; }
  html.ax-mov[data-tema="1"] .hm-seguir:not(.is-visto)::after { transform: scaleX(0); }
  /* Cursos: entran escalonados y la barra de avance se llena */
  html[data-tema="1"] :is(.hm-curso, .hm-pend, .pa-hoy, .pa-vista, .admin-option, .tool-btn, .ui-app .card, .ui-app .form-card, .ui-app .stat) {
    transition: opacity .6s var(--t1-sale), transform .7s var(--t1-sale), border-color .2s, box-shadow .2s;
    transition-delay: calc(var(--ax-i, 0) * 70ms), calc(var(--ax-i, 0) * 70ms), 0s, 0s;
  }
  html[data-tema="1"] .hm-curso { transition-delay: calc(.15s + var(--ax-i, 0) * 100ms), calc(.15s + var(--ax-i, 0) * 100ms), 0s, 0s; }
  html.ax-mov[data-tema="1"] :is(.hm-curso, .hm-pend, .pa-hoy, .pa-vista, .admin-option, .tool-btn, .ui-app .card, .ui-app .form-card, .ui-app .stat):not(.is-visto) { opacity: 0; transform: translateY(16px); }
  html[data-tema="1"] .hm-barra span { transform-origin: left center; transition: transform 1.3s var(--t1-corte) calc(.45s + var(--ax-i, 0) * 100ms); }
  html[data-tema="1"] .hm-curso:not(.is-visto) .hm-barra span { transform: scaleX(0); }
  /* Pendientes y lo que hay para atender: filas que entran desde el borde */
  html[data-tema="1"] :is(.hm-pend li, .pa-hoy li) { transition: opacity .5s var(--t1-sale), transform .6s var(--t1-sale); transition-delay: calc(.2s + var(--ax-i, 0) * 70ms); }
  html.ax-mov[data-tema="1"] :is(.hm-pend li, .pa-hoy li):not(.is-visto) { opacity: 0; transform: translateX(-16px); }
  /* Cada contenido que se abre entra con una pasada corta */
  html[data-tema="1"] body.campus #content-inner.ax-cambio > * { animation: t1-abre .6s var(--t1-corte); }
  @keyframes t1-abre { from { opacity: .2; clip-path: inset(0 100% 0 0); } }
  /* Índice del campus: al abrir una sección, sus ítems caen en orden */
  html[data-tema="1"] body.campus .menu-items.open > .menu-item { animation: t1-baja .4s var(--t1-sale) backwards; }
  html[data-tema="1"] body.campus .menu-items.open > .menu-item:nth-child(2) { animation-delay: 40ms; }
  html[data-tema="1"] body.campus .menu-items.open > .menu-item:nth-child(3) { animation-delay: 80ms; }
  html[data-tema="1"] body.campus .menu-items.open > .menu-item:nth-child(4) { animation-delay: 120ms; }
  html[data-tema="1"] body.campus .menu-items.open > .menu-item:nth-child(n+5) { animation-delay: 160ms; }

  /* Menú lateral (admin, profesor): el indicador del ítem activo se dibuja */
  html[data-tema="1"] .ax-item.is-activo::before { animation: t1-indicador .6s var(--t1-corte) .15s backwards; }
  @keyframes t1-indicador { from { transform: scaleY(0); } }
}

/* ─────────────────────────────────────────────────────────────
   FIRMA DEL FOOTER (forma; su entrada está arriba)
   El nombre de la institución a todo el ancho, en el tono de la
   marca sobre el fondo del footer. Es decorativa (aria-hidden): el
   nombre ya está escrito en el footer.
   ───────────────────────────────────────────────────────────── */
html[data-tema="1"] .ax-pie-firma {
  display: block; overflow: hidden;
  max-width: var(--ax-ancho); margin: 0 auto; padding: 8px clamp(16px, 3vw, 32px) 0;
  font-family: var(--font-titulos); font-weight: 800; line-height: .82; letter-spacing: -.045em; white-space: nowrap;
  /* el tamaño sale del largo del nombre (--n, lo pone ui/pie.php): siempre entra en una línea */
  font-size: clamp(1.1rem, calc((min(100vw, var(--ax-ancho)) - 2 * clamp(16px, 3vw, 32px)) / (var(--n) * .6)), 11rem);
  color: color-mix(in oklch, var(--color-primario) 30%, var(--color-header-bg));
}
html[data-tema="1"] .ax-pie-firma > span { display: block; padding-bottom: .16em; }

@media print {
  html.ax-mov [class] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}