/* Perfil de masajista (includes/perfil/ficha.php).
   Colores: las variables cortas (--txt, --terra, --verde...) las define tema.css (seccion 3) a partir de sus fichas;
   lo que se dibuja fuera de .pf usa las fichas (--c-*) directo */
.pf{color:var(--txt);font-family:Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.6;padding:18px 0 40px}
.pf *{box-sizing:border-box}
.pf-cont{max-width:1140px;margin:0 auto;padding:0 16px}
.pf a{color:var(--terra)}
.pf img{max-width:100%;height:auto;display:block}
.pf picture{display:block}
.pf-retrato picture{width:100%;height:100%}
.pf-migas{font-size:13px;color:var(--txt2);margin:0 0 14px}
.pf-migas a{color:var(--txt2);text-decoration:underline}
.pf-h1{font-family:Lustria,Georgia,serif;font-size:30px;line-height:1.15;margin:0 0 4px;color:var(--txt);font-weight:400}
.pf-sub{margin:0;color:var(--txt2);font-size:14px}
.pf-h2{font-family:Lustria,Georgia,serif;font-size:22px;margin:0 0 14px;color:var(--txt);font-weight:400}
.pf-h2 span{color:var(--txt2);font-size:16px}
.pf-bloque{margin-top:36px}

/* quien es */
.pf-quien{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pf-retrato{display:block;flex-shrink:0;width:92px;height:92px;border-radius:50%;overflow:hidden;border:3px solid var(--c-sup);box-shadow:var(--s1)}
.pf-retrato img{width:100%;height:100%;object-fit:cover;object-position:top}

/* datos */
.pf-datos{list-style:none;margin:0 0 18px;padding:0}
.pf-datos li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--borde)}
.pf-datos li:last-child{border-bottom:0}
.pf-datos .ico{color:var(--terra);width:18px;text-align:center;flex-shrink:0}
.pf-datos small{display:block;font-size:12px;color:var(--txt2);line-height:1.2}
.pf-datos span{font-size:15px;line-height:1.35}

/* tarjeta de preguntas */
.pf-preguntas{border:1px solid var(--borde);border-radius:14px;padding:16px;background:#fff}
.pf-preguntas-tit{display:flex;align-items:center;gap:8px;font-weight:500;font-size:16px;margin:0 0 12px}
.pf-preguntas-tit .ico{color:var(--verde);font-size:20px}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pf a.pf-chip{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1.5px solid var(--verde);border-radius:22px;color:var(--verde);background:#fff;font-size:14px;font-weight:500;text-decoration:none;line-height:1.2}
.pf a.pf-chip:hover,.pf a.pf-chip:focus-visible{background:var(--verde-s)}
.pf-cta,.pf a.pf-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border-radius:10px;background:var(--verde);color:#fff;font-size:16px;font-weight:500;text-decoration:none;border:0}
.pf-cta:hover,.pf a.pf-cta:hover{background:var(--verde-h);color:#fff}
.pf-cta .ico{font-size:20px}
.pf-nota{font-size:12px;color:var(--txt2);margin:10px 0 0;text-align:center}

/* sobre mi */
.pf-desc p{margin:0 0 12px;overflow-wrap:anywhere}
.pf-desc p:last-child{margin-bottom:0}
.pf-desc.pf-corto{max-height:10.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.pf-leer{margin-top:8px;background:none;border:0;padding:6px 0;color:var(--terra);font-weight:500;font-size:15px;cursor:pointer;text-decoration:underline}

/* fotos en mosaico */
.pf-grilla{column-count:2;column-gap:8px}
.pf-foto{display:block;border-radius:10px;overflow:hidden;background:var(--suave);margin-bottom:8px;break-inside:avoid}
.pf-foto img{width:100%;transition:transform .3s}
.pf-foto:hover img{transform:scale(1.03)}

/* comentarios */
.pf-coms{display:grid;gap:12px}
.pf-com{display:flex;gap:12px;background:var(--suave);border-radius:12px;padding:14px}
.pf-com img{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.pf-com p{margin:0;font-size:15px;overflow-wrap:anywhere}
.pf .pf-com-cab{font-size:13px;color:var(--txt2);margin-bottom:4px}
.pf-com-cab strong{color:var(--txt);font-weight:500}

/* formulario de comentarios */
.pf-coms-vacio{color:var(--txt2);margin:0 0 4px}
.pf-coms-aviso{font-size:13px;color:var(--txt2);margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--suave)}
.pf-com .pf-com-pie{margin:8px 0 0}
.pf-bajar{background:none;border:0;padding:2px 0;color:var(--txt2);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.pf-bajar:hover{color:var(--terra)}
.pf-bajar[disabled]{text-decoration:none;cursor:default;color:var(--verde)}
.pf-form{margin-top:18px;border:1px solid var(--borde);border-radius:14px;padding:16px;background:#fff}
.pf-form[hidden],.pf-form-msg[hidden]{display:none}
.pf-form-tit{font-family:Lustria,Georgia,serif;font-size:18px;font-weight:400;margin:0 0 4px;color:var(--txt)}
.pf-form-nota{font-size:13px;color:var(--txt2);margin:0 0 12px}
.pf-campo{display:block;font-size:14px;font-weight:500;margin:0 0 12px}
.pf-campo small{font-weight:400;color:var(--txt2)}
.pf-campo input,.pf-campo textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--c-borde-control);border-radius:var(--r-control);font:inherit;font-weight:400;font-size:16px;color:var(--txt);background:#fff}
.pf-campo textarea{resize:vertical;min-height:96px}
.pf-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#pf-turnstile{margin:0 0 12px}
#pf-turnstile:empty{margin:0}
.pf-form-msg{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:14px;background:var(--c-error-s);color:var(--c-error)}
.pf-form-msg.pf-ok{background:var(--verde-s);color:var(--verde-h)}
.pf-enviar{display:block;width:100%;min-height:48px;border:0;border-radius:10px;background:var(--terra);color:#fff;font:inherit;font-weight:500;font-size:16px;cursor:pointer}
.pf-enviar[disabled]{opacity:.6;cursor:default}
.pf-form-legal{font-size:12px;color:var(--txt2);margin:10px 0 0}
.pf-form-legal a{text-decoration:underline;text-underline-offset:2px}
@media (min-width:768px){.pf-enviar{width:auto;padding:0 26px}}

/* otras masajistas */
.pf-otras{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pf a.pf-otra{text-decoration:none;color:var(--txt)}
.pf-otra img{border-radius:10px;aspect-ratio:384/538;object-fit:cover;width:100%;margin-bottom:6px}
.pf-otra span{display:block;font-weight:500;font-size:15px}
.pf-otra small{color:var(--txt2);font-size:13px}
.pf-mas{margin:14px 0 0}

/* barra fija que aparece al pasar la tarjeta de preguntas */
.pf-barra{position:fixed;z-index:1000;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;background:#fff;padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .25s ease}
.pf-barra img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.pf-barra-nombre{flex:1;min-width:0;font-weight:500;font-size:15px;line-height:1.2;color:var(--c-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-barra-nombre small{display:block;font-weight:400;font-size:12px;color:var(--c-texto2)}
.pf-barra .pf-cta{min-height:46px;border-radius:24px;padding:0 20px;background:var(--c-accion);color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;font-weight:500}
.pf-barra.pf-visible{transform:none}
body.pf-lb-abierto .pf-barra{transform:translateY(160%)}

/* aviso con la alternativa si la app de WhatsApp no se abrio */
.pf-wa-aviso{position:fixed;z-index:1200;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));display:none;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#1f1d1e;color:#fff;font-family:Roboto,Arial,sans-serif;font-size:14px;line-height:1.3;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.pf-wa-aviso.pf-visible{display:flex}
.pf-wa-aviso span{flex:1}
.pf-wa-aviso a{color:#7be0a8;font-weight:500;text-decoration:underline;white-space:nowrap}
.pf-wa-aviso button{background:none;border:0;color:#fff;font-size:22px;line-height:1;padding:4px 6px;cursor:pointer}
@media (min-width:992px){.pf-wa-aviso{left:50%;right:auto;width:480px;margin-left:-240px;bottom:96px}}
.pf-turnstile-wa{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:1300}

/* boton dentro del visor de fotos */
.pf-lb-cta{position:fixed;left:0;right:0;bottom:0;z-index:1100;display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(20,18,19,.94);color:#fff;font-family:Roboto,Arial,sans-serif}
.pf-lb-cta span{flex:1;font-size:15px;font-weight:500;line-height:1.3}
.pf-lb-cta small{display:block;font-weight:400;font-size:12px;color:#c8c8c8}
.pf-lb-cta .pf-cta{min-height:46px;border-radius:24px;padding:0 20px;background:var(--c-accion);color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;font-weight:500;font-size:15px}
/* En pantallas anchas la barra del visor no cruza la pantalla: se hace tarjeta y se va al hueco de
   la derecha, que con una foto vertical está siempre vacío. Así no le roba alto a la foto y no la
   tapa: con 1280 px la foto pasa de 458x686 a 499x748 (medido el 28/09). visor.js se da cuenta solo
   de que ya no ocupa todo el ancho y deja de reservarle lugar abajo. */
@media (min-width:1200px){
  .pf-lb-cta{left:auto;width:auto;max-width:340px;right:24px;bottom:24px;border-radius:14px;
             padding:14px 16px;box-shadow:0 6px 24px rgba(0,0,0,.45)}
}

@media (min-width:768px){
  .pf-otras{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:992px){
  /* el tema pone overflow:hidden en #page y en el menu: eso anula position:sticky. clip recorta igual sin anularlo */
  #page,.wsmenucontainer{overflow:clip}
  .pf-h1{font-size:34px}
  .pf-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
  /* la ficha queda fija SOLO si entra entera en la pantalla (lo decide perfil.js): nada queda escondido abajo */
  .pf-ficha{position:sticky;top:96px}
  .pf-ficha.pf-no-fija{position:static}
  .pf-retrato{width:84px;height:84px}
  .pf-quien{margin-bottom:10px}
  .pf-preguntas{padding:14px}
  .pf-preguntas-tit{margin-bottom:10px}
  .pf-chips{margin-bottom:10px}
  .pf a.pf-chip{min-height:38px;padding:7px 13px}
  .pf-cta,.pf a.pf-cta{min-height:48px}
  .pf-nota{margin-top:8px}
  .pf-datos{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;margin-bottom:12px}
  .pf-datos .pf-dato-ancho{grid-column:1 / -1}
  .pf-datos li{border-bottom:0;padding:5px 0}
  .pf-contenido .pf-bloque:first-child{margin-top:0}
  .pf-grilla{column-count:3}
  .pf-barra{left:50%;right:auto;bottom:16px;width:480px;margin-left:-240px;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.14);transform:translateY(calc(100% + 48px))}
}