/* Uvamejai · encanto. La capa de estética aprobada el 1 oct 2026: cuento de hadas con un
   toque psicodélico, sutil. Grano de papel, un brillo iridiscente que gira muy lento, láminas de
   línea y las opciones en órbita (en vez de cuadrículas). Se carga después de comun.css. */

@property --giro { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
:root{
  --iris: conic-gradient(from var(--giro), #e3b24c, #e08aa8, #9b6fd6, #3fb6c4, #8fd18a, #e3b24c);
  --emblema-fondo: var(--noche);
}
@keyframes girar { to { --giro: 360deg; } }

/* grano de papel muy suave sobre todo */
body.encanto::before{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.07;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .75  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* emblemas: una sola tinta, los cortes con el color de fondo */
.emblema{display:block;width:100%;height:auto;color:var(--oro-claro)}
.emblema .em-corte{fill:var(--emblema-fondo)}

/* borde iridiscente que gira lento (para lo que debe brillar) */
.iris{position:relative;isolation:isolate}
.iris::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:2;
  background:var(--iris);animation:girar 14s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;transition:opacity .4s;
}
.iris:hover::after,.iris:focus-visible::after,.iris[aria-pressed="true"]::after{opacity:1}

/* láminas de línea */
.lamina{display:block;width:100%;height:auto;overflow:visible}
.lamina .orn-estrella{transform-box:fill-box;transform-origin:center;animation:titila 5s ease-in-out infinite}
.lamina .orn-estrella:nth-of-type(2n){animation-delay:-2.2s;animation-duration:6.5s}
.lamina .orn-estrella:nth-of-type(3n){animation-delay:-3.6s;animation-duration:7.5s}
.lamina .orn-ojo{animation:tornasol 16s ease-in-out infinite}
.lamina .orn-ojo-2{animation-delay:-5s}
.lamina .orn-luna{transform-box:fill-box;transform-origin:center;animation:mece 9s ease-in-out infinite}
.lamina .orn-hilo{animation:hilo 3s linear infinite}
@keyframes titila{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes tornasol{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(38deg) saturate(1.2)}}
@keyframes mece{50%{transform:translateY(-4px) rotate(4deg)}}
@keyframes hilo{to{stroke-dashoffset:-16}}

.divisor{display:flex;justify-content:center;color:rgba(227,178,76,.55);margin:clamp(40px,7vh,70px) auto}
.divisor svg{width:min(240px,70vw);height:24px}

/* cabeza de las guías: texto + lámina */
.guia-cabeza.con-lamina{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(20px,5vw,80px);align-items:center}
.guia-cabeza .cabeza-lamina{max-width:300px;justify-self:end;opacity:.95}
@media (max-width:820px){.guia-cabeza.con-lamina{grid-template-columns:1fr}.guia-cabeza .cabeza-lamina{display:none}}

/* ---------------- opciones en órbita (preguntas de las guías) ---------------- */
.orbita{--tam:min(92vw,660px);--radio:calc(var(--tam) * .39);--orbe:148px;position:relative;width:var(--tam);height:var(--tam);margin:10px auto 0}
.orbita::before{content:"";position:absolute;inset:11%;border-radius:50%;border:1px dashed rgba(227,178,76,.28);animation:girar 60s linear infinite}
.orbita-centro{position:absolute;left:50%;top:50%;width:calc(var(--tam) * .34);transform:translate(-50%,-50%);text-align:center;--emblema-fondo:var(--noche)}
.orbita-centro .emblema{width:100%;filter:drop-shadow(0 0 22px rgba(227,178,76,.25))}
.orbe{
  position:absolute;left:50%;top:50%;width:var(--orbe);height:var(--orbe);margin:calc(var(--orbe) / -2) 0 0 calc(var(--orbe) / -2);
  transform:rotate(var(--a)) translate(var(--radio)) rotate(calc(-1 * var(--a)));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px;text-align:center;cursor:pointer;
  color:var(--crema);background:radial-gradient(circle at 35% 30%,rgba(181,143,208,.22),rgba(31,18,41,.92) 70%);border:0;
  border-radius:58% 42% 52% 48% / 46% 56% 44% 54%;box-shadow:0 18px 40px -22px rgba(0,0,0,.9),inset 0 0 0 1px rgba(242,235,242,.1);
  transition:background .35s,box-shadow .35s,scale .35s var(--curva);
}
.orbe>span{display:flex;flex-direction:column;align-items:center;gap:4px;animation:flotar 7s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
.orbe b{font-family:var(--display);font-weight:500;font-size:1.02rem;line-height:1.15}
.orbe small{font-size:12px;line-height:1.3;color:var(--crema-suave)}
.orbe:hover,.orbe:focus-visible{scale:1.07;background:radial-gradient(circle at 35% 30%,rgba(227,178,76,.28),rgba(42,25,54,.95) 72%);box-shadow:0 0 34px -6px rgba(227,178,76,.45)}
.orbe:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.orbe[aria-pressed="true"]{background:radial-gradient(circle at 35% 30%,rgba(227,178,76,.45),rgba(42,25,54,.95) 75%)}
.orbe .orbe-glifo{width:40px;height:40px;margin-bottom:2px}
.orbe-color{width:16px;height:16px;border-radius:50%;margin-bottom:4px;box-shadow:0 0 14px currentColor}
@keyframes flotar{50%{transform:translateY(-6px)}}
/* pocas opciones: más grandes y más lejos del centro */
.orbita.pocas{--orbe:168px;--radio:calc(var(--tam) * .36)}
.orbita.muchas{--orbe:132px;--radio:calc(var(--tam) * .41)}
.orbita.muchas .orbe b{font-size:.95rem}

/* en el celular la órbita se vuelve un sendero que serpentea */
@media (max-width:700px){
  .orbita{width:auto;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 12px;padding-top:6px}
  .orbita::before{display:none}
  .orbita-centro{position:static;transform:none;width:120px;flex-basis:100%;display:flex;justify-content:center}
  .orbita-centro .emblema{width:110px}
  .orbe,.orbita.pocas .orbe,.orbita.muchas .orbe{position:relative;left:auto;top:auto;margin:0;transform:none;width:calc(50% - 8px);height:auto;min-height:104px;padding:16px 12px}
  .orbe:nth-of-type(4n+2),.orbe:nth-of-type(4n+3){translate:0 14px}
  .orbita .orbe b{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .orbe>span,.orbita::before,.lamina *,.iris::after{animation:none!important}
}

/* ---- versión de línea (1 oct 2026): trazos finos, sin rellenos pesados ---- */
.emblema{stroke-width:2.6}
.emblema .em-corte{fill:none}
.orbita-centro .emblema{filter:none;color:var(--oro)}
.puerta-emblema .emblema,.portal-emblema .emblema,.cabeza-emblema .emblema{filter:none}
.idea-emblema .emblema,.medida-emblema .emblema,.invita-emblema .emblema,.idea-final-emblema .emblema{color:var(--oro-claro)}
/* los hongos dibujados: línea de tinta con el color apenas tintado */
.dibujo-hongo path:not([fill="none"]),.dibujo-hongo ellipse,.dibujo-hongo polygon,.dibujo-hongo circle:not([fill="none"]){
  stroke:#f2e6c9;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;fill-opacity:.3}
.dibujo-hongo circle:first-of-type{stroke:rgba(227,178,76,.35);stroke-width:1.5;fill:none}