/* web/css/efectos.css — Movimiento y microinteracciones de toda la web pública (se carga después de web.css).
   Solo se animan transform y opacity (más box-shadow en el pulso del botón). Con «reducir movimiento» no se anima nada
   (la regla de web.css con !important lo apaga todo; aquí se repite lo imprescindible). */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Botones que invitan a pulsarlos ───────────────────────────────────────── */
.btn, .tienda { position: relative; overflow: hidden; isolation: isolate; transition: transform .18s cubic-bezier(.2, .9, .3, 1.3), box-shadow .2s, filter .2s, background-color .2s; }
.btn::before, .tienda::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); background-size: 260% 100%; background-position: 160% 0; pointer-events: none; }
.btn:hover::before, .tienda:hover::before { animation: destello .8s ease; }
.btn:hover { transform: translateY(-3px); }
.btn:active, .tienda:active { transform: translateY(0) scale(.95); transition-duration: .08s; }
.btn--sec:hover::before { background: linear-gradient(115deg, transparent 35%, rgba(127, 166, 255, .25) 50%, transparent 65%); background-size: 260% 100%; }
.btn .ico, .tienda .ico { transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.btn:hover .ico { transform: scale(1.12) rotate(-6deg); }
.flecha-mueve { display: inline-flex; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.btn:hover .flecha-mueve { transform: translateX(6px); }
.btn--pulso { --anillo: rgba(255, 209, 92, .6); animation: anillo 3.2s ease-out 1.5s infinite; }
.btn--pulso:hover, .btn--pulso:focus-visible { animation-play-state: paused; }
.btn--pulso::before { animation: destello 1.1s ease 2.2s infinite; animation-timing-function: ease; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); animation: onda-toque .6s ease-out forwards; pointer-events: none; z-index: -1; }
.btn--sec .ripple { background: rgba(127, 166, 255, .35); }

@keyframes destello { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes anillo { 0% { box-shadow: 0 0 0 0 var(--anillo); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 209, 92, 0); } }
@keyframes onda-toque { to { transform: scale(4); opacity: 0; } }

/* ── Tarjetas: luz que sigue al puntero (el giro 3D lo pone el JS en línea) ──── */
.tarjeta { position: relative; isolation: isolate; }
.tarjeta:not(.tarjeta--plana)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 0%), rgba(255, 209, 92, .16), transparent 70%); opacity: 0; transition: opacity .25s; pointer-events: none; z-index: -1; }
.tarjeta:not(.tarjeta--plana):hover::before { opacity: 1; }
.tarjeta .icono { transition: transform .35s cubic-bezier(.2, .9, .3, 1.5); }
.tarjeta:hover .icono { transform: translateY(-4px) rotate(-8deg) scale(1.08); }

/* ── Aparición escalonada (se complementa con .reveal de web.css) ───────────── */
.rejilla > .reveal, .pasos > .reveal, .faq > .reveal { transition-delay: calc(var(--n, 0) * 90ms); }

/* ── Logo de la cabecera: grande arriba y más compacto al bajar ─────────────── */
.logo img { transition: width .3s ease, transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.logo:hover img { transform: scale(1.05) rotate(-1.5deg); }
.cabecera { transition: box-shadow .3s; }
.cabecera.compacta { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55); }
.cabecera.compacta .logo img { width: 108px; }

/* ── Tema claro/oscuro con transición ──────────────────────────────────────── */
html.cambiando-tema *, html.cambiando-tema *::before, html.cambiando-tema *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease !important; }
#tema .ico { transition: transform .5s cubic-bezier(.2, .9, .3, 1.3); }
#tema.gira .ico { transform: rotate(360deg) scale(1.15); }

/* ── Cuenta: «Mi cuenta» pasa a «Mi panel» si hay sesión ───────────────────── */
.menu__app span { display: inline-block; }
.menu__app.con-sesion { animation: aparece-pop .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes aparece-pop { from { transform: scale(.85); } to { transform: none; } }

/* ── WhatsApp: aparece al bajar, con un latido discreto ─────────────────────── */
.whatsapp { opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2, .9, .3, 1.4), filter .2s; }
.whatsapp.visible, .no-js .whatsapp { opacity: 1; transform: none; pointer-events: auto; }
.whatsapp.visible { animation: latido-wa 3.6s ease-in-out 1.2s infinite; }
.whatsapp:hover { animation-play-state: paused; transform: translateY(-3px) scale(1.04); }
.whatsapp .ico { animation: balanceo 5s ease-in-out 2s infinite; transform-origin: 50% 80%; }
@keyframes latido-wa { 0%, 100% { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55), 0 0 0 0 rgba(27, 122, 70, .5); } 60% { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55), 0 0 0 14px rgba(27, 122, 70, 0); } }
@keyframes balanceo { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-14deg); } 94% { transform: rotate(12deg); } 97% { transform: rotate(-6deg); } }

/* ── Preguntas frecuentes: apertura animada y buscador ─────────────────────── */
.faq details[open] .respuesta { animation: abre-respuesta .4s ease; }
@keyframes abre-respuesta { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.faq details { transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--azul); }
.faq-buscar { position: relative; margin-bottom: 1.2rem; }
.faq-buscar input { padding-left: 2.8rem; }
.faq-buscar .ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.faq-nada { color: var(--muted); font-weight: 600; }

/* ── Intro con el logo (primera visita de la sesión, menos de 1 s) ──────────── */
.intro { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: linear-gradient(160deg, #071A3A, #0B2656); }
.intro-on .intro { display: grid; animation: intro-sale .7s ease .25s forwards; }
.intro img { width: min(60vw, 296px); height: auto; background: #F2F5FB; padding: 14px 20px; border-radius: 24px; box-shadow: 0 0 0 0 rgba(255, 209, 92, .6); animation: intro-logo .7s cubic-bezier(.2, .9, .3, 1.3) both, intro-brillo 1s ease-out; }
@keyframes intro-logo { from { opacity: 0; transform: scale(.7) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes intro-brillo { 0% { box-shadow: 0 0 0 0 rgba(255, 209, 92, .6); } 100% { box-shadow: 0 0 0 40px rgba(255, 209, 92, 0); } }
@keyframes intro-sale { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  .intro, .intro-on .intro { display: none !important; }
  .whatsapp { opacity: 1; transform: none; pointer-events: auto; }
  .btn:hover, .btn:active { transform: none; }
}

/* En pantallas muy estrechas el logo grande no cabe junto a idioma, tema y menú */
@media (max-width: 420px) { .logo img, .cabecera.compacta .logo img { width: 100px; } .cabecera__fila { gap: .5rem; } }

/* ── Botones de descarga: oscuros y con relieve, con un reflejo suave que cruza de vez en cuando ─────────── */
.tienda { flex-direction: row; align-items: center; gap: .75rem; min-width: 205px; padding: .6rem 1.4rem .6rem 1rem; border-radius: 18px; border-color: rgba(255, 255, 255, .2); background: linear-gradient(165deg, #232A38, #05070B); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .28); }
.tienda:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 22px 40px -14px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 209, 92, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }
.tienda::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .24) 50%, transparent 62%); background-size: 260% 100%; background-position: 160% 0; pointer-events: none; animation: reflejo-tienda 5.5s ease-in-out 1.5s infinite; }
.tienda--android::after { animation-delay: 2.6s; }
@keyframes reflejo-tienda { 0%, 60% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.tienda .tienda__logo { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .12); font-size: inherit; opacity: 1; }
.tienda .tienda__txt { display: grid; gap: 0; font-size: inherit; opacity: 1; text-align: left; line-height: 1.2; }
.tienda .tienda__txt > span { font-size: .72rem; opacity: .85; font-weight: 600; }
.tienda__val { display: inline-flex; align-items: center; gap: .4rem; margin-top: .15rem; font-style: normal; font-size: .75rem; font-weight: 700; color: #fff; }
.tienda__val i { position: relative; display: inline-block; font-style: normal; font-size: .85rem; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.tienda__val i::before { content: "★★★★★"; color: rgba(255, 255, 255, .3); }
.tienda__val i::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--v, 100%); overflow: hidden; color: #FFC83D; }
.tienda__val b { font-weight: 700; }
.pie .tienda__logo, .pie .tienda__val { display: none; }
.pie .tienda { min-width: 0; padding: .4rem 1rem; border-radius: 14px; }