/* Tarjeta del profesional SIN plan en los listados.

   ANATOMÍA (2026-10-22): la misma que la premium de Gold y Silver
   (css/tarjeta-destacada-ref.css). No se copia su decoración —el oro es de su
   plan— pero sí su esqueleto: la tarjeta mide 1024 × 1536 de la lámina premium,
   --u es 1 px de esa lámina, y cada pieza cae en la coordenada que ocupa allí.
   Nombre, profesión, nota, cualidades, datos, descripción, especialidades,
   cifras y botón empiezan a la misma altura en las dos tarjetas, así que en una
   grilla mixta las filas se leen como una sola familia.

   Por qué absoluto y no flujo: colocada cada pieza en su coordenada, la tarjeta
   no puede encogerse ni estirarse por lo que traiga la persona. Sin descripción,
   sin especialidades o sin experiencia el hueco queda vacío —no se escribe nada
   en su lugar— y las cifras y el botón siguen donde estaban. Es la misma razón
   por la que la premium es estable: su lámina no se mueve.

   Marco y cuerpo son CSS, no imagen: de la lámina de esta tarjeta solo se usa
   la cabecera (referencias/tarjeta-destacada, recorte «80 85 922 415»), que es
   la escena con el aro del avatar. El botón también es CSS, para que pueda
   levantarse al pasar el mouse: era un recorte, y una imagen plana no se
   inclina sin que se le note el salto.

   El marco empieza con la misma sangría que el arte de la lámina premium (x 39,
   y 61 de sus 1024 × 1536): así las dos tarjetas ocupan el mismo rectángulo
   dentro de su celda y ninguna aparenta ser más ancha que la otra.

   Markup en partials/tarjeta_normal_ref.html. */

.professional-normal-card-ref{
  --u:calc(100cqw / 1024);
  /* Paleta del admin (home.ProfessionalCardStyle, fila «Sin plan»): cada
     var(--fcpro-…) cae en el valor de siempre mientras nadie la configure, así
     que sin nada cargado esta hoja pinta exactamente lo que pintaba. */
  --pnc-azul:var(--fcpro-borde-color,var(--fcpro-principal,#0a84ff));
  --pnc-tinta:#090c32;
  /* align-self: en una grilla, sin esto el alto de la fila pisaría la
     proporción y la tarjeta saldría estirada. */
  /* Forma real de la tarjeta para la capa de luz del sistema 3D (js/card-3d.js):
     la caja es 1024 x 1536, pero lo que se ve es .pnc-ref__marco, que va en
     39/61 con 946 x 1424 y radio 57 px de lámina. Mismo caso que la premium, y
     por eso las mismas cifras: sin esto el resplandor blanco se dibujaba del
     tamaño de la caja y asomaba por fuera del marco azul. */
  --c3d-luz-sangria:3.971% 3.809% 3.320% 3.809%;
  --c3d-luz-radio:5.566%/3.711%;
  position:relative;display:block;width:100%;aspect-ratio:1024/1536;align-self:start;
  container-type:inline-size;
  font-family:var(--fcpro-fuente,var(--fc-marca-fuente,'Inter',Arial,sans-serif));
  color:var(--pnc-tinta);text-align:left}

/* Reseteo acotado: nada de fuera manda dentro de la tarjeta. */
.professional-normal-card-ref,.professional-normal-card-ref *{box-sizing:border-box}
/* La insignia de cualidad queda fuera del reseteo: su círculo de color viene de
   cualidades.css, que se carga antes que esta hoja y perdería el fondo. */
.professional-normal-card-ref :where(h3,p,ul,li,span:not(.fc-cualidad-insignia),
b,strong,small,i,a,img,button,form,input){
  margin:0;padding:0;border:0;background:none;list-style:none;text-decoration:none;
  color:inherit;font:inherit;letter-spacing:inherit}
.professional-normal-card-ref :where(img,svg){display:block;max-width:none}

/* ---------- El marco: la tarjeta entera vive dentro ---------- */
/* Borde azul de 16u y esquinas de 57u, el mismo redondeo que la lámina premium.
   Su interior (914 × 1392) es el sistema de coordenadas de todo lo demás: a una
   coordenada de la lámina hay que restarle 55 en x y 77 en y, que son la
   sangría más el grosor del borde. */
/* Sin overflow:hidden: lo único que podría salirse es la cabecera, y esa se
   recorta sola; recortar aquí le comería la sombra al botón cuando se levanta. */
.professional-normal-card-ref .pnc-ref__marco{
  position:absolute;
  left:calc(39*var(--u));top:calc(61*var(--u));
  width:calc(946*var(--u));height:calc(1424*var(--u));
  border:calc(16*var(--u)) solid var(--pnc-azul);border-radius:calc(57*var(--u));
  background:linear-gradient(180deg,#2a9bff,#0072e0) border-box;
  box-shadow:0 calc(10*var(--u)) calc(26*var(--u)) rgba(10,110,220,.16)}
/* El relleno blanco va en una capa propia porque el degradado del borde ocupa
   toda la caja: así el borde se lee como un marco y no como un fondo. */
.professional-normal-card-ref .pnc-ref__marco::before{
  content:"";position:absolute;inset:0;z-index:0;background:#fff;
  border-radius:calc(41*var(--u))}

/* ---------- Cabecera: el recorte de la lámina ---------- */
.professional-normal-card-ref .pnc-ref__cabecera{
  position:absolute;z-index:1;left:0;top:0;
  width:calc(914*var(--u));height:calc(411*var(--u));
  overflow:hidden;border-radius:calc(41*var(--u)) calc(41*var(--u)) 0 0;
  background:#fff;line-height:0}
/* La foto real, detrás del arte: el hueco del aro la deja ver y el aro le hace
   el borde. Las medidas son porcentajes del recorte, no de la tarjeta. */
.professional-normal-card-ref .pnc-ref__ampliar-foto,
.professional-normal-card-ref .pnc-ref__avatar{
  position:absolute;left:5.53%;top:42.41%;width:19.09%;height:42.41%;
  border-radius:50%;z-index:0}
.professional-normal-card-ref .pnc-ref__avatar{object-fit:cover;background:#eef2f8}
.professional-normal-card-ref .pnc-ref__ampliar-foto{overflow:hidden}
.professional-normal-card-ref .pnc-ref__ampliar-foto>.pnc-ref__avatar{
  position:static;width:100%;height:100%}
/* El arte va por delante para que su aro recorte la foto; el enlace de debajo
   sigue siendo clicable. */
.professional-normal-card-ref .pnc-ref__arte{
  position:relative;z-index:1;width:100%;height:auto;aspect-ratio:922/415;
  pointer-events:none}

/* El banner publicado de la persona (2026-10-29, partials/tarjeta_banner.html): debajo
   del avatar y de la capa de decoración, que es la cabecera con la foto transparente.
   Ocupa la cabecera entera (su overflow y sus esquinas ya lo recortan); la ola y el
   blanco de abajo lo tapan. Encuadre de escritorio de la persona: el punto X/Y es el
   object-position y el centro del zoom, como en el hero del perfil. */
.professional-normal-card-ref .pnc-ref__banner{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.professional-normal-card-ref .pnc-ref__banner>img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--tb-x,50%) var(--tb-y,45%);
  transform:scale(var(--tb-zoom,1));transform-origin:var(--tb-x,50%) var(--tb-y,45%)}

/* ---------- Presencia: solo el punto (sin la píldora «En línea» desde el 2026-10-30) ---------- */
.professional-normal-card-ref .pnc-ref__presencia{
  position:absolute;left:17.68%;top:74.22%;width:5.21%;aspect-ratio:1;z-index:2;
  border-radius:50%;border:calc(5*var(--u)) solid #fff;background:#15b64b}

/* ---------- El cuerpo, pieza por pieza, en su coordenada ---------- */
.professional-normal-card-ref :where(.pnc-ref__nombre,.pnc-ref__profesion,
.pnc-ref__nota,.pnc-ref__cualidades,.pnc-ref__datos,.pnc-ref__descripcion,
.pnc-ref__temas,.pnc-ref__cifra,.pnc-ref__separador,.pnc-ref__ver,
.pnc-ref__favorito,.pnc-ref__favorito-form){position:absolute;z-index:2}

/* Identidad. El ancho se corta en 501 porque ahí empieza la caja de la nota. */
.professional-normal-card-ref .pnc-ref__nombre{
  left:calc(25*var(--u));top:calc(428*var(--u));
  width:calc(476*var(--u));height:calc(84*var(--u));
  display:flex;align-items:center;gap:calc(14*var(--u));
  color:var(--fcpro-nombre-color,inherit);
  font-size:calc(76*var(--u)*var(--fcpro-nombre-escala,1));
  font-weight:var(--fcpro-nombre-peso,800);line-height:1;letter-spacing:-.035em}
.professional-normal-card-ref .pnc-ref__nombre-texto{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Nombres largos (filtro largo_de_nombre): la caja no cambia; la letra se achica según
   el largo y desde 18 caracteres el nombre usa dos líneas en vez de cortarse en «…».
   Desde 2026-10-27 (legibilidad) va un escalón por largo entre 10 y 17: cada nombre
   lleva la letra más grande que le cabe junto a la insignia, medida con la fuente
   (unos 0,56 em por letra; uno con muchas W o M puede cortarse en «…», como antes). */
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-10{font-size:calc(72*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-11{font-size:calc(66*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-12{font-size:calc(58*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-13{font-size:calc(56*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-14{font-size:calc(52*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-15{font-size:calc(49*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-16{font-size:calc(46*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-17{font-size:calc(44*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-3{font-size:calc(40*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-4{font-size:calc(34*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-normal-card-ref .pnc-ref__nombre.nombre-largo-3 .pnc-ref__nombre-texto{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.05;overflow-wrap:anywhere}
.professional-normal-card-ref .pnc-ref__verificado{
  flex:none;font-size:calc(52*var(--u));line-height:1;color:var(--fcpro-acento,#0b6fe8)}
/* Hasta dos líneas: a la derecha está la caja de la nota, así que profesiones
   como «Especialista en marketing digital» no entran en una sola. */
.professional-normal-card-ref .pnc-ref__profesion{
  left:calc(25*var(--u));top:calc(507*var(--u));
  width:calc(476*var(--u));height:calc(92*var(--u));
  display:flex;align-items:center;overflow:hidden;
  color:var(--fcpro-profesion-color,#ff410b);
  font-size:calc(43*var(--u)*var(--fcpro-profesion-escala,1));
  font-weight:var(--fcpro-profesion-peso,600);
  line-height:calc(46*var(--u));letter-spacing:-.015em}
.professional-normal-card-ref .pnc-ref__profesion-texto{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}

/* Nota: la caja que la premium trae pintada en su lámina, aquí dibujada. */
.professional-normal-card-ref .pnc-ref__nota{
  left:calc(511*var(--u));top:calc(443*var(--u));
  width:calc(382*var(--u));height:calc(155*var(--u));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(10*var(--u));padding:0 calc(10*var(--u));
  border:calc(3*var(--u)) solid #bfdcff;border-radius:calc(34*var(--u));
  background:#f7fbff}
.professional-normal-card-ref .pnc-ref__nota>span{
  display:flex;align-items:baseline;gap:calc(9*var(--u));
  max-width:100%;line-height:1;white-space:nowrap}
/* Con la misma fuerza que «.pnc-ref__nota b», que si no le gana el azul. */
.professional-normal-card-ref .pnc-ref__nota .pnc-ref__estrella{
  font-size:calc(53*var(--u));line-height:1;
  color:var(--fcpro-estrella-color,var(--fcpro-acento,#ffad00))}
.professional-normal-card-ref .pnc-ref__nota strong{
  color:var(--fcpro-nota-color,inherit);
  font-size:calc(61*var(--u));font-weight:800;letter-spacing:-.04em}
.professional-normal-card-ref .pnc-ref__nota b{
  color:var(--fcpro-nota-cantidad-color,#005aff);
  font-size:calc(48*var(--u));font-weight:700;letter-spacing:-.03em}
/* 31 es lo más grande con que «Valoraciones de clientes» entra entera en la caja. */
.professional-normal-card-ref .pnc-ref__nota small{
  max-width:100%;color:var(--fcpro-nota-pie-color,#58658e);
  font-size:calc(31*var(--u));font-weight:500;
  line-height:1.15;letter-spacing:-.015em;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Cualidades: las reales de la persona, con la pieza del sitio. */
.professional-normal-card-ref .pnc-ref__cualidades{
  left:calc(18*var(--u));top:calc(604*var(--u));
  height:calc(72*var(--u));display:flex;align-items:center;gap:calc(5*var(--u))}
.professional-normal-card-ref .pnc-ref__cualidades .fc-cualidad-insignia{
  width:calc(72*var(--u));height:calc(72*var(--u));border-radius:50%}
.professional-normal-card-ref .pnc-ref__cualidades .fc-cualidad-insignia svg{
  width:calc(40*var(--u));height:calc(40*var(--u))}

/* Experiencia y ubicación. */
.professional-normal-card-ref .pnc-ref__datos{
  left:calc(25*var(--u));top:calc(691*var(--u));
  width:calc(868*var(--u));height:calc(58*var(--u));
  display:flex;align-items:center;gap:calc(42*var(--u));overflow:hidden;
  color:var(--fcpro-meta-color,#4f5a85);
  font-size:calc(41*var(--u));font-weight:500;line-height:1;
  letter-spacing:-.015em}
/* En bloque, no en flex: así la ubicación larga se corta con puntos en vez de
   empujar a la experiencia fuera de la fila. */
.professional-normal-card-ref .pnc-ref__datos>li{
  display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.professional-normal-card-ref .pnc-ref__datos>li:first-child{flex:none}
.professional-normal-card-ref .pnc-ref__datos i{
  display:inline-block;font-size:calc(46*var(--u));line-height:1;color:#1b2550;
  vertical-align:-.14em;margin-right:calc(13*var(--u))}

/* Descripción: dos líneas, con más aire entre ellas que antes. */
.professional-normal-card-ref .pnc-ref__descripcion{
  left:calc(25*var(--u));top:calc(761*var(--u));
  width:calc(868*var(--u));height:calc(104*var(--u));
  color:var(--fcpro-descripcion-color,#5a6490);
  font-size:calc(41*var(--u)*var(--fcpro-descripcion-escala,1));
  line-height:calc(52*var(--u));
  letter-spacing:-.015em;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}

/* Especialidades: dos filas, recortadas ahí mismo. */
.professional-normal-card-ref .pnc-ref__temas{
  left:calc(25*var(--u));top:calc(892*var(--u));
  width:calc(868*var(--u));height:calc(154*var(--u));
  display:flex;flex-wrap:wrap;align-content:flex-start;
  gap:calc(18*var(--u)) calc(20*var(--u));overflow:hidden}
.professional-normal-card-ref .pnc-ref__temas>li{
  display:flex;align-items:center;gap:calc(12*var(--u));
  max-width:100%;height:calc(68*var(--u));padding:0 calc(24*var(--u));
  border-radius:calc(34*var(--u));
  background:var(--fcpro-tag-fondo,var(--fcpro-secundario,#e8f0ff));
  color:var(--fcpro-tag-texto,var(--fcpro-principal,#004bff));
  box-shadow:inset 0 0 0 calc(2*var(--u)) var(--fcpro-tag-borde,transparent);
  font-size:calc(35*var(--u));font-weight:600;line-height:1;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden}
.professional-normal-card-ref .pnc-ref__temas i{
  flex:none;font-size:calc(38*var(--u));line-height:1}
.professional-normal-card-ref .pnc-ref__temas-mas{
  justify-content:center;min-width:calc(100*var(--u));
  background:#edf1f6;color:#52618c}

/* ---------- Cifras: trabajos y tarifa, con su raya al medio ---------- */
/* La caja de trabajos tomó 24 de la de tarifa (2026-10-27), que tenía de sobra: así
   «128 Trabajos» entra entero con la letra más grande. */
.professional-normal-card-ref .pnc-ref__cifra{
  top:calc(1111*var(--u));height:calc(86*var(--u));
  display:flex;align-items:center;justify-content:center;gap:calc(14*var(--u));
  border-radius:calc(25*var(--u));color:var(--fcpro-cifra-color,inherit);
  font-size:calc(43*var(--u));font-weight:700;
  line-height:1;letter-spacing:-.03em;white-space:nowrap;overflow:hidden}
.professional-normal-card-ref .pnc-ref__cifra i{font-size:calc(50*var(--u));line-height:1}
.professional-normal-card-ref .pnc-ref__cifra--trabajos{
  left:calc(25*var(--u));width:calc(323*var(--u));
  background:var(--fcpro-cifra-trabajos-fondo,var(--fcpro-secundario,#ebf0f7))}
.professional-normal-card-ref .pnc-ref__separador{
  left:calc(364*var(--u));top:calc(1111*var(--u));
  width:calc(5*var(--u));height:calc(86*var(--u));
  background:var(--fcpro-separador-color,var(--fcpro-principal,#9ec9f5))}
.professional-normal-card-ref .pnc-ref__cifra--precio{
  left:calc(387*var(--u));width:calc(506*var(--u));
  background:var(--fcpro-cifra-precio-fondo,var(--fcpro-secundario,#e8f3fc))}
.professional-normal-card-ref .pnc-ref__cifra--precio i{color:var(--fcpro-acento,#1685e0)}
.professional-normal-card-ref .pnc-ref__cifra--sin-tarifa{
  color:var(--fcpro-cifra-etiqueta-color,#5d688f);
  font-size:calc(38*var(--u));font-weight:600}
.professional-normal-card-ref .pnc-ref__cifra>span{
  min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- Botón «Ver perfil»: el mismo hueco que el de la premium ---------- */
.professional-normal-card-ref .pnc-ref__ver{
  left:calc(17*var(--u));top:calc(1223*var(--u));
  width:calc(880*var(--u));height:calc(150*var(--u));
  display:flex;align-items:center;justify-content:center;gap:calc(20*var(--u));
  overflow:hidden;border-radius:calc(75*var(--u));
  background:var(--fcpro-boton-fondo,linear-gradient(180deg,#2e9dff 0%,#0a7cf0 52%,#0062d6 100%));
  color:var(--fcpro-boton-texto,#fff);
  font-size:calc(52*var(--u));font-weight:700;letter-spacing:-.02em;
  line-height:1;
  /* Profundidad: el filo claro de arriba, el oscuro de abajo y la sombra que
     apoya el botón sobre la tarjeta. El primer inset es el borde que se puede
     configurar: transparente no pinta nada, y por ir por dentro no mueve el
     botón ni un píxel. */
  box-shadow:inset 0 0 0 calc(3*var(--u)) var(--fcpro-boton-borde,transparent),
    inset 0 calc(3*var(--u)) 0 rgba(255,255,255,.45),
    inset 0 calc(-4*var(--u)) 0 rgba(0,52,120,.35),
    0 calc(8*var(--u)) calc(16*var(--u)) var(--fcpro-boton-sombra,rgba(5,70,155,.28));
  transform:perspective(900px);transform-origin:50% 85%;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,
    filter .28s ease}
.professional-normal-card-ref .pnc-ref__ver i{
  font-size:calc(50*var(--u));line-height:1;
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
/* El brillo que lo recorre al pasar el mouse: una capa aparte, para no pisar
   el degradado del botón. */
.professional-normal-card-ref .pnc-ref__ver::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.38) 48%,transparent 68%);
  transform:translateX(-120%);opacity:0;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .2s ease}

@media (hover:hover) and (pointer:fine){
  .professional-normal-card-ref .pnc-ref__ver:hover{
    transform:perspective(900px) rotateX(8deg) translateY(calc(-5*var(--u))) scale(1.014);
    background:var(--fcpro-boton-hover,var(--fcpro-boton-fondo,linear-gradient(180deg,#2e9dff 0%,#0a7cf0 52%,#0062d6 100%)));
    box-shadow:inset 0 0 0 calc(3*var(--u)) var(--fcpro-boton-borde,transparent),
      inset 0 calc(3*var(--u)) 0 rgba(255,255,255,.55),
      inset 0 calc(-4*var(--u)) 0 rgba(0,52,120,.4),
      0 calc(13*var(--u)) calc(20*var(--u)) var(--fcpro-boton-sombra,rgba(5,70,155,.34));
    filter:saturate(1.08)}
  .professional-normal-card-ref .pnc-ref__ver:hover i{transform:translateX(calc(10*var(--u)))}
  .professional-normal-card-ref .pnc-ref__ver:hover::after{transform:translateX(120%);opacity:1}
  .professional-normal-card-ref .pnc-ref__ver:active{
    transform:perspective(900px) rotateX(3deg) translateY(calc(2*var(--u))) scale(.996);
    box-shadow:inset 0 calc(2*var(--u)) 0 rgba(255,255,255,.3),
      inset 0 calc(-2*var(--u)) 0 rgba(0,52,120,.45),
      0 calc(4*var(--u)) calc(8*var(--u)) rgba(5,70,155,.3);
    transition-duration:.08s}
}
/* En táctil no hay «pasar el mouse»: solo el hundimiento al pulsar, y el brillo
   no se dispara nunca. */
@media (hover:none),(pointer:coarse){
  .professional-normal-card-ref .pnc-ref__ver:active{
    transform:perspective(900px) translateY(calc(3*var(--u))) scale(.994);
    box-shadow:inset 0 calc(2*var(--u)) 0 rgba(255,255,255,.3),
      inset 0 calc(-2*var(--u)) 0 rgba(0,52,120,.45),
      0 calc(3*var(--u)) calc(6*var(--u)) rgba(5,70,155,.3)}
}
/* Quien pidió menos movimiento conserva el relieve, pero nada se mueve. */
@media (prefers-reduced-motion:reduce){
  .professional-normal-card-ref .pnc-ref__ver,
  .professional-normal-card-ref .pnc-ref__ver i,
  .professional-normal-card-ref .pnc-ref__ver::after{transition:none}
  .professional-normal-card-ref .pnc-ref__ver:hover{transform:perspective(900px)}
  .professional-normal-card-ref .pnc-ref__ver:hover::after{opacity:0}
}

.professional-normal-card-ref .pnc-ref__ver:focus-visible,
.professional-normal-card-ref .pnc-ref__ampliar-foto:focus-visible,
.professional-normal-card-ref .pnc-ref__favorito:focus-visible{
  outline:3px solid #0a2a6b;outline-offset:3px}

/* ---------- Favorito: no está en la referencia, pero es una acción real ---------- */
.professional-normal-card-ref .pnc-ref__favorito-form{
  left:calc(807*var(--u));top:calc(19*var(--u));
  width:calc(70*var(--u));height:calc(70*var(--u));z-index:3}
.professional-normal-card-ref .pnc-ref__favorito{
  position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#ffffffe6;color:#0a4bd0;font-size:calc(38*var(--u));cursor:pointer;
  box-shadow:0 calc(3*var(--u)) calc(10*var(--u)) rgba(16,38,78,.18);
  transition:background .18s ease,color .18s ease}
.professional-normal-card-ref a.pnc-ref__favorito{
  left:calc(807*var(--u));top:calc(19*var(--u));
  width:calc(70*var(--u));height:calc(70*var(--u))}
.professional-normal-card-ref .pnc-ref__favorito:hover{background:#fff;color:#0536a0}
.professional-normal-card-ref .pnc-ref__favorito--guardado{color:#d7263d}
.professional-normal-card-ref .pnc-ref__favorito i{line-height:1}

.professional-normal-card-ref .pnc-ref__oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}