:root {
            --rojo-sangre: #7A0F16;
            --dorado: #C9A34E;
            --marfil: #F6F1E7;
            --blanco: #FFFFFF;
            --azul-oscuro: #0E1A2B;
            --negro-suave: #1A1A1A;
            --texto-suave: #5E6470;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            min-height: 100%;
        }

        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background:
                radial-gradient(
                    circle at top,
                    rgba(201, 163, 78, 0.16),
                    transparent 38%
                ),
                linear-gradient(
                    160deg,
                    var(--marfil) 0%,
                    var(--blanco) 54%,
                    #F3EEE5 100%
                );
            color: var(--negro-suave);
        }

        button {
            font: inherit;
        }

        .pagina_bienvenida {
            min-height: 100vh;
            min-height: 100svh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding:
                max(24px, env(safe-area-inset-top))
                20px
                max(24px, env(safe-area-inset-bottom));
        }

        .contenedor_bienvenida {
            width: 100%;
            max-width: 430px;
        }

        .pantalla_bienvenida {
            display: none;
            text-align: center;
            animation: aparecer 450ms ease-out;
        }

        .pantalla_bienvenida.activa {
            display: block;
        }

        .marca_sabaoth {
            margin-bottom: 42px;
        }

        .simbolo_sabaoth {
            width: 86px;
            height: 86px;
            margin: 0 auto 18px;
            border: 1px solid rgba(201, 163, 78, 0.65);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.72);
            box-shadow: 0 14px 40px rgba(14, 26, 43, 0.10);
        }

        .simbolo_sabaoth span {
            color: var(--dorado);
            font-size: 34px;
            line-height: 1;
        }

        .nombre_sabaoth {
            margin: 0;
            color: var(--azul-oscuro);
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 5px;
        }

        .titulo_bienvenida {
            margin: 0 0 16px;
            color: var(--azul-oscuro);
            font-size: clamp(34px, 9vw, 48px);
            line-height: 1.08;
            letter-spacing: -1.4px;
        }

        .subtitulo_bienvenida {
            margin: 0 auto;
            max-width: 350px;
            color: var(--texto-suave);
            font-size: 17px;
            line-height: 1.65;
        }

        .frase_destacada {
            display: block;
            margin-top: 14px;
            color: var(--rojo-sangre);
            font-weight: 700;
        }

        .acciones_bienvenida {
            margin-top: 42px;
        }

        .boton_principal {
            width: 100%;
            min-height: 56px;
            border: 0;
            border-radius: 16px;
            padding: 16px 22px;
            background: var(--rojo-sangre);
            color: var(--blanco);
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 12px 28px rgba(122, 15, 22, 0.22);
            transition:
                transform 180ms ease,
                box-shadow 180ms ease,
                opacity 180ms ease;
        }

        .boton_principal:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 32px rgba(122, 15, 22, 0.27);
        }

        .boton_principal:active {
            transform: translateY(1px);
        }

        .boton_principal:focus-visible {
            outline: 3px solid rgba(201, 163, 78, 0.55);
            outline-offset: 4px;
        }

        .boton_preparado {
            opacity: 0.58;
            cursor: not-allowed;
            box-shadow: none;
        }

        .nota_siguiente_fase {
            margin: 13px 0 0;
            color: var(--texto-suave);
            font-size: 13px;
            line-height: 1.4;
        }

        .campo_nombre {
            width: 100%;
            min-height: 56px;
            margin-top: 30px;
            padding: 15px 18px;
            border: 1px solid rgba(14, 26, 43, 0.18);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.88);
            color: var(--azul-oscuro);
            font-size: 18px;
            text-align: center;
            outline: none;
            box-shadow: 0 8px 24px rgba(14, 26, 43, 0.07);
            transition:
                border-color 180ms ease,
                box-shadow 180ms ease;
        }

        .campo_nombre::placeholder {
            color: rgba(94, 100, 112, 0.72);
        }

        .campo_nombre:focus {
            border-color: var(--dorado);
            box-shadow: 0 0 0 4px rgba(201, 163, 78, 0.16);
        }

        .ayuda_campo {
            margin: 10px 0 0;
            color: var(--texto-suave);
            font-size: 13px;
        }

        .boton_volver {
            margin-top: 22px;
            border: 0;
            background: transparent;
            color: var(--azul-oscuro);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
        }

        @keyframes aparecer {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 480px) {
            .pagina_bienvenida {
                align-items: stretch;
            }

            .contenedor_bienvenida {
                display: flex;
                align-items: center;
            }

            .marca_sabaoth {
                margin-bottom: 34px;
            }

            .acciones_bienvenida {
                margin-top: 36px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .pantalla_bienvenida,
            .boton_principal {
                animation: none;
                transition: none;
            }
        }


/* Pantalla 4: datos personales */

.marca_sabaoth_reducida {
    margin-bottom: 26px;
}

.titulo_formulario {
    font-size: clamp(30px, 8vw, 42px);
}

.grupo_datos_personales {
    margin-top: 30px;
    display: grid;
    gap: 18px;
    text-align: left;
}

.grupo_campo {
    display: grid;
    gap: 8px;
}

.grupo_campo label {
    color: var(--azul-oscuro);
    font-size: 14px;
    font-weight: 700;
}

.campo_dato {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid rgba(14, 26, 43, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--azul-oscuro);
    font: inherit;
    font-size: 17px;
    outline: none;
    box-shadow: 0 8px 24px rgba(14, 26, 43, 0.06);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.campo_dato:focus {
    border-color: var(--dorado);
    box-shadow: 0 0 0 4px rgba(201, 163, 78, 0.16);
}

.acciones_formulario {
    margin-top: 30px;
}


/* Acceso secundario para usuarios existentes */
.enlace_login_existente {
    display: inline-block;
    margin-top: 22px;
    color: var(--texto-suave);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.enlace_login_existente:hover {
    color: var(--rojo-sangre);
    text-decoration: underline;
}

.enlace_login_existente:focus-visible {
    outline: 3px solid rgba(201, 163, 78, 0.55);
    outline-offset: 4px;
    border-radius: 4px;
}