/* Tarjeta premium del profesional (Gold y Silver) en los listados.

   Réplica de referencias/oro y referencias/silver, armada como su index.html y
   su editable.html: el arte es la lámina misma
   (img/listados/destacada/<plan>/arte.webp, 1024 × 1536) y aquí solo se colocan
   encima los datos reales, en las coordenadas que ocupan en ella. Nada de la
   lámina se redibuja con degradados: el marco, la escena, "Destacado", la
   cápsula del plan, la ola, el aro del avatar, la corona, la caja de la nota,
   la raya dorada y el botón "Ver perfil" son la imagen.

   --u es 1 px de la lámina, así que cada medida de este archivo es la
   coordenada medida sobre ella. La tarjeta es su propio contenedor y escala con
   la celda del listado sin media queries.

   Aislamiento: todo cuelga de .professional-featured-card-ref y el bloque de
   reseteo anula lo que busqueda.css, style.css o Bootstrap pudieran imponer.
   Los colores de los textos son los únicos que cambian entre planes; están al
   final, en .--silver.

   Markup en partials/tarjeta_destacada.html. */

.professional-featured-card-ref{
  --u:calc(100cqw / 1024);
  /* Oro por defecto; .--silver redefine lo que cambia.
     Paleta del admin (home.ProfessionalCardStyle, filas Gold y Silver): cada
     var(--fcpro-…) cae en el valor de siempre mientras nadie la configure. Solo
     llega a lo que se dibuja ENCIMA de la lámina; el marco, la corona, la ola,
     la cinta «Destacado», la caja de la nota con su estrella y el botón son la
     imagen y no se recolorean. */
  --pfc-nota-pie:var(--fcpro-nota-pie-color,#58658e);
  --pfc-tema-fondo:var(--fcpro-tag-fondo,var(--fcpro-secundario,#e4eefd));
  --pfc-tema-texto:var(--fcpro-tag-texto,var(--fcpro-principal,#004bff));
  --pfc-cifra-precio:var(--fcpro-cifra-precio-fondo,var(--fcpro-secundario,#fff3de));
  /* align-self: en una grilla, sin esto el alto de la fila pisaría la
     proporción de la lámina 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 mide 1024 x 1536, pero el marco de la lámina empieza adentro: medido
     sobre arte.webp, en oro a 40/62/40/61 y en plata a 39/61/39/59, con las
     esquinas redondeadas en unos 57 px de lámina. Sin esto la luz se dibujaba
     del tamaño de la caja y con las esquinas en punta, y el blanco del
     resplandor asomaba por fuera del marco dorado. En por ciento de la caja:
     arriba 61/1536, derecha 39/1024, abajo 60/1536, izquierda 39/1024. */
  --c3d-luz-sangria:3.971% 3.809% 3.906% 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:#090c32;text-align:left}

/* Reseteo acotado: nada de fuera manda dentro de la tarjeta. */
.professional-featured-card-ref,.professional-featured-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-featured-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-featured-card-ref :where(img,svg){display:block;max-width:none}

/* ---------- Las dos capas: la foto real y el arte encima ---------- */
/* El hueco del aro mide 196 y está centrado en (187, 348) de la lámina: el
   arte agranda el aro un 18 % (referencias/generar-arte-tarjeta.py) y el hueco
   llega hasta debajo del metal, sin el anillo de foto ajena que quedaba antes. */
.professional-featured-card-ref .pfc-ref__ampliar-foto,
.professional-featured-card-ref .pfc-ref__avatar{
  position:absolute;left:calc(89*var(--u));top:calc(250*var(--u));
  width:calc(196*var(--u));height:calc(196*var(--u));border-radius:50%;z-index:1}
.professional-featured-card-ref .pfc-ref__avatar{object-fit:cover;background:#eef2f8}
/* Cuando la foto se puede ampliar, la caja es el enlace y la imagen lo llena:
   si heredara las coordenadas se iría a sumarlas por segunda vez. */
.professional-featured-card-ref .pfc-ref__ampliar-foto{overflow:hidden}
.professional-featured-card-ref .pfc-ref__ampliar-foto>.pfc-ref__avatar{
  position:static;width:100%;height:100%}
/* El arte recorta la foto con su propio metal, así que va por delante; los
   enlaces que hay debajo siguen siendo clicables. */
.professional-featured-card-ref .pfc-ref__arte{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;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 lámina con la foto transparente. La
   caja es la de la escena, por dentro del marco (x 55, y 75 de la lámina, con las
   esquinas de arriba del borde interior): así no asoma fuera del metal. Las cintas, el
   medallón y el blanco del cuerpo tapan el resto. 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-featured-card-ref .pfc-ref__banner{
  position:absolute;left:calc(55*var(--u));top:calc(75*var(--u));
  width:calc(914*var(--u));height:calc(431*var(--u));z-index:0;overflow:hidden;
  border-radius:calc(41*var(--u)) calc(41*var(--u)) 0 0;pointer-events:none}
.professional-featured-card-ref .pfc-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-featured-card-ref .pfc-ref__presencia{
  position:absolute;left:calc(213*var(--u));top:calc(405*var(--u));
  width:calc(40*var(--u));height:calc(40*var(--u));border-radius:50%;
  border:calc(4.7*var(--u)) solid #fff;background:#15b64b;z-index:3}

/* ---------- Identidad ---------- */
.professional-featured-card-ref :where(.pfc-ref__nombre,.pfc-ref__profesion,
.pfc-ref__nota,.pfc-ref__nota-pie,.pfc-ref__datos,.pfc-ref__descripcion,
.pfc-ref__temas,.pfc-ref__cifra,.pfc-ref__separador,.pfc-ref__ver,
.pfc-ref__favorito,.pfc-ref__favorito-form){position:absolute;z-index:3}
/* El ancho se corta en 566 porque ahí empieza la caja de la nota de la lámina. */
.professional-featured-card-ref .pfc-ref__nombre{
  left:calc(80*var(--u));top:calc(505*var(--u));
  width:calc(486*var(--u));height:calc(84*var(--u));
  display:flex;align-items:center;gap:calc(16*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,700);line-height:1;letter-spacing:-.04em}
.professional-featured-card-ref .pfc-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 «…».
   Los mismos escalones que la tarjeta sin plan (css/tarjeta-normal-ref.css), cuya caja
   es 10 más angosta: un nombre mide igual en las dos. */
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-10{font-size:calc(72*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-11{font-size:calc(66*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-12{font-size:calc(58*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-13{font-size:calc(56*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-14{font-size:calc(52*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-15{font-size:calc(49*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-16{font-size:calc(46*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-17{font-size:calc(44*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-3{font-size:calc(40*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-4{font-size:calc(34*var(--u)*var(--fcpro-nombre-escala,1))}
.professional-featured-card-ref .pfc-ref__nombre.nombre-largo-3 .pfc-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-featured-card-ref .pfc-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 el ancho se
   corta en 566 igual que el del nombre, y profesiones como "Especialista en
   marketing digital" no entran en una sola. Antes se cortaban a mitad de letra:
   en un contenedor flex, text-overflow no actúa sobre el texto suelto. */
/* Dos líneas de 46 llegan a 676, antes de las cualidades (681). */
.professional-featured-card-ref .pfc-ref__profesion{
  left:calc(80*var(--u));top:calc(584*var(--u));
  width:calc(486*var(--u));height:calc(92*var(--u));
  display:flex;align-items:center;overflow:hidden;
  color:var(--fcpro-profesion-color,#ff410b);
  font-size:calc(44*var(--u)*var(--fcpro-profesion-escala,1));
  font-weight:var(--fcpro-profesion-peso,inherit);
  line-height:calc(46*var(--u));letter-spacing:-.02em}
.professional-featured-card-ref .pfc-ref__profesion-texto{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}

/* ---------- Nota: dentro de la caja que ya trae la lámina ---------- */
/* La estrella de la lámina llega a 657 y el separador está en 860. */
.professional-featured-card-ref .pfc-ref__nota{
  left:calc(668*var(--u));top:calc(544*var(--u));
  width:calc(188*var(--u));height:calc(64*var(--u));
  display:flex;align-items:center;gap:calc(10*var(--u));
  font-size:calc(58*var(--u));line-height:1;white-space:nowrap;overflow:hidden}
.professional-featured-card-ref .pfc-ref__nota>strong{
  color:var(--fcpro-nota-color,inherit);font-weight:800;letter-spacing:-.04em}
.professional-featured-card-ref .pfc-ref__nota>b{
  color:var(--fcpro-nota-cantidad-color,#005aff);
  font-weight:700;font-size:calc(50*var(--u));letter-spacing:-.03em}
/* La leyenda ya no se frena en la rayita: el arte alarga la caja 30 px hacia
   abajo y acorta esa rayita (referencias/generar-arte-tarjeta.py), así esta
   línea ocupa el ancho entero de la caja y entra al triple de tamaño que
   cuando compartía fila con el ícono de la gente. */
.professional-featured-card-ref .pfc-ref__nota-pie{
  left:calc(592*var(--u));top:calc(618*var(--u));
  width:calc(340*var(--u));height:calc(56*var(--u));
  display:flex;align-items:center;
  color:var(--pfc-nota-pie);font-size:calc(30*var(--u));line-height:1;
  letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Sin valoraciones aún" es más corto que "Valoraciones de clientes", así que
   entra más grande y se deja de ver como letra chica. */
.professional-featured-card-ref .pfc-ref__nota-pie--sin{font-size:calc(35*var(--u))}

/* ---------- Cualidades: los cinco círculos de la lámina, con las reales ---------- */
.professional-featured-card-ref .pfc-ref__cualidades{
  position:absolute;z-index:3;left:calc(73*var(--u));top:calc(681*var(--u));
  display:flex;align-items:center;gap:calc(3.6*var(--u))}
.professional-featured-card-ref .pfc-ref__cualidades .fc-cualidad-insignia{
  width:calc(72*var(--u));height:calc(72*var(--u));border-radius:50%}
.professional-featured-card-ref .pfc-ref__cualidades .fc-cualidad-insignia svg{
  width:calc(40*var(--u));height:calc(40*var(--u))}

/* ---------- Experiencia y ubicación ---------- */
.professional-featured-card-ref .pfc-ref__datos{
  left:calc(80*var(--u));top:calc(768*var(--u));
  width:calc(868*var(--u));height:calc(56*var(--u));
  display:flex;align-items:center;gap:calc(46*var(--u));overflow:hidden;
  color:var(--fcpro-meta-color,#55618e);
  font-size:calc(42*var(--u));line-height:1;letter-spacing:-.02em}
/* 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-featured-card-ref .pfc-ref__datos>li{
  display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.professional-featured-card-ref .pfc-ref__datos>li:first-child{flex:none}
.professional-featured-card-ref .pfc-ref__datos i{
  display:inline-block;font-size:calc(46*var(--u));line-height:1;color:#1b2550;
  vertical-align:-.14em;margin-right:calc(14*var(--u))}

/* ---------- Descripción: dos líneas, como en la lámina ---------- */
.professional-featured-card-ref .pfc-ref__descripcion{
  left:calc(80*var(--u));top:calc(838*var(--u));
  width:calc(868*var(--u));height:calc(100*var(--u));
  color:var(--fcpro-descripcion-color,#606a96);
  font-size:calc(42*var(--u)*var(--fcpro-descripcion-escala,1));
  line-height:calc(49*var(--u));
  letter-spacing:-.025em;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* ---------- Especialidades ---------- */
.professional-featured-card-ref .pfc-ref__temas{
  left:calc(80*var(--u));top:calc(969*var(--u));
  width:calc(868*var(--u));height:calc(150*var(--u));
  display:flex;flex-wrap:wrap;align-content:flex-start;
  gap:calc(19*var(--u)) calc(20*var(--u));overflow:hidden}
.professional-featured-card-ref .pfc-ref__temas>li{
  display:flex;align-items:center;gap:calc(12*var(--u));
  max-width:100%;height:calc(66*var(--u));padding:0 calc(20*var(--u));
  border-radius:calc(33*var(--u));background:var(--pfc-tema-fondo);
  color:var(--pfc-tema-texto);
  box-shadow:inset 0 0 0 calc(2*var(--u)) var(--fcpro-tag-borde,transparent);
  font-size:calc(34*var(--u));font-weight:700;
  line-height:1;letter-spacing:-.03em;white-space:nowrap;overflow:hidden}
.professional-featured-card-ref .pfc-ref__temas i{
  flex:none;font-size:calc(38*var(--u));line-height:1}
.professional-featured-card-ref .pfc-ref__temas-mas{
  justify-content:center;min-width:calc(100*var(--u));
  background:#ecf0f4;color:#52618c}

/* ---------- Cifras: trabajos y tarifa, bajo la raya de la lámina ---------- */
/* Trabajos tomó 24 de la tarifa (2026-10-27), como en la tarjeta sin plan. */
.professional-featured-card-ref .pfc-ref__cifra{
  top:calc(1188*var(--u));height:calc(86*var(--u));
  display:flex;align-items:center;justify-content:center;gap:calc(15*var(--u));
  border-radius:calc(25*var(--u));color:var(--fcpro-cifra-color,inherit);
  font-size:calc(44*var(--u));font-weight:700;
  line-height:1;letter-spacing:-.035em;white-space:nowrap;overflow:hidden}
.professional-featured-card-ref .pfc-ref__cifra i{font-size:calc(52*var(--u));line-height:1}
.professional-featured-card-ref .pfc-ref__cifra--trabajos{
  left:calc(80*var(--u));width:calc(323*var(--u));
  background:var(--fcpro-cifra-trabajos-fondo,var(--fcpro-secundario,#ebf0f7))}
.professional-featured-card-ref .pfc-ref__separador{
  left:calc(419*var(--u));top:calc(1188*var(--u));
  width:calc(5*var(--u));height:calc(86*var(--u));
  background:var(--fcpro-separador-color,var(--fcpro-principal,#fdd365))}
.professional-featured-card-ref .pfc-ref__cifra--precio{
  left:calc(442*var(--u));width:calc(506*var(--u));background:var(--pfc-cifra-precio)}
.professional-featured-card-ref .pfc-ref__cifra--precio i{color:var(--fcpro-acento,#f59200)}
.professional-featured-card-ref .pfc-ref__cifra--sin-tarifa{
  color:var(--fcpro-cifra-etiqueta-color,inherit);font-size:calc(38*var(--u))}
.professional-featured-card-ref .pfc-ref__cifra>span{
  min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- Botón: el de la lámina, con su enlace encima ---------- */
.professional-featured-card-ref .pfc-ref__ver{
  left:calc(72*var(--u));top:calc(1300*var(--u));
  width:calc(887*var(--u));height:calc(150*var(--u));
  border-radius:calc(75*var(--u));display:block}
.professional-featured-card-ref .pfc-ref__ver:focus-visible,
.professional-featured-card-ref .pfc-ref__ampliar-foto:focus-visible,
.professional-featured-card-ref .pfc-ref__favorito:focus-visible{
  outline:3px solid #0a6cff;outline-offset:3px}

/* ---------- Favorito: no está en la lámina, pero es una acción del listado ---------- */
.professional-featured-card-ref .pfc-ref__favorito-form{
  left:calc(862*var(--u));top:calc(96*var(--u));
  width:calc(70*var(--u));height:calc(70*var(--u))}
.professional-featured-card-ref .pfc-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:rgba(9,12,50,.55);color:#fff;font-size:calc(38*var(--u));
  cursor:pointer;transition:background .18s ease,color .18s ease}
.professional-featured-card-ref a.pfc-ref__favorito{
  left:calc(862*var(--u));top:calc(96*var(--u));
  width:calc(70*var(--u));height:calc(70*var(--u))}
.professional-featured-card-ref .pfc-ref__favorito:hover{background:rgba(9,12,50,.78)}
.professional-featured-card-ref .pfc-ref__favorito--guardado{background:#ffb000;color:#17204a}
.professional-featured-card-ref .pfc-ref__favorito i{line-height:1}

.professional-featured-card-ref .pfc-ref__oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Silver: solo cambia lo que en su lámina es gris ---------- */
.professional-featured-card-ref--silver{
  --pfc-tema-fondo:var(--fcpro-tag-fondo,var(--fcpro-secundario,#e5effc));
  --pfc-cifra-precio:var(--fcpro-cifra-precio-fondo,var(--fcpro-secundario,#edeff2))}
.professional-featured-card-ref--silver .pfc-ref__separador{
  background:var(--fcpro-separador-color,var(--fcpro-principal,#aaafb8))}
.professional-featured-card-ref--silver .pfc-ref__cifra--trabajos{
  background:var(--fcpro-cifra-trabajos-fondo,var(--fcpro-secundario,#eaf1f8))}
.professional-featured-card-ref--silver .pfc-ref__cifra--precio i{
  color:var(--fcpro-acento,#8a93a3)}