/* ============================================================
   PERFIL DEL INSTALADOR — estilos del módulo (entrega 29)
   Todo el perfil vive dentro de .pf. Ancho máximo compartido con la
   portada: var(--ancho-max). El fondo ocupa todo el ancho, el
   contenido no.
   ============================================================ */
.pf{--pf-azul:#0B1A30;--pf-azul2:#12294A;--pf-panel:#0F2242;--pf-borde:#E3E8EF;--pf-gris:#F3F5F8;
  --pf-naranja:#F26A1B;--pf-verde:#16A34A;background:var(--pf-gris);padding-bottom:30px}
.pf-gris{color:var(--gris);margin:0}
.pf-sub{margin:0 0 12px;font-size:12.5px;color:var(--gris)}
.pf-enlace{border:0;background:none;color:#1D82E2;font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;padding:0}
.pf-enlace:hover{text-decoration:underline}

/* ---------- BANNER: fondo a todo el ancho, contenido centrado con max-width ---------- */
.pf-banner{background:transparent;color:#fff;position:relative;padding:0 20px}
.pf-banner-caja{
  max-width:var(--ancho-max);margin:0 auto;position:relative;overflow:hidden;
  background:linear-gradient(95deg,rgba(11,26,48,.92) 0%,rgba(11,26,48,.74) 30%,rgba(11,26,48,.30) 55%,rgba(11,26,48,.04) 78%),
             var(--foto,none) center/cover no-repeat,var(--pf-azul2);
  border-radius:0 0 4px 4px;
}
.pf-banner-caja::before{content:'';position:absolute;top:0;left:0;width:140px;height:140px;
  background:var(--pf-naranja);clip-path:polygon(0 0,100% 0,0 100%);z-index:0}
.pf-banner-arriba{position:relative;z-index:1;display:grid;gap:22px;padding:28px 20px 22px;
  grid-template-columns:auto 1fr}
.pf-avatar-caja{display:flex;flex-direction:column;align-items:center}
.pf-avatar{width:132px;height:132px;border-radius:50%;background:#fff center/cover no-repeat;
  border:4px solid #fff;box-shadow:0 8px 26px rgba(0,0,0,.35);display:grid;place-items:center;
  font-size:52px;font-weight:800;color:var(--pf-azul2)}
.pf-disponible-hoy{margin-top:-16px;position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:var(--pf-verde);color:#fff;font-size:13px;font-weight:800;border-radius:4px;padding:7px 15px;
  box-shadow:0 3px 10px rgba(0,0,0,.3);white-space:nowrap}
.pf-disponible-hoy svg{width:15px;height:15px;fill:#fff}
.pf-identidad h1{display:flex;align-items:center;gap:10px;font-size:34px;font-weight:800;line-height:1.1;margin:0;color:#fff;letter-spacing:-.02em}
.pf-identidad h1 .sello-verificado{width:30px;height:30px;flex:none;fill:#1D82E2}
.pf-oficio{margin:6px 0 0;font-size:19px;font-weight:800;color:var(--pf-naranja)}
.pf-frase{margin:6px 0 0;font-size:15.5px;font-style:italic;color:#E5EBF2}
.pf-datos{display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0;padding:0;list-style:none}
.pf-datos li{display:flex;align-items:center;gap:8px}
.pf-datos li > svg{width:20px;height:20px;color:#fff;flex:none}
.pf-datos .bandera{margin:0;font-size:20px}
.pf-datos b{display:block;font-size:14px;font-weight:700;color:#fff;line-height:1.25}
.pf-datos em{display:block;font-style:normal;font-size:12.5px;color:#C6D3E1;line-height:1.25}

/* panel derecho: ranking (preparado) + nivel */
.pf-ranking{display:grid;gap:8px;align-content:start;min-width:230px}
.pf-ranking-caja{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:4px;padding:12px 14px}
.pf-ranking-pronto{display:flex;align-items:center;gap:10px}
.pf-ranking-pronto > svg{width:26px;height:26px;color:var(--ambar);flex:none}
.pf-ranking-pronto b{display:block;font-size:13.5px;color:#fff}
.pf-ranking-pronto em{display:block;font-style:normal;font-size:11.5px;color:#93A7BD}
.pf-ranking-eti{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#93A7BD}
.pf-ranking-nivel{display:block;font-size:16px;font-weight:800;color:var(--ambar);margin:2px 0 8px}
.pf-ranking-barra{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.pf-ranking-barra i{display:block;height:100%;background:var(--pf-naranja);border-radius:4px}
.pf-ranking-caja > em{display:block;font-style:normal;font-size:11.5px;color:#93A7BD;margin-top:7px}

/* franja inferior del banner: nota, sellos, contacto */
.pf-banner-abajo{position:relative;z-index:1;background:var(--pf-panel);
  display:grid;gap:16px;padding:16px 20px;align-items:center;grid-template-columns:1fr}
.pf-nota{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:10px 18px;justify-self:start}
.pf-nota > b{font-size:34px;font-weight:800;line-height:1;color:#fff}
.pf-nota em{display:block;font-style:normal;font-size:12px;color:#B9C7D6;margin-top:3px}
.pf-sellos{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0;padding:0;list-style:none}
.pf-sellos li{display:flex;align-items:center;gap:9px}
.pf-sellos li > svg{width:24px;height:24px;color:#fff;flex:none;opacity:.92}
.pf-sellos b{display:block;font-size:14.5px;font-weight:800;color:#fff;line-height:1.25}
.pf-sellos em{display:block;font-style:normal;font-size:12px;color:#B9C7D6}
.pf-contacto{display:grid;gap:8px}
.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:4px;
  font-weight:800;font-size:14.5px;padding:13px 18px;text-decoration:none;white-space:nowrap;transition:filter .15s}
.pf-btn svg{width:19px;height:19px;flex:none}
.pf-btn:hover{filter:brightness(1.08)}
.pf-btn-wsp{background:#25D366;color:#fff;font-size:16px;padding:15px 22px}
.pf-btn-wsp svg{fill:#fff;width:22px;height:22px}
.pf-btn-sec{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28)}
.pf-btn-fila{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf-btn-fila .pf-btn:only-child{grid-column:1/-1}

/* ---------- navegación ---------- */
@media(max-width:1px){}
.pf-nav{background:#fff;border:1px solid var(--pf-borde);border-radius:4px;display:flex;gap:2px;overflow-x:auto;
  max-width:var(--ancho-max);margin:14px auto 0;padding:0 14px;box-shadow:0 2px 10px rgba(18,41,74,.06)}
.pf-nav .pestaña{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:15px 14px;
  font-size:14px;font-weight:700;color:var(--gris);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.pf-nav .pestaña svg{width:18px;height:18px}
.pf-nav .pestaña.activa{color:var(--pf-naranja);border-bottom-color:var(--pf-naranja)}

/* ---------- cuerpo ---------- */
.pf-cuerpo{max-width:var(--ancho-max);margin:0 auto;padding:20px 20px 0;display:grid;gap:18px;grid-template-columns:1fr}
.pf-fila2{display:grid;gap:18px;grid-template-columns:1fr}
.pf-tarjeta{background:#fff;border:1px solid var(--pf-borde);border-radius:4px;overflow:hidden;
  box-shadow:0 2px 10px rgba(18,41,74,.06);margin-bottom:18px}
.pf-tarjeta-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 18px;background:#F7F9FC;border-bottom:1px solid var(--pf-borde)}
.pf-tarjeta-cab h2{display:flex;align-items:center;gap:9px;margin:0;font-size:16px;font-weight:800;color:var(--pf-azul2)}
.pf-tarjeta-cab h2 svg{width:20px;height:20px;color:var(--pf-azul2)}
.pf-tarjeta-cuerpo{padding:18px}
.pf-tarjeta-cuerpo p{margin:0 0 10px;font-size:14.5px;line-height:1.5;color:#2A3A4D}
.pf-tarjeta-cuerpo p:last-child{margin-bottom:0}

/* sobre mí */
.pf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.pf-chips li{display:inline-flex;align-items:center;gap:7px;background:#EAF1FC;color:#1B4B8F;
  border-radius:3px;padding:7px 12px;font-size:12.5px;font-weight:700}
.pf-chips li svg{width:16px;height:16px}
.pf-cita{margin:14px 0 0;padding:14px 16px 14px 46px;background:#F7F9FC;border-radius:4px;position:relative;
  font-weight:700;color:var(--pf-azul2);font-size:14.5px;line-height:1.45}
.pf-cita::before{content:'\201C';position:absolute;left:14px;top:2px;font-size:44px;line-height:1;color:var(--pf-naranja);font-family:Georgia,serif}

/* fotos y placeholders */
.pf-foto{margin:0;background:#E9EDF2 center/cover no-repeat;border-radius:4px;overflow:hidden;position:relative}
.pf-foto-vacia{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,#EEF2F6,#E2E8EF);color:#8A99AB;text-align:center;padding:10px}
.pf-foto-vacia svg{width:30px;height:30px;color:#A9B6C5}
.pf-foto-vacia span{font-size:11.5px;font-weight:600;line-height:1.3}
.pf-foto-grande{aspect-ratio:16/10;width:100%}
.pf-foto-chica{aspect-ratio:4/3;width:100%}
.pf-foto-chica.pf-foto-vacia svg{width:22px;height:22px}
.pf-foto-chica.pf-foto-vacia span{font-size:10px}
.pf-galeria-grande{position:relative;cursor:pointer}
.pf-galeria-pie{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;color:#fff;font-size:13px;font-weight:700;
  background:linear-gradient(transparent,rgba(0,0,0,.7));border-radius:0 0 4px 4px}
.pf-galeria-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.pf-galeria-chica{cursor:pointer}
.pf-galeria-rejilla{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.pf-galeria-item{position:relative;cursor:pointer}
.pf-foto-item{aspect-ratio:4/3}
.pf-galeria-cat{position:absolute;top:8px;left:8px;background:var(--pf-naranja);color:#fff;font-size:10.5px;
  font-weight:800;border-radius:3px;padding:3px 8px}
.pf-visor{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.pf-visor img{max-width:100%;max-height:85vh;border-radius:4px}
.pf-visor p{color:#fff;margin-top:12px;font-weight:700}

/* especialidades */
.pf-habs{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pf-hab{display:grid;align-items:center;gap:6px 10px;grid-template-columns:44px 1fr auto;
  background:#fff;border:1px solid var(--pf-borde);border-radius:4px;padding:9px 12px}
.pf-hab-mini{width:44px;height:36px;border-radius:3px;grid-row:span 2}
.pf-hab-mini.pf-foto-vacia{padding:0;gap:0}
.pf-hab-mini.pf-foto-vacia svg{width:16px;height:16px}
.pf-hab-mini.pf-foto-vacia span{display:none}
.pf-hab-ico{display:none}
.pf-hab-nombre{font-size:13.5px;color:var(--pf-azul2);line-height:1.25}
.pf-hab-nombre small{display:block;font-size:11px;color:var(--gris);font-weight:600}
.pf-hab-barra{grid-column:2;height:8px;border-radius:4px;background:#E7ECF2;overflow:hidden}
.pf-hab-barra i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#F2A01B,var(--pf-naranja))}
.pf-hab-barra-declarada i{background:repeating-linear-gradient(90deg,#C9D3DF 0 6px,#E7ECF2 6px 10px)}
.pf-hab-puntaje{grid-column:3;grid-row:1;font-size:15px;font-weight:800;color:var(--pf-azul2);text-align:right}
.pf-hab .pf-nivel{grid-column:3;grid-row:2;justify-self:end}
.pf-hab-votos{grid-column:2;font-size:11px;color:var(--gris)}
.pf-nivel{display:inline-block;font-style:normal;font-size:11px;font-weight:800;border-radius:4px;padding:4px 11px;white-space:nowrap}
.pf-nivel-experto{background:#E8F5EC;color:#14622F}
.pf-nivel-avanzado{background:#FFF1E3;color:#9A4A06}
.pf-nivel-intermedio{background:#EAF1FC;color:#1B4B8F}
.pf-nivel-basico{background:var(--pf-gris);color:var(--gris)}

/* empresas */
.pf-empresas{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin:0;padding:0;list-style:none}
.pf-empresas li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--pf-borde);
  border-radius:4px;padding:12px 14px;box-shadow:0 1px 3px rgba(18,41,74,.06)}
.pf-empresa-sigla{width:34px;height:34px;border-radius:3px;color:#fff;font-size:12px;font-weight:800;
  display:grid;place-items:center;flex:none;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.pf-empresas b{font-size:14px;color:var(--pf-azul2)}

/* valoraciones */
.pf-val-resumen{display:grid;gap:16px;grid-template-columns:1fr;margin-bottom:16px}
.pf-val-grande{text-align:center;background:#F7F9FC;border-radius:4px;padding:18px}
.pf-val-grande b{display:block;font-size:48px;font-weight:800;color:var(--pf-azul2);line-height:1}
.pf-val-grande .estrellas{justify-content:center;margin:6px 0}
.pf-val-grande span{display:block;font-size:13px;color:var(--gris);font-weight:600}
.pf-histo{margin:0;padding:0;list-style:none;display:grid;gap:7px;align-content:center}
.pf-histo li{display:grid;grid-template-columns:110px 1fr 28px;align-items:center;gap:10px;font-size:12.5px;color:#2A3A4D}
.pf-histo li b{text-align:right;color:var(--pf-azul2)}
.pf-histo-barra{height:8px;border-radius:4px;background:#E7ECF2;overflow:hidden}
.pf-histo-barra i{display:block;height:100%;background:#F2A01B;border-radius:4px}
.pf-crit-barra i{background:var(--pf-naranja)}
.pf-vals{display:grid;gap:12px;grid-template-columns:1fr}
.pf-val{border:1px solid var(--pf-borde);border-radius:4px;padding:14px;background:#fff}
.pf-val header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pf-val time{font-size:12px;color:var(--gris)}
.pf-val-cat{display:inline-block;margin:8px 0 0;background:#EAF1FC;color:#1B4B8F;font-size:11px;font-weight:700;border-radius:3px;padding:3px 8px}
.pf-val p{margin:8px 0 10px;font-size:14px;line-height:1.5}
.pf-val footer b{display:block;font-size:14px;color:var(--pf-azul2)}
.pf-val footer em{display:block;font-style:italic;font-size:12.5px;color:var(--gris)}

/* garantías */
.pf-garantias{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 18px;padding:0;list-style:none}
.pf-garantias li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:#fff;border:1px solid var(--pf-borde);border-radius:4px;padding:20px 10px;font-size:13px;font-weight:700;
  color:var(--pf-azul2);box-shadow:0 2px 10px rgba(18,41,74,.06)}
.pf-garantias span{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--pf-naranja);color:var(--pf-naranja)}
.pf-garantias svg{width:24px;height:24px}

/* ---------- sidebar ---------- */
.pf-lado .pf-tarjeta{margin-bottom:18px}
.pf-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:0;padding:0;list-style:none}
.pf-semana li{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:4px;padding:9px 2px;
  border:1px solid var(--pf-borde);background:#fff}
.pf-semana b{font-size:12px;font-weight:800;color:var(--pf-azul2);line-height:1}
.pf-semana em{font-style:normal;font-size:9.5px;color:var(--gris);line-height:1;white-space:nowrap}
.pf-semana span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;margin-top:2px}
.pf-semana .si{background:#EAF7EE;border-color:#BFE6CB}
.pf-semana .si span{background:var(--pf-verde);color:#fff}
.pf-semana .no{background:var(--pf-gris)}
.pf-semana .no span{background:#CBD3DD;color:#fff}
.pf-semana .hoy{box-shadow:0 0 0 2px var(--pf-naranja)}
.pf-semana-resumen{display:flex;align-items:center;gap:11px;margin-top:12px;background:var(--pf-verde);border-radius:4px;padding:12px 14px;color:#fff}
.pf-semana-resumen > svg{width:24px;height:24px;flex:none}
.pf-semana-resumen b{display:block;font-size:14px;line-height:1.3}
.pf-semana-resumen em{display:block;font-style:normal;font-size:12px;color:#D8F3E0;margin-top:2px}
.pf-urgencia{margin:10px 0 0;font-size:12.5px;font-weight:700;color:#9A4A06}
.pf-etiquetas{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0;padding:0;list-style:none}
.pf-etiquetas li{font-size:12.5px;font-weight:700;color:var(--pf-azul2);background:#EAF1FC;border:1px solid #D7E5FA;border-radius:3px;padding:6px 11px}
.pf-zona{display:grid;grid-template-columns:1fr 90px;gap:12px;align-items:center}
.pf-zona-lista{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pf-zona-lista li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--pf-azul2)}
.pf-zona-lista svg{width:17px;height:17px;color:var(--pf-naranja);flex:none}
.pf-zona-mapa{height:110px;border-radius:4px;background:#E9EDF2;display:grid;place-items:center;color:var(--pf-naranja)}
.pf-zona-mapa svg{width:34px;height:34px}
.pf-zona-viaja{display:flex;align-items:center;gap:8px;margin:12px 0 0;background:#EAF1FC;border-radius:3px;padding:9px 12px;
  font-size:12.5px;font-weight:700;color:#1B4B8F}
.pf-zona-viaja svg{width:18px;height:18px}
.pf-redes{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.pf-redes li{display:flex;align-items:center;gap:11px}
.pf-redes li > span{width:36px;height:36px;border-radius:3px;display:grid;place-items:center;flex:none;color:#fff}
.pf-redes li > span svg{width:19px;height:19px}
.pf-redes li > svg{width:15px;height:15px;color:var(--gris);margin-left:auto}
.pf-redes a{font-size:13.5px;color:var(--pf-azul2);font-weight:700;text-decoration:none;word-break:break-all}
.pf-red-instagram > span{background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7)}
.pf-red-facebook > span{background:#1877F2}
.pf-red-tiktok > span{background:#111}
.pf-red-youtube > span{background:#FF0000}
.pf-red-web > span{background:var(--pf-azul2)}
.pf-lista-simple{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pf-lista-simple li{font-size:13.5px;color:#2A3A4D;padding:8px 0;border-bottom:1px solid var(--pf-borde)}
.pf-lista-simple li:last-child{border:0}
.pf-cta{background:var(--pf-azul);color:#fff;border-radius:4px;padding:18px;display:grid;gap:10px}
.pf-cta b{font-size:16px}
.pf-cta p{margin:0;font-size:13px;color:#B9C7D6}
.pf-cta .pf-btn-sec{background:rgba(255,255,255,.1)}

/* ---------- responsive ---------- */
@media (min-width:760px){
  .pf-banner-arriba{grid-template-columns:auto 1fr auto;padding:30px 26px 24px}
  .pf-banner-abajo{grid-template-columns:auto 1fr auto;padding:16px 26px}
  .pf-contacto{min-width:300px}
  .pf-val-resumen{grid-template-columns:190px 1fr 1fr}
  .pf-vals{grid-template-columns:1fr 1fr}
  .pf-garantias{grid-template-columns:repeat(4,1fr)}
  .pf-empresas{grid-template-columns:repeat(3,1fr)}
  .pf-galeria-rejilla{grid-template-columns:repeat(3,1fr)}
  .pf-hab{grid-template-columns:52px minmax(170px,1.1fr) minmax(100px,1fr) auto auto auto;gap:12px}
  .pf-hab-mini{grid-row:auto;width:52px;height:40px}
  .pf-hab-nombre{grid-column:2}
  .pf-hab-barra{grid-column:3}
  .pf-hab-puntaje{grid-column:4;grid-row:1}
  .pf-hab .pf-nivel{grid-column:5;grid-row:1;justify-self:start}
  .pf-hab-votos{grid-column:6;grid-row:1;text-align:right;white-space:nowrap}
}
@media (min-width:1000px){
  .pf-cuerpo{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:22px}
  .pf-fila2{grid-template-columns:1fr 1fr}
  .pf-fila2 .pf-tarjeta{margin-bottom:18px}
  .pf-empresas{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:759px){
  /* ---- CELULAR: proporciones rebalanceadas ----
     La foto manda: es lo primero que mira el cliente. El resto se
     ordena alrededor de ella con tamaños cómodos de leer. ---- */
  .pf-banner{padding:0}
  .pf-banner-caja{border-radius:0}
  .pf-banner-caja{background:linear-gradient(180deg,rgba(11,26,48,.92) 0%,rgba(11,26,48,.86) 55%,rgba(11,26,48,.92) 100%),
    var(--foto,none) center/cover no-repeat,var(--pf-azul2)}
  .pf-banner-caja::before{width:96px;height:96px}

  /* avatar grande + nombre al lado; los datos pasan abajo a lo ancho */
  .pf-banner-arriba{grid-template-columns:auto 1fr;gap:14px;padding:18px 15px 16px;align-items:center}
  .pf-avatar{width:118px;height:118px;border-width:4px;font-size:44px}
  .pf-disponible-hoy{font-size:11.5px;padding:6px 12px;margin-top:-12px;gap:5px}
  .pf-disponible-hoy svg{width:13px;height:13px}

  .pf-identidad{min-width:0}
  .pf-identidad h1{font-size:22px;gap:7px;line-height:1.15}
  .pf-identidad h1 .sello-verificado{width:21px;height:21px}
  .pf-oficio{font-size:15px;margin-top:4px;line-height:1.25}

  /* los 4 datos van a lo ancho, en dos columnas parejas */
  /* una sola columna: con el avatar grande no hay ancho para dos sin cortar
     nombres largos como "Puerto Montt / Los Lagos" */
  .pf-datos{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:10px;margin:15px 0 0}
  .pf-datos li > svg{width:19px;height:19px}
  .pf-datos .bandera{font-size:18px}
  .pf-datos b{font-size:13.5px}
  .pf-datos em{font-size:11.5px}

  .pf-ranking{grid-column:1/-1;grid-template-columns:1fr 1fr;display:grid;gap:8px;min-width:0;margin-top:14px}
  .pf-ranking-caja{padding:11px 12px}
  .pf-ranking-pronto{gap:8px}
  .pf-ranking-pronto > svg{width:21px;height:21px}
  .pf-ranking-pronto b{font-size:12.5px;line-height:1.25}
  .pf-ranking-pronto em{font-size:11px}
  .pf-ranking-eti{font-size:10px}
  .pf-ranking-nivel{font-size:15px;margin:2px 0 7px}
  .pf-ranking-caja > em{font-size:11px;margin-top:6px}

  .pf-banner-abajo{padding:15px;gap:13px}
  .pf-nota{padding:10px 15px;gap:11px}
  .pf-nota > b{font-size:30px}
  .pf-nota em{font-size:11.5px}
  .pf-nota .estrella{width:17px;height:17px}
  .pf-sellos{gap:11px 18px}
  .pf-sellos li > svg{width:20px;height:20px}
  .pf-sellos b{font-size:13.5px}
  .pf-sellos em{font-size:11.5px}
  .pf-btn{font-size:15px;padding:13px 16px}
  .pf-btn svg{width:19px;height:19px}
  .pf-btn-wsp{font-size:16px;padding:15px 18px}
  .pf-btn-wsp svg{width:21px;height:21px}

  .pf-nav{margin:12px 12px 0;padding:0 8px;border-radius:4px}
  .pf-nav .pestaña{padding:12px 11px;font-size:13.5px;gap:6px}
  .pf-nav .pestaña svg{width:16px;height:16px}

  .pf-cuerpo{padding:14px 12px 0;gap:14px}
  .pf-tarjeta{border-radius:4px;margin-bottom:14px}
  .pf-tarjeta-cab{padding:12px 14px}
  .pf-tarjeta-cab h2{font-size:16px;gap:8px}
  .pf-tarjeta-cab h2 svg{width:19px;height:19px}
  .pf-tarjeta-cuerpo{padding:14px}
  .pf-tarjeta-cuerpo p{font-size:14.5px;line-height:1.55}
  .pf-sub{font-size:12.5px}
  .pf-chips li{font-size:12.5px;padding:7px 11px}
  .pf-chips li svg{width:15px;height:15px}
  .pf-cita{font-size:14px;padding:13px 14px 13px 40px}

  /* fotos de trabajos: protagonismo, como el resto */
  .pf-foto-grande{aspect-ratio:16/11}
  .pf-galeria-pie{font-size:12.5px;padding:22px 12px 10px}
  .pf-galeria-rejilla{grid-template-columns:1fr 1fr;gap:9px}

  .pf-hab{padding:10px 11px;gap:6px 10px;grid-template-columns:46px 1fr auto}
  .pf-hab-mini{width:46px;height:38px}
  .pf-hab-nombre{font-size:13.5px}
  .pf-hab-nombre small{font-size:11px}
  .pf-hab-puntaje{font-size:15px}
  .pf-nivel{font-size:11px;padding:4px 10px}
  .pf-hab-votos{font-size:11px}

  .pf-empresas{grid-template-columns:1fr 1fr;gap:9px}
  .pf-empresas li{padding:11px 12px}
  .pf-empresa-sigla{width:33px;height:33px;font-size:12px}
  .pf-empresas b{font-size:13.5px}

  .pf-val-resumen{gap:14px}
  .pf-val-grande b{font-size:42px}
  .pf-val-grande span{font-size:12.5px}
  .pf-histo li{grid-template-columns:90px 1fr 24px;font-size:12.5px;gap:9px}
  .pf-val{padding:13px}
  .pf-val p{font-size:14px}
  .pf-val footer b{font-size:14px}
  .pf-val footer em{font-size:12.5px}
  .pf-val time{font-size:11.5px}

  .pf-garantias li{padding:17px 8px;font-size:12.5px;gap:9px}
  .pf-garantias span{width:46px;height:46px}
  .pf-garantias svg{width:22px;height:22px}

  .pf-247-banda{padding:12px 13px;gap:10px}
  .pf-247-banda > svg{width:23px;height:23px}
  .pf-247-banda b{font-size:14.5px}
  .pf-247-banda em{font-size:12px}
  .pf-semana{gap:4px}
  .pf-semana li{padding:8px 1px;gap:3px}
  .pf-semana b{font-size:11.5px}
  .pf-semana em{font-size:9px}
  .pf-semana span{width:21px;height:21px;font-size:12px}
  .pf-semana-resumen{padding:11px 13px;gap:10px}
  .pf-semana-resumen > svg{width:22px;height:22px}
  .pf-semana-resumen b{font-size:13.5px}
  .pf-semana-resumen em{font-size:11.5px}

  .pf-zona{grid-template-columns:1fr}
  .pf-zona-mapa{height:72px}
  .pf-zona-lista li{font-size:13.5px}
  .pf-redes li > span{width:35px;height:35px}
  .pf-redes li > span svg{width:18px;height:18px}
  .pf-redes a{font-size:13.5px}
  .pf-lista-simple li{font-size:13.5px;padding:8px 0}
  .pf-etiquetas li{font-size:12.5px;padding:6px 11px}
  .pf-cta{padding:16px;border-radius:4px}
  .pf-cta b{font-size:15.5px}
  .pf-cta p{font-size:13px}
  .pf-aviso-verif p{font-size:12.5px}
  .pf-modal-caja{padding:18px}
  .pf-modal-caja h3{font-size:18px}
  .pf-modal-caja p,.pf-modal-caja ul{font-size:14px}
}
}
/* el panel de ranking va sobre fondo sólido: siempre legible aunque la foto sea clara */
.pf-ranking-caja{background:rgba(11,26,48,.92);backdrop-filter:blur(2px)}


/* ---- ajustes pedidos: 24/7 destacado, aviso de verificación, modal ---- */
.pf-247{background:#0F766E}
.pf-247 svg{fill:none;stroke:#fff;stroke-width:2;width:15px;height:15px}
.pf-247-banda{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:13px 15px;border-radius:4px;
  background:linear-gradient(100deg,#0F766E,#15A08F);color:#fff;box-shadow:0 3px 12px rgba(15,118,110,.3)}
.pf-247-banda > svg{width:26px;height:26px;flex:none}
.pf-247-banda b{display:block;font-size:15px;font-weight:800;line-height:1.2}
.pf-247-banda em{display:block;font-style:normal;font-size:12px;color:#CFF3EE;margin-top:2px}

.pf-aviso-verif{display:flex;gap:12px;background:#FFF6E8;border:1px solid #F5D9A8;border-radius:4px;
  padding:14px;margin-bottom:18px}
.pf-aviso-verif > svg{width:24px;height:24px;color:#B4730B;flex:none}
.pf-aviso-verif b{display:block;font-size:14px;color:#7A4E06}
.pf-aviso-verif p{margin:5px 0 8px;font-size:12.5px;line-height:1.45;color:#7A4E06}

.pf-modal{cursor:default;align-items:center}
.pf-modal-caja{background:#fff;border-radius:4px;padding:24px;max-width:540px;width:100%;
  max-height:85vh;overflow:auto;color:#2A3A4D;cursor:default}
.pf-modal-caja h3{margin:0 0 12px;font-size:20px;color:var(--pf-azul2);font-weight:800}
.pf-modal-caja h4{margin:16px 0 6px;font-size:14.5px;color:var(--pf-azul2);font-weight:800}
.pf-modal-caja p{margin:0 0 10px;font-size:14px;line-height:1.55}
.pf-modal-caja ul{margin:0 0 10px;padding-left:20px;font-size:14px;line-height:1.7}
.pf-modal-nota{background:#F3F5F8;border-radius:3px;padding:10px 12px;font-size:12.5px !important;color:var(--gris)}
.pf-modal-caja .pf-btn{width:100%;background:var(--pf-azul2);color:#fff;margin-top:6px;border:0}

/* nota vacía: perfil sin valoraciones todavía */
.pf-nota-nuevo{gap:10px}
.pf-nota-nuevo > svg{width:26px;height:26px;color:var(--ambar);flex:none}
.pf-nota-nuevo b{display:block;font-size:15px;font-weight:800;color:#fff;line-height:1.2}
.pf-nota-nuevo em{display:block;font-style:normal;font-size:12px;color:#B9C7D6;margin-top:2px}

/* ============================================================
   ENTREGA 34 — diseño móvil del perfil según el render nuevo.
   Todo dentro de @media: en computador no cambia nada.
   ============================================================ */
.pf-confianza,.pf-ayuda,.pf-nuevo-pill,.pf-vermas,.pf-mas-fotos{display:none}

@media (max-width:759px){
  /* ---------- BANNER: foto de fondo, avatar grande con punto verde ---------- */
  .pf-banner-caja{
    background:linear-gradient(180deg,rgba(11,26,48,.72) 0%,rgba(11,26,48,.80) 60%,rgba(11,26,48,.93) 100%),
      var(--foto,none) center/cover no-repeat,var(--pf-azul2);
  }
  .pf-banner-caja::before{display:none}         /* sin esquina naranja en celular */
  .pf-banner-arriba{grid-template-columns:auto 1fr;gap:16px;padding:22px 16px 20px;align-items:center}
  .pf-ranking{display:none}                      /* el ranking no va en celular */

  .pf-avatar-caja{position:relative}
  .pf-avatar{width:124px;height:124px;border-width:5px;font-size:52px;color:var(--pf-azul2)}
  /* punto verde de "conectado" sobre el avatar */
  .pf-avatar-caja::after{
    content:'';position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;
    background:#4ADE80;border:4px solid var(--pf-azul);z-index:3;
  }
  .pf-disponible-hoy{display:none}               /* lo reemplaza el punto verde */

  .pf-identidad h1{font-size:25px;letter-spacing:-.02em}
  .pf-nuevo-pill{
    display:inline-block;margin:7px 0 0;background:var(--pf-naranja);color:#fff;
    font-size:12.5px;font-weight:800;border-radius:4px;padding:5px 14px;
  }
  .pf-oficio{color:#fff;font-size:17px;font-weight:800;margin-top:7px}
  .pf-datos{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 18px;margin:15px 0 0}
  .pf-datos li > svg{width:20px;height:20px;color:#fff}
  .pf-datos b{font-size:14px}
  .pf-datos em{font-size:12px;color:#B9C7D6}

  /* ---------- BLOQUE BLANCO bajo el banner: contacto, notas, confianza ---------- */
  .pf-banner-abajo{
    display:flex;flex-direction:column;gap:12px;background:#fff;padding:14px 14px 4px;
  }
  /* WhatsApp a lo ancho arriba y los secundarios abajo en columnas iguales:
     así nunca se desborda, aunque el texto del botón sea largo */
  .pf-contacto{order:1;display:grid;grid-template-columns:1fr;gap:9px;min-width:0}
  .pf-btn-wsp{background:#3BC55F;font-size:15.5px;padding:15px 12px;border-radius:4px}
  .pf-btn-fila{display:grid;grid-template-columns:1fr 1fr;gap:9px;min-width:0}
  .pf-btn{min-width:0}
  .pf-btn span,.pf-btn{overflow:hidden;text-overflow:ellipsis}
  .pf-btn-sec{
    background:#fff;color:var(--pf-azul2);border:1px solid var(--pf-borde);
    border-radius:4px;padding:15px 16px;font-size:15px;box-shadow:0 1px 3px rgba(18,41,74,.07);
  }
  .pf-btn-sec svg{color:var(--pf-azul2)}

  /* nota + los dos indicadores, en una fila de 3 */
  .pf-nota{order:2;display:flex;background:var(--pf-azul);border:0;border-radius:4px;
    padding:14px 16px;justify-self:stretch;align-items:center;gap:11px}
  .pf-nota > b{font-size:32px}
  .pf-nota em{color:#B9C7D6}
  .pf-nota-nuevo{background:var(--pf-azul)}

  .pf-sellos{order:3;display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .pf-sellos .solo-pc{display:none}
  .pf-sellos li{
    background:#F3F5F8;border-radius:4px;padding:13px;gap:10px;align-items:center;
  }
  .pf-sellos li > svg{width:26px;height:26px;color:var(--pf-azul2);opacity:1}
  .pf-sellos b{font-size:16px;color:var(--pf-azul2)}
  .pf-sellos em{font-size:12.5px;color:#5C6B7E;line-height:1.3}

  /* franja de confianza de 3 columnas */
  .pf-confianza{
    order:4;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:14px 13px;
    list-style:none;background:#F3F5F8;border-radius:4px;
  }
  .pf-confianza li{display:flex;align-items:center;gap:9px}
  .pf-confianza li > svg{width:26px;height:26px;color:var(--pf-azul2);flex:none}
  .pf-confianza b{display:block;font-size:12.5px;font-weight:800;color:var(--pf-azul2);line-height:1.25}
  .pf-confianza em{display:block;font-style:normal;font-size:12px;color:#5C6B7E;line-height:1.25}

  /* ---------- barra naranja de ayuda ---------- */
  .pf-ayuda{
    display:flex;align-items:center;gap:12px;margin:14px 14px 0;padding:15px 16px;
    border-radius:4px;text-decoration:none;background:var(--pf-naranja);
    box-shadow:0 4px 14px rgba(242,106,27,.3);
  }
  .pf-ayuda-ico{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
    background:rgba(255,255,255,.22);color:#fff}
  .pf-ayuda-ico svg{width:21px;height:21px}
  .pf-ayuda-txt{flex:1;min-width:0}
  .pf-ayuda-txt b{display:block;font-size:15.5px;font-weight:800;color:#fff;line-height:1.25}
  .pf-ayuda-txt em{display:block;font-style:normal;font-size:12.5px;color:#FFE4D1;margin-top:2px}
  .pf-ayuda-flecha{color:#fff;font-size:26px;font-weight:700;flex:none;line-height:1}

  /* ---------- trabajos: tira de 3 fotos iguales con "+N" ---------- */
  .pf-tarjeta-galeria .pf-tarjeta-cuerpo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .pf-galeria-fila{display:contents}
  .pf-galeria-grande{grid-column:span 1}
  .pf-foto-grande{aspect-ratio:1/1}
  .pf-galeria-pie{display:none}
  .pf-galeria-chica:nth-of-type(3){display:none}   /* solo 3 fotos en la tira */
  .pf-galeria-chica{position:relative}
  .pf-mas-fotos{
    display:grid;place-items:center;position:absolute;right:7px;bottom:7px;
    background:rgba(11,26,48,.85);color:#fff;font-size:15px;font-weight:800;
    border-radius:4px;padding:7px 12px;
  }

  /* ---------- sobre mí con "Ver más" ---------- */
  .pf-sobre-texto.pf-recortado{max-height:76px;overflow:hidden;position:relative}
  .pf-sobre-texto.pf-recortado::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:34px;
    background:linear-gradient(transparent,#fff);
  }
  .pf-vermas{
    display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 0 0;
    color:var(--pf-naranja);font-weight:800;font-size:14px;cursor:pointer;
  }
}

@media (max-width:759px){
  /* el render móvil muestra 3 datos en una fila (sin nacionalidad, que ya
     aparece más abajo en "Información básica") */
  .pf-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
  .pf-datos .pf-dato-nac{display:none}
  .pf-datos li{align-items:flex-start;gap:7px}
  .pf-datos li > svg{width:18px;height:18px;margin-top:1px}
  .pf-datos b{font-size:12.5px;line-height:1.2}
  .pf-datos em{font-size:11px;line-height:1.25}

  /* la nota ocupa todo el ancho */
  .pf-nota{align-self:stretch;justify-content:flex-start}

  /* la franja de confianza necesita textos más compactos para no romperse */
  .pf-confianza{gap:8px;padding:13px 11px}
  .pf-confianza li{gap:7px;align-items:flex-start}
  .pf-confianza li > svg{width:22px;height:22px;margin-top:1px}
  .pf-confianza b{font-size:11.5px}
  .pf-confianza em{font-size:11px}
  .pf-sellos li{padding:12px 11px;gap:9px}
  .pf-sellos li > svg{width:23px;height:23px}
  .pf-sellos b{font-size:15px}
  .pf-sellos em{font-size:11.5px}
}

/* ============================================================
   ENTREGA 35 — desempeño con aro de avance (reemplaza las barras)
   ============================================================ */
.pf-desempeno .pf-desem-top{display:grid;gap:20px;grid-template-columns:1fr;padding:20px;
  border-bottom:1px solid var(--pf-borde)}

/* aro */
.pf-aro{position:relative;display:grid;place-items:center;text-align:center}
.pf-aro-svg{width:210px;height:210px;display:block}
.pf-aro-centro{position:absolute;top:52%;left:50%;transform:translate(-50%,-56%);text-align:center}
.pf-aro-corona{display:block;color:#F5B301;margin-bottom:-2px}
.pf-aro-corona svg{width:26px;height:26px}
.pf-aro-centro > b{display:block;font-size:52px;font-weight:800;color:var(--pf-azul2);line-height:1;letter-spacing:-.03em}
.pf-aro-centro > em{display:block;font-style:normal;font-size:14px;color:var(--gris);margin-top:2px}
.pf-aro-nivel{display:inline-block;margin-top:9px;color:#fff;font-size:13px;font-weight:800;
  border-radius:4px;padding:6px 18px;letter-spacing:.02em}
.pf-aro-pie{margin:-14px 0 0;font-size:13.5px;color:var(--gris);line-height:1.35}

/* centro */
.pf-desem-medio{min-width:0}
.pf-destacado{display:inline-flex;align-items:center;gap:8px;background:#FFF1E3;color:#C2410C;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;border-radius:4px;padding:8px 16px;margin-bottom:12px}
.pf-destacado svg{width:19px;height:19px;color:#F26A1B}
.pf-desem-medio h3{margin:0;font-size:34px;font-weight:800;color:var(--pf-azul2);line-height:1.1;letter-spacing:-.02em}
.pf-desem-medio > p{margin:10px 0 0;font-size:15.5px;color:#5C6B7E;line-height:1.45}
.pf-desem-estrellas{display:flex;align-items:center;gap:14px;margin-top:14px}
.pf-desem-estrellas .estrella{width:30px;height:30px}
.pf-desem-estrellas b{font-size:26px;font-weight:800;color:var(--pf-azul2)}
.pf-desem-cita{display:flex;align-items:center;gap:12px;margin-top:14px;background:#EFF5FE;
  border-radius:4px;padding:14px 16px}
.pf-desem-cita svg{width:28px;height:28px;color:#2B7FEA;flex:none}
.pf-desem-cita span{font-size:14.5px;color:#41536A;line-height:1.4}

/* cajas laterales */
.pf-desem-lado{display:grid;gap:10px;align-content:start}
.pf-desem-caja{display:flex;align-items:center;gap:13px;border-radius:4px;padding:15px 16px}
.pf-desem-caja > svg{width:34px;height:34px;flex:none}
.pf-desem-caja b{display:block;font-size:30px;font-weight:800;color:var(--pf-azul2);line-height:1}
.pf-desem-caja .pf-caja-t{font-size:16.5px}
.pf-desem-caja span{display:block;font-size:14.5px;font-weight:700;color:var(--pf-azul2);margin-top:2px}
.pf-desem-caja em{display:block;font-style:normal;font-size:13.5px;color:#5C6B7E;margin-top:2px;line-height:1.35}
.pf-caja-verde{background:#EDFBF1}   .pf-caja-verde > svg{color:#16A34A}
.pf-caja-naranja{background:#FFF4EC} .pf-caja-naranja > svg{color:#F26A1B}
.pf-caja-azul{background:#EFF5FE}    .pf-caja-azul > svg{color:#2B7FEA}

/* especialidades principales en tarjetas de color */
.pf-esp-bloque{padding:18px 20px;border-bottom:1px solid var(--pf-borde)}
.pf-esp-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.pf-esp-cab h4{margin:0;font-size:19px;font-weight:800;color:var(--pf-azul2)}
.pf-esps{display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;list-style:none}
.pf-esp{display:flex;align-items:center;gap:13px;border-radius:4px;padding:14px 15px}
.pf-esp-ico{width:46px;height:46px;border-radius:4px;display:grid;place-items:center;flex:none;background:#fff}
.pf-esp-ico svg{width:24px;height:24px}
.pf-esp b{display:block;font-size:15px;color:var(--pf-azul2);line-height:1.25;margin-bottom:5px}
.t-naranja{background:#FFF4EC} .t-naranja .pf-esp-ico{color:#F26A1B}
.t-azul{background:#EFF5FE}    .t-azul .pf-esp-ico{color:#2B7FEA}
.t-verde{background:#EDFBF1}   .t-verde .pf-esp-ico{color:#16A34A}
.t-morado{background:#F3EEFE}  .t-morado .pf-esp-ico{color:#7C3AED}
.t-rosa{background:#FEF0F5}    .t-rosa .pf-esp-ico{color:#DB2777}
.t-cian{background:#ECFAFB}    .t-cian .pf-esp-ico{color:#0E9AA7}

/* fila de garantías al pie de la tarjeta */
.pf-garantias-fila{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:16px 20px;
  list-style:none;background:#F7F9FC}
.pf-garantias-fila li{display:flex;align-items:center;gap:12px}
.pf-garantias-fila svg{width:30px;height:30px;color:var(--pf-azul2);flex:none}
.pf-garantias-fila b{display:block;font-size:14.5px;font-weight:800;color:var(--pf-azul2);line-height:1.25}
.pf-garantias-fila em{display:block;font-style:normal;font-size:13px;color:#5C6B7E;margin-top:1px}

/* lista completa (pestaña Especialidades) */
.pf-esp-filas{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.pf-esp-fila{display:grid;align-items:center;gap:6px 11px;grid-template-columns:44px 1fr auto;
  background:#fff;border:1px solid var(--pf-borde);border-radius:4px;padding:11px 13px}
.pf-esp-fila .pf-esp-ico{width:44px;height:44px;background:#F3F5F8;color:var(--pf-azul2);grid-row:span 2}
.pf-esp-fila > b{grid-column:2;font-size:14px;color:var(--pf-azul2);margin:0}
.pf-esp-fila > b small{display:block;font-size:11.5px;color:var(--gris);font-weight:600}
.pf-esp-medidor{grid-column:2;height:9px;border-radius:4px;background:#E7ECF2;overflow:hidden}
.pf-esp-medidor i{display:block;height:100%;border-radius:4px}
.pf-esp-puntaje{grid-column:3;grid-row:1;font-size:16px;font-weight:800;color:var(--pf-azul2);text-align:right}
.pf-esp-fila .pf-nivel{grid-column:3;grid-row:2;justify-self:end}
.pf-esp-fila > small{grid-column:2;font-size:11.5px;color:var(--gris)}

@media (min-width:900px){
  .pf-desempeno .pf-desem-top{grid-template-columns:250px 1fr 300px;gap:26px;padding:26px}
  .pf-desem-medio{border-right:1px solid var(--pf-borde);padding-right:26px}
  .pf-esps{grid-template-columns:repeat(4,1fr)}
  .pf-esp{flex-direction:row}
  .pf-garantias-fila{grid-template-columns:repeat(4,1fr);gap:0}
  .pf-garantias-fila li{padding:0 18px;border-right:1px solid var(--pf-borde)}
  .pf-garantias-fila li:last-child{border-right:0}
  .pf-esp-fila{grid-template-columns:50px minmax(170px,1.2fr) minmax(110px,1fr) auto auto auto;gap:13px}
  .pf-esp-fila .pf-esp-ico{grid-row:auto}
  .pf-esp-fila > b{grid-column:2}
  .pf-esp-medidor{grid-column:3}
  .pf-esp-puntaje{grid-column:4;grid-row:1}
  .pf-esp-fila .pf-nivel{grid-column:5;grid-row:1;justify-self:start}
  .pf-esp-fila > small{grid-column:6;grid-row:1;text-align:right;white-space:nowrap}
}
@media (max-width:759px){
  .pf-desempeno .pf-desem-top{padding:16px;gap:16px}
  .pf-aro-svg{width:180px;height:180px}
  .pf-aro-centro > b{font-size:44px}
  .pf-desem-medio h3{font-size:26px}
  .pf-desem-medio > p{font-size:14px}
  .pf-desem-estrellas .estrella{width:24px;height:24px}
  .pf-desem-estrellas b{font-size:21px}
  .pf-desem-cita span{font-size:13.5px}
  .pf-desem-caja b{font-size:25px}
  .pf-desem-caja .pf-caja-t{font-size:15px}
  .pf-esp-bloque{padding:15px 16px}
  .pf-esp-cab h4{font-size:17px}
  .pf-esps{grid-template-columns:1fr 1fr}
  .pf-esp{flex-direction:column;align-items:flex-start;gap:9px;padding:12px}
  .pf-esp b{font-size:13.5px}
  .pf-garantias-fila{grid-template-columns:1fr 1fr;padding:15px 16px;gap:13px}
  .pf-garantias-fila b{font-size:13px}
  .pf-garantias-fila em{font-size:11.5px}
}

/* el bloque vive dentro de la columna principal, no a pantalla completa:
   las columnas deben calzar en ~840px, no en 1440px */
@media (min-width:900px){
  .pf-desempeno .pf-desem-top{grid-template-columns:200px minmax(0,1fr) 250px;gap:20px;padding:22px}
  .pf-desem-medio{padding-right:20px}
  .pf-desem-medio h3{font-size:27px}
  .pf-desem-medio > p{font-size:14px}
  .pf-aro-svg{width:180px;height:180px}
  .pf-aro-centro > b{font-size:42px}
  .pf-desem-estrellas .estrella{width:23px;height:23px}
  .pf-desem-estrellas b{font-size:21px}
  .pf-desem-cita{padding:12px 13px}
  .pf-desem-cita span{font-size:13.5px}
  .pf-desem-caja{padding:13px 14px;gap:11px}
  .pf-desem-caja > svg{width:29px;height:29px}
  .pf-desem-caja b{font-size:25px}
  .pf-desem-caja .pf-caja-t{font-size:15px}
  .pf-desem-caja em,.pf-desem-caja span{font-size:12.5px}
  .pf-garantias-fila li{padding:0 13px}
  .pf-garantias-fila b{font-size:13.5px}
  .pf-garantias-fila em{font-size:12px}
  .pf-esp b{font-size:13.5px}
}

/* ============================================================
   ENTREGA 37 — valorar, denunciar, explicaciones y banner
   ============================================================ */
/* banner: foto más grande y datos con más presencia */
.pf-avatar{width:150px;height:150px;font-size:56px}
.pf-datos b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.pf-datos em{font-size:13.5px;color:#C6D3E1;font-weight:600}
.pf-datos li > svg{width:22px;height:22px}
.pf-datos .bandera{font-size:23px}
.pf-datos{gap:14px 30px}
.pf-identidad h1{font-size:38px}
.pf-oficio{font-size:21px}
.pf-sello-btn{border:0;background:none;padding:0;cursor:pointer;display:inline-flex;line-height:0}
.pf-sello-btn:hover{transform:scale(1.08)}

/* formulario de valoración */
.pf-valorar{background:#fff;border:1px solid var(--pf-borde);border-radius:4px;padding:18px;
  box-shadow:0 2px 10px rgba(18,41,74,.06);margin-bottom:18px}
.pf-valorar h4{margin:0 0 6px;font-size:17px;font-weight:800;color:var(--pf-azul2)}
.pf-valorar > .pf-gris{font-size:13.5px;margin-bottom:14px;line-height:1.45}
.pf-valorar-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:12px 0}
.pf-campo-est label{display:block;font-size:13px;font-weight:700;color:var(--pf-azul2);margin-bottom:5px}
.pf-estrellas-elegir{display:flex;gap:3px}
.pf-est{border:0;background:none;padding:2px;cursor:pointer;line-height:0}
.pf-est svg{width:28px;height:28px;fill:#D8DEE5;transition:fill .12s,transform .12s}
.pf-est:hover svg{transform:scale(1.14)}
.pf-est.llena svg{fill:#F2A01B}
.pf-campo{display:block;margin:12px 0}
.pf-campo span{display:block;font-size:13px;font-weight:700;color:var(--pf-azul2);margin-bottom:5px}
.pf-campo select,.pf-campo textarea,.pf-modal-caja textarea{
  width:100%;border:1px solid var(--pf-borde);border-radius:4px;padding:11px 12px;
  font:inherit;font-size:14px;color:var(--pf-azul2);background:#fff;box-sizing:border-box;
}
.pf-btn-enviar{background:var(--pf-naranja);color:#fff;width:100%;justify-content:center;margin-top:6px}
.pf-valorar-aviso{background:#F7F9FC;border-radius:4px;padding:14px;font-size:13.5px;color:#5C6B7E;
  text-align:center;margin-bottom:18px}
.pf-valorar-aviso a{color:#1D82E2;font-weight:700}
.pf-valorar-aviso2{margin:10px 0 0;font-size:13px;color:#5C6B7E;text-align:center;min-height:18px}

/* denuncia: discreta, al pie del perfil */
.pf-denuncia-caja{max-width:var(--ancho-max);margin:0 auto;padding:4px 20px 18px;text-align:center}
.pf-denuncia{display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;
  color:#8A99AB;font-size:13px;font-weight:600;padding:8px 12px;border-radius:3px}
.pf-denuncia svg{width:16px;height:16px}
.pf-denuncia:hover{color:#B4231A;background:#FDECEA}
.pf-modal-caja textarea{margin-bottom:10px}
.pf-modal-caja .pf-btn-enviar{margin-bottom:8px}

@media (max-width:759px){
  .pf-avatar{width:132px;height:132px;font-size:48px}
  .pf-identidad h1{font-size:25px}
  .pf-oficio{font-size:17px}
  .pf-datos b{font-size:14px}
  .pf-datos em{font-size:12px}
  .pf-datos li > svg{width:19px;height:19px}
  .pf-valorar-grid{grid-template-columns:1fr}
  .pf-est svg{width:31px;height:31px}
}

/* ============================================================
   ENTREGA 38 — arreglo del modal + reportar y evaluar visibles
   ============================================================ */
/* BUG: .pf-visor p pintaba de blanco TODO el texto de los modales,
   así que quedaba blanco sobre blanco y no se leía nada. */
.pf-modal-caja,
.pf-modal-caja p,
.pf-modal-caja li,
.pf-modal-caja h3,
.pf-modal-caja h4{color:#2A3A4D}
.pf-modal-caja h3,.pf-modal-caja h4{color:var(--pf-azul2)}
.pf-modal-caja p{font-weight:400}
.pf-modal-nota{color:#5C6B7E !important;background:#F3F5F8}
.pf-modal-caja ul{color:#2A3A4D}
.pf-modal-caja li{margin-bottom:4px}
.pf-modal-caja li b{color:var(--pf-azul2)}

/* botón "Evalúalo" bajo las tres cajas del resumen */
.pf-btn-evaluar{
  background:var(--pf-azul2);color:#fff;width:100%;justify-content:center;
  font-size:15px;padding:14px 16px;margin-top:2px;border:0;cursor:pointer;
}
.pf-btn-evaluar svg{width:19px;height:19px;fill:#F2A01B}
.pf-btn-evaluar:hover{background:#1B3A66}

/* "¿Cómo se calcula?" bajo el aro */
.pf-como-btn{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;border:1px solid var(--pf-borde);
  background:#fff;border-radius:4px;padding:8px 15px;cursor:pointer;
  color:#1D82E2;font-size:13px;font-weight:700;
}
.pf-como-btn svg{width:15px;height:15px}
.pf-como-btn:hover{background:#EFF5FE;border-color:#BBD7F7}

/* bloque de reporte, ahora en el resumen y visible */
.pf-reporte{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#FFF7F5;border:1px solid #F3C9C2;border-left:4px solid #D9503F;
  border-radius:4px;padding:16px 18px;margin-bottom:18px;
}
.pf-reporte-ico{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#FDE7E3;color:#B4231A}
.pf-reporte-ico svg{width:22px;height:22px}
.pf-reporte-txt{flex:1;min-width:210px}
.pf-reporte-txt b{display:block;font-size:15.5px;font-weight:800;color:#8C1D12;line-height:1.3}
.pf-reporte-txt p{margin:4px 0 0;font-size:13.5px;color:#7A4238;line-height:1.4}
.pf-btn-reportar{background:#D9503F;color:#fff;border:0;cursor:pointer;flex:none;
  font-size:14.5px;padding:12px 20px}
.pf-btn-reportar:hover{background:#BE3E2E}

/* resaltado al saltar al formulario de valoración */
.pf-resaltar{box-shadow:0 0 0 3px #F2A01B;transition:box-shadow .3s}

@media (max-width:759px){
  .pf-reporte{padding:14px;gap:11px}
  .pf-reporte-txt b{font-size:14.5px}
  .pf-reporte-txt p{font-size:12.5px}
  .pf-btn-reportar{width:100%;justify-content:center}
  .pf-btn-evaluar{font-size:14.5px}
}

/* el aro necesita aire: el pie y el botón quedaban bajo la pastilla del nivel */
.pf-aro{align-content:start}
.pf-aro-centro{position:static;transform:none;margin-top:-118px;margin-bottom:26px}
.pf-aro-pie{margin:0}
.pf-btn-evaluar{white-space:normal;text-align:center;line-height:1.25}
@media (max-width:759px){
  .pf-aro-centro{margin-top:-104px;margin-bottom:20px}
}

/* ============================================================
   ENTREGA 39 — contacto, modales legibles y banner con más peso
   ============================================================ */

/* ---- botones de contacto: solo WhatsApp y correo ---- */
.pf-contacto{display:grid;gap:10px}
.pf-btn-wsp{background:#25D366;font-size:17px;padding:16px 22px;gap:12px}
.pf-btn-wsp svg{width:28px;height:28px;fill:#fff}      /* logo más grande */
.pf-btn-wsp:hover{background:#1FB959}
.pf-btn-correo{background:#fff;color:var(--pf-azul2);border:1px solid rgba(255,255,255,.35);
  font-size:15.5px;padding:14px 20px}
.pf-btn-correo svg{width:22px;height:22px}
.pf-btn-correo:hover{background:#F3F7FC}

/* ---- franja inferior del banner: íconos con color y texto legible ---- */
.pf-sellos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.pf-sellos li{display:flex;align-items:center;gap:12px}
.pf-sello-ico{width:44px;height:44px;border-radius:4px;flex:none;display:grid;place-items:center}
.pf-sello-ico svg{width:23px;height:23px}
.pf-ico-verde{background:rgba(74,222,128,.18);color:#6EE7A0}
.pf-ico-naranja{background:rgba(242,106,27,.2);color:#FBA94C}
.pf-ico-azul{background:rgba(43,127,234,.2);color:#7AB4F5}
.pf-ico-morado{background:rgba(147,51,234,.2);color:#C4A0F5}
.pf-ico-gris{background:rgba(255,255,255,.12);color:#B9C7D6}
.pf-sellos li > svg{display:none}
.pf-sellos b{font-size:19px;font-weight:800;color:#fff;line-height:1.15}
.pf-sellos em{font-size:13.5px;color:#C6D3E1;font-weight:600}
.pf-nota > b{font-size:40px}
.pf-nota{padding:14px 22px}
.pf-nota .estrella{width:21px;height:21px}
.pf-nota em{font-size:13px}
.pf-no-hoy{background:#6B7A8C}

/* ---- botón de evaluar: verde, no negro ---- */
.pf-btn-evaluar{
  background:linear-gradient(100deg,#16A34A,#22C55E);color:#fff;
  box-shadow:0 4px 14px rgba(22,163,74,.35);font-size:15.5px;font-weight:800;
}
.pf-btn-evaluar svg{fill:#FFE28A}
.pf-btn-evaluar:hover{background:linear-gradient(100deg,#15903F,#1FB54F)}

/* ---- modales: texto negro y campos que se ven ---- */
.pf-modal-caja{color:#1F2B3A}
.pf-modal-caja p,.pf-modal-caja li,.pf-modal-caja ul{color:#1F2B3A}
.pf-modal-caja .pf-campo span{color:var(--pf-azul2);font-size:14px}
.pf-modal-caja textarea,.pf-modal-caja input,.pf-modal-caja select{
  background:#F7F9FC;border:2px solid #CBD6E3;color:#1F2B3A;
}
.pf-modal-caja textarea:focus,.pf-campo textarea:focus,.pf-campo select:focus{
  outline:0;border-color:var(--pf-naranja);background:#fff;
}
.pf-campo textarea,.pf-campo select{background:#F7F9FC;border:2px solid #CBD6E3}
.pf-modal-botones{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:6px}
/* estos dos ganan a la regla general de .pf-modal-caja .pf-btn */
.pf-modal-caja .pf-btn-peligro{background:#D9503F;color:#fff;border:0;cursor:pointer;justify-content:center}
.pf-modal-caja .pf-btn-peligro:hover{background:#BE3E2E}
.pf-modal-caja .pf-btn-cancelar{background:#EEF1F5;color:#41536A;border:0;cursor:pointer;justify-content:center}
.pf-modal-caja .pf-btn-cancelar:hover{background:#E2E7EE}

@media (min-width:760px){
  .pf-sellos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:759px){
  .pf-btn-wsp svg{width:24px;height:24px}
  .pf-sellos{grid-template-columns:1fr 1fr;gap:11px}
  .pf-sello-ico{width:38px;height:38px}
  .pf-sellos b{font-size:16px}
  .pf-sellos em{font-size:12px}
  .pf-nota > b{font-size:32px}
  .pf-modal-botones{grid-template-columns:1fr}
}

/* la franja inferior necesita repartir bien: nota | sellos | contacto */
@media (min-width:760px){
  .pf-banner-abajo{grid-template-columns:auto minmax(0,1fr) minmax(290px,auto);gap:22px;
    align-items:center;padding:18px 26px}
  .pf-sellos{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;min-width:0}
  .pf-sellos li{min-width:0}
  .pf-sellos b{font-size:17px}
  .pf-sellos em{font-size:12.5px;line-height:1.3}
}
@media (min-width:1280px){
  .pf-sellos{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .pf-sello-ico{width:40px;height:40px}
  .pf-sellos b{font-size:16px}
  .pf-sellos em{font-size:12px}
}

/* ============================================================
   ENTREGA 40 — franja inferior del banner con quiebre diagonal.
   Solo esta franja: el banner de arriba (foto, nombre, datos) no
   se toca, y el quiebre NO lo corta.
   ============================================================ */
@media (min-width:900px){
  .pf-banner-abajo{
    background:var(--pf-gris);      /* fondo de página: los botones quedan fuera de la franja */
    padding:0;gap:0;align-items:stretch;
    grid-template-columns:auto minmax(0,1fr) minmax(310px,auto);
  }

  /* bloque oscuro: nota */
  .pf-nota{
    background:var(--pf-azul);border:0;border-radius:0;margin:0;align-self:stretch;
    display:flex;align-items:center;gap:13px;padding:13px 40px 13px 26px;
    clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);
  }
  .pf-nota-ico{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
    background:var(--pf-naranja);color:#fff}
  .pf-nota-ico svg{width:20px;height:20px;fill:#fff}
  .pf-nota > b{font-size:34px;line-height:1}
  .pf-nota-de{font-style:normal;font-size:17px;font-weight:700;color:#8FA3B8;margin-left:-6px}
  .pf-nota .estrella{width:19px;height:19px}
  .pf-nota em{font-size:12.5px;color:#B9C7D6;margin-top:3px}

  /* panel blanco con los cuatro datos, con el quiebre naranjo a la derecha */
  .pf-sellos{
    background:linear-gradient(90deg,#fff calc(100% - 9px),var(--pf-naranja) calc(100% - 9px));
    margin:0 0 0 -26px;padding:13px 52px 13px 34px;align-self:stretch;align-items:center;
    grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
    clip-path:polygon(26px 0,100% 0,calc(100% - 26px) 100%,0 100%);
  }
  .pf-sellos li{gap:11px;padding:0 16px;border-right:1px solid #E7ECF2}
  .pf-sellos li:last-child{border-right:0}
  .pf-sello-ico{width:0;height:0;background:none !important;border-radius:0}
  .pf-sello-ico svg{width:30px;height:30px}
  .pf-sello-ico{width:auto;height:auto;display:block}
  .pf-ico-verde svg{color:#16A34A}
  .pf-ico-naranja svg{color:#F26A1B}
  .pf-ico-azul svg{color:#2B7FEA}
  .pf-ico-morado svg{color:#9333EA}
  .pf-ico-gris svg{color:#94A3B8}
  .pf-sellos b{font-size:16px;color:var(--pf-azul2)}
  .pf-sellos em{font-size:12.5px;color:#5C6B7E;line-height:1.3}
  .pf-sellos .solo-pc{display:flex}

  /* botones, ya fuera de la franja */
  .pf-contacto{padding:10px 0 10px 22px;gap:9px;align-content:center}
  .pf-btn-wsp{padding:13px 20px;font-size:16px}
  .pf-btn-wsp svg{width:24px;height:24px}
  .pf-btn-correo{background:#fff;color:var(--pf-azul2);border:1px solid #DDE4EC;
    padding:12px 20px;font-size:15px;box-shadow:0 1px 3px rgba(18,41,74,.08)}
  .pf-lema{display:flex;align-items:center;gap:8px;margin:2px 0 0;justify-content:center;
    font-size:12.5px;color:#8A99AB;font-weight:600}
  .pf-lema svg{width:18px;height:18px;color:#8A99AB}
}
@media (max-width:899px){
  .pf-nota-ico{display:none}
  .pf-nota-de{font-style:normal;font-size:15px;color:#8FA3B8;margin-left:2px}
  .pf-lema{display:flex;align-items:center;gap:7px;margin:4px 0 0;justify-content:center;
    font-size:12px;color:#B9C7D6;font-weight:600}
  .pf-lema svg{width:16px;height:16px}
}

@media (min-width:900px){
  /* franja más baja y con los íconos del tamaño del render */
  .pf-nota{padding:11px 38px 11px 24px}
  .pf-nota > b{font-size:31px}
  .pf-nota-ico{width:34px;height:34px}
  .pf-sellos{padding:11px 50px 11px 32px}
  .pf-sellos li{padding:0 13px;gap:10px}
  .pf-sello-ico{display:grid;place-items:center;width:34px;height:34px;flex:none}
  .pf-sellos .pf-sello-ico svg{width:30px !important;height:30px !important;stroke-width:1.9}
  .pf-sellos b{font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-sellos em{font-size:12px;line-height:1.25}
  .pf-sellos li > span:last-child{min-width:0}
  .pf-contacto{padding:8px 0 8px 20px}
  .pf-btn-wsp{padding:12px 18px;font-size:15.5px}
  .pf-btn-correo{padding:11px 18px;font-size:14.5px}
}
@media (min-width:1280px){
  .pf-sellos b{font-size:15.5px}
  .pf-sellos em{font-size:12.5px}
  .pf-sellos li{padding:0 16px}
}

@media (min-width:900px){
  /* los títulos van en dos líneas, como el render: nada de recortar con "..." */
  .pf-banner-abajo{grid-template-columns:auto minmax(0,1fr) minmax(280px,auto)}
  .pf-sellos b{white-space:normal;overflow:visible;text-overflow:clip;font-size:14.5px}
  .pf-sellos em{font-size:11.5px}
  .pf-sellos li{padding:0 11px;gap:9px}
  /* íconos del tamaño del render */
  .pf-sellos .pf-sello-ico > svg{width:29px;height:29px}
}

/* ============================================================
   ENTREGA 41 — franja 15% más baja y datos del banner con
   tipografía propia (Barlow Condensed) y más tamaño
   ============================================================ */

/* ---- datos del banner superior: otra fuente, más presencia ---- */
.pf-datos b,
.pf-datos em{font-family:'Barlow Condensed','Archivo',system-ui,sans-serif}
.pf-datos b{
  font-size:23px;font-weight:700;letter-spacing:.005em;line-height:1.1;
  text-transform:uppercase;
}
.pf-datos em{
  font-size:17px;font-weight:500;color:#C6D3E1;line-height:1.15;letter-spacing:.01em;
}
.pf-datos{gap:16px 34px;margin-top:20px}
.pf-datos li{gap:11px;align-items:center}
.pf-datos li > svg{width:26px;height:26px}
.pf-datos .bandera{font-size:27px}
.pf-datos .bandera svg{border-radius:3px}

/* ---- franja inferior: 15% más baja ---- */
@media (min-width:900px){
  .pf-nota{padding:8px 34px 8px 22px;gap:11px}
  .pf-nota-ico{width:30px;height:30px}
  .pf-nota-ico svg{width:17px;height:17px}
  .pf-nota > b{font-size:27px}
  .pf-nota-de{font-size:15px}
  .pf-nota .estrella{width:17px;height:17px}
  .pf-nota em{font-size:11.5px;margin-top:2px}

  .pf-sellos{padding:8px 46px 8px 30px}
  .pf-sellos .pf-sello-ico{width:30px;height:30px}
  .pf-sellos .pf-sello-ico > svg{width:26px;height:26px}
  .pf-sellos b{font-size:13.5px}
  .pf-sellos em{font-size:11px;line-height:1.2}
  .pf-sellos li{padding:0 10px;gap:8px}

  .pf-contacto{padding:6px 0 6px 18px;gap:7px}
  .pf-btn-wsp{padding:10px 16px;font-size:14.5px;gap:9px}
  .pf-btn-wsp svg{width:21px;height:21px}
  .pf-btn-correo{padding:9px 16px;font-size:13.5px}
  .pf-btn-correo svg{width:19px;height:19px}
  .pf-lema{font-size:11.5px;margin-top:1px}
  .pf-lema svg{width:16px;height:16px}
}
@media (max-width:899px){
  .pf-datos b{font-size:19px}
  .pf-datos em{font-size:15px}
  .pf-datos li > svg{width:22px;height:22px}
}

/* ============================================================
   ENTREGA 42 — la franja inferior baja otro 15%
   (lo que manda la altura es la columna de botones, así que se
   ajusta principalmente ahí)
   ============================================================ */
@media (min-width:900px){
  .pf-contacto{padding:4px 0 4px 16px;gap:5px}
  .pf-btn-wsp{padding:8px 15px;font-size:13.5px;gap:8px;border-radius:3px}
  .pf-btn-wsp svg{width:19px;height:19px}
  .pf-btn-correo{padding:7px 15px;font-size:12.5px;border-radius:3px}
  .pf-btn-correo svg{width:17px;height:17px}
  .pf-lema{font-size:10.5px;margin-top:0}
  .pf-lema svg{width:14px;height:14px}

  .pf-nota{padding:6px 30px 6px 20px;gap:10px}
  .pf-nota-ico{width:27px;height:27px}
  .pf-nota-ico svg{width:15px;height:15px}
  .pf-nota > b{font-size:24px}
  .pf-nota-de{font-size:13.5px}
  .pf-nota .estrella{width:15px;height:15px}
  .pf-nota em{font-size:10.5px;margin-top:1px}

  .pf-sellos{padding:6px 42px 6px 28px}
  .pf-sellos .pf-sello-ico{width:26px;height:26px}
  .pf-sellos .pf-sello-ico > svg{width:23px;height:23px}
  .pf-sellos b{font-size:12.5px}
  .pf-sellos em{font-size:10.5px;line-height:1.2}
  .pf-sellos li{padding:0 9px;gap:7px}
}

/* ============================================================
   ENTREGA 43 — bloque de la nota con diseño propio
   ============================================================ */
/* estrellas con relleno parcial */
.pf-frac{position:relative;display:inline-block;line-height:0;white-space:nowrap}
.pf-frac-base,.pf-frac-oro{display:inline-flex;gap:2px;line-height:0}
.pf-frac-base svg{fill:rgba(255,255,255,.22)}
.pf-frac-llena{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;line-height:0}
.pf-frac-oro svg{fill:#FFC53D;filter:drop-shadow(0 1px 3px rgba(255,170,0,.5))}

/* insignia del puntaje */
.pf-nota{gap:13px !important}
.pf-nota-badge{
  display:inline-flex;align-items:baseline;gap:2px;flex:none;
  background:linear-gradient(135deg,#FFB020,#F26A1B);
  border-radius:4px;padding:7px 13px;
  box-shadow:0 4px 14px rgba(242,106,27,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.pf-nota-badge b{font-size:27px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.pf-nota-badge i{font-style:normal;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.85)}
.pf-nota-der{display:flex;flex-direction:column;gap:5px;min-width:0}
.pf-nota-der em{
  font-style:normal;font-size:11px;font-weight:700;color:#BFD0E2;letter-spacing:.03em;
  text-transform:uppercase;
}
/* el ícono y los estilos viejos de la nota ya no se usan */
.pf-nota-ico,.pf-nota-de{display:none}
.pf-nota .estrellas{display:none}

@media (max-width:899px){
  .pf-nota-badge{border-radius:4px;padding:6px 11px}
  .pf-nota-badge b{font-size:23px}
  .pf-nota-der em{font-size:10.5px}
  .pf-frac-base svg,.pf-frac-oro svg{width:17px;height:17px}
}

/* el espacio en blanco entre etiquetas agregaba ancho fantasma y el recorte
   de la última estrella caía fuera: con font-size:0 el ancho es exacto */
.pf-frac{font-size:0}
.pf-frac-base,.pf-frac-oro{font-size:0}
/* separación fija y conocida entre estrellas, para que el recorte calce */
.pf-frac-base,.pf-frac-oro{gap:var(--sep,3px) !important}

/* ============================================================
   ENTREGA 44 — el bloque de la nota 35% más ancho, mismo alto
   ============================================================ */
@media (min-width:900px){
  .pf-nota{
    min-width:364px;                 /* 270px + 35% */
    padding:6px 44px 6px 28px;       /* el extra a la derecha lo come la diagonal */
    gap:18px !important;
  }
  /* la insignia crece a lo ancho, no a lo alto */
  .pf-nota-badge{padding:7px 20px;border-radius:4px}
  .pf-nota-badge b{font-size:28px}
  .pf-nota-badge i{font-size:13.5px}
  /* estrellas más grandes: aprovechan el ancho nuevo y suben la visibilidad */
  .pf-nota-der{gap:6px}
  .pf-nota-der em{font-size:12px;letter-spacing:.06em}
}

@media (min-width:900px){
  /* el contenido se reparte en el ancho nuevo en vez de dejar hueco */
  .pf-nota{justify-content:center;gap:20px !important;padding:6px 40px 6px 26px}
  .pf-nota-badge{padding:8px 22px}
  .pf-nota-badge b{font-size:31px}
  .pf-nota-badge i{font-size:14px}
  .pf-nota-der em{font-size:12.5px}
}

/* ============================================================
   ENTREGA 45 — sin la frase bajo los botones: esa altura se
   recupera para dejar la franja más baja
   ============================================================ */
.pf-lema{display:none}
@media (min-width:900px){
  /* la columna de botones deja de mandar el alto */
  .pf-contacto{padding:3px 0 3px 16px;gap:6px}
  .pf-btn-wsp{padding:9px 16px;font-size:13.5px}
  .pf-btn-correo{padding:8px 16px;font-size:12.5px}

  /* el resto se ajusta al alto nuevo */
  .pf-nota{padding:4px 40px 4px 26px}
  .pf-nota-badge{padding:6px 20px}
  .pf-nota-badge b{font-size:28px}
  .pf-nota-der{gap:5px}
  .pf-sellos{padding:4px 42px 4px 28px}
}

/* ============================================================
   ENTREGA 46 — modal de reporte: foto, validación y confirmación
   ============================================================ */
.pf-caja-reporte{max-width:520px;padding:0;overflow:hidden}
.pf-rep-cab{display:flex;align-items:center;gap:14px;padding:20px 22px;
  background:linear-gradient(100deg,#FFF1EE,#FDE7E3);border-bottom:1px solid #F3C9C2}
.pf-rep-ico{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#D9503F;color:#fff}
.pf-rep-ico svg{width:24px;height:24px}
.pf-caja-reporte h3{margin:0;font-size:20px;color:#8C1D12}
.pf-rep-sub{margin:2px 0 0;font-size:13.5px;color:#8A5248}
.pf-rep-sub b{color:#8C1D12}
.pf-rep-cuerpo{padding:20px 22px 6px}
.pf-caja-reporte .pf-campo{margin:0 0 18px}
.pf-caja-reporte .pf-campo > span{display:block;font-size:14.5px;font-weight:800;
  color:var(--pf-azul2);margin-bottom:7px}
.pf-caja-reporte .pf-campo > span i{font-style:normal;font-weight:600;color:#8A99AB;font-size:13px}
.pf-campo-ayuda{display:block;margin-top:6px;font-size:12px;color:#8A99AB;font-weight:600}
.pf-campo-ayuda.ok{color:#16A34A}

/* zona para subir la foto */
.pf-subir{display:flex;align-items:center;gap:13px;cursor:pointer;
  border:2px dashed #CBD6E3;border-radius:4px;padding:14px 16px;background:#F7F9FC;
  transition:border-color .15s,background .15s}
.pf-subir:hover{border-color:var(--pf-naranja);background:#FFF6EF}
.pf-subir-ico{width:42px;height:42px;border-radius:4px;flex:none;display:grid;place-items:center;
  background:#fff;color:var(--pf-naranja);box-shadow:0 1px 3px rgba(18,41,74,.12)}
.pf-subir-ico svg{width:22px;height:22px}
.pf-subir-txt b{display:block;font-size:14.5px;color:var(--pf-azul2)}
.pf-subir-txt em{display:block;font-style:normal;font-size:12.5px;color:#8A99AB;margin-top:1px}
.pf-subir-vista{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--pf-borde)}
.pf-subir-vista img{display:block;width:100%;max-height:190px;object-fit:cover}
.pf-quitar-foto{position:absolute;right:9px;bottom:9px;border:0;cursor:pointer;
  background:rgba(11,26,48,.88);color:#fff;font-size:12.5px;font-weight:700;
  border-radius:3px;padding:7px 12px}
.pf-quitar-foto:hover{background:#D9503F}

.pf-rep-aviso{background:#F3F5F8;border-radius:4px;padding:12px 14px;font-size:12.5px;
  color:#5C6B7E;line-height:1.45;margin:0 0 12px}
.pf-rep-error{background:#FDECEA;border:1px solid #F3C9C2;border-radius:4px;padding:11px 13px;
  font-size:13px;color:#8C1D12;font-weight:700;margin:0 0 12px}
.pf-caja-reporte .pf-modal-botones{padding:0 22px 20px;margin:0}

/* confirmación de envío */
.pf-rep-listo{text-align:center;padding:34px 26px}
.pf-rep-check{width:74px;height:74px;border-radius:50%;margin:0 auto 16px;display:grid;
  place-items:center;background:#EDFBF1;color:#16A34A;box-shadow:0 0 0 8px rgba(22,163,74,.08)}
.pf-rep-check svg{width:38px;height:38px}
.pf-rep-listo h3{margin:0 0 8px;font-size:22px;color:var(--pf-azul2)}
.pf-rep-listo p{margin:0 0 6px;font-size:14.5px;color:#41536A;line-height:1.5}
.pf-rep-sub2{font-size:13px !important;color:#8A99AB !important}
.pf-btn-listo{background:var(--pf-azul2);color:#fff;border:0;cursor:pointer;
  margin-top:16px;padding:12px 30px;justify-content:center}

@media (max-width:759px){
  .pf-rep-cab{padding:16px}
  .pf-caja-reporte h3{font-size:18px}
  .pf-rep-cuerpo{padding:16px 16px 4px}
  .pf-caja-reporte .pf-modal-botones{padding:0 16px 16px}
  .pf-rep-listo{padding:28px 18px}
}

/* ============================================================
   ENTREGA 47 — arreglos del modal de reporte
   ============================================================ */
/* BUG 1: .pf-caja-reporte tenía overflow:hidden, que anulaba el scroll
   del modal. Al crecer con la foto, los botones quedaban fuera de la
   pantalla y no se podían apretar (por eso "Cancelar" no respondía).
   Ahora la cabecera y los botones quedan fijos y solo el medio rueda. */
.pf-caja-reporte{
  overflow:visible;display:flex;flex-direction:column;max-height:88vh;padding:0;
}
.pf-rep-cab{flex:none}
.pf-rep-cuerpo{flex:1 1 auto;overflow-y:auto;min-height:0}
.pf-caja-reporte .pf-modal-botones{flex:none;background:#fff;border-top:1px solid var(--pf-borde);
  padding:14px 22px}

/* BUG 2: el atributo hidden no ocultaba nada, porque estos elementos
   tienen display propio en el CSS. Ahora se usa la clase .oculto. */
.oculto{display:none !important}

/* foto cargada: confirmación compacta, sin vista previa grande */
.pf-subir-listo{display:flex;align-items:center;gap:12px;border:1px solid #BFE6CB;
  background:#EDFBF1;border-radius:4px;padding:12px 14px}
.pf-subir-check{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#16A34A;color:#fff}
.pf-subir-check svg{width:19px;height:19px}
.pf-subir-datos{flex:1;min-width:0}
.pf-subir-datos b{display:block;font-size:14px;color:#14622F;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pf-subir-datos em{display:block;font-style:normal;font-size:12.5px;color:#4A7C59;margin-top:1px}
.pf-quitar-foto{position:static;flex:none;border:0;cursor:pointer;background:#fff;color:#8C1D12;
  font-size:13px;font-weight:700;border-radius:3px;padding:8px 14px;border:1px solid #F3C9C2}
.pf-quitar-foto:hover{background:#FDECEA}

/* el ícono de la cámara quedaba descentrado: el svg se alineaba por
   la línea base en vez de centrarse en el cuadrado */
.pf-subir-ico{display:flex;align-items:center;justify-content:center;line-height:0}
.pf-subir-ico svg{display:block;margin:0}
.pf-subir-check{display:flex;align-items:center;justify-content:center;line-height:0}
.pf-subir-check svg{display:block}

/* ---------- entrega 79: tarjeta "Cómo trabaja" ---------- */
.pf-condiciones{list-style:none;margin:0;padding:0}
.pf-condiciones li{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid #EDF0F4;font-size:13.5px;line-height:1.4}
.pf-condiciones li:last-child{border-bottom:0}
.pf-condiciones span{color:#6A7686;font-weight:600;font-size:12.5px}
.pf-condiciones b{color:var(--pf-azul, #0B1A30);font-weight:700}
.pf-imprentas-otras{margin-top:10px}
.pf-imprentas-otras li{background:#F3F5F8;border-color:#E2E7EE;color:#33455C}
@media (max-width:759px){
  .pf-condiciones li{grid-template-columns:92px 1fr;padding:7px 0;font-size:12.5px}
  .pf-condiciones span{font-size:11.5px}
}