.guridi-retrato{position:relative;display:block;width:100%;max-width:520px;aspect-ratio:1;overflow:hidden;isolation:isolate;cursor:pointer;-webkit-tap-highlight-color:transparent}
.guridi-retrato .gr-fondo{position:absolute;inset:0;display:flex}
.guridi-retrato .gr-fondo i{flex:1}
.guridi-retrato .gr-amarillo{background:#FDD636}
.guridi-retrato .gr-azul{background:#204CFD}
.guridi-retrato .gr-figura{position:absolute;inset:0}
.guridi-retrato img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.guridi-retrato .gr-brillo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.guridi-retrato .gr-destello{opacity:0}

/* ---------- 2. PARALLAX: entra con rebote y sigue al cursor en 3D ---------- */
.guridi-retrato[data-anim="parallax"]{transform:perspective(900px) rotateX(calc(var(--ry,0) * -7deg)) rotateY(calc(var(--rx,0) * 9deg));transition:transform .6s cubic-bezier(.3,.7,.4,1)}
.guridi-retrato[data-anim="parallax"] .gr-fondo{inset:-4%;transform:translate(calc(var(--rx,0) * -2.5%),calc(var(--ry,0) * -1.5%));transition:transform .6s cubic-bezier(.3,.7,.4,1)}
.guridi-retrato[data-anim="parallax"] .gr-figura{transform-origin:50% 60%;transform:translate(calc(var(--rx,0) * 2%),calc(var(--ry,0) * 1.6%)) scale(1.06);transition:transform .6s cubic-bezier(.3,.7,.4,1)}
.guridi-retrato[data-anim="parallax"] .gr-destello{transform:translateX(calc(var(--rx,0) * 200px + 815px));transition:transform .6s cubic-bezier(.3,.7,.4,1),opacity .4s}
.guridi-retrato[data-anim="parallax"].is-hover .gr-destello{opacity:.75}
.guridi-retrato[data-anim="parallax"].is-hover,
.guridi-retrato[data-anim="parallax"].is-hover .gr-fondo,
.guridi-retrato[data-anim="parallax"].is-hover .gr-figura,
.guridi-retrato[data-anim="parallax"].is-hover .gr-destello{transition-duration:.25s}
.guridi-retrato[data-anim="parallax"].is-playing{animation:gr-entra .9s cubic-bezier(.3,.7,.4,1) both}
.guridi-retrato[data-anim="parallax"].is-playing .gr-figura img{animation:gr-asoma .9s cubic-bezier(.3,.7,.4,1) .1s both}

@keyframes gr-entra{
  0%  {scale:.6;opacity:0}
  40% {scale:1.05;opacity:1}
  60% {scale:.97}
  80% {scale:1.01}
  100%{scale:1}
}
@keyframes gr-asoma{
  0%  {translate:0 18%}
  55% {translate:0 -1.5%}
  100%{translate:0 0}
}

@media (prefers-reduced-motion:reduce){
  .guridi-retrato,.guridi-retrato *{animation:none!important;transition:none!important}
  .guridi-retrato[data-anim="parallax"]{transform:none}
}