/* forms.css — Formularios (contacto / preinscripción) con estilo Versailles */

.vs-formwrap { max-width: 640px; }

.vs-form { display: grid; gap: 18px; }
.vs-form-row { display: grid; gap: 18px; }
@media (min-width: 600px) { .vs-form-row.cols-2 { grid-template-columns: 1fr 1fr; } }

.vs-field { display: flex; flex-direction: column; gap: 7px; }
.vs-field label { font-size: 0.9rem; font-weight: 600; color: #1a1a2e; }
.vs-field label .req { color: #c4365a; }

.vs-field input,
.vs-field select,
.vs-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    font-size: 1rem;
    font-family: inherit;
    color: #1a1a2e;
    background: #fff;
    border: 1.5px solid #d8d8e0;
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.vs-field textarea { resize: vertical; min-height: 130px; }

.vs-field input::placeholder,
.vs-field textarea::placeholder { color: #9aa0aa; }

.vs-field input:focus,
.vs-field select:focus,
.vs-field textarea:focus {
    outline: none;
    border-color: #c4365a;
    box-shadow: 0 0 0 4px rgba(196, 54, 90, 0.12);
}

/* Estado de error */
.vs-field.has-error input,
.vs-field.has-error select,
.vs-field.has-error textarea { border-color: #dc2626; background: #fff5f5; }
.vs-field-error { font-size: 0.82rem; color: #b91c1c; font-weight: 600; }

/* Consentimiento */
.vs-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: #4b4b5a; line-height: 1.5; }
.vs-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: #c4365a; flex-shrink: 0; }
.vs-consent a { color: #9e2b48; font-weight: 600; }

/* Honeypot (oculto a humanos) */
.vs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Botón enviar */
.vs-form-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 30px; font-size: 1rem; font-weight: 700; color: #fff;
    background: var(--vs-gradient, linear-gradient(135deg,#c4365a,#9e2b48));
    border: none; border-radius: 50px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(196,54,90,0.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.vs-form-submit:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(196,54,90,0.45); }
.vs-form-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.vs-form-submit .spin { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: vs-spin .7s linear infinite; display: none; }
.vs-form-submit.loading .spin { display: inline-block; }
@keyframes vs-spin { to { transform: rotate(360deg); } }

/* ============================================
   PÁGINA CONTACTE
   ============================================ */
.vs-page { color: #20202e; }
.vs-page-hero {
    background: var(--vs-dark, #1a1a2e); color: #fff; text-align: center;
    padding: 116px 24px 64px; position: relative; overflow: hidden;
}
.vs-page-hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--vs-gradient, #c4365a); }
.vs-page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em; }
.vs-page-hero p { font-size: 1.15rem; color: rgba(255,255,255,0.78); max-width: 620px; margin: 0 auto; }

.vs-contact-grid {
    max-width: 1100px; margin: -36px auto 0; padding: 0 24px 80px;
    display: grid; gap: 30px; grid-template-columns: 1fr;
    position: relative; z-index: 2;
}
@media (min-width: 900px) { .vs-contact-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }

.vs-card {
    min-width: 0;
    background: #fff; border-radius: 18px; padding: 34px;
    box-shadow: 0 14px 50px rgba(0,0,0,0.10); border: 1px solid #f0f0f4;
}
@media (max-width: 480px) { .vs-card { padding: 24px 20px; } }
.vs-card h2 { font-size: 1.4rem; font-weight: 800; color: #14141f; margin: 0 0 20px; }

.vs-contact-list { display: grid; gap: 18px; margin-bottom: 26px; }
.vs-contact-list .item { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.vs-contact-list .item > div:last-child { min-width: 0; overflow-wrap: break-word; }
.vs-contact-list .ico {
    width: 44px; height: 44px; min-width: 44px; border-radius: 50%;
    background: rgba(196,54,90,0.12); display: flex; align-items: center; justify-content: center;
}
.vs-contact-list .ico svg { width: 20px; height: 20px; fill: #c4365a; }
.vs-contact-list .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .5px; color: #8a8a96; margin-bottom: 2px; }
.vs-contact-list .value { color: #1a1a2e; font-weight: 600; }
.vs-contact-list .value a { color: #1a1a2e; text-decoration: none; }
.vs-contact-list .value a:hover { color: #c4365a; }
.vs-map { border-radius: 14px; overflow: hidden; border: 1px solid #ececf1; line-height: 0; }
.vs-map iframe { width: 100%; height: 240px; border: 0; }

/* Mensajes de resultado */
.vs-alert { padding: 16px 20px; border-radius: 12px; font-size: 0.98rem; line-height: 1.5; margin-bottom: 22px; border: 1px solid; }
.vs-alert--ok { background: #f0faf4; border-color: #bfe6cd; color: #14532d; }
.vs-alert--ok strong { color: #15803d; }
.vs-alert--err { background: #fff5f5; border-color: #f5c2c2; color: #7f1d1d; }