/* =====================================================
   STYLE.CSS — cleaned & ordered
   Project: Portfolio Interactivo

   INDEX
   01 Reset & base
   02 World / levels layout
   03 Avatar + player animations
   04 Common UI helpers (visibility, images)
   05 Environment (ground, decor, parallax)
   06 Cities / skylines (ciudad1..)
   07 Skills / UI components
   08 Portfolio (screen + arrows)
   09 Contact (card + portals)
   10 HUD / Map / overlays
   11 Cinematic & FX
   12 INEFABLE section
   13 Responsive
   ===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;
}


/* ==============================
   UI — Arrow asset (separators)
   Use: <img class="ui-arrow" src="../assets/img/ui/arrow-portfolio.png" ...>
   ============================== */
.pi-ui-arrow{
  display:block;
  height:auto;
  width:auto;
  max-width:520px;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  filter: drop-shadow(0 0 12px rgba(190, 80, 255, 0.55));
}

@media (max-width: 900px){
  .pi-ui-arrow{ max-width:360px; }
}

body {
  background-color: #0b001a;
  overflow-x: hidden;
}

.pi-world {
  background-color: transparent;
  background-image: none;
  background-size: auto 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 1000vw;
  height: 100vh;
height: 100svh;
height: 100dvh;
  transition: transform 0.2s ease-out;
  will-change: transform;
  pointer-events: auto;
}


.pi-level {
  width: 600vw;
  height: 100vh;
height: 100svh;
height: 100dvh;
  position: relative;
}

.pi-plataforma {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #333;
}

.pi-avatar-wrapper {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.1s ease-out;
  z-index: 10;
}

.pi-avatar {
  width: 230px;
  height: 230px; /* Forzamos altura fija */
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
  transition: filter 0.4s ease, box-shadow 0.4s ease;
  transform: translateX(0);
}


.pi-avatar.super-saiyan {
  width: 230px;
  height: 230px; /* Forzamos altura fija */
  -webkit-filter: drop-shadow(0 0 10px #8C78FF); filter: drop-shadow(0 0 10px #8C78FF); /* ← Correcto */
  animation: resplandor 1.5s infinite alternate ease-in-out;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
  transition: filter 0.4s ease, box-shadow 0.4s ease;
  transform: translateX(0); /* ← asegura que no se desplace */
}


/* Animación de resplandor */
@keyframes resplandor {
  0% {
    -webkit-filter: drop-shadow(0 0 6px #8C78FF); filter: drop-shadow(0 0 6px #8C78FF);
  }
  50% {
    -webkit-filter: drop-shadow(0 0 6px #a99bf5); filter: drop-shadow(0 0 6px #a99bf5);
  }
  100% {
    -webkit-filter: drop-shadow(0 0 15px #ccc4ff); filter: drop-shadow(0 0 15px #ccc4ff);
  }
}


/* Salto aplicado al wrapper, no al avatar directamente */
.pi-avatar-wrapper.salta {
  animation: salto-avatar 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.titulo {
  position: absolute;
  top: 40px;
  left: 100px;
  font-size: 2rem;
  font-family: sans-serif;
  color: white;
}

.texto {
  position: absolute;
  top: 140px;
  left: 100px;
  font-size: 1.2rem;
  color: #333;
  max-width: 70%;
}

.lista {
  position: absolute;
  top: 140px;
  left: 100px;
  font-size: 1.2rem;
  list-style: none;
  padding: 0;
}

.lista li {
  margin-bottom: 10px;
}

.decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.ciudad {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 900px;
  opacity: 0.85;
  z-index: 3;
}

@keyframes entrada-ciudad {
  0% { top: -200px; opacity: 0; }
  100% { top: 450px; opacity: 0.7; }
}

.nube {
  width: 480px;
  position: absolute;
  top: 150px;
  opacity: 0.7;
  z-index: 2;
  animation: entrada-nube 1.2s ease-out forwards, flotar-sutil 12s ease-in-out infinite;
  animation-delay: 0s, 1.2s;
}

.nube1 { top: -1000px; left: 0px; animation-delay: 0s; }
.nube2 { top: -1000px; left: 350px; animation-delay: 2s; }
.nube3 { top: -1000px; left: 550px; animation-delay: 1s; }

@keyframes entrada-nube {
  0% { top: -200px; opacity: 0; }
  100% { top: 450px; opacity: 0.7; }
}

.sol {
  width: 170px;
  position: absolute;
  top: 150px;
  opacity: 0.7;
  z-index: 1;
  animation: entrada-sol 1.2s ease-out forwards, flotar-sol 2s ease-in-out infinite;
  animation-delay: 0s, 1.2s;
}

.sol1 {
  top: -1000px;
  left: 400px;
  animation-delay: 3s, 1.2s;
}

@keyframes entrada-sol {
  0% { top: -200px; opacity: 0; }
  100% { top: 450px; opacity: 0.7; }
}

@keyframes flotar-sol {
  0% { transform: translateX(0px); }
  50% { transform: translateX(20px); }
  100% { transform: translateX(0px); }
}

.formacion {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80%;
  max-width: 900px;
  opacity: 1;
  z-index: 1;
}

.pen {
  width: 170px;
  position: absolute;
  top: 150px;
  opacity: 0.7;
  z-index: 3;
  animation: entrada-pen 1.2s ease-out forwards, flotar-pen 2s ease-in-out infinite;
  animation-delay: 0s, 1.2s;
}

@keyframes entrada-pen {
  0% { top: -200px; opacity: 0; }
  100% { top: 250px; opacity: 1; }
}

@keyframes flotar-pen {
  0% { transform: translateX(0px); }
  50% { transform: translateX(20px); }
  100% { transform: translateX(0px); }
}

.pi-habilidades .huerto {
  position: absolute;
  bottom: 0;
  left: 100px;
  display: flex;
  gap: 40px;
  z-index: 2;
}

.planta {
  width: 40px;
  background-color: #228B22;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1s ease-out;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 0.9rem;
  color: white;
  padding: 4px;
  border-radius: 5px 5px 0 0;
}

.planta1 { height: 80px; transition-delay: 0.2s; }
.planta2 { height: 120px; transition-delay: 0.4s; }
.planta3 { height: 60px; transition-delay: 0.6s; }
.planta4 { height: 100px; transition-delay: 0.8s; }

.planta.crecida { transform: scaleY(1); }

.pi-habilidades-container {
  position: absolute;
  bottom: 40%;
  left: 50%;
  transform: translateX(-50%);
  height: 500px;
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: flex-end;
  z-index: 5;
}

.pi-barra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: white;
  font-size: 1rem;
  height: 70%;
  width: 120px;
  position: relative;
}

.pi-label {
  margin-bottom: 12px;
  font-size: 1rem;
  color: #ffffff;
  font-weight: 600;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.pi-progreso {
  width: 100%;
  height: 0%;
  border-radius: 12px;
  background: linear-gradient(to top, #c322ff, #9442ff);
  box-shadow: 0 4px 12px rgba(0, 204, 153, 0.4);
  transition: height 3s ease-out;
}

.pi-progreso.pi-auto {
  width: 100%;
  height: 0%;
  border-radius: 12px;
  background: linear-gradient(to top, #42ffd3, #42d9ff);
  box-shadow: 0 4px 12px rgba(0, 204, 153, 0.4);
  transition: height 3s ease-out;
}

.pi-diseño.crecer { height: 90%; }
.pi-uiux.crecer { height: 80%; }
.pi-ilustracion.crecer { height: 60%; }
.pi-auto.crecer { height: 75%; }

.pi-niveles {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: space-between;
  height: 70%;
  padding-right: 20px;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  text-align: center;
}

.pi-niveles span {
  display: inline-block;
  padding: 14px 14px;
  background: #1e1e2f;
  color: #00fff7;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease-in-out;
  animation: pulse 2.5s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pi-progreso.crecer {
  box-shadow: 0 0 20px rgba(0, 204, 153, 0.6);
}

.titulo-central {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.2rem;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  color: #ffffff;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.4);
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 10;
  background: linear-gradient(to right, #c322ff, #9442ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes caer-avatar {
  /* La .pi-avatar ya esta centrada por .pi-avatar-wrapper (left:50% + translateX(-50%)).
     Si aqui usamos translateX(-50%), al quitar/poner clases se produce un salto horizontal.
     Por eso animamos solo en el eje Y. */
  0% { transform: translateY(-1000px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.pi-avatar.caida {
  animation: caer-avatar 1s ease-out forwards;
}

@keyframes bajar-nivel {
  0% { transform: translateY(0); }
  100% { transform: translateY(160px); }
}

@keyframes subir-nivel {
  0% { transform: translateY(160px); }
  100% { transform: translateY(0); }
}

.pi-avatar.baja-nivel {
  animation: bajar-nivel 0.5s forwards ease-out;
}

.pi-avatar.sube-nivel {
  animation: subir-nivel 0.5s forwards ease-out;
}

.pi-camara {
  position: fixed;
  width: 100%;
  height: 100vh;
height: 100svh;
height: 100dvh;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
}

@keyframes salto-avatar {
  0% { transform: translateY(0); }
  30% { transform: translateY(-120px); }  /* más alto */
  50% { transform: translateY(-120px); }  /* mantiene arriba */
  100% { transform: translateY(0); }
}

.pi-avatar.salta {
  animation: salto-avatar 0.6s ease-out;
}

.obstaculo {
  position: absolute;
  margin-left: 100px;
  bottom: 120px;
  width: 130px;
  z-index: 5;
}

.obstaculo-about {
  left: 320px;
}


.pi-name {
  position: absolute;
  top: -800px; /* empieza fuera de pantalla */
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  opacity: 0;
  animation: caer-name 1s ease-out forwards, brillo-neon 5s infinite;
  z-index: 10;
}

/* Animación de caída */
@keyframes caer-name {
  0% {
    top: -800px;
    opacity: 0;
  }
  100% {
    top: 5%; /* ajusta según donde quieres que se detenga */
    opacity: 1;
  }
}


.pi-next-level {
  position: absolute;
  top: -800px; /* empieza fuera de pantalla */
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  opacity: 0;
  animation: caer-next-level 1s ease-out forwards, pi-panel-pulse 3.4s ease-in-out infinite, pi-panel-float 2.8s ease-in-out 0.9s infinite;
  z-index: 10;
}

/* Animación de caída */
@keyframes caer-next-level {
  0% {
    top: -800px;
    opacity: 0;
  }
  100% {
    top: 10%; /* ajusta según donde quieres que se detenga */
    opacity: 1;
  }
}

/* Efecto de brillo tipo neón */
@keyframes brillo-neon {
  0%   { -webkit-filter: drop-shadow(0 0 2px #c322ff); filter: drop-shadow(0 0 2px #c322ff); opacity: 1; }
  10%  { -webkit-filter: drop-shadow(0 0 8px #c322ff); filter: drop-shadow(0 0 8px #c322ff); opacity: 0.95; }
  20%  { -webkit-filter: drop-shadow(0 0 2px #c322ff); filter: drop-shadow(0 0 2px #c322ff); opacity: 1; }
  30%  { -webkit-filter: drop-shadow(0 0 8px #c322ff); filter: drop-shadow(0 0 8px #c322ff); opacity: 0.9; }
  40%  { -webkit-filter: drop-shadow(0 0 2px #9442ff); filter: drop-shadow(0 0 2px #9442ff); opacity: 1; }
  60%  { -webkit-filter: drop-shadow(0 0 8px #9442ff); filter: drop-shadow(0 0 8px #9442ff); opacity: 0.95; }
  80%  { -webkit-filter: drop-shadow(0 0 2px #9442ff); filter: drop-shadow(0 0 2px #9442ff); opacity: 1; }
  100% { -webkit-filter: drop-shadow(0 0 8px #9442ff); filter: drop-shadow(0 0 8px #9442ff); opacity: 0.95; }
}


.pi-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.visible {
  opacity: 1;
  transform: translateY(0);
}


.pi-suelo-continuo {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 160px; /* Ajusta según altura del SVG */
  width: 100%;
  background-image: url("../assets/svg/environment/suelo-tierra.svg");
  background-repeat: repeat-x;
  background-size: contain;
  z-index: 2; /* Debajo del avatar, encima del fondo */
  pointer-events: none;
}


.objeto-education {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
  max-width: 280px;
  z-index: 6;
}

.pi-objeto {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
  max-width: 350px;
  z-index: 6;
}

.pi-decoraciones {
  position: absolute;
  bottom: 55%;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 2;
  pointer-events: none;
}

/* =========================================================
   EDUCATION: Carteles tipo "portal" (igual que Contact)
   - Reemplaza graduate-1/2/3.svg por recuadros
========================================================== */
#pi-zone-education .pi-education-portals{
  /*
    2x2 en desktop (4 carteles):
    - Evita el 3+1 “descompensado”
    - Mantiene centrado y con el mismo ritmo visual
  */
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
  justify-items: stretch;
  max-width: 820px;
  margin: 0 auto;
}

/* En pantallas más estrechas (tablet), 1 columna para que no apriete */
@media (max-width: 860px){
  #pi-zone-education .pi-education-portals{ grid-template-columns: 1fr; max-width: 520px; }
}

#pi-zone-education .pi-contact-portal.pi-education{
  width: 100%;
  padding: 3px;            /* mantiene el borde degradado */
  border-radius: 16px;
  transform: translateZ(0); /* suaviza */
  pointer-events: none;      /* son carteles, no links */
}

#pi-zone-education .pi-contact-portal.pi-education .pi-portal-inner{
  /* Altura unificada: el borde no cambia aunque el texto tenga menos líneas */
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  padding: 16px 16px;
  border-radius: 14px;
  overflow: hidden;
}

#pi-zone-education .pi-contact-portal.pi-education .pi-portal-top{
  gap: 10px;
}

#pi-zone-education .pi-contact-portal.pi-education .pi-portal-icon{
  width: 42px;
  height: 42px;
  font-size: 18px;
}

#pi-zone-education .pi-contact-portal.pi-education .pi-portal-name{
  font-size: 14px;
  letter-spacing: .06em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop muestra el título completo; el corto se reserva para móvil */
#pi-zone-education .pi-portal-name--mobile{ display: none; }

@media (max-width: 520px){
  #pi-zone-education .pi-portal-name--desktop{ display: none; }
  #pi-zone-education .pi-portal-name--mobile{ display: -webkit-box; }
}

#pi-zone-education .pi-contact-portal.pi-education .pi-portal-desc{
  font-size: 12.5px;
  opacity: .9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Variantes de color (sutiles, estilo neon) */
#pi-zone-education .pi-contact-portal.pi-education.pi-edu-1{
  --bg: #6d5ef9;
  --bg2: #8a7bff;
  --ring: rgba(109,94,249,.35);
}

#pi-zone-education .pi-contact-portal.pi-education.pi-edu-2{
  --bg: #b04cff;
  --bg2: #ff4cc9;
  --ring: rgba(176,76,255,.28);
}

#pi-zone-education .pi-contact-portal.pi-education.pi-edu-3{
  --bg: #1fa5ff;
  --bg2: #35ffd1;
  --ring: rgba(31,165,255,.28);
}

#pi-zone-education .pi-contact-portal.pi-education.pi-edu-4{
  /* IA generativa (sutil, futurista) */
  --bg: #00d1ff;
  --bg2: #a8ff6a;
  --ring: rgba(0,209,255,.26);
}

/* Ajuste responsive */
@media (max-width: 1100px){
  #pi-zone-education .pi-contact-portal.pi-education{
    width: 280px;
    max-width: 32vw;
  }
  #pi-zone-education .pi-contact-portal.pi-education .pi-portal-name{
    font-size: 13px;
  }
}


.pi-cartel {
  position: absolute;
  width: 350px;
  max-width: none;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  animation: entrada-cartel 1s ease-out forwards;
}


@keyframes entrada-cartel {
  0% {
    transform: translateX(-50%) translateY(-40px);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}


.decor-cartel1 {
  animation-delay: 0s;
}
.decor-cartel2 {
  animation-delay: 1s;
}
.decor-cartel3 {
  animation-delay: 2s;
}


@keyframes flotar {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@keyframes entrada-flotante {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.visible .decor-cartel1 {
  animation: entrada-flotante 1s ease-out forwards, flotar 4s ease-in-out infinite;
  animation-delay: 0s, 1s;
}

.visible .decor-cartel2 {
  animation: entrada-flotante 1s ease-out forwards, flotar 4s ease-in-out infinite;
  animation-delay: 0.5s, 1.5s;
}

.visible .decor-cartel3 {
  animation: entrada-flotante 1s ease-out forwards, flotar 4s ease-in-out infinite;
  animation-delay: 1s, 2s;
}


@keyframes entrada-objeto {
  0% {
    opacity: 0;
    transform: translateY(-300px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flotar-cartel {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
  100% { transform: translateX(-50%) translateY(0); }
}

.pi-cartel.visible {
  animation: entrada-cartel 1s ease-out forwards, flotar-cartel 4s ease-in-out infinite;
}


/* ================================
   VOLTAGE (circular) — Upgrade button
   Replaces old SVG power button.
================================ */
.pi-voltage-circle {
  position: relative;
  width: 88px;
  height: 88px;
}

.pi-voltage-circle button {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(34, 42, 106, 0.95), rgba(11, 15, 40, 0.95));
  border: 4px solid rgba(122, 92, 255, 0.95);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 0 28px rgba(122, 92, 255, 0.38);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
}

.pi-voltage-circle button:hover {
  background: radial-gradient(circle at 30% 30%, rgba(45, 56, 142, 0.98), rgba(11, 15, 40, 0.95));
  box-shadow: 0 0 44px rgba(122, 92, 255, 0.75);
  transform: scale(1.06);
}

.pi-voltage-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}

.pi-voltage-icon svg {
  display: block;
}

.pi-voltage-svg {
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 108px;
  height: 108px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pi-voltage-circle button:hover + .pi-voltage-svg,
.pi-voltage-circle button:focus-visible + .pi-voltage-svg,
.pi-voltage-circle.is-active .pi-voltage-svg {
  opacity: 1;
}

.pi-voltage-line {
  stroke-width: 3.5;
  stroke-dasharray: 100;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#piGlow");
}

.pi-voltage-line-1 {
  stroke: #b993ff;
  stroke-dashoffset: 0;
  animation: piSpark1 3s linear infinite;
}

.pi-voltage-line-2 {
  stroke: #00f0ff;
  stroke-dashoffset: 500;
  animation: piSpark2 3s linear infinite;
}

.pi-voltage-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pi-voltage-circle button:hover ~ .pi-voltage-dots,
.pi-voltage-circle button:focus-visible ~ .pi-voltage-dots,
.pi-voltage-circle.is-active .pi-voltage-dots {
  opacity: 1;
}

.pi-voltage-dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  position: absolute;
  opacity: 0;
}

.pi-voltage-dot-1 { top: 6px; left: 22%; animation: piFlyUp 3s linear infinite; }
.pi-voltage-dot-2 { top: 10px; left: 55%; animation: piFlyUp 3s linear infinite; animation-delay: 0.5s; }
.pi-voltage-dot-3 { top: 14px; left: 78%; animation: piFlyUp 3s linear infinite; animation-delay: 1s; }
.pi-voltage-dot-4 { bottom: 8px; left: 30%; animation: piFlyDown 3s linear infinite; animation-delay: 2.5s; }
.pi-voltage-dot-5 { bottom: 12px; left: 65%; animation: piFlyDown 3s linear infinite; animation-delay: 1.5s; }

@keyframes piSpark1 { to { stroke-dashoffset: -1000; } }
@keyframes piSpark2 { to { stroke-dashoffset: -500; } }

@keyframes piFlyUp {
  0% { opacity: 0; transform: translateY(0) scale(0.2); }
  5% { opacity: 1; transform: translateY(-16px) scale(0.55); }
  10%, 100% { opacity: 0; transform: translateY(-32px) scale(0.2); }
}

@keyframes piFlyDown {
  0% { opacity: 0; transform: translateY(0) scale(0.2); }
  5% { opacity: 1; transform: translateY(16px) scale(0.55); }
  10%, 100% { opacity: 0; transform: translateY(32px) scale(0.2); }
}

.pi-transformador-container {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}


.pi-objetos-desintegrables {
  position: absolute;
  bottom: 250px;
  left: 30%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  z-index: 3;
  pointer-events: none;
}


.pi-desintegrable {
  max-width: 80px;
  opacity: 1;
  -webkit-filter: blur(0); filter: blur(0);
  animation: flotar-objeto 4s ease-in-out infinite;
}

.objetos-desintegrables2 {
  position: absolute;
  bottom: 250px;
  left: 30%;
  transform: translateX(-50%);
  display: flex;
  gap: 60px;
  z-index: 3;
  pointer-events: none;
}


.desintegrable2 {
  max-width: 100px;
  opacity: 1;
  -webkit-filter: blur(0); filter: blur(0);
  animation: flotar-objeto 4s ease-in-out infinite;
}


@keyframes dispersar {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
    -webkit-filter: blur(0); filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x, 0px), var(--y, -400px)) rotate(20deg);
    -webkit-filter: blur(4px); filter: blur(4px);
  }
}

.pi-desintegrable.desintegrado {
  animation: dispersar 0.6s ease-out forwards;
}

@keyframes flotar-objeto {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Zigzag de altura */
.pi-objetos-desintegrables .pi-desintegrable:nth-child(odd) {
  margin-top: -20px;
}
.pi-objetos-desintegrables .pi-desintegrable:nth-child(even) {
  margin-top: 20px;
}

/* Quitar flotación a graduate */
/*
.objeto-education.decor-cartel1,
.objeto-education.decor-cartel2,
.objeto-education.decor-cartel3 {
  animation: none !important;
}
*/

.skyline-madrid {
  position: absolute;
  bottom: 100px;
  width: 100%;
  height: 300px;
  z-index: 1;
  pointer-events: none;
}

.pi-edificio {
  position: absolute;
  opacity: 0;
  transform: translateY(100px) scale(0.9);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
  max-height: 700px;
}

/* Posiciones personalizadas y profundidad */

.edificio1 {
  left: 10%;
  height: 300px;
  bottom: 50px;
  z-index: 1;
}
.edificio2 {
  left: 50%;
  height: 400px;
  bottom: 50px;
  z-index: 2;
}
.edificio3 {
  left: 8%;
  height: 530px;
  bottom: 50px;
  z-index: 8;

}
.edificio5 {
  left: 54%;
  height: 150px;
  bottom: 50px;
  z-index: 3;
}
.edificio6 {
  left: 24%;
  height: 230px;
  bottom: 40px;
  z-index: 4;
}
.edificio4 {
  left: 70%;
  height: 530px;
  bottom: -70px;
  z-index: 5;
}

/* Animación al hacerse visible */
.skyline-madrid.visible .pi-edificio {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Delays escalonados */
.skyline-madrid.visible .edificio1 { transition-delay: 0.6s; }
.skyline-madrid.visible .edificio2 { transition-delay: 1s; }
.skyline-madrid.visible .edificio3 { transition-delay: 0s; }
.skyline-madrid.visible .edificio5 { transition-delay: 0.4s; }
.skyline-madrid.visible .edificio6 { transition-delay: 0.2s; }
.skyline-madrid.visible .edificio4 { transition-delay: 1.4s; }


/* Animaciones con delay diferenciada */
.skyline-madrid.visible .pi-edificio:nth-child(1) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.3s;
}
.skyline-madrid.visible .pi-edificio:nth-child(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.6s;
}
.skyline-madrid.visible .pi-edificio:nth-child(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.9s;
}
.skyline-madrid.visible .pi-edificio:nth-child(4) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 1.2s;
}
.skyline-madrid.visible .pi-edificio:nth-child(5) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 1.5s;
}
.skyline-madrid.visible .pi-edificio:nth-child(6) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 1.8s;
}


/* ==============================
   CIUDAD 2 (SKYLINE ÚNICO) — Cinemático
   - Contenedor hace el reveal (opacity/translate/scale/blur)
   - La imagen hace una flotación MUY sutil después de entrar
============================== */

.pi-skyline-ciudad2{
  position: absolute;
  bottom: clamp(120px, 14vh, 180px);
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1; /* detrás del suelo (suelo-continuo z-index:2) */
  pointer-events: none;

  /* Estado "oculto" (además de .pi-hidden) */
  opacity: 0;
  transform: translateY(46px) scale(0.985);
  filter: blur(10px);
  transition:
  opacity 0.6s ease, /* rápida, como ahora */
  transform 2.6s cubic-bezier(.22,1,.36,1),
  filter 0.6s ease;
  will-change: opacity, transform, filter;
}

.pi-skyline-ciudad2.visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

.pi-skyline-ciudad2-img{
  display: block;
  width: clamp(820px, 85vw, 1500px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  transform-origin: bottom center;

  /* Glow suave (cinemático) */
  -webkit-filter: drop-shadow(0 14px 44px rgba(0,0,0,.55))
                  drop-shadow(0 0 22px rgba(195,34,255,.22));
          filter: drop-shadow(0 14px 44px rgba(0,0,0,.55))
                  drop-shadow(0 0 22px rgba(195,34,255,.22));
}

/* Flotación sutil una vez visible */
.pi-skyline-ciudad2.visible .pi-skyline-ciudad2-img{
  animation: skylineCiudad2Float 10s ease-in-out 1.1s infinite;
}

@keyframes skylineCiudad2Float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .pi-skyline-ciudad2,
  .pi-skyline-ciudad2.visible{
    transition: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .pi-skyline-ciudad2.visible .pi-skyline-ciudad2-img{ animation: none !important; }
}
.hobbies-objetos {
  position: absolute;
  bottom: 400px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  pointer-events: auto;
}


.fila-hobbies {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 20px;
}

@keyframes flotar-hobby {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-10px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}


.hobby-desintegrable {
  animation: flotar-hobby 4s ease-in-out infinite;
}

.hobby-desintegrable:nth-child(odd) {
  animation-delay: 0s;
}

.hobby-desintegrable:nth-child(even) {
  animation-delay: 2s;
}


/* === Estilos corregidos para ciudad3 === */

.skyline-ciudad3 {
  position: absolute;
  bottom: 100px;
  width: 100%;
  height: 300px;
  z-index: 1;
  pointer-events: none;
}
.skyline-ciudad3 .pi-edificio {
  position: absolute;
  opacity: 0;
  /*transform: translateY(100px) scale(0.9);*/
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.skyline-ciudad3.visible .pi-edificio {
  opacity: 1;
  transform: translateY(0) scale(1);
}


.ciudad3-1  { left: 50%;   height: 370px; bottom: 300px; z-index: 99; }
.ciudad3-2  { left: 54%;  height: 180px; bottom: 520px; z-index: 7; }
.ciudad3-3  { left: 42%;  height: 150px; bottom: 370px; z-index: 6; }
.ciudad3-4  { left: 75%;  height: 80px; bottom: 340px; z-index: 2; }
.ciudad3-5  { left: 55%;  height: 150px; bottom: 240px; z-index: 4; }
.ciudad3-6  { left: 56%;  height: 60px; bottom: 350px; z-index: 3; }
.ciudad3-7  { left: 44%;  height: 100px; bottom: 550px; z-index: 4; }
.ciudad3-8  { left: 40%;  height: 80px; bottom: 465px; z-index: 2; }
.ciudad3-9  { left: 70%;  height: 110px; bottom: 400px; z-index: 5; }
.ciudad3-10 { left: 45%;  height: 350px; bottom: 250px; z-index: 1; }
.ciudad3-1  { transition-delay: 0s; }
.ciudad3-2  { transition-delay: 0s; }
.ciudad3-3  { transition-delay: 0s; }
.ciudad3-4  { transition-delay: 0s; }
.ciudad3-5  { transition-delay: 0s; }
.ciudad3-6  { transition-delay: 0s; }
.ciudad3-7  { transition-delay: 0s; }
.ciudad3-8  { transition-delay: 0s; }
.ciudad3-9  { transition-delay: 0s; }
.ciudad3-10 { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-1  { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-2  { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-3  { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-4  { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-5  { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-6  { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-7  { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-8  { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-9  { transition-delay: 0s; }
.skyline-ciudad3.visible .ciudad3-10 { transition-delay: 0s; }


.ux-canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2%;

}


.pi-portfolio-level {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
height: 100svh;
height: 100dvh;
  background: transparent;
}


.pi-portfolio-screen img:not(.arrow-icon) {
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 60px;
}


/* Main screen frame (Hobbies / Portfolio) */
.pi-portfolio-screen{
  position: relative;
  width: 100%;
  height: 340px;
  margin: 20px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
}

/* =====================================================
   HOBBIES: label reveal (Opción 1)
   - Aparece al acercarse el avatar (interactable--near) o en hover
   - Ligero y recruiter-friendly
   ===================================================== */
.pi-hobby-label{
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  padding: 10px 14px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(6, 10, 18, 0.42);
  border: 2px solid rgba(140, 120, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 10px 30px rgba(0,0,0,0.22);
  transition:
    opacity .38s cubic-bezier(.22, 1, .36, 1),
    transform .38s cubic-bezier(.22, 1, .36, 1);
}

.pi-hobby-label-text{
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 16px rgba(140,120,255,0.22);
}

.pi-portfolio-screen:hover .pi-hobby-label,
.pi-portfolio-screen.interactable--near .pi-hobby-label{
  opacity: 1;
  transform: translate(-50%, 0);
}


.pi-portfolio-container {
  text-align: center;
  margin-bottom: 20%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio-buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 300px;
}


.puntos-flotantes {
  position: absolute;
  color: #97effe;
  font-size: 44px;
  font-weight: bold;
  animation: flotar 1s ease-out forwards;
  pointer-events: none;
  z-index: 1000;
}

@keyframes flotar {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px);
  }
}


.pi-parallax-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; /* Para que quede detrás del contenido */
}

/* =====================================================
   SPACE STARS (inspirado en UIverse)
   - Usamos JS para generar el box-shadow de cada capa.
   - Animación vertical continua (como “túnel” de estrellas).
   ===================================================== */

.pi-parallax-container.pi-space-stars {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

.pi-parallax-container.pi-space-stars .pi-stars {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  transform: translateZ(0);
  will-change: transform;
}

/* Duplicado para el “tile” infinito (se coloca a 2000px) */
.pi-parallax-container.pi-space-stars .pi-stars.pi-stars-dup {
  top: 2000px;
}

.pi-parallax-container.pi-space-stars .pi-stars-1 {
  width: 1px;
  height: 1px;
  opacity: 0.9;
  animation: piAnimStar 50s linear infinite;
}

.pi-parallax-container.pi-space-stars .pi-stars-2 {
  width: 2px;
  height: 2px;
  opacity: 0.75;
  animation: piAnimStar 100s linear infinite;
}

.pi-parallax-container.pi-space-stars .pi-stars-3 {
  width: 3px;
  height: 3px;
  opacity: 0.6;
  animation: piAnimStar 150s linear infinite;
}

@keyframes piAnimStar {
  from { transform: translateY(0); }
  to { transform: translateY(-2000px); }
}

.pi-layer {
  position: absolute;
  width: 200%;
  height: 100%;
  background-size: cover;
  background-repeat: repeat-x;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Añade la nueva animación de flotación vertical */
@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.pi-capa1 {
  animation: scrollParallax1 120s linear infinite;
}

/* Flotación vertical para capa2 */
.pi-capa2 {
  animation: floatY 12s ease-in-out infinite;
  background-repeat: repeat-x;
  background-size: cover;
  will-change: transform;
}

/* Flotación vertical diferente para capa3 */
.pi-capa3 {
  bottom: 0px;
  animation: floatY 16s ease-in-out infinite;
  background-repeat: repeat-x;
  background-size: contain;
  background-position: center;
  will-change: transform;
}

@keyframes scrollParallax1 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}


/* === Estilos corregidos para ciudad3 === */

.pi-skyline-ciudad4 {
  position: absolute;
  bottom: 100px;
  width: 100%;
  height: 300px;
  z-index: 1;
  pointer-events: none;
}
.pi-skyline-ciudad4 .pi-edificio {
  position: absolute;
  opacity: 0;
  transform: translateY(100px) scale(0.9);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.pi-skyline-ciudad4.visible .pi-edificio {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pi-ciudad4-1  { left: 34%;   height: 180px; bottom: 400px; z-index: 99; }
.pi-ciudad4-2  { left: 37%;  height: 280px; bottom: 15%; z-index: 7; }
.pi-ciudad4-3  { left: 52%;  height: 300px; bottom: 15%; z-index: 6; }
.pi-ciudad4-4  { left: 40%;  height: 330px; bottom: 0px; z-index: 2; }
.pi-ciudad4-5  { left: 55%;  height: 130px; bottom: 75%; z-index: 4; }
.pi-ciudad4-6  { left: 68%;  height: 160px; bottom: 75%; z-index: 3; }
.pi-ciudad4-7  { left: 48%;  height: 180px; bottom: 400px; z-index: 4; }
.pi-ciudad4-8  { left: 78%;  height: 180px; bottom: 400px; z-index: 2; }
.pi-ciudad4-9  { left: 72%;  height: 180px; bottom: 350px; z-index: 5; }
.pi-ciudad4-10 { left: 60%;  height: 200px; bottom: 370px; z-index: 1; }
.pi-ciudad4-1  { transition-delay: 0s; }
.pi-ciudad4-2  { transition-delay: 0s; }
.pi-ciudad4-3  { transition-delay: 0s; }
.pi-ciudad4-4  { transition-delay: 0s; }
.pi-ciudad4-5  { transition-delay: 0s; }
.pi-ciudad4-6  { transition-delay: 0s; }
.pi-ciudad4-7  { transition-delay: 0s; }
.pi-ciudad4-8  { transition-delay: 0s; }
.pi-ciudad4-9  { transition-delay: 0s; }
.pi-ciudad4-10 { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-1  { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-2  { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-3  { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-4  { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-5  { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-6  { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-7  { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-8  { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-9  { transition-delay: 0s; }
.pi-skyline-ciudad4.visible .pi-ciudad4-10 { transition-delay: 0s; }


/* =====================================================
   Comparador — look PRO (simple, sin overlays)
   ===================================================== */

/* Wrapper para permitir overlays (label) fuera del marco del comparador */
.pi-comparador-wrapper{
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 14% auto; /* separación arriba y abajo (antes estaba en el container) */
}

/* Label superior (fuera del comparador, estilo HUD) */
.pi-comparison-label{
  position:absolute;
  top:-66px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 34px;

  font-family:"Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-size:14px;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;

  color:rgba(255,255,255,0.95);
  text-shadow:0 0 10px rgba(140, 120, 255, 0.22);

  background:rgba(10, 15, 35, 0.85);
  backdrop-filter:blur(8px);

  border-radius:28px;
  border:2px solid rgba(140, 120, 255, 0.60);
  box-shadow:
    0 0 35px rgba(140, 120, 255, 0.30),
    inset 0 0 15px rgba(140, 120, 255, 0.12);

  pointer-events:none;
  z-index:10;
}
.pi-comparison-label::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:28px;
  border:2px solid rgba(140, 120, 255, 0.60);
  box-shadow:
    0 0 35px rgba(140, 120, 255, 0.30),
    inset 0 0 15px rgba(140, 120, 255, 0.12);
  opacity:0.55;
  pointer-events:none;
}

.pi-comparison-container{
  position: relative;
  width: 600px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 28px;

  background: rgba(10, 15, 35, 0.85);
  backdrop-filter: blur(8px);

  border: 2px solid rgba(140, 120, 255, 0.60);
  box-shadow:
    0 0 35px rgba(140, 120, 255, 0.30),
    inset 0 0 15px rgba(140, 120, 255, 0.12);

  transform: translateZ(0);
  isolation: isolate;
  padding: 0;
  z-index: 2;
}

/* doble borde estilo “NEXT LEVEL” */
.pi-comparison-container::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: 34px;
  border: 2px solid rgba(140, 120, 255, 0.35);
  opacity: 0.55;
  pointer-events:none;
  z-index: 1;
}

/* ligero “shine” diagonal, sensación de material */
.pi-comparison-container::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 65%);
  transform: rotate(18deg);
  opacity:.28;
  pointer-events:none;
  z-index: 2;
}

.pi-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Evita recortes: se adapta al marco del comparador */
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  border-radius: 28px;
  user-select:none;
  -webkit-user-drag:none;
}

.pi-img-bottom{ z-index: 1; }

.pi-img-top-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  border-radius: 24px;
  /* Revela la parte izquierda sin reescalar la imagen */
  clip-path: inset(0 50% 0 0);
}

.pi-img-top{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 24px;
}

/* Slider — barra + “thumb” premium */
.pi-slider-bar{
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px; /* mantiene un hit-area cómodo */
  height: 100%;
  background: rgba(255,255,255,.70);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 0 24px rgba(168,140,255,.28);
  z-index: 3;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pi-slider-bar::before{
  content:"↔";
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 14px 50px rgba(0,0,0,.45),
    0 0 0 6px rgba(168,140,255,.14);
  backdrop-filter: blur(10px);
}

@media (max-width: 520px){
  .pi-slider-bar::before{ width: 42px; height: 42px; }
}

.pi-efecto-neon {
  /*animation: caer-comparador 1s ease-out forwards, brillo-neon 5s infinite;*/
}

@keyframes caer-comparador {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Efecto de brillo tipo neón */


.slider img,
.pi-level img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


.pi-skyline-ciudad6 {
  position: absolute;
  bottom: 100px;
  width: 100%;
  height: 300px;
  z-index: 1;
  pointer-events: none;
}
.pi-skyline-ciudad6 .pi-edificio {
  position: absolute;
  opacity: 0;
  /*transform: translateY(100px) scale(0.9);*/
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.pi-skyline-ciudad6.visible .pi-edificio {
  opacity: 1;
  transform: translateY(0) scale(1);
}


.pi-ciudad6-1  { left: 50%;   height: 270px; bottom: 80%; z-index: 99; }

.pi-ciudad6-1  { transition-delay: 0s; }

.pi-skyline-ciudad6.visible .pi-ciudad6-1  { transition-delay: 0s; }


.pi-skyline-ciudad7 {
  position: absolute;
  bottom: 100px;
  width: 100%;
  height: 300px;
  z-index: 1;
  pointer-events: none;
}
.pi-skyline-ciudad7 .pi-edificio {
  position: absolute;
  opacity: 0;
  /*transform: translateY(100px) scale(0.9);*/
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.pi-skyline-ciudad7.visible .pi-edificio {
  opacity: 1;
  transform: translateY(0) scale(1);
}


.pi-ciudad7-1  { left: 50%;   height: 270px; bottom: 80%; z-index: 99; }

.pi-ciudad7-1  { transition-delay: 0s; }

.pi-skyline-ciudad7.visible .pi-ciudad7-1  { transition-delay: 0s; }

.pi-skyline-ciudad8 {
  position: absolute;
  bottom: 100px;
  width: 100%;
  height: 300px;
  z-index: 1;
  pointer-events: none;
}
.pi-skyline-ciudad8 .pi-edificio {
  position: absolute;
  opacity: 0;
  /*transform: translateY(100px) scale(0.9);*/
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.pi-skyline-ciudad8.visible .pi-edificio {
  opacity: 1;
  transform: translateY(0) scale(1);
}


.pi-ciudad8-1  { left: 50%;   height: 270px; bottom: 80%; z-index: 99; }

.pi-ciudad8-1  { transition-delay: 0s; }

.pi-skyline-ciudad8.visible .pi-ciudad8-1  { transition-delay: 0s; }


.pi-skyline-ciudad9 {
  position: absolute;
  bottom: 100px;
  width: 100%;
  height: 300px;
  z-index: 1;
  pointer-events: none;
}
.pi-skyline-ciudad9 .pi-edificio {
  position: absolute;
  opacity: 0;
  /*transform: translateY(100px) scale(0.9);*/
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.pi-skyline-ciudad9.visible .pi-edificio {
  opacity: 1;
  transform: translateY(0) scale(1);
}


.pi-ciudad9-1  { left: 50%;   height: 270px; bottom: 80%; z-index: 99; }

.pi-ciudad9-1  { transition-delay: 0s; }

.pi-skyline-ciudad9.visible .pi-ciudad9-1  { transition-delay: 0s; }


/* === Ajustes para pantallas grandes (Full HD, 2K, 4K) === */
@media (min-width: 1920px) {
  .pi-avatar-wrapper {
    bottom: 150px;
  }

  .pi-avatar {
    width: 260px;
  }

  .pi-camara {
    transform: scale(1.05);
  }

  .titulo-central {
    font-size: 2.8rem;
  }

  .titulo {
    font-size: 2.4rem;
  }

  .texto,
  .lista {
    font-size: 1.4rem;
  }

  .pi-cartel {
    width: 400px;
  }
}

/* Contact card — centrado en la sección Contacto, sin animación ni movimiento */
.contact-card{
  position: absolute;
  top: 50%;              /* mitad de los 100vh de .pi-level */
  left: 50vw;            /* mitad del viewport, no del ancho 600vw de la sección */
  transform: translate(-50%, -50%);
  z-index: 150;          /* por encima del decorado, por debajo de overlays de cámara */
  width: min(720px, 90vw);
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: 1.25rem;
  -webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  text-align: center;
}

/* Hover sin mover: solo sombra/saturación */
.contact-card:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  background: rgba(255,255,255,0.12);
  -webkit-filter: saturate(1.05); filter: saturate(1.05);
}

/* 2 columnas (Portfolio + LinkedIn) */
.contact-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.75rem;
}

/* Estilos base comunes */


/* Hover común */
/* Estilo específico para Porfolio */


/* Estilo específico para LinkedIn */


/* === Scroll Hint: fixed note guiding users to scroll === */
.pi-scroll-hint{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border-radius: 999px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  pointer-events: none; /* non-blocking */
  opacity: 1;
  transition: opacity .5s ease, visibility .5s linear .5s;
  animation: scrollHintFloat 2s ease-in-out infinite;
}

.pi-scroll-hint .pi-scroll-icon{
  display:inline-block;
  font-size: 16px;
  line-height: 1;
  transform: translateY(0);
  animation: scrollIconBounce 1.4s ease-in-out infinite;
}

@keyframes scrollIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes scrollHintFloat {
  0%, 100% { transform: translate(-50%,0); }
  50% { transform: translate(-50%,-6px); }
}

/* Hide after we add the 'hidden' class from JS */
.pi-scroll-hint.pi-hidden{
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce){
  .pi-scroll-hint{ animation: none; }
  .pi-scroll-hint .pi-scroll-icon{ animation: none; }
}


/* =============================
   WOW LAYER: HUD + MAPA + TOAST
   ============================= */

.hud{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* no molesta al gameplay */
}

.hud-row{ display:flex; gap:10px; align-items:center; }

.hud-chip{
  pointer-events: none;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  white-space: nowrap;
}

.hud-btn{
  pointer-events: auto; /* este sí */
  border: 0;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.hud-btn:hover{ background: rgba(255,255,255,.18); }

/* Botón icono (sonido) */
.hud-icon-btn{
  pointer-events: auto;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.hud-icon-btn:hover{ background: rgba(255,255,255,.16); }
.hud-sound-ico{ font-size: 16px; line-height: 1; }

/* MAPA: que sobresalga más (pack épico) */
#hud-map-btn{
  position: relative;
  background: linear-gradient(135deg, rgba(140,120,255,0.26), rgba(255,255,255,0.10));
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  border: 1px solid rgba(140,120,255,0.70);
  box-shadow: 0 0 18px rgba(140,120,255,0.18);
  animation: hudPulse 3.6s ease-in-out infinite;
}
#hud-map-btn::after{
  content: 'M';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 11px;
  color: rgba(255,255,255,.95);
  background: rgba(140,120,255,0.38);
  border: 1px solid rgba(140,120,255,0.65);
  box-shadow: 0 0 16px rgba(140,120,255,0.30);
}
@keyframes hudPulse{
  0%,100%{ transform: translateY(0) scale(1); box-shadow: 0 0 18px rgba(140,120,255,0.18); }
  50%{ transform: translateY(-1px) scale(1.02); box-shadow: 0 0 26px rgba(140,120,255,0.32); }
}

.hud-sub{ width: 260px; pointer-events:none; }
.hud-bar{
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.20);
}
.hud-bar-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
}

.hud-toast{
  pointer-events: none;
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}

.hud-toast.show{
  opacity: 1;
  transform: translateY(0);
}

.map-overlay{
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.map-overlay.pi-hidden{ display:none; }

.map-card{
  width: min(720px, calc(100vw - 28px));
  border-radius: 24px;
  padding: 18px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
}

.map-header{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 12px; }
.map-title{ color:#fff; font-family:'Open Sans', sans-serif; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.map-close{
  border:0;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(0,0,0,.40);
  color:#fff;
  cursor:pointer;
}

.map-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

.map-node{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color:#fff;
  padding: 14px 12px;
  border-radius: 16px;
  font-family:'Open Sans', sans-serif;
  font-weight: 800;
  letter-spacing:.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.map-node:hover{ background: rgba(0,0,0,.35); }

/* Estados del mapa (AAA polish) */
.map-node{ position: relative; }
.map-node::before{
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.map-node.visited::before{
  background: rgba(140,120,255,.55);
  box-shadow: 0 0 0 1px rgba(140,120,255,.60), 0 0 16px rgba(140,120,255,.25);
}
.map-node.current{
  border-color: rgba(140,120,255,.70);
  background: rgba(140,120,255,.18);
  box-shadow: 0 0 0 1px rgba(140,120,255,.30), 0 0 26px rgba(140,120,255,.22);
}
.map-node.current::before{
  background: rgba(255,255,255,.90);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 18px rgba(255,255,255,.35);
}
.map-node{ padding-left: 26px; }

.map-hint{
  margin-top: 12px;
  color: rgba(255,255,255,.85);
  font-family:'Open Sans', sans-serif;
  font-size: 12px;
}

body.no-scroll{ overflow: hidden; }

@media (max-width: 520px){
  .hud-sub{ width: 200px; }
  .map-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* invisible hit slop without changing layout */


@media (pointer: coarse){


}

/* Feedback visual sin mover la flecha */


@media (pointer: coarse) {




}
/* === Canonical arrow styles (desktop) === */
.pi-arrow-button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 50;
}
.pi-arrow-button.pi-left  { left: 14px; }
.pi-arrow-button.pi-right { right: 14px; }
.arrow-icon{ width: auto; height: 58px; display: block; pointer-events: none; }
.pi-arrow-button:hover, .pi-arrow-button:active, .pi-arrow-button:focus { transform: translateY(-50%); outline: none; }
/* replaced by gradient-border variant */
/* Variants */
/* Mobile comfortable sizing */
@media (pointer: coarse){
  }


/* === Font family for key contact buttons === */
/* WhatsApp variant using Option A variables */
/* Optional: icon alignment */
/* === Contact layout: desktop horizontal === */
.contact-grid{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.contact-item{ list-style: none; }
/* === Gradient-border hover reveal buttons === */
.contact-link{
  --bg: #6d5ef9;      /* fallback brand */
  --bg2: #8a7bff;
  --ring: rgba(99,102,241,.35);
  --inner: rgba(5,6,45,1);     /* inner background (dark) */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 3px;                /* gradient border thickness */
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(144deg, var(--bg), var(--bg2) 50%, color-mix(in oklab, var(--bg2), white 10%));
  box-shadow: rgba(0,0,0,0.22) 0 12px 24px -6px;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  font-weight: 700;
}

.contact-link .btn-inner{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 12px 18px;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  background: var(--inner);
  transition: background .3s ease, filter .3s ease;
}

/* Hover/active/focus */
.contact-link:hover .btn-inner{ background: none; }
.contact-link:active{ transform: scale(.98); }
.contact-link:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--ring), rgba(0,0,0,0.22) 0 12px 24px -6px; }

/* Brand variants */
.contact-link.pi-portfolio{ --bg:#6d5ef9; --bg2:#8a7bff; --ring: rgba(109,94,249,.35); }
.contact-link.pi-linkedin{ --bg:#0a66c2; --bg2:#0e7de9; --ring: rgba(14,125,233,.35); }
.contact-link.pi-whatsapp{ --bg:#25D366; --bg2:#1ebe5d; --ring: rgba(37,211,102,.32); }

/* Icons alignment */
.contact-link svg{ flex: 0 0 auto; }

/* Mobile comfortable sizing preserved */
@media (pointer: coarse){
  .contact-link{ border-radius: 14px; }
  .contact-link .btn-inner{ padding: 14px 20px; border-radius: 12px; }
}
/* === Enforce Open Sans on key contact buttons === */
.contact-link.pi-portfolio,
.contact-link.pi-linkedin,
.contact-link.pi-whatsapp {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  text-transform: uppercase;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.contact-link .btn-inner { font: inherit; }

/* ==============================
   CONTACT END SCREEN (PORTALS)
   ============================== */
.pi-contact-end{
  position: absolute;
  /* Un poco mas arriba para que no lo pise el personaje */
  top: 35%;
  left: 50vw;
  transform: translate(-50%, -50%);
  z-index: 160;
  width: min(860px, 92vw);
  padding: 22px 22px 18px;
  border-radius: 24px;
  text-align: center;
  background: rgba(10, 12, 30, 0.42);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.pi-contact-kicker{
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 800;
  letter-spacing: .22em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.pi-contact-title{
  margin: 10px 0 6px;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(22px, 3vw, 34px);
  color: #fff;
}

.pi-contact-subtitle{
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,0.78);
}

.pi-contact-portals{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pi-contact-portal{
  --bg: #6d5ef9;
  --bg2: #8a7bff;
  --ring: rgba(109,94,249,.35);
  --inner: rgba(5, 6, 45, 0.92);
  position: relative;
  display: block;
  padding: 3px;
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(144deg, var(--bg), var(--bg2) 55%, color-mix(in oklab, var(--bg2), white 12%));
  box-shadow: rgba(0,0,0,0.30) 0 16px 34px -10px;
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
  will-change: transform;
}

.pi-contact-portal .pi-portal-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 104px;
  padding: 18px 16px;
  border-radius: 15px;
  background: var(--inner);
  transition: background .28s ease;
}

.pi-contact-portal .pi-portal-top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pi-contact-portal .pi-portal-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.pi-contact-portal .pi-portal-name{
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
}

.pi-contact-portal .pi-portal-desc{
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 600;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
}

.pi-contact-portal:hover{
  transform: scale(1.02);
  filter: saturate(1.04);
  box-shadow: rgba(0,0,0,0.40) 0 24px 44px -14px;
}
.pi-contact-portal:hover .pi-portal-inner{ background: transparent; }

.pi-contact-portal:active{ transform: scale(0.99); }
.pi-contact-portal:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), rgba(0,0,0,0.40) 0 24px 44px -14px;
}

.pi-contact-portal.pi-portfolio{ --bg:#6d5ef9; --bg2:#8a7bff; --ring: rgba(109,94,249,.35); }
.pi-contact-portal.pi-linkedin{ --bg:#2b77d3; --bg2:#0e7de9; --ring: rgba(14,125,233,.35); }
.pi-contact-portal.pi-whatsapp{ --bg:#1fcf72; --bg2:#16b966; --ring: rgba(31,207,114,.30); }

.pi-contact-footer{
  margin: 14px 0 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

@media (max-width: 760px){
  .pi-contact-portals{ grid-template-columns: 1fr; }
  .pi-contact-portal .pi-portal-inner{ min-height: 92px; }
}


/* === Contact area cleanup: hide card chrome and lift buttons === */
.contact-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* Desktop: lift a bit more */
@media (min-width: 769px){
  .contact-card{ margin-top: -48px; }
}

/* Mobile: lift slightly */
@media (max-width: 768px){
  .contact-card{ margin-top: -28px; }
}

/* =============================
 * PACK ÉPICO: cinemática + FX
 * ============================= */

.cinematic-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(5,8,18,0.55), rgba(0,0,0,0.78));
  z-index: 9998;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cinematic-overlay.hide{ animation: cinematicOut 0.45s ease forwards; }
.cinematic-card{
  width: min(560px, calc(100vw - 48px));
  padding: 26px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,14,30,0.55);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  text-align: center;
}
.cinematic-kicker{
  font-family:'Open Sans', sans-serif;
  letter-spacing: .24em;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 10px;
}
.cinematic-title{
  font-family:'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 38px;
  line-height: 1.1;
  margin: 0;
  color: rgba(255,255,255,0.98);
}
.cinematic-sub{
  margin-top: 10px;
  font-family:'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.78);
}
@keyframes cinematicOut{
  to{ opacity: 0; transform: translateY(10px) scale(0.98); }
}

/* Screen shake (no toca transforms del mundo) */
body.epic-shake .hud,
body.epic-shake .pi-camara,
body.epic-shake .pi-parallax-container{
  animation: epicShake 0.38s ease-out;
}
@keyframes epicShake{
  0%{ transform: translate3d(0,0,0); }
  20%{ transform: translate3d(-2px, 1px,0); }
  40%{ transform: translate3d(2px, -1px,0); }
  60%{ transform: translate3d(-2px, -1px,0); }
  80%{ transform: translate3d(2px, 1px,0); }
  100%{ transform: translate3d(0,0,0); }
}

/* POWER UP floating text */
.fx-powerup{
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 9999;
  font-family:'Open Sans', sans-serif;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,0.96);
  background: rgba(140,120,255,0.18);
  border: 1px solid rgba(140,120,255,0.55);
  box-shadow: 0 0 26px rgba(140,120,255,0.25);
  animation: powerFloat 0.9s ease-out forwards;
  pointer-events: none;
}
@keyframes powerFloat{
  0%{ opacity: 0; transform: translate(-50%, -40%) scale(0.92); }
  20%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-50%, -120%) scale(1.02); }
}

/* Shockwave */
.fx-shockwave{
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow: 0 0 20px rgba(140,120,255,0.22);
  transform: translate(-50%, -50%) scale(0.2);
  z-index: 9999;
  pointer-events: none;
  animation: shockwave 0.85s ease-out forwards;
}
@keyframes shockwave{
  0%{ opacity: 0.75; transform: translate(-50%, -50%) scale(0.25); }
  70%{ opacity: 0.35; }
  100%{ opacity: 0; transform: translate(-50%, -50%) scale(6); }
}

/* Jump (solo eje Y, no toca centrado X) */
.pi-avatar.epic-jump{
  animation: epicJump 0.95s cubic-bezier(.2,.9,.18,1);
}
@keyframes epicJump{
  0%{ transform: translateY(0); }
  30%{ transform: translateY(-95px); }
  55%{ transform: translateY(-65px); }
  80%{ transform: translateY(0); }
  90%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); }
}


/* --- HUD dots (visited / current) --- */
.hud-dots{
  display:flex;
  gap:6px;
  margin-top:8px;
  padding-left:2px;
  pointer-events:none;
}
.hud-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transform: scale(1);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hud-dot.visited{
  background: rgba(140,120,255,0.34);
  border-color: rgba(140,120,255,0.55);
}
.hud-dot.current{
  background: rgba(255,255,255,0.90);
  border-color: rgba(255,255,255,0.55);
  transform: scale(1.25);
  box-shadow: 0 0 14px rgba(140,120,255,0.28);
}

/* --- Interactuables: glow al estar cerca --- */
.interactable{
  transition: transform .18s ease, filter .18s ease;
}
.interactable--near{
  filter: drop-shadow(0 0 14px rgba(140,120,255,0.55)) drop-shadow(0 0 30px rgba(140,120,255,0.18));
  transform: translateY(-1px) scale(1.02);
  animation: interactPulse 1.25s ease-in-out infinite;
}
@keyframes interactPulse{
  0%,100%{ transform: translateY(-1px) scale(1.02); }
  50%{ transform: translateY(-2px) scale(1.035); }
}

/* --- HOBBIES: flechas sin movimiento + look mas "game" (SVG)
   OJO: se scopea a .pi-portfolio-screen para no romper otras .pi-arrow-button del proyecto.
--- */
.pi-portfolio-screen .pi-arrow-button{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.pi-portfolio-screen .pi-arrow-button .pi-arrow-svg{ display:flex; }
.pi-portfolio-screen .pi-arrow-button .pi-arrow-svg svg{ width: 26px; height: 26px; }
.pi-portfolio-screen .pi-arrow-button:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.32);
  box-shadow: 0 0 0 1px rgba(140,120,255,0.18) inset, 0 0 18px rgba(140,120,255,0.18);
}

/* Si esta cerca el personaje: brillo, pero NUNCA mover/animar con transform */
.pi-portfolio-screen .pi-arrow-button.interactable--near{
  animation: arrowGlow 1.2s ease-in-out infinite;
}
.pi-portfolio-screen .pi-arrow-button.interactable--near .pi-arrow-svg{
  animation: none;
}

@keyframes arrowGlow{
  0%, 100%{
    box-shadow: 0 0 0 1px rgba(140,120,255,0.18) inset,
                0 0 16px rgba(140,120,255,0.20);
  }
  50%{
    box-shadow: 0 0 0 1px rgba(140,120,255,0.22) inset,
                0 0 22px rgba(140,120,255,0.30);
  }
}


/* ===========================================
   FIX: Portfolio arrows never "jump" or move
   - .interactable--near adds transform + animation globally.
   - For arrows inside .pi-portfolio-screen we keep the centering
     transform (translateY(-50%)) and disable transform/anim shifts.
=========================================== */
.pi-portfolio-screen .pi-arrow-button{
  transition: none !important; /* avoid micro-twitch when classes toggle */
  will-change: auto;
}

.pi-portfolio-screen .pi-arrow-button.interactable--near{
  transform: translateY(-50%) !important; /* lock position */
  animation: arrowGlow 1.2s ease-in-out infinite !important; /* keep glow only */
}

.pi-portfolio-screen .pi-arrow-button.interactable--near,
.pi-portfolio-screen .pi-arrow-button.interactable--near *{
  transform: none; /* prevent child transforms from shifting layout */
}

.pi-portfolio-screen .pi-arrow-button.interactable--near{
  /* re-apply lock after child reset */
  transform: translateY(-50%) !important;
}

/* Disable the generic interactPulse on arrows (it animates transform) */
.pi-portfolio-screen .pi-arrow-button.interactable--near{
  animation-name: arrowGlow !important;
}



/* Animacion al cambiar de hobby (imagen principal) */
#pi-portfolioImage{ will-change: transform, opacity, filter; }
#pi-portfolioImage.hobby-in-right{ animation: hobbyInRight .38s cubic-bezier(.2,.9,.2,1); }
#pi-portfolioImage.hobby-in-left{ animation: hobbyInLeft .38s cubic-bezier(.2,.9,.2,1); }
@keyframes hobbyInRight{
  from{ opacity: 0; transform: translateX(16px) scale(.985); filter: blur(1px); }
  to{ opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes hobbyInLeft{
  from{ opacity: 0; transform: translateX(-16px) scale(.985); filter: blur(1px); }
  to{ opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce){
  #pi-portfolioImage.hobby-in-right,
  #pi-portfolioImage.hobby-in-left,
  .pi-portfolio-screen .pi-arrow-button.interactable--near{ animation: none !important; }
}


/* =========================
   INEFABLE SCENE
   ========================= */
.inefable-scene{position:relative;max-width:1100px;margin:0 auto;padding:28px 24px 18px;}
.inefable-header{margin-bottom:16px;text-align:center;}
.inefable-kicker{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;opacity:0.8;margin:0;}
.inefable-title{font-size:28px;margin:6px 0 6px;}
.inefable-subtitle{margin:0;opacity:0.85;font-size:14px;}
.inefable-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;justify-items:stretch;margin:18px auto 10px;}
.inefable-card{position:relative;border:2px solid rgba(255,255,255,0.22);background:rgba(0,0,0,0.22);backdrop-filter:blur(6px);border-radius:18px;padding:14px 10px 12px;cursor:pointer;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transition:filter .2s ease, box-shadow .2s ease, border-color .2s ease;}
.inefable-card img{width:min(180px,90%);height:auto;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,0.35));animation:inefableFloat 3.8s ease-in-out infinite;}
.inefable-card:nth-child(2) img{animation-duration:4.2s;animation-delay:-.8s;}
.inefable-card:nth-child(3) img{animation-duration:3.6s;animation-delay:-1.4s;}
.inefable-card:nth-child(4) img{animation-duration:4.0s;animation-delay:-.2s;}
@keyframes inefableFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.inefable-name{margin-top:8px;font-size:13px;font-weight:700;text-align:center;}
.inefable-hint{margin-top:2px;font-size:12px;opacity:0.8;}
.inefable-card.interactable--near{filter:drop-shadow(0 0 12px rgba(120,255,210,0.45));box-shadow:0 0 0 3px rgba(120,255,210,0.25) inset;border-color:rgba(120,255,210,0.65);}
.inefable-cta{display:inline-block;margin:10px auto 0;padding:10px 14px;border-radius:999px;border:2px solid rgba(255,255,255,0.25);background:rgba(0,0,0,0.25);text-decoration:none;color:inherit;font-weight:700;}

/* Modal */
.inefable-modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:30;}
.inefable-modal.open{display:flex;}
.inefable-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.62);}
.inefable-modal-card{position:relative;width:min(820px,92vw);max-height:78vh;overflow:auto;border-radius:22px;border:2px solid rgba(255,255,255,0.24);background:rgba(10,10,12,0.72);backdrop-filter:blur(10px);padding:18px 18px 16px;box-shadow:0 18px 60px rgba(0,0,0,0.55);}
.pi-inefable-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:12px;border:2px solid rgba(255,255,255,0.22);background:rgba(0,0,0,0.28);color:inherit;font-size:22px;line-height:1;cursor:pointer;}
.pi-inefable-modal-kicker{margin:0;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;opacity:0.85;}
.pi-inefable-modal-title{margin:4px 0 6px;font-size:22px;}
.pi-inefable-modal-desc{margin:0 0 10px;opacity:0.9;font-size:14px;}
.inefable-modal-body{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start;margin-top:10px;}
.inefable-hero{width:100%;border-radius:18px;border:2px solid rgba(255,255,255,0.18);background:rgba(0,0,0,0.22);padding:10px;display:flex;align-items:center;justify-content:center;}
.inefable-hero img{width:min(320px,100%);height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,0.4));}
.inefable-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px;}
.inefable-chip{border-radius:999px;border:2px solid rgba(255,255,255,0.2);background:rgba(0,0,0,0.25);padding:8px 10px;font-weight:700;font-size:12px;cursor:pointer;color:inherit;}
.inefable-chip.active{border-color:rgba(120,255,210,0.7);box-shadow:0 0 0 3px rgba(120,255,210,0.18) inset;}
.inefable-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.inefable-action{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:14px;border:2px solid rgba(255,255,255,0.22);background:rgba(0,0,0,0.25);text-decoration:none;color:inherit;font-weight:800;font-size:13px;cursor:pointer;}

/* Hobbies arrows: no movement on proximity */
.pi-portfolio-screen .pi-arrow-button.pi-no-shift.interactable--near{transform: translateY(-50%) !important;}

@media (max-width: 900px){
  .inefable-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inefable-modal-body{grid-template-columns:1fr;}
}


html.modal-open, body.modal-open{overflow:hidden; touch-action:none;}

/* =============================
   INEFABLE CONCEPT - Modern UX panel
   ============================= */
.pi-inefable-level{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  font-family:Helvetica,Arial,sans-serif;
}

/* Separadores tipo "EDUCATION" alrededor de INEFABLE (placeholders) */
/*
  INEFABLE separators (desktop only)
  NOTE: Each .pi-level is 600vw wide. To make the divider sign look like the other
  big section titles (Education, etc.) we pin the sign inside the *first* 100vw
  viewport of the level, so it appears centered when the camera enters.
*/
.pi-inefable-sign{position:relative;}
.pi-inefable-sign .pi-section-sign{
  position:absolute;
  left:50vw; /* center in the first viewport */
  top:22vh;
  transform:translateX(-50%);
  /* Match the size of other section arrows/signs (avoid oversized separators) */
  width:auto;
  max-width:360px;
  height:auto;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
  opacity:.98;
  pointer-events:none;
}

/* =========================================================
   PORFOLIO (HUB) - 3 módulos horizontales dentro del level
   - Hace que Inefable + Web + Automatización se recorran
     como "sub-niveles" al avanzar con el scroll.
========================================================= */
.pi-level.pi-portfolio-hub{
  width:300vw; /* 3 pantallas: Inefable / Web / Automatización */
}

.pi-portfolio-track{
  display:flex;
  height:100%;
  align-items:center;
}

.pi-portfolio-module{
  width:100vw;
  flex-shrink:0;
  box-sizing:border-box;
  padding:clamp(16px,3vw,48px);
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Evita que el contenido toque los bordes en pantallas pequeñas */
@media (max-width: 980px){
  .pi-portfolio-module{padding:24px 16px;}
}

.pi-inefable-ui{position:relative;width:min(1100px,92vw);margin:0 auto 48px;padding:22px 22px 18px;display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start;}
.pi-inefable-project-card,.pi-inefable-tabs-card{
  position:relative;
  border-radius:28px;
  background:rgba(10, 15, 35, 0.85);
  backdrop-filter:blur(8px);
  border:2px solid rgba(140, 120, 255, 0.60);
  box-shadow:
    0 0 35px rgba(140, 120, 255, 0.30),
    inset 0 0 15px rgba(140, 120, 255, 0.12);
  transform:translateZ(0);
  isolation:isolate;
}
.pi-inefable-project-card{padding:18px 18px 16px;}
.pi-inefable-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.pi-inefable-badge{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.18);}
.pi-inefable-badge.pi-ghost{opacity:.8;}
.pi-inefable-h1{margin:6px 0 8px;font-size:26px;letter-spacing:.02em;}
.pi-inefable-lead{margin:0 0 14px;font-size:14px;line-height:1.35;opacity:.9;}
.pi-inefable-buttons{display:flex;gap:10px;flex-wrap:wrap;}
.pi-inefable-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);color:inherit;text-decoration:none;font-weight:800;font-size:13px;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.pi-inefable-btn:hover{transform:translateY(-1px);border-color:rgba(120,255,210,.35);box-shadow:0 0 0 3px rgba(120,255,210,.10) inset;}
.pi-inefable-btn.pi-primary{background:linear-gradient(180deg, rgba(120,255,210,.18), rgba(0,0,0,.20));border-color:rgba(120,255,210,.40);}

.pi-inefable-tabs-card{padding:14px 14px 12px;}
.pi-inefable-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:2px 2px 10px;border-bottom:1px solid rgba(255,255,255,.10);}
.pi-inefable-tab{border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);color:inherit;border-radius:999px;padding:8px 10px;font-weight:800;font-size:12px;cursor:pointer;transition:filter .15s ease, box-shadow .15s ease, border-color .15s ease;}
.pi-inefable-tab.active,[role="tab"][aria-selected="true"].pi-inefable-tab{border-color:rgba(120,255,210,.50);box-shadow:0 0 0 3px rgba(120,255,210,.12) inset;filter:drop-shadow(0 0 10px rgba(120,255,210,.18));}

.pi-inefable-panel{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:center;padding-top:12px;}
.pi-inefable-visual{border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.16);border-radius:18px;padding:12px;display:flex;align-items:center;justify-content:center;min-height:320px;}
.pi-inefable-visual img{width:min(320px,100%);height:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));animation:inefableFloat 4.0s ease-in-out infinite;opacity:1;transform:translateZ(0);}
.inefable-img-in{animation:inefableFloat 4.0s ease-in-out infinite, inefableIn .22s ease-out 1;}
@keyframes inefableIn{from{opacity:0;transform:scale(.98);}to{opacity:1;transform:scale(1);}}

/* Portfolio extra modules: website screenshots look better without floating */
.pi-inefable-ui[aria-label="Desarrollo web"] .pi-inefable-visual img{
  animation:none !important;
  border-radius:14px;
}

.pi-inefable-copy{padding:2px 6px 2px;}
.pi-inefable-h2{margin:0 0 6px;font-size:18px;}
.pi-inefable-story{margin:0 0 12px;opacity:.92;line-height:1.4;font-size:14px;}

.pi-inefable-audio{display:flex;align-items:center;gap:10px;margin-top:4px;}
.pi-inefable-audio-btn{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);color:inherit;font-weight:900;cursor:pointer;transition:transform .15s ease,border-color .15s ease;}
.pi-inefable-audio-btn:hover{transform:translateY(-1px);border-color:rgba(120,255,210,.35);}
.pi-inefable-audio-bar{flex:1;min-width:200px;}
.pi-inefable-range{width:100%;accent-color:rgba(120,255,210,.9);}
.pi-inefable-audio-meta{display:flex;gap:8px;justify-content:flex-end;font-size:12px;opacity:.75;margin-top:4px;}
.pi-inefable-audio-meta .pi-dot{opacity:.6;}
.pi-inefable-links{margin-top:10px;}
.pi-inefable-link{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:800;border-bottom:1px dashed rgba(255,255,255,.25);padding-bottom:2px;opacity:.9;}

/* Info modal */
.pi-inefable-info-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:999;}
.pi-inefable-info-modal.open{display:flex;}
.pi-inefable-info-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);}
.pi-inefable-info-card{position:relative;width:min(720px,92vw);border-radius:22px;border:1px solid rgba(255,255,255,.18);background:rgba(10,12,18,.72);backdrop-filter:blur(12px);padding:18px 18px 16px;box-shadow:0 18px 60px rgba(0,0,0,.55);}
.pi-inefable-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.24);color:inherit;font-size:22px;cursor:pointer;}
.pi-inefable-modal-kicker{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;}
.pi-inefable-modal-title{margin:6px 0 8px;font-size:20px;}
.pi-inefable-modal-desc{margin:0 0 10px;opacity:.92;line-height:1.45;}
.pi-inefable-bullets{margin:0;padding-left:18px;opacity:.9;}

/* modal open lock */
.modal-open{overflow:hidden !important;}

@media (max-width:980px){
  .pi-inefable-ui{grid-template-columns:1fr;gap:14px;margin-bottom:36px;}
  .pi-inefable-panel{grid-template-columns:1fr;}
  .pi-inefable-visual{min-height:260px;}
}

/* =============================
   INEFABLE CONCEPT - UX polish (contrast + positioning)
   ============================= */
.pi-inefable-level{align-items:center !important;}
.pi-inefable-ui{
  /*
    El level de "Porfolio" contiene varios módulos. Ajustamos el espaciado para que
    puedan apilarse sin dejar huecos gigantes.
  */
  margin:0 auto 34px !important;
  transform:translateY(-28px);
  color:rgba(255,255,255,.96);
}
/* El último módulo deja más aire antes del siguiente separador (Contact) */
.pi-inefable-level .pi-inefable-ui:last-child{margin-bottom:140px !important;}

.pi-inefable-project-card,.pi-inefable-tabs-card{
  position:relative;
  border-radius:28px !important;
  background:rgba(10, 15, 35, 0.85) !important;
  backdrop-filter:blur(8px) !important;
  border:2px solid rgba(140, 120, 255, 0.60) !important;
  box-shadow:
    0 0 35px rgba(140, 120, 255, 0.30),
    inset 0 0 15px rgba(140, 120, 255, 0.12) !important;
  transform:translateZ(0);
  isolation:isolate;
}

.pi-inefable-project-card::before,.pi-inefable-tabs-card::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:34px;
  border:2px solid rgba(140, 120, 255, 0.35);
  opacity:0.55;
  pointer-events:none;
}

.pi-inefable-project-card:hover,.pi-inefable-tabs-card:hover{
  box-shadow:
    0 0 45px rgba(140, 120, 255, 0.45),
    inset 0 0 18px rgba(140, 120, 255, 0.18) !important;
}


.pi-inefable-badge{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

.pi-inefable-h1{color:rgba(255,255,255,.98);}
.pi-inefable-lead{color:rgba(255,255,255,.88) !important;}

.pi-inefable-btn{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
.pi-inefable-btn.pi-primary{
  background:linear-gradient(180deg, rgba(120,255,210,.22), rgba(255,255,255,.06)) !important;
  border-color:rgba(120,255,210,.55) !important;
}

.pi-inefable-tabs{border-bottom:1px solid rgba(255,255,255,.14) !important;}
.pi-inefable-tab{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
.pi-inefable-tab.active,[role="tab"][aria-selected="true"].pi-inefable-tab{
  background:rgba(120,255,210,.12) !important;
  border-color:rgba(120,255,210,.70) !important;
  box-shadow:0 0 0 3px rgba(120,255,210,.16) inset !important;
}

.pi-inefable-visual{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

.pi-inefable-story{color:rgba(255,255,255,.88) !important;}

.pi-inefable-audio-btn{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

.pi-inefable-link{border-bottom:1px dashed rgba(255,255,255,.35) !important;}

.pi-inefable-info-card{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

@media (max-width:980px){
  .pi-inefable-ui{margin:0 auto 26px !important; transform:translateY(-18px);}
  .pi-inefable-level .pi-inefable-ui:last-child{margin-bottom:110px !important;}
}
/* INEFABLE extra: buttons/badges contrast */
.pi-inefable-badge{background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.18) !important;}
.pi-inefable-btn{background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.20) !important;}
.pi-inefable-btn.pi-primary{background:linear-gradient(180deg, rgba(120,255,210,.22), rgba(255,255,255,.06)) !important; border-color:rgba(120,255,210,.55) !important;}


/* Next level panel (code-based, matches voltage button palette) */
.pi-next-level-panel{
  position: relative;
  box-sizing: border-box;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: radial-gradient(ellipse at top, rgba(26, 31, 69, 0.92) 0%, rgba(13, 17, 39, 0.92) 58%, rgba(7, 9, 15, 0.92) 100%);
  border: 2px solid rgba(122, 92, 255, 0.78);
  box-shadow:
    0 0 22px rgba(122, 92, 255, 0.45),
    0 0 60px rgba(122, 92, 255, 0.22),
    inset 0 0 18px rgba(122, 92, 255, 0.16);
  color: rgba(255,255,255,0.95);
  text-align: center;
  /* animación movida a .pi-next-level para no sobrescribir la caída */
letter-spacing: 0.10em;
  user-select: none;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  text-transform: uppercase;
}

.pi-nl-title{
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.10em;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(89,120,243,0.35);
}

.pi-nl-sub{
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0.95;
  text-shadow: 0 0 10px rgba(89,120,243,0.25);
}

.pi-nl-strong{
  display: inline-block;
  margin-top: 6px;
}

.pi-next-level-panel::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  pointer-events: none;
  box-shadow: 0 0 34px rgba(122, 92, 255, 0.22);
}

.pi-next-level-panel::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 1px solid rgba(122, 92, 255, 0.30);
  pointer-events: none;
  opacity: 0.9;
}


@keyframes pi-panel-float{
  0%,100%{ transform: translate3d(-50%, 0, 0); }
  50%{ transform: translate3d(-50%, -6px, 0); }
}

@keyframes pi-panel-pulse{
  0%,100%{
    box-shadow:
      0 0 22px rgba(89, 120, 243, 0.30),
      inset 0 0 18px rgba(89, 120, 243, 0.16);
  }
  50%{
    box-shadow:
      0 0 30px rgba(107, 254, 255, 0.22),
      inset 0 0 22px rgba(89, 120, 243, 0.20);
  }
}