/* ============================================================================
   Formulario público de registro — Hermandad de Emaús
   Depende de emaus.css (tokens, botones, marca).
   ========================================================================== */

.pagina-form { background: var(--lino-2); }

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.form-cabeza {
    background: var(--noche);
    color: var(--lino);
    padding-block: var(--e3);
    position: relative;
    overflow: hidden;
}
.form-cabeza::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(80% 220% at 82% 0%, rgba(220,161,58,.20) 0%, transparent 60%);
    pointer-events: none;
}
.form-cabeza__caja {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e2); position: relative; z-index: 1;
}
.form-cabeza__volver {
    display: inline-flex; align-items: center; gap: .5rem;
    color: rgba(248,243,233,.80); text-decoration: none;
    font-size: .92rem; font-weight: 500;
    transition: color .2s var(--curva);
}
.form-cabeza__volver:hover { color: var(--lino); }
.form-cabeza__volver svg { width: 1.05em; height: 1.05em; }
@media (max-width: 560px) { .form-cabeza__volver span { display: none; } }

/* ── Envoltura ───────────────────────────────────────────────────────────── */
.form-envoltura { padding-block: clamp(2.5rem, 6vh, var(--e6)) var(--e7); }
.form-columna { width: min(100% - 2.5rem, 780px); }

.form-intro { margin-bottom: var(--e4); }
.form-intro h1 { font-size: clamp(2.1rem, 5.5vw, 3.2rem); margin-bottom: var(--e2); }

/* ── Parroquia preseleccionada por enlace ────────────────────────────────── */
.parroquia-fija {
    display: flex; align-items: center; gap: var(--e2);
    flex-wrap: wrap;
    background: var(--noche-2);
    color: var(--lino);
    border-radius: var(--radio-g);
    padding: var(--e3);
    margin-bottom: var(--e3);
    box-shadow: var(--sombra);
}
.parroquia-fija__icono {
    width: 46px; height: 46px; flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(220,161,58,.16);
    color: var(--pan-cla);
}
.parroquia-fija__icono svg { width: 24px; height: 24px; }
.parroquia-fija > div:nth-child(2) { flex: 1 1 14rem; min-width: 0; }
.parroquia-fija__eti {
    display: block; font-size: .7rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--pan);
}
.parroquia-fija__nombre {
    display: block;
    font-family: var(--display); font-size: 1.16rem; font-weight: 600;
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
    line-height: 1.25; margin-block: .15rem;
}
.parroquia-fija__arc { display: block; font-size: .85rem; color: rgba(248,243,233,.62); }
.parroquia-fija__cambiar {
    color: rgba(248,243,233,.72); font-size: .85rem;
    text-decoration: underline; text-underline-offset: 3px;
    white-space: nowrap;
}
.parroquia-fija__cambiar:hover { color: var(--pan-cla); }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.aviso {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: var(--e2) var(--e3);
    border-radius: var(--radio-g);
    margin-bottom: var(--e3);
    font-size: .96rem;
}
.aviso svg { width: 22px; height: 22px; flex: none; margin-top: .12rem; }
.aviso p { margin: 0; }
.aviso--error { background: var(--rojo-cla); color: var(--rojo); border: 1px solid rgba(158,50,50,.24); }
.aviso--bien  { background: var(--verde-cla); color: var(--verde); border: 1px solid rgba(63,99,80,.24); }

/* ── Formulario ──────────────────────────────────────────────────────────── */
.formulario { display: flex; flex-direction: column; gap: var(--e3); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bloque {
    background: var(--lino);
    border: 1px solid var(--borde);
    border-radius: var(--radio-g);
    padding: var(--e3);
    margin: 0;
    box-shadow: var(--sombra-sua);
}
/* El título va en un div, no en el <legend>: un legend fuera de flujo
   descoloca la rejilla de dos columnas que viene justo debajo.
   El <legend> sigue existiendo, oculto, para los lectores de pantalla. */
.bloque__titulo {
    display: flex; align-items: center; gap: .75rem;
    font-family: var(--display);
    font-size: 1.22rem; font-weight: 600;
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
    letter-spacing: -.01em;
    padding: 0;
    margin-bottom: var(--e3);
}
.bloque__num {
    width: 30px; height: 30px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--barro); color: var(--lino);
    font-family: var(--cuerpo); font-size: .86rem; font-weight: 700;
}

.fila {
    display: grid; gap: var(--e2) var(--e3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.campo { margin-bottom: var(--e3); }
.campo:last-child { margin-bottom: 0; }
.fila .campo { margin-bottom: 0; }
.fila + .campo, .fila + .fila { margin-top: var(--e3); }

.campo label,
.campo__etiqueta {
    display: block;
    font-size: .93rem; font-weight: 600;
    color: var(--texto);
    margin-bottom: .45rem;
}
.req { color: var(--barro); }
.opcional { font-weight: 400; color: var(--texto-sua); font-size: .86em; }

.campo input[type='text'],
.campo input[type='tel'],
.campo input[type='email'],
.campo input[type='date'],
.campo input[type='number'],
.campo select,
.campo textarea {
    width: 100%;
    min-height: 50px;
    padding: .7rem .9rem;
    font-family: var(--cuerpo);
    font-size: 1rem;                 /* 16px: evita el zoom automático en iOS */
    color: var(--texto);
    background: var(--lino);
    border: 1.5px solid var(--lino-3);
    border-radius: var(--radio);
    transition: border-color .18s var(--curva), box-shadow .18s var(--curva), background-color .18s var(--curva);
    -webkit-appearance: none;
    appearance: none;
}
.campo input:hover, .campo select:hover { border-color: var(--tinta-sua); }
.campo input:focus, .campo select:focus {
    outline: none;
    border-color: var(--barro);
    box-shadow: 0 0 0 3px rgba(162,71,42,.16);
    background: #fff;
}
.campo input::placeholder { color: #A79880; }

.campo select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5142' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 1.05rem;
    padding-right: 2.6rem;
}
.campo input[type='date'] { min-height: 50px; }

.campo__ayuda {
    margin: .4rem 0 0;
    font-size: .84rem;
    color: var(--texto-sua);
    max-width: none;
}
.campo__error {
    display: flex; align-items: flex-start; gap: .4rem;
    margin: .45rem 0 0;
    font-size: .87rem; font-weight: 500;
    color: var(--rojo);
    max-width: none;
}
.campo__error svg { width: 16px; height: 16px; flex: none; margin-top: .16rem; }

.campo--mal input,
.campo--mal select { border-color: var(--rojo); background: #FEF9F8; }
.campo--mal .opciones .opcion__marco { border-color: rgba(158,50,50,.55); }

/* ── Opciones tipo tarjeta (rama del retiro) ─────────────────────────────── */
.opciones {
    display: grid; gap: var(--e2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.opcion { display: block; cursor: pointer; }
.opcion input {
    position: absolute; opacity: 0;
    width: 1px; height: 1px;
}
.opcion__marco {
    display: flex; align-items: center; gap: .75rem;
    min-height: 60px;
    padding: .85rem 1rem;
    border: 1.5px solid var(--lino-3);
    border-radius: var(--radio-g);
    background: var(--lino);
    transition: border-color .18s var(--curva), background-color .18s var(--curva),
                box-shadow .18s var(--curva);
}
.opcion:hover .opcion__marco { border-color: var(--tinta-sua); }
.opcion__punto {
    width: 22px; height: 22px; flex: none;
    border: 2px solid var(--lino-3);
    border-radius: 50%;
    position: relative;
    transition: border-color .18s var(--curva);
}
.opcion__punto::after {
    content: '';
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: var(--barro);
    transform: scale(0);
    transition: transform .2s var(--curva);
}
.opcion__texto { font-weight: 600; font-size: 1rem; }
.opcion input:checked + .opcion__marco {
    border-color: var(--barro);
    background: #FBF4EE;
    box-shadow: 0 0 0 3px rgba(162,71,42,.12);
}
.opcion input:checked + .opcion__marco .opcion__punto { border-color: var(--barro); }
.opcion input:checked + .opcion__marco .opcion__punto::after { transform: scale(1); }
.opcion input:focus-visible + .opcion__marco {
    outline: 3px solid var(--barro);
    outline-offset: 3px;
}

/* ── Pie del formulario ──────────────────────────────────────────────────── */
.form-pie {
    display: flex; flex-direction: column; gap: var(--e2);
    padding-top: var(--e1);
}
.form-pie__nota {
    font-size: .86rem;
    color: var(--texto-sua);
    max-width: none;
    margin: 0;
}
.form-pie .btn { min-height: 58px; font-size: 1.05rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Página de gracias
   ════════════════════════════════════════════════════════════════════════ */
.gracias {
    background: var(--lino);
    border: 1px solid var(--borde);
    border-radius: var(--radio-g);
    padding: clamp(2rem, 6vw, 3.5rem);
    box-shadow: var(--sombra);
    text-align: center;
}
.gracias__sello {
    width: 84px; height: 84px;
    margin: 0 auto var(--e3);
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--verde-cla);
    color: var(--verde);
    animation: sello-entra .6s var(--curva) both;
}
.gracias__sello svg { width: 42px; height: 42px; }
@keyframes sello-entra {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.gracias h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.gracias p { margin-inline: auto; }
.gracias__acciones {
    display: flex; flex-wrap: wrap; gap: var(--e2);
    justify-content: center; margin-top: var(--e3);
}
.gracias__siguiente {
    text-align: left;
    background: var(--lino-2);
    border-radius: var(--radio-g);
    padding: var(--e3);
    margin-top: var(--e4);
}
.gracias__siguiente h2 {
    font-size: 1.15rem;
    font-family: var(--cuerpo);
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: var(--e2);
}
.gracias__siguiente ol { margin: 0; padding-left: 1.2rem; color: var(--texto-sua); }
.gracias__siguiente li { margin-bottom: .5rem; }
.gracias__siguiente li:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .gracias__sello { animation: none; }
}

/* En pantallas estrechas la cabecera no debe partirse en dos renglones */
@media (max-width: 480px) {
    .form-cabeza .marca__sub { white-space: nowrap; font-size: .58rem; letter-spacing: .12em; }
    .form-cabeza .marca__sello { width: 34px; height: 34px; }
    .form-cabeza .marca__nombre { font-size: 1.05rem; }
}

/* El emblema, sobre la cabecera oscura, necesita su disco de lino */
.form-cabeza .marca__sello {
    background: var(--lino);
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}