/* =========================================================================
   CONTACTO
   Tenia anchos fijos (215px, 150px, 290px) que desbordaban en movil. Misma
   tarjeta centrada que el login y el formulario de prueba.
   ========================================================================= */

.contacto {
    display: flex; align-items: flex-start; justify-content: center;
    min-height: calc(100vh - var(--cabecera));
    padding: 48px 20px 64px;
    background:
        radial-gradient(900px 420px at 50% 0%, rgba(234,88,12,.14), transparent 62%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.contacto .ajuste { width: 100%; max-width: 620px; padding: 0; }

.contacto h1 {
    margin: 0 0 10px; text-align: center;
    font-size: 1.7rem; font-weight: 800; color: #fff;
}

.contacto .popupcontent,
.contacto .realizado,
.contacto .norealizado {
    padding: 36px 34px 30px;
    background: var(--blanco);
    border-radius: var(--r-bloque);
    box-shadow: var(--sombra-xl);
}
/* Los dos avisos solo se muestran cuando el modulo inyecta su <style> */
.contacto .realizado, .contacto .norealizado { display: none; text-align: center; }

.contacto .popupcontent > p { color: var(--texto-flojo); margin-bottom: 22px; }

.contacto .tableformlogin { display: grid; gap: 18px; max-width: none; }
.contacto .cellformlogin { min-width: 0; }
.contacto .cellformlogin span {
    display: block; margin-bottom: 7px;
    font-size: .74rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--texto-flojo);
}
.contacto input, .contacto textarea { width: 100%; }
.contacto textarea { resize: vertical; min-height: 130px; }

.contacto .buttonsubmit { width: 100%; margin-top: 4px; }
/* El boton real del captcha esta oculto: lo dispara validateFormRegistro() */
.contacto #buttonrecaptcha { display: none; }

.contacto .buttonreturnprincipal { margin-top: 22px; }

@media (max-width: 560px) {
    .contacto { padding: 26px 14px 44px; }
    .contacto .popupcontent,
    .contacto .realizado,
    .contacto .norealizado { padding: 28px 20px 24px; border-radius: var(--r-tarjeta); }
    .contacto h1 { font-size: 1.45rem; }
}