/* Perfil público de un freelancer (templates/access/public_profile.html).
   Diseño: referencias/FreelanClick_PERFIL_BANNER_COMPLETO_V3 (lámina de 1310 × 1200), con sus medidas.
   Todo bajo .pf para que Bootstrap y style.css no toquen la geometría. Letra: Roboto, la de la
   referencia (fonts/perfil/, licencia en LICENSE.txt), solo dentro del perfil.

   El resto de la página sigue a esa lámina y --u es 1 px suyo (1/1310 del ancho). El banner ya
   no: desde el 2026-10-18 es el de referencias/bannerespacio, una imagen a todo lo ancho con su
   proporción, en partials/banner_perfil.html y css/banner-perfil.css. */
@font-face{font-family:'Roboto Perfil';src:url("../fonts/perfil/roboto-400.1c9ed455ba9c.woff") format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto Perfil';src:url("../fonts/perfil/roboto-700.696b0cbde3a2.woff") format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Roboto Perfil';src:url("../fonts/perfil/roboto-900.34a388fc7497.woff") format('woff');font-weight:900;font-display:swap}

.pf-defs{position:absolute;width:0;height:0;overflow:hidden}
.pf{--pf-tinta:#0b0b30;--pf-gris:#7c87a5;--pf-azul:#0066ff;--pf-naranja:#ff5908;--pf-linea:#eaf0f8;
  /* Contenedor con nombre (pf): el banner elige su encuadre por dispositivo con
     @container pf (banner-perfil.css), sin que otro contenedor intermedio lo confunda. */
  position:relative;container:pf/inline-size;overflow-x:clip;color:var(--pf-tinta);font:13px 'Roboto Perfil',Arial,sans-serif;text-align:left;
  background:radial-gradient(ellipse at 14% 47%,#eaf8ff99,transparent 48%),radial-gradient(ellipse at 86% 68%,#edf8ff80,transparent 54%),#f5fbfe}
.pf *,.pf *::before,.pf *::after{box-sizing:border-box}
.pf :where(h1,h2,h3,p,ul,li,figure){margin:0;padding:0;list-style:none}
.pf :is(h1,h2,h3){font-family:inherit;color:inherit;margin:0}
/* Tipografía del perfil (solo Gold): las pilas viven en perfil-personalizacion.css. */
.pf--fuente-moderna{font-family:var(--fuente-perfil-moderna)}
.pf--fuente-elegante{font-family:var(--fuente-perfil-elegante)}
.pf--fuente-clasica{font-family:var(--fuente-perfil-clasica)}
.pf--fuente-profesional{font-family:var(--fuente-perfil-profesional)}
/* Colores explícitos: las reglas globales por elemento (p, h1…) le ganarían a la herencia. */
.pf p,.pf li{color:inherit}
.pf :where(a){color:inherit;text-decoration:none}
.pf :where(button){margin:0;font:inherit;color:inherit;cursor:pointer}
.pf :where(a,button):focus-visible{outline:3px solid var(--pf-azul);outline-offset:3px}
.pf svg{flex-shrink:0}
.pf [hidden]{display:none!important}

/* ---------- Hero ----------
   El de referencias/perfil-profesional: los datos ENCIMA del banner. Medido en su PNG, donde el
   hero ocupa 1254 × 227 (una proporción de 5,5) y el texto arranca al 5,75 % del ancho. Desde el
   2026-10-27 nada tapa el banner (ni el azul noche de la referencia ni su cinta dorada). El
   gris oscuro de .pf-hero es solo el fondo mientras la imagen carga, para que el texto blanco
   se lea; el banner lo cubre entero.

   Sustituye a la cabecera del 2026-10-18 (referencias/FreelanClick_PERFIL_BANNER_COMPLETO_V3),
   que ponía el banner limpio y los datos debajo. Las dos referencias se contradicen en esto.

   El banner real lo sigue trayendo partials/banner_perfil.html con su lógica de siempre —color
   predefinido, imagen aprobada o arte de reserva—. Esa pieza la comparte la vista previa de la
   ficha, así que no se toca: aquí solo se le da sitio y tamaño. */
.pf-hero{position:relative;z-index:1;isolation:isolate;overflow:hidden;
  /* Alto FIJO según el ancho (2026-10-28), nunca según el texto. Hasta ese día el alto lo
     marcaba el texto (con un mínimo de 168-250 px) y el banner llenaba ese alto con
     object-fit:cover: cualquier cosa que cambiara el alto —la fila de insignias (GOLD,
     SILVER, Destacado), «Disponible ahora», que depende de si la persona está conectada
     (en su vista previa siempre lo está), una presentación de una o tres líneas, un nombre
     en dos líneas— cambiaba la proporción de la caja, y el MISMO foco y zoom recortaban
     otra parte de la imagen. La vista previa de «Editar perfil» y el perfil público no
     coincidían, sobre todo en lo de abajo del banner.
     Ahora la caja del banner depende solo del ancho, así que el encuadre es el mismo para
     cualquier contenido. Los altos son los del peor caso medido de cada ancho (nombre en
     dos líneas, profesión larga, presentación en su tope de líneas y las tres insignias)
     más un margen: ningún texto se corta, y en un perfil con poco texto se ve más banner
     debajo. Van en cqw, el ancho de .pf (container-type), y no en vw: en la vista previa
     (un iframe sin barra de desplazamiento) y en la página (con barra) el vw difiere unos
     10 px, el ancho de .pf no. */
  height:var(--pf-hero-alto);
  background:#2a2e35}
/* Teléfono: más alto en los anchos chicos, donde nombre y profesión se parten en dos líneas. */
.pf-hero{--pf-hero-alto:338px}
@container (min-width:500px){.pf-hero{--pf-hero-alto:320px}}
/* Tablet: la presentación usa el ancho entero; cerca de 1000 la letra ya es mayor y el peor
   caso sube un poco. */
@container (min-width:641px){.pf-hero{--pf-hero-alto:max(334px,248px + 10cqw)}}
/* Escritorio: sube con la letra, que crece con el ancho hasta su tope (≈1250 px), y después
   solo con los rellenos y las insignias, que siguen el ancho. La profesión cuenta con dos
   líneas: admite 100 caracteres (profesiones.MAX_LARGO_PROFESION) y no pasa del 62 %. */
/* Desde 1000 de .pf y no de pantalla: la letra cambia con la pantalla (barra incluida), así
   que entre 990 y 999 de .pf puede haber letra de tablet (vista previa, sin barra) o de
   escritorio (página, con barra); el alto de tablet de ahí alcanza para las dos. */
@container (min-width:1000px){.pf-hero{--pf-hero-alto:min(120px + 21.25cqw,349px + 3.6cqw)}}
.pf-hero__arte{position:absolute;inset:0;z-index:0}
/* El banner llena el hero en vez de marcar su propio alto: dentro del hero manda el hero. */
.pf-hero .bnp{width:100%;height:100%;margin:0;border-radius:0}
.pf-hero .bnp__ampliar,.pf-hero .bnp__imagen{display:block;width:100%;height:100%}
/* Qué parte de la imagen se ve (object-position) y con cuánto zoom lo decide el encuadre de
   la persona, en banner-perfil.css: aquí no se fija ningún encuadre. */
.pf-hero .bnp__imagen{object-fit:cover}
/* Sin tope de alto dentro del hero (2026-10-27). banner-perfil.css fija la imagen y el color
   predefinido de .bnp--cabecera en 200-320 px según el ancho, con más fuerza que la regla de
   arriba; cuando el texto hace el hero más alto que eso (móvil, presentación larga, la fila de
   insignias) asomaba debajo el degradado azul de .pf-hero, que el velo azul tapaba. Con más
   fuerza todavía, el banner llena siempre el hero entero. */
.pf .pf-hero .bnp.bnp--cabecera{height:100%;max-width:none;aspect-ratio:auto}
.pf .pf-hero .bnp--cabecera .bnp__imagen{height:100%;max-height:none;aspect-ratio:auto}
/* Nada encima del banner (2026-10-27): se ve tal como lo subió la persona o como es el
   predeterminado que eligió. Aquí iban un velo (.pf-hero__arte::after: el azul noche de la
   referencia y después un degradado negro) y la cinta dorada de la esquina de abajo a la
   izquierda (.pf-hero::after, img/perfil/ola-hero.webp); los dos ensuciaban la imagen y se
   quitaron. El contraste lo da solo la sombra de las letras (.pf-hero__datos). */
/* Los textos no capturan el ratón salvo los enlaces: así el banner se sigue pudiendo abrir en
   grande, que es una acción real que la referencia no tiene pero la página sí.
   El bloque no va en la rejilla de las tarjetas: la referencia lo mete un 5,8 % hacia dentro
   del escenario de 1254, así que queda algo más adentro que ellas. Medido en el PNG: la tinta
   arranca en x 76 y la tarjeta en x 42. */
.pf-hero__datos{position:relative;z-index:1;pointer-events:none;
  width:min(1254px,100%);margin-inline:auto;
  /* El relleno de abajo es el que reserva el hueco por donde sube la ficha del cuerpo.
     Sube de 54-72 a 64-88 (2026-10-24): la presentación pasó a tres líneas y, aun con la
     línea de especializaciones fuera, el texto tenía que dejar de llegar tan cerca del
     borde blanco. */
  padding:clamp(14px,1.76cqw,22px) 5.8% clamp(64px,6.4cqw,88px);color:#fff;
  /* Una columna en flujo (2026-10-27): ruta, nombre, profesión, presentación e insignias,
     una debajo de otra. Nada va en posición absoluta, así que un nombre o una presentación
     más largos empujan hacia abajo y el hero crece (su alto es un mínimo), en vez de
     cortarse o pisar otra pieza. */
  display:flex;flex-direction:column;
  /* Tan alta como el hero (2026-10-31): el hueco que sobra bajo la descripción queda dentro
     de la columna y las insignias bajan a él (.pf-insignias, margin-top:auto). El relleno de
     abajo sigue reservando el paso de la ficha del cuerpo. */
  min-height:100%;
  /* Contraste sobre cualquier banner, claro u oscuro, sin tocar la imagen: una sombra pegada
     a cada letra y un halo corto alrededor. */
  text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 8px rgba(0,0,0,.5),0 0 18px rgba(0,0,0,.3)}
.pf-hero__datos :is(a,button){pointer-events:auto}
/* Aire entre la ruta y el bloque de nombre, profesión y descripción (2026-10-31): el bloque
   (.pf-hero__texto) baja entero, la ruta no se mueve. Es un elemento flexible y no un margen
   porque solo puede usar el hueco que sobra: crece hasta su tope (8-16 px según el ancho de
   .pf) y, con el texto en su peor caso, donde ya no sobra nada, se queda en 0. Así el bloque
   nunca empuja las insignias ni les quita sus 28 px de separación, y el alto del hero no
   cambia. Como ítem flexible le gana el hueco al margin-top:auto de .pf-insignias, que se
   queda con el resto. order:-1 deja la ruta delante de este ::before, que va primero en el
   DOM. */
.pf-hero__datos::before{content:"";flex:1 0 0;max-height:clamp(8px,1cqw,16px)}
.pf-hero .pf-miga{order:-1}
/* La letra chica (ruta y presentación) necesita una sombra más cerrada: sobre un banner claro
   la de arriba no le alcanza. */
.pf-hero .pf-miga,.pf-hero__resumen{
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 5px rgba(0,0,0,.7),0 0 14px rgba(0,0,0,.45)}
/* El nombre ocupa su línea entera desde que las insignias bajaron a su propia fila
   (2026-10-27): en una línea si cabe y, si no, en dos, nunca cortado en «…» antes de eso. */
.pf-hero__nombre{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere}
/* Hasta dos líneas, como el nombre (2026-10-28): con el alto del hero fijo, una profesión
   sin tope era lo único que todavía podía pasarse de él. */
.pf-hero__profesion{margin-top:2px;color:#fff;font-weight:700;
  font-size:clamp(15px,1.6cqw,20px);line-height:1.1;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
/* La línea de especializaciones (.pf-hero__servicios) se retiró del hero el 2026-10-24
   y con ella sus reglas: las áreas de interés se ven en la sección «Especialidades». */
/* Casi blanca (2026-10-27): el celeste #cddcf0 era para el azul noche, y sin velo se perdía. */
/* La descripción breve (User.short_description desde el 2026-10-31; antes, «Quién soy»
   recortado): tres líneas como tope en todos los anchos (el teléfono tenía cuatro). Sus
   200 caracteres caben ahí casi siempre; esto solo protege el alto fijo del hero, el texto
   guardado no se toca. Una palabra
   sin espacios (una URL, «ASDFASDF…») se parte donde haga falta (anywhere) en vez de
   empujar la caja; las palabras normales se siguen partiendo en sus espacios. */
.pf-hero__resumen{margin-top:7px;overflow:hidden;color:#f1f5fa;
  font-size:clamp(12px,1.12cqw,14px);line-height:1.45;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  white-space:normal;overflow-wrap:anywhere}

/* Zona segura del texto (2026-10-28). Nombre, profesión, presentación e insignias viven en
   una columna de ancho acotado a la izquierda del banner, para que la imagen se siga viendo.
   Hasta ese día solo se acotaba en escritorio (62 % / 58 % del escenario de 1254, ~50 % del
   hero a 1366) y por debajo de 1000 el texto usaba el ancho entero: en tablet llegaba al
   88 % del hero y una presentación larga lo cruzaba casi completo.
     móvil       el ancho menos los márgenes (≤ 88 % del hero)
     tablet      ~56 % del hero (320-520 px)
     escritorio  ~36 % del hero (360-640 px)
   Todo se mide en el ancho de .pf (cqw y @container), como el alto del hero y el
   encuadre del banner: la vista previa (un iframe sin barra) y el perfil (con barra)
   resuelven igual. El alto del hero NO depende de esto: es fijo (6beda82) y estos límites
   de líneas son los que su peor caso ya contempla. */
.pf-hero__datos{--pf-zona:min(88cqw,100cqw - 40px)}
@container (min-width:641px){.pf-hero__datos{--pf-zona:clamp(320px,56cqw,520px)}}
@container (min-width:1000px){.pf-hero__datos{--pf-zona:clamp(360px,36cqw,640px)}}
/* La ruta (.pf-miga) queda fuera a propósito: es una línea con «…» en escritorio y por
   debajo de 1000 se parte en su ancho de siempre; acotarla le sumaría líneas y alto. */
.pf-hero h1,.pf-hero__profesion,.pf-hero__resumen{max-width:var(--pf-zona)}
/* Teléfono: el margen fijo en 20 px, como la referencia
   (antes con @media max-width:650px de pantalla; ahora con el ancho de .pf, igual que el
   resto). Lo que cambia de la trayectoria y de los servicios a este ancho va al final del
   archivo, después de sus reglas base. */
@container (max-width:640.98px){
  .pf-hero__datos{padding:18px 20px 45px}
}
/* La ruta nunca se sale: si no cabe, cada tramo se acorta con puntos suspensivos. Casi blanca
   (2026-10-27): los celestes de la referencia eran para el azul noche, y sobre un banner claro
   se perdían. */
.pf-miga{display:flex;align-items:center;flex-wrap:nowrap;max-width:100%;
  color:#eef3fa;font-size:clamp(11px,1.12cqw,14px);line-height:1.35}
.pf-miga a,.pf-miga strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-miga a:hover{text-decoration:underline}
.pf-miga>span{flex:none;margin:0 7px;color:#d6e0ec}
.pf-miga strong{font-weight:700;color:#fff}
/* Solo el nombre (2026-10-27). Hasta ese día llevaba al lado sus insignias, como en la
   referencia, y un nombre largo quedaba apretado o cortado por ellas. */
.pf-hero h1{display:block;margin-top:10px;
  color:#fff;font-weight:700;
  font-size:clamp(26px,2.87cqw,36px);line-height:1.18;letter-spacing:-.01em}
/* Fila propia de las insignias, debajo de todo el texto. El hueco es mayor que el aura del
   arte (24 % del alto a cada lado), para que dos insignias no se monten. Es el contenedor
   común de Destacado, el plan y Disponible, no una insignia sola.
   Abajo del hero (2026-10-31): margin-top:auto la lleva al fondo de la columna, sobre el
   relleno que reserva el paso de la ficha, en la zona vacía del banner. Los 28 px de
   separación mínima con el texto van como relleno superior: con el texto en su peor caso
   no sobra hueco y queda donde estaba, nunca encima de la descripción. */
.pf-insignias{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:auto;padding-top:28px;text-shadow:none}
.pf-insignia{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:700;white-space:nowrap}
.pf-insignia--destacado{background:linear-gradient(180deg,#ff6a1e,#ff4405);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
/* Nivel del plan y presencia (colores de la referencia V3). */
.pf-insignia--gold{background:linear-gradient(180deg,#fdd47a,#fbc666);color:#13263a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.pf-insignia--silver{background:linear-gradient(180deg,#f4f7fb,#c9d2de);color:#1d2c42;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.pf-insignia--disponible{background:linear-gradient(180deg,#049247,#007a35);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pf-insignia__punto{flex:none;border-radius:50%;background:currentColor}
.pf-insignia svg{fill:currentColor}
/* Insignias premium (referencias/insignias-premium.html): Destacado, GOLD y «Disponible ahora» son un mismo componente.
   El arte es el recorte de la referencia, sin fondo (static/img/insignias); la caja mide lo que mide la pastilla y el
   resplandor del arte sobresale. Comparten alto, forma y movimiento; cada variante solo fija su proporción y su
   animación. El texto real queda para lectores de pantalla. SILVER no está en la referencia y sigue como estaba. */
.pf-insignia.pf-insignia--premium{position:relative;display:block;flex:none;height:var(--pf-insignia-alto,34px);aspect-ratio:var(--pf-insignia-proporcion);padding:0;border-radius:999px;background:none;box-shadow:none}
.pf-insignia--destacado{--pf-insignia-proporcion:3.4009}
.pf-insignia--gold{--pf-insignia-proporcion:2.841}
.pf-insignia--disponible{--pf-insignia-proporcion:3.4823}
/* SILVER (2026-10-14): la cápsula de referencias/insigniasexito en plata; su aura mide
   un 19,73 % del alto (la de las premium, un 24 %). Sin animación, como esa referencia. */
.pf-insignia--silver{--pf-insignia-proporcion:3.3367}
.pf-insignia--silver .pf-insignia__arte{top:-19.73%;left:calc(var(--pf-insignia-alto,34px)*-.1973);height:139.46%}
.pf-insignia__arte{position:absolute;top:-24%;left:calc(var(--pf-insignia-alto,34px)*-.24);width:auto;max-width:none;height:148%;pointer-events:none;user-select:none}
.pf-insignia__texto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pf-insignia--premium::before,.pf-insignia--premium::after{content:"";position:absolute;border-radius:inherit;pointer-events:none}
/* Destacado y GOLD: un reflejo cruza la pastilla de izquierda a derecha cada varios segundos, con un resplandor leve. */
.pf-insignia--destacado::before,.pf-insignia--gold::before{inset:0;opacity:0;animation:pf-insignia-resplandor 7s ease-in-out infinite}
.pf-insignia--destacado::before{box-shadow:0 0 14px 2px rgba(255,120,40,.6)}
.pf-insignia--gold::before{box-shadow:0 0 14px 2px rgba(255,200,70,.65)}
.pf-insignia--destacado::after,.pf-insignia--gold::after{inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%) 130% 0/260% 100% no-repeat;animation:pf-insignia-reflejo 7s ease-in-out infinite}
.pf-insignia--destacado::before,.pf-insignia--destacado::after{animation-delay:2.4s}
/* Disponible ahora: solo late el punto de estado, con un halo que crece y se apaga. */
.pf-insignia--disponible::after{top:49.5%;left:calc(var(--pf-insignia-alto,34px)*.4605);width:calc(var(--pf-insignia-alto,34px)*.4);height:calc(var(--pf-insignia-alto,34px)*.4);margin:calc(var(--pf-insignia-alto,34px)*-.2) 0 0 calc(var(--pf-insignia-alto,34px)*-.2);border:2px solid rgba(200,255,220,.95);border-radius:50%;box-shadow:0 0 6px 1px rgba(110,255,165,.7);opacity:0;animation:pf-insignia-pulso 2.6s ease-out infinite}
@keyframes pf-insignia-reflejo{0%,70%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes pf-insignia-resplandor{0%,62%{opacity:0}86%{opacity:.85}100%{opacity:0}}
@keyframes pf-insignia-pulso{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.75)}}
@media (hover:hover){
  .pf-insignia--premium{transition:transform .2s ease,filter .2s ease}
  .pf-insignia--premium:hover{transform:translateY(-1px);filter:brightness(1.06) saturate(1.06)}
}
/* Sin movimiento: queda el mismo diseño, quieto. */
@media (prefers-reduced-motion:reduce){
  .pf-insignia--premium,.pf-insignia--premium::before,.pf-insignia--premium::after{animation:none;transition:none}
  .pf-insignia--premium:hover{transform:none}
}

@media (min-width:1001px){
  .pf{--u:calc(100cqw/1310)}
  /* La ruta ya no se escala con el escenario de 1310: ahora vive dentro del hero y manda él. */
  .pf-insignias{gap:calc(var(--u)*10) calc(var(--u)*12);min-height:calc(var(--u)*58);padding-top:calc(var(--u)*28)}
  .pf-insignia{gap:calc(var(--u)*6);height:calc(var(--u)*30);padding:0 calc(var(--u)*13);font-size:calc(var(--u)*13)}
  .pf-insignia svg{width:calc(var(--u)*16);height:calc(var(--u)*16)}
  .pf-insignia__punto{width:calc(var(--u)*8);height:calc(var(--u)*8)}
  /* Insignias premium: el alto común de las tres. */
  .pf-insignias{--pf-insignia-alto:calc(var(--u)*34)}
}

/* Aviso de la vista previa privada (2026-10-11): discreto, sobre el banner. */
.pf-previa{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;padding:9px 16px;
  border-bottom:1px solid #f1d48a;background:#fff8e1;color:#5c4400;font-size:13px;line-height:18px}
.pf .pf-previa p{display:flex;align-items:center;gap:8px;min-width:0;color:inherit}
.pf-previa svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pf-previa__acciones{display:flex;flex-wrap:wrap;gap:6px 14px}
.pf-previa a{color:#0b4fd6;font-weight:700;text-decoration:underline}

/* ---------- Cuerpo: columna lateral y contenido ---------- */
/* Rejilla de la referencia: 1189 de ancho, columna lateral de 264 y 9 de separación.
   La lateral pasó de 264 a 310 el 2026-10-22, a pedido del usuario: con 264 las
   especialidades caían de a una por línea, los botones quedaban apretados y la
   ubicación se partía. Solo cambia el ANCHO disponible; dentro no se agrandó nada
   salvo el relleno de la ficha, que acompaña. La columna de contenido sigue
   tomando lo que sobra (minmax(0,1fr)), así que nada se desborda. */
.pf-cuerpo{position:relative;z-index:2;display:grid;grid-template-columns:310px minmax(0,1fr);gap:9px;align-items:start;
  /* Se monta sobre el borde de abajo del hero, como en la referencia: allí la rejilla sube 45
     de los 1254 de ancho del diseño, o sea un 3,6 %. Por eso el hero reserva ese hueco abajo
     en su relleno: lo que sube la ficha es justo lo que el texto deja libre.
     MAX, no MIN (2026-10-21): ese 3,6 % se mide contra el ancho de la PANTALLA, no contra los
     1254 del diseño. Con min() la ficha seguía subiendo sin freno en monitores grandes y
     acababa tapando el texto del hero.
     BAJA DE 45 A 24 (2026-10-22): con 45 la ficha llegaba pegada al texto —entre la última
     línea y el borde blanco quedaban 15 px— y daba la impresión de que el banner y la ficha
     eran una sola pieza encajada. Con 24, y con el relleno de abajo del hero subido a 72, el
     texto respira unos 48 px por debajo, que es lo que pide la descripción de dos líneas, y la
     ficha sigue montada sobre el borde del hero como en la referencia. */
  width:min(1189px,calc(100% - 64px));margin:max(-24px,-1.9%) auto 0;padding-bottom:154px}
/* La columna izquierda lleva dos fichas sueltas, no una sola: la de la persona y la de
   «Experiencia en FreelanClick». Se separan lo mismo que las fichas de la derecha. */
.pf-columna{display:flex;flex-direction:column;gap:9px;min-width:0}
/* El relleno de los lados sube de 13 a 18 con el ancho nuevo: el contenido gana
   los 46 px de la columna y además respira contra el borde. */
.pf-lateral{position:relative;min-width:0;padding:18px 18px 14px;border-radius:11px;background:linear-gradient(120deg,#fff,#fdfefe);box-shadow:0 9px 25px #1d395914}
.pf-favorito{position:absolute;top:18px;right:16px;z-index:1;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;
  border:1px solid #eff2f7;border-radius:50%;background:#fff;box-shadow:0 2px 4px #10264e1d;color:#ff050b}
.pf-favorito svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-favorito[aria-pressed=true] svg{fill:currentColor}
.pf-cabeza{text-align:center}
/* La foto con sus sellos (2026-10-14): los redondos de referencias/insigniasexito van sobre
   el aro, abajo a cada lado, sin tapar el rostro; cada uno dice qué es al pasar el cursor o
   al enfocarlo. Destacado, el plan y la presencia van en el banner (.pf-insignias). */
/* El desplazamiento de 4 px de la lámina lo lleva el conjunto, no solo la foto:
   si lo llevara ella, los dos sellos quedarían a distinta distancia del rostro. */
/* La foto de la referencia mide 139; los dos sellos siguen siendo el 41 % de ella, que es como
   los reparte css/avatar-verificaciones.css. */
.pf-retrato{--avf-sello:56px;position:relative;width:max-content;margin:15px auto 10px;transform:translateX(-4px)}
.pf-retrato .pf-foto{margin:0}
/* Las dos verificaciones de la foto viven en css/avatar-verificaciones.css,
   con partials/avatar_verificaciones.html: la misma pieza en todas las vistas. */
/* Los dos sellos orbitan la foto abajo, uno a cada lado y a la misma distancia:
   montados sobre el aro, no colgando lejos de él, y fuera del rostro, que
   ocupa el centro y la mitad de arriba. La caja de la foto mide 113 y cada
   sello 46: a -10 px el círculo se apoya en el aro y no se sale de la ficha. */
/* Plan vigente junto a la foto (2026-10-16): el mismo lenguaje del banner y de la ficha
   (corona para Gold, medalla para Silver) en un sello chico arriba a la derecha, sobre el
   aro de su color y lejos del rostro. En Free no se dibuja. */
/* El círculo del plan que orbitaba la foto se retiró el 2026-10-18: ahí van
   solo las dos verificaciones. El plan sigue arriba, en las insignias. */
.pf-foto{display:block;width:137px;height:137px;margin:15px auto 0;padding:3px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #e3e9f2}
/* Marco de Perfil Gold / Silver (2026-10-11): aro más notorio alrededor de la foto, con un halo
   suave del mismo tono. Sin plan queda el aro blanco. */
.pf-foto--gold,.pf-foto--silver{padding:5px}
.pf-foto--gold{background:linear-gradient(135deg,#ffe08a,#e9a515 45%,#fff0b8 62%,#d98f00);box-shadow:0 0 0 1px #d99a12,0 6px 16px #e9a51547}
.pf-foto--silver{background:linear-gradient(135deg,#f6f8fb,#a3aebf 45%,#f1f4f8 62%,#8793a6);box-shadow:0 0 0 1px #9aa5b6,0 6px 16px #7b879938}
.pf-foto a{display:block;width:100%;height:100%;border-radius:50%}
.pf-foto img{display:block;width:100%;height:100%;border:2px solid #fff;border-radius:50%;object-fit:cover;background:#e7ebf2}
.pf-cabeza h2{font-size:23px;font-weight:900;line-height:26px;letter-spacing:-.8px;overflow-wrap:anywhere;transform:translateY(-3px)}
/* La profesión va en rojo, no en el naranja de la marca: así la enseña la referencia, igual que
   «Ver proyecto» y «Ver todo el portafolio». */
.pf .pf-profesion{margin-top:3px;color:#fe0000;font-size:15px;font-weight:700;line-height:20px;overflow-wrap:anywhere}
.pf-nota{display:flex;align-items:center;justify-content:center;gap:7px;min-height:18px;margin-top:1px;color:var(--pf-gris);font-size:12px;line-height:18px}
.pf-nota__estrellas{display:flex;gap:1px}
.pf-nota__estrellas svg{width:17.6px;height:17.6px;fill:#dfe4ec}
.pf-nota__estrellas svg.is-llena{fill:#ffb400}
.pf-nota strong{color:var(--pf-tinta);font-weight:700}
/* Datos y botones con las medidas de la referencia: lista de 14 con 15 de separación y botones
   de 45 de alto (47 el principal), todos del mismo ancho y uno debajo de otro. */
.pf-datos{margin:15px 0 14px;padding:0 4px}
.pf .pf-datos li{display:flex;align-items:center;gap:15px;min-height:25px;margin-top:9px;color:var(--pf-gris);font-size:13.5px;line-height:18px;letter-spacing:-.3px}
.pf-acciones{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.pf-boton{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:45px;padding:7px 12px;border-radius:10px;font-size:15px;font-weight:700;line-height:19px;letter-spacing:-.5px;text-align:center}
.pf-boton svg{flex:none;width:26px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-boton--primario{min-height:47px;border:1px solid #005aff;background:#005aff;color:#fff}
.pf-boton--primario:hover{filter:brightness(.96);color:#fff}
.pf-boton--primario .pf-boton__avion{width:23px;height:23px;fill:#fff;stroke:none}
.pf-boton--contorno{border:1px solid #ddeafd;background:#fff;color:#0068ff}
.pf-boton--contorno:hover{background:#f6faff;color:#0068ff}
.pf-secundarias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.pf-secundarias--una{grid-template-columns:minmax(0,1fr)}
/* Favoritos con texto claro (2026-10-11): «Añadir a favoritos» / «Quitar de favoritos». */
.pf-secundaria--favorito{font-size:13px}
.pf-secundarias form{display:contents}
.pf-secundaria{display:flex;align-items:center;justify-content:center;gap:12px;min-height:45px;padding:7px 10px;border:1px solid #ddeafd;border-radius:10px;background:#fff;
  color:#0068ff;font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.5px;white-space:nowrap}
.pf-secundaria svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-secundaria[aria-pressed=true]{background:#f2f7ff;color:var(--pf-azul)}
.pf-secundaria[aria-pressed=true] svg{fill:#dbeaff}
.pf .pf-aviso{margin-top:8px;color:var(--pf-gris);font-size:12px;text-align:center}
/* Reportar perfil (2026-10-11): visible y fácil de tocar, pero secundario frente a Contactar. */
.pf-reportar{display:flex;margin-top:12px}
.pf-reportar__boton{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;padding:0 12px;border:1px solid #f2c7c2;border-radius:9px;
  background:#fff8f7;color:#b42318;font-size:13px;font-weight:700;line-height:18px}
.pf-reportar__boton:hover{border-color:#e39a92;background:#ffefec}
.pf-reportar__boton svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-especialidades{margin:22px 0 0;padding:6px 5px;border:1px solid #e6f1ff;border-radius:11px;background:#fff}
.pf-especialidades__cabecera{display:flex;align-items:center;gap:12px;height:47px}
.pf-especialidades .pf-seccion__icono{width:45px;height:48px}
.pf-especialidades h2{font-size:19px;font-weight:900;line-height:23px;letter-spacing:-.5px}
.pf-etiquetas{display:flex;flex-wrap:wrap;gap:5px;margin:1px 0 0}
.pf-etiquetas li{padding:10px 15px;border-radius:23px;background:#e7f3ff;color:#0067ff;font-size:12.5px;font-weight:700;line-height:1.2}
/* Especialidades de la columna lateral (2026-10-22): las etiquetas se reparten el ancho de
   su fila en vez de quedar pegadas a la izquierda dejando un hueco distinto en cada una. Con
   un número impar, la última ocupa su fila entera. Queda alineado como una rejilla y se lee
   de un vistazo, que es lo que costaba antes. Solo afecta a este bloque: las etiquetas de
   los proyectos y las del resto de la página siguen con su ancho natural. */
.pf-especialidades .pf-etiquetas{gap:6px}
/* El relleno de los lados baja a 11: es el que decide cuántas caben en cada fila, y con 12
   la pareja más larga se pasaba por un píxel a 1024 y caía de a una. Lo que se ve al final
   no lo marca este número sino el reparto de la fila, así que las etiquetas no quedan más
   apretadas: quedan mejor repartidas. */
.pf-especialidades .pf-etiquetas li{display:flex;flex:1 1 auto;align-items:center;justify-content:center;padding:10px 11px;text-align:center}
/* Áreas de interés (2026-10-11): aparte de las especialidades y en un tono más suave. */
.pf .pf-especialidades__sub{margin:12px 0 7px;color:var(--pf-gris);font-size:11.5px;font-weight:700;line-height:15px;letter-spacing:.4px;text-transform:uppercase}
/* Las áreas de interés llevaban desde el 2026-10-11 fondo blanco, borde y un punto azul, para
   distinguirlas de las especialidades. En la referencia hay un único grupo de etiquetas y son
   pastillas azules lisas, así que vuelven a serlo; el nombre de la sección no cambia. */
.pf-etiquetas.pf-etiquetas--suaves li{display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere}
.pf .pf-especialidades__nota{margin:10px 6px 0;color:var(--pf-gris);font-size:12.5px;line-height:17px;overflow-wrap:anywhere}
.pf-etiquetas a:hover{text-decoration:underline}
/* Íconos de la referencia (2026-10-20): recortes de su propia lámina, no dibujos equivalentes.
   Cada uno trae ya su redondel de fondo, así que no van dentro de ningún círculo pintado
   aquí; los tamaños son los de su hoja (styles.css de referencias/perfil-profesional). */
.pf-seccion__icono{flex:none;width:52px;height:52px;object-fit:contain;user-select:none}
/* Estos dos se quedan con el tamaño que llevan en su etiqueta, que es el de la referencia al
   píxel: forzarlo desde aquí estiraba uno o dos de ellos un punto. */
.pf-dato__icono,.pf-boton__icono{flex:none;user-select:none}

.pf-contenido{display:flex;flex-direction:column;gap:13px;min-width:0}
.pf-panel{min-width:0;border:1px solid #ffffffeb;border-radius:12px;background:#fff;box-shadow:0 6px 20px #5382b906}
/* Números de la referencia (styles.css de referencias/perfil-profesional): la ficha mide 198 de
   alto mínimo, el recuadro interior lleva borde #e0edff y la ilustración ocupa 160 × 129 abajo
   a la derecha. El texto se detiene antes de llegar a ella. */
.pf-sobre{padding:13px 12px 11px;min-height:198px}
.pf-sobre__interior{position:relative;display:grid;grid-template-columns:61px minmax(0,1fr);gap:13px;min-height:169px;padding:7px 10px 18px 9px;border:1px solid #e0edff;border-radius:10px;background:#ffffffa8;box-shadow:0 3px 15px #19396003}
.pf-seccion__icono--quien-soy{width:61px;height:57px}
.pf-sobre__texto{min-width:0;padding-top:9px}
.pf-sobre h2{font-size:21px;font-weight:900;line-height:28px;letter-spacing:-.7px;transform:translateY(-2px)}
.pf .pf-sobre__bio{margin-top:9px;color:var(--pf-gris);font-size:13.5px;line-height:18.5px;overflow-wrap:anywhere}
.pf-sobre__bio.is-recortada{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.pf-mas{display:flex;align-items:center;justify-content:center;gap:8px;height:30px;margin-top:8px;padding:0 12px;border:1px solid #dce6f8;border-radius:20px;background:#fff;
  box-shadow:0 1px 3px #15437824;font-size:12px;font-weight:700;line-height:18px}
.pf-mas svg{width:14px;height:14px;fill:none;stroke:var(--pf-azul);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.pf-mas[aria-expanded=true] svg{transform:rotate(180deg)}
/* Ilustraciones de la referencia, recortadas de su lámina (no redibujadas). Solo decoran: no
   dicen nada que el texto no diga, así que van sin texto alternativo y se retiran en cuanto el
   ancho hace falta para leer. Donde aparecen, el texto reserva su sitio para no pasarles por
   debajo; con datos reales los párrafos son más largos que los del diseño. */
.pf-deco{position:absolute;z-index:0;width:160px;height:129px;object-fit:contain;pointer-events:none;user-select:none}
.pf-deco--quien-soy{right:7px;bottom:13px;width:148px}
/* Aquí vivían las reglas del maletín de la experiencia (.pf-deco--experiencia) y el hueco de 178
   que le reservaba el primer cargo. La ilustración se retiró con la lista compacta (2026-10-20):
   ya no se dibuja, así que el hueco solo estrechaba el texto del primer cargo sin motivo —y con
   páginas, «el primero» del HTML ni siquiera es el primero que se ve. */
@media (min-width:1101px){
  .pf-sobre__texto{padding-right:168px}
}
@media (max-width:1100px){.pf-deco{display:none}}
.pf-seccion{padding:4px 17px 15px}
.pf-seccion__cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px;min-width:0}
.pf-seccion__titulo{display:flex;align-items:center;gap:13px;min-width:0;margin-left:-3px}
/* Cada sección lleva el tamaño que su ícono tiene en la hoja de la referencia. */
.pf-servicios .pf-seccion__icono{width:49px;height:48px}
.pf-portafolio .pf-seccion__icono{width:49px;height:45px}
.pf-seccion h2{font-size:21px;font-weight:900;line-height:27px;letter-spacing:-.7px}
/* «Ver todo el portafolio» es la pastilla roja de la referencia (.red: borde y letra en rojo,
   radio 25 y 37 de alto). Solo aparece cuando hay más de tres trabajos, que es cuando sirve. */
.pf-ver-todo{display:flex;align-items:center;gap:9px;min-height:37px;padding:0 20px;border:1px solid #fe0000;border-radius:25px;background:#fff;
  color:#fe0000;font-size:13.5px;font-weight:700;line-height:18px;letter-spacing:-.4px;white-space:nowrap}
.pf-ver-todo:hover{background:#fff6f5}
.pf-ver-todo svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-portafolio{padding:6px 19px 13px;min-height:307px}
.pf-portafolio__grilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:5px;grid-auto-rows:1fr}
.pf-portafolio.is-colapsado .pf-proyecto--extra{display:none}
.pf-proyecto{position:relative;display:flex;flex-direction:column;min-width:0;min-height:185px;overflow:hidden;border:1px solid #e0edff;border-radius:10px;background:#fff}
/* La pastilla del PDF va encima de la imagen, no en una línea de texto debajo. */
.pf-proyecto__marco{position:relative;flex-shrink:0}
.pf-proyecto__pdf{position:absolute;top:9px;right:8px;display:block;width:63px;height:29px;
  border-radius:7px;box-shadow:0 2px 5px #28507820;user-select:none}
.pf-proyecto__foto{display:block;width:100%;aspect-ratio:259/79;overflow:hidden;background:#eef3fa}
.pf-proyecto__foto img{display:block;width:100%;height:100%;object-fit:cover}
.pf-proyecto__foto--vacia{display:grid;place-items:center;background:linear-gradient(135deg,#eaf3ff,#f6f9fe)}
.pf-proyecto__foto--vacia svg{width:34px;height:34px;fill:#b9cdea}
.pf-proyecto__texto{display:flex;flex:1;flex-direction:column;min-width:0;padding:8px 10px 7px}
.pf-proyecto h3{font-size:16px;font-weight:700;line-height:20px;letter-spacing:-.4px;overflow-wrap:anywhere}
.pf .pf-proyecto p{display:-webkit-box;min-height:37px;margin:4px 0 0;overflow:hidden;color:var(--pf-gris);font-size:13.5px;line-height:18px;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* El área del trabajo, como etiqueta azul igual a las demás del perfil. */
.pf-etiquetas.pf-etiquetas--proyecto{gap:5px;margin:8px 0 0}
.pf-etiquetas.pf-etiquetas--proyecto li{padding:8px 14px;font-size:12.5px}
.pf-proyecto__abrir{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:auto 2px 0 auto;border-radius:50%;background:linear-gradient(135deg,#ff7c19,#ff4d03);color:#fff}
.pf-proyecto__abrir:hover{filter:brightness(.92);color:#fff}
/* «Ver proyecto» (2026-10-11): la única acción de la tarjeta; abre el detalle del trabajo. */
.pf-proyecto__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;margin-top:auto;min-width:0}
.pf-proyecto__meta{flex:1 1 100%;min-width:0;color:var(--pf-gris);font-size:12px;line-height:16px;overflow-wrap:anywhere}
/* Rojo, como en la referencia, igual que la pastilla «Ver todo el portafolio». */
.pf-proyecto__ver{display:inline-flex;flex:none;align-items:center;gap:6px;margin-left:auto;color:#fe0000;font-size:13.5px;font-weight:700;line-height:18px;letter-spacing:-.4px;text-decoration:none}
.pf-proyecto__ver:hover{color:#c40000;text-decoration:underline}
.pf-proyecto__ver svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-proyecto__abrir svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Experiencia profesional (la declara la persona): una tarjeta por cargo, con el mismo
   lenguaje de las tarjetas del perfil (borde, radio, letra y chips de Especialidades). */
/* Sin alto mínimo: la referencia fijaba 266 porque sus fichas no se cerraban. Con el acordeón,
   una sección de un solo cargo cerrado dejaba media ficha de hueco vacío debajo. */
.pf-trayectoria{padding:6px 12px 14px}
/* La línea de tiempo vive en el carril de la izquierda, fuera de las fichas: así es UNA sola y
   no tres trozos sueltos, que era lo que pasaba cuando cada ficha llevaba la suya dentro. Cada
   tramo baja hasta donde empieza el siguiente, hueco incluido, y por eso se ven unidos. El
   primero arranca en su punto y el último muere en el suyo: ni rabo arriba ni abajo. */
/* El carril se abre con MARGEN, no con relleno: css/style.css lleva un
   `ol,ul{padding-left:0rem !important}` global que se come cualquier padding de una lista. */
.pf-trayectoria__lista{--pf-paso:0px;--pf-hito:39px;
  display:flex;flex-direction:column;gap:var(--pf-paso);margin-left:38px}
.pf-cargo{position:relative;min-width:0}
.pf-cargo::before{content:"";position:absolute;left:-26px;top:0;bottom:calc(-1 * var(--pf-paso));
  width:2px;border-radius:2px;background:#cfe1fb}
.pf-cargo:first-child::before{top:var(--pf-hito)}
.pf-cargo:last-child::before{bottom:auto;height:var(--pf-hito)}
/* Con una sola experiencia no hay nada que unir: queda el punto solo. */
.pf-cargo:only-child::before{content:none}
/* El cargo en curso («Actualmente», exp.is_current) lleva el punto un punto más vivo y un halo
   que late despacio. No se inventa: sale de la fecha real, igual que el texto. */
.pf-cargo--actual::after{box-shadow:0 0 0 4px #dbeaff,0 0 0 6px #b5d4ff,0 2px 6px #0b3d8c3d}
/* El punto: el hito. Centrado en la línea y a la altura del cargo, con un halo claro que lo
   despega de ella y una sombra mínima para que se lea como relieve y no como un lunar. */
.pf-cargo::after{content:"";position:absolute;left:-25px;top:var(--pf-hito);
  width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 32%,#4d94ff,#0067ff 70%);
  box-shadow:0 0 0 4px #e9f2ff,0 0 0 5px #cfe1fb,0 1px 3px #0b3d8c2e}
/* Con páginas, la línea arranca y muere en los puntos de los cargos QUE SE VEN. Los `:first-child`
   y `:last-child` de arriba se colgarían del primero y del último del HTML, que en la página 2
   están ocultos, y el carril quedaba con rabo arriba o abajo. El guion marca los extremos de cada
   tanda con is-primero / is-ultimo. Va DESPUÉS de esas reglas: a igual especificidad manda la
   última que se lee. */
.pf-cargo[hidden]{display:none}
.is-paginada .pf-cargo::before{content:"";top:0;bottom:calc(-1 * var(--pf-paso));height:auto}
.is-paginada .pf-cargo.is-primero::before{top:var(--pf-hito)}
.is-paginada .pf-cargo.is-ultimo::before{bottom:auto;height:var(--pf-hito)}
/* Único de su tanda: no hay nada que unir, queda el punto solo. */
.is-paginada .pf-cargo.is-primero.is-ultimo::before{content:none}
/* El filete separa cargos; el primero de la tanda no tiene nada arriba de lo que separarse. */
.is-paginada .pf-cargo.is-primero .pf-cargo__ficha{border-top:0}
/* Entradas de una lista, no fichas sueltas: sin caja propia ni fondo, separadas por un filete
   finísimo. Lo que agrupa es la ficha de la sección, que ya tiene borde y fondo. */
.pf-cargo__ficha{position:relative;min-width:0;overflow:hidden}
.pf-cargo+.pf-cargo .pf-cargo__ficha{border-top:1px solid #e8f1fc}
/* El encabezado entero es el botón que abre y cierra: no hay que acertarle a la flecha. */
.pf-cargo__titulo{position:relative;z-index:1;font:inherit}
/* Logo, cargo y empresa, fecha y flecha. Todo arrimado arriba: así el logo nunca se mueve y el
   punto del hito, que se cuelga de su centro, tampoco. */
.pf-cargo__palanca{display:grid;grid-template-columns:48px minmax(0,1fr) auto 20px;
  grid-template-areas:"logo titulos fecha flecha";
  align-items:start;gap:2px 14px;width:100%;
  padding:14px 10px 10px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pf-cargo__palanca:hover{background:#f1f7ff}
.pf-cargo__palanca:focus-visible{outline:2px solid var(--pf-azul);outline-offset:-3px}
.pf-cargo__sello{grid-area:logo;width:48px;height:48px;margin-top:1px}
.pf-cargo__chevron{grid-area:flecha;width:20px;height:20px;margin-top:3px;
  fill:none;stroke:var(--pf-azul);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease}
/* Cerrada mira hacia abajo («se abre»); abierta, hacia arriba. */
.pf-cargo:not(.is-cerrado) .pf-cargo__chevron{transform:rotate(180deg)}
/* Se abre con grid-template-rows, que anima de verdad y no pide saber el alto de antemano.
   Al cerrar, 'visibility' sale del foco y del lector una vez terminada la animación. */
.pf-cargo__detalle{display:grid;grid-template-rows:1fr;overflow:hidden;opacity:1;visibility:visible;
  transition:grid-template-rows .22s ease,opacity .18s ease,visibility 0s}
.pf-cargo.is-cerrado .pf-cargo__detalle{grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .22s ease,opacity .18s ease,visibility 0s linear .22s}
/* La capa que recorta no lleva relleno: el relleno de un elemento de rejilla cuenta aunque la
   fila valga cero, y era lo que dejaba una franja vacía de 18 en la ficha cerrada. */
.pf-cargo__cuerpo{position:relative;z-index:1;min-width:0;min-height:0;overflow:hidden}
/* El detalle arranca en la misma vertical que el cargo: 10 de la entrada + 48 del logo + 14. */
.pf-cargo__texto{padding:0 10px 14px 72px}
/* Al cargar, el guion cierra los cargos: ese primer cierre va sin animación para que la sección
   no se vea plegarse sola. */
.is-montando .pf-cargo__detalle,.is-montando .pf-cargo__chevron{transition:none}
@media (prefers-reduced-motion:reduce){
  .pf-cargo__detalle,.pf-cargo__chevron{transition:none}
}
.pf-cargo__titulos{grid-area:titulos;display:block;min-width:0}
.pf-cargo__puesto{display:block;font-size:15.5px;font-weight:700;line-height:21px;letter-spacing:-.1px;overflow-wrap:anywhere}
.pf .pf-cargo__empresa{display:block;margin-top:2px;color:var(--pf-azul);font-size:13px;font-weight:700;line-height:18px;overflow-wrap:anywhere}
.pf .pf-cargo__periodo{grid-area:fecha;display:flex;align-items:center;gap:6px;margin-top:2px;color:var(--pf-gris);font-size:12.5px;line-height:19px;white-space:nowrap}
.pf-cargo__periodo svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Si la fecha tiene que partirse (pantallas muy angostas), que parta entre una fecha y otra y
   no dentro de una: «Jun» arriba y «2021» abajo no se lee. */
.pf-cargo__periodo time{white-space:nowrap}
.pf .pf-cargo__descripcion{margin-top:2px;color:var(--pf-gris);font-size:13.5px;line-height:20px;overflow-wrap:anywhere}
.pf-cargo__habilidades{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.pf .pf-cargo__habilidades li{padding:5px 10px;border-radius:20px;background:#e6f1ff;color:var(--pf-azul);font-size:11.5px;font-weight:700;line-height:13px}
.pf-trayectoria .pf-circulo svg{width:22px;height:22px}
/* Páginas de cuatro cargos (2026-10-20): los controles los dibuja el guion, así que sin
   JavaScript no aparecen y se ven todos los cargos. Botón cuadrado, borde y azul del resto de los
   paginadores del sitio (css/contactos-redesign.css), en la medida de esta ficha. */
.pf-paginas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;
  margin:13px 2px 2px;padding-top:12px;border-top:1px solid #e8f1fc}
.pf-paginas__paso{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 13px;
  border:1px solid #dce8fb;border-radius:8px;background:#fff;color:var(--pf-azul);
  font-size:12.5px;font-weight:700;line-height:18px;white-space:nowrap;cursor:pointer}
.pf-paginas__paso:hover:not(:disabled){border-color:#aac6ff;background:#f1f7ff}
.pf-paginas__paso:disabled{opacity:.45;color:var(--pf-gris);cursor:default}
.pf-paginas__paso:focus-visible{outline:2px solid var(--pf-azul);outline-offset:2px}
.pf-paginas__flecha{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* La flecha es el mismo galón que abre los cargos, girado: apunta a la izquierda y a la derecha. */
.pf-paginas__paso--atras .pf-paginas__flecha{transform:rotate(90deg)}
.pf-paginas__paso--adelante .pf-paginas__flecha{transform:rotate(-90deg)}
.pf .pf-paginas__cuenta{min-width:104px;margin:0;color:var(--pf-gris);font-size:12.5px;font-weight:700;line-height:18px;text-align:center}
/* Servicios que ofrezco (2026-10-11): lo que la persona ofrece, una línea cada uno. */
.pf-servicios{padding:5px 12px 14px;min-height:193px}
.pf-servicios .pf-circulo svg{width:22px;height:22px}
/* La rejilla baja un poco: pegada al encabezado, el borde de arriba de la primera tarjeta
   quedaba a 11 del título y la línea parecía subrayar «Servicios que ofrezco». */
.pf .pf-servicios__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
/* El visto tiene columna propia: una rejilla de 44 y texto, no dos cajas pegadas. Así el título
   arranca siempre en la misma vertical, tenga o no bajada el servicio, y queda aire por los
   cuatro lados: 20 de relleno y 22 de carril entre el visto y el texto. */
.pf-servicio{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;column-gap:22px;row-gap:0;min-width:0;min-height:84px;padding:20px;border:1px solid #e0edff;border-radius:10px;background:#ffffffa8}
.pf-servicio__marca{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e7f3ff;color:var(--pf-azul);box-shadow:0 0 0 3px #f2f8ff}
.pf-servicio__marca svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pf-servicio__texto{min-width:0;padding-top:4px}
.pf-servicio h3{font-size:14.5px;font-weight:700;line-height:20px;letter-spacing:-.1px;overflow-wrap:anywhere}
.pf .pf-servicio p{margin-top:5px;color:var(--pf-gris);font-size:13px;line-height:19px;overflow-wrap:anywhere}
@media (max-width:760px){.pf .pf-servicios__lista{grid-template-columns:minmax(0,1fr)}}

/* Experiencia en FreelanClick (2026-10-20): pasa a la columna izquierda, como ficha aparte
   debajo de la de la persona. Al caber en 264 en vez de en 916, las tarjetas van una encima de
   otra y el título es del tamaño del de «Especialidades», no del de las secciones grandes. */
.pf-experiencia{padding:4px 13px 13px}
.pf-experiencia .pf-seccion__cabecera{height:44px}
.pf-experiencia .pf-seccion__titulo{gap:5px;margin-left:-3px}
.pf-experiencia .pf-seccion__icono{width:43px;height:43px}
.pf-experiencia h2{font-size:14px;font-weight:900;line-height:20px;letter-spacing:-.5px;white-space:nowrap}
.pf-experiencia__grilla{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* Sin trabajos todavía: la ficha de borde punteado de la referencia. El texto va en tercera
   persona porque esta página la ve cualquiera, no su dueño. */
.pf-sin-trabajos{display:grid;justify-items:center;padding:4px 17px 14px;
  border:1px dashed #9ac7ff;border-radius:11px;background:#f4faff;text-align:center}
.pf-sin-trabajos img{width:88px;height:auto}
.pf-sin-trabajos strong{color:var(--pf-tinta);font-size:13.5px;font-weight:700;line-height:18px;letter-spacing:-.3px}
.pf .pf-sin-trabajos p{margin-top:4px;color:var(--pf-gris);font-size:12.5px;line-height:1.4}
.pf-trabajo{position:relative;min-width:0;min-height:171px;overflow:hidden;border:1px solid var(--pf-linea);border-radius:10px;background:#fff}
.pf-trabajo__banda{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:193/76;background:linear-gradient(135deg,#eaf3ff,#dbe9ff 60%,#f1f6ff)}
.pf-trabajo__banda>svg{width:34px;height:34px;fill:url(#pf-g-azul);opacity:.85}
.pf-estado{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:700;line-height:14px;white-space:nowrap}
.pf-estado--completado{background:#18a957;color:#fff}
.pf-estado--en-curso{background:#ffe9db;color:#ff5908}
.pf-trabajo__texto{padding:6px 12px 11px}
.pf-trabajo h3{font-size:14px;font-weight:700;line-height:18px;letter-spacing:-.15px;overflow-wrap:anywhere}
.pf .pf-trabajo p{margin-top:2px;color:var(--pf-gris);font-size:13px;line-height:18px}
.pf .pf-vacio{padding:6px 2px 4px;color:var(--pf-gris);font-size:13.5px}

/* ---------- Anchos intermedios y móvil (los cortes de la referencia) ---------- */
@media (max-width:1200px){
  /* Entre 1001 y 1200 la lateral acompaña: 286 en vez de los 250 de antes. */
  .pf-cuerpo{width:calc(100% - 48px);grid-template-columns:286px minmax(0,1fr);padding-bottom:80px}
  .pf-etiquetas{gap:7px;margin-left:0}
  .pf-sobre{padding-top:18px}
  .pf-sobre__bio{line-height:19px}
  .pf-portafolio__grilla{gap:12px}
  .pf-proyecto__texto{padding-left:12px;padding-right:12px}
  .pf-seccion h2{font-size:19px}
  .pf-experiencia__grilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-trabajo{min-height:181px}
}
@media (max-width:1000px){
  .pf-miga{flex-wrap:wrap;gap:5px 7px;font-size:11px;line-height:15px}
  .pf-miga a,.pf-miga strong{white-space:normal}
  .pf-insignias{gap:10px 12px}
  .pf-insignia{gap:6px;height:30px;padding:0 13px;font-size:13px}
  .pf-insignia svg{width:16px;height:16px}
  .pf-insignia__punto{width:8px;height:8px}
  .pf-insignias{--pf-insignia-alto:34px}
  .pf-cuerpo{grid-template-columns:minmax(0,1fr);gap:18px;margin:16px auto 0;padding-bottom:60px}
  .pf-columna{width:min(550px,100%);margin-inline:auto}
  .pf-portafolio__grilla{gap:15px}
  .pf-experiencia__grilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-trabajo{min-height:171px}
}
/* Tableta: las dos zonas siguen lado a lado, con la personalizada más angosta (38 %). Los textos
   ocupan solo su columna y hacen salto de línea dentro de ella; el alto lo fijan los textos y la
   foto lo llena. Sin foto ni color, los textos usan todo el ancho. */
@media (min-width:761px) and (max-width:1000px){
}
@media (max-width:760px){
  .pf-miga{font-size:10px}
  .pf-cuerpo{width:calc(100% - 32px);padding-bottom:48px}
  .pf-portafolio__grilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pf-experiencia__grilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-seccion{padding:7px 14px 15px}
  .pf-seccion__cabecera{flex-wrap:wrap;gap:8px;height:auto;min-height:49px;padding-bottom:5px}
  .pf-seccion h2{font-size:19px}
  .pf-ver-todo{margin:0 0 3px auto;font-size:11px;line-height:17px}
  .pf-seccion__titulo{margin-left:-5px}
  .pf-sobre{padding:14px 10px}
  .pf-sobre__interior{grid-template-columns:43px minmax(0,1fr);gap:8px;min-height:0;padding:8px}
  .pf-sobre__interior .pf-circulo{width:43px;height:43px}
  .pf-sobre__texto{padding-top:5px}
  .pf-sobre__bio{margin-top:8px;font-size:13px;line-height:19px}
  .pf-mas{margin:10px 0 4px}
}
/* Pantalla angosta: el carril se estrecha para no robarle ancho al texto, el logo baja a 44 y
   la fecha deja de ir a la derecha, donde ya no cabe. Los servicios ciñen su relleno, pero el
   visto conserva su columna. Va después del corte de 760 porque ese también se cumple aquí y
   manda el último que se lee. */
@media (max-width:650px){
  /* La fecha baja debajo de la empresa en vez de pelearse por el ancho; el logo abarca las
     dos filas y la flecha se queda a la derecha. */
  .pf-trayectoria__lista{--pf-hito:36px;margin-left:24px}
  .pf-cargo::before{left:-16px}
  .pf-cargo::after{left:-15px}
  .pf-cargo__palanca{grid-template-columns:44px minmax(0,1fr) 20px;
    grid-template-areas:"logo titulos flecha" "logo fecha flecha";
    gap:3px 12px;padding:13px 6px 12px}
  .pf-cargo__sello{width:44px;height:44px}
  .pf-cargo__texto{padding:0 6px 13px 62px}
  .pf .pf-cargo__periodo{white-space:normal}
  .pf-servicio{grid-template-columns:38px minmax(0,1fr);column-gap:18px;padding:16px}
  .pf-servicio__marca{width:38px;height:38px}
}
@media (max-width:480px){
  /* Las tres insignias (Destacado, el plan, Disponible) en UNA fila también en el teléfono
     (2026-10-28): a 34 px de alto no cabían bajo ~400 px y la segunda fila cambiaba el alto
     del texto del hero. Se achican con el ancho de .pf (cqw): 64 px = los dos rellenos de
     20 del hero más los dos huecos de 11; 9,75 = la suma de sus proporciones. */
  .pf-insignias{gap:9px 11px;--pf-insignia-alto:min(34px,calc((var(--pf-zona) - 22px) / 9.75))}
  .pf-cuerpo{width:calc(100% - 28px)}
  .pf-lateral{padding-left:18px;padding-right:18px}
  .pf-especialidades{min-height:180px}
  .pf-etiquetas li{padding-left:14px;padding-right:14px}
  .pf-portafolio__grilla,.pf-experiencia__grilla{grid-template-columns:minmax(0,1fr)}
  .pf-proyecto{min-height:220px}
  .pf-trabajo{min-height:0}
  .pf-trabajo h3{line-height:20px}
  .pf .pf-trabajo p{font-size:14px;line-height:20px}
  .pf-proyecto h3{font-size:15px;line-height:20px}
  .pf-proyecto p{font-size:14px;line-height:20px}
  .pf-proyecto__abrir{width:27px;height:27px;margin-top:10px}
  .pf-seccion__cabecera .pf-ver-todo{margin:0 0 6px 52px}
  .pf-sobre__interior{display:flex;flex-direction:column;gap:2px}
  .pf .pf-cargo__periodo{white-space:normal}
  .pf-sobre__texto{padding:0 3px 3px}
}
/* Teléfono: los dos rótulos y la cuenta no caben en una línea (en 390 se partían en tres), así
   que las flechas se quedan solas. El nombre del botón sigue ahí, en su aria-label. */
@media (max-width:430px){
  .pf-paginas{gap:6px}
  .pf-paginas__paso{padding:0 11px}
  .pf-paginas__paso span{display:none}
}
@media (max-width:340px){
  .pf-datos li{gap:8px;font-size:12px}
  .pf-etiquetas{gap:7px;margin-left:0}
  .pf-etiquetas li{padding-left:11px;padding-right:11px}
  .pf-secundarias{gap:8px}
  .pf-secundaria{gap:6px;padding:0 5px}
  .pf-boton{gap:8px;font-size:13px}
  .pf-seccion h2{font-size:18px}
}