/* 4B-halo (rediseño 23-oct-2026): render 3D + cara, llamas y luz en SVG. Todo el movimiento se apaga con prefers-reduced-motion y con .h-quieto. */
.halo { display: block; width: 100%; height: auto; overflow: visible; --ha: #4f7bff; }
.halo * { transform-box: fill-box; transform-origin: center; }
.halo .h-img { opacity: 0; transition: opacity .28s ease; }
.halo .h-img.h-on { opacity: 1; }

/* caras: cada estado enseña unas piezas */
.halo .v-p, .halo .v-s, .halo .v-f, .halo .v-d, .halo .h-sonrisa, .halo .h-oh, .halo .h-puntos, .halo .h-ondas, .halo .h-zetas, .halo .h-piensa-anillo { display: none; }
.halo[data-e="saluda"] .v-n, .halo[data-e="contento"] .v-n, .halo[data-e="piensa"] .v-n, .halo[data-e="sorprendido"] .v-n, .halo[data-e="duerme"] .v-n { display: none; }
.halo[data-e="saluda"] .v-f, .halo[data-e="contento"] .v-f { display: inline; }
.halo[data-e="saluda"] .h-sonrisa, .halo[data-e="contento"] .h-sonrisa { display: inline; }
.halo[data-e="piensa"] .v-p { display: inline; }
.halo[data-e="piensa"] .h-puntos, .halo[data-e="piensa"] .h-piensa-anillo { display: inline; }
.halo[data-e="sorprendido"] .v-s, .halo[data-e="sorprendido"] .h-oh { display: inline; }
.halo[data-e="duerme"] .v-d, .halo[data-e="duerme"] .h-zetas { display: inline; }
.halo[data-e="escucha"] .h-ondas { display: inline; }
.halo[data-e="saluda"] .h-bocag, .halo[data-e="contento"] .h-bocag, .halo[data-e="piensa"] .h-bocag, .halo[data-e="sorprendido"] .h-bocag, .halo[data-e="duerme"] .h-bocag { display: none; }
.halo[data-e="escucha"] .v-n { transform: scale(1.1, 1.14); }
.halo[data-e="duerme"] .h-visor-luz { opacity: .05; }
.halo[data-e="duerme"] .h-llamas { opacity: .25; }
.halo[data-e="duerme"] .h-suelo { opacity: .35; }
.halo .h-suelo { transition: opacity .4s ease; }
.halo[data-e="duerme"] .h-ambiente { opacity: .45; }
.halo[data-e="escucha"] .h-cuerpo { transform: rotate(2.2deg); }
.halo[data-e="piensa"] .h-cuerpo { transform: rotate(-1.6deg); }
.halo .h-cuerpo { transform-origin: 50% 85%; transform-box: view-box; transition: transform .4s ease; }
.halo .h-par { transition: transform .12s ease; }
.halo.h-parpadea .h-par { transform: scaleY(.1); }
.halo[data-sector="base"] .h-insignia, .halo[data-sector="base"] .h-insignia-g { display: none; }
.halo:not([data-sector="custom"]) .h-insignia, .halo:not([data-sector="custom"]) .h-insignia-g { display: none; }
.halo[data-tinte="1"] .h-ambiente { filter: hue-rotate(0deg); }

/* movimiento continuo */
@keyframes h-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes h-sombra { 0%, 100% { transform: scaleX(1); opacity: .55; } 50% { transform: scaleX(.88); opacity: .4; } }
@keyframes h-llama { 0%, 100% { transform: scaleY(.86) scaleX(1); } 35% { transform: scaleY(1.12) scaleX(.92); } 70% { transform: scaleY(.95) scaleX(1.05); } }
@keyframes h-chispa { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(46px); opacity: 0; } }
@keyframes h-suelo { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes h-amb { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes h-punto { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-8px); opacity: 1; } }
@keyframes h-onda { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes h-zeta { 0% { transform: translate(0, 8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(14px, -22px); opacity: 0; } }
@keyframes h-orbita { to { transform: rotate(360deg); } }
@keyframes h-salta { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-34px); } 55% { transform: translateY(0); } 70% { transform: translateY(-10px); } }
@keyframes h-bota { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }
.halo:not(.h-quieto) .h-flota { animation: h-flota 3.8s ease-in-out infinite; }
.halo:not(.h-quieto) .h-sombra { animation: h-sombra 3.8s ease-in-out infinite; transform-origin: center; }
.halo:not(.h-quieto) .h-llama { animation: h-llama .34s ease-in-out infinite; transform-origin: 50% 0; }
.halo:not(.h-quieto) .h-tobera:nth-child(2) .h-llama { animation-delay: .11s; }
.halo:not(.h-quieto) .h-chispa { animation: h-chispa 1.3s ease-in infinite; }
.halo:not(.h-quieto) .h-chispa.c1 { animation-delay: .45s; animation-duration: 1.6s; }
.halo:not(.h-quieto) .h-chispa.c2 { animation-delay: .9s; animation-duration: 1.1s; }
.halo:not(.h-quieto) .h-suelo { animation: h-suelo 2.2s ease-in-out infinite; }
.halo:not(.h-quieto) .h-ambiente { animation: h-amb 4.4s ease-in-out infinite; }
.halo:not(.h-quieto)[data-e="piensa"] .h-puntos circle { animation: h-punto 1.05s ease-in-out infinite; }
.halo:not(.h-quieto)[data-e="piensa"] .h-puntos circle:nth-child(2) { animation-delay: .17s; }
.halo:not(.h-quieto)[data-e="piensa"] .h-puntos circle:nth-child(3) { animation-delay: .34s; }
.halo:not(.h-quieto)[data-e="piensa"] .h-piensa-anillo { animation: h-orbita 2.6s linear infinite; transform-origin: 0 0; transform-box: view-box; }
.halo:not(.h-quieto)[data-e="escucha"] .h-ondas path { animation: h-onda 1.2s ease-in-out infinite; }
.halo:not(.h-quieto)[data-e="escucha"] .h-ondas .o2 { animation-delay: .2s; }
.halo:not(.h-quieto)[data-e="escucha"] .h-ondas .o3 { animation-delay: .4s; }
.halo:not(.h-quieto)[data-e="duerme"] .h-zetas text { animation: h-zeta 3s ease-in infinite; }
.halo:not(.h-quieto)[data-e="duerme"] .h-zetas .z1 { animation-delay: 1s; }
.halo:not(.h-quieto)[data-e="duerme"] .h-zetas .z2 { animation-delay: 2s; }
.halo:not(.h-quieto)[data-e="duerme"] .h-flota { animation-duration: 6.5s; }
.halo:not(.h-quieto)[data-e="sorprendido"] .h-cuerpo { animation: h-salta .6s ease-out 1; }
.halo:not(.h-quieto)[data-e="contento"] .h-cuerpo, .halo:not(.h-quieto)[data-e="saluda"] .h-cuerpo { animation: h-bota 1.5s ease-in-out infinite; }
.halo.h-quieto *, .halo.h-quieto { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .halo * { animation: none !important; transition: none !important; }
}

/* Ventana de 4B-halo en las páginas de la marca (halo-sitio.js): grafito con luz cobalto arriba, canto de luz, sombra larga */
.halo-ventana { position: relative; overflow: hidden; aspect-ratio: 5 / 6; width: clamp(150px, 22vw, 240px); border-radius: 28px;
  background: radial-gradient(120% 90% at 72% 0%, rgba(79, 123, 255, .38), rgba(79, 123, 255, 0) 60%), radial-gradient(90% 70% at 50% 100%, #1b2140, #0d0e15 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(160, 185, 255, .18), 0 24px 50px -22px rgba(8, 12, 40, .7); }
.halo-ventana .halo { position: absolute; left: 50%; top: 50%; width: 104%; transform: translate(-50%, -46%); }
.halo-ventana[data-halo-pose="senala"] .halo { width: 112%; transform: translate(-52%, -46%); }
/* dónde va en cada página */
.m-plat-halo { display: flex; align-items: center; gap: 18px; margin: 1.6rem 0 0; }
.m-plat-halo figcaption { font-size: 1rem; color: var(--m-suave, #b8b2a7); max-width: 18ch; }
.m-cierre.con-halo { justify-content: flex-start; }
.m-cierre.con-halo > .m-boton { margin-left: auto; }
.m-cierre-halo { width: clamp(120px, 14vw, 180px); flex: none; }
@media (max-width: 640px) {
  .m-plat-halo .halo-ventana { width: 132px; }
  .m-cierre-halo { width: 128px; }
  .m-cierre.con-halo > .m-boton { margin-left: 0; }
}
/* /demo: el muñeco grande va en su ventana de grafito (sobre papel crema la luz cobalto sola parecía una mancha) */
.d-muneco { border-radius: 28px; overflow: hidden; border: 2px solid var(--d-borde, #1b1a18); box-shadow: 6px 6px 0 var(--d-borde, #1b1a18);
  background: radial-gradient(120% 90% at 72% 0%, rgba(79, 123, 255, .38), rgba(79, 123, 255, 0) 60%), radial-gradient(90% 70% at 50% 100%, #1b2140, #0d0e15 72%); }
.d-muneco > .halo { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -47%); }
.d-chip-av .h-ambiente, .d-chip-av .h-sombra { display: none; }