/* ==========================================================================
   Animal Libre — v11 · Punto por punto
   ========================================================================== */

/* ---------- Botón en la portada ---------- */
.al-pxp-abrir { grid-column: 2; justify-self: start; pointer-events: auto; display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 10px 20px 10px 10px; border: 1px solid rgba(244,239,233,.18); border-radius: 99px; background: rgba(244,239,233,.04); color: var(--hueso); font: inherit; text-align: left; cursor: pointer; transition: background-color .4s ease, border-color .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.al-pxp-abrir:hover { background: rgba(244,239,233,.1); border-color: rgba(244,239,233,.36); transform: translateY(-2px); }
.al-pxp-abrir:focus-visible { outline: 2px solid var(--lila); outline-offset: 4px; }
.al-pxp-abrir b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.1; }
.al-pxp-abrir small { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,239,233,.55); }
.al-pxp-abrir-ico { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--violeta); }
.al-pxp-abrir-ico i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.al-pxp-abrir-ico i:nth-child(1) { left: 11px; top: 21px; } .al-pxp-abrir-ico i:nth-child(2) { left: 18px; top: 13px; } .al-pxp-abrir-ico i:nth-child(3) { left: 25px; top: 22px; }
.al-pxp-abrir-ico::before, .al-pxp-abrir-ico::after { content: ""; position: absolute; height: 1px; background: rgba(255,255,255,.75); transform-origin: 0 50%; }
.al-pxp-abrir-ico::before { left: 13px; top: 23px; width: 10px; transform: rotate(-48deg); }
.al-pxp-abrir-ico::after { left: 20px; top: 15px; width: 10px; transform: rotate(52deg); }
@media (max-width: 991px) {
  .al-protagonista .al-pxp-abrir { grid-column: 1 / -1; margin-top: 14px; }
}

/* ---------- La experiencia ---------- */
html.al-pxp-abierta { overflow: hidden; }
.al-pxp { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(60% 70% at 70% 40%, rgba(126,23,190,.22), transparent 70%), #08050c; color: var(--hueso); opacity: 0; transition: opacity .6s ease; }
.al-pxp.al-pxp-visible { opacity: 1; }
.al-pxp[hidden] { display: none; }
.al-pxp canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.al-pxp-arriba { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: 28px clamp(20px, 4vw, 60px); z-index: 2; }
.al-pxp-barra { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.al-pxp-seg { height: 2px; border-radius: 2px; background: rgba(244,239,233,.16); overflow: hidden; }
.al-pxp-seg i { display: block; height: 100%; width: 0; background: var(--hueso); }
.al-pxp-seg.al-hecha i { width: 100%; }
.al-pxp-seg i { transition: width .25s linear; }
@keyframes al-pxp-llenar { to { width: 100%; } }
.al-pxp-x { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(244,239,233,.2); background: transparent; color: var(--hueso); cursor: pointer; }
.al-pxp-x .al-icono { width: 20px; height: 20px; }
.al-pxp-x:hover { background: rgba(244,239,233,.1); }

.al-pxp-texto, .al-pxp-falta, .al-pxp-fin { position: absolute; z-index: 2; left: clamp(20px, 6vw, 100px); bottom: clamp(90px, 14vh, 150px); max-width: min(560px, 38vw); }
.al-pxp-k { margin: 0 0 18px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lila); }
.al-pxp-t { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 1.3rem + 3vw, 4.4rem); line-height: 1; letter-spacing: -0.035em; color: #fff; }
.al-pxp-t em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--lila); }
.al-pxp-s { margin: 22px 0 0; font-size: clamp(1rem, .9rem + .3vw, 1.15rem); line-height: 1.6; color: rgba(244,239,233,.74); }
.al-pxp-s em { font-family: var(--serif); font-style: italic; font-size: 1.15em; color: #fff; }
.al-pxp-texto .al-pxp-k, .al-pxp-texto .al-pxp-t { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), filter .9s ease; }
.al-pxp-texto .al-pxp-s { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.al-pxp-texto.al-ver .al-pxp-k, .al-pxp-texto.al-ver .al-pxp-t { opacity: 1; transform: none; filter: none; }
.al-pxp-texto.al-ver .al-pxp-t { transition-delay: .12s; }
.al-pxp-texto.al-ver-s .al-pxp-s { opacity: 1; transform: none; }

.al-pxp-falta { animation: al-pxp-entra 1s cubic-bezier(.2,.8,.2,1) both; }
.al-pxp-falta .mil-button { margin-top: 30px; }
.al-pxp-pista { margin: 16px 0 0; font-size: .9rem; letter-spacing: .04em; color: rgba(244,239,233,.6); }
.al-pxp-fin { animation: al-pxp-entra 1.2s cubic-bezier(.2,.8,.2,1) both; }
.al-pxp-fin .al-acciones { margin-top: 30px; align-items: center; }
.al-pxp-otra { border: 0; background: none; color: rgba(244,239,233,.55); font: inherit; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.al-pxp-otra:hover { color: #fff; }
@keyframes al-pxp-entra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.al-pxp-espera canvas { cursor: none; }

.al-pxp-control { position: absolute; z-index: 2; right: clamp(20px, 4vw, 60px); bottom: clamp(26px, 5vh, 50px); display: flex; gap: 8px; }
.al-pxp-control button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(244,239,233,.2); background: transparent; color: var(--hueso); cursor: pointer; transition: background-color .3s ease; }
.al-pxp-control button:hover { background: rgba(244,239,233,.1); }
.al-pxp-control .al-icono { width: 20px; height: 20px; }
.al-pxp-ant .al-icono { transform: scaleX(-1); }
.al-pxp-espera .al-pxp-control, .al-pxp-final .al-pxp-control, .al-pxp-conectado .al-pxp-control { opacity: 0; pointer-events: none; }
.al-pxp-final .al-pxp-seg i { width: 100%; animation: none; }

.al-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 991px) {
  .al-pxp-texto, .al-pxp-falta, .al-pxp-fin { left: 22px; right: 22px; bottom: 100px; max-width: none; }
  .al-pxp-t { font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem); }
  .al-pxp-s { margin-top: 14px; }
  .al-pxp-arriba { padding: 18px 18px; }
  .al-pxp-control { bottom: 24px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-pxp-texto .al-pxp-k, .al-pxp-texto .al-pxp-t, .al-pxp-texto .al-pxp-s { transition: opacity .3s ease; transform: none; filter: none; }
}
.al-portada .al-protagonista { z-index: 6; }
@media (max-width: 991px) { .al-portada-texto > .al-pxp-abrir { margin-top: 26px; } }

/* ---------- v12: participación ---------- */
.al-pxp-intro { position: absolute; z-index: 2; left: clamp(20px, 6vw, 100px); bottom: clamp(90px, 14vh, 150px); max-width: min(520px, 40vw); animation: al-pxp-entra 1.2s cubic-bezier(.2,.8,.2,1) .3s both; }
.al-pxp-intro[hidden] { display: none; }
.al-pxp-intro .mil-button { margin-top: 30px; }
.al-pxp-cuenta { position: absolute; z-index: 2; top: 72px; left: clamp(20px, 4vw, 60px); margin: 0; display: flex; align-items: baseline; gap: 10px; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.al-pxp-cuenta b { font-family: var(--display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; color: #f05c40; font-variant-numeric: tabular-nums; }
.al-pxp-cuenta span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,239,233,.55); }
.al-pxp-ayuda { position: absolute; z-index: 2; left: 50%; bottom: clamp(30px, 5vh, 54px); transform: translateX(-50%); margin: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,239,233,.45); opacity: 0; transition: opacity .6s ease; pointer-events: none; white-space: nowrap; }
.al-pxp-andando .al-pxp-cuenta, .al-pxp-andando .al-pxp-ayuda { opacity: 1; }
.al-pxp-final .al-pxp-ayuda { opacity: 0; }
.al-pxp-control { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.al-pxp-andando .al-pxp-control { opacity: 1; pointer-events: auto; }
.al-pxp-final .al-pxp-control { opacity: 0; pointer-events: none; }
@media (hover: hover) and (min-width: 992px) { .al-pxp-andando canvas { cursor: none; } }
.al-pxp-fin .al-pxp-s b { font-family: var(--display); font-weight: 500; color: #f05c40; }
@media (max-width: 991px) {
  .al-pxp-intro { left: 22px; right: 22px; bottom: 100px; max-width: none; }
  .al-pxp-cuenta { top: 58px; left: 18px; }
  .al-pxp-ayuda { bottom: 86px; font-size: .62rem; white-space: normal; width: 80%; text-align: center; }
}
@media (max-width: 991px) { .al-pxp-texto, .al-pxp-fin { bottom: 128px; } }