/* Módulo de contacto — estilos aislados con prefijo .ctf-
   Funciona sobre fondos claros y oscuros: hereda el color de texto del sitio
   y usa fondos/bordes semitransparentes. Acento: --ctf-color (viene de config). */

.ctf-form {
    --ctf-color: #F17D21;
    --ctf-radius: 10px;
    --ctf-border: rgba(128, 128, 128, 0.35);
    --ctf-bg: rgba(128, 128, 128, 0.10);
    --ctf-ok: #22c55e;
    --ctf-err: #ef4444;
    font: inherit;
    color: inherit;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
}
.ctf-form *, .ctf-form *::before, .ctf-form *::after { box-sizing: border-box; }

.ctf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.ctf-group { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.4rem; }
.ctf-group.ctf-half { grid-column: auto; }

.ctf-group label { font-size: 0.9rem; font-weight: 600; opacity: 0.9; }
.ctf-req { color: var(--ctf-color); }

.ctf-form input,
.ctf-form textarea,
.ctf-form select {
    width: 100%;
    font: inherit;
    color: inherit;
    padding: 0.8rem 1rem;
    background: var(--ctf-bg);
    border: 1px solid var(--ctf-border);
    border-radius: var(--ctf-radius);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.ctf-form select option { color: #111; }
.ctf-form textarea { resize: vertical; min-height: 110px; }
.ctf-form input::placeholder,
.ctf-form textarea::placeholder { opacity: 0.55; color: inherit; }

.ctf-form input:focus,
.ctf-form textarea:focus,
.ctf-form select:focus {
    border-color: var(--ctf-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctf-color) 25%, transparent);
}

.ctf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.95rem 1.5rem;
    font: inherit;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: var(--ctf-color);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s, filter .15s, opacity .15s;
}
.ctf-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ctf-btn:disabled { opacity: 0.65; cursor: wait; transform: none; }

.ctf-msg {
    display: none;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: var(--ctf-radius);
    font-size: 0.95rem;
    text-align: center;
}
.ctf-msg.is-ok  { display: block; color: var(--ctf-ok);  background: color-mix(in srgb, var(--ctf-ok) 12%, transparent); }
.ctf-msg.is-err { display: block; color: var(--ctf-err); background: color-mix(in srgb, var(--ctf-err) 12%, transparent); }

/* Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan) */
.ctf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
    .ctf-grid { grid-template-columns: 1fr; }
    .ctf-group.ctf-half { grid-column: 1 / -1; }
}