/* ═══════════════════════════════════════════════════════════════════════════
   BL · CARD + FORMULARIO · para las páginas de captación (profesionales, etc.)
   ---------------------------------------------------------------------------
   Complementa a bl-secciones.css: aquella trae el hero y las secciones; esta,
   la card única con lista de ventajas y el formulario. Usa los mismos tokens de
   la marca. Se carga con:
       <link rel="stylesheet" href="/assets/bl-form.css">
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── card única: imagen + ventajas ── */
.pro-sec{padding:clamp(30px,5vh,60px) 0 0}
.pro-card{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);overflow:hidden;background:#fff}
.pro-card-img{position:relative;min-height:300px;background:#101010}
.pro-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pro-card-in{padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center}
.pro-cat{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.pro-card-in h2{margin-top:12px;font-size:clamp(23px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
.pro-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin:22px 0 0;padding:0}
.pro-list li{display:flex;gap:11px;align-items:flex-start;font-size:clamp(15px,1.2vw,17px);color:var(--gray);line-height:1.45}
.pro-list li svg{width:19px;height:19px;flex-shrink:0;margin-top:1px;stroke:var(--ink);fill:none;stroke-width:2}
@media(max-width:820px){
  .pro-card{grid-template-columns:1fr}
  .pro-card-img{min-height:0;aspect-ratio:16/10}
}

/* ── formulario ── */
/* La sección va en gris claro y los campos en blanco: sobre blanco los campos
   no se distinguían (blanco sobre blanco). Así los campos «flotan» sobre el
   fondo y el borde los remata. */
.pf-sec{padding:clamp(50px,9vh,110px) 0;background:var(--paper)}
.pf-head{max-width:640px;margin-bottom:clamp(26px,4vh,42px)}
.pf-head h2{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
.pf-head p{margin-top:14px;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--gray)}
.pf-form{max-width:820px}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
.pf-field{display:flex;flex-direction:column;gap:8px}
.pf-field.full{grid-column:1/-1}
.pf-field label{font-size:15px;font-weight:500;color:var(--ink)}
.pf-field input,.pf-field select,.pf-field textarea{font:inherit;font-size:16px;padding:13px 15px;
  border:1px solid #cfcfca;border-radius:10px;background:#fff;color:var(--ink);width:100%;
  box-shadow:0 1px 2px rgba(16,16,16,.03);transition:border-color .2s,box-shadow .2s}
.pf-field input::placeholder,.pf-field textarea::placeholder{color:var(--gray-2)}
.pf-field textarea{min-height:120px;resize:vertical}
.pf-field input:focus,.pf-field select:focus,.pf-field textarea:focus{outline:2px solid var(--ink);
  outline-offset:-1px;border-color:var(--ink)}
.pf-field input:disabled,.pf-field select:disabled{background:#f3f3f3;color:var(--gray-2);cursor:not-allowed}
/* El de enviar es la acción principal del formulario, así que se queda relleno,
   pero más delgado y sin verde: al pasar por encima se vacía. */
.pf-submit{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(20px,2.6vh,28px);
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:10px;
  padding:11px 24px;font-size:16px;font-weight:500;line-height:1.25;
  cursor:pointer;transition:background .25s,color .25s}
.pf-submit svg{width:17px;height:17px}
.pf-submit:hover{background:transparent;color:var(--ink)}
.pf-submit:disabled{opacity:.55;cursor:wait;pointer-events:none}
.bl-cap-error{display:none;margin:16px 0 0;font-size:14.5px;line-height:1.45;color:#b42318}
.bl-cap-error.on{display:block}
.pf-fine{margin-top:14px;font-size:14px;color:var(--gray)}
.pf-thanks{display:none;border:1px solid var(--line);border-radius:16px;background:#fff;
  padding:clamp(28px,4vw,44px);max-width:640px}
.pf-thanks.show{display:block}
.pf-thanks h3{font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.pf-thanks p{margin-top:12px;font-size:17px;line-height:1.55;color:var(--gray)}
@media(max-width:640px){.pf-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pf-submit:hover{transform:none}}

/* ── consentimiento y aviso de datos ──────────────────────────────────────
   El checkbox va dentro de la rejilla y ocupa el ancho entero. No reutiliza
   .pf-field porque aquel apila la etiqueta encima del campo, y aquí la
   casilla tiene que ir al lado del texto, no debajo. */
.pf-check{grid-column:1/-1;display:flex;align-items:flex-start;gap:12px;margin-top:4px;
  font-size:14px;line-height:1.55;color:var(--gray);cursor:pointer}
.pf-check input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--ink)}
.pf-check a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pf-check .obl{opacity:.6}
/* la nota legal larga, en voz baja: hay que ponerla, pero no compite */
.pf-legal{margin-top:20px;max-width:820px;font-size:12.5px;line-height:1.6;color:var(--gray-2)}
.pf-legal b{font-weight:500;color:var(--gray)}
.pf-legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}