/* ============================================================
   TEMA14.CSS: tema 14 (Mosaico) — forma y movimiento

   Se carga solo con el tema 14 activo (site_render.php), después de
   base.css. Su forma y su movimiento viven acá.

   Idea: EL MOSAICO. La página es un mosaico de piezas planas, todas del
   color de la marca en distintos tonos, que SE DAN VUELTA: al entrar,
   al señalarlas y al completarse. Para arte, diseño y talleres.
   Razones, una por decisión:
   - Color: cuatro tonos sacados del color de la academia (más claro,
     más oscuro y dos vecinos). No hay colores ajenos a la marca.
   - Tipografía: Schibsted Grotesk en títulos (firme, de cartel) + Inter
     en el cuerpo, que en piezas chicas se lee mejor.
   - Formas: rectángulos sin sombra y casi sin radio; el mosaico se
     sostiene por el color y por el orden, no por el relieve.
   - Portada: el panel es un mosaico de nueve piezas que se dan vuelta
     una por una. En la primera visita, las piezas se dan vuelta desde
     una esquina, en diagonal, y descubren la portada.
   - Títulos: una pieza de color se da vuelta al lado del texto.
   - Tarjetas: entran dándose vuelta; al señalarlas se pintan del color.
   - Header: los links se dan vuelta al cargar; el señalado se pinta.
     Al bajar, la barra deja una tira de piezas de colores. Footer: la
     misma tira arriba.
   - Campus: el avance del curso es un MOSAICO: una pieza por unidad;
     las terminadas quedan dadas vuelta y pintadas. Carga: tres piezas
     que se dan vuelta; festejo: el mosaico se arma en la pantalla.
   - Entre páginas: la nueva se da vuelta y queda.
   Dial: ENERGÍA 3 / RITMO 2 / MOVIMIENTO 2.
   ============================================================ */

html[data-tema="14"] {
  --ax-curva: cubic-bezier(.4, 0, .2, 1);
  --t14-giro: cubic-bezier(.4, 0, .2, 1);
  --t14-a: var(--color-primario);
  --t14-b: oklch(from var(--color-primario) calc(l * .8) c calc(h + 35));
  --t14-c: oklch(from var(--color-primario) min(calc(l * 1.12), .92) calc(c * .7) calc(h - 30));
  --t14-d: oklch(from var(--color-primario) calc(l * .62) calc(c * .8) h);
}

/* ─────────────────────────────────────────────────────────────
   FORMA
   ───────────────────────────────────────────────────────────── */
html[data-tema="14"] :is(.card, .form-card, .stat, .hm-curso, .hm-pend, .admin-option, .tool-btn, .courses-grid .course-card, .cx .cx-curso, .ui-publico .feature-card, .ui-publico .contact-form, #content-inner, .sidebar) {
  border: 0; box-shadow: none; background: var(--ax-surface);
}
html[data-tema="14"] :is(.ui-publico .feature-card, body.login .admin-option, body.profesor .tool-btn) { background: var(--ax-surface-2); }
html[data-tema="14"] .ax-item.is-activo { background: var(--t14-a); color: var(--ax-on-accent); }
html[data-tema="14"] .ax-item.is-activo .ui-ic { color: var(--ax-on-accent); }
html[data-tema="14"] .ax-item.is-activo::before { display: none; }
/* Títulos: la pieza de color al lado */
html[data-tema="14"] :is(.ui-publico .section-title, .ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2), .ui-app .admin-container > h2) {
  display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%;
}
html[data-tema="14"] :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: static; flex: 0 0 auto; width: 26px; height: 26px; margin: 0;
  background: var(--t14-a); transform: none;
}
/* Header: el link señalado se pinta */
html[data-tema="14"] .ax-pub-nav > a:not(.ax-pub-cta) { border-radius: 0; }
html[data-tema="14"] .ax-pub-nav > a:not(.ax-pub-cta):is(:hover, [aria-current="page"]) { background: var(--t14-a); color: var(--ax-on-accent); }
/* Footer: la tira de piezas arriba */
html[data-tema="14"] .ax-pie { position: relative; }
html[data-tema="14"] .ax-pie::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; transform-origin: left center;
  background: repeating-linear-gradient(90deg, var(--t14-a) 0 60px, var(--t14-b) 60px 120px, var(--t14-c) 120px 180px, var(--t14-d) 180px 240px);
}
/* Portada partida: el panel es un mosaico de nueve piezas */
html[data-tema="14"].ui-publico .hero-split { background: var(--color-header-bg); }
html[data-tema="14"].ui-publico .hero-split-panel {
  border: 0; border-radius: 0; background:
    conic-gradient(from 0deg, var(--t14-a) 0 25%, var(--t14-b) 0 50%, var(--t14-c) 0 75%, var(--t14-d) 0) 0 0 / 33.34% 33.34%;
}
html[data-tema="14"].ui-publico .hero-split-panel span { color: var(--ax-on-accent); mix-blend-mode: normal; }

/* ─────────────────────────────────────────────────────────────
   CAMPUS: el mosaico del curso
   Una pieza por unidad: la terminada queda pintada, la actual se pinta
   hasta donde va, la bloqueada queda vacía.
   ───────────────────────────────────────────────────────────── */
html[data-tema="14"] .hm-cursos:has(.hm-camino) { grid-template-columns: 1fr; }
html[data-tema="14"] .hm-curso:has(.hm-camino) .hm-barra,
html[data-tema="14"] .hm-celdas { display: none; }
html[data-tema="14"] .hm-camino { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin: 10px 0 18px; padding: 0; list-style: none; }
html[data-tema="14"] .hm-parada {
  position: relative; display: grid; align-content: space-between; gap: 10px; min-height: 132px; padding: 14px;
  background: var(--ax-surface-2); color: var(--ax-ink);
}
html[data-tema="14"] .is-hecha { background: var(--t14-a); color: var(--ax-on-accent); }
html[data-tema="14"] .is-hecha:nth-child(4n+2) { background: var(--t14-b); }
html[data-tema="14"] .is-hecha:nth-child(4n+3) { background: var(--t14-c); }
html[data-tema="14"] .is-hecha:nth-child(4n) { background: var(--t14-d); }
html[data-tema="14"] .is-actual { background: linear-gradient(90deg, var(--t14-a) calc(var(--p) * 1%), var(--ax-surface-2) 0); }
html[data-tema="14"] .is-bloqueada { background: repeating-linear-gradient(-45deg, var(--ax-surface-2) 0 8px, var(--ax-surface) 8px 9px); }
html[data-tema="14"] .hm-punto { width: auto; height: auto; justify-self: start; background: none; border: 0; color: inherit; font-family: var(--font-titulos); font-size: 1.4rem; font-weight: 800; }
html[data-tema="14"] .hm-punto .ui-ic { width: 22px; height: 22px; stroke-width: 2.6; }
html[data-tema="14"] .hm-parada-txt { display: grid; gap: 2px; }
html[data-tema="14"] .hm-parada-tit { font-family: var(--font-titulos); font-size: .84rem; font-weight: 700; line-height: 1.25; color: inherit; overflow-wrap: anywhere; }
html[data-tema="14"] .hm-parada-dato { font-size: .75rem; color: inherit; opacity: .8; }

/* "Seguí donde dejaste": pieza grande de color */
html[data-tema="14"] .hm-seguir { background: var(--t14-a); color: var(--ax-on-accent); border: 0; border-radius: 0; }
html[data-tema="14"] .hm-seguir :is(h3, .hm-etiqueta) { color: var(--ax-on-accent); }
html[data-tema="14"] .hm-seguir p.hm-donde { color: color-mix(in oklch, var(--ax-on-accent) 75%, transparent); }
html[data-tema="14"] .hm-seguir .ax-btn { background: var(--ax-surface); color: var(--ax-ink); border-color: var(--ax-surface); }
/* Índice del campus: el marcador es una pieza de color */
html[data-tema="14"] body.campus .sb-nav.con-marcador { position: relative; }
html[data-tema="14"] body.campus .sb-nav.con-marcador .menu-item { position: relative; z-index: 1; border-radius: 0; }
html[data-tema="14"] body.campus .sb-nav.con-marcador .menu-item.active { background-color: transparent; color: var(--ax-on-accent); }
html[data-tema="14"] body.campus .ax-marcador { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; background: var(--t14-a); }
html[data-tema="14"] body.campus .ax-marcador.is-activo { opacity: 1; }
/* Diploma: enmarcado por cuatro piezas */
html[data-tema="14"] body.campus #content-inner[data-tipo="diploma"] .cv-wrap {
  padding: 18px; border: 8px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--t14-a) 0 40px, var(--t14-b) 40px 80px, var(--t14-c) 80px 120px, var(--t14-d) 120px 160px) 8;
}

/* Festejo */
html[data-tema="14"] .ax-festejo { border-radius: 0; padding: 14px 24px; background: var(--t14-a); color: var(--ax-on-accent); border: 0; }
html[data-tema="14"] .ax-festejo span { color: color-mix(in oklch, var(--ax-on-accent) 80%, transparent); opacity: 1; }
html[data-tema="14"] .ax-festejo.is-grande {
  inset: 0; left: 0; bottom: auto; width: auto; max-width: none; height: 100%; transform: none;
  display: grid; place-content: center; gap: 12px; padding: 32px; text-align: center;
  background: conic-gradient(from 0deg, var(--t14-a) 0 25%, var(--t14-b) 0 50%, var(--t14-c) 0 75%, var(--t14-d) 0) 0 0 / 25% 25%;
}
html[data-tema="14"] .ax-festejo.is-grande :is(strong, span) { color: var(--ax-on-accent); }
html[data-tema="14"] .ax-festejo.is-grande strong { font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1.05; text-wrap: balance; }

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

  /* ENTRE PÁGINAS: la nueva se da vuelta y queda */
  @view-transition { navigation: auto; }
  html[data-tema="14"] :is(.ax-pub, .ax-top) { view-transition-name: ax-barra; }
  html[data-tema="14"] .ax-nav { view-transition-name: ax-menu; }
  html[data-tema="14"]::view-transition-old(root) { animation: t14-sale .25s var(--t14-giro) both; }
  html[data-tema="14"]::view-transition-new(root) { animation: t14-vuelta .5s var(--t14-giro) both; }
  @keyframes t14-sale { to { opacity: 0; transform: perspective(1200px) rotateX(6deg); } }
  @keyframes t14-vuelta { from { opacity: 0; transform: perspective(1200px) rotateX(-70deg); } }
  html[data-tema="14"].ui-app #ax-contenido ~ :is(div, main, section) { animation: none; }

  @keyframes t14-pieza { from { opacity: 0; transform: perspective(700px) rotateY(-80deg); } }

  /* ── PORTADA: las piezas del panel se dan vuelta ── */
  html[data-tema="14"].ui-publico .hero-split-panel { animation: t14-pieza .7s var(--t14-giro) .2s backwards; transform-origin: left center; }
  html.ax-mov[data-tema="14"] .hero-title:not(.ax-partido) { visibility: hidden; }
  html[data-tema="14"] .hero-title.ax-partido { animation: none; }
  html[data-tema="14"] .hero-title .ax-pal { display: inline-block; }
  html[data-tema="14"] .hero-title .ax-pal > span { display: inline-block; animation: t14-pieza .5s var(--t14-giro) backwards; animation-delay: calc(.1s + var(--ax-i, 0) * 70ms); transform-origin: left center; }
  html[data-tema="14"].ui-publico .hero-content > :nth-child(2) { animation: t14-pieza .5s var(--t14-giro) .5s backwards; }
  html[data-tema="14"].ui-publico .hero-content > :nth-child(3) { animation: t14-pieza .5s var(--t14-giro) .62s backwards; }
  /* Primera visita: un mosaico se da vuelta en diagonal y descubre la portada */
  html.ax-primera[data-tema="14"].ui-publico .hero-split::after {
    content: ''; display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: conic-gradient(from 0deg, var(--t14-a) 0 25%, var(--t14-b) 0 50%, var(--t14-c) 0 75%, var(--t14-d) 0) 0 0 / 12.5% 25%;
    animation: t14-mosaico 1.2s var(--t14-giro) both;
  }
  @keyframes t14-mosaico { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }
  html.ax-primera[data-tema="14"] .hero-title .ax-pal > span { animation-delay: calc(.85s + var(--ax-i, 0) * 70ms); }
  html.ax-primera[data-tema="14"].ui-publico .hero-split-panel { animation-delay: 1s; }

  /* ── HEADER ── */
  @media (min-width: 861px) {
    html[data-tema="14"] .ax-pub-nav > a { animation: t14-pieza .45s var(--t14-giro) backwards; animation-delay: calc(.1s + var(--n, 0) * 55ms); transform-origin: left center; }
    html[data-tema="14"] .ax-pub-nav > a:nth-child(2) { --n: 1; } html[data-tema="14"] .ax-pub-nav > a:nth-child(3) { --n: 2; }
    html[data-tema="14"] .ax-pub-nav > a:nth-child(4) { --n: 3; } html[data-tema="14"] .ax-pub-nav > a:nth-child(5) { --n: 4; }
    html[data-tema="14"] .ax-pub-nav > a:nth-child(6) { --n: 5; } html[data-tema="14"] .ax-pub-nav > a:nth-child(7) { --n: 6; }
  }
  /* Al bajar: la barra deja la tira de piezas */
  html[data-tema="14"] :is(.ax-pub, .ax-top)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; pointer-events: none;
    background: repeating-linear-gradient(90deg, var(--t14-a) 0 40px, var(--t14-b) 40px 80px, var(--t14-c) 80px 120px, var(--t14-d) 120px 160px);
    transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--t14-giro);
  }
  html.ax-bajo[data-tema="14"] :is(.ax-pub, .ax-top)::after { transform: scaleX(1); }

  /* ── TÍTULOS Y BLOQUES: se dan vuelta ── */
  html[data-tema="14"] :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: t14-pieza .5s var(--t14-giro) backwards; }
  html.ax-mov[data-tema="14"] :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; }
  html[data-tema="14"] :is(.ui-publico .section-title, .ui-app .admin-container > h2)::after { transition: transform .5s var(--t14-giro) .2s; }
  html.ax-mov[data-tema="14"] :is(.ui-publico .section-title, .ui-app .admin-container > h2):not(.is-visto)::after { transform: perspective(500px) rotateY(-80deg); }
  html[data-tema="14"] :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).is-visto {
    animation: t14-pieza .55s var(--t14-giro) backwards; animation-delay: calc(var(--ax-i, 0) * 70ms);
  }
  html.ax-mov[data-tema="14"] :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; }
  /* Al señalar una tarjeta, se pinta del color */
  html[data-tema="14"] :is(.courses-grid .course-card, .cx .cx-curso, body.login .admin-option, body.profesor .tool-btn, .ui-publico .feature-card) { transition: background-color .3s var(--t14-giro), color .3s; }
  html[data-tema="14"] :is(.courses-grid .course-card, .cx .cx-curso, body.login .admin-option, body.profesor .tool-btn, .ui-publico .feature-card):hover { background: var(--t14-a) !important; }
  html[data-tema="14"] :is(.courses-grid .course-card, .cx .cx-curso, body.login .admin-option, body.profesor .tool-btn, .ui-publico .feature-card):hover :is(h2, h3, p, span, .course-title, .course-desc, .feature-title, .feature-desc, .cx-nombre, .cx-desc) { color: var(--ax-on-accent) !important; }

  /* ── FOOTER ── */
  html[data-tema="14"] .ax-pie::before { transition: transform .7s var(--t14-giro); }
  html.ax-mov[data-tema="14"] .ax-pie:not(.is-visto)::before { transform: scaleX(0); }
  html[data-tema="14"] .ax-pie-in > * { transition: opacity .01s; }
  html[data-tema="14"] .ax-pie.is-visto .ax-pie-in > * { animation: t14-pieza .5s var(--t14-giro) backwards; }
  html[data-tema="14"] .ax-pie.is-visto .ax-pie-in > :nth-child(2) { animation-delay: .1s; }
  html[data-tema="14"] .ax-pie.is-visto .ax-pie-in > :nth-child(3) { animation-delay: .2s; }
  html.ax-mov[data-tema="14"] .ax-pie:not(.is-visto) .ax-pie-in > * { opacity: 0; }

  /* ── CAMPUS: las piezas del mosaico se dan vuelta, una tras otra ── */
  html[data-tema="14"] .hm-curso.is-visto .hm-parada { animation: t14-pieza .5s var(--t14-giro) backwards; animation-delay: calc(.1s + var(--t, 0) * .45s); }
  html.ax-mov[data-tema="14"] .hm-curso:not(.is-visto) .hm-parada { opacity: 0; }
  html[data-tema="14"] .is-actual { transition: background .9s var(--t14-giro); transition-delay: calc(.4s + var(--t, 0) * .45s); }
  html.ax-mov[data-tema="14"] .hm-curso:not(.is-visto) .is-actual { background: var(--ax-surface-2); }
  /* Índice */
  html[data-tema="14"] body.campus .ax-marcador { transition: transform .3s var(--t14-giro), width .3s var(--t14-giro), height .3s var(--t14-giro), opacity .15s; }
  html[data-tema="14"] body.campus .menu-items.open > .menu-item { animation: t14-pieza .4s var(--t14-giro) backwards; transform-origin: left center; }
  html[data-tema="14"] body.campus .menu-items.open > .menu-item:nth-child(2) { animation-delay: 45ms; }
  html[data-tema="14"] body.campus .menu-items.open > .menu-item:nth-child(n+3) { animation-delay: 90ms; }
  html[data-tema="14"] body.campus .visto-check.is-nuevo { display: inline-block; animation: t14-pieza .45s var(--t14-giro); }
  html[data-tema="14"] body.campus .mc-cuenta.is-sube { display: inline-block; animation: t14-pieza .45s var(--t14-giro); }
  /* Cargando: tres piezas que se dan vuelta */
  html[data-tema="14"] body.campus #content-inner .loading .spinner {
    position: relative; width: 16px; height: 16px; margin: 0 auto 16px; border: 0; border-radius: 0; background: var(--t14-a);
    animation: t14-carga 1.2s var(--t14-giro) infinite;
  }
  html[data-tema="14"] body.campus #content-inner .loading .spinner::before,
  html[data-tema="14"] body.campus #content-inner .loading .spinner::after {
    content: ''; position: absolute; top: 0; width: 16px; height: 16px; background: var(--t14-b); animation: t14-carga 1.2s var(--t14-giro) infinite;
  }
  html[data-tema="14"] body.campus #content-inner .loading .spinner::before { left: -22px; animation-delay: -.2s; background: var(--t14-c); }
  html[data-tema="14"] body.campus #content-inner .loading .spinner::after { left: 22px; animation-delay: .2s; background: var(--t14-d); }
  @keyframes t14-carga { 0%, 100% { transform: perspective(400px) rotateY(0); } 50% { transform: perspective(400px) rotateY(180deg); } }
  /* Contenido nuevo y festejos */
  html[data-tema="14"] body.campus #content-inner.ax-cambio > * { animation: t14-pieza .5s var(--t14-giro); }
  html[data-tema="14"] .ax-festejo { animation: t14-festejo .5s var(--t14-giro); }
  @keyframes t14-festejo { from { opacity: 0; transform: translateX(-50%) perspective(700px) rotateX(-70deg); } }
  html[data-tema="14"] .ax-festejo.is-grande { animation: t14-arma .8s steps(4, end) both; }
  @keyframes t14-arma { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  html[data-tema="14"] .ax-festejo.is-grande > * { animation: t14-pieza .6s var(--t14-giro) .5s backwards; }
  html[data-tema="14"] .ax-festejo.is-grande > span { animation-delay: .62s; }
  html[data-tema="14"] .ax-festejo.is-sale { opacity: 1; animation: t14-sale .35s var(--t14-giro) forwards; }
}

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

/* ============================================================
   PORTADA PROPIA (temas/tema14/hero.php)
   El mosaico que se arma. Razón: el tema son piezas de color; la
   portada las muestra armándose sola al lado del título, y el fondo
   deja ver la cuadrícula del mosaico.
   ============================================================ */
html[data-tema="14"].ui-publico .t14-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(84px, 12vw, 150px);
  border-bottom: 10px solid var(--t14-a);
  background: var(--color-header-bg);
}
/* La cuadrícula del mosaico, muy tenue, detrás de todo */
html[data-tema="14"].ui-publico .t14-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .32;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, color-mix(in oklch, #fff 12%, transparent) 119px 120px),
    repeating-linear-gradient(0deg, transparent 0 119px, color-mix(in oklch, #fff 10%, transparent) 119px 120px);
  -webkit-mask-image: linear-gradient(120deg, #000 0 45%, transparent 75%);
  mask-image: linear-gradient(120deg, #000 0 45%, transparent 75%);
}
html[data-tema="14"].ui-publico .t14-hero .hero-title { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
html[data-tema="14"].ui-publico .t14-panel {
  position: relative; overflow: hidden; z-index: 1; max-width: 460px; border-radius: 0; border: 0;
  background: var(--t14-d); box-shadow: 22px 22px 0 0 color-mix(in oklch, var(--t14-a) 45%, transparent);
}
html[data-tema="14"].ui-publico .t14-panel > .t14-piezas { position: absolute; inset: 0; z-index: 0; display: grid; padding: 0; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
html[data-tema="14"].ui-publico .t14-piezas i { display: block; background: var(--t14-a); }
/* Las piezas alternan los cuatro colores del tema, en damero */
html[data-tema="14"].ui-publico .t14-piezas i:nth-child(4n+2) { background: var(--t14-b); }
html[data-tema="14"].ui-publico .t14-piezas i:nth-child(4n+3) { background: var(--t14-c); }
html[data-tema="14"].ui-publico .t14-piezas i:nth-child(4n+4) { background: color-mix(in oklch, var(--t14-b) 70%, var(--t14-c)); }
html[data-tema="14"].ui-publico .t14-piezas i:nth-child(8n+1) { background: var(--t14-c); }
html[data-tema="14"].ui-publico .t14-piezas i:nth-child(8n+6) { background: var(--t14-a); }
html[data-tema="14"].ui-publico .t14-panel > span:not(.t14-piezas) {
  position: relative; z-index: 1; align-self: end; justify-self: stretch;
  padding: 22px 24px; background: var(--t14-d); color: #fff; mix-blend-mode: normal;
  font-size: clamp(1.4rem, 2.2vw, 2rem); text-align: left; text-shadow: none;
}
@media (max-width: 860px) {
  /* En el teléfono el mosaico se muestra como una franja ancha y baja */
  html[data-tema="14"].ui-publico .t14-hero .t14-panel { display: grid; order: 2; max-width: none; aspect-ratio: 16 / 9; justify-self: stretch; box-shadow: 12px 12px 0 0 color-mix(in oklch, var(--t14-a) 45%, transparent); }
  html[data-tema="14"].ui-publico .t14-panel > span { font-size: clamp(1.5rem, 7vw, 2.2rem); padding: 8%; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Cada pieza se da vuelta sola, en diagonal desde la esquina de arriba */
  html[data-tema="14"].ui-publico .t14-piezas i {
    animation: t14-vuelve-pieza .55s var(--t14-giro) backwards;
    animation-delay: calc(.25s + (var(--f) + var(--c)) * 90ms);
  }
  @keyframes t14-vuelve-pieza { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
  html.ax-primera[data-tema="14"].ui-publico .t14-piezas i { animation-delay: calc(1s + (var(--f) + var(--c)) * 90ms); }
  html[data-tema="14"].ui-publico .t14-panel { animation: t14-entra-panel .6s var(--t14-giro) .15s backwards; }
  @keyframes t14-entra-panel { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  /* Al bajar, el panel se corre un poco (el texto queda quieto) */
  html[data-tema="14"].ui-publico .t14-panel { translate: 0 calc(var(--ax-hero, 0) * -40px); }
}