/* Profundidad 3D de tarjetas (js/card-3d.js): un solo sistema para Categorías destacadas,
   Profesionales destacados e Ideas, historias y novedades (inicio), los planes Silver y Gold
   (membership/list_plans.html) y las tarjetas de profesionales de /buscar/
   (partials/profile_card.html y la tarjeta nueva de la vista previa). No cambia ninguna
   tarjeta: solo agrega movimiento al pasar el mouse.

   Marcado: la tarjeta real va dentro de una envoltura
       <div class="c3d" data-card-3d="categoria|profesional|novedad|silver|gold|buscador"> tarjeta </div>
   En los carruseles la envoltura es el ítem de la cinta (js/carrusel.js le aplica su
   translateX); el giro va en la tarjeta, su primer hijo: las dos transformaciones nunca se
   pisan. La luz y la sombra dinámicas son una capa aparte (.c3d__luz) que el js crea al primer
   paso del mouse, hermana de la tarjeta y con su mismo giro.

   Reposo idéntico: sin el puntero encima no se aplica ninguna propiedad de movimiento. Todo
   depende de .is-c3d-activo, que el js pone solo con mouse (hover: hover, pointer: fine) y sin
   "reducir movimiento".

   Profundidad interna: estas tarjetas recortan su contenido (overflow hidden), así que un
   translateZ real quedaría aplanado. Cada pieza tiene una "altura" --c3d-z (px) y, con la
   tarjeta inclinada, se corre hacia el puntero y crece apenas, como haría a esa distancia
   (desplazamiento ≈ z · sen(giro), escala ≈ 1 + z / perspectiva).

   Variables por componente: --card-3d-rx / --card-3d-ry (giro máximo por eje),
   --card-3d-perspective, --card-3d-lift, --card-3d-scale, --card-3d-glow-opacity,
   --card-3d-glow-rgb, --card-3d-shadow-rgb, --card-3d-depth (multiplica la altura de las
   piezas). El js escribe --c3d-x / --c3d-y (-1 a 1) y --pointer-x / --pointer-y (%). */
.c3d{display:flex;min-width:0;
  --card-3d-rx:6deg;--card-3d-ry:7deg;--card-3d-perspective:1000px;--card-3d-lift:-4px;--card-3d-scale:1.01;
  --card-3d-glow-opacity:.2;--card-3d-glow-rgb:255,255,255;--card-3d-shadow-rgb:16,42,94;--card-3d-depth:1}
.c3d>:first-child{flex:1 1 auto;min-width:0}
/* La envoltura se posiciona (para su capa de luz) solo mientras se usa: en reposo no agrega
   nada que cambie cómo se pinta la tarjeta. El js quita la clase cuando la tarjeta ya volvió. */
.c3d.is-c3d-posicion{position:relative;isolation:isolate}
.c3d:not(.is-c3d-posicion)>.c3d__luz{display:none}

/* ---------- Intensidad por componente ---------- */
/* Categorías: su pista conserva los 8 px de aire de siempre; el giro pivota más arriba y la
   elevación es menor para que el borde superior no se recorte. */
.c3d[data-card-3d=categoria]{--card-3d-lift:-3px;--card-3d-origin:50% 35%}
/* Tarjetas anchas y bajas: un poco más sutil. */
.c3d[data-card-3d=novedad]{--card-3d-rx:4.5deg;--card-3d-ry:4.5deg;--card-3d-perspective:900px;--card-3d-lift:-3px;--card-3d-scale:1.008;
  --card-3d-glow-opacity:.16;--card-3d-depth:.8}
/* Planes: tarjetas altas, perspectiva más larga. Silver con luz plateada; Gold con algo más de
   giro, elevación, profundidad y una luz dorada suave. */
.c3d[data-card-3d=silver]{--card-3d-rx:4.5deg;--card-3d-ry:5.5deg;--card-3d-perspective:1500px;--card-3d-lift:-5px;--card-3d-scale:1.01;
  --card-3d-glow-opacity:.22;--card-3d-glow-rgb:236,241,248;--card-3d-shadow-rgb:51,65,85}
.c3d[data-card-3d=gold]{--card-3d-rx:5.5deg;--card-3d-ry:6.5deg;--card-3d-perspective:1500px;--card-3d-lift:-6px;--card-3d-scale:1.015;
  --card-3d-glow-opacity:.26;--card-3d-glow-rgb:255,220,130;--card-3d-shadow-rgb:120,80,0;--card-3d-depth:1.2}
/* Los planes van en columnas de igual alto: la envoltura ocupa la columna. */
.planes-tarjetas .c3d{height:100%}
/* /buscar/, vista "lista": la envoltura toma el ancho y el centrado que tenía la tarjeta. */
.fc-busqueda__grilla[data-vista-resultados="lista"]>.c3d{width:100%;max-width:440px;justify-self:center}

/* Aire arriba en las pistas de los carruseles para que la tarjeta elevada no se recorte (el
   padding extra se compensa con el margen: nada se mueve). */
[data-carrusel-pista]:not(.category-grid):has(>.c3d){padding-top:22px;margin-top:-22px}

/* Profesionales destacados (carrusel del inicio): debe llamar la atención tanto como las
   tarjetas de /buscar/. Son más bajas y van dentro de una cinta que recorta lo que sobresale,
   así que con las mismas medidas el efecto se veía apagado: aquí giran, suben y se acercan
   un poco más, con una luz cálida y más profundidad entre sus piezas. En reposo, nada cambia. */
.c3d[data-card-3d=profesional]{--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-glow-rgb:255,244,214;--card-3d-depth:1.35}
/* …y la cinta deja el aire que necesitan la tarjeta elevada y su sombra (antes se cortaba a
   14 px del borde inferior). El padding se compensa con el margen: nada se mueve. */
.professionals-grid[data-carrusel-pista]:has(>.c3d){padding-top:30px;margin-top:-30px;padding-bottom:52px;margin-bottom:-52px}
/* Sombra más honda, que se corre con el giro. */
.c3d[data-card-3d=profesional]>.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)}

/* ---------- Giro de la tarjeta (y de su capa de luz) ---------- */
.c3d>:first-child,.c3d>.c3d__luz{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
/* Conserva la transición propia de la tarjeta de categoría (su sombra). */
.c3d>.pc-cat{transition:box-shadow .2s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.c3d.is-c3d-activo>:first-child,.c3d.is-c3d-activo>.c3d__luz{
  transform:perspective(var(--card-3d-perspective))
    rotateX(calc(var(--c3d-y,0)*-1*var(--card-3d-rx)))
    rotateY(calc(var(--c3d-x,0)*var(--card-3d-ry)))
    translateY(var(--card-3d-lift)) scale(var(--card-3d-scale));
  transform-origin:var(--card-3d-origin,50% 50%);transition-duration:.2s;will-change:transform}
.c3d.is-c3d-activo>.pc-cat{transition-duration:.2s,.2s}

/* ---------- Luz que sigue al puntero y sombra que responde al giro ---------- */
.c3d__luz{position:absolute;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(var(--card-3d-glow-rgb),var(--card-3d-glow-opacity)) 0,rgba(var(--card-3d-glow-rgb),0) 58%);
  box-shadow:calc(var(--c3d-x,0)*-12px) calc(20px + var(--c3d-y,0)*-8px) 34px -14px rgba(var(--card-3d-shadow-rgb),.36);
  transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
.c3d.is-c3d-activo>.c3d__luz{opacity:1;transition-duration:.2s,.25s}

/* ---------- Altura de cada pieza (--c3d-z, en px) ---------- */
/* Categorías */
.c3d .pc-cat__foto{--c3d-z:10}
.c3d :is(.pc-cat__titulo,.pc-cat__numero){--c3d-z:15}
.c3d .pc-cat__placa{--c3d-z:18}
.c3d .pc-cat__boton{--c3d-z:22}
/* Profesionales destacados */
.c3d .pd-card__portada{--c3d-z:8}
.c3d :is(.pd-card__especialidad,.pd-card__ubicacion,.pd-card__nota){--c3d-z:11}
.c3d :is(.pd-card__nombre,.pd-card__habilidades){--c3d-z:15}
.c3d :is(.pd-card__avatar,.pd-card__favorito){--c3d-z:18}
.c3d :is(.pd-card__plan,.pd-card__destacado,.pd-card__mensaje){--c3d-z:20}
.c3d .pd-card__perfil{--c3d-z:22}
/* Novedades */
.c3d .news-photo{--c3d-z:10}
.c3d .news-card h3{--c3d-z:15}
.c3d .news-label{--c3d-z:18}
.c3d .round-arrow{--c3d-z:22}
/* Planes */
.c3d .planes-card__beneficios{--c3d-z:8}
.c3d :is(.planes-card__nombre,.planes-card__subtitulo){--c3d-z:15}
.c3d :is(.planes-card__icono,.planes-card__chip,.planes-card__precio){--c3d-z:18}
.c3d .planes-card__cinta{--c3d-z:20}
.c3d .planes-card__comprar{--c3d-z:22}
/* /buscar/: tarjeta actual (profile_card.html) */
.c3d .fc-resultado__portada{--c3d-z:8}
.c3d :is(.fc-resultado__profesion,.fc-resultado__datos,.fc-resultado__nota,.fc-resultado__estado){--c3d-z:11}
.c3d :is(.fc-resultado__cabecera :is(h2,h3),.fc-resultado__temas,.fc-resultado__cifras){--c3d-z:15}
.c3d :is(.fc-resultado__foto,.fc-resultado__favorito){--c3d-z:18}
.c3d :is(.fc-resultado__plan,.fc-resultado__destacado,.fc-resultado__logros){--c3d-z:20}
.c3d .fc-resultado__ver{--c3d-z:22}
/* /buscar/: tarjeta nueva en preparación (tarjeta_resultado.html, vista previa) */
.c3d .tr-card__foto{--c3d-z:8}
.c3d :is(.tr-card__linea,.tr-card__meta,.tr-card__nota,.tr-card__estado){--c3d-z:11}
.c3d :is(.tr-card__nombre,.tr-card__habilidades,.tr-card__dato){--c3d-z:15}
.c3d :is(.tr-card__avatar,.tr-card__favorito){--c3d-z:18}
.c3d :is(.tr-card__destacado,.tr-card__corona){--c3d-z:20}
.c3d .tr-card__perfil{--c3d-z:22}

/* Todas las piezas con altura: regreso suave al soltar y, activa, el corrimiento y la escala
   de su altura. --c3d-presion y --c3d-zoom los usan los botones (abajo). */
.c3d :is(.pc-cat__foto,.pc-cat__titulo,.pc-cat__numero,.pc-cat__placa,.pc-cat__boton,
  .pd-card__portada,.pd-card__especialidad,.pd-card__ubicacion,.pd-card__nota,.pd-card__nombre,.pd-card__habilidades,.pd-card__avatar,.pd-card__favorito,.pd-card__plan,.pd-card__destacado,
  .news-photo,.news-card h3,.news-label,
  .planes-card__beneficios,.planes-card__nombre,.planes-card__subtitulo,.planes-card__icono,.planes-card__chip,.planes-card__precio,.planes-card__cinta,
  .fc-resultado__portada,.fc-resultado__profesion,.fc-resultado__datos,.fc-resultado__nota,.fc-resultado__estado,.fc-resultado__cabecera :is(h2,h3),.fc-resultado__temas,.fc-resultado__cifras,.fc-resultado__foto,.fc-resultado__favorito,.fc-resultado__plan,.fc-resultado__destacado,.fc-resultado__logros,
  .tr-card__foto,.tr-card__linea,.tr-card__meta,.tr-card__nota,.tr-card__estado,.tr-card__nombre,.tr-card__habilidades,.tr-card__dato,.tr-card__avatar,.tr-card__favorito,.tr-card__destacado,.tr-card__corona){
  transition:translate .6s cubic-bezier(.22,.61,.36,1),scale .6s cubic-bezier(.22,.61,.36,1)}
/* Botones: transición más corta y conservan la propia (style.css, busqueda.css). */
.c3d :is(.pd-card__perfil,.pd-card__mensaje,.round-arrow,.tr-card__perfil){transition:translate .25s ease,scale .25s ease,filter .25s ease}
.c3d .planes-card__comprar{transition:background-color .15s ease,color .15s ease,translate .25s ease,scale .25s ease,filter .25s ease}
.c3d .fc-resultado__ver{transition:filter .15s ease,translate .25s ease,scale .25s ease}

.c3d.is-c3d-activo :is(.pc-cat__foto,.pc-cat__titulo,.pc-cat__numero,.pc-cat__placa,.pc-cat__boton,
  .pd-card__portada,.pd-card__especialidad,.pd-card__ubicacion,.pd-card__nota,.pd-card__nombre,.pd-card__habilidades,.pd-card__avatar,.pd-card__favorito,.pd-card__plan,.pd-card__destacado,.pd-card__mensaje,.pd-card__perfil,
  .news-photo,.news-card h3,.news-label,.round-arrow,
  .planes-card__beneficios,.planes-card__nombre,.planes-card__subtitulo,.planes-card__icono,.planes-card__chip,.planes-card__precio,.planes-card__cinta,.planes-card__comprar,
  .fc-resultado__portada,.fc-resultado__profesion,.fc-resultado__datos,.fc-resultado__nota,.fc-resultado__estado,.fc-resultado__cabecera :is(h2,h3),.fc-resultado__temas,.fc-resultado__cifras,.fc-resultado__foto,.fc-resultado__favorito,.fc-resultado__plan,.fc-resultado__destacado,.fc-resultado__logros,.fc-resultado__ver,
  .tr-card__foto,.tr-card__linea,.tr-card__meta,.tr-card__nota,.tr-card__estado,.tr-card__nombre,.tr-card__habilidades,.tr-card__dato,.tr-card__avatar,.tr-card__favorito,.tr-card__destacado,.tr-card__corona,.tr-card__perfil){
  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) + var(--c3d-presion,0px));
  scale:calc((1 + var(--c3d-z,0)*.0011*var(--card-3d-depth))*var(--c3d-zoom,1))}

/* ---------- Botones: suben al pasar el mouse y se hunden al pulsar ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .c3d.is-c3d-activo :is(.pd-card__perfil,.planes-card__comprar,.tr-card__perfil):hover:not(:disabled){--c3d-presion:-3px;
    filter:drop-shadow(0 8px 10px rgba(var(--card-3d-shadow-rgb),.28))}
  .c3d.is-c3d-activo .fc-resultado__ver:hover{--c3d-presion:-3px;filter:brightness(1.06) drop-shadow(0 8px 10px rgba(var(--card-3d-shadow-rgb),.28))}
  .c3d.is-c3d-activo :is(.pd-card__mensaje,.round-arrow):hover{--c3d-presion:-2px;
    filter:drop-shadow(0 5px 7px rgba(var(--card-3d-shadow-rgb),.22))}
  /* El botón de la categoría es parte del enlace de toda la tarjeta: sube con ella. */
  .c3d.is-c3d-activo>.pc-cat:hover .pc-cat__boton{--c3d-presion:-2px}
  .c3d.is-c3d-activo :is(.pd-card__perfil,.pd-card__mensaje,.round-arrow,.planes-card__comprar,.fc-resultado__ver,.tr-card__perfil):active:not(:disabled){--c3d-presion:1px;filter:none}
  /* Favorito: micro escala y una pequeña elevación, nada más. */
  .c3d.is-c3d-activo :is(.pd-card__favorito,.fc-resultado__favorito,.tr-card__favorito):hover{--c3d-presion:-1px;--c3d-zoom:1.06}
}
/* Táctil: sin giro; solo un hundimiento leve al pulsar los botones principales. */
@media (hover:none),(pointer:coarse){
  @media (prefers-reduced-motion:no-preference){
    .c3d :is(.pd-card__perfil,.planes-card__comprar,.fc-resultado__ver,.tr-card__perfil):active:not(:disabled){translate:0 1px}
  }
}
/* Con "reducir movimiento" el js no activa nada (sin giro, elevación ni luz) y las reglas de
   botones quedan fuera por su media query: las tarjetas se ven y funcionan como siempre. */