/* La animación de «Profesionales destacados» del inicio (css/card-3d.css, variante
   «profesional», y css/tarjeta-profesional-oro.css), replicada en las demás tarjetas de
   profesional: la de /buscar/ y Freelance+ (.fc-resultado, partials/profile_card.html) y la
   de las páginas de especialidad (.profile-card, subcategory/tarjeta_profesional.html).

   - Todas: el mismo 3D marcado del inicio (giro, elevación, sombra honda) al pasar el mouse.
   - Con plan: un destello que recorre la tarjeta por turnos y la corona de su insignia que
     salta; dorado en Gold (con una chispa junto a la insignia) y plateado en Silver. Con el
     mouse encima: halo del color del plan, destello repetido y la insignia latiendo.

   Solo efectos: ninguna tarjeta cambia de tamaño ni de posición. Lo que se anima en reposo es
   transform y opacity; con «reducir movimiento» no hay animaciones. */

/* ---------- 3D: las mismas medidas que la tarjeta del inicio ---------- */
.c3d[data-card-3d=buscador]{--card-3d-rx:7.5deg;--card-3d-ry:9deg;--card-3d-perspective:900px;--card-3d-lift:-8px;--card-3d-scale:1.025;
  --card-3d-glow-opacity:.3;--card-3d-depth:1.35}
.c3d[data-card-3d=buscador]>.c3d__luz{box-shadow:calc(var(--c3d-x,0)*-16px) calc(26px + var(--c3d-y,0)*-10px) 40px -14px rgba(var(--card-3d-shadow-rgb),.42)}

/* Turnos: las tarjetas vecinas no brillan a la vez (retraso negativo: sin espera inicial). */
.c3d:nth-child(4n+2){--tp-turno:-1.6s}
.c3d:nth-child(4n+3){--tp-turno:-3.3s}
.c3d:nth-child(4n){--tp-turno:-4.9s}

/* Color del destello y del halo según el plan. */
:is(.fc-resultado.perfil--gold,.profile-card--gold){--tp-rgb:255,224,140}
:is(.fc-resultado.perfil--silver,.profile-card--silver){--tp-rgb:214,226,243}

/* ---------- Destello que recorre la tarjeta ---------- */
.fc-resultado:is(.perfil--gold,.perfil--silver)::before,
.profile-card:is(.profile-card--gold,.profile-card--silver) .pc-cover::after{content:"";position:absolute;z-index:4;top:-20%;bottom:-20%;left:0;width:44%;pointer-events:none;
  background:linear-gradient(100deg,rgba(var(--tp-rgb),0) 0,rgba(var(--tp-rgb),.3) 34%,rgba(255,255,255,.62) 50%,rgba(var(--tp-rgb),.3) 66%,rgba(var(--tp-rgb),0) 100%);
  transform:translateX(-150%) skewX(-18deg);
  animation:tp-destello 6.5s cubic-bezier(.4,0,.2,1) var(--tp-turno,0s) infinite}
@keyframes tp-destello{0%,74%{transform:translateX(-150%) skewX(-18deg)}100%{transform:translateX(390%) skewX(-18deg)}}

/* ---------- Insignia del plan: la corona salta cuando pasa el destello ---------- */
:is(.fc-resultado.perfil--gold,.fc-resultado.perfil--silver) .fc-resultado__plan>i,
:is(.profile-card--gold,.profile-card--silver) .pc-plan>i{display:inline-block;transform-origin:50% 80%;
  animation:tp-corona 6.5s ease-in-out var(--tp-turno,0s) infinite}
@keyframes tp-corona{0%,80%,100%{transform:none}
  85%{transform:translateY(-16%) rotate(-11deg) scale(1.18)}
  90%{transform:translateY(0) rotate(8deg) scale(1.1)}
  95%{transform:rotate(-4deg) scale(1.03)}}

/* Gold: una chispa en la esquina de su insignia. */
.fc-resultado__plan--gold,.pc-plan--gold{position:relative}
.fc-resultado__plan--gold::after,.pc-plan--gold::after{content:"";position:absolute;right:-7px;top:-8px;width:13px;height:13px;pointer-events:none;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff3c4' d='M12 0C12.9 7.5 16.5 11.1 24 12C16.5 12.9 12.9 16.5 12 24C11.1 16.5 7.5 12.9 0 12C7.5 11.1 11.1 7.5 12 0Z'/%3E%3C/svg%3E") center/100% no-repeat;
  filter:drop-shadow(0 0 3px rgba(255,190,60,.95));
  animation:tp-chispa 6.5s ease-in-out var(--tp-turno,0s) infinite}
@keyframes tp-chispa{0%,82%,100%{opacity:0;transform:scale(.4) rotate(0)}90%{opacity:1;transform:scale(1) rotate(45deg)}96%{opacity:0;transform:scale(.5) rotate(80deg)}}

/* ---------- Con el mouse encima ---------- */
/* Luz y sombra del color del plan, y su halo (la capa de luz solo se ve mientras está activa). */
.c3d:has(>:is(.fc-resultado.perfil--gold,.profile-card--gold)){--card-3d-glow-rgb:255,222,140;--card-3d-glow-opacity:.34;--card-3d-shadow-rgb:122,84,10}
.c3d:has(>:is(.fc-resultado.perfil--silver,.profile-card--silver)){--card-3d-glow-rgb:226,235,248;--card-3d-shadow-rgb:51,65,85}
.c3d[data-card-3d=buscador]:has(>:is(.fc-resultado.perfil--gold,.profile-card--gold))>.c3d__luz{
  box-shadow:0 0 0 1.5px rgba(255,214,120,.95),0 0 22px 3px rgba(255,190,70,.55),
    calc(var(--c3d-x,0)*-16px) calc(26px + var(--c3d-y,0)*-10px) 40px -14px rgba(var(--card-3d-shadow-rgb),.46)}
.c3d[data-card-3d=buscador]:has(>:is(.fc-resultado.perfil--silver,.profile-card--silver))>.c3d__luz{
  box-shadow:0 0 0 1.5px rgba(206,217,233,.95),0 0 20px 3px rgba(168,188,220,.5),
    calc(var(--c3d-x,0)*-16px) calc(26px + var(--c3d-y,0)*-10px) 40px -14px rgba(var(--card-3d-shadow-rgb),.42)}
.c3d.is-c3d-activo>.fc-resultado:is(.perfil--gold,.perfil--silver)::before,
.c3d.is-c3d-activo>.profile-card:is(.profile-card--gold,.profile-card--silver) .pc-cover::after{animation:tp-destello-vivo 2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes tp-destello-vivo{0%{transform:translateX(-150%) skewX(-18deg)}62%,100%{transform:translateX(390%) skewX(-18deg)}}
.c3d.is-c3d-activo>:is(.fc-resultado,.profile-card) :is(.fc-resultado__plan,.pc-plan)>i{animation:tp-corona-viva 1.5s ease-in-out infinite}
@keyframes tp-corona-viva{0%,100%{transform:none}30%{transform:translateY(-14%) rotate(-10deg) scale(1.16)}60%{transform:rotate(7deg) scale(1.08)}}
.c3d.is-c3d-activo>:is(.fc-resultado,.profile-card) :is(.fc-resultado__plan--gold,.pc-plan--gold){animation:tp-latido 1.5s ease-in-out infinite}
@keyframes tp-latido{0%,100%{box-shadow:0 0 0 0 rgba(255,196,70,0)}50%{box-shadow:0 0 0 2px rgba(255,236,170,.95),0 0 14px 3px rgba(255,186,40,.8)}}
.c3d.is-c3d-activo>:is(.fc-resultado,.profile-card) :is(.fc-resultado__plan--gold,.pc-plan--gold)::after{animation:tp-chispa-viva 1.3s ease-in-out infinite}
@keyframes tp-chispa-viva{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(45deg)}}

/* ---------- Tarjeta de especialidad: profundidad de sus piezas (como las demás) ---------- */
.c3d .profile-card .pc-cover{--c3d-z:8}
.c3d .profile-card :is(.pc-linea,.pc-datos,.pc-descripcion){--c3d-z:11}
.c3d .profile-card :is(.pc-cabecera,.pc-temas,.pc-cifras){--c3d-z:15}
.c3d .profile-card :is(.pc-avatar,.pc-estado){--c3d-z:18}
.c3d .profile-card .pc-destacado{--c3d-z:20}
.c3d .profile-card :is(.pc-cover,.pc-linea,.pc-datos,.pc-descripcion,.pc-cabecera,.pc-temas,.pc-cifras,.pc-avatar,.pc-estado,.pc-destacado){
  transition:translate .6s cubic-bezier(.22,.61,.36,1),scale .6s cubic-bezier(.22,.61,.36,1)}
.c3d.is-c3d-activo .profile-card :is(.pc-cover,.pc-linea,.pc-datos,.pc-descripcion,.pc-cabecera,.pc-temas,.pc-cifras,.pc-avatar,.pc-estado,.pc-destacado){
  translate:calc(var(--c3d-x,0)*var(--c3d-z,0)*.12px*var(--card-3d-depth)) calc(var(--c3d-y,0)*var(--c3d-z,0)*.12px*var(--card-3d-depth));
  scale:calc(1 + var(--c3d-z,0)*.0011*var(--card-3d-depth))}

/* ---------- Sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .fc-resultado:is(.perfil--gold,.perfil--silver)::before,.profile-card .pc-cover::after,
  .fc-resultado__plan--gold::after,.pc-plan--gold::after{display:none}
  :is(.fc-resultado,.profile-card) :is(.fc-resultado__plan,.pc-plan),:is(.fc-resultado,.profile-card) :is(.fc-resultado__plan,.pc-plan)>i{animation:none!important}
}