/* 57 Clicks Lead Template v2.0.0 · assets/css/lead-form.css
 * ESTILO LEY del formulario de leads (canon: 00_SYSTEM/email-stack/lead-template-v2/README.md). Este archivo NO se edita
 * por cliente. La marca entra SOLO por las variables --lf-* declaradas en el CSS del sitio, sobre .lf o sobre :root.
 * Estructura fija: tarjeta · eyebrow · título · subtítulo · campos con etiqueta visible · Turnstile · botón a todo el ancho
 * · confianza · privacidad · estado aria-live. Móvil primero: inputs de 48px y 16px (sin zoom en iOS), toques de 44px o más.
 */
:where(.lf) {   /* valores por defecto con especificidad CERO: la marca del sitio (.mi-marca { --lf-… }) siempre gana */
  --lf-accent: #C8102E;          /* botón, foco, enlaces */
  --lf-accent-ink: #FFFFFF;      /* texto sobre el botón */
  --lf-surface: #FFFFFF;         /* fondo de la tarjeta */
  --lf-field-bg: #FFFFFF;
  --lf-ink: #0E2342;             /* texto principal */
  --lf-muted: #5B6B7F;           /* etiquetas secundarias, microcopy */
  --lf-border: rgba(14, 35, 66, .18);
  --lf-error: #B42318;
  --lf-ok: #067647;
  --lf-radius: 14px;
  --lf-field-radius: 10px;
  --lf-font: inherit;
  --lf-display: inherit;         /* fuente del título */
  --lf-shadow: 0 18px 50px rgba(14, 35, 66, .12);
  --lf-gap: 14px;                /* aire entre campos */
  --lf-pad: clamp(20px, 4vw, 32px);   /* relleno de la tarjeta */
  /* opcionales: --lf-button-bg (admite degradado; si falta, --lf-accent) · --lf-eyebrow-font */
}
.lf {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--lf-pad);
  background: var(--lf-surface);
  color: var(--lf-ink);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  font-family: var(--lf-font);
  text-align: left;
  container-type: inline-size;   /* las dos columnas dependen del ANCHO DE LA TARJETA, no del viewport (tarjeta de 400px en un hero) */
}
.lf *, .lf *::before, .lf *::after { box-sizing: border-box; }
:where(.lf--dark) {
  --lf-surface: #111418; --lf-field-bg: rgba(255, 255, 255, .04); --lf-ink: #F4F1EA; --lf-muted: #A9A49A;
  --lf-border: rgba(255, 255, 255, .16); --lf-error: #FDA29B; --lf-ok: #75E0A7; --lf-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.lf-eyebrow { margin: 0 0 6px; color: var(--lf-accent); font-family: var(--lf-eyebrow-font, inherit); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lf-title { margin: 0; font-family: var(--lf-display); font-size: clamp(22px, 3.2vw, 28px); line-height: 1.15; color: var(--lf-ink); }
.lf-sub { margin: 8px 0 0; color: var(--lf-muted); font-size: 15px; line-height: 1.5; }

.lf-form { display: grid; grid-template-columns: 1fr; gap: var(--lf-gap); margin-top: calc(var(--lf-gap) + 4px); }
@container (min-width: 520px) { .lf-form { grid-template-columns: 1fr 1fr; } .lf-field--full, .lf-form > .lf-full { grid-column: 1 / -1; } }
/* Tarjeta estrecha (p. ej. 400px en un hero): con lf-form--compact los campos sin --full van en pareja desde 300px de contenido */
@container (min-width: 300px) { .lf-form--compact { grid-template-columns: 1fr 1fr; } .lf-form--compact .lf-field--full { grid-column: 1 / -1; } }

.lf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lf-label { font-size: 13px; font-weight: 700; color: var(--lf-ink); }
.lf-label .lf-opt { font-weight: 400; color: var(--lf-muted); }
.lf-input, .lf-select, .lf-textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px; line-height: 1.3; color: var(--lf-ink);
  background: var(--lf-field-bg); border: 1px solid var(--lf-border); border-radius: var(--lf-field-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.lf--dark .lf-input, .lf--dark .lf-select, .lf--dark .lf-textarea { color-scheme: dark; }
.lf-textarea { min-height: 112px; resize: vertical; }
.lf-select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--lf-muted) 50%), linear-gradient(135deg, var(--lf-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.lf-input::placeholder, .lf-textarea::placeholder { color: var(--lf-muted); opacity: .8; }
.lf-input:focus-visible, .lf-select:focus-visible, .lf-textarea:focus-visible { outline: none; border-color: var(--lf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-accent) 28%, transparent); }
.lf-input[aria-invalid="true"], .lf-select[aria-invalid="true"], .lf-textarea[aria-invalid="true"] { border-color: var(--lf-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-error) 22%, transparent); }

.lf-turnstile { grid-column: 1 / -1; min-height: 0; }
.lf-turnstile:empty { display: none; }

.lf-submit {
  grid-column: 1 / -1; width: 100%; min-height: 52px; padding: 14px 20px;
  font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .02em;
  color: var(--lf-accent-ink); background: var(--lf-button-bg, var(--lf-accent)); border: 0; border-radius: var(--lf-field-radius);
  cursor: pointer; transition: transform .12s ease, filter .15s ease;
}
.lf-submit:hover { filter: brightness(1.06); }
.lf-submit:active { transform: translateY(1px); }
.lf-submit:focus-visible { outline: 3px solid var(--lf-ink); outline-offset: 3px; }
.lf-submit[disabled] { opacity: .7; cursor: progress; }

.lf-trust { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; color: var(--lf-muted); font-size: 13px; }
.lf-trust li::before { content: "✓"; margin-right: 6px; color: var(--lf-accent); font-weight: 800; }
.lf-privacy { grid-column: 1 / -1; margin: 0; color: var(--lf-muted); font-size: 12px; line-height: 1.5; }
.lf-privacy a { color: inherit; }

.lf-status { grid-column: 1 / -1; min-height: 1.2em; margin: 0; font-size: 14px; font-weight: 600; }
.lf-status[data-kind="error"] { color: var(--lf-error); }
.lf-status[data-kind="busy"] { color: var(--lf-muted); }
.lf-status[data-kind="ok"] { color: var(--lf-ok); }

/* Honeypot: fuera de pantalla, nunca display:none (algunos bots lo detectan). El servidor lo trata como señal, no como descarte. */
.lf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.lf-done { grid-column: 1 / -1; padding: 8px 0; }
.lf-done-title { font-family: var(--lf-display); font-size: 24px; font-weight: 800; color: var(--lf-ink); }
.lf-done p { margin: 8px 0 0; color: var(--lf-muted); }

@media (prefers-reduced-motion: reduce) { .lf-input, .lf-select, .lf-textarea, .lf-submit { transition: none; } }