/* ============================================================
   TEMA9.CSS: identidad de movimiento del tema 9 (Aurora)

   Se carga solo con el tema 9 activo (site_render.php), después de
   base.css y temas.css (que pone la forma: Unbounded + Manrope, radios
   amplios, bento en las razones y el degradé solo en la portada).
   Los estados los marca ui/movimiento.js.

   Idea: LA CINTA DE COLOR. El color está vivo y se mueve: una cinta
   de dos tonos de la marca recorre la página, las piezas llegan con
   un resorte y arrastran su color, y lo señalado se rodea de color.
   Para academias creativas: arte, diseño, idiomas para jóvenes.
   Razones, una por decisión:
   - Portada: la aurora ya se desplaza; el título entra con resorte,
     palabra por palabra, y detrás pasa una cinta de color. En la
     primera visita, la cinta barre la portada de lado a lado.
   - Títulos: la cinta de color se dibuja debajo y sigue moviéndose
     apenas mientras el título está a la vista.
   - Tarjetas: entran con resorte desde abajo; al señalarlas, un
     contorno de color las rodea.
   - Header: los links llegan con resorte; el señalado se apoya en una
     pastilla de color; al bajar, una cinta fina cruza el pie de la
     barra. Footer: la cinta cruza el borde de arriba.
   - Campus: el avance del curso es una CINTA: un tramo por unidad; los
     terminados quedan pintados con el degradé de la marca y el actual
     se pinta hasta donde va. Carga con un punto que recorre la cinta;
     festejo con una ola de color.
   - Entre páginas: la nueva entra desde abajo con resorte.
   Dial: ENERGÍA 3 / RITMO 3 / MOVIMIENTO 3.
   ============================================================ */

html[data-tema="9"] {
  --t9-resorte: cubic-bezier(.34, 1.4, .64, 1);
  --t9-suave: cubic-bezier(.22, 1, .36, 1);
  --t9-a: var(--color-primario);
  --t9-b: oklch(from var(--color-primario) calc(l * .92) c calc(h + 45));
  --t9-cinta: linear-gradient(90deg, var(--t9-a), var(--t9-b), var(--t9-a));
}

/* ─────────────────────────────────────────────────────────────
   FORMA (sin movimiento)
   ───────────────────────────────────────────────────────────── */
/* Títulos: la cinta debajo */
html[data-tema="9"] :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%; padding-bottom: 14px;
}
html[data-tema="9"] :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; left: 0; bottom: 0; top: auto; width: 100%; height: 6px; margin: 0; transform: none;
  border-radius: 6px; background: var(--t9-cinta) 0 0 / 200% 100%; transform-origin: left center;
}
/* Tarjetas: al señalarlas, un contorno de color las rodea */
html[data-tema="9"] :is(.courses-grid .course-card, .cx .cx-curso, body.login .admin-option, body.profesor .tool-btn, .ui-publico .feature-card, .hm-curso) { position: relative; transition: transform .45s var(--t9-resorte), box-shadow .3s, opacity .35s; }
html[data-tema="9"] :is(.courses-grid .course-card, .cx .cx-curso, body.login .admin-option, body.profesor .tool-btn, .ui-publico .feature-card)::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: var(--t9-cinta) 0 0 / 200% 100%;
}
html[data-tema="9"] :is(.courses-grid .course-card, .cx .cx-curso, body.login .admin-option, body.profesor .tool-btn, .ui-publico .feature-card):hover { transform: translateY(-4px); }
html[data-tema="9"] :is(.courses-grid .course-card, .cx .cx-curso, body.login .admin-option, body.profesor .tool-btn, .ui-publico .feature-card):hover::before { opacity: 1; }
/* Header: pastilla de color detrás del link señalado */
html[data-tema="9"] .ax-pub-nav > a:not(.ax-pub-cta) { transition: background-color .3s, color .2s, transform .35s var(--t9-resorte); }
html[data-tema="9"] .ax-pub-nav > a:not(.ax-pub-cta):is(:hover, [aria-current="page"]) { background: color-mix(in oklch, var(--t9-a) 35%, transparent); color: var(--p-blanco); transform: translateY(-2px); }
/* Footer: la cinta cruza el borde de arriba */
html[data-tema="9"] .ax-pie { position: relative; }
html[data-tema="9"] .ax-pie::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--t9-cinta) 0 0 / 200% 100%; transform-origin: left center; }

/* ─────────────────────────────────────────────────────────────
   CAMPUS: la cinta del curso
   Un tramo por unidad; el terminado queda pintado con el degradé.
   ───────────────────────────────────────────────────────────── */
html[data-tema="9"] .hm-cursos:has(.hm-camino) { grid-template-columns: 1fr; }
html[data-tema="9"] .hm-curso:has(.hm-camino) .hm-barra,
html[data-tema="9"] .hm-celdas { display: none; }
html[data-tema="9"] .hm-camino { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 18px; padding: 0; list-style: none; }
html[data-tema="9"] .hm-parada {
  position: relative; flex: 1 1 150px; display: grid; gap: 10px; padding: 14px 16px 16px;
  border-radius: var(--radio-lg); background: var(--ax-surface-2); overflow: hidden;
}
/* el tramo de cinta: pintado hasta el avance de la unidad */
html[data-tema="9"] .hm-parada::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: linear-gradient(90deg, var(--t9-a) calc(var(--p) * 1%), color-mix(in oklch, var(--ax-ink) 10%, transparent) 0);
}
html[data-tema="9"] .is-hecha { background: linear-gradient(135deg, color-mix(in oklch, var(--t9-a) 22%, var(--ax-surface)), color-mix(in oklch, var(--t9-b) 22%, var(--ax-surface))); }
html[data-tema="9"] .is-hecha::after { background: var(--t9-cinta) 0 0 / 200% 100%; }
html[data-tema="9"] .is-actual { background: var(--ax-surface); box-shadow: 0 0 0 2px var(--t9-a); }
html[data-tema="9"] .is-bloqueada { opacity: .65; }
html[data-tema="9"] .hm-punto { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ax-surface); border: 0; color: var(--ax-ink-2); font-family: var(--font-titulos); font-size: .95rem; font-weight: 700; }
html[data-tema="9"] .is-hecha .hm-punto { background: var(--t9-cinta) 0 0 / 200% 100%; color: var(--ax-on-accent); }
html[data-tema="9"] .hm-punto .ui-ic { width: 18px; height: 18px; stroke-width: 2.4; }
html[data-tema="9"] .hm-parada-txt { display: grid; gap: 2px; }
html[data-tema="9"] .hm-parada-tit { font-family: var(--font-titulos); font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--ax-ink); overflow-wrap: anywhere; }
html[data-tema="9"] .hm-parada-dato { font-size: .76rem; color: var(--ax-ink-3); }
html[data-tema="9"] .is-actual .hm-parada-dato { color: var(--ax-accent-ink); font-weight: 600; }

/* "Seguí donde dejaste": la cinta de fondo */
html[data-tema="9"] .hm-seguir { position: relative; overflow: hidden; border: 0; color: var(--p-blanco); background: linear-gradient(115deg, var(--color-header-bg) 0 45%, var(--t9-a) 78%, var(--t9-b) 100%) 0 0 / 200% 100%; }
html[data-tema="9"] .hm-seguir h3 { color: var(--p-blanco); }
html[data-tema="9"] .hm-seguir .hm-etiqueta { color: color-mix(in srgb, var(--p-blanco) 92%, transparent); }
html[data-tema="9"] .hm-seguir p.hm-donde { color: color-mix(in srgb, var(--p-sobre-marca) 78%, transparent); }
html[data-tema="9"] .hm-seguir .ax-btn { background: var(--p-blanco); color: var(--color-header-bg); border-color: var(--p-blanco); }
/* Índice del campus: pastilla de color que se desliza */
html[data-tema="9"] body.campus .sb-nav.con-marcador { position: relative; }
html[data-tema="9"] body.campus .sb-nav.con-marcador .menu-item { position: relative; z-index: 1; }
html[data-tema="9"] body.campus .sb-nav.con-marcador .menu-item.active { background-color: transparent; }
html[data-tema="9"] body.campus .ax-marcador { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; border-radius: var(--radio-md); background: linear-gradient(90deg, color-mix(in oklch, var(--t9-a) 30%, transparent), color-mix(in oklch, var(--t9-b) 30%, transparent)); }
html[data-tema="9"] body.campus .ax-marcador.is-activo { opacity: 1; }
/* Diploma: la cinta lo enmarca */
html[data-tema="9"] body.campus #content-inner[data-tipo="diploma"] .cv-wrap { position: relative; padding: 20px; border-radius: var(--radio-lg); background: var(--ax-surface); box-shadow: 0 0 0 4px transparent; }
html[data-tema="9"] body.campus #content-inner[data-tipo="diploma"] .cv-wrap::before { content: ''; position: absolute; inset: -4px; z-index: -1; border-radius: calc(var(--radio-lg) + 4px); background: var(--t9-cinta) 0 0 / 200% 100%; }

/* Festejo: la ola de color */
html[data-tema="9"] .ax-festejo { border-radius: var(--radio-lg); padding: 14px 26px; color: var(--p-blanco); background: linear-gradient(110deg, var(--t9-a), var(--t9-b)) 0 0 / 200% 100%; border: 0; }
html[data-tema="9"] .ax-festejo span { color: color-mix(in srgb, var(--p-blanco) 88%, transparent); opacity: 1; }
html[data-tema="9"] .ax-festejo.is-grande {
  inset: 0; left: 0; bottom: auto; width: auto; max-width: none; height: 100%; transform: none; border-radius: 0;
  display: grid; place-content: center; gap: 12px; padding: 32px; text-align: center;
  background: linear-gradient(115deg, var(--color-header-bg) 0 20%, var(--t9-a) 55%, var(--t9-b) 100%) 0 0 / 220% 100%;
}
html[data-tema="9"] .ax-festejo.is-grande strong { font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1.1; text-wrap: balance; }

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

  /* ENTRE PÁGINAS: la nueva entra desde abajo con resorte */
  @view-transition { navigation: auto; }
  html[data-tema="9"] :is(.ax-pub, .ax-top) { view-transition-name: ax-barra; }
  html[data-tema="9"] .ax-nav { view-transition-name: ax-menu; }
  html[data-tema="9"]::view-transition-old(root) { animation: t9-sale .3s ease-in both; }
  html[data-tema="9"]::view-transition-new(root) { animation: t9-entra .6s var(--t9-resorte) both; }
  @keyframes t9-sale { to { opacity: 0; transform: translateY(-20px) scale(.98); } }
  @keyframes t9-entra { from { opacity: 0; transform: translateY(40px) scale(.98); } }
  html[data-tema="9"].ui-app #ax-contenido ~ :is(div, main, section) { animation: none; }

  @keyframes t9-sube { from { opacity: 0; transform: translateY(30px) scale(.96); } }
  @keyframes t9-color { from { background-position: 100% 0; } to { background-position: 0 0; } }

  /* ── HEADER ── */
  @media (min-width: 861px) {
    html[data-tema="9"] .ax-pub-nav > a { animation: t9-sube .6s var(--t9-resorte) backwards; animation-delay: calc(.1s + var(--n, 0) * 70ms); }
    html[data-tema="9"] .ax-pub-nav > a:nth-child(2) { --n: 1; } html[data-tema="9"] .ax-pub-nav > a:nth-child(3) { --n: 2; }
    html[data-tema="9"] .ax-pub-nav > a:nth-child(4) { --n: 3; } html[data-tema="9"] .ax-pub-nav > a:nth-child(5) { --n: 4; }
    html[data-tema="9"] .ax-pub-nav > a:nth-child(6) { --n: 5; } html[data-tema="9"] .ax-pub-nav > a:nth-child(7) { --n: 6; }
  }
  /* Al bajar, una cinta fina cruza el pie de la barra */
  html[data-tema="9"] :is(.ax-pub, .ax-top)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
    background: var(--t9-cinta) 0 0 / 200% 100%; transform: scaleX(0); transform-origin: left center;
    transition: transform .5s var(--t9-suave); animation: t9-color 6s linear infinite;
  }
  html.ax-bajo[data-tema="9"] :is(.ax-pub, .ax-top)::after { transform: scaleX(1); }

  /* ── PORTADA ── */
  html.ax-mov[data-tema="9"] .hero-title:not(.ax-partido) { visibility: hidden; }
  html[data-tema="9"] .hero-title.ax-partido { animation: none; }
  html[data-tema="9"] .hero-title .ax-pal { display: inline-block; }
  html[data-tema="9"] .hero-title .ax-pal > span { display: inline-block; animation: t9-sube .8s var(--t9-resorte) backwards; animation-delay: calc(.1s + var(--ax-i, 0) * 80ms); }
  html[data-tema="9"].ui-publico .hero-content > :nth-child(2) { animation: t9-sube .7s var(--t9-resorte) .5s backwards; }
  html[data-tema="9"].ui-publico .hero-content > :nth-child(3) { animation: t9-sube .7s var(--t9-resorte) .65s backwards; }
  /* Primera visita: una cinta de color barre la portada */
  html.ax-primera[data-tema="9"].ui-publico .hero-aurora::after {
    content: ''; display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(100deg, transparent 20%, var(--t9-a) 40%, var(--t9-b) 60%, transparent 80%) 0 0 / 300% 100%;
    animation: t9-barrido 1.5s var(--t9-suave) both;
  }
  @keyframes t9-barrido { 0% { background-position: 100% 0; opacity: 1; } 70% { opacity: 1; } 100% { background-position: -60% 0; opacity: 0; } }
  html.ax-primera[data-tema="9"] .hero-title .ax-pal > span { animation-delay: calc(.7s + var(--ax-i, 0) * 80ms); }
  html.ax-primera[data-tema="9"].ui-publico .hero-content > :nth-child(2) { animation-delay: 1.15s; }
  html.ax-primera[data-tema="9"].ui-publico .hero-content > :nth-child(3) { animation-delay: 1.3s; }

  /* ── TÍTULOS: la cinta se dibuja y sigue moviéndose ── */
  html[data-tema="9"] :is(.ui-publico .section-title, .ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2), .ui-app .admin-container > h2) { transition: opacity .5s, transform .7s var(--t9-resorte); }
  html.ax-mov[data-tema="9"] :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) { opacity: 0; transform: translateY(22px); }
  html[data-tema="9"] :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 { transition: transform .8s var(--t9-suave) .15s; animation: t9-color 5s linear infinite; }
  html.ax-mov[data-tema="9"] :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)::after { transform: scaleX(0); }

  /* ── BLOQUES: llegan con resorte ── */
  html[data-tema="9"] :is(.ui-publico .feature-card, .courses-grid .course-card, .cx .cx-curso, .courses-intro, .ui-publico .contact-form, .ui-publico .contact-info, .mission-content, .cx-intro-texto, .cx-indice, .cta-box, .hm-curso, .hm-pend, .pa-hoy, .pa-vista, body.login .admin-option, body.profesor .tool-btn, .ui-app .card, .ui-app .form-card, .ui-app .stat, .hm-seguir, .hm-pend li, .pa-hoy li, body.campus .menu-curso) {
    transition: opacity .5s, transform .8s var(--t9-resorte), box-shadow .3s;
    transition-delay: calc(var(--ax-i, 0) * 90ms);
  }
  html.ax-mov[data-tema="9"] :is(.ui-publico .feature-card, .courses-grid .course-card, .cx .cx-curso, .courses-intro, .ui-publico .contact-form, .ui-publico .contact-info, .mission-content, .cx-intro-texto, .cx-indice, .cta-box, .hm-curso, .hm-pend, .pa-hoy, .pa-vista, body.login .admin-option, body.profesor .tool-btn, .ui-app .card, .ui-app .form-card, .ui-app .stat, .hm-seguir, .hm-pend li, .pa-hoy li, body.campus .menu-curso):not(.is-visto) {
    opacity: 0; transform: translateY(34px) scale(.97);
  }

  /* ── FOOTER: la cinta se dibuja y las columnas suben ── */
  html[data-tema="9"] .ax-pie::before { transition: transform 1s var(--t9-suave); animation: t9-color 6s linear infinite; }
  html.ax-mov[data-tema="9"] .ax-pie:not(.is-visto)::before { transform: scaleX(0); }
  html[data-tema="9"] .ax-pie-in > * { transition: opacity .6s, transform .8s var(--t9-resorte); }
  html[data-tema="9"] .ax-pie-in > :nth-child(2) { transition-delay: .1s; }
  html[data-tema="9"] .ax-pie-in > :nth-child(3) { transition-delay: .2s; }
  html.ax-mov[data-tema="9"] .ax-pie:not(.is-visto) .ax-pie-in > * { opacity: 0; transform: translateY(24px); }

  /* ── CAMPUS ── */
  /* Los tramos de la cinta se pintan de a uno */
  html[data-tema="9"] .hm-parada { transition: opacity .5s, transform .7s var(--t9-resorte); transition-delay: calc(.15s + var(--t, 0) * .5s); }
  html.ax-mov[data-tema="9"] .hm-curso:not(.is-visto) .hm-parada { opacity: 0; transform: translateY(22px) scale(.95); }
  html[data-tema="9"] .hm-parada::after { transition: transform 1s var(--t9-suave); transform-origin: left center; transition-delay: calc(.35s + var(--t, 0) * .5s); }
  html.ax-mov[data-tema="9"] .hm-curso:not(.is-visto) .hm-parada::after { transform: scaleX(0); }
  html[data-tema="9"] .is-hecha::after { animation: t9-color 5s linear infinite; }
  html[data-tema="9"] .hm-seguir { animation: t9-color 14s linear infinite; }
  /* Índice */
  html[data-tema="9"] body.campus .ax-marcador { transition: transform .5s var(--t9-resorte), width .5s var(--t9-resorte), height .5s var(--t9-resorte), opacity .25s; }
  html[data-tema="9"] body.campus .menu-items.open > .menu-item { animation: t9-sube .5s var(--t9-resorte) backwards; }
  html[data-tema="9"] body.campus .menu-items.open > .menu-item:nth-child(2) { animation-delay: 50ms; }
  html[data-tema="9"] body.campus .menu-items.open > .menu-item:nth-child(n+3) { animation-delay: 100ms; }
  html[data-tema="9"] body.campus .visto-check.is-nuevo { display: inline-block; animation: t9-sube .6s var(--t9-resorte); }
  html[data-tema="9"] body.campus .mc-cuenta.is-sube { display: inline-block; animation: t9-sube .5s var(--t9-resorte); }
  /* Cargando: un punto que recorre la cinta */
  html[data-tema="9"] body.campus #content-inner .loading .spinner {
    position: relative; overflow: hidden; width: 150px; height: 6px; margin: 0 auto 14px; border: 0; border-radius: 3px;
    background: color-mix(in oklch, var(--ax-ink) 10%, transparent); animation: none;
  }
  html[data-tema="9"] body.campus #content-inner .loading .spinner::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit;
    background: var(--t9-cinta) 0 0 / 200% 100%; animation: t9-recorre 1.2s var(--t9-suave) infinite;
  }
  @keyframes t9-recorre { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
  /* Cada contenido nuevo llega con resorte */
  html[data-tema="9"] body.campus #content-inner.ax-cambio > * { animation: t9-sube .6s var(--t9-resorte); }
  /* Diploma: la cinta gira alrededor */
  html[data-tema="9"] body.campus #content-inner[data-tipo="diploma"] .cv-wrap::before { animation: t9-color 4s linear infinite; }
  /* Festejos */
  html[data-tema="9"] .ax-festejo { animation: t9-festejo .7s var(--t9-resorte), t9-color 5s linear infinite; }
  @keyframes t9-festejo { from { opacity: 0; transform: translateX(-50%) translateY(40px) scale(.9); } }
  html[data-tema="9"] .ax-festejo.is-grande { animation: t9-ola 1s var(--t9-suave) both, t9-color 8s linear infinite; }
  @keyframes t9-ola { from { opacity: 0; clip-path: circle(0% at 50% 100%); } to { opacity: 1; clip-path: circle(140% at 50% 100%); } }
  html[data-tema="9"] .ax-festejo.is-grande > * { animation: t9-sube .8s var(--t9-resorte) .4s backwards; }
  html[data-tema="9"] .ax-festejo.is-grande > span { animation-delay: .55s; }
  html[data-tema="9"] .ax-festejo.is-sale { opacity: 1; animation: t9-festejo-sale .5s ease-in forwards; }
  @keyframes t9-festejo-sale { to { opacity: 0; transform: translateX(-50%) translateY(30px); } }
  html[data-tema="9"] .ax-festejo.is-grande.is-sale { animation-name: t9-sale; }
}

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