/* ============================================================
   TEMA12.CSS: tema 12 (Burbuja) — forma y movimiento

   Se carga solo con el tema 12 activo (site_render.php), después de
   base.css. Su forma y su movimiento viven acá (no tiene bloque en
   temas.css).

   Idea: LA BURBUJA. Vidrio claro y liviano: todo flota. Las piezas
   suben despacio, se elevan al señalarlas y las esquinas son muy
   redondeadas. Para bienestar, idiomas para chicos y cursos de ritmo
   tranquilo que igual quieren verse modernos.
   Razones, una por decisión:
   - Color: un velo del color de la marca arriba y burbujas del mismo
     color muy diluidas; las superficies son vidrio claro.
   - Tipografía: Poppins en títulos (geométrica, amable) y Manrope en
     el cuerpo.
   - Portada: el panel de vidrio sube flotando y detrás pasan tres
     burbujas lentas (el único movimiento continuo). En la primera
     visita, una burbuja crece desde abajo y descubre la portada.
   - Títulos: entran subiendo y dejan una burbuja al lado.
   - Tarjetas: flotan (suben) al entrar y se elevan más al señalarlas.
   - Header: el link señalado se apoya en una burbuja; al bajar, la
     barra se vuelve vidrio esmerilado. Footer: borde superior curvo.
   - Campus: el avance del curso son PERLAS: un círculo por unidad que
     se llena de abajo hacia arriba, como una burbuja con líquido.
     Carga con burbujas que suben; festejo: burbujas que suben y se van.
   - Entre páginas: la nueva sube flotando.
   Dial: ENERGÍA 1 / RITMO 2 / MOVIMIENTO 3.
   ============================================================ */

html[data-tema="12"] {
  --ax-curva: cubic-bezier(.22, 1, .36, 1);
  --t12-flota: cubic-bezier(.22, 1, .36, 1);
  --t12-marca: var(--color-primario);
  --t12-vidrio: color-mix(in oklch, var(--ax-surface) 78%, transparent);
  --t12-filo: color-mix(in srgb, var(--p-blanco) 60%, transparent);
  --t12-tinte: color-mix(in oklch, var(--color-primario) 10%, var(--ax-bg));
}
html[data-tema="12"][data-theme="dark"] { --t12-vidrio: color-mix(in srgb, var(--p-blanco) 7%, transparent); --t12-filo: color-mix(in srgb, var(--p-blanco) 14%, transparent); }
@property --t12-p { syntax: '<number>'; inherits: false; initial-value: 0; }

/* Fondo: un velo del color de la marca que se disuelve hacia abajo */
html[data-tema="12"] body { background: linear-gradient(180deg, var(--t12-tinte) 0, var(--ax-bg) 700px) no-repeat, var(--ax-bg); }

/* ─────────────────────────────────────────────────────────────
   FORMA
   ───────────────────────────────────────────────────────────── */
html[data-tema="12"] :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) {
  background: var(--t12-vidrio); border: 1px solid var(--t12-filo);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px -26px color-mix(in srgb, var(--p-sombra) 50%, transparent);
}
html[data-tema="12"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn, .btn-secondary) { border-radius: var(--radio-pill); }
html[data-tema="12"] .ax-item { border-radius: var(--radio-pill); }
html[data-tema="12"] .ax-item.is-activo::before { display: none; }
html[data-tema="12"] :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { border-color: var(--t12-filo); background: var(--t12-vidrio); }
/* Títulos: la burbuja al lado */
html[data-tema="12"] :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="12"] :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: 14px; height: 14px; margin: 0; transform: none;
  border-radius: 50%; background: var(--t12-marca);
}
/* Header: burbuja detrás del link señalado */
html[data-tema="12"] .ax-pub-nav > a:not(.ax-pub-cta) { border-radius: var(--radio-pill); }
html[data-tema="12"] .ax-pub-nav > a:not(.ax-pub-cta):is(:hover, [aria-current="page"]) { background: color-mix(in srgb, var(--p-blanco) 14%, transparent); }
/* Footer: borde de arriba curvo */
html[data-tema="12"] .ax-pie { position: relative; border-radius: 40px 40px 0 0; overflow: hidden; margin-top: 30px; }

/* ─────────────────────────────────────────────────────────────
   CAMPUS: las perlas del curso
   Un círculo por unidad que se llena como una burbuja con líquido.
   Razón: el tema es liviano; el avance se ve sin números ni tablas.
   ───────────────────────────────────────────────────────────── */
html[data-tema="12"] .hm-cursos:has(.hm-camino) { grid-template-columns: 1fr; }
html[data-tema="12"] .hm-curso:has(.hm-camino) .hm-barra,
html[data-tema="12"] .hm-celdas { display: none; }
html[data-tema="12"] .hm-camino { display: flex; flex-wrap: wrap; gap: 18px 14px; margin: 10px 0 18px; padding: 0; list-style: none; }
html[data-tema="12"] .hm-parada { display: grid; justify-items: center; gap: 10px; width: 118px; text-align: center; }
html[data-tema="12"] .hm-punto {
  --t12-p: var(--p);
  position: relative; overflow: hidden; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  background: var(--t12-vidrio); border: 1px solid var(--t12-filo); color: var(--ax-ink-2);
  font-family: var(--font-titulos); font-size: 1.05rem; font-weight: 600;
  box-shadow: inset 0 2px 0 var(--t12-filo), 0 12px 24px -16px color-mix(in oklch, var(--t12-marca) 70%, transparent);
}
html[data-tema="12"] .hm-punto::before {
  content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; z-index: -1; height: calc(var(--t12-p) * 1%);
  background: color-mix(in oklch, var(--t12-marca) 65%, transparent);
  border-radius: 40% 40% 0 0 / 14px 14px 0 0;
}
html[data-tema="12"] .hm-punto .ui-ic { width: 24px; height: 24px; stroke-width: 2.2; }
html[data-tema="12"] .is-hecha .hm-punto { color: var(--ax-on-accent); }
html[data-tema="12"] .is-actual .hm-punto { border-color: var(--t12-marca); }
html[data-tema="12"] .is-bloqueada .hm-punto { border-style: dashed; color: var(--ax-ink-3); }
html[data-tema="12"] .hm-parada-txt { display: grid; gap: 2px; }
html[data-tema="12"] .hm-parada-tit { font-size: .82rem; 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="12"] .is-actual .hm-parada-tit { color: var(--ax-ink); }
html[data-tema="12"] .hm-parada-dato { font-size: .75rem; color: var(--ax-ink-3); }
html[data-tema="12"] .is-actual .hm-parada-dato { color: var(--ax-accent-ink); font-weight: 600; }
@media (max-width: 560px) { html[data-tema="12"] .hm-parada { width: calc(33.33% - 10px); } }

/* "Seguí donde dejaste": vidrio con una burbuja grande al costado */
html[data-tema="12"] .hm-seguir {
  position: relative; overflow: hidden; border: 1px solid var(--t12-filo); border-radius: var(--radio-lg);
  background: linear-gradient(120deg, color-mix(in oklch, var(--t12-marca) 16%, var(--ax-surface)), var(--t12-vidrio));
}
html[data-tema="12"] .hm-seguir::before {
  content: ''; position: absolute; right: -40px; top: -30px; width: 220px; height: 220px; border-radius: 50%;
  background: color-mix(in oklch, var(--t12-marca) 22%, transparent);
}
html[data-tema="12"] .hm-seguir > * { position: relative; z-index: 1; }
/* Índice del campus: burbuja que se desliza */
html[data-tema="12"] body.campus .sb-nav.con-marcador { position: relative; }
html[data-tema="12"] body.campus .sb-nav.con-marcador .menu-item { position: relative; z-index: 1; border-radius: var(--radio-pill); }
html[data-tema="12"] body.campus .sb-nav.con-marcador .menu-item.active { background-color: transparent; }
html[data-tema="12"] body.campus .ax-marcador { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; border-radius: var(--radio-pill); background: color-mix(in oklch, var(--t12-marca) 18%, var(--ax-surface)); box-shadow: inset 0 1px 0 var(--t12-filo); }
html[data-tema="12"] body.campus .ax-marcador.is-activo { opacity: 1; }
/* Diploma: sobre vidrio, con halo suave */
html[data-tema="12"] body.campus #content-inner[data-tipo="diploma"] .cv-wrap { padding: 18px; border-radius: var(--radio-lg); background: var(--t12-vidrio); box-shadow: 0 0 0 8px color-mix(in oklch, var(--t12-marca) 12%, transparent); }

/* Festejo */
html[data-tema="12"] .ax-festejo { border-radius: var(--radio-pill); padding: 14px 26px; background: var(--ax-surface); color: var(--ax-ink); border: 1px solid var(--t12-filo); box-shadow: 0 24px 46px -24px color-mix(in oklch, var(--t12-marca) 60%, color-mix(in srgb, var(--p-negro) 40%, transparent)); }
html[data-tema="12"] .ax-festejo span { color: var(--ax-ink-2); opacity: 1; }
html[data-tema="12"] .ax-festejo.is-grande {
  inset: 0; left: 0; bottom: auto; width: auto; max-width: none; height: 100%; transform: none; border: 0; border-radius: 0; box-shadow: none;
  display: grid; place-content: center; gap: 12px; padding: 32px; text-align: center; overflow: hidden;
  background: color-mix(in oklch, var(--ax-surface) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html[data-tema="12"] .ax-festejo.is-grande strong { font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.1; text-wrap: balance; }

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

  /* ENTRE PÁGINAS: la nueva sube flotando */
  @view-transition { navigation: auto; }
  html[data-tema="12"] :is(.ax-pub, .ax-top) { view-transition-name: ax-barra; }
  html[data-tema="12"] .ax-nav { view-transition-name: ax-menu; }
  html[data-tema="12"]::view-transition-old(root) { animation: t12-sale .3s ease-in both; }
  html[data-tema="12"]::view-transition-new(root) { animation: t12-sube .65s var(--t12-flota) both; }
  @keyframes t12-sale { to { opacity: 0; transform: translateY(-16px); } }
  @keyframes t12-sube { from { opacity: 0; transform: translateY(30px); } }
  html[data-tema="12"].ui-app #ax-contenido ~ :is(div, main, section) { animation: none; }

  /* ── PORTADA: el panel flota y detrás suben tres burbujas ── */
  html[data-tema="12"].ui-publico .hero-vidrio { position: relative; overflow: hidden; }
  html[data-tema="12"].ui-publico .hero-vidrio::before,
  html[data-tema="12"].ui-publico .hero-vidrio::after {
    content: ''; display: block; position: absolute; border-radius: 50%; pointer-events: none;
    background: color-mix(in oklch, var(--t12-marca) 20%, transparent);
  }
  html[data-tema="12"].ui-publico .hero-vidrio::before { width: 220px; height: 220px; left: 8%; bottom: -120px; animation: t12-burbuja 16s ease-in-out infinite; }
  html[data-tema="12"].ui-publico .hero-vidrio::after { width: 140px; height: 140px; right: 12%; bottom: -80px; animation: t12-burbuja 12s ease-in-out 2s infinite; }
  @keyframes t12-burbuja { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-120vh) scale(1.2); opacity: 0; } }
  html[data-tema="12"].ui-publico .hero-vidrio-panel { animation: t12-sube 1.1s var(--t12-flota) .1s backwards; }
  html.ax-mov[data-tema="12"] .hero-title:not(.ax-partido) { visibility: hidden; }
  html[data-tema="12"] .hero-title.ax-partido { animation: none; }
  html[data-tema="12"] .hero-title .ax-pal { display: inline-block; }
  html[data-tema="12"] .hero-title .ax-pal > span { display: inline-block; animation: t12-sube .9s var(--t12-flota) backwards; animation-delay: calc(.35s + var(--ax-i, 0) * 70ms); }
  html[data-tema="12"].ui-publico .hero-content > :nth-child(2) { animation: t12-sube .9s var(--t12-flota) .75s backwards; }
  html[data-tema="12"].ui-publico .hero-content > :nth-child(3) { animation: t12-sube .9s var(--t12-flota) .9s backwards; }
  /* Primera visita: una burbuja crece desde abajo y descubre la portada */
  html.ax-primera[data-tema="12"].ui-publico .hero-vidrio { animation: t12-descubre 1.3s var(--t12-flota) both; }
  @keyframes t12-descubre { from { clip-path: circle(0% at 50% 100%); } to { clip-path: circle(150% at 50% 100%); } }
  html.ax-primera[data-tema="12"].ui-publico .hero-vidrio-panel { animation-delay: .6s; }
  html.ax-primera[data-tema="12"] .hero-title .ax-pal > span { animation-delay: calc(.85s + var(--ax-i, 0) * 70ms); }

  /* ── HEADER ── */
  @media (min-width: 861px) {
    html[data-tema="12"] .ax-pub-nav > a { animation: t12-sube .8s var(--t12-flota) backwards; animation-delay: calc(.1s + var(--n, 0) * 70ms); }
    html[data-tema="12"] .ax-pub-nav > a:nth-child(2) { --n: 1; } html[data-tema="12"] .ax-pub-nav > a:nth-child(3) { --n: 2; }
    html[data-tema="12"] .ax-pub-nav > a:nth-child(4) { --n: 3; } html[data-tema="12"] .ax-pub-nav > a:nth-child(5) { --n: 4; }
    html[data-tema="12"] .ax-pub-nav > a:nth-child(6) { --n: 5; } html[data-tema="12"] .ax-pub-nav > a:nth-child(7) { --n: 6; }
    /* Al bajar: la barra se vuelve vidrio esmerilado */
    html[data-tema="12"] .ax-pub { transition: background-color .5s, -webkit-backdrop-filter .5s, backdrop-filter .5s, box-shadow .5s; }
    html.ax-bajo[data-tema="12"] .ax-pub {
      background-color: color-mix(in oklch, var(--color-header-bg) 70%, transparent);
      -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
      box-shadow: 0 16px 34px -26px color-mix(in srgb, var(--p-negro) 60%, transparent);
    }
  }

  /* ── TÍTULOS Y BLOQUES: todo sube flotando ── */
  html[data-tema="12"] :is(.ui-publico .section-title, .ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2), .ui-app .admin-container > h2, .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 .7s var(--t12-flota), transform .9s var(--t12-flota), box-shadow .4s;
    transition-delay: calc(var(--ax-i, 0) * 90ms);
  }
  html.ax-mov[data-tema="12"] :is(.ui-publico .section-title, .ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2), .ui-app .admin-container > h2, .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(26px);
  }
  html[data-tema="12"] :is(.courses-grid .course-card, .cx .cx-curso, body.login .admin-option, body.profesor .tool-btn, .ui-publico .feature-card):hover { transform: translateY(-6px); box-shadow: 0 26px 46px -28px color-mix(in oklch, var(--t12-marca) 70%, color-mix(in srgb, var(--p-negro) 40%, transparent)); }
  html[data-tema="12"] :is(.ui-publico .section-title, .ui-app .admin-container > h2)::after { transition: transform .6s var(--t12-flota) .2s; }
  html.ax-mov[data-tema="12"] :is(.ui-publico .section-title, .ui-app .admin-container > h2):not(.is-visto)::after { transform: scale(0); }

  /* ── FOOTER ── */
  html[data-tema="12"] .ax-pie-in > * { transition: opacity .7s var(--t12-flota), transform .9s var(--t12-flota); }
  html[data-tema="12"] .ax-pie-in > :nth-child(2) { transition-delay: .1s; }
  html[data-tema="12"] .ax-pie-in > :nth-child(3) { transition-delay: .2s; }
  html.ax-mov[data-tema="12"] .ax-pie:not(.is-visto) .ax-pie-in > * { opacity: 0; transform: translateY(20px); }

  /* ── CAMPUS: las perlas se llenan ── */
  html[data-tema="12"] .hm-parada { transition: opacity .6s var(--t12-flota), transform .8s var(--t12-flota); transition-delay: calc(.15s + var(--t, 0) * .5s); }
  html.ax-mov[data-tema="12"] .hm-curso:not(.is-visto) .hm-parada { opacity: 0; transform: translateY(20px); }
  html[data-tema="12"] .hm-punto::before { transition: --t12-p 1.4s var(--t12-flota); transition-delay: calc(.4s + var(--t, 0) * .5s); }
  html.ax-mov[data-tema="12"] .hm-curso:not(.is-visto) .hm-punto::before { --t12-p: 0; }
  html[data-tema="12"] .hm-curso.is-visto .is-actual .hm-punto { animation: t12-flotar 3.5s ease-in-out calc(1.8s + var(--t, 0) * .5s) 2; }
  @keyframes t12-flotar { 50% { transform: translateY(-6px); } }
  /* Índice */
  html[data-tema="12"] body.campus .ax-marcador { transition: transform .6s var(--t12-flota), width .6s var(--t12-flota), height .6s var(--t12-flota), opacity .3s; }
  html[data-tema="12"] body.campus .menu-items.open > .menu-item { animation: t12-sube .6s var(--t12-flota) backwards; }
  html[data-tema="12"] body.campus .menu-items.open > .menu-item:nth-child(2) { animation-delay: 60ms; }
  html[data-tema="12"] body.campus .menu-items.open > .menu-item:nth-child(n+3) { animation-delay: 120ms; }
  html[data-tema="12"] body.campus .visto-check.is-nuevo { display: inline-block; animation: t12-brota .7s var(--t12-flota); }
  @keyframes t12-brota { from { transform: scale(0); opacity: 0; } }
  html[data-tema="12"] body.campus .mc-cuenta.is-sube { display: inline-block; animation: t12-sube .6s var(--t12-flota); }
  /* Cargando: tres burbujas que suben */
  html[data-tema="12"] body.campus #content-inner .loading .spinner {
    position: relative; width: 12px; height: 12px; margin: 0 auto 16px; border: 0; border-radius: 50%;
    background: color-mix(in oklch, var(--t12-marca) 70%, transparent); animation: t12-sube-burbuja 1.4s ease-in-out infinite;
  }
  html[data-tema="12"] body.campus #content-inner .loading .spinner::before,
  html[data-tema="12"] body.campus #content-inner .loading .spinner::after {
    content: ''; position: absolute; top: 0; width: 12px; height: 12px; border-radius: 50%;
    background: color-mix(in oklch, var(--t12-marca) 70%, transparent); animation: t12-sube-burbuja 1.4s ease-in-out infinite;
  }
  html[data-tema="12"] body.campus #content-inner .loading .spinner::before { left: -20px; animation-delay: -.25s; }
  html[data-tema="12"] body.campus #content-inner .loading .spinner::after { left: 20px; animation-delay: .25s; }
  @keyframes t12-sube-burbuja { 0%, 100% { transform: translateY(6px); opacity: .5; } 50% { transform: translateY(-8px); opacity: 1; } }
  /* Contenido nuevo y festejos */
  html[data-tema="12"] body.campus #content-inner.ax-cambio > * { animation: t12-sube .7s var(--t12-flota); }
  html[data-tema="12"] .ax-festejo { animation: t12-festejo .8s var(--t12-flota); }
  @keyframes t12-festejo { from { opacity: 0; transform: translateX(-50%) translateY(34px) scale(.9); } }
  html[data-tema="12"] .ax-festejo.is-grande { animation: t12-descubre 1s var(--t12-flota) both; }
  html[data-tema="12"] .ax-festejo.is-grande > * { animation: t12-sube .8s var(--t12-flota) .35s backwards; }
  html[data-tema="12"] .ax-festejo.is-grande > span { animation-delay: .5s; }
  html[data-tema="12"] .ax-festejo.is-sale { opacity: 1; animation: t12-sale-burbuja .6s ease-in forwards; }
  @keyframes t12-sale-burbuja { to { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(1.05); } }
}

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

/* ============================================================
   PORTADA PROPIA (temas/tema12/hero.php)
   El panel de vidrio sobre burbujas. Razón: el tema promete calma y
   claridad; la portada tiene que sentirse liviana y amable ya de entrada.
   ============================================================ */
html[data-tema="12"].ui-publico .t12-hero {
  position: relative; overflow: hidden; border-bottom: 0;
  padding-block: clamp(80px, 11vw, 150px);
  background:
    radial-gradient(760px 520px at 12% 10%, color-mix(in oklch, var(--t12-marca) 26%, transparent), transparent 70%),
    radial-gradient(680px 520px at 88% 30%, color-mix(in oklch, var(--t12-marca) 18%, transparent), transparent 70%),
    var(--t12-tinte);
}
html[data-tema="12"].ui-publico .t12-panel {
  position: relative; z-index: 2; max-width: min(900px, 100%); margin: 0 auto;
  padding: clamp(28px, 4vw, 52px); border-radius: 40px;
  background: color-mix(in oklch, var(--ax-surface) 62%, transparent);
  border: 1px solid var(--t12-filo); box-shadow: inset 0 1px 0 var(--t12-filo), 0 40px 80px -50px color-mix(in srgb, var(--p-sombra) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
}
html[data-tema="12"].ui-publico .t12-hero .hero-content { max-width: none; padding: 0; text-align: center; }
html[data-tema="12"].ui-publico .t12-hero .hero-content > * { margin-inline: auto; }
html[data-tema="12"].ui-publico .t12-hero .cta-buttons { justify-content: center; }
html[data-tema="12"].ui-publico .t12-hero .hero-title { color: var(--ax-ink); -webkit-text-fill-color: var(--ax-ink); font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.05; }
html[data-tema="12"].ui-publico .t12-hero .hero-subtitle { color: var(--ax-ink-2); }
html[data-tema="12"].ui-publico .t12-hero .cta-buttons .btn-secondary { background: var(--ax-surface); color: var(--ax-ink); border-color: var(--t12-filo); }
html[data-tema="12"].ui-publico .t12-burbujas { position: absolute; inset: 0; pointer-events: none; }
html[data-tema="12"].ui-publico .t12-burbujas i {
  position: absolute; bottom: -180px; border-radius: 50%;
  background: color-mix(in oklch, var(--t12-marca) 20%, transparent);
  border: 1px solid color-mix(in oklch, var(--t12-marca) 26%, transparent);
}
html[data-tema="12"].ui-publico .t12-burbujas i:nth-child(1) { left: 6%;  width: 190px; height: 190px; }
html[data-tema="12"].ui-publico .t12-burbujas i:nth-child(2) { left: 26%; width: 90px;  height: 90px; }
html[data-tema="12"].ui-publico .t12-burbujas i:nth-child(3) { left: 52%; width: 140px; height: 140px; }
html[data-tema="12"].ui-publico .t12-burbujas i:nth-child(4) { left: 74%; width: 70px;  height: 70px; }
html[data-tema="12"].ui-publico .t12-burbujas i:nth-child(5) { left: 88%; width: 160px; height: 160px; }
@media (prefers-reduced-motion: no-preference) {
  /* Las burbujas suben despacio: es el único movimiento continuo del tema */
  html[data-tema="12"].ui-publico .t12-burbujas i { animation: t12-flota-arriba 22s linear infinite; }
  html[data-tema="12"].ui-publico .t12-burbujas i:nth-child(2) { animation-duration: 17s; animation-delay: -4s; }
  html[data-tema="12"].ui-publico .t12-burbujas i:nth-child(3) { animation-duration: 26s; animation-delay: -9s; }
  html[data-tema="12"].ui-publico .t12-burbujas i:nth-child(4) { animation-duration: 15s; animation-delay: -12s; }
  html[data-tema="12"].ui-publico .t12-burbujas i:nth-child(5) { animation-duration: 30s; animation-delay: -6s; }
  @keyframes t12-flota-arriba { 0% { transform: translateY(0) scale(.9); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(-115vh) scale(1.15); opacity: 0; } }
  html[data-tema="12"].ui-publico .t12-panel { animation: t12-sube 1.1s var(--t12-flota) .1s backwards; }
  html.ax-primera[data-tema="12"].ui-publico .t12-hero { animation: t12-descubre 1.3s var(--t12-flota) both; }
  html.ax-primera[data-tema="12"].ui-publico .t12-panel { animation-delay: .6s; }
  /* Al bajar, el panel se hunde despacio */
  html[data-tema="12"].ui-publico .t12-panel { translate: 0 calc(var(--ax-hero, 0) * 60px); opacity: calc(1 - var(--ax-hero, 0) * .8); }
}