/* ═══════════════════════════════════════════════
   PANEL / SLIDE APARTE (entra desde la derecha)
   ═══════════════════════════════════════════════ */
.portafolio.pf-panel{position:fixed;inset:0;z-index:90;padding:0 0 60px;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;transition:transform .7s cubic-bezier(.77,0,.18,1),visibility 0s .7s;scrollbar-width:thin;scrollbar-color:rgba(110,246,243,.3) transparent}
.portafolio.pf-panel.abierto{transform:none;visibility:visible;transition:transform .7s cubic-bezier(.77,0,.18,1)}
body.pf-panel-abierto{overflow:hidden}
.pf-panel .env{padding-top:clamp(30px,5vw,60px)}

/* barra superior del panel */
.pf-barra{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:14px;height:68px;padding:0 24px;
  background:rgba(10,17,40,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--borde)}
.pf-volver{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--borde);color:#fff;font-family:var(--tipo);font-size:.86rem;font-weight:500;cursor:pointer;transition:background .3s}
.pf-volver svg{transition:transform .3s}
.pf-volver:hover{background:rgba(110,246,243,.14)}
.pf-volver:hover svg{transform:translateX(-4px)}
.pf-barra-titulo{font-weight:800;letter-spacing:-.02em;font-size:1.05rem;background:linear-gradient(100deg,var(--aqua),var(--morado));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pf-btn-panel{width:42px;height:42px;border-radius:50%;border:1px solid var(--borde);background:rgba(255,255,255,.05);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s}
.pf-btn-panel:hover{background:rgba(110,246,243,.16);transform:rotate(90deg) scale(1.08)}
.pf-scroll{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--aqua),var(--azul),var(--morado));box-shadow:0 0 12px rgba(110,246,243,.6)}

/* botón en el menú (derecha) */
.barra .pf-abrir{position:relative;overflow:hidden;gap:8px}
.barra .pf-abrir::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);background-size:250% 100%;animation:pfBrilloBoton 3s linear infinite}
.barra .pf-abrir:hover{background:linear-gradient(120deg,rgba(58,123,213,.3),rgba(142,84,233,.3));color:#fff}

/* lengüeta fija en el borde derecho */
.pf-lengueta{position:fixed;right:0;top:50%;z-index:65;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 11px;
  border-radius:16px 0 0 16px;background:linear-gradient(180deg,var(--azul),var(--morado));color:#fff;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:-8px 10px 34px rgba(58,123,213,.45);transition:padding .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;animation:pfLengueta 3.4s ease-in-out infinite}
.pf-lengueta span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg)}
.pf-lengueta svg{transition:transform .35s}
.pf-lengueta:hover{padding-right:20px;box-shadow:-12px 12px 44px rgba(142,84,233,.6);animation-play-state:paused}
.pf-lengueta:hover svg{transform:translateX(-4px)}
@keyframes pfLengueta{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 6px))}}
body.pf-panel-abierto .pf-lengueta{display:none}
@media(max-width:640px){.pf-lengueta{padding:14px 8px;font-size:.7rem}.pf-volver span{display:none}.pf-volver{padding:9px 12px}}

/* cursor "Ver" */
.pf-cursor{position:fixed;left:0;top:0;z-index:8;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;pointer-events:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(120deg,var(--aqua),var(--menta));color:#062B25;font-weight:700;font-size:.82rem;letter-spacing:.06em;
  transform:translate(var(--cx,-200px),var(--cy,-200px)) scale(0);opacity:0;transition:opacity .3s;will-change:transform}
.pf-cursor.activo{transform:translate(var(--cx),var(--cy)) scale(1);opacity:.95}
@media(hover:none){.pf-cursor{display:none}}

/* destacados: carrusel arrastrable */
.pf-dest{margin:0 0 54px}
.pf-dest-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.pf-dest-cab h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.pf-dest-cab h3 small{font-size:.74rem;font-weight:400;color:var(--muted);margin-left:10px;letter-spacing:.04em}
.pf-dest-flechas{display:flex;gap:10px}
.pf-flecha{width:46px;height:46px;border-radius:50%;border:1px solid var(--borde);background:rgba(255,255,255,.05);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s,opacity .3s}
.pf-flecha:hover{background:linear-gradient(120deg,var(--azul),var(--morado));transform:scale(1.1)}
.pf-flecha:disabled{opacity:.3;pointer-events:none}
.pf-dest-pista{display:flex;gap:18px;overflow-x:auto;padding:8px 4px 20px;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.pf-dest-pista::-webkit-scrollbar{display:none}
.pf-dest-pista.arrastrando{cursor:grabbing;scroll-snap-type:none;user-select:none}
.pf-dest-pista.arrastrando *{pointer-events:none}
.pf-dc{position:relative;flex:0 0 clamp(250px,32vw,400px);aspect-ratio:4/5;scroll-snap-align:start;border:0;padding:0;border-radius:22px;overflow:hidden;background:var(--card);cursor:inherit;
  box-shadow:0 14px 40px rgba(0,0,0,.4);transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,opacity .5s;opacity:.7;transform:scale(.95)}
.pf-dc.visible{opacity:1;transform:none}
.pf-dc:hover{box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(110,246,243,.4),0 0 50px rgba(58,123,213,.3)}
.pf-dc img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1);-webkit-user-drag:none}
.pf-dc:hover img{transform:scale(1.08)}
.pf-dc::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,11,28,.9),transparent 55%)}
.pf-dc-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;text-align:left}
.pf-dc-txt .pf-cat{display:block;font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua);margin-bottom:6px}
.pf-dc-txt b{display:block;font-size:1.1rem;font-weight:700;line-height:1.2;color:#fff}
.pf-dc-txt em{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:3px}
.pf-dc-num{position:absolute;top:16px;left:18px;z-index:2;font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}
.pf-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.pf-dots button{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.2);cursor:pointer;transition:width .4s cubic-bezier(.34,1.3,.5,1),background .3s}
.pf-dots button.activo{width:30px;background:linear-gradient(90deg,var(--aqua),var(--morado))}

/* corazón de favoritos en las tarjetas */
.pf-item{position:relative}
.pf-fav{position:absolute;top:12px;right:12px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(6,11,28,.55);backdrop-filter:blur(8px);color:#fff;opacity:0;transform:scale(.8);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s,background .3s}
.pf-item:hover .pf-fav,.pf-fav.on,.pf-fav:focus-visible{opacity:1;transform:none}
.pf-fav:hover{transform:scale(1.15)!important;background:rgba(255,80,130,.3)}
.pf-fav.on{background:rgba(255,80,130,.9)}
.pf-fav.on svg{fill:currentColor;animation:pfLatido .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pfLatido{0%{transform:scale(.4)}60%{transform:scale(1.4)}100%{transform:scale(1)}}
@media(hover:none){.pf-fav{opacity:1;transform:none;width:34px;height:34px;top:8px;right:8px}}
.pf-item .pf-ver{right:60px}
.pf-vacio{grid-column:1/-1;grid-row:span 12;text-align:center;color:var(--muted);padding:60px 10px}

/* acciones en el visor */
.pf-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pf-accion{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--borde);background:rgba(255,255,255,.06);color:#fff;font-family:var(--tipo);font-size:.8rem;font-weight:500;cursor:pointer;transition:background .3s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.pf-accion:hover{background:rgba(110,246,243,.16);transform:translateY(-2px)}
.pf-accion[aria-pressed="true"]{background:linear-gradient(120deg,var(--azul),var(--morado));border-color:transparent}
#pf-v-fav[aria-pressed="true"]{background:rgba(255,80,130,.85)}
#pf-v-fav[aria-pressed="true"] svg{fill:currentColor}
.pf-visor-texto .pf-contador{margin-top:22px}
.pf-visor-texto .boton{margin-top:22px}
@media(max-width:900px){.pf-acciones{justify-content:center;margin-top:12px}}

/* ═══ RESPLANDOR DEL CURSOR (página principal) ═══ */
.resplandor,.resplandor-nucleo{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .5s;will-change:transform;mix-blend-mode:screen}
.resplandor{z-index:50;width:200px;height:200px;margin:200px 0 0 200px;   /* centrado en el cursor (el JS lo desplaza 300px) */
  mix-blend-mode:normal;background:radial-gradient(circle,rgba(58,123,213,.14),rgba(110,70,200,.08) 45%,transparent 70%);
  transition:opacity .5s,scale .45s cubic-bezier(.34,1.4,.5,1)}
/* al pasar por una opción: crece un poco y toma los colores del logo */
.resplandor::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle,rgba(58,123,213,.26),rgba(142,84,233,.16) 45%,transparent 70%)}
body.resplandor-vivo .resplandor{scale:1.35}
body.resplandor-vivo .resplandor::after{opacity:1}
.resplandor-nucleo{display:none}
body.con-resplandor .resplandor{opacity:1}
body.pf-panel-abierto .resplandor,body.pf-panel-abierto .resplandor-nucleo{opacity:0!important}

/* ═══ EFECTOS DE CURSOR ═══ */
/* luz que persigue al cursor (más grande y brillante que antes) */
.pf-panel .pf-luz{position:fixed;left:0;top:0;width:640px;height:640px;z-index:1;opacity:0;transition:opacity .5s;will-change:transform;
  background:radial-gradient(circle,rgba(110,246,243,.26),rgba(58,123,213,.2) 30%,rgba(142,84,233,.12) 55%,transparent 72%);mix-blend-mode:screen}
.pf-panel.sobre .pf-luz{opacity:1}
/* puntitos que solo se ven bajo la luz */
.pf-puntos{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(rgba(110,246,243,.9) 1.2px,transparent 1.6px) 0 0/30px 30px;
  -webkit-mask:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),#000,transparent);mask:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),#000,transparent);
  opacity:0;transition:opacity .5s}
.pf-panel.sobre .pf-puntos{opacity:.55}
.pf-lienzo{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.pf-panel .pf-luz~.pf-lienzo{z-index:4}

/* tarjetas: borde que brilla donde está el cursor */
.pf-tarjeta::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;padding:2px;
  background:radial-gradient(circle 160px at var(--gx,50%) var(--gy,50%),rgba(110,246,243,1),rgba(142,84,233,.6) 50%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pf-tarjeta:hover::after{opacity:1}
.pf-tarjeta:hover img,.pf-tarjeta:hover video{transform:scale(1.14) translate(calc((var(--ry,0deg) / 20deg) * -2%),calc((var(--rx,0deg) / 20deg) * 2%))}
.pf-tarjeta:hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(24px) scale(1.03)}
.pf-cifra{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s}
.pf-cifra:hover{transform:translateY(-6px) scale(1.06);background:rgba(110,246,243,.08)}
.pf-dc{--rot:0deg}
.pf-dc:hover{transform:translateY(-8px) scale(1.03)}

/* botones magnéticos y onda */
.magnetico{transition:translate .12s linear!important}
.pf-filtro,.pf-flecha,.pf-btn-panel,.pf-volver,.pf-mas,.pf-cta .boton{transition:translate .5s cubic-bezier(.34,1.56,.64,1),color .3s,background .3s,transform .3s}
.pf-panel .boton,.pf-panel .pf-filtro,.pf-panel .pf-flecha,.pf-panel .pf-volver{position:relative;overflow:hidden}
.pf-onda{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;animation:pfOnda .7s ease-out forwards}
@keyframes pfOnda{to{transform:scale(28);opacity:0}}
.pf-titulo{transition:transform .2s}
@media(hover:none){.pf-puntos,.pf-lienzo{display:none}}

@media(prefers-reduced-motion:reduce){
  .pf-puntos,.pf-lienzo,.pf-panel .pf-luz{display:none}
  .portafolio.pf-panel,.portafolio.pf-panel.abierto{transition:none}
  .pf-lengueta,.barra .pf-abrir::after{animation:none}
  .pf-dc{opacity:1;transform:none}
}