/* =====================================================================
   MUNINFOR · Formulario de lead (captación)
   CSS propio cargado en crudo (como muninfor-theme.css): no depende del
   build de Tailwind. Usa la paleta del tema oscuro con fallbacks.
   ===================================================================== */

.lf-wrap { max-width: 720px; margin: 0 auto; }

.lf-form {
    background: var(--mun-surface, #18213f);
    border: 1px solid var(--mun-border, rgba(255,255,255,.12));
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.lf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) { .lf-grid { grid-template-columns: 1fr; } }

.lf-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.lf-grid .lf-field { margin-bottom: 0; }

.lf-field label,
.lf-check span { color: var(--mun-text, #f3f6ff); font-size: 14px; font-weight: 600; }
.lf-field label { margin-bottom: 6px; }
.lf-opt { color: var(--mun-text-dim, #8e99bf); font-weight: 400; }

.lf-form input[type="text"],
.lf-form input[type="email"],
.lf-form input[type="tel"],
.lf-form input[type="number"],
.lf-form select,
.lf-form textarea {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--mun-border, rgba(255,255,255,.14));
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--mun-text, #f3f6ff);
    font-size: 15px;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.lf-form textarea { resize: vertical; }
.lf-form select { appearance: none; }
.lf-form ::placeholder { color: var(--mun-text-dim, #8e99bf); }

.lf-form input:focus,
.lf-form select:focus,
.lf-form textarea:focus {
    outline: none;
    border-color: var(--mun-cyan, #22d3ee);
    box-shadow: 0 0 0 3px rgba(34,211,238,.25);
}
.lf-form [aria-invalid="true"] { border-color: #f87171; }

.lf-field--sum { max-width: 220px; }

.lf-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 6px 0 14px;
}
.lf-check input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--mun-cyan, #22d3ee); }
.lf-check a { color: var(--mun-cyan, #22d3ee); text-decoration: underline; }

.lf-error { color: #fca5a5; font-size: 13px; margin-top: 6px; }
.lf-error--top { margin: 0 0 16px; padding: 10px 14px; background: rgba(248,113,113,.12); border-radius: 10px; }

.lf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    margin-top: 6px;
    padding: 14px 24px;
    border: none; border-radius: 999px;
    font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
    background: var(--mun-grad, linear-gradient(135deg, #22d3ee 0%, #3b82f6 45%, #a855f7 100%));
    box-shadow: 0 10px 30px rgba(59,130,246,.4);
    transition: transform .2s, box-shadow .2s, opacity .2s;
}
.lf-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(168,85,247,.5); }
.lf-btn[disabled] { opacity: .65; cursor: progress; transform: none; }

.lf-note { color: var(--mun-text-dim, #8e99bf); font-size: 13px; text-align: center; margin-top: 12px; }

.lf-success {
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.4);
    color: var(--mun-text, #f3f6ff);
    border-radius: 16px;
    padding: 22px 24px;
    display: flex; flex-direction: column; gap: 4px;
}
.lf-success strong { color: #4ade80; font-size: 18px; }

/* Honeypot: fuera de la vista, accesible para bots, no para humanos. */
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }