/* Capa de diversión: globitos, confeti, 3D, apariciones, monedas, cinta y cortina. Se apaga con «reducir movimiento». */
.globo { position: fixed; z-index: 60; background: var(--crema); color: var(--tinta); font: 700 17px var(--f-cuerpo); padding: 10px 16px; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 3px var(--ox); pointer-events: none; animation: globo .38s cubic-bezier(.34,1.56,.64,1) both; white-space: nowrap; }
.globo::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; background: var(--crema); transform: translateX(-50%) rotate(45deg); box-shadow: 3px 3px 0 0 var(--ox); }
.globo.fuera { animation: globoFuera .35s ease-in forwards; }
@keyframes globo { from { opacity: 0; transform: translateY(12px) scale(.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes globoFuera { to { opacity: 0; transform: translateY(-14px) scale(.9); } }
.confeti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 59; }

/* botón flotante: el WhatsApp de Doña Mary (28-oct; antes era la carita que explicaba en audio). Guinda y crema, en relieve,
   con su carita, el sello verde de WhatsApp, un «timbrazo» cada pocos segundos y un globito que se asoma. */
.wa-flota { position: fixed; left: 14px; bottom: 16px; z-index: 41; display: flex; align-items: center; gap: 10px; padding: 6px 20px 6px 6px; border-radius: 99px;
  text-decoration: none; color: var(--crema); background: linear-gradient(180deg, #8f2c34 0%, var(--ox) 55%, #561419 100%); border: 2px solid rgba(243,233,210,.9);
  box-shadow: 0 6px 0 #3d0d11, 0 16px 28px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.22); transition: translate .12s, box-shadow .12s; overflow: visible; }
.wa-flota::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 130% 0; animation: brilloWa 4.5s ease-in-out infinite; }
@keyframes brilloWa { 0%, 60% { background-position: 130% 0; } 85%, 100% { background-position: -40% 0; } }
.wa-flota { transition: translate .12s, box-shadow .12s, opacity .3s, visibility .3s; }
.wa-flota.oculto { opacity: 0; visibility: hidden; pointer-events: none; }
.wa-flota:hover { translate: 0 -2px; box-shadow: 0 8px 0 #3d0d11, 0 20px 32px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,255,255,.22); }
.wa-flota:active { translate: 0 5px; box-shadow: 0 1px 0 #3d0d11, 0 6px 12px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.22); }
.wa-flota .carita { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--mostaza); box-shadow: 0 0 0 3px var(--crema); animation: timbre 5s ease-in-out infinite; }
.wa-flota .carita img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wa-sello { position: absolute; right: -6px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #25D366;
  box-shadow: 0 0 0 2.5px var(--crema), 0 3px 6px rgba(0,0,0,.3); }
.wa-sello svg { width: 18px; height: 18px; }
.wa-sello::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #25D366; animation: pulsoWa 2.2s ease-out infinite; }
@keyframes pulsoWa { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
@keyframes timbre { 0%, 84%, 100% { rotate: 0deg; } 86% { rotate: -12deg; } 88% { rotate: 10deg; } 90% { rotate: -9deg; } 92% { rotate: 7deg; } 94% { rotate: -4deg; } 96% { rotate: 0deg; } }
.wa-texto { display: grid; font: 800 17px/1.1 var(--f-tit); font-stretch: 112%; white-space: nowrap; }
.wa-texto small { font: 700 10.5px var(--f-cuerpo); letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-bottom: 3px; }
.wa-flota .nube { position: absolute; left: 4px; bottom: calc(100% + 14px); background: var(--crema); color: var(--tinta); font-weight: 700; font-size: 14px; white-space: nowrap;
  padding: 8px 13px; border-radius: 14px 14px 14px 4px; box-shadow: 0 0 0 2px var(--ox), 0 8px 18px rgba(0,0,0,.25); opacity: 0; translate: 0 8px; animation: asomaNube 9s ease-in-out 2s infinite; pointer-events: none; }
@keyframes asomaNube { 0%, 55%, 100% { opacity: 0; translate: 0 8px; } 62%, 90% { opacity: 1; translate: 0 0; } }
.wa-flota.hablando .carita { animation: hablar .35s ease-in-out infinite alternate; }
.wa-flota.hablando .nube { display: none; }
@keyframes hablar { from { transform: scale(1); } to { transform: scale(1.07) rotate(-3deg); } }
.wa-flota .ondas { position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--mostaza); opacity: 0; pointer-events: none; }
.wa-flota.hablando .ondas { animation: ondas 1.1s ease-out infinite; }
@keyframes ondas { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.35); } }
@media (max-width: 760px) {   /* celular: más compacto, abajo a la izquierda */
  .wa-flota { left: 10px; bottom: 12px; gap: 8px; padding: 5px 15px 5px 5px; }
  .wa-flota .carita { width: 48px; height: 48px; }
  .wa-sello { width: 24px; height: 24px; } .wa-sello svg { width: 15px; height: 15px; }
  .wa-texto { font-size: 15px; } .wa-texto small { font-size: 9.5px; }
  .wa-flota .nube { font-size: 13px; }
  .portada { padding-bottom: 92px; }        /* el subtítulo de la entrada queda arriba del botón */
}

.boton-sonido { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--suave); background: var(--suave); font-size: 18px; cursor: pointer; }

/* tarjetas que se inclinan con brillo que sigue al puntero */
.tilt { transition: transform .18s ease-out; transform-style: preserve-3d; will-change: transform; position: relative; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.28), transparent 55%); }
.tilt:hover::after { opacity: 1; }
.btn { transition: transform .18s ease-out, filter .18s, box-shadow .18s; }
.btn.primario:hover { filter: saturate(1.15) brightness(1.06); box-shadow: 0 10px 26px color-mix(in srgb, var(--acento) 45%, transparent); }
.btn:active { transform: scale(.96) !important; }

/* apariciones: suben, se enfocan y giran un poco en 3D */
.revela { opacity: 0; transform: perspective(800px) translateY(34px) rotateX(18deg); filter: blur(6px); transition: opacity .7s var(--d,0ms), transform .8s cubic-bezier(.16,1,.3,1) var(--d,0ms), filter .7s var(--d,0ms); }
.revela.visto { opacity: 1; transform: none; filter: none; }
.pal { display: inline-block; }
.revela .pal { opacity: 0; transform: perspective(600px) rotateX(-90deg) translateY(20px); transform-origin: 50% 100%; transition: opacity .5s, transform .7s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--d,0ms) + var(--i) * 55ms); }
.revela.visto .pal { opacity: 1; transform: none; }
/* subrayado de marcador en las palabras con acento */
.frase em, .literal b { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--mostaza) 55%, transparent) 62%) no-repeat 0 0 / 0% 100%; transition: background-size .9s .4s cubic-bezier(.16,1,.3,1); }
.visto .frase em, .frase.visto em, .literal.visto b { background-size: 100% 100%; }
body[data-pestana="/instalacion"] .frase em { color: var(--mostaza); background-image: linear-gradient(transparent 80%, rgba(232,169,58,.35) 80%); }
.problema p { transition: transform .25s, background .25s; } .problema p:hover { transform: translateX(10px); background: rgba(232,169,58,.08); }
.voz .rejilla p { transition: transform .25s; } .voz .rejilla p:hover { transform: rotate(-1.5deg) scale(1.03); }

/* monedas 3D con el sello de Doña Mary */
.con-monedas { position: relative; overflow: hidden; }
.con-monedas > * { position: relative; z-index: 1; }
.moneda { position: absolute !important; z-index: 0 !important; left: var(--x); top: var(--y); width: var(--s); height: var(--s); transform-style: preserve-3d;
  animation: girar var(--v) linear infinite, flotar calc(var(--v) * .7) ease-in-out infinite alternate; pointer-events: none; opacity: .9; }
.moneda i { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; }
.moneda .cara { background: var(--mostaza) url("/media/favicon.svg") center / 74% no-repeat; box-shadow: inset 0 0 0 3px rgba(42,31,24,.25); transform: translateZ(3px); }
.moneda .cara.atras { transform: rotateY(180deg) translateZ(3px); }
.moneda .canto { background: #b9822a; transform: rotateY(90deg) scaleX(.12); border-radius: 30%; }
@keyframes girar { from { transform: rotateY(var(--r)) rotateX(12deg); } to { transform: rotateY(calc(var(--r) + 360deg)) rotateX(12deg); } }
@keyframes flotar { from { margin-top: -10px; } to { margin-top: 14px; } }

/* cinta que corre */
.marquesina { overflow: hidden; background: var(--ox); color: var(--crema); display: flex; white-space: nowrap; padding: 14px 0; font: 800 18px var(--f-tit); font-stretch: 125%; letter-spacing: .06em; }
body[data-pestana="/instalacion"] .marquesina { background: var(--mostaza); color: var(--tinta); }
.marquesina div { flex: none; padding-right: 0; animation: correr 28s linear infinite; }
@keyframes correr { to { transform: translateX(-100%); } }

/* cortina de color al pasar de cuarto (la puerta que se abre) */
.cortina { position: fixed; inset: 0; z-index: 55; pointer-events: none; background: var(--acento); transform-origin: left; animation: cortina .6s cubic-bezier(.77,0,.18,1) both; }
@keyframes cortina { 0% { transform: scaleX(0); transform-origin: left; } 45% { transform: scaleX(1); transform-origin: left; } 55% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

@media (prefers-reduced-motion: reduce) {
  .revela, .revela .pal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .moneda, .marquesina div { animation: none !important; }
  .wa-flota::after, .wa-flota .carita, .wa-sello::after, .btn.cta::after, .btn.cta { animation: none !important; }
  .wa-flota .nube { display: none; }
}

@media (max-width: 760px) { .moneda { display: none; } .con-monedas { overflow: visible; } }   /* en celular sin monedas (tapaban títulos) y sin recorte: deja fijo el carrusel de sillitas */