/* Solo la página de contacto (base.njk lo carga si pageKey == 'contact'). */
/* Envío: botón con indicador giratorio; aviso si tarda; recuadro de resultado (éxito / error). */
.form-submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }
.form-spinner { display: none; width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.form-submit.is-sending { cursor: progress; opacity: 0.85; }
.form-submit.is-sending .form-spinner { display: inline-block; animation: form-spin 0.8s linear infinite; }
@keyframes form-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .form-submit.is-sending .form-spinner { animation: none; border-right-color: currentColor; opacity: 0.6; } }
.form-slow { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.form-result { margin-top: var(--s-4); padding: var(--s-5); border-radius: 10px; border: 1px solid; display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); align-items: start; }
.form-result:focus { outline: 3px solid var(--gold); outline-offset: 3px; }
.form-result p { margin: 0 0 var(--s-3); grid-column: 2; }
.form-result .btn { grid-column: 2; justify-self: start; }
.form-result-title { font-weight: 700; font-size: 1.15rem; }
.form-result-icon { grid-row: 1 / span 3; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-weight: 700; }
.form-result--success { background: #edf7f0; border-color: #1d6b3a; color: #14482a; }
.form-result--success .form-result-icon { background: #1d6b3a; }
.form-result--success .form-result-icon::before { content: "✓"; }
.form-result--error { background: #fbeeee; border-color: var(--alert); color: #6b1f1f; }
.form-result--error .form-result-icon { background: var(--alert); }
.form-result--error .form-result-icon::before { content: "!"; }

/* Teléfono con el código del país de residencia como prefijo fijo (se oculta si el número empieza con +). */
.phone-input { display: flex; align-items: stretch; }
.phone-input input { flex: 1; min-width: 0; }
.phone-prefix { display: flex; align-items: center; padding: 0 var(--s-3); border: 1px solid var(--line); border-right: 0; border-radius: 6px 0 0 6px; background: var(--cream); color: var(--navy); font-weight: 600; white-space: nowrap; }
.phone-prefix[hidden] { display: none; }
.phone-prefix:not([hidden]) + input { border-top-left-radius: 0; border-bottom-left-radius: 0; }