/* vida.css · capa de «vida» común de las webs de marca de NEXUS (21-oct-2026). IGUAL en todas las webs; los colores llegan
   como variables --vida-c1..c4, --vida-noche y --vida-claro desde window.NP_VIDA (lib/vida.js). Nada aquí pasa por encima del pet. */
html{color-scheme:dark}
html[data-tema="claro"]{color-scheme:light}

/* ---- fondo «flotando»: partículas (three.js) + viñeta, detrás del contenido ---- */
.vida-fondo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.vida-vineta{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 52%,color-mix(in srgb,var(--vida-noche,#050a14) 78%,transparent))}
html[data-tema="claro"] .vida-vineta{background:radial-gradient(120% 90% at 50% 45%,transparent 60%,color-mix(in srgb,var(--vida-claro,#fff) 55%,transparent))}
html.vida-nogl body{background-image:radial-gradient(900px 600px at 80% 10%,color-mix(in srgb,var(--vida-c1) 22%,transparent),transparent 65%),radial-gradient(800px 600px at 10% 90%,color-mix(in srgb,var(--vida-c3) 18%,transparent),transparent 65%);background-attachment:fixed}

/* ---- intro coreografiada ---- */
html.vida-pre body::after{content:"";position:fixed;inset:0;z-index:34;background:var(--vida-noche,#050a14);animation:vidaTope .3s 3s forwards;pointer-events:none}
#vidaIntro{position:fixed;inset:0;z-index:34;background:radial-gradient(70% 60% at 50% 50%,color-mix(in srgb,var(--vida-noche,#050a14) 70%,#000),var(--vida-noche,#050a14));display:grid;place-items:center;transition:opacity .45s ease,transform .45s ease;pointer-events:none;animation:vidaTope .3s 2.6s forwards}   /* tope de seguridad: a los 2,6 s desaparece aunque el JS vaya lento */
#vidaIntro canvas{position:absolute;inset:0}
#vidaIntro.fuera{opacity:0;transform:scale(1.04)}
.vida-intro-nombre{position:relative;font-family:"Baloo 2",Montserrat,Nunito,system-ui,sans-serif;font-weight:900;font-size:clamp(26px,5vw,58px);letter-spacing:.06em;color:#fff;text-align:center;padding:0 16px;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s .2s,transform .7s .2s cubic-bezier(.2,.8,.2,1);text-shadow:0 0 30px color-mix(in srgb,var(--vida-c1) 70%,transparent)}
.vida-intro-nombre.on{opacity:1;transform:none}
html.vida-pre .cab{animation:vidaAparece .3s 2.6s both}   /* oculta durante la intro; si el JS se atasca, vuelve sola */
@keyframes vidaAparece{from{opacity:0}to{opacity:1}}
html.vida-entra .cab{animation:vidaBaja .7s .05s cubic-bezier(.2,.8,.2,1) backwards}
html.vida-entra .vida-lema>*{animation:vidaSube .65s cubic-bezier(.2,.7,.2,1) backwards}
html.vida-entra .vida-lema>*:nth-child(1){animation-delay:.05s}
html.vida-entra .vida-lema>*:nth-child(2){animation-delay:.14s}
html.vida-entra .vida-lema>*:nth-child(3){animation-delay:.23s}
html.vida-entra .vida-lema>*:nth-child(4){animation-delay:.32s}
html.vida-entra .vida-lema>*:nth-child(n+5){animation-delay:.41s}
@keyframes vidaSube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes vidaBaja{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes vidaTope{to{opacity:0;visibility:hidden}}

/* ---- cristal esmerilado ---- */
.vida-vidrio{-webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35)}
header.vida-vidrio,.cab.vida-vidrio{-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}

/* ---- borde con degradado cónico animado (plan favorito, botón principal) ---- */
@property --vida-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.vida-borde{position:relative;isolation:isolate}
.vida-borde::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--vida-ang),var(--vida-c1),var(--vida-c2),var(--vida-c3),var(--vida-c4),var(--vida-c1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:vidaGira 4.5s linear infinite}
/* halo fijo (sin blur animado: el blur por fotograma es caro en móviles) */
.vida-borde::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;box-shadow:0 0 22px -4px var(--vida-c1),0 0 34px -10px var(--vida-c3);opacity:.7}
@keyframes vidaGira{to{--vida-ang:360deg}}

/* ---- degradado animado en la palabra clave ---- */
.vida-brilla{background:linear-gradient(90deg,var(--vida-c1),var(--vida-c2),var(--vida-c3),var(--vida-c1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--vida-c1) 45%,transparent));animation:vidaGrad 6s ease infinite}
@keyframes vidaGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---- aparición al hacer scroll ---- */
html.vida .vida-rev{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
html.vida .vida-rev.vida-on,html.vida-sin-io .vida-rev,html.vida-red .vida-rev{opacity:1;transform:none}

/* ---- inclinación 3D ---- */
.vida-tilt{transition:transform .25s ease;will-change:transform}

/* ---- panel de chat del pet (pet_chat.js) en tema claro: solo colores, sin tocar el motor ---- */
html[data-tema="claro"] #pc-panel{background:#fff;color:#0d1b33;box-shadow:-10px 0 40px rgba(10,26,51,.18)}
html[data-tema="claro"] #pc-cab,html[data-tema="claro"] #pc-form{border-color:rgba(10,26,51,.12)}
html[data-tema="claro"] #pc-cerrar{color:#0d1b33}
html[data-tema="claro"] .pc-m.aura{background:rgba(10,26,51,.07);color:#0d1b33}
html[data-tema="claro"] #pc-chips button{border-color:rgba(10,26,51,.25);color:#0d1b33}
html[data-tema="claro"] #pc-form input{background:rgba(10,26,51,.05);border-color:rgba(10,26,51,.22);color:#0d1b33}
html[data-tema="claro"] #pc-form input::placeholder{color:rgba(13,27,51,.55)}
html[data-tema="claro"] #pc-form .pc-mic{border-color:rgba(10,26,51,.3);color:#0d1b33}
html[data-tema="claro"] #pc-form .pc-mic.on{color:#fff}

/* ---- movimiento reducido: nada se mueve ---- */
@media (prefers-reduced-motion:reduce){
  #vidaIntro,html.vida-pre body::after{display:none}
  .vida-borde::before,.vida-brilla{animation:none}
  html.vida .vida-rev{opacity:1;transform:none;transition:none}
}

/* APARICION_SEGURA_2110: si las transiciones no corren, el contenido queda visible igual */
html.vida .vida-rev.vida-fija{transition:none!important;opacity:1!important;transform:none!important}